/* ============================================================
   HOME 2026 — Figma "Cubicup-Web" › "Home New Concept - Iteration #2"
   Una sección por bloque del Figma, en el mismo orden que front-page.php.
   Las medidas son las del frame de 1440px; las variables vienen de tokens.css.
   Solo se carga en la portada.
   ============================================================ */

/* ---------------- BASE DE LA PÁGINA ---------------- */
html body.cubicup-2026.cubicup-2026 { /* gana a "body.page.home" y demás fondos del style legacy */
    background: var(--background-page) !important; /* el legacy fuerza el gris del blog con !important */
    color: var(--text-primary);
    font-family: var(--font-family-title);
    font-size: var(--body-base-size);
    line-height: var(--body-base-line-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.home-2026 { overflow-x: clip; }
/* Reset. El style legacy pinta "h2, h3, p { color: #010101 }" y
   "p, ul li { font-family: Averta; color: #4a4a4b }" en toda la web: aquí los
   textos heredan color y fuente de su sección. Con :where() la especificidad es
   la misma que la legacy (p · ul li), y gana por cargarse después;
   así cualquier clase de sección sigue pudiendo cambiar el color. */
:where(.home-2026, .site-footer) :where(h1, h2, h3, p, dl, dd, figure, blockquote, ul) { margin: 0; }
:where(.home-2026, .site-footer) h1,
:where(.home-2026, .site-footer) h2,
:where(.home-2026, .site-footer) h3,
:where(.home-2026, .site-footer) p,
:where(.home-2026, .site-footer) ul li {
    font-family: var(--font-family-title);
    color: inherit;
    line-height: inherit;
}
:where(.home-2026) ul { list-style: none; padding: 0; }
.home-2026 img { max-width: 100%; }

.h-container {
    box-sizing: border-box; /* 1440 con el margen dentro: contenido de 1376, como el Figma */
    max-width: var(--layout-max);
    margin: 0 auto;
    padding: 0 var(--layout-grid-margin);
}
.h-section { position: relative; }
.h-section--extended { padding: var(--layout-section-padding-y-extended) 0 var(--layout-section-padding-y-compact); }
.h-section--base     { padding: var(--layout-section-padding-y-base) 0; }
.h-section--compact  { padding: var(--layout-section-padding-y-compact) 0; }
.h-section--subtle   { background: var(--background-subtle); }

/* línea fina que abre cada bloque (Figma "Line") */
.h-rule {
    border: 0;
    border-top: var(--base-thin) solid var(--accordion-default-border);
    margin: 0 0 var(--layout-section-title-content-gap-tight);
}

/* Titulares: estilos Heading del Figma */
.h-title { font-weight: var(--font-weight-regular); color: var(--text-primary); }
.h-title--xxxl { font-size: var(--heading-xxxl-size); line-height: var(--heading-xxxl-line-height); letter-spacing: var(--heading-xxxl-tracking); }
.h-title--xxl  { font-size: var(--heading-xxl-size);  line-height: var(--heading-xxl-line-height);  letter-spacing: var(--heading-xxl-tracking); }
.h-title--xl   { font-size: var(--heading-xl-size);   line-height: var(--heading-xl-line-height);   letter-spacing: var(--heading-xl-tracking); }
.h-title .reveal-line { display: block; }

/* cabecera de sección: titular a la izquierda, botón o texto a la derecha */
.h-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--base-32);
    margin-bottom: var(--layout-section-title-content-gap-base);
}
.h-head--end { align-items: flex-end; }

