/**
 * Block: Procesos — Styles
 */

/* 1. Bloque principal (mobile-first) */
.holnix-procesos {
    position: relative;
    overflow: hidden;
    padding: var(--wp--preset--spacing--extra-large) 0;
    background-color: var(--wp--preset--color--dark-gray);
    color: var(--wp--preset--color--white);
}

/*
 * Resplandor violeta decorativo — SVG real exportado de Figma
 * (assets/images/procesos-glow.svg, grupo "Clip path group" del nodo
 * 517:6158 — misma pieza que 468:6198): 3 blobs difuminados (feGaussianBlur
 * nativo del SVG) sobre un rect negro sólido que cubre todo el canvas (el
 * #171717 de la línea 1 del SVG queda tapado por ese rect, no se ve nunca).
 * El SVG completo mide 1440x1320 (proporción ~1.09:1, casi cuadrado).
 *
 * Antes era un <img src="...svg"> con width:100%/height:auto, escalando por
 * ancho y asumiendo que en desktop la sección siempre iba a ser más baja que
 * el SVG escalado (dejando que overflow:hidden recorte el sobrante) — cierto
 * solo mientras la sección mide menos que ~0.92x su ancho. Con la grilla de
 * 6 tarjetas en 2 filas (~1448px de alto fijo, ver @media 1024px más abajo)
 * eso deja de cumplirse entre ~1024px y ~1580px de ancho de viewport (la
 * mayoría de laptops: 1280/1366/1440/1536/1600) — el SVG terminaba más bajo
 * que la sección y el #171717 de fondo de .holnix-procesos (línea siguiente,
 * un gris distinto al negro puro del SVG) quedaba expuesto como una
 * franja/corte horizontal bien marcado.
 *
 * background-image (div) en vez de <img>: con position:absolute + inset:0
 * sobre un contenedor de alto "auto" (.holnix-procesos, alto real definido
 * por su contenido en flow), un <img> con intrinsic ratio recalcula su alto
 * a partir de ese ratio en vez de estirarse al 100% del contenedor —
 * comportamiento de sizing de "replaced element" que ignora top/bottom, no
 * un bug de este proyecto. Un div sin ratio intrínseco no tiene ese
 * problema: background-size:cover + background-position:top cubre el 100%
 * de la sección siempre, recortando de abajo si sobra (zona sin blobs, solo
 * negro liso) en vez de dejar hueco si falta.
 */
.holnix-procesos__glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('../../assets/images/procesos-glow.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    pointer-events: none;
}

/*
 * En mobile las 6 tarjetas se apilan en 1 columna (ver .holnix-procesos__items),
 * así que la sección puede terminar siendo varias veces más alta que ancha.
 * El SVG de escritorio (casi cuadrado) no tiene forma de cubrir eso sin
 * recortarse mal: escalado por ancho queda una franja minúscula, y con
 * object-fit:cover fuerza un zoom que termina mostrando el centro del diseño
 * (la parte menos colorida) en vez de las esquinas violetas. Por eso en este
 * rango (hasta 1023.98px, tablet incluido) se sigue ocultando y, como
 * fallback, dos degradados radiales en las esquinas superiores replican los
 * mismos colores (#5236B7 / #A52FFF) sobre el mismo fondo #171717 — se
 * estira solo, sin recortes, para cualquier alto de sección.
 */
