/* Innova /inicio-contenedores/ — variante de la home donde las 6
   secciones top-level son Spectra Containers (wp:uagb/container) en
   lugar de Groups. El Hero y el CTA "Retos legales" siguen siendo
   wp:cover (no se convierten). Los grupos internos (.innova-stats,
   .innova-stat, .innova-service-card, .innova-map-card,
   .innova-strategy__placeholder) tampoco se convierten.

   Cargado solo en la página con slug "inicio-contenedores".

   --------------------------------------------------------------------
   Cambios respecto a innova-page.css (que usa wp:group en todas las
   secciones):

   1. Spectra Container envuelve hijos en `.uagb-container-inner-blocks-wrap`
      en lugar del `.wp-block-group__inner-container` que generan los
      wp:group. Por eso los selectores que iban a por el inner-container
      del SECTION-LEVEL hay que duplicarlos para el wrap nuevo:
        .innova-section > .wp-block-group__inner-container
        .innova-section > .uagb-container-inner-blocks-wrap
      (Para los GRUPOS INTERNOS — .innova-stats, etc. — el selector
       original con wp-block-group__inner-container sigue funcionando.)

   2. Spectra Container es `display: flex` por defecto y solo emite
      `flex-direction: column` cuando se ha configurado en el editor con
      atributos no-default. Si los containers se insertan
      programáticamente con atributos mínimos (como aquí) la dirección
      cae a `row` y los hijos quedan en horizontal. Forzamos column.

   3. La home usa hero (wp:cover, NO container) → bloque separador
      → más secciones. Para que no aparezcan strips blancos entre
      hermanos top-level, ya no necesitamos el truco de
      `.innova-acts-flow > * { margin: 0 !important }` porque cada
      sección es root container directa del documento.
   -------------------------------------------------------------------- */
/*  v2 ============================== ANTI-SCROLL HORIZONTAL ============================== */
/* Clip cualquier desbordamiento horizontal en estas landings. El marquee
   con `.alignfull` y otros elementos con margin: calc(50% - 50vw) pueden
   pasarse 1-2px del viewport por redondeo, creando una barra de scroll
   horizontal que desplaza visualmente todo el contenido centrado. Esta
   regla solo se carga vía wp_enqueue_style en las páginas con
   inicio-contenedores / home-ok, así que no afecta al resto del sitio. */
html, body {
    overflow-x: hidden;
}

/* ============================== FLEX-DIRECTION OVERRIDE ============================== */
/* Spectra container.css: `display: flex` sin direction → cae a row.
   Forzamos column en TODOS los containers que insertamos en esta page. */
.innova-section,
.innova-section > .uagb-container-inner-blocks-wrap,
.innova-section-marquee,
.innova-section-marquee > .uagb-container-inner-blocks-wrap {
    flex-direction: column !important;
    align-items: stretch;
}

/* ============================== RITMO COMÚN DE SECCIONES ============================== */
/* Mismo ritmo vertical/horizontal en todas las secciones, incluidas las
   wp:cover (Hero, CTA) que no llevan la clase .innova-section.
   `!important` aquí para vencer cualquier regla per-block que Spectra
   pueda inyectar (las `.uagb-block-XXXX { padding: 0 ... }` que
   genera al renderizar containers con atributos sin paddings explícitos). */
.innova-section,
.innova-section-marquee,
.innova-hero,
.innova-cta {
    padding: 96px clamp(24px, 6vw, 96px) !important;
    box-sizing: border-box;
}

.innova-cta {
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    .innova-section,
    .innova-section-marquee,
    .innova-hero,
    .innova-cta { padding: 64px clamp(20px, 5vw, 32px) !important; }
}
@media (max-width: 480px) {
    .innova-section,
    .innova-section-marquee,
    .innova-hero,
    .innova-cta { padding: 48px 16px !important; }
}

/* ============================== ANCHO DE CONTENIDO ============================== */
/* Constreñimos el ancho del contenido y lo centramos. Con containers el
   wrap es `.uagb-container-inner-blocks-wrap` (no
   `.wp-block-group__inner-container`). Cover blocks siguen exponiendo
   `.wp-block-cover__inner-container`. La sección de stats override más abajo. */