/* Eyebrow (Figma Label/eyebrow): 13px medium, mayúsculas, tracking 0.08em */
.eyebrow {
    font-size: var(--label-eyebrow-size);
    line-height: var(--label-eyebrow-line-height);
    font-weight: var(--label-eyebrow-weight);
    letter-spacing: var(--label-eyebrow-tracking);
    text-transform: uppercase;
}
/* Eyebrow de tarjeta (Figma UI Card/eyebrow): 10px, tracking 0.2em */
.eyebrow-sm {
    font-size: var(--ui-card-eyebrow-size);
    line-height: var(--ui-card-eyebrow-line-height);
    letter-spacing: var(--ui-card-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* ---------------- ANIMACIÓN DE ENTRADA (Figma: estados "Pre-appeared" → "Appeared") ----------------
   El texto llega de desenfocado (blur 6px) y transparente a nítido, línea a línea.
   Solo se oculta si home.js está activo (.has-reveal), así sin JS todo se ve. */
.has-reveal [data-reveal] {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(12px);
    transition: opacity .9s ease, filter .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
    transition-delay: calc(var(--i, 0) * 120ms);
}
.has-reveal [data-reveal].is-inview { opacity: 1; filter: none; transform: none; }

/* ============================================================
   1 · HERO (Figma "Hero 3") — 912px
   ============================================================ */
.hero-home {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 640px;
    max-height: 1000px;
    overflow: hidden;
    isolation: isolate;
    color: var(--text-inverse);
    background: var(--background-page);
}
.hero-home__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-home__bg::after { content: ""; position: absolute; inset: 0; background: var(--opacity-dark-40); }
.hero-home__img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    /* Figma "Image Zoom": la foto arranca ampliada y se aleja hasta su tamaño */
    animation: hero-zoom 2.4s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes hero-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }

.hero-home__inner {
    position: absolute;
    left: var(--layout-grid-margin);
    right: calc(271px + 2 * var(--layout-grid-margin));
    bottom: var(--layout-grid-margin);
}
.hero-home__title {
    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(--button-primary-text-default);
}
.hero-home__title .reveal-line {
    display: block;
    padding-bottom: 2px; /* los Text del Figma separan las líneas 62px con cuerpo de 60 */
    animation: line-appear 1s cubic-bezier(.22,.61,.36,1) both;
    animation-delay: calc(.35s + var(--i, 0) * .16s);
}
@keyframes line-appear {
    from { opacity: 0; filter: blur(6px); transform: translateY(14px); }
    to   { opacity: 1; filter: none; transform: none; }
}
.hero-home__cities {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: var(--base-24);
    animation: line-appear 1s cubic-bezier(.22,.61,.36,1) 1.1s both;
}
.hero-home__project {
    position: absolute;
    right: var(--layout-grid-margin);
    bottom: var(--layout-grid-margin);
    animation: line-appear 1s cubic-bezier(.22,.61,.36,1) 1.25s both;
}

/* ============================================================
   2 · DECLARACIÓN + MÉTRICAS
   ============================================================ */
.intro__statement {
    font-size: var(--heading-xl-size);
    line-height: var(--heading-xl-line-height);
    letter-spacing: var(--heading-xl-tracking);
    max-width: 1240px;
}
.intro__metrics {
    display: grid;
    grid-template-columns: 216px 332px 332px;
    gap: var(--layout-grid-gutter);
    margin-top: var(--layout-section-title-content-gap-base);
}
.intro__metric dd {
    margin-top: 36px;
    font-size: var(--heading-xxl-size);
    line-height: var(--heading-xxl-line-height);
    letter-spacing: var(--heading-xxl-tracking);
}

/* ============================================================
   3 · VISUALIZA Y DECIDE
   ============================================================ */
/* Pin: la sección es un "track" alto y su contenido se queda fijo (sticky)
   mientras se recorre; ese recorrido es el que hace la transición. */
.visualiza { position: relative; padding: var(--layout-section-padding-y-compact) 0; }
@media (min-width: 901px) and (min-height: 700px) {
    .visualiza { height: calc(100vh + 120vh); padding: 0; }
    .visualiza__sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .visualiza__sticky > .h-container { width: 100%; }
}
.visualiza__grid {
    display: grid;
    grid-template-columns: 622px 622px;
    justify-content: space-between;
    align-items: start;
}
.visualiza__media {
    position: relative;
    margin-top: 14px;
    aspect-ratio: 622 / 596;
    border-radius: var(--base-8);
    overflow: hidden;
    background: #fff;
}
.visualiza__photo,
.visualiza__plan {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* el mosaico tapa la foto y se retira de arriba abajo según el scroll:
   --reveal va de 0 (mosaico entero) a 1 (foto entera), lo calcula home.js */
.visualiza__plan {
    background: #fff;
    clip-path: inset(calc(var(--reveal, 0) * 100%) 0 0 0);
}

.visualiza__title {
    font-size: var(--heading-xxl-size);
    line-height: var(--heading-xxl-line-height);
    letter-spacing: var(--heading-xxl-tracking);
    font-weight: var(--font-weight-regular);
}
.visualiza__list { margin-top: 110px; max-width: 584px; }
.visualiza__item + .visualiza__item { border-top: var(--base-thin) solid var(--accordion-default-border); }
.visualiza__link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--base-16);
    padding: var(--base-40) 0;
    color: inherit;
    text-decoration: none;
}
.visualiza__row { display: flex; align-items: center; justify-content: space-between; gap: var(--base-16); width: 100%; }
.visualiza__item-title {
    font-size: var(--heading-lg-size);
    line-height: var(--heading-lg-line-height);
    letter-spacing: var(--heading-lg-tracking);
    color: var(--text-primary);
    transition: opacity var(--transition);
}
.visualiza__item .tag-solid,
.visualiza__item .icon-btn { transition: background-color var(--transition), color var(--transition), opacity var(--transition); }
/* entrada inactiva: texto apagado y botón blanco (Figma: segunda entrada) */
.visualiza__item:not(.is-active) .visualiza__item-title { opacity: .4; }
.visualiza__item:not(.is-active) .tag-solid { opacity: .55; }
.visualiza__item:not(.is-active) .icon-btn { background: #fff; color: var(--icon-primary); }

/* ============================================================
   4 · PILARES (Figma "Cards Accordion")
   ============================================================ */
.pilares { padding-bottom: var(--layout-section-padding-y-extended); }
.pilares__title { margin-bottom: var(--layout-section-title-content-gap-base); }
.pilares__cards {
    /* ancho de una tarjeta abierta (flex 1.7 frente a 1 + 1) */
    --pilar-open-w: calc((min(100vw, var(--layout-max)) - 2 * var(--layout-grid-margin) - 2 * var(--layout-grid-gutter)) * 1.7 / 3.7);
    display: flex;
    gap: var(--layout-grid-gutter);
    height: 568px;
}
.pilares__card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    border-radius: var(--base-8);
    overflow: hidden;
    outline: none;
    contain: layout paint;
    transition: flex-grow .8s cubic-bezier(.65,0,.35,1);
}
/* El vídeo NO cambia de tamaño al abrirse la tarjeta: mide siempre lo que la
   tarjeta abierta y va centrado; la tarjeta solo recorta. Así la animación solo
   mueve cajas y no reescala el vídeo en cada fotograma (era lo que daba tirones). */
