/* ============================================================
   SOSTENIBILIDAD 2026 — Figma "Cubicup-Web" › "Home New Concept - Iteration #2" ›
   "Sostenibilidad Desktop" (2268:13345, 1440 × 7648).
   Estructura y textos del documento "Estructura web". Va sobre home.css y sistema.css (cabecera, CTA).
   ============================================================ */

/* ---------------- CABECERA (Figma "Ecology", 973): titular de 80 centrado y texto abajo a la
   izquierda, con 16 de margen ---------------- */
.sost-hero {
    position: relative; isolation: isolate; overflow: hidden;
    height: 100vh; height: 100svh; min-height: 680px; max-height: 973px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-inverse); background: #00393f;
}
/* ampliada al 165 % desde la izquierda: el cuadrado azul de Cubicup queda en el lateral derecho */
.sost-hero .sost-hero__bg { position: absolute; left: 0; top: 0; z-index: -2; width: var(--hero-zoom, 165%); max-width: none; height: 100%; object-fit: cover; object-position: 0 50%; }
.sost-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--opacity-dark-40); }
.sost-hero__title {
    max-width: 932px; margin: 0; padding: 0 var(--layout-grid-margin); text-align: center; text-wrap: balance;
    font-size: 80px; line-height: 80px; letter-spacing: -0.01em; font-weight: var(--font-weight-regular); color: var(--text-inverse);
}
.sost-hero__title .reveal-line { display: block; animation: line-appear 1s cubic-bezier(.22,.61,.36,1) .35s both; }
.sost-hero__bottom {
    position: absolute; left: 16px; right: 16px; bottom: 16px;
    display: flex; justify-content: space-between; align-items: flex-end; gap: var(--base-32);
    animation: line-appear 1s cubic-bezier(.22,.61,.36,1) .9s both;
}
.sost-hero__text { width: 380px; margin: 0; font-size: 20px; line-height: 26px; color: var(--text-inverse); }

/* ---------------- PIE en el verde de la página (en vez del navy) ---------------- */
.page-template-page-sostenibilidad .site-footer,
.page-template-template-pages-page-sostenibilidad .site-footer { background: #00393f; }

/* ---------------- EQUIVALENCIAS (1072): frase de 44 + texto de 275 y tres tarjetas de 448 × 520 ---------------- */
.sost-equivalencias { padding-bottom: var(--layout-section-padding-y-extended); }
.sost-equivalencias__head {
    display: flex; justify-content: space-between; align-items: flex-end; gap: var(--base-32);
    padding-top: 48px; border-top: var(--base-thin) solid var(--accordion-default-border);
}
.sost-equivalencias .intro__statement { max-width: 796px; }
.sost-equivalencias__desc { flex: 0 0 275px; margin: 0; font-size: var(--body-sm-size); line-height: 19px; color: var(--text-primary); }
.sost-equivalencias__grid {
    margin: 40px 0 0; padding: 0; list-style: none;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--layout-grid-gutter);
}
.sost-equivalencia {
    position: relative; isolation: isolate; height: 520px; box-sizing: border-box; padding: 8px;
    display: flex; flex-direction: column; justify-content: space-between;
    border-radius: var(--radius-media); overflow: hidden; color: var(--text-inverse);
}
.sost-equivalencia__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.sost-equivalencia::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--opacity-dark-20); }
.sost-equivalencia__row { display: flex; align-items: stretch; height: 60px; border: 1px solid rgba(255,255,255,.4); }
.sost-equivalencia__value {
    display: flex; align-items: center; padding-right: 32px; border-right: 1px solid rgba(255,255,255,.4);
    font-size: var(--heading-xxl-size); line-height: var(--heading-xxl-line-height); letter-spacing: var(--heading-xxl-tracking);
}
.sost-equivalencia__label { display: flex; align-items: center; padding: 0 8px 0 32px; font-size: var(--body-base-size); line-height: 20px; }
.sost-equivalencia__text { margin: 0; font-size: var(--body-sm-size); line-height: 19px; }

/* ---------------- PROCESO: tira horizontal (Figma "Timeline", 900 de alto) ----------------
   sostenibilidad.js alarga la sección, la tira se queda fija y se desplaza en
   horizontal; está maquetada a 900 y se escala al alto de la ventana (--hscroll-scale). */