@media (max-width: 1023.98px) {
    .holnix-procesos__glow {
        display: none;
    }

    /*
     * El alto de los dos radial-gradient (100%) es porcentual a la propia
     * caja de .holnix-procesos, así que el degradado siempre llega justo
     * hasta el borde inferior de la sección sin importar cuántas tarjetas
     * la hagan más alta — no hace falta un alto fijo en px.
     */
    .holnix-procesos {
        background:
            radial-gradient(60% 100% at 8% 0%, #5236B7 0%, transparent 100%),
            radial-gradient(50% 100% at 96% 0%, #A52FFF 0%, transparent 100%),
            var(--wp--preset--color--dark-gray);
    }
}

/*
 * Mobile real (< 768px): antes usaba un recorte propio del glow
 * (assets/images/procesos-glow-mobile.svg) estirado con background-size:
 * 100% 100% sobre el alto real de la sección (~2700-3000px con las 6
 * tarjetas apiladas). Ese SVG lleva 6 filtros feGaussianBlur (stdDeviation
 * hasta 150) — como background-image de una caja tan alta, el navegador
 * tiene que rasterizar ese blur por software en cada tile que entra en
 * viewport durante el scroll, lo que en Android gama media se traduce en
 * CPU/GPU sostenida, caída de FPS y calentamiento del dispositivo (detectado
 * en auditoría de rendimiento 2026-09-08). Se elimina el override: al no
 * declarar nada acá, el fallback de gradientes de la media query de tablet
 * (max-width: 1023.98px, arriba) sigue aplicando también en este rango —
 * mismo criterio visual, costo de pintado prácticamente nulo (radial-gradient
 * es un primitivo nativo, sin decodificar ni filtrar ningún asset).
 */

/*
 * El bloque se marca como align full, pero .alignfull (style.css) por sí solo
 * no rompe el padding horizontal de .theme-container (56px/16px o 56px/64px),
 * así que el fondo con gradiente quedaría inset en vez de ocupar todo el
 * ancho del viewport. Se fuerza el bleed edge-to-edge igual que hace
 * casos-de-exito.css / hero.css.
 */
.entry-content > .holnix-procesos,
.site-content > .holnix-procesos {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/*
 * Editor de bloques: el "canvas" no vive dentro de .entry-content/.site-content
 * (esta instalación renderiza el editor sin iframe), así que la regla de
 * arriba no aplica ahí — la sección queda acotada al ancho con padding raíz
 * de Gutenberg (.is-root-container.has-global-padding) en vez de ocupar
 * todo el canvas, y las 6 tarjetas de 360px fijos (ver @media 1024px más
 * abajo) no entran igual que en el front-end. Mismo fix que
 * .holnix-listo-para-conectar.alignfull: se cancela el padding raíz para
 * que la sección use el ancho completo del canvas también en el editor.
 */
.is-root-container.has-global-padding .holnix-procesos.alignfull {
    max-width: none;
    margin-left: calc(var(--wp--style--root--padding-left, 0px) * -1);
    margin-right: calc(var(--wp--style--root--padding-right, 0px) * -1);
}

/*
 * 2. Elementos (__). Título + subtítulo y la grilla de 6 tarjetas viven en
 * una única zona <InnerBlocks /> — ACF no admite más de una por bloque.
 * Cada grupo se agrupa en su propio core/group (__header / __items) para
 * aislar su layout del resto, mismo criterio que holnix/casos-de-exito. En
 * el editor, ACF envuelve el InnerBlocks en .acf-innerblocks-container; se
 * anula como caja (display: contents) para que esos dos grupos queden en
 * el mismo flujo que en el front-end (donde ese wrapper no existe).
 */
.holnix-procesos__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wp--preset--spacing--large);
    max-width: var(--wp--style--global--content-size);
    margin: 0 auto;
    padding: 0 var(--wp--preset--spacing--small);
    text-align: center;
}

.holnix-procesos__container > .acf-innerblocks-container {
    display: contents;
}

.holnix-procesos__header {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--x-small);
    margin: 0 auto !important;
}

/*
 * Fila de badges (ver blocks/procesos-badges/procesos-badges.php) — primer
 * elemento de la sección, antes ocupado por el botón único. flex-wrap
 * porque a diferencia del botón viejo (siempre 1 solo link) acá el admin
 * puede insertar varios holnix/procesos-badge con el "+" del editor;
 * justify-content:center los agrupa igual que un único badge cuando solo
 * hay uno. Esto ya alinea los badges horizontalmente en cualquier tamaño de
 * pantalla (envolviendo a la línea siguiente solo si no entran) sin
 * necesidad de una regla por breakpoint — el padding horizontal del layout
 * ya lo da .holnix-procesos__container (spacing--small, línea de abajo).
 */