.pilares__media {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: var(--pilar-open-w);
    transform: translateX(-50%);
    background: var(--background-subtle);
}
.pilares__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pilares__overlay {
    position: absolute; inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--base-16);
    padding: var(--base-16);
    background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 45%);
    opacity: 1;
}
.pilares__text {
    width: min(380px, calc(var(--pilar-open-w) - 2 * var(--base-16)));
    max-width: 380px;
    color: var(--text-inverse);
    font-size: var(--body-base-size);
    line-height: var(--body-base-line-height);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .4s ease, transform .4s ease;
}
/* la tarjeta activa se ensancha y muestra su texto */
.pilares__card.is-open { flex-grow: 1.7; }
.pilares__card.is-open .pilares__text { opacity: 1; transform: none; transition-delay: .25s; }
.pilares__card:focus-visible { box-shadow: 0 0 0 2px var(--background-navy); }

/* ============================================================
   5 · ARTÍCULO (Figma "Image Article") — 849px
   ============================================================ */
.articulo { position: relative; height: 849px; overflow: hidden; }
.articulo__card { position: absolute; right: var(--layout-grid-margin); bottom: var(--layout-grid-margin); }
/* Figma "Article Card": ~387px, miniatura apaisada 177×128 a la izquierda,
   texto a la derecha con "+ Leer artículo" abajo, en blanco */
.card-glass--row { flex-direction: row; width: 387px; align-items: stretch; }
.card-glass--row .card-glass__media { flex: 0 0 177px; }
.card-glass--row .card-glass__media img { height: 128px; object-position: 50% 58%; }
.card-glass--row .card-glass__text { flex: 1; min-width: 0; padding: 2px 0; }
.card-glass--row .text-action { margin-top: auto; color: var(--glass-text-primary); }

/* fondo con parallax (compartido por artículo, carbono y CTA) */
[data-parallax] { position: absolute; inset: 0; overflow: hidden; }
[data-parallax] img {
    position: absolute;
    left: 0; top: -10%;
    width: 100%; height: 120%;
    object-fit: cover;
    transform: translate3d(0, var(--parallax, 0px), 0);
    will-change: transform;
}

