/* ==========================================================================
   layout.css — Estructura de secciones (hero, vision, valores, ecosistema, footer)
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
    min-height: 100vh;
    display: grid;
    /* 3fr 2fr (60/40) da suficiente espacio al texto para palabras largas
       como "Transformar" / "Transformieren" / "Transformować" sin forzar
       overflow-wrap. La imagen industrial se ve bien al 40% del viewport. */
    grid-template-columns: 3fr 2fr;
}

.hero__text {
    background-color: var(--color-bg-dark);
    padding: calc(var(--header-height) + 1rem) var(--section-padding-x) clamp(3rem, 6vw, 4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Grid items default to `min-width: auto` (== min-content): palabras largas
       uppercase (p.ej. polaco "Transformować") fuerzan la columna del grid
       a expandirse más allá del viewport. Resetear a 0 permite que el título
       se parta antes de romper el layout. */
    min-width: 0;
    /* Contención defensiva: si el título es más ancho que la columna (viewport
       raro + palabra muy larga), se clipa en vez de provocar scroll horizontal
       o un break mid-word. */
    overflow: hidden;
}

.hero__title {
    /* min=2rem (32px): asegura que "TRANSFORMAR" (10 chars) cabe en el
       viewport mínimo realista (~358px iPhone SE → ~310px content area).
       Polaco "TRANSFORMOWAĆ" / alemán "TRANSFORMIEREN" (13 chars) llegan
       casi al ras, pero el `overflow: hidden` defensivo en .hero__text los
       clipa limpiamente sin provocar scroll horizontal. Max 4.6rem mantiene
       el impacto tipográfico en desktop. */
    font-size: clamp(2rem, 8.5vw, 4.6rem);
    font-weight: var(--fw-black);
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: -0.045em;
    margin-bottom: var(--space-md);
}

.hero__title span {
    display: block;
    /* GARANTÍA dura contra TRANSFORM/AR: cada palabra permanece en una sola
       línea sin importar el ancho del contenedor. Combinado con overflow:hidden
       en .hero__text, si el viewport es absurdamente estrecho la palabra se
       clipa a la derecha en vez de partirse a mitad. */
    white-space: nowrap;
    word-break: keep-all;
    hyphens: none;
}

.hero__title--teal   { color: var(--color-teal); }
.hero__title--light  { color: var(--color-text-light); }
.hero__title--accent { color: var(--color-accent); }

.hero__quote {
    font-size: clamp(0.98rem, 1.1vw, 1.02rem);
    color: var(--color-gray);
    max-width: 450px;
    margin-bottom: var(--space-sm);
    font-weight: var(--fw-regular);
}

.hero__author {
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: var(--color-gray);
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
}

.hero__image {
    /* image-set() sirve WebP (~178KB) a browsers modernos y PNG (~1.5MB) como
       fallback. Browsers que NO soportan image-set() ignoran toda la regla,
       por eso duplicamos con `background-image` simple debajo. */
    background-image: url("../assets/images/foto-banner.png");
    background-image: image-set(
        url("../assets/images/foto-banner.webp") type("image/webp"),
        url("../assets/images/foto-banner.png") type("image/png")
    );
    background-size: cover;
    background-position: center;
    filter: grayscale(100%) contrast(1.05);
    /* Mismo fix de grid item: evita que empuje la columna más allá del viewport. */
    min-width: 0;
}

/* ---------- Vision ---------- */
.vision {
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
    padding: clamp(6rem, 9vw, 7rem) var(--section-padding-x) clamp(3.5rem, 6vw, 4rem);
}

.vision__row {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(2rem, 4vw, 3rem);
    padding: clamp(2.2rem, 4vw, 2.5rem) 0;
    border-bottom: 1px solid var(--color-border-light);
    align-items: start;
}

.vision__row:first-child {
    border-top: 1px solid var(--color-border-light);
}

.vision__title {
    font-size: clamp(2rem, 3vw, 2.4rem);
    font-weight: var(--fw-black);
    line-height: 1;
    color: var(--color-text-dark);
    letter-spacing: -0.03em;
}

.vision__text {
    font-size: clamp(1rem, 1.1vw, 1.05rem);
    color: #444444;
    max-width: 680px;
}

.vision__text p + * {
    margin-top: var(--space-xs);
}

.vision__highlight {
    display: block;
    margin-top: 0.75rem;
    font-weight: var(--fw-bold);
    color: var(--color-teal);
}

/* ---------- Valores ---------- */
.valores {
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
    padding: clamp(3.5rem, 6vw, 4rem) var(--section-padding-x) clamp(6rem, 9vw, 8rem);
}

.valores__title {
    font-size: clamp(2.4rem, 4vw, 3.2rem);
    font-weight: var(--fw-black);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 3rem;
}

.valores__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background-color: var(--color-border-light);
    border-top: 1px solid var(--color-border-light);
    max-width: none;
}