.innova-section > .uagb-container-inner-blocks-wrap,
.innova-section-marquee > .uagb-container-inner-blocks-wrap,
.innova-hero > .wp-block-cover__inner-container,
.innova-cta > .wp-block-cover__inner-container {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.innova-stats-section > .uagb-container-inner-blocks-wrap { max-width: 1280px; }
.innova-section .wp-block-columns,
.innova-section-marquee .wp-block-columns { gap: 48px; }

/* citygov fuerza .alignwide a 88vw con max-width: none; lo neutralizamos. */
body.sidebar_hide .innova-section .alignwide,
body.sidebar_hide .innova-section-marquee .alignwide,
body.sidebar_hide .innova-hero .alignwide,
body.sidebar_hide .innova-cta .alignwide {
    position: static;
    left: auto;
    width: auto;
    max-width: 100%;
}

/* ============================== TIPOGRAFÍA COMÚN ============================== */
.innova-eyebrow {
    color: #3B5FFF;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0 0 16px;
}
.innova-section__heading,
.innova-services__heading,
.innova-testimonials__heading {
    color: #0A2E5C;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.15;
    margin: 0 0 24px;
}
.innova-section__text {
    color: #4A5568;
    font-size: 17px;
    line-height: 1.6;
    margin: 0 0 32px;
}

/* ============================== HERO ============================== */
/* El hero es wp:cover (no convertido). Idéntico a innova-page.css.
   Nota: el padding base lo establece la regla "Ritmo común de secciones"
   más arriba (con !important para ganar a Spectra), aquí solo subimos
   el vertical en desktop. En mobile heredamos los breakpoints comunes. */
.innova-hero {
    color: #FFFFFF;
    background-color: #050B1E;
    margin-bottom: 0px !important;
}
@media (min-width: 769px) {
    .innova-hero { padding: 120px clamp(24px, 6vw, 96px) !important; }
}
.innova-hero .wp-block-cover__image-background {
    object-position: center right;
}
.innova-hero > .wp-block-cover__inner-container {
    width: 100% !important;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.innova-hero__inner { max-width: 720px; width: 100%; }
.innova-hero__heading {
    color: #FFFFFF;
    font-size: clamp(40px, 5.5vw, 64px);
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.05;
    margin: 0 0 20px;
}
.innova-hero__accent { color: #6BB1FF; }
.innova-hero__subtitle {
    color: rgba(255,255,255,0.85);
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.55;
    margin: 0 0 36px;
    max-width: 560px;
}
.innova-hero__buttons.wp-block-buttons { gap: 16px; flex-wrap: wrap; }
.innova-hero__btn--primary .wp-block-button__link {
    color: #FFFFFF;
    background-color: #3B5FFF;
    border-radius: 999px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 500;
    border: 0;
}
.innova-hero__btn--secondary .wp-block-button__link {
    color: #FFFFFF;
    background-color: transparent;
    border: 1px solid #3E4964;
    border-radius: 999px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 500;
}

/* ============================== STRATEGY ============================== */
.innova-strategy { background-color: #FFFFFF; }
.innova-strategy__heading {
    color: #0A2E5C;
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 600;
    line-height: 1.15;
    margin: 0;
}
.innova-strategy__text {
    color: #4A5568;
    margin-top: 20px;
    font-size: 18px;
    line-height: 1.6;
}
.innova-strategy__placeholder {
    border-radius: 12px;
    background-color: #F4F6FA;
    padding: 100px 40px;
    text-align: center;
}
.innova-strategy__placeholder p {
    color: #6A7A93;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
}

/* ============================== MARQUEE DE LOGOS (sección) ============================== */
/* En innova-page.css esta sección no tiene clase y se estila por
   selectores in-line. Aquí le dimos className "innova-section-marquee"
   al convertirla a container. */
.innova-section-marquee {
    background-color: #FFFFFF;
    /* Padding vertical específico (más comprimido que el resto). Le toca
       !important porque la regla común "Ritmo común de secciones" usa
       !important para ganarle a Spectra, y aquí necesitamos sobrescribir
       sólo los valores verticales conservando el horizontal. */
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}
@media (max-width: 768px) {
    .innova-section-marquee {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }
}
/* Centrado a prueba de balas. Si algo se cuela, ya sabemos que la causa
   está fuera de estos sospechosos habituales (transform heredado, flex
   alignment, padding asimétrico, max-width residual). */
.innova-section-marquee h3 {
    color: #0A2E5C;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 48px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    overflow-wrap: break-word;
    word-break: break-word;
    align-self: stretch !important;
    transform: none !important;
    direction: ltr !important;
    float: none !important;
    position: static !important;
}
/* En mobile el texto "CONOCE A LAS STARTUPS DE LA 10ª EDICIÓN" mide
   demasiado para caber en una sola línea con la tipografía actual:
   reducimos font-size y letter-spacing para que respire. */
@media (max-width: 768px) {
    .innova-section-marquee h3 {
        font-size: 14px;
        letter-spacing: 2px;
        line-height: 1.4;
        margin-bottom: 32px !important;
    }
}
@media (max-width: 480px) {
    .innova-section-marquee h3 {
        font-size: 13px;
        letter-spacing: 1.5px;
    }
}

/* ============================== ECOSYSTEM ============================== */
.innova-ecosystem { background-color: #F4F6FA; }
.innova-map-card {
    border-radius: 12px;
    overflow: hidden;
    background: transparent;
}
.innova-map-card__inner {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}
.innova-map-card__inner p {
    text-align: center;
    color: #6A7A93;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
}

/* ============================== CTA RETOS ============================== */
.innova-cta {
    background-color: #F4F6FA;
    padding-top: 60px;
    padding-bottom: 60px;
    min-height: 0;
    margin-bottom: 0px !important;
}
.innova-cta__heading {
    color: #0A2E5C;
    font-size: clamp(36px, 4.5vw, 52px);
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin: 0 0 28px;
}
.innova-cta__divider.wp-block-separator {
    border: 0;
    border-top: 2px solid #3B5FFF;
    width: 60px;
    margin: 0 auto 0 0;
    opacity: 1;
}
.innova-cta__text {
    color: #4A5568;
    margin: 28px 0 30px !important;
    font-size: 17px;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .innova-cta__image img {
        width: 244px !important;
        height: 140px !important;
    }
}

@media (max-width: 480px) {
    .innova-cta__image img {
        width: 165px !important;
        height: 100px !important;
    }
}


/* ============================== STATS ============================== */
.innova-stats-section {
    background-color: #050B1E;
    padding-top: 50px;
    padding-bottom: 50px;
}
/* `.innova-stats` SIGUE siendo wp:group (no se ha convertido), por eso su
   inner-container es el clásico .wp-block-group__inner-container. La grid
   va sobre ese inner-container, no sobre la sección. */
.innova-stats > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 32px;
}
@media (max-width: 960px) {
    .innova-stats > .wp-block-group__inner-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .innova-stats > .wp-block-group__inner-container { grid-template-columns: 1fr; }
}

.innova-stat {
    text-align: center;
    background: transparent;
    padding: 0;
}
.innova-stat__icon {
    width: 64px; height: 64px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(59,95,255,0.15);
    color: #6BB1FF;
}
.innova-stat__icon svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}
.innova-stat__number {
    color: #FFFFFF;
    font-size: clamp(40px, 4vw, 56px);
    font-weight: 700;
    margin: 0;
    line-height: 1;
    text-align: center;
}
.innova-stat__label {
    color: #A0AEC0;
    font-size: 14px;
    margin: 12px 0 0;
    text-align: center;
    letter-spacing: .5px;
}

.wp-block-uagb-counter--number .wp-block-uagb-counter__number span,
.wp-block-uagb-counter--number .wp-block-uagb-counter__number {
	color: #FFFFFF;
    font-size: 40px;
    font-weight: 700;
    margin: 0;
    line-height: 1;
    text-align: center;
}

/* ============================== SERVICES ============================== */
.innova-services { background-color: #F4F6FA; }
.innova-services .innova-eyebrow { text-align: center; }
.innova-services__heading { text-align: center; margin-bottom: 64px; }

/* Cada card es un wp:cover. La imagen viene del propio bloque (cliente la
   edita desde el panel "Imagen del bloque" de Cover). Solo damos el
   marco visual: bordes redondeados, padding interno, altura igual.
   Anulamos el min-height: 430px por defecto del cover para que la card
   se ajuste al contenido. */
.innova-service-card {
    border-radius: 12px;
    padding: 48px 40px;
    height: 100%;
    box-sizing: border-box;
    color: inherit;
    min-height: 0;
    overflow: hidden;
}
/* La imagen de cover llena todo el bloque (position: absolute; inset: 0).
   El border-radius de la card recorta esquinas también para la imagen. */
.innova-service-card .wp-block-cover__image-background {
    border-radius: inherit;
}
/* El inner-container del cover es donde vive realmente el contenido
   (emoji label + heading + texto + botón). Tiene que pintarse por
   encima de la imagen y permitir flex-column si el cliente lo configura. */
.innova-service-card > .wp-block-cover__inner-container {
    width: 100%;
    z-index: 1;
}
/* Fallback de color por si la imagen del cover se borra o falla al
   cargar — la card sigue saliendo blanca en vez de transparente. */
.innova-service-card--startups,
.innova-service-card--community {
    background-color: #FFFFFF;
}
.innova-service-card__emoji {
    font-size: 48px;
    margin: 0 0 24px;
    line-height: 1;
}
.innova-service-card__heading {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 12px;
}
.innova-service-card__text {
    margin: 12px 0 24px;
    font-size: 16px;
    line-height: 1.6;
    color: #2D3748;
}

/* ============================== TESTIMONIALS ============================== */
.innova-testimonials-section { background-color: #FFFFFF; }
.innova-testimonials-section .innova-eyebrow { text-align: center; }
.innova-testimonials__heading { text-align: center; margin-bottom: 56px; }

/* El wrapper .innova-testimonials usa `margin: 0 auto` para centrarse,
   pero al vivir dentro del `display: flex; flex-direction: column` que le
   metemos al .uagb-container-inner-blocks-wrap de Spectra, las auto-margins
   absorben el espacio sobrante y el wrapper se queda al ancho de su
   contenido en vez de estirarse al 100% del padre. Resultado: la flecha
   derecha (position: absolute; right:0 del wrapper) queda fuera de la
   zona visual. Forzamos width: 100% para que el wrapper SIEMPRE ocupe
   todo el ancho disponible y los dos extremos sean simétricos. */
.innova-testimonials-section .innova-testimonials {
    width: 100%;
    box-sizing: border-box;
}

/* Responsive del carrusel — overrides locales sobre el CSS global del
   Customizer (ESTILOS-EXTRA.md). En mobile bajamos el padding interno
   del wrapper (deja menos margen muerto a los lados) y hacemos las
   flechas un poco más pequeñas en pantallas extra-pequeñas. */
@media (max-width: 768px) {
    .innova-testimonials-section .innova-testimonials {
        padding: 0 40px;
    }
    .innova-testimonials-section .innova-testimonials__nav {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}
@media (max-width: 480px) {
    .innova-testimonials-section .innova-testimonials {
        padding: 0 36px;
    }
    .innova-testimonials-section .innova-testimonials__nav {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
}

/* Defensa: que la sección no clipe nada horizontalmente. Las flechas viven
   en `right: 0` del wrapper; cualquier overflow-hidden heredado las
   ocultaría. */
.innova-testimonials-section { overflow-x: visible; }

/* ============================== SHARED BUTTONS ============================== */
.innova-btn--dark .wp-block-button__link {
    color: #FFFFFF;
    background-color: #0A2E5C;
    border-radius: 999px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 500;
    border: 0;
}
.innova-btn--dark .wp-block-button__link:hover {
    background-color: #14437a;
}

/* ====================== CITYGOV SCHEME OVERRIDES ======================
 * Mismo override que en innova-page.css: la skin.css de citygov fuerza
 * `.scheme_original h1-h6 { color: #6186ff }`. Reafirmamos colores con
 * `body` como prefijo para vencer la cascada en front. */
body .innova-cta__heading,
body .innova-section__heading,
body .innova-services__heading,
body .innova-testimonials__heading,
body .innova-strategy__heading { color: #0A2E5C; }
body .innova-section-marquee h3 { color: #0A2E5C; }
body .innova-hero__heading { color: #FFFFFF; }
body .innova-stat__number { color: #FFFFFF; }
body .innova-btn--dark .wp-block-button__link { background-color: #0A2E5C; color: #FFFFFF; }
body .innova-btn--dark .wp-block-button__link:hover { background-color: #14437a; }
body .innova-hero__btn--primary .wp-block-button__link { background-color: #3B5FFF; color: #FFFFFF; }
body .innova-hero__btn--secondary .wp-block-button__link { background-color: transparent; color: #FFFFFF; }