/* ==========================================================================
   components.css — Header, modales, valor cards, bento cards
   ========================================================================== */

/* ---------- Site header (scroll-aware) ---------- */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    padding: 1.5rem clamp(1.5rem, 4vw, 3rem);
    z-index: var(--z-header);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    mix-blend-mode: difference;
    transition:
        padding var(--transition-medium);
}

.site-header.is-scrolled {
    background-color: transparent;
    box-shadow: none;
    padding-top: 1.15rem;
    padding-bottom: 1.15rem;
}

.site-header__logo {
    /* Cross-fade entre dos logos:
       — full (logo-grupo.png, horizontal con letras): visible al inicio
       — icon (logo-icon.png, solo ícono cuadrado): visible cuando el header
         entra en estado .is-scrolled
       Usamos posición relativa + img absoluta para que ambas imágenes
       compartan el mismo box y crucen via opacity sin layout shift. */
    position: relative;
    display: block;
    /* Reservamos espacio del logo full (mayor de los dos) para que el header
       no salte al hacer scroll. Heights se mantienen con la transición.
       Width explícito requerido porque las imgs son position:absolute y no
       contribuyen al tamaño del contenedor. 
       logo-grupo.png = 300×79 → a 42px alto = ~160px ancho
       logo-icon.png  = 83×79  → a 42px alto = ~44px ancho */
    height: 42px;
    width: 160px;
    transition: transform var(--transition-fast), height var(--transition-medium), width var(--transition-medium);
}

.site-header__logo-img {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: auto;
    /* PNGs son monocromos blancos sobre transparente; el filter los fuerza a
       blanco puro para que el mix-blend-mode: difference del header los
       invierta correctamente sobre fondos claros u oscuros. */
    filter: brightness(0) invert(1);
    transition: opacity var(--transition-medium), height var(--transition-medium);
}

/* Estado por defecto: full visible, icon escondido */
.site-header__logo-img--full { opacity: 1; }
.site-header__logo-img--icon { opacity: 0; }

/* Estado scrolled: icon visible, full escondido */
.site-header.is-scrolled .site-header__logo {
    /* Logo más chico cuando el header colapsa al hacer scroll */
    height: 38px;
    width: 44px;
}
.site-header.is-scrolled .site-header__logo-img--full { opacity: 0; }
.site-header.is-scrolled .site-header__logo-img--icon { opacity: 1; }

.site-header__controls {
    display: flex;
    gap: clamp(1rem, 2.5vw, 2rem);
    align-items: center;
}

.site-header__btn {
    font-weight: var(--fw-semibold);
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-text-light);
    transition: color var(--transition-fast);
    padding: 0.5rem 0;
}

.site-header__btn:hover,
.site-header__btn:focus-visible {
    color: var(--color-accent);
    outline: none;
}

#animated-lang {
    display: inline-block;
    min-width: 90px;
    text-align: right;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

#animated-lang.is-fading {
    opacity: 0;
}

/* ---------- Modal (shared: language + menu) ---------- */
.modal {
    position: fixed;
    inset: 0;
    background-color: rgba(20, 27, 34, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: var(--z-modal);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease-smooth);
}

.modal.is-active {
    opacity: 1;
    pointer-events: auto;
}

.modal__content {
    text-align: center;
    transform: translateY(30px);
    transition: transform 0.4s ease;
    padding: 1rem;
    /* Safety net: si la lista excede la altura de la pantalla (ej. móvil en
       landscape con 16 idiomas), permite scroll interno sin romper el diseño. */
    max-height: 85vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal.is-active .modal__content {
    transform: translateY(0);
}

.modal__close {
    position: absolute;
    top: 2rem;
    right: clamp(1.5rem, 4vw, 3rem);
    font-size: 0.9rem;
    font-weight: var(--fw-semibold);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-gray);
    transition: color var(--transition-fast);
    padding: 0.5rem 0;
}

.modal__close:hover,
.modal__close:focus-visible {
    color: var(--color-accent);
    outline: none;
}

.modal__list {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 2rem);
}

/* Language modal: grid layout for many options */
.modal--lang .modal__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(2rem, 6vw, 5rem);
    row-gap: clamp(0.5rem, 1.2vw, 1rem);
}

.modal--lang .modal__item {
    font-size: clamp(1.3rem, 2.8vw, 2rem);
}

/* ── RTL overrides ─────────────────────────────────────────────────────────
   One block covers all RTL languages (ar, he, fa, ur…).
   Add a language to the RTL set in i18n.js — no CSS changes needed.
   ───────────────────────────────────────────────────────────────────────── */
