/**
 * Block: Hero — Styles
 */

/* 1. Bloque principal (mobile-first) */
.holnix-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: auto;
    margin-top: var(--wp--preset--spacing--size-080);
    padding-top: var(--wp--preset--spacing--size-160);
    padding-bottom: 35px;
    background-color: var(--wp--preset--color--galaxy-blue);
    color: var(--wp--preset--color--white);
    overflow: hidden;
}

/*
 * Full-bleed cuando el Hero es el primer bloque de la página (mismo criterio
 * que .holnix-blog__slider en assets/css/blog.css). margin-top: 0 cancela el
 * margin-top: var(--spacing--size-080) (80px) de la regla base de arriba —
 * sin esto, ese margen positivo deja un hueco negro entre el header y el
 * fondo real del Hero (confirmado visualmente antes).
 *
 * Cuando además el header arranca transparente sobre esta página
 * (.has-transparent-header), un margin-top NEGATIVO (que sube el Hero detrás
 * del header en vez de solo cancelar el margen) pisa este 0 — ver la regla
 * genérica ".alignfull:first-child" en style.css, aplica a cualquier bloque
 * ancho completo primero de la página, no solo a este.
 */
.entry-content > .holnix-hero:first-child,
.site-content > .holnix-hero:first-child {
    width: 100vw;
    max-width: 100vw;
    margin-top: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* 2. Elementos (__) */
.holnix-hero__background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/*
 * Prefijo .holnix-hero para ganar especificidad sobre .entry-content img
 * (style.css: max-width:100%; height:auto;), que si no quedaría por encima
 * y anularía el height:100% — la imagen escalaría a su relación de aspecto
 * natural en vez de llenar la caja del hero (se ve "cortada" en mobile).
 */
.holnix-hero .holnix-hero__background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/*
 * Manchas de gradiente decorativas (Figma: dos elipses 703x703, gradiente de
 * marca — nodo 854:8966 "ComposeHerov3"). Figma exporta blur(404px)/opacity 0.6,
 * pero a ese blur (mayor que el radio del círculo) el color se diluye casi
 * por completo.
 *
 * Performance Mode (D2): sin filter — un filter:blur() de este tamaño
 * promueve el elemento a su propia capa de composición y expande su
 * bounding box de paint en proporción al cuadrado del radio del blur. Un
 * radial-gradient con corte a transparent reproduce el mismo desvanecido
 * como una operación de Paint plana, sin capa extra (mismo criterio ya
 * usado en tres-pasos-para-conectar.css). El gradiente de marca original
 * (3 stops diagonales) se reparte entre las dos manchas — cada una en un
 * solo tono, siguiendo la misma dirección top-left→bottom-right del
 * gradiente lineal de Figma — en vez de intentar replicar los 3 stops
 * dentro de un solo radial (que se vería en anillos concéntricos sin blur).
 * pointer-events:none porque son puramente decorativas, no deben interceptar
 * clicks sobre el contenido que va encima.
 */
.holnix-hero__blob {
    position: absolute;
    z-index: 0;
    width: 703px;
    height: 703px;
    border-radius: 50%;
    opacity: 0.85;
    pointer-events: none;
}

.holnix-hero__blob--one {
    top: 0;
    left: 0;
    background: radial-gradient(circle, var(--wp--preset--color--light-purple) 0%, transparent 70%);
}

.holnix-hero__blob--two {
    right: -351px;
    bottom: 86px;
    background: radial-gradient(circle, var(--wp--preset--color--pink) 0%, transparent 70%);
}

/* Velo oscuro sobre las manchas (Figma: overlay rgba(0,0,0,0.2) del fondo del hero) */
.holnix-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

/*
 * Elipse decorativa "glow" en el borde inferior del hero — SVG real exportado
 * de Figma (assets/images/hero-ellipse-glow.svg, nodo 854:8904): blob
 * difuminado + anillo elíptico con borde en gradiente + puntos "sparkle".
 * Ocupa todo el ancho disponible del hero. El translateY(25.3%) empuja la
 * imagen hacia abajo un cuarto de su propio alto — ese porcentaje sale de la
 * posición del centro del anillo elíptico dentro del SVG (y=704.5 de 943px
 * totales, 25.3% contando desde abajo), así el borde inferior del hero
 * (overflow:hidden) recorta justo por la mitad del anillo, dejando ver solo
 * la mitad superior. Al ser transform en % (relativo al alto de la propia
 * imagen) se mantiene correcto sin importar el ancho real renderizado.
 */
.holnix-hero .holnix-hero__ellipse {
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 25.3%);
    width: 300%;
    max-width: none;
    height: auto;
    pointer-events: none;
}