.holnix-procesos__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--wp--preset--spacing--x-small);
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/*
 * ACF envuelve el <InnerBlocks /> de holnix/procesos-badges y de cada
 * holnix/procesos-badge en .acf-innerblocks-container — tanto en el editor
 * como en el front-end (confirmado con do_blocks(), a diferencia de lo que
 * dice el comentario equivalente en otros bloques de este tema). Sin este
 * "display: contents" esa caja intermedia (block-level) queda como único
 * hijo directo del flex, y los badges reales terminan apilados uno abajo
 * del otro dentro de ella en vez de ser flex items — mismo criterio que
 * .holnix-procesos__container > .acf-innerblocks-container más arriba.
 */
.holnix-procesos__badges > .acf-innerblocks-container,
.holnix-procesos__badge > .acf-innerblocks-container {
    display: contents;
}

/*
 * La pastilla individual — mismo criterio de forma que
 * .holnix-tabla-de-precios__badge-pill (borde + radio 9999px para forma de
 * píldora), pero con fondo blanco/texto negro (spec de Figma, nodo 468-6193
 * "Badge"): a diferencia del resto del bloque (dark theme), estas etiquetas
 * son claras. Padding 4px/8px según el mismo nodo — el vertical es la mitad
 * exacta del horizontal, por eso x-small/2 en vez de un token entero.
 */
.holnix-procesos__badge {
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: calc(var(--wp--preset--spacing--x-small) / 2) var(--wp--preset--spacing--x-small) !important;
    background-color: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--black);
    border-radius: 9999px;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

.holnix-procesos__badge-label {
    margin: 0 !important;
    font-family: var(--wp--preset--font-family--inter);
    font-size: var(--wp--preset--font-size--tiny);
    font-weight: 700;
    line-height: 1.21;
    color: var(--wp--preset--color--black) !important;
    white-space: nowrap;
}

/*
 * Estilo "Headings/H2" del Figma: DM Sans en vez del Inter que usa el
 * resto del tema para h2 — no hay token en theme.json para esta
 * combinación puntual, así que va con valores propios. font-feature-settings
 * apaga ligaduras/ligaduras contextuales (rasgos por defecto de DM Sans que
 * el diseño no quiere). DM Sans se carga condicionalmente en
 * inc/enqueue-scripts.php (has_block) — con fallback a Inter/sans-serif si
 * por algo no llegara a cargar.
 */
.wp-block-heading.holnix-procesos__title {
    margin: 0;
    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: 'DM Sans', var(--wp--preset--font-family--inter), sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 46px;
    /*
     * !important: Gutenberg genera clases de color con !important cuando se
     * elige un color manualmente desde el panel del bloque. Este bloque
     * tiene fondo oscuro fijo, así que el título siempre debe leerse claro.
     */
    color: var(--wp--preset--color--white) !important;
}

/*
 * Grilla de las 6 tarjetas — 1 columna en mobile, 2 en tablet, 3 (3x2) en
 * desktop (ver @media más abajo).
 */
.holnix-procesos__items {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--medium);
    width: 100%;
    /*
     * Solo se anula el margin-top que Gutenberg inyecta por defecto en los
     * hijos de un contenedor .is-layout-flow, igual criterio que
     * holnix-casos-de-exito__items / holnix-disenado-para__items.
     */
    margin-block-start: 0 !important;
}