/* ---------- Ecosistema ---------- */
.ecosistema {
    background-color: var(--color-bg-dark);
    padding: clamp(6rem, 9vw, 7rem) var(--section-padding-x);
}

.ecosistema__title {
    font-size: clamp(2.4rem, 4vw, 3.2rem);
    font-weight: var(--fw-black);
    color: var(--color-text-light);
    letter-spacing: -0.03em;
    margin-bottom: 3rem;
}

/* Grid 5x12 fully fluid. En escritorio conserva la composición "bento"
   con filas proporcionales; en tablet/móvil cada tarjeta se apila con su
   propio aspect-ratio para que la imagen no se deforme. */
.bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 204fr 204fr 326fr 204fr 204fr;
    gap: clamp(0.5rem, 1.6vw, 1rem);
    aspect-ratio: 1.18;
}

/* Cards = composición [imagen | separador | texto] siempre visible.
   --bento-direction define el eje (column | row | row-reverse).
   --media-size define qué % del eje principal ocupa la imagen.
   --sep-color / --sep-size definen el separador entre imagen y texto.

   Brief del cliente:
     Marvelsa     → imagen ARRIBA,    separador color de letras (lime/amarillo)
     Arrendadora  → imagen ARRIBA,    separador azul (claro, contrasta con bg)
     Bolder       → imagen IZQUIERDA, separador verde (matches title color)
     MDH          → imagen DERECHA,   separador amarillo (pop sobre naranja)
*/

.bento__item--marvelsa {
    grid-column: span 8;
    grid-row: span 2;
    --stack-ratio: 910 / 413;
    --bento-direction: column;
    --media-size: 52%;
    --sep-color: #d8f068;
    --sep-size: 6px;
    --copy-padding: clamp(1.3rem, 1.8vw, 1.8rem) clamp(1.4rem, 2vw, 2rem);
    --copy-bg: #22878b;
    --copy-title-color: var(--color-text-light);
    --copy-text-color: #d8f068;
    --copy-title-size: clamp(1.5rem, 2vw, 2rem);
    --copy-text-size: clamp(0.85rem, 0.95vw, 1rem);
    /* Logo MARVEL es 543×72 (ratio 7.5:1, muy horizontal): altura modesta
       para que el ancho no se coma todo el copy. */
    --copy-logo-height: clamp(1.6rem, 2.2vw, 2.4rem);
}

.bento__item--arrendadora {
    grid-column: span 4;
    grid-row: span 3;
    --stack-ratio: 415 / 769;
    --bento-position: 50% 58%;
    --bento-direction: column;
    /* arrendadora-hover.png es 412×155 (ratio 2.66 — banner ancho).
       En un card de 382×632, 24% de altura ≈ 152px → coincide con el ratio
       natural del banner (382/2.66 ≈ 144). Sin esto la imagen se escala a
       638×240 y se recorta 128px por lado. */
    --media-size: 24%;
    --sep-color: #a8d4f0;
    --sep-size: 6px;
    --copy-padding: clamp(1.1rem, 1.5vw, 1.5rem) clamp(1.2rem, 1.6vw, 1.6rem);
    --copy-bg: #2e6f9c;
    --copy-title-color: var(--color-text-light);
    --copy-text-color: var(--color-text-light);
    --copy-title-size: clamp(1.4rem, 1.8vw, 1.8rem);
    --copy-text-size: clamp(0.92rem, 1.05vw, 1.1rem);
    /* Centrado: logo + texto centrados horizontal para llenar el recuadro. */
    --copy-justify: center;
    --copy-align: center;
    --copy-text-align: center;
    /* Logo Arrendadora es 555×177 (ratio 3.1:1). Aumentado para que el logo
       + texto abarquen casi todo el recuadro. */
    --copy-logo-height: clamp(3.8rem, 5vw, 5.5rem);
}

.bento__item--bolder {
    grid-column: span 8;
    grid-row: span 1;
    --stack-ratio: 907 / 317;
    --bento-direction: row;
    /* agro-bolder-hover.png es 254×316 (foto cropped del interior de tienda
       en formato vertical). 27% de ancho (≈211px) coincide con el ratio
       natural 0.80 → cropping mínimo. La foto se ve completa, no recortada. */
    --media-size: 27%;
    --sep-color: #b5d81a;
    --sep-size: 6px;
    --copy-padding: clamp(1rem, 1.4vw, 1.4rem) clamp(1.2rem, 1.8vw, 1.8rem);
    --copy-bg: #0b3d29;
    --copy-title-color: #b5d81a;
    --copy-text-color: var(--color-text-light);
    --copy-title-size: clamp(1.6rem, 2vw, 2rem);
    --copy-text-size: clamp(0.92rem, 1.05vw, 1.1rem);
    /* Centrado: logo + texto centrados para llenar el recuadro. */
    --copy-justify: center;
    --copy-align: center;
    --copy-text-align: center;
    /* Logo Bolder es 517×214 (ratio 2.4:1). Aumentado para mayor presencia. */
    --copy-logo-height: clamp(4rem, 5.5vw, 6.5rem);
}

