/* ============================================================
   SHOWROOM 2026 — Figma "Cubicup-Web" › "Home New Concept - Iteration #2" ›
   Showrooms, opción de la derecha (1690:4854, 1440 × 9159).
   Va sobre home.css y sistema.css (FAQs, CTA, etiquetas de cristal).
   ============================================================ */

/* ---------------- CABECERA (896): foto de 712 a la izquierda y columna centrada en crema ---------------- */
.showroom-hero {
    display: grid; grid-template-columns: 712fr 728fr;
    height: 100vh; height: 100svh; min-height: 720px; max-height: 896px;
    background: var(--background-page);
}
.showroom-hero__media { position: relative; overflow: hidden; }
.showroom-hero__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.showroom-hero__others {
    position: absolute; left: var(--layout-grid-margin); bottom: var(--layout-grid-margin);
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--base-16);
    animation: line-appear 1s cubic-bezier(.22,.61,.36,1) 1.1s both;
}
.showroom-hero__others-title {
    margin: 0;
    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: rgba(255,255,255,.8);
}
.showroom-hero__others ul { display: flex; margin: 0; padding: 0; list-style: none; }
.showroom-hero__others span.tag-hover { cursor: default; }
/* columna: etiqueta (H1), titular de 60 en 448, foto de 215 × 269 y texto de 274; 32 entre piezas */
.showroom-hero__content {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: min(32px, 3.4vh);
    padding: 112px var(--base-16) 48px; /* 112 = la barra de navegación + aire; abajo, aire para no rozar el borde */
    text-align: center;
}
.showroom-hero__eyebrow { margin: 0 0 calc(min(32px, 3.4vh) * -0.5); font-size: var(--ui-card-eyebrow-size); line-height: var(--ui-card-eyebrow-line-height); letter-spacing: var(--ui-card-eyebrow-tracking); color: var(--text-secondary); animation: line-appear 1s cubic-bezier(.22,.61,.36,1) .2s both; }
.showroom-hero__title {
    max-width: 520px; margin: 0; /* 448 en el Figma con Saans; con Inter hace falta algo más para las 3 líneas */
    font-size: min(var(--heading-xxxl-size), 6.2vh); line-height: 1; /* 60 en el Figma (896 de alto); en pantallas más bajas encoge */
    letter-spacing: var(--heading-xxxl-tracking); font-weight: var(--font-weight-regular);
    color: var(--text-primary);
}
.showroom-hero__title .reveal-line { display: block; animation: line-appear 1s cubic-bezier(.22,.61,.36,1) .35s both; }
.showroom-hero__foto { height: min(269px, 27vh); width: auto; aspect-ratio: 215 / 269; object-fit: cover; border-radius: var(--radius-media); animation: line-appear 1s cubic-bezier(.22,.61,.36,1) .6s both; }
.showroom-hero__text { max-width: 274px; margin: 0; font-size: var(--body-sm-size); line-height: 20px; color: var(--text-primary); animation: line-appear 1s cubic-bezier(.22,.61,.36,1) .8s both; }

/* ---------------- CIFRAS (786, subtle): fotos que pasan a la izquierda; frase y cifras de 44 a la derecha ---------------- */
.showroom-cifras { padding: var(--layout-section-padding-y-extended) 0; background: var(--background-subtle); }
.showroom-cifras__grid {
    display: flex; gap: 74px;
    padding-top: 48px; border-top: var(--base-thin) solid var(--accordion-default-border);
}
.showroom-cifras__fotos { flex: 0 0 506px; margin-left: 116px; height: 370px; overflow: hidden; border-radius: var(--radius-media); }
.showroom-cifras__track { display: flex; width: max-content; height: 100%; animation: showroom-marquee 60s linear infinite; }
.showroom-cifras__track img { width: 245px; height: 100%; margin-right: var(--layout-grid-gutter); object-fit: cover; border-radius: var(--radius-media); }
@keyframes showroom-marquee { to { transform: translateX(-50%); } } /* la tira va duplicada: -50 % = una vuelta */
.showroom-cifras__content { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--base-40, 40px); }
.showroom-cifras__statement {
    max-width: 622px; margin: 0;
    font-size: var(--heading-xl-size); line-height: var(--heading-xl-line-height); letter-spacing: var(--heading-xl-tracking);
    color: var(--text-primary);
}
.showroom-cifras__metrics { display: grid; grid-template-columns: repeat(3, 216px); gap: var(--layout-grid-gutter); margin: 0; }
.showroom-cifras__metrics dd {
    margin: 20px 0 0;
    font-size: var(--heading-xl-size); line-height: var(--heading-xl-line-height); letter-spacing: var(--heading-xl-tracking);
    color: var(--text-primary);
}