/* 3. Modificadores (--) */
/* Con imagen de fondo se oculta el color de fondo sólido y la elipse decorativa del borde inferior, que quedarían compitiendo visualmente con la foto. Blobs y overlay se mantienen para el degradado de marca sobre la imagen (excepto en mobile, ver responsive). */
.holnix-hero.holnix-hero--has-background {
    background-color: transparent;
    /*
     * Sin imagen de fondo, min-height:auto (regla base) deja que el Hero se
     * ajuste al alto del texto. Pero la imagen de fondo llena esa misma caja
     * (.holnix-hero__background, inset:0) con object-fit:cover, así que si la
     * caja se achica al alto del texto, la foto se ve mucho más recortada.
     * Con imagen de fondo se fuerza un alto mínimo en mobile para que la foto
     * tenga espacio real donde mostrarse.
     */
    min-height: 480px;
}

.holnix-hero.holnix-hero--has-background .holnix-hero__ellipse {
    display: none;
}

/*
 * En mobile, el brillo de los blobs (gradiente holnix-brand, que termina en
 * pink) queda demasiado presente sobre la foto de fondo en una pantalla
 * chica. Se ocultan solo cuando hay imagen de fondo y se restauran desde
 * tablet+ (ver responsive), donde sí aportan al efecto de marca buscado.
 */
.holnix-hero.holnix-hero--has-background .holnix-hero__blob {
    display: none;
}

/*
 * Color de fondo "Degradado" (campo ACF background_style, button_group en
 * la barra lateral): agrega el degradado circular inferior derecho que
 * conecta con el bloque siguiente — mismo centro X (81%) y mismos stops en
 * vw que holnix/aplicacion-independiente (radial-gradient(circle at 81%
 * 100%, ...)) y holnix/app-integracion (81% 0%, su espejo): al medir en vw
 * en vez de % de la propia caja, el color en el borde compartido coincide
 * sin importar el alto real de cada bloque (ver comentario completo en
 * aplicacion-independiente.css). Los blobs/overlay/elipse existentes se
 * mantienen encima sin cambios — este modificador solo agrega el fondo.
 */
.holnix-hero.holnix-hero--bg-glow {
    background-color: #5e1667;
    background-image: var(--wp--preset--gradient--hero-glow, radial-gradient(circle at 81% 100%, #5e1667 20vw, #000000 55vw));
}

.holnix-hero__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--x-small);
    max-width: var(--wp--style--global--content-size);
    margin: 0 auto;
    padding: 0 var(--wp--preset--spacing--small);
}

.holnix-hero__subtitle {
    font-family: var(--wp--preset--font-family--inter);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary);
}

.holnix-hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--x-small);
}

.holnix-hero .holnix-hero__content h2 {
    margin: 0;
    font-family: var(--wp--preset--font-family--inter);
    font-size: var(--wp--preset--font-size--extra-large);
    font-weight: 700;
    line-height: normal;
    color: var(--wp--preset--color--neutral-white);
}

.holnix-hero .holnix-hero__content p {
    margin: var(--wp--preset--spacing--large) 0;
    font-family: var(--wp--preset--font-family--inter);
    font-size: var(--wp--preset--font-size--body-large);
    line-height: 1.6;
    color: var(--wp--preset--color--neutral-light);
}

/*
 * Layout del grupo de botones (core/buttons) — se fija explícito en vez de
 * depender solo del CSS que Gutenberg inyecta para el layout flex del bloque,
 * para evitar que los botones se apilen/superpongan si esa hoja no carga.
 */
.holnix-hero .holnix-hero__content .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--wp--preset--spacing--x-small);
    column-gap: var(--wp--preset--spacing--size-024);
    margin: 0;
    max-width: 100%;
    width: auto;
}

