/* Innova /acelera-contenedores/ — variant of the Acelera landing where
   the SECTION-LEVEL wrappers are Spectra Container blocks (wp:uagb/container)
   instead of core Group blocks. Inner cards / grids / items remain as
   wp:group. Loaded only on the page with slug "acelera-contenedores".

   Section containers used (className → role):
     .innova-section-5meses     : top-level alignfull, light gray bg
     .innova-acts-flow          : top-level alignfull wrapper of 4 sub-sections
     .innova-act                : white inner section
     .innova-act--dark          : dark gradient inner section (combined w/ .innova-act)
     .innova-acts-cta           : final CTA inner section
     .innova-section-calendario : top-level alignfull, white bg ("Las 5 fases")

   Inner-content classes (still wp:group, identical to spectra/group versions):
     .innova-act__content, .innova-tabs-row, .innova-tab-pill, .innova-tab-icon,
     .innova-vert-grid, .innova-vert-card, .innova-vert-icon,
     .innova-perfil2-card, .innova-perfil2-grid, .innova-perfil2-item,
     .innova-perfil2-icon, .innova-perfil2-text,
     .innova-benef3-grid, .innova-benef3-card, .innova-benef3-icon,
     .innova-timeline, .innova-timeline__phase, .innova-timeline__number,
     .innova-timeline__content, .innova-hero-badge, .innova-cta-button,
     .innova-cta-mega.

   --------------------------------------------------------------------------
   IMPORTANT — what changes vs. innova-acelera-spectra.css:

   Spectra Containers wrap their children in an extra
   `.uagb-container-inner-blocks-wrap` div. So a class-on-container selector
   like `.innova-acts-flow > *` no longer matches the actual children — it
   matches the wrap. We need to walk through it: `.innova-acts-flow >
   .uagb-container-inner-blocks-wrap > *`.

   Spectra Containers are also `display: flex` by default (with
   `flex-direction: column` from the per-block CSS). Our `.innova-act`
   sections expect normal block flow with `padding: 96px ...`. We keep the
   padding via our class rule and rely on Spectra's column direction so
   inner content stacks correctly. We do override `display` only where we
   need to (e.g. inner grids that must be `display: grid`).
   -------------------------------------------------------------------------- */


/* new jc 07072026 */
/* ============================== ANTI-SCROLL HORIZONTAL ============================== */
/* Clip cualquier desbordamiento horizontal. Solo aplica en esta landing
   porque el CSS se encola por slug. */
html, body {
    overflow-x: hidden;
}

/* ============================== OCULTAR BARRA DE TÍTULO DE CITYGOV ============================== */
/* citygov pinta `.top_panel_title` (con el nombre de la página y migas)
   entre el menú principal y el contenido en todas las páginas que no
   sean is_home() / is_front_page(). En esta landing es ruido visual
   (rompe el flujo del hero alignfull), así que la ocultamos por
   completo. Solo afecta a /acelera-contenedores/ porque este CSS se
   encola únicamente para ese slug. */
.top_panel_title {
    display: none !important;
}
/* new jc 07072026 */
/* ============================== FLEX-DIRECTION OVERRIDE ============================== */
/* Spectra's container.css applies `display: flex` to .wp-block-uagb-container
   and to .uagb-container-inner-blocks-wrap (for alignfull root containers).
   The `flex-direction: column` only ships in the per-block CSS that Spectra
   generates when the block has been fully configured in the editor — for
   programmatically-inserted containers with minimal attrs, that rule is
   missing and children render in a horizontal row instead of a vertical
   stack. Force column direction on every container we inject in this page. */
.innova-section-5meses,
.innova-section-5meses > .uagb-container-inner-blocks-wrap,
.innova-acts-flow,
.innova-acts-flow > .uagb-container-inner-blocks-wrap,
.innova-act,
.innova-act > .uagb-container-inner-blocks-wrap,
.innova-acts-cta,
.innova-acts-cta > .uagb-container-inner-blocks-wrap,
.innova-section-calendario,
.innova-section-calendario > .uagb-container-inner-blocks-wrap {
    flex-direction: column !important;
    align-items: stretch;
}