/* ---------------- PROYECTOS (1076): titular de 52, texto y "Ver todos" en la mitad derecha, una fila ---------------- */
.showroom-proyectos .h-title { font-size: var(--heading-xxl-size); line-height: var(--heading-xxl-line-height); letter-spacing: var(--heading-xxl-tracking); }
.showroom-proyectos .h-head { align-items: flex-start; margin-bottom: var(--layout-section-title-content-gap-base); }
.showroom-proyectos__aside { flex: 0 0 622px; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--base-24); padding-top: 16px; }
.showroom-proyectos__aside p { max-width: 274px; margin: 0; font-size: var(--body-sm-size); line-height: 20px; color: var(--text-primary); }
.showroom-proyectos .project-card__img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------- EL SHOWROOM (933): foto a sangre, titular y botón arriba, dirección abajo ---------------- */
.showroom-espacio { position: relative; height: 933px; overflow: hidden; isolation: isolate; color: var(--text-inverse); }
.showroom-espacio__bg { z-index: -1; }
.showroom-espacio__bg::after { content: ""; position: absolute; inset: 0; background: var(--opacity-dark-40); }
/* foto algo desenfocada y ampliada desde arriba a la izquierda: en la original la
   cabeza de la chica cae justo bajo el titular y el botón; así queda a la derecha
   del botón y por debajo del titular. El zoom crece con la pantalla porque el
   bloque de texto se va separando del borde. */
.showroom-espacio { --zoom: 167%; }
.showroom-espacio__bg img { width: var(--zoom); object-position: 0 0; filter: blur(3px); }
@media (min-width: 1600px) { .showroom-espacio { --zoom: 185%; } }
@media (min-width: 1800px) { .showroom-espacio { --zoom: 195%; } }
@media (max-width: 900px) { .showroom-espacio { --zoom: 100%; } }
.showroom-espacio__grid {
    position: relative; height: 100%; box-sizing: border-box;
    padding-top: var(--layout-grid-margin); padding-bottom: var(--layout-grid-margin);
    display: flex; justify-content: space-between; align-items: stretch;
}
.showroom-espacio__head { width: 448px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--base-24); }
.showroom-espacio__title {
    margin: 0; font-weight: var(--font-weight-regular); color: var(--text-inverse);
    font-size: var(--heading-xxxl-size); line-height: var(--heading-xxxl-line-height); letter-spacing: var(--heading-xxxl-tracking);
}
.showroom-espacio__title .reveal-line { display: block; }
.showroom-espacio__text { width: 390px; align-self: flex-end; display: flex; flex-direction: column; align-items: flex-start; }
.showroom-espacio__text p { margin: 0 0 20px; font-size: var(--body-sm-size); line-height: 20px; color: var(--text-inverse); }
.showroom-espacio__text p:last-of-type { margin-bottom: var(--base-8); }
.showroom-espacio__address { gap: 6px; }
.showroom-espacio__address svg { width: 16px; height: 16px; margin: 0; opacity: 1; }