.holnix-hero .holnix-hero__content .wp-block-buttons.is-content-justification-left {
    justify-content: flex-start;
}

.holnix-hero .holnix-hero__content .wp-block-buttons.is-content-justification-center {
    justify-content: center;
}

.holnix-hero .holnix-hero__content .wp-block-buttons.is-content-justification-right {
    justify-content: flex-end;
}

.holnix-hero .holnix-hero__content .primary-btn,
.holnix-hero .holnix-hero__content .secondary-btn {
    margin: 0;
}

/*
 * Fila opcional de hasta 4 íconos con descripción (toggle "Mostrar íconos" +
 * repeater "Íconos" en la barra lateral del bloque) — replica el componente
 * "Feature" de Figma, que define dos variantes según dispositivo:
 * - Desktop (nodo 593:13346 "Frame 39793"): ítem fijo 374x132px, gap 48px
 *   entre ítems, texto 18px bold ("Desktop/lg body Bold").
 * - Mobile (nodo 1103:13754 "Frame 39793"): fila "fill" sin gap fijo (los 3
 *   ítems se reparten el ancho completo), texto 10px bold ("Mobile/xs body
 *   Bold", literal sin token equivalente en theme.json).
 * La caja del ícono (72x72px/radio 20px/fondo #1E293B) y su gráfico
 * (36x36px) son idénticos en ambos nodos — no cambian por breakpoint.
 * Mobile-first: cada ícono es un flex item elástico (sin ancho fijo) para
 * que los hasta 4 ítems siempre entren en una sola fila sin scrollbar ni
 * apilarse en varias líneas; el ancho/alto fijo de Figma (374x132px) y el
 * texto a 18px solo se aplican desde 1024px, donde ya hay espacio real.
 */
.holnix-hero .holnix-hero__content .holnix-hero__icons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--x-small);
    width: 100%;
    margin-top: var(--wp--preset--spacing--size-080);
}

.holnix-hero__icon {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: var(--wp--preset--spacing--small);
    text-align: center;
}

.holnix-hero__icon-wrap {
    box-sizing: border-box;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background-color: var(--wp--preset--color--card, #1E293B);
}

.holnix-hero__icon-image {
    display: block;
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/*
 * .holnix-hero .holnix-hero__content p (arriba) tiene especificidad (0,2,1)
 * por el selector de tag "p" — un solo ".holnix-hero__icon-text" (0,1,0) no
 * le gana y el margin: var(--large) 0 de esa regla se filtraba igual. Se
 * repite el mismo prefijo para llegar a (0,3,0) y anular ese margen.
 */
.holnix-hero .holnix-hero__content .holnix-hero__icon-text {
    margin: 0;
    font-family: var(--wp--preset--font-family--inter);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--wp--preset--color--white) !important;
}

/*
 * Imagen del hero (campo ACF hero_image, debajo de los botones — se maneja
 * por ACF y no como InnerBlocks para tener un botón "Agregar imagen" directo
 * en el admin, en vez del placeholder/appender de un core/image anidado).
 * width/height del spec (883x540) se pasan a max-width + aspect-ratio para
 * que la imagen siga siendo fluida en mobile en vez de desbordar el bloque;
 * el aspect-ratio (121/74 ≈ 883/540) mantiene la proporción cuando el ancho
 * real es menor a 883px. align-self: center (además de margin: 0 auto) —
 * .holnix-hero__content es flex column y algunos navegadores no centran de
 * forma confiable un ítem flex solo con márgenes automáticos en el eje
 * transversal; align-self lo fuerza en todos los dispositivos sin depender
 * de ese comportamiento. padding: 0 7px + box-sizing: border-box — gutter
 * lateral de 7px para que la imagen (el <img>, width:100% de este content-box
 * ya con el padding descontado) no toque el borde real del contenedor; con
 * border-box el padding queda adentro del max-width/width en vez de sumarse
 * y desbordar. Se hereda igual en .holnix-hero__image--2x (no la overridea),
 * así el gutter también aplica cuando la imagen sobresale a 100vw.
 */
.holnix-hero .holnix-hero__content .holnix-hero__image {
    box-sizing: border-box;
    align-self: center;
    margin: 0 auto;
    margin-top: var(--wp--preset--spacing--size-080);
    padding: 0 7px;
    width: 100%;
    max-width: 883px;
    aspect-ratio: 121 / 74;
}

.holnix-hero .holnix-hero__content .holnix-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--wp--custom--border-radius--lg);
}