.bento__item--mdh {
    grid-column: span 12;
    grid-row: span 2;
    --stack-ratio: 1360 / 411;
    /* row-reverse → primera celda HTML (imagen) queda a la DERECHA, segunda
       (separador) en medio, tercera (copy) a la IZQUIERDA. */
    --bento-direction: row-reverse;
    /* mdh-sports-hover.png es 370×411 (ratio 0.90 — casi cuadrada).
       En un card de 1178×350, 28% de ancho ≈ 330px → con altura 350 da
       330×350 (ratio 0.94), muy cerca del natural 0.90. Sin esto la imagen
       se escala a 447×497 y se recorta 73px arriba/abajo. */
    --media-size: 28%;
    --sep-color: #ffe066;
    --sep-size: 6px;
    --copy-padding: clamp(1.3rem, 1.8vw, 1.8rem) clamp(1.6rem, 2.2vw, 2.2rem);
    --copy-bg: #f47a17;
    --copy-title-color: var(--color-text-light);
    --copy-text-color: var(--color-text-light);
    --copy-title-size: clamp(1.8rem, 2.4vw, 2.6rem);
    --copy-text-size: clamp(0.92rem, 1.05vw, 1.1rem);
    /* Centrado: logo + texto centrados para llenar el recuadro. */
    --copy-justify: center;
    --copy-align: center;
    --copy-text-align: center;
    /* Logo MDH es 571×451 (ratio 1.27:1, casi cuadrado): altura mayor para
       que tenga peso visual comparable a logos horizontales. Aumentado para
       que el logo + texto llene casi todo el recuadro. */
    --copy-logo-height: clamp(5rem, 7vw, 8rem);
}

/* ---------- Footer ---------- */
.site-footer {
    background-color: var(--color-bg-light);
}

.site-footer__top {
    padding: clamp(2.5rem, 4vw, 3.5rem) var(--section-padding-x);
    /* Grid 1fr auto 1fr: la hoja (columna auto) queda en el centro geométrico
       real del viewport. Con flex + justify-content:center, cuando las palabras
       tenían distinto ancho por idioma (es "Industrias" vs de "Durchbrechen"),
       la hoja se corría visualmente del centro. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
}

.site-footer__top > :first-child {
    justify-self: end;
}

.site-footer__top > :last-child {
    justify-self: start;
}

.site-footer__word {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gray-soft);
}

.site-footer__leaf {
    position: relative;
    width: clamp(54px, 6vw, 72px);
    height: 52px;
    overflow: hidden;
    flex: 0 0 auto;
}

.site-footer__leaf-img {
    position: absolute;
    /* footer-leaf.png es una composición 695×52 ("TRANSFORMA [hoja] INDUSTRIAS").
       La HOJA está en x=365.5, es decir +18px a la derecha del centro geométrico
       del PNG (347.5). Sin compensación, el box muestra la hoja desplazada a la
       derecha. Con -18px en `left`, la hoja (no el centro de la imagen) queda
       alineada al centro del box. */
    left: calc(50% - 18px);
    top: 50%;
    height: 52px;
    width: auto;
    max-width: none;
    transform: translate(-50%, -50%);
}

.site-footer__bottom {
    background-color: var(--color-bg-dark);
    padding: 1.25rem var(--section-padding-x);
    /* Stack vertical: ícono social arriba, copyright abajo. Centrado horizontal
       para que la fila final del sitio quede simétrica con el bloque
       Transforma–leaf–Industrias de arriba. */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}

/* Botón social (LinkedIn). Círculo con borde tenue que se anima a teal en
   hover/focus. Misma curva ease-smooth que los valores para sentir el sitio
   coherente. Usa `currentColor` en el SVG → el cambio de color en hover
   propaga al fill del path automáticamente. */
.site-footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--color-gray);
    border: 1px solid currentColor;
    background-color: transparent;
    transition: color 0.3s ease, transform 0.4s var(--ease-smooth);
}

.site-footer__social:hover,
.site-footer__social:focus-visible {
    color: var(--color-teal);
    transform: translateY(-2px);
}

.site-footer__social-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.site-footer__copy {
    color: var(--color-gray);
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-align: center;
}