.holnix-procesos__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /*
     * Sin gap acá: título→párrafo e ícono→párrafo llevan cada uno su propio
     * margin-top (31px y 7rem respectivamente, ver más abajo) en vez de un
     * espaciado uniforme entre los 3.
     */
    /* El doble del padding anterior (medium, 2rem) */
    padding: var(--wp--preset--spacing--extra-large);
    text-align: left;
    background-color: var(--wp--preset--color--card-10);
    border: 1px solid var(--wp--preset--color--border, #334155);
    border-radius: var(--wp--custom--border-radius--xl, 24px);
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/*
 * Chip del ícono — va después del título/texto (ver procesos-item.php) y
 * centrado horizontalmente con align-self, aunque el resto de la tarjeta
 * (.holnix-procesos__item) esté alineada a la izquierda. border-radius xl y
 * padding small (Figma, nodo 369:9669: esquinas bien redondeadas, ícono
 * ocupando casi todo el cuadro) en vez del md/medium anteriores, que
 * dejaban el cuadro casi sin redondear y el ícono chico dentro de mucho
 * margen vacío.
 *
 * glass-static (header.css) en vez de liquid-glass: mismo "recipe" visual
 * (fondo translúcido + brillo inset), pero con blur fijo en vez del filtro
 * SVG dinámico de assets/js/liquid-glass.js (ResizeObserver + recomposición
 * por frame) — evita ese costo en 6 chips repetidos por tarjeta, mismo
 * criterio que .holnix-publisher-metadata__item-icon (ver comentario de esa
 * clase en header.css). card-10 en vez de card (opaco): glass-static solo
 * se nota si el fondo es translúcido, para que el blur tenga algo detrás
 * que desenfocar.
 */
.holnix-procesos__item-icon {
    align-self: center;
    box-sizing: border-box;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 124px;
    height: 124px;
    margin-top: 7rem;
    padding: var(--wp--preset--spacing--small);
    border-radius: var(--wp--custom--border-radius--xl, 24px);
    background-color: var(--wp--preset--color--card-10);
}

.holnix-procesos__item-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wp-block-heading.holnix-procesos__item-title {
    margin: 0;
    font-family: var(--wp--preset--font-family--inter);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 700;
    line-height: 1.2;
    color: var(--wp--preset--color--white) !important;
}

.holnix-procesos__item-text {
    margin: 0;
    margin-top: 31px;
    font-family: var(--wp--preset--font-family--inter);
    font-size: var(--wp--preset--font-size--normal);
    font-weight: 500;
    line-height: 1.6;
    color: var(--wp--preset--color--white) !important;
}

/* 4. Responsive (tablet 768px+, desktop 1024px+) */

/*
 * Ajuste mobile puro (Figma nodo 950:604132, "Content Cards V15", frame de
 * 390px): tarjetas centradas y de alto fijo (~445px) con el ícono pegado
 * abajo via margin-top:auto — mismo mecanismo que ya usan las tarjetas de
 * escritorio (@media 1024px más abajo), no una regla nueva. Sin este alto
 * fijo, margin-top:auto en .holnix-procesos__item-icon no tiene espacio
 * libre que repartir (columna flex de alto auto) y no mueve nada.
 * Padding horizontal más chico (medium en vez de extra-large en los 4
 * lados) y gap entre tarjetas más chico (x-small) para que el recuadro de
 * texto centrado quede con el ancho y la separación del diseño — el padding
 * vertical se deja en extra-large porque en Figma el inset top/bottom es
 * similar al de escritorio, solo el horizontal cambia.
 */
@media (max-width: 767.98px) {
    .holnix-procesos__items {
        gap: var(--wp--preset--spacing--x-small);
    }

    .holnix-procesos__item {
        align-items: center;
        height: 445px;
        padding: var(--wp--preset--spacing--extra-large) var(--wp--preset--spacing--medium);
        text-align: center;
    }

    .holnix-procesos__item-icon {
        margin-top: auto;
    }
}

@media (min-width: 768px) {
    .holnix-procesos__items {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    /*
     * A partir de acá las 6 tarjetas dejan de ser fluidas (1fr) y pasan a un
     * ancho de 360px (medida de Figma) en 3 columnas; justify-content centra
     * la grilla dentro de .holnix-procesos__items cuando el contenedor es
     * más ancho que las 3 columnas + gaps.
     *
     * minmax(0, 360px) en vez de 360px fijo: en el editor, con el sidebar de
     * ajustes del bloque abierto, el canvas real disponible puede ser más
     * angosto que 1120px (3x360 + 2x20 de gap) aunque la ventana del
     * navegador ya esté en el breakpoint de 1024px+ (este editor no vive en
     * un iframe, la media query se dispara igual) — con 360px fijo esas 3
     * columnas no entran y quedan recortadas por el overflow:hidden de
     * .holnix-procesos. minmax(0, 360px) deja que las columnas se achiquen
     * juntas para entrar en el ancho real disponible, y llegan a los 360px
     * completos apenas hay espacio (siempre, en el front-end real).
     */
    .holnix-procesos__items {
        grid-template-columns: repeat(3, minmax(0, 360px));
        justify-content: center;
        /* 20px puntual para desktop — más chico que el gap de mobile/tablet (medium, 32px) */
        gap: 20px;
    }

    /*
     * Alturas alternadas tipo masonry (530/460/530 en la fila 1,
     * 460/530/460 en la fila 2 — medidas de Figma): con height fijo por
     * tarjeta y grid-template-rows en auto (default), cada fila toma la
     * altura de su tarjeta más alta y la más baja queda alineada arriba,
     * dejando el hueco abajo — es el look escalonado del diseño. Selector
     * por posición (nth-child), no por fila/columna: 6 ítems en 3 columnas
     * caen naturalmente en 2 filas.
     *
     * :is(.holnix-procesos__item, .wp-block-holnix-procesos-item): en el
     * editor, ACF envuelve cada holnix/procesos-item en un
     * <div class="wp-block-holnix-procesos-item"> que no existe en el
     * front-end — ahí el hijo directo real de la grilla es ese wrapper, no
     * .holnix-procesos__item, mismo criterio que holnix/disenado-para.
     */
    .holnix-procesos__items > :is(.holnix-procesos__item, .wp-block-holnix-procesos-item) {
        width: 100%;
        max-width: 360px;
    }

    .holnix-procesos__items > :is(.holnix-procesos__item, .wp-block-holnix-procesos-item):nth-child(odd) {
        height: 530px;
    }

    .holnix-procesos__items > :is(.holnix-procesos__item, .wp-block-holnix-procesos-item):nth-child(even) {
        height: 460px;
    }

    /*
     * nth-child(5) es la única tarjeta cuya columna tiene una corta (460)
     * arriba y a ella (530) abajo: al ser 2 filas de altura fija con ítems
     * alineados arriba (ver comentario de más arriba), la columna 2 termina
     * con un hueco de 70px (la diferencia 530-460) + el gap de 20px antes de
     * que empiece esta tarjeta — 90px en vez de los 20px que hay entre filas
     * en las columnas 1 y 3, donde la de arriba ya es la de 530 y llena toda
     * la fila. Se sube con margin-top negativo para que la 2da fila arranque
     * a la misma altura visual en las 3 columnas.
     *
     * !important: .holnix-procesos__item (regla base, más arriba) fija
     * margin-block-start:0 con !important — sin este !important acá el
     * margin-top negativo quedaba anulado por esa regla y la tarjeta no se
     * movía nada (mismo margin físico, distinta forma de escribirlo).
     */
    .holnix-procesos__items > :is(.holnix-procesos__item, .wp-block-holnix-procesos-item):nth-child(5) {
        margin-top: -70px !important;
    }

    /*
     * margin-top:7rem (regla base, mobile/tablet donde la tarjeta crece con
     * el contenido) más el resto del contenido no entraba en las tarjetas de
     * 460px con título/párrafo de 2 líneas: el ícono se salía por debajo del
     * padding e incluso del borde de la tarjeta, porque .holnix-procesos__item
     * no recorta contenido. auto en cambio consume solo el espacio realmente
     * disponible dentro del alto fijo (nunca más de lo que hay), empujando el
     * ícono al fondo de la tarjeta sin desbordar — y de paso queda pegado
     * abajo en todas por igual, como en el diseño de Figma.
     */
    .holnix-procesos__item-icon {
        margin-top: auto;
    }
}

/* 5. Accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .holnix-procesos__item {
        transition: none;
    }
}