/* ============================================================
   6 · PROYECTOS (Figma "Project")
   ============================================================ */
.proyectos { padding-bottom: var(--layout-section-padding-y-extended); }
.proyectos .h-title { font-size: var(--heading-xl-size); line-height: var(--heading-xl-line-height); letter-spacing: var(--heading-xl-tracking); }
.proyectos__grid { display: flex; flex-direction: column; gap: var(--layout-grid-gutter); }
/* cada fila guarda la proporción del Figma (1376 × 480) a cualquier ancho */
.proyectos__row { display: flex; gap: var(--layout-grid-gutter); aspect-ratio: 1376 / 480; }
/* fila 1: 390 · 564 · 390 — fila 2: 680 · 680 */
.proyectos__row .project-card { flex: 1 1 0; min-width: 0; }
.proyectos__row:first-child .project-card:nth-child(1),
.proyectos__row:first-child .project-card:nth-child(3) { flex-grow: 390; }
.proyectos__row:first-child .project-card:nth-child(2) { flex-grow: 564; }

.project-card {
    position: relative;
    display: block;
    border-radius: var(--base-8);
    overflow: hidden;
    color: var(--text-inverse);
    text-decoration: none;
}
.project-card__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: filter .5s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
.project-card__tags {
    position: absolute; top: var(--base-16); right: var(--base-16);
    display: flex; gap: var(--component-tag-gap);
}
.project-card__tags sub { font-size: .7em; vertical-align: baseline; position: relative; top: .2em; }
.project-card__footer {
    position: absolute; left: var(--base-16); right: var(--base-16); bottom: var(--base-16);
    display: flex; align-items: flex-end; justify-content: space-between; gap: var(--base-16);
}
.project-card__name {
    font-size: 24px; line-height: 28px;
    text-wrap: balance;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s ease, transform .4s ease;
}
/* botón de cristal "Ver proyecto ↗": mismo material que las etiquetas */
.project-card__cta {
    flex: none;
    padding: 8px 8px 8px 12px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s ease .06s, transform .4s ease .06s, background-color var(--transition);
}
.project-card__cta .tag-glass__dot { transition: transform .3s ease; }
.project-card:hover .project-card__cta .tag-glass__dot { transform: rotate(45deg); }
/* hover (Figma: primera tarjeta) — la foto se desenfoca y aparece el nombre */
.project-card:hover .project-card__img,
.project-card:focus-visible .project-card__img { filter: blur(8px) brightness(.85); transform: scale(1.03); }
.project-card:hover .project-card__name,
.project-card:focus-visible .project-card__name,
.project-card:hover .project-card__cta,
.project-card:focus-visible .project-card__cta { opacity: 1; transform: none; }

/* ============================================================
   7 · CARBON NEUTRAL (Figma "Timeline" / "Carbon Neutral Parallax") — 900px
   ============================================================ */
.carbono {
    position: relative;
    height: 900px;
    overflow: hidden;
    isolation: isolate;
    color: var(--text-inverse);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* el titular a la altura del Figma: su segunda línea queda tras el edificio */
    padding-top: 292px;
    box-sizing: border-box;
}
/* capas: foto (z -1) · titular (0) · recorte de árboles y edificio (1) · texto y métrica (2).
   .carbono__layers no crea contexto de apilamiento, así sus dos imágenes se
   ordenan con el resto de la sección. */
.carbono__layers img { object-position: 50% 100%; }
.carbono__back  { z-index: -1; }
.carbono__front { z-index: 1; }
.carbono__center {
    position: relative; z-index: 0;
    text-align: center;
    padding: 0 var(--layout-grid-margin);
    transform: translate3d(0, var(--lag, 0px), 0);
    will-change: transform;
}
.carbono__center .eyebrow { margin-bottom: var(--base-24); }
.carbono__title {
    font-size: var(--display-xl-size);
    line-height: var(--display-xl-line-height);
    letter-spacing: var(--display-xl-tracking);
    font-weight: var(--font-weight-regular);
}
.carbono__title .reveal-line { display: block; }
.carbono__bottom {
    position: absolute;
    z-index: 2;
    left: var(--layout-grid-margin); right: var(--layout-grid-margin); bottom: var(--layout-grid-margin);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--base-32);
}
.carbono__info { max-width: 270px; }
.carbono__info p {
    font-size: var(--body-sm-size);
    line-height: var(--body-sm-line-height);
    color: var(--text-inverse);
    margin-bottom: var(--base-24);
}
.metric-glass {
    display: flex;
    align-items: center;
    gap: var(--base-12);
    padding: var(--base-12) var(--base-16);
    border-radius: var(--base-8);
}
.metric-glass__value { font-size: var(--heading-lg-size); line-height: var(--heading-lg-line-height); letter-spacing: var(--heading-lg-tracking); font-variant-numeric: tabular-nums; }
.metric-glass__label { font-size: var(--body-sm-size); line-height: var(--body-sm-line-height); color: var(--glass-text-secondary); }