[dir="rtl"] #animated-lang {
    text-align: left;
}

[dir="rtl"] .modal__close {
    right: auto;
    left: clamp(1.5rem, 4vw, 3rem);
}

[dir="rtl"] .modal__item:hover {
    padding-left: 0;
    padding-right: 20px;
}

[dir="rtl"] .modal__item.is-active::before {
    left: auto;
    right: -30px;
}

.modal__item {
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: var(--fw-bold);
    color: var(--color-gray);
    transition:
        color var(--transition-fast),
        padding var(--transition-fast);
    position: relative;
    display: inline-block;
    line-height: 1.1;
}

.modal__item:hover,
.modal__item:focus-visible,
.modal__item.is-active {
    color: var(--color-text-light);
    outline: none;
}

.modal__item:hover {
    padding-left: 20px;
}

.modal__item.is-active::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: var(--color-accent);
    border-radius: 50%;
}

.valor {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2vw, 1.5rem);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    min-height: 160px;
    overflow: hidden;
    background-color: var(--color-bg-light);
    cursor: pointer;
}

.valor--centered {
    grid-column: span 2;
}

.valor--simple      { --valor-icon-box: 138px; }
.valor--helicopter  { --valor-icon-box: 168px; }
/* acceptance: 100px. Los PNGs del cerebro están recortados a solo el
   ícono (120×119, casi cuadrado). Ya no necesitan clipping de texto
   baked-in. El icon-box da espacio visual proporcional a los demás.
   gap extra (2rem) porque el cerebro es más pequeño que los demás íconos
   y el gap estándar (~1-1.5rem) lo deja visualmente apretado al label. */
.valor--acceptance  { --valor-icon-box: 100px; }
.valor--efficiency  { --valor-icon-box: 165px; }
.valor--respect     { --valor-icon-box: 146px; }

.valor__icon {
    position: relative;
    flex: 0 0 var(--valor-icon-box);
    width: var(--valor-icon-box);
    height: clamp(74px, 8vw, 96px);
    /* `overflow: hidden` es CRÍTICO: cada PNG de valor es una composición ancha
       (412–661 px) con ícono A LA IZQUIERDA + label baked-in a la derecha. El
       contenedor recorta la composición para mostrar SÓLO la parte del ícono;
       el label real se renderiza vía HTML/i18n. Sin este clipping aparece el
       texto inglés baked-in solapado con la traducción. */
    overflow: hidden;
    transition: transform 0.45s var(--ease-smooth), filter 0.45s ease;
}

.valor:hover .valor__icon,
.valor:focus-visible .valor__icon {
    /* `translate(-8px, -6px)` combina dos efectos:
       — El "salto" vertical (-6px) que ya teníamos: refuerza el cambio de
         estado sin tocar el clipping (translate no escala, no expone el
         label baked-in del PNG).
       — Desplazamiento horizontal (-8px): "se quita del medio" para dejar
         espacio visual a la descripción que aparece a su derecha. */
    transform: translate(-8px, -6px);
    filter: drop-shadow(0 6px 12px rgba(37, 152, 157, 0.35));
}