/*
 * Toggle "Imagen x2" (campo ACF image_2x): duplica el ancho base (883px x2 =
 * 1766px) recortado un 15% (1766px * 0.85 ≈ 1501px) y hace que la imagen
 * sobresalga del contenedor de 1200px hacia los bordes del viewport, siempre
 * centrada en el viewport real (mobile y desktop). En vez de un offset
 * relativo (margin/left/transform calculado sobre el ancho del contenedor
 * de 1200px, que se vuelve impreciso apenas la imagen es más ancha que su
 * contenedor), la figure se vuelve full-bleed real (width: 100vw +
 * margin: calc(50% - 50vw), el mismo truco ya usado en .holnix-hero de
 * arriba) y el tope de 1501px se aplica sobre el <img> de adentro, centrado
 * con flex — así el centrado no depende de ningún cálculo sobre el ancho
 * del contenedor, solo de que .holnix-hero sea full-bleed (ya lo es).
 * overflow:hidden en .holnix-hero (regla base) recorta lo que sobre.
 */
.holnix-hero .holnix-hero__content .holnix-hero__image--2x {
    display: flex;
    justify-content: center;
    width: 100vw;
    max-width: 100vw;
    aspect-ratio: auto;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.holnix-hero .holnix-hero__content .holnix-hero__image--2x img {
    width: min(1501px, 100%);
    height: auto;
    aspect-ratio: 121 / 74;
}

/* 4. Responsive (tablet 768px+, desktop 1024px+) */
@media (min-width: 768px) {
    .holnix-hero {
        min-height: 800px;
    }

    /*
     * .holnix-hero.holnix-hero--has-background (2 clases) le gana en
     * especificidad a .holnix-hero (1 clase) de la regla anterior, así que
     * sin este override el 480px fijado para mobile quedaría pegado también
     * en tablet/desktop.
     */
    .holnix-hero.holnix-hero--has-background {
        min-height: 800px;
    }

    .holnix-hero.holnix-hero--has-background .holnix-hero__blob {
        display: block;
    }

    .holnix-hero__content h2 {
        font-size: var(--wp--preset--font-size--huge);
    }

    /*
     * En mobile el texto ocupa proporcionalmente más alto del hero (más
     * líneas), así que la elipse necesita más ancho (300%) para que su
     * ventana visible (74.7% de su alto, ver comentario arriba) alcance a
     * asomar por encima de la imagen del laptop. En tablet/desktop el texto
     * ocupa menos alto relativo y 150% ya replica el frame de Figma.
     */
    .holnix-hero .holnix-hero__ellipse {
        width: 150%;
    }
}

@media (min-width: 1024px) {
    .holnix-hero {
        padding-bottom: var(--wp--preset--spacing--size-080);
    }

    .holnix-hero__container {
        gap: var(--wp--preset--spacing--small);
    }

    /*
     * justify-content: flex-start (no el "center" de la regla base, pensado
     * para mobile: ahí cada ícono es elástico — flex:1 1 0, ver esa regla —
     * así que la fila siempre llena el 100% del ancho y centrar o alinear a
     * la izquierda da igual). Desde acá el ícono pasa a un ancho fijo
     * (374px, ver .holnix-hero__icon más abajo): con menos de 4 íconos, la
     * fila ya no llena el ancho del bloque y "center" la despegaba del borde
     * izquierdo, desalineada respecto al título/párrafo de arriba (que
     * arrancan en ese mismo borde). flex-start la deja pegada al mismo
     * margen izquierdo que el resto del contenido.
     */
    .holnix-hero .holnix-hero__content .holnix-hero__icons {
        justify-content: flex-start;
    }

    .holnix-hero__icon {
        flex: 0 0 374px;
        width: 374px;
        height: 132px;
    }

    .holnix-hero .holnix-hero__content .holnix-hero__icon-text {
        font-size: var(--wp--preset--font-size--body-large);
    }
}