/* ============================================================
   8 · SHOWROOMS (Figma "Cities") — 950px
   ============================================================ */
.showrooms { padding-bottom: 127px; }
.showrooms .h-title { font-size: var(--heading-xl-size); line-height: var(--heading-xl-line-height); letter-spacing: var(--heading-xl-tracking); }
.showrooms__desc {
    max-width: 275px;
    font-size: var(--body-sm-size);
    line-height: var(--body-sm-line-height);
    color: var(--text-primary);
}
.showrooms__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10.67px; }
.city-card {
    position: relative;
    display: block;
    aspect-ratio: 336 / 390;
    border-radius: var(--base-8);
    overflow: hidden;
    color: var(--text-inverse);
    text-decoration: none;
}
.city-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.22,.61,.36,1); }
.city-card__tag { position: absolute; top: var(--base-16); left: var(--base-16); }
/* Figma "Media-action" (138×40): botón que aparece al pasar el ratón */
.city-card__action {
    position: absolute; left: var(--base-8); bottom: var(--base-8);
    display: inline-flex; align-items: center; gap: var(--base-8);
    height: 40px; padding: 0 var(--base-16);
    border-radius: var(--component-button);
    background: var(--button-inverse-background-default);
    color: var(--button-inverse-text-default);
    font-size: var(--action-text-size);
    line-height: var(--action-text-line-height);
    font-weight: var(--action-text-weight);
    letter-spacing: var(--action-text-tracking);
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s ease, transform .3s ease;
}
.city-card:hover .city-card__img,
.city-card:focus-visible .city-card__img { transform: scale(1.04); }
.city-card:hover .city-card__action,
.city-card:focus-visible .city-card__action { opacity: 1; transform: none; }

/* ============================================================
   9 · TESTIMONIOS (Figma "Testimonials")
   ============================================================ */