.sost-proceso { position: relative; background: #00393f; }
.sost-proceso__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.sost-proceso__track {
    display: flex; width: max-content; height: 900px;
    transform-origin: 0 0; will-change: transform;
    transition: transform .9s cubic-bezier(.65,0,.35,1); /* cambio entero de ficha */
}
@media (prefers-reduced-motion: reduce) { .sost-proceso__track { transition: none; } }
.sost-proceso__line { position: absolute; z-index: 3; left: 32px; right: 32px; top: 32px; height: 2px; }
.sost-proceso__line::before { content: ""; position: absolute; left: 0; right: 0; top: 1px; height: .5px; background: rgba(255,255,255,.2); }
.sost-proceso__line-fill { position: absolute; left: 0; top: 0; height: 2px; width: calc(4% + var(--hscroll-progress, 0) * 96%); background: #fff; transition: width .9s cubic-bezier(.65,0,.35,1); }

.sost-panel { position: relative; flex: none; height: 900px; box-sizing: border-box; overflow: hidden; color: var(--text-inverse); }
.sost-panel--green { background: #00393f; padding: 80px 32px 32px; }
.sost-panel .eyebrow { margin: 0; color: var(--text-inverse); }
.sost-panel--photo img,
.sost-panel--photo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sost-panel--photo::after { content: ""; position: absolute; inset: 0; background: var(--opacity-dark-20); pointer-events: none; }

/* intro: titular de 80 en 622 y, abajo, texto de 20/24 (273) + foto de 215 × 269 */
.sost-panel--intro { padding-top: 160px; display: flex; flex-direction: column; gap: var(--base-24); }
.sost-panel__title { max-width: 622px; margin: 0; font-size: 80px; line-height: 80px; letter-spacing: -0.01em; font-weight: var(--font-weight-regular); color: var(--text-inverse); }
.sost-panel__intro-bottom { width: 622px; display: flex; justify-content: space-between; align-items: flex-end; }
.sost-panel__intro-bottom p { width: 273px; margin: 0; font-size: 20px; line-height: 24px; }
.sost-panel__intro-bottom img { width: 215px; height: 269px; object-fit: cover; border-radius: var(--radius-media); }

/* pasos: título de 60 (448) y texto de 332, con 64 entre ellos; foto de 316 × 395 abajo a la derecha */
.sost-step { width: 448px; display: flex; flex-direction: column; }
.sost-panel--step { padding-top: 80px; } /* Figma "Process": padding 80/32 */
.sost-step .eyebrow { margin: 0 0 24px; }
.sost-step__title { margin: 0 0 64px; font-size: var(--heading-xxxl-size); line-height: var(--heading-xxxl-line-height); letter-spacing: var(--heading-xxxl-tracking); font-weight: var(--font-weight-regular); color: var(--text-inverse); }
.sost-step__media { left: 600px; bottom: 32px; width: 316px; height: 395px; } /* foto de 316 × 395 junto al texto (no pegada a la derecha en pantallas anchas) */

/* Portada (Figma "Process" 720 + foto): mitad verde con el texto y mitad foto, en una pantalla */
.sost-panel--cover { display: flex; padding: 0; }
.sost-cover__text { flex: 0 0 50%; box-sizing: border-box; height: 100%; }
.sost-cover__media { position: relative; flex: 1 1 auto; overflow: hidden; }
.sost-cover__foto-movil { display: none; } /* solo en móvil (mobile.css) */
.sost-cover__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sost-cover__media::after { content: ""; position: absolute; inset: 0; background: var(--opacity-dark-20); pointer-events: none; }
.sost-step__text { width: 332px; }
.sost-step__text p { margin: 0; font-size: var(--body-base-size); line-height: 20px; }
.sost-step__text p + p { margin-top: 20px; }
.sost-media { position: absolute; display: block; object-fit: cover; border-radius: var(--radius-media); }

/* ---------------- RESPONSABILIDAD (patrón "Ecology", 717): frase de 52 centrada en 912 ---------------- */
.sost-responsabilidad { padding: var(--layout-section-padding-y-extended) 0; }
.sost-responsabilidad__text {
    max-width: 912px; margin: 0 auto; text-align: center;
    font-size: var(--heading-xxl-size); line-height: var(--heading-xxl-line-height); letter-spacing: var(--heading-xxl-tracking);
    color: var(--text-primary);
}

/* ---------------- CIFRAS: titular de 44 y dos cifras de 68 con su periodo ---------------- */
.sost-cifras { background: var(--background-subtle); padding-bottom: var(--layout-section-padding-y-extended); }
.sost-cifras .intro__statement { margin: 0; }
.sost-cifras__metrics { grid-template-columns: repeat(2, 332px); }
.sost-cifras .intro__metric dd { margin-top: 36px; font-size: 68px; line-height: 1; letter-spacing: -1px; }
.sost-cifras .intro__metric dd.sost-cifras__note {
    margin-top: var(--base-16); font-size: var(--body-sm-size); line-height: 19px; letter-spacing: 0; color: var(--text-secondary);
}

/* ---------------- ENTORNO: pareja de fotos reforma ↔ proyecto ambiental ---------------- */
.sost-entorno__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--base-32); margin-bottom: var(--layout-section-title-content-gap-tight); }
.sost-entorno .h-title { max-width: 622px; }
.sost-entorno__desc { flex: 0 0 332px; margin: 0; font-size: var(--body-sm-size); line-height: 19px; color: var(--text-primary); }
.sost-entorno__slide { margin: 0; }
.sost-entorno__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--layout-grid-gutter); }
.sost-entorno__photo { position: relative; aspect-ratio: 680 / 480; border-radius: var(--radius-media); overflow: hidden; }
.sost-entorno__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sost-entorno__photo .tag-glass { position: absolute; left: 8px; top: 8px; }
.sost-entorno__caption { margin-top: var(--base-24); max-width: 680px; font-size: var(--body-base-size); line-height: 24px; color: var(--text-primary); }