/* ---------------- TEXTO + FOTO (919): plataforma (crema) y precio (navy) ---------------- */
.showroom-duo { padding: var(--layout-section-padding-y-extended) 0; background: var(--background-subtle); }
.showroom-duo--page { background: var(--background-page); }
.showroom-duo__grid { display: flex; justify-content: space-between; align-items: center; gap: 80px; }
.showroom-duo__text { flex: 0 0 448px; margin-left: 116px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.showroom-duo__desc p { margin: 0; font-size: var(--body-base-size); line-height: 24px; color: var(--text-primary); }
.showroom-duo__media { flex: 0 0 622px; width: 622px; height: 599px; object-fit: cover; border-radius: var(--radius-media); }
/* por debajo de 1440 (portátiles, iPad Pro en horizontal): las cifras reparten el ancho
   en vez de las columnas fijas de 216 del Figma, que se salían por la derecha */
@media (max-width: 1439px) {
    .showroom-cifras__fotos { margin-left: 0; }
    .showroom-cifras__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 901–1200 (iPad Pro en vertical): foto 50 % + texto 45 % no caben con 80 de hueco */
@media (max-width: 1200px) { .showroom-duo__grid { gap: 40px; } }

/* precio en navy: texto blanco de 506 pegado al margen y 24 entre piezas */
.showroom-duo--navy { background: var(--background-navy); }
.showroom-duo--navy .showroom-duo__text { flex-basis: 506px; margin-left: 0; gap: var(--base-24); }
.showroom-duo--navy .h-title,
.showroom-duo--navy .showroom-duo__desc p,
.showroom-duo--navy .showroom-calc__total { color: var(--text-inverse); }

/* calculadora: campo de 137 × 40, precio de 24/30 y barra fina con punto de 12 */
.showroom-calc { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.showroom-calc__row { display: flex; justify-content: space-between; align-items: center; gap: var(--base-16); }
.showroom-calc__field {
    width: 137px; height: 40px; box-sizing: border-box; padding: 10px 12px;
    display: flex; align-items: center; gap: var(--base-8);
    background: #fff; border: 1px solid rgba(0,0,0,.2); border-radius: var(--base-8);
    font-size: var(--body-sm-size); line-height: 20px; color: var(--text-muted);
}
.showroom-calc__field:focus-within { border-color: var(--background-navy); }
.showroom-calc__field input {
    flex: 1; min-width: 0; padding: 0; border: 0; background: none; outline: none;
    font: inherit; color: var(--text-primary); -moz-appearance: textfield;
}
.showroom-calc__field input::-webkit-outer-spin-button,
.showroom-calc__field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.showroom-calc__total { font-size: 24px; line-height: 30px; letter-spacing: -0.01em; color: var(--text-primary); white-space: nowrap; }
.showroom-calc__range {
    --calc-color: var(--background-navy);
    -webkit-appearance: none; appearance: none; width: 100%; height: 12px; margin: 0; background: none; cursor: pointer;
}
.showroom-duo--navy .showroom-calc__range { --calc-color: #fff; }
.showroom-calc__range::-webkit-slider-runnable-track { height: 1px; background: var(--calc-color); }
.showroom-calc__range::-moz-range-track { height: 1px; background: var(--calc-color); }
.showroom-calc__range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5.5px; border: 0; border-radius: 50%; background: var(--calc-color); }
.showroom-calc__range::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--calc-color); }
.showroom-calc__range:focus-visible { outline: 2px solid var(--calc-color); outline-offset: 4px; }

/* ---------------- VISÍTANOS (853): foto con velo al 70 %, texto de 506 y mapa de 680 × 533 ---------------- */
.showroom-visita { height: 853px; }
.showroom-visita .cta-final__bg::after { background: rgba(0,0,0,.7); }
.showroom-visita .cta-final__circle { width: 1175px; height: 1175px; transform: translate(-50%, -50%); border-color: rgba(255,255,255,.4); }
.showroom-visita__grid { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 80px; } /* width: dentro del flex de .cta-final el contenedor no ocupaba todo el ancho */
.showroom-visita__text { flex: 0 1 506px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--base-24); }
.showroom-visita .eyebrow { margin: 0; }
.showroom-visita .cta-final__title { max-width: 506px; margin: 0; }
.showroom-visita__address { max-width: 400px; margin: 0; font-size: var(--body-sm-size); line-height: 20px; color: var(--text-inverse); }
.showroom-visita__map { flex: 0 1 680px; min-width: 0; height: auto; aspect-ratio: 680 / 533; border-radius: var(--base-8); overflow: hidden; background: var(--background-subtle); }
.showroom-visita__map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------------- RESPONSIVE ---------------- */
@media (prefers-reduced-motion: reduce) {
    .showroom-cifras__track { animation: none; }
}
@media (max-width: 1200px) {
    .showroom-cifras__fotos { flex-basis: 40%; margin-left: 0; }
    .showroom-cifras__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .showroom-proyectos__aside { flex-basis: 50%; }
    .showroom-duo__text, .showroom-duo--navy .showroom-duo__text { margin-left: 0; flex-basis: 45%; }
    .showroom-duo__media { flex-basis: 50%; width: 50%; height: auto; aspect-ratio: 622 / 599; }
    .showroom-visita__text { flex-basis: 42%; }
    .showroom-visita__map { flex: 1 1 auto; height: auto; aspect-ratio: 680 / 533; }
}
@media (max-width: 900px) {
    .showroom-hero { grid-template-columns: 1fr; height: auto; max-height: none; }
    .showroom-hero__media { aspect-ratio: 4 / 5; }
    .showroom-hero__content { padding: 56px var(--layout-grid-margin) 72px; }
    .showroom-cifras__grid { flex-direction: column; gap: 40px; }
    .showroom-cifras__fotos { flex: none; height: 300px; }
    .showroom-cifras__metrics { grid-template-columns: 1fr; }
    .showroom-proyectos .h-head { flex-direction: column; gap: var(--base-24); }
    .showroom-proyectos__aside { flex-basis: auto; width: 100%; }
    .showroom-espacio { height: auto; }
    .showroom-espacio__grid { flex-direction: column; gap: 48px; padding-top: 96px; padding-bottom: 96px; }
    .showroom-espacio__head, .showroom-espacio__text { width: 100%; }
    .showroom-duo__grid { flex-direction: column-reverse; align-items: stretch; gap: 40px; }
    .showroom-duo__media { width: 100%; }
    .showroom-visita { height: auto; padding: 96px 0; }
    .showroom-visita__grid { flex-direction: column; align-items: stretch; gap: 40px; }
    .showroom-visita__map { aspect-ratio: 4 / 3; }
}

/* Cuánto cuesta: las tres gamas de Cubicup (filas con línea fina) */
.showroom-gamas { width: 100%; margin: 0; }
.showroom-gamas__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--base-16); padding: var(--base-12) 0; border-top: var(--base-thin) solid var(--color-border-on-dark); }
.showroom-gamas__row:last-child { border-bottom: var(--base-thin) solid var(--color-border-on-dark); }
.showroom-gamas dt { display: flex; flex-direction: column; gap: 2px; }
.showroom-gamas__name { font-size: var(--body-base-size); line-height: 20px; color: var(--text-inverse); }
.showroom-gamas__label { 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-on-brand-subtle); }
.showroom-gamas dd { margin: 0; font-size: 20px; line-height: 24px; color: var(--text-inverse); white-space: nowrap; }
.showroom-precio .showroom-duo__desc p + p { margin-top: var(--base-12); }