/* ============================== SECTION BASE ============================== */
.innova-act {
    padding: 96px clamp(24px, 6vw, 96px);
    background-color: #FFFFFF;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .innova-act { padding: 64px clamp(20px, 5vw, 32px); }
}
.innova-act__content {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.innova-act--dark {
    background: linear-gradient(180deg, #0F1B3D 0%, #050B1E 100%);
    color: #FFFFFF;
}

/* The two new top-level container sections (replaced what used to be plain
   wp:group wrappers with inline styles in the spectra/group versions). */
.innova-section-5meses {
    background-color: #F4F6FA;
    padding: 96px clamp(24px, 6vw, 96px);
    box-sizing: border-box;
}
.innova-section-calendario {
    background-color: #FFFFFF;
    padding: 96px clamp(24px, 6vw, 96px);
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .innova-section-5meses,
    .innova-section-calendario { padding: 64px clamp(20px, 5vw, 32px); }
}

/* The inner-blocks-wrap of our root containers should not enforce its own
   horizontal padding/centering — let our outer padding control width. The
   wrap is constrained to the page reading width. */
.innova-section-5meses > .uagb-container-inner-blocks-wrap,
.innova-section-calendario > .uagb-container-inner-blocks-wrap {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* citygov forces .alignwide elements to 88vw with !max-width: none, which
   bursts our containers. Neutralize within container sections. */
body.sidebar_hide .innova-act .alignwide,
body.sidebar_hide .innova-act .alignfull,
body.sidebar_hide .innova-section-5meses .alignwide,
body.sidebar_hide .innova-section-5meses .alignfull,
body.sidebar_hide .innova-section-calendario .alignwide,
body.sidebar_hide .innova-section-calendario .alignfull {
    position: static;
    left: auto;
    width: auto;
    max-width: 100%;
}

/* Crea los divs circulares */
.circulo {
	aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
}


/* ============================== HERO BADGE ============================== */
.innova-hero-badge {
    display: inline-flex !important;
    align-items: center;
    width: max-content;
    gap: 10px;
}

/* ONIZEA - Eliminar margen en blanco inferior Hero */
.hero_acelera {
	margin-bottom: 0px !important;
}

@media (min-width: 768px) {
    .hero_p { padding-right: 53% }
}

.grupo-hero {
    padding-top: 10px;
}

/* ============================== TABS / PILLS ============================== */
.innova-tabs-row {
    gap: 12px !important;
    flex-wrap: wrap;
}
.innova-tab-pill {
    background: #FFFFFF;
    border: 1px solid #E5EAF2;
    border-radius: 999px;
    padding: 10px 20px !important;
    box-shadow: 0 2px 8px rgba(10, 46, 92, 0.05);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    gap: 10px !important;
}
.innova-tab-pill:hover {
    box-shadow: 0 6px 16px rgba(59, 95, 255, 0.15);
    transform: translateY(-2px);
    border-color: rgba(59, 95, 255, 0.3);
}
.innova-tab-icon {
    flex-shrink: 0;
    width: max-content !important;
}
.innova-tab-icon .uagb-icon-wrapper,
.innova-tab-icon .uagb-icon-wrapper svg,
.innova-tab-icon svg { color: #3B5FFF; fill: currentColor; }

@media (max-width: 600px) {
    .innova-tab-pill { padding: 8px 14px !important; }
    .innova-tab-pill p { font-size: 11px !important; }
}

/* ============================== VERTICALS GRID ============================== */
/* En WP modernos (6.5+), wp:group con `layout: type:grid` mete una capa
   intermedia `.wp-block-group__inner-container` con la clase
   `is-layout-grid`, y es ahí donde WP aplica el grid layout. En WPs más
   antiguos las cards son hijas directas de `.innova-vert-grid`.
   `:has()` nos deja distinguir ambos casos: si existe el wrapper interno,
   hacemos el outer transparente con `display: contents` para que el grid
   real (el del inner-container) gobierne el layout sin caer en grids
   anidados (gotcha 3.9 de MAQUETACION.md). */
.innova-vert-grid:has(> .wp-block-group__inner-container) {
    display: contents;
}
.innova-vert-grid > .wp-block-group__inner-container {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 20px;
}
.innova-vert-grid:not(:has(> .wp-block-group__inner-container)) {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 20px;
}
@media (max-width: 1024px) {
    .innova-vert-grid > .wp-block-group__inner-container,
    .innova-vert-grid:not(:has(> .wp-block-group__inner-container)) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 600px) {
    .innova-vert-grid > .wp-block-group__inner-container,
    .innova-vert-grid:not(:has(> .wp-block-group__inner-container)) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

.innova-vert-card {
    background: #FFFFFF;
    border: 1px solid #E5EAF2;
    border-radius: 12px;
    padding: 32px 16px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(10, 46, 92, 0.05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.innova-vert-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(59, 95, 255, 0.12);
    border-color: rgba(59, 95, 255, 0.3);
}
.innova-vert-icon {
    width: 56px !important;
    height: 56px !important;
    margin: 0 auto;
    border-radius: 50%;
    background: rgba(59, 95, 255, 0.1);
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.innova-vert-icon .uagb-icon-wrapper,
.innova-vert-icon .uagb-icon-wrapper svg,
.innova-vert-icon svg { color: #3B5FFF; fill: currentColor; }

/* ============================== PROFILE CHECKLIST ============================== */
.innova-perfil2-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #F4F6FA 100%);
    border-radius: 20px;
    padding: 56px;
    box-shadow: 0 8px 40px rgba(10, 46, 92, 0.06);
    border: 1px solid #E5EAF2;
}
@media (max-width: 768px) { .innova-perfil2-card { padding: 32px 24px; } }

/* Mismo patrón que .innova-vert-grid: doble selector para soportar
   WP modernos (con .wp-block-group__inner-container) y antiguos (sin). */
.innova-perfil2-grid:has(> .wp-block-group__inner-container) {
    display: contents;
}
.innova-perfil2-grid > .wp-block-group__inner-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px;
}
.innova-perfil2-grid:not(:has(> .wp-block-group__inner-container)) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px;
}
@media (max-width: 768px) {
    .innova-perfil2-grid > .wp-block-group__inner-container,
    .innova-perfil2-grid:not(:has(> .wp-block-group__inner-container)) {
        grid-template-columns: 1fr !important;
    }
}

.innova-perfil2-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px;
    background: #FFFFFF;
    border: 1px solid #E5EAF2;
    padding: 20px;
    border-radius: 12px;
    transition: border-color .2s ease, transform .2s ease;
}
.innova-perfil2-item:hover {
    border-color: #3B5FFF;
    transform: translateY(-2px);
}
.innova-perfil2-icon {
    flex-shrink: 0;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    background: rgba(59, 95, 255, 0.1);
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.innova-perfil2-icon .uagb-icon-wrapper,
.innova-perfil2-icon .uagb-icon-wrapper svg,
.innova-perfil2-icon svg { color: #3B5FFF; fill: currentColor; }
.innova-perfil2-text { flex: 1; }

/* ============================== BENEFITS (dark) ============================== */
/* Mismo patrón que las otras dos grids: tolerante al wrapper extra que mete WP. */
.innova-benef3-grid:has(> .wp-block-group__inner-container) {
    display: contents;
}
.innova-benef3-grid > .wp-block-group__inner-container {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px;
}
.innova-benef3-grid:not(:has(> .wp-block-group__inner-container)) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px;
}
@media (max-width: 1024px) {
    .innova-benef3-grid > .wp-block-group__inner-container,
    .innova-benef3-grid:not(:has(> .wp-block-group__inner-container)) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 768px) {
    .innova-benef3-grid > .wp-block-group__inner-container,
    .innova-benef3-grid:not(:has(> .wp-block-group__inner-container)) {
        grid-template-columns: 1fr !important;
    }
}

.innova-benef3-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(123, 139, 255, 0.18);
    border-radius: 16px;
    padding: 40px 28px;
    text-align: center;
    backdrop-filter: blur(2px);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.innova-benef3-card:hover {
    border-color: rgba(123, 139, 255, 0.45);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(59, 95, 255, 0.18);
}
.innova-benef3-icon {
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, #3B5FFF 0%, #6186FF 100%);
    color: #FFFFFF;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(59, 95, 255, 0.4);
    flex-shrink: 0;
}
.innova-benef3-icon .uagb-icon-wrapper,
.innova-benef3-icon .uagb-icon-wrapper svg,
.innova-benef3-icon svg { color: #FFFFFF; fill: currentColor; }

/* ============================== FINAL CTA ============================== */
.innova-acts-cta {
    text-align: center;
    /* ONIZEA - Eliminar margen blanco entre secciones */
    /* margin-top: 80px; */
    padding-top: 60px;
    border-top: 1px solid rgba(123, 139, 255, 0.15);
}

/* The CTA in this layout is a CHILD CONTAINER inside the .innova-acts-flow
   container. The flow's inner-blocks-wrap is what holds it as a sibling of
   the .innova-act / .innova-act--dark sections. We give the CTA the same
   end-of-gradient color (#050B1E) so the dark section continues seamlessly,
   and reset the in-section spacing since this container has its own padding. */
.innova-acts-flow > .uagb-container-inner-blocks-wrap > .innova-acts-cta {
    background: #050B1E;
    color: #FFFFFF;
    padding: 60px clamp(24px, 6vw, 96px) 96px;
    border-top: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.innova-cta-button .wp-block-button__link,
.innova-cta-mega .wp-block-button__link {
    background-color: #3B5FFF !important;
    color: #FFFFFF !important;
    border: 0 !important;
    box-shadow: 0 6px 20px rgba(59, 95, 255, 0.35);
    transition: transform .2s ease, box-shadow .2s ease;
}
.innova-cta-button .wp-block-button__link:hover,
.innova-cta-mega .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(59, 95, 255, 0.55);
}

/* Collapse default block-gap between section-level containers inside the
   .innova-acts-flow wrapper, so consecutive sections render edge-to-edge
   and there are no white strips between them. The wrap's direct children
   are now containers (was groups in the spectra version). */
.innova-acts-flow > .uagb-container-inner-blocks-wrap > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ============================== TIMELINE ============================== */
.innova-timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}
.innova-timeline::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 24px;
    bottom: 24px;
    width: 2px;
    background: linear-gradient(180deg, #3B5FFF 0%, #B5C2DB 100%);
    z-index: 0;
}
.innova-timeline__phase {
    display: flex !important;
    align-items: flex-start !important;
    gap: 24px !important;
    margin-bottom: 48px;
    position: relative;
    z-index: 1;
}
.innova-timeline__phase:last-child { margin-bottom: 0; }
.innova-timeline__number {
    flex-shrink: 0;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50%;
    background: linear-gradient(135deg, #3B5FFF 0%, #6186FF 100%);
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(59, 95, 255, 0.4);
}
.innova-timeline__content {
    flex: 1;
    padding-top: 6px;
    background: #FFFFFF;
    border: 1px solid #E5EAF2;
    border-radius: 12px;
    padding: 20px 24px;
    margin-left: 4px;
    box-shadow: 0 2px 8px rgba(10, 46, 92, 0.04);
}

/* ============================== CITYGOV SCHEME OVERRIDES ============================== */
/* citygov ships `.scheme_original h1-h6 { color: #6186ff }` which
   overrides our class-only colors on the front-end. Re-assert at body-prefixed
   specificity. */
body .innova-act h2,
body .innova-act h3,
body .innova-act h4,
body .innova-vert-card h3,
body .innova-perfil2-text h4,
body .innova-timeline__content h3,
body .innova-section-5meses h2,
body .innova-section-calendario h2 { color: #0A2E5C; }

body .innova-act--dark h2,
body .innova-act--dark h3,
body .innova-act--dark h4,
body .innova-acts-cta h2,
body .innova-benef3-card h3 { color: #FFFFFF; }

body .innova-cta-button .wp-block-button__link,
body .innova-cta-mega .wp-block-button__link { background-color: #3B5FFF; color: #FFFFFF; }

/* ============================== SPECTRA NORMALISATION ============================== */
/* Spectra (UAGB) wraps icons in an extra .wp-block-uagb-icon → .uagb-icon-wrapper
   layer. Force the wrapper to behave as inline-flex sized to the parent so
   the SVG stays centred inside our circular icon containers. */
.innova-tab-icon.wp-block-uagb-icon,
.innova-vert-icon.wp-block-uagb-icon,
.innova-perfil2-icon.wp-block-uagb-icon,
.innova-benef3-icon.wp-block-uagb-icon { line-height: 0; }

.innova-tab-icon .uagb-icon-wrapper,
.innova-vert-icon .uagb-icon-wrapper,
.innova-perfil2-icon .uagb-icon-wrapper,
.innova-benef3-icon .uagb-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Spectra Containers have `display: flex` and `flex-direction: column` by
   default. That's fine for our section-level containers, but we want the
   `.innova-act` outer container's padding to apply normally and its inner
   `.innova-act__content` to behave as a constrained centered column. The
   inner-blocks-wrap inside .innova-act should not stretch to full width
   beyond the section padding. */
.innova-act > .uagb-container-inner-blocks-wrap,
.innova-acts-cta > .uagb-container-inner-blocks-wrap {
    width: 100%;
    align-self: stretch;
}

/* Make sure Spectra's per-block padding rules (if Spectra ever falls back to
   defaults) don't double-pad on top of ours. We set padding on the outer
   container only via our class rules; if Spectra injects padding for these
   block_ids, it would compound. Safe override: */
.innova-section-5meses.uagb-block-5me5096f,
.innova-section-calendario.uagb-block-fases5cl,
.innova-act.uagb-block-iact5tup,
.innova-act.uagb-block-iactperf,
.innova-act.uagb-block-iactdark,
.innova-acts-cta.uagb-block-ictacta1,
.innova-acts-flow.uagb-block-aflow001 {
    /* No Spectra-injected padding; we control padding via our class rules. */
}