/* ---------------- IMPACTO SOCIAL: dos tarjetas con logos ---------------- */
.sost-social__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--base-32); margin-bottom: var(--layout-section-title-content-gap-tight); }
.sost-social .h-title { max-width: 680px; }
.sost-social__desc { flex: 0 0 332px; margin: 0; font-size: var(--body-sm-size); line-height: 19px; color: var(--text-primary); }
.sost-social__grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--layout-grid-gutter); }
.sost-social__card {
    display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-height: 320px;
    box-sizing: border-box; padding: 40px; border-radius: var(--radius-media); background: #fff;
}
.sost-social__card p { max-width: 448px; margin: 0; font-size: var(--body-base-size); line-height: 24px; color: var(--text-primary); }
.sost-social__logos { display: flex; align-items: center; gap: 48px; min-height: 56px; }
.sost-social__logos img { display: block; width: auto; }

/* ---------------- RESPONSIVE: por debajo de 900 la tira pasa a vertical ---------------- */
@media (max-width: 900px) {
    .sost-hero__title { font-size: 44px; line-height: 48px; }
    .sost-hero__bottom { flex-direction: column; align-items: flex-start; }
    .sost-hero { --hero-zoom: 100%; }
    .sost-hero .sost-hero__bg { object-position: 50% 50%; }
    .sost-hero__text { width: auto; font-size: 16px; line-height: 22px; }
    .sost-equivalencias__head { flex-direction: column; align-items: flex-start; }
    .sost-equivalencias__desc { flex-basis: auto; }
    .sost-equivalencias__grid { grid-template-columns: 1fr; }
    .sost-proceso__sticky { position: static; height: auto; }
    .sost-proceso__line { display: none; }
    .sost-proceso__track { flex-direction: column; width: auto; height: auto; transform: none !important; }
    .sost-panel { width: auto !important; height: auto; min-height: 0; }
    .sost-panel--green { padding: 72px var(--layout-grid-margin); }
    .sost-panel--photo { aspect-ratio: 4 / 3; }
    .sost-panel__title { font-size: 44px; line-height: 48px; }
    .sost-panel__intro-bottom { width: auto; gap: var(--base-24); }
    .sost-step, .sost-step__text { width: auto; }
    .sost-media { display: none; }
    .sost-panel--cover { flex-direction: column; }
    .sost-cover__text { flex: none; height: auto; }
    .sost-cover__media { aspect-ratio: 4 / 3; }
    .sost-entorno__head, .sost-social__head { flex-direction: column; align-items: flex-start; }
    .sost-cifras__metrics, .sost-entorno__pair, .sost-social__grid { grid-template-columns: 1fr; }
    .sost-entorno__desc, .sost-social__desc { flex-basis: auto; }
}