.valor__icon-img {
    position: absolute;
    left: 0;
    top: 50%;
    height: 100%;
    width: auto;
    max-width: none;
    transform: translateY(-50%);
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.valor__icon-img--hover {
    opacity: 0;
}

/* Los PNGs del cerebro (NAPQTA) están recortados a solo el ícono (120×119).
   A diferencia de los demás valores (que usan left:0 para clipping del
   texto baked-in), el cerebro se centra en su icon-box. height:90% da
   respiro para evitar clipping por subpixel rounding. */
.valor--acceptance .valor__icon-img {
    height: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Contenedor de label + descripción superpuestos.
   `display: grid` con ambos hijos en `grid-area: 1 / 1` los apila exactamente
   en el mismo box. Intercambiamos opacities en hover sin que la card cambie
   de altura — la altura la dicta la pieza más alta (la descripción).

   `flex: 0 1 auto` (no grow) es CRÍTICO: si dejamos `flex: 1 1 auto` el copy
   se estira a todo el ancho disponible y empuja el ícono al borde izquierdo,
   rompiendo el `justify-content: center` del .valor. Con auto el copy se
   dimensiona al ancho natural de su contenido (la pieza más ancha — la desc
   con max-width 38ch) y el par [icono+copy] queda centrado como grupo. */
.valor__copy {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    display: grid;
}

.valor__label,
.valor__desc {
    grid-area: 1 / 1;
    align-self: center;
    transition:
        opacity 0.35s ease,
        transform 0.45s var(--ease-smooth);
}

.valor__label {
    max-width: 18ch;
    color: var(--color-gray-soft);
    font-size: clamp(1.25rem, 2.2vw, 1.8rem);
    line-height: 1.05;
    font-weight: var(--fw-semibold);
    text-wrap: balance;
}

.valor__desc {
    max-width: 38ch;
    color: var(--color-teal);
    font-size: clamp(0.88rem, 1vw, 1rem);
    line-height: 1.35;
    font-weight: var(--fw-regular);
    text-wrap: pretty;
    /* Estado base oculto. La pieza ENTRA con un pequeño desplazamiento Y
       (efecto "asomarse") sincronizado con la salida del label. */
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

/* La card de acceptance ocupa 2 columnas. Queremos que el bloque
   [cerebro + texto] se vea con la MISMA densidad y left-alignment que las
   otras cards (icono a la izquierda, texto pegado al gap, todo centrado
   como grupo).

   `max-width: 22rem` en label Y desc — usamos rem en vez de ch porque
   ch depende del font-size del elemento, y label (semibold 1.8rem) y desc
   (regular 1rem) tienen fuentes muy distintas. Con ch, "38ch" en el label
   daba 720px y en la desc 354px → cajas asimétricas → "salto" horizontal
   entre el estado base y el hover. Con rem ambos quedan al mismo ancho.

   Sin `text-align: center` ni `justify-self: center`: el texto queda
   left-aligned (como las otras cards) para que arranque pegado al gap
   del cerebro, no separado por el padding interno de un box centrado. */
.valor--acceptance .valor__label,
.valor--acceptance .valor__desc {
    max-width: 22rem;
}

.valor:hover .valor__icon-img--default,
.valor:focus-visible .valor__icon-img--default {
    opacity: 0;
}

.valor:hover .valor__icon-img--hover,
.valor:focus-visible .valor__icon-img--hover {
    opacity: 1;
}

/* Hover: label desaparece hacia arriba, descripción aparece desde abajo.
   El cambio de color del label ya no es necesario (desaparece) — el rol de
   "color teal" lo asume la descripción que toma su lugar. */
.valor:hover .valor__label,
.valor:focus-visible .valor__label {
    opacity: 0;
    transform: translateY(-8px);
}

.valor:hover .valor__desc,
.valor:focus-visible .valor__desc {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Bento card ----------
   Layout: imagen + separador + copy SIEMPRE visibles (no overlay).
   `flex-direction` cambia per-card en layout.css:
     - column         → imagen arriba, separador horizontal, texto abajo
     - row            → imagen izquierda, separador vertical, texto derecha
     - row-reverse    → imagen derecha, separador vertical, texto izquierda
   ─────────────────────────────────────────────────────────────────────── */
.bento__item {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: var(--bento-direction, column);
    background-color: var(--copy-bg, #1e2630);
    color: var(--copy-text-color, var(--color-text-light));
    cursor: pointer;
    --bento-position: 50% 50%;
}

.bento__media {
    /* Reservamos un % del eje principal del flex (alto en column, ancho en
       row/row-reverse). Con object-fit: cover la imagen llena ese box sin
       deformarse, recortando lo que sobre por el lado contrario. */
    position: relative;
    flex: 0 0 var(--media-size, 50%);
    overflow: hidden;
    background-color: #1e2630;
}

.bento__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--bento-position);
    transition: transform var(--transition-slow);
}

.bento__sep {
    /* Separador con grosor fijo. Su orientación cambia per-card en layout.css
       según `flex-direction` del item. La altura/ancho se expanden con
       `align-self: stretch` (default en flex). */
    flex: 0 0 var(--sep-size, 2px);
    background-color: var(--sep-color, currentColor);
}

.bento__copy {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: var(--copy-padding, 1.5rem);
    display: flex;
    flex-direction: column;
    justify-content: var(--copy-justify, flex-start);
    align-items: var(--copy-align, flex-start);
    text-align: var(--copy-text-align, left);
    /* `overflow: hidden` (en vez de `auto`) → si el copy excede el contenedor
       el texto se clipa, pero el wheel del cursor pasa de largo a la página.
       Con `auto` el div se volvía un scroll-container que capturaba el scroll
       cuando el cursor estaba encima. El `bento__item` parent ya tiene
       overflow:hidden, así que el clipping queda contenido al card. */
    overflow: hidden;
}

.bento__copy-title {
    font-family: var(--font-display);
    font-size: var(--copy-title-size, clamp(1.6rem, 2.6vw, 2.4rem));
    font-weight: var(--fw-black);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--copy-title-color, var(--color-text-light));
    text-transform: uppercase;
    margin: 0;
}

/* Logo de marca dentro del bento — reemplaza al <span class="bento__copy-title">.
   Cada marca tiene un PNG con aspect-ratio propio (Marvel 7.5:1, Arrendadora
   3.1:1, Bolder 2.4:1, MDH 1.27:1), por eso `width: auto` deja que la altura
   marque el tamaño y el ancho se ajusta solo. La altura por defecto sirve
   para Arrendadora/Bolder; Marvelsa y MDH la sobreescriben en layout.css
   (Marvelsa más bajo por ser muy horizontal; MDH más alto por ser casi
   cuadrado y necesitar peso visual). */
.bento__copy-logo {
    display: block;
    height: var(--copy-logo-height, clamp(2.4rem, 3vw, 3.2rem));
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0;
}

.bento__copy-text {
    margin-top: 0.7rem;
    max-width: none;
    font-size: var(--copy-text-size, clamp(0.85rem, 1vw, 0.98rem));
    line-height: 1.38;
    color: var(--copy-text-color, var(--color-text-light));
    font-weight: var(--fw-medium);
    text-wrap: pretty;
    /* El texto largo de las cards (especialmente MDH) creaba un scroll-trap:
       el browser intentaba scroll interno cuando el cursor estaba encima del
       texto, bloqueando el scroll de la página. pointer-events: none deja que
       el wheel event pase al <a> parent y de ahí al body. Los clicks siguen
       funcionando porque el <a>.bento__item los captura. */
    pointer-events: none;
}

/* `display: contents` hace que el <picture> sea "transparente" en el layout:
   sus hijos (source + img) heredan el contexto del padre como si el wrapper
   no existiera. Necesario porque las <img> tienen reglas de sizing diseñadas
   para vivir directamente dentro del .bento__item / .bento__media (con
   position: absolute o width:100% height:100%). Sin esto, el <picture>
   block-level toma su altura del aspect-ratio natural de la imagen y rompe
   el layout — especialmente en mobile donde imágenes muy anchas (Marvelsa,
   Arrendadora) quedaban chiquitas con espacio sobrante en el media-box.
   Browser support: Chrome 65+, Safari 11.1+, Firefox 37+. */
.bento__item picture {
    display: contents;
}

/* Imagen "cover": el PNG default (con marca/nombre baked-in) se superpone
   sobre TODA la card a modo de cubierta inicial. En hover se desvanece y
   revela la composición [imagen .png + separador + i18n texto] que vive
   debajo en el flex layout. Es el reemplazo limpio del antiguo cross-fade
   default↔hover, ahora con el contenido informativo viviendo siempre por
   detrás listo para revelarse. */
.bento__cover {
    position: absolute;
    /* Extendemos 6px más allá del borde derecho. Combinado con
       `overflow: hidden` del .bento__item, esos 6px quedan clipped — y eso
       es justo lo que queremos: los PNG tienen una franja transparente
       diminuta (Marvelsa 2px, MDH 1px) en su lado derecho que, escalada por
       object-fit: cover, dejaba un sliver visible donde se asomaba el layout
       informativo. Con width: calc(100% + 6px) ancla el lado izquierdo y
       extiende 6px past el derecho. NOTA: para <img> hay que setear `width`
       explícitamente — usar solo `left` + `right: -6px` deja `width: 0`
       porque el browser resuelve la dimensión intrínseca a 0. */
    left: 0;
    top: 0;
    width: calc(100% + 6px);
    /* Override del reset global `img, picture, svg { max-width: 100% }` en
       base.css — sin esto, calc(100% + 6px) se clipa a 100% y el strip
       transparente del PNG sigue dentro del área visible. */
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: var(--bento-position);
    /* z-index alto para asegurar que tape el flex layout (media+sep+copy) */
    z-index: 2;
    /* Red de seguridad para PNGs con transparencia parcial (Marvelsa right
       alpha=0, MDH alpha=184, Arrendadora alpha=248): el background sólido
       evita que cualquier píxel semitransparente revele el layout debajo. */
    background-color: var(--copy-bg);
    transition:
        opacity var(--transition-medium),
        transform var(--transition-slow);
    pointer-events: none;
}

.bento__item:hover .bento__cover,
.bento__item:focus-visible .bento__cover {
    opacity: 0;
}

/* Hover sutil sobre la imagen interna (la .png revelada): leve zoom para
   reforzar la sensación de "entrar" en la card. */
.bento__item:hover .bento__img,
.bento__item:focus-visible .bento__img {
    transform: scale(1.04);
}

.bento__item:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}