/* Figma: 48px de aire bajo la foto dentro del bloque + 80 de padding = 128 hasta los logos */
.testimonios { padding-bottom: calc(var(--layout-section-title-content-gap-tight) + var(--layout-section-padding-y-compact)); }
.testimonios__viewport { position: relative; }
.testimonio { display: grid; grid-template-columns: 388px 1fr; gap: 76px; }
.testimonio[hidden] { display: none; }
.testimonio.is-active { animation: fade-in .6s ease both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.testimonio__media { position: relative; align-self: start; aspect-ratio: 388 / 476; border-radius: var(--base-8); overflow: hidden; }
.testimonio__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.testimonio__body { display: flex; flex-direction: column; justify-content: space-between; gap: var(--base-40); }
/* Figma: la primera línea arranca al 36 % de la columna y las comillas, pequeñas,
   quedan arriba a la izquierda a la altura de la mayúscula */
.testimonio__quote {
    position: relative;
    font-size: var(--heading-xl-size);
    line-height: var(--heading-xl-line-height);
    letter-spacing: var(--heading-xl-tracking);
    text-indent: 36%;
    padding: 0;
    margin: 0;
    border: 0;
    font-style: normal;
}
.testimonio__mark {
    position: absolute; left: 0; top: 2px;
    text-indent: 0;
    font-size: 28px; line-height: 28px;
}
.testimonio__author { display: flex; flex-direction: column; gap: var(--base-8); padding-right: 120px; }
.testimonio__name { font-size: var(--title-sm-size); line-height: var(--title-sm-line-height); font-weight: var(--title-sm-weight); }
.testimonios__nav { position: absolute; right: 0; bottom: 0; display: flex; gap: var(--base-8); }

/* ============================================================
   10 · PRENSA (Figma "Logos") — 189px
   ============================================================ */
.prensa { padding: var(--layout-section-padding-y-compact) var(--layout-grid-margin); }
.prensa__list {
    max-width: 1152px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--base-32);
}
.prensa__logo { height: 29px; display: flex; align-items: center; color: var(--text-primary); }
.prensa__logo img { display: block; max-height: 29px; width: auto; height: auto; }
/* provisional: logos como texto hasta tener los SVG */
.prensa__logo span { font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.prensa__logo--ad span { font-size: 26px; font-weight: 400; letter-spacing: -.04em; }
.prensa__logo--forbes span { font-size: 22px; letter-spacing: -.01em; }
.prensa__logo--valencia-plaza span { font-weight: 400; font-size: 17px; letter-spacing: 0; }
.prensa__logo--el-espanol span { font-weight: 400; font-size: 15px; letter-spacing: .04em; }

/* ============================================================
   11 · FAQS (Figma "Accordion List") — 755px
   ============================================================ */
.faqs { overflow: hidden; }
/* Figma: el isotipo está en x -172 de un frame de 1440 y el título centrado en 409.
   Se ancla al centro (50% - 720 - 172) para mantener esa relación a cualquier ancho. */
.faqs__shape { position: absolute; left: calc(50% - 892px); top: 40px; width: 820px; height: 957px; color: rgba(0,0,0,.08); pointer-events: none; }
.faqs__shape path { stroke-width: var(--base-thin); } /* línea muy fina y suave, como en el Figma */
.faqs__inner { position: relative; max-width: 622px; margin: 0 auto; padding: 0 var(--layout-grid-margin); box-sizing: content-box; }
.faqs .h-title { min-height: 52px; margin-bottom: var(--layout-section-title-content-gap-tight); } /* bloque de 52 del Figma */
.faq-item { border-top: 1px solid var(--accordion-default-border); }
.faq-item:last-child { border-bottom: 1px solid var(--accordion-default-border); }
.faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--base-16);
    padding: var(--component-accordion-item-padding-y) 0;
    font-size: var(--title-sm-size);
    line-height: var(--title-sm-line-height);
    font-weight: var(--title-sm-weight);
    color: var(--accordion-default-title);
    cursor: pointer;
    list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-icon { position: relative; width: 10px; height: 10px; flex: none; }
.faq-icon::before,
.faq-icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 1px; background: currentColor; transition: transform var(--transition); }
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: rotate(0deg); }
.faq-a {
    margin-top: calc(var(--component-accordion-item-content-gap) - var(--component-accordion-item-padding-y));
    padding-bottom: var(--component-accordion-item-padding-y);
    font-size: var(--body-sm-size);
    line-height: var(--body-sm-line-height);
    color: var(--accordion-default-body);
}

/* ============================================================
   12 · CTA FINAL — 849px
   ============================================================ */
.cta-final {
    position: relative;
    height: 849px;
    overflow: hidden;
    isolation: isolate;
    color: var(--text-inverse);
    display: flex;
    align-items: center;
}
.cta-final__bg { z-index: -2; }
.cta-final__bg::after { content: ""; position: absolute; inset: 0; background: var(--opacity-dark-40); }
.cta-final__circle {
    position: absolute; z-index: -1;
    left: 50%; top: 50%;
    width: 1134px; height: 1134px;
    transform: translate(-50%, -46%);
    border: var(--base-thin) solid rgba(255,255,255,.45);
    border-radius: 50%;
    pointer-events: none;
}
.cta-final__inner { width: 100%; }
.cta-final .eyebrow { margin-bottom: var(--base-16); }
.cta-final__title {
    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);
}
.cta-final__title .reveal-line { display: block; }
.cta-final__text {
    max-width: 360px;
    margin: var(--base-24) 0 var(--base-32);
    font-size: var(--body-base-size);
    line-height: var(--body-base-line-height);
}

/* ============================================================
   PIE (Figma "Footer", 1440 × 675): padding 80/32 y 120 entre las tres franjas
   ============================================================ */
.site-footer {
    background: var(--background-navy);
    color: var(--text-on-brand-primary);
    font-family: var(--font-family-title);
    padding: var(--layout-section-padding-y-compact) 0;
}
.site-footer a { color: inherit; text-decoration: none; transition: opacity var(--transition); }
.site-footer a:hover { opacity: .7; color: inherit; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }

/* Franja 1: isotipo 42×49 · claim a 313px del borde (564 de ancho) · botón de 228 con las redes debajo */
.site-footer__top { display: grid; grid-template-columns: 313px 564px 1fr auto; align-items: start; }
.site-footer__isotipo svg { width: 42px; height: 49px; display: block; color: var(--logo-on-brand); }
.site-footer__claim {
    grid-column: 2;
    font-size: var(--heading-xl-size);
    line-height: var(--heading-xl-line-height);
    letter-spacing: var(--heading-xl-tracking);
}
.site-footer__actions { grid-column: 4; display: flex; flex-direction: column; align-items: flex-end; gap: var(--base-32); }
.site-footer__actions .btn { min-width: 228px; } /* 228 en el Figma; con Inter el texto pide algo más */
.site-footer__social { display: flex; gap: var(--base-8); }
.site-footer__social a { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.site-footer__social .icon { width: 18px; height: 18px; }

/* Franjas 2 y 3: cinco columnas de 216 separadas 74 (= 1376) */
.site-footer__cols,
.site-footer__bottom { display: grid; grid-template-columns: repeat(5, 216px); column-gap: 74px; justify-content: space-between; }
.site-footer__cols { margin-top: var(--layout-section-padding-y-base); }
.site-footer__heading { font-size: var(--title-sm-size); line-height: var(--title-sm-line-height); font-weight: var(--title-sm-weight); margin-bottom: var(--base-12); }
.site-footer__col li { line-height: var(--body-sm-line-height); }
.site-footer__col li > a { display: block; } /* cada enlace mide 20px justos */
.site-footer__col li + li { margin-top: var(--base-12); }
.site-footer__col a,
.site-footer__bottom a { font-size: var(--body-sm-size); line-height: var(--body-sm-line-height); color: var(--text-on-brand-subtle); }

/* Newsletter (Figma: línea de 0,5 blanca, 30 de alto, flecha de 10; aviso legal 11/16) */
.newsletter { position: relative; display: flex; align-items: center; gap: var(--base-8); max-width: 216px; padding: 5px 0; border-bottom: var(--base-thin) solid #fff; }
.newsletter__input {
    flex: 1; min-width: 0;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-on-brand-primary);
    font: inherit;
    font-size: var(--body-sm-size); line-height: var(--body-sm-line-height);
}
.newsletter__input::placeholder { color: var(--text-on-brand-subtle); }
.newsletter__input:focus { outline: none; }
.newsletter__submit { border: 0; background: none; color: #fff; padding: 0; cursor: pointer; line-height: 0; }
.newsletter__submit .icon { width: 10px; height: 10px; }
.newsletter__legal,
.newsletter__msg { margin-top: var(--base-12); max-width: 216px; font-size: 11px; line-height: 16px; color: var(--text-on-brand-subtle); }
.newsletter__legal a { font-size: inherit; color: inherit; text-decoration: none; }
.newsletter__legal a:hover { text-decoration: underline; }
.newsletter__msg { font-size: var(--body-sm-size); line-height: var(--body-sm-line-height); color: #fff; }

.site-footer__bottom { margin-top: var(--layout-section-padding-y-base); align-items: center; }
.site-footer__bottom p { font-size: var(--body-sm-size); line-height: var(--body-sm-line-height); font-weight: var(--title-sm-weight); }
.site-footer__bottom a:last-child { color: rgba(255,255,255,.5); } /* "Configuración de cookies" va al 50 % en el Figma */

/* ============================================================
   RESPONSIVE — el Figma solo trae desktop; se adapta a tablet y móvil
   ============================================================ */
@media (max-width: 1240px) {
    .visualiza__grid { grid-template-columns: 1fr 1fr; gap: var(--base-40); }
    .intro__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    .pilares__cards { height: 480px; }
    .articulo, .cta-final { height: 720px; }
    .carbono { height: 760px; padding-top: 220px; }
    .testimonio { grid-template-columns: 300px 1fr; gap: var(--base-40); }
    .testimonio__quote { font-size: var(--heading-lg-size); line-height: var(--heading-lg-line-height); }
    .site-footer__top { grid-template-columns: 80px 1fr; row-gap: var(--base-32); }
    .site-footer__claim { grid-column: 2; }
    .site-footer__actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
    .site-footer__actions .btn { width: auto; }
    .site-footer__cols { grid-template-columns: repeat(3, 1fr); column-gap: var(--base-32); row-gap: var(--base-40); margin-top: 80px; }
    .site-footer__bottom { grid-template-columns: repeat(3, 1fr); column-gap: var(--base-32); row-gap: var(--base-12); margin-top: 80px; }
}
@media (max-width: 900px) {
    .hero-home__inner { right: var(--layout-grid-margin); bottom: calc(var(--layout-grid-margin) + 236px); }
    .hero-home__project { left: auto; }
    .visualiza__grid { grid-template-columns: 1fr; }
    .visualiza__list { margin-top: var(--base-40); max-width: none; }
    .pilares__cards { flex-direction: column; height: auto; }
    .pilares__card { flex: none; height: 420px; }
    .pilares__media { left: 0; width: 100%; transform: none; }
    .pilares__text { width: auto; }
    .pilares__card.is-open { flex-grow: 0; }
    .pilares__text { opacity: 1; transform: none; }
    .proyectos__row { aspect-ratio: auto; height: 320px; }
    .project-card__name, .project-card__cta { opacity: 1; transform: none; }
    .project-card__name { font-size: 20px; line-height: 24px; }
    .showrooms__grid { grid-template-columns: repeat(2, 1fr); }
    .h-head { flex-direction: column; align-items: flex-start; }
    .testimonio { grid-template-columns: 1fr; }
    .testimonio__media { aspect-ratio: 4 / 3; }
    .testimonio__quote { text-indent: 0; padding-top: var(--base-32); }
    .city-card__action { opacity: 1; transform: none; }
    .prensa__list { flex-wrap: wrap; justify-content: center; gap: var(--base-24) var(--base-40); }
}
@media (max-width: 640px) {
    /* en móvil los titulares fluyen: los cortes de línea son los del escritorio */
    .home-2026 .reveal-line { display: inline; }
    .hero-home__title .reveal-line { padding-bottom: 0; }
    .hero-home__cities .tag-glass { padding: 8px 10px; font-size: var(--label-tag-size); }
    .hero-home__project { width: auto; left: var(--layout-grid-margin); flex-direction: row; }
    .hero-home__project .card-glass__media { flex: 0 0 96px; }
    .hero-home__project .card-glass__media img { height: 72px; }
    .hero-home__inner { bottom: calc(var(--layout-grid-margin) + 120px); }
    .intro__metrics { grid-template-columns: 1fr; gap: var(--base-32); }
    .intro__metric dd { margin-top: var(--base-12); }
    .articulo, .cta-final { height: 640px; }
    .articulo__card { left: var(--layout-grid-margin); width: auto; }
    .card-glass--row .card-glass__media { flex-basis: 120px; }
    .card-glass--row .card-glass__media img { height: 100px; }
    .carbono { height: auto; min-height: 720px; padding: 120px 0 var(--layout-grid-margin); justify-content: flex-start; gap: 120px; }
    .carbono__bottom { position: static; flex-direction: column; align-items: flex-start; padding: 0 var(--layout-grid-margin); }
    .proyectos__row { flex-direction: column; aspect-ratio: auto; height: auto; }
    .proyectos__row .project-card { flex: none !important; height: 360px; }
    .showrooms__grid { grid-template-columns: 1fr 1fr; gap: var(--base-8); }
    .city-card__action { display: none; }
    .testimonio__author { padding-right: 0; }
    .testimonios__nav { position: static; margin-top: var(--base-24); }
    .faqs__shape { display: none; }
    .faqs__inner { padding: 0 var(--layout-grid-margin); }
    .cta-final__circle { width: 720px; height: 720px; }
    .site-footer__top { grid-template-columns: 1fr; }
    .site-footer__claim { grid-column: 1; }
    .site-footer__actions { flex-direction: column; align-items: flex-start; }
    .site-footer__cols, .site-footer__bottom { grid-template-columns: 1fr 1fr; }
    .site-footer__cols > :first-child { grid-column: 1 / -1; }
    .newsletter, .newsletter__legal { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-home__img, .hero-home__title .reveal-line, .hero-home__cities, .hero-home__project { animation: none; }
    .has-reveal [data-reveal] { opacity: 1; filter: none; transform: none; transition: none; }
    [data-parallax] img { transform: none; }
    .pilares__card { transition: none; }
    /* sin animación no hay pin: la sección mide lo de siempre y enseña la foto */
    .visualiza { height: auto; padding: var(--layout-section-padding-y-compact) 0; }
    .visualiza__sticky { position: static; height: auto; }
}