/* ==========================================================================
   The Capsule by Rabling — mockup v3

   Un solo gesto memorable: la portada arranca en negro con el monograma, y al
   hacer scroll la propia cápsula de la marca se abre hasta convertirse en la
   foto del showroom. La forma del logo ES la ventana por la que entras.

   Todo lo demás va deliberadamente callado. Si el gesto de entrada es el que
   se recuerda, el resto no puede competir: sin ticker, sin numeritos 01/02/03,
   sin "Scroll" rotado, sin micro-etiquetas en versales, sin tarjetas con velo
   negro encima. El manual de identidad lo pide con esas palabras: "evitando el
   exceso de elementos gráficos".

   Paleta y tipografías: Manual_TheCapsule.pdf, sin inventar un solo valor.
   ========================================================================== */

@font-face {
  font-family: "Vonca";
  src: url("fonts/Vonca-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vonca";
  src: url("fonts/Vonca-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tilda Sans";
  src: url("fonts/TildaSans-VF.woff2") format("woff2");
  font-weight: 300 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Moraeza";
  src: url("fonts/Moraeza.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* los ocho tonos oficiales (manual, pág. 09). No hay color de acento: la
     paleta es "un lienzo neutro que permite que los vestidos sean los
     verdaderos protagonistas visuales". */
  --taupe:       #a69b92;
  --arena:       #c9c1b6;
  --negro:       #121212;
  --negro-marca: #231f20;
  --carbon:      #383838;
  --gris:        #d8d5d0;
  --hueso:       #e3e2de;
  --casi-blanco: #f4f4f4;

  --display: "Vonca", "Optima", Palatino, serif;
  --sans:    "Tilda Sans", "Helvetica Neue", Arial, sans-serif;
  --acento:  "Moraeza", "Snell Roundhand", cursive;

  --aire: clamp(1.5rem, 5vw, 4.5rem);
  /* Todo el movimiento del sitio sale de aquí. La curva es muy suave y de
     salida larga a propósito: nada arranca de golpe ni frena en seco. */
  --ease:  cubic-bezier(0.22, 0.8, 0.24, 1);
  --lento: 1.1s;

  /* La geometría del lugar es curva: los racks van en arco, las lámparas son
     aros, el espejo del probador es redondo y el monograma es una cápsula.
     El sitio usa ese mismo vocabulario en vez de esquinas rectas. */
  /* La forma es la cápsula del monograma: un óvalo completo, no medio arco.
     La proporción (5:8) es la del propio ícono. */
  --capsula: 999px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--negro);

  color: var(--hueso);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* height:auto no es cosmético: los <img> llevan atributos width/height para
   reservar espacio, y si el CSS solo fija el ancho el atributo height sigue
   mandando y la imagen sale deformada. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--hueso); color: var(--negro-marca); padding: 0.75rem 1.25rem;
}
.saltar:focus { left: 1rem; top: 1rem; }

/* =========================================================== LA PORTADA ====

   Sección alta con una escena pegada adentro. El JS solo escribe una variable,
   --p (0 → 1), calculada del scroll; el resto es CSS, así el navegador compone
   transforms y clip-path sin recalcular layout en cada cuadro. */

.portada { position: relative; height: 260vh; background: var(--negro); }
.pie { background: var(--negro); }
@media (max-width: 48rem) { .portada { height: 220vh; } }

.portada__escena {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--negro);
}

/* la ventana con forma de cápsula: arranca del tamaño exacto del monograma
   (70 × 113 px) y crece hasta desbordar la pantalla */
.portada__ventana {
  position: absolute; inset: 0;
  clip-path: inset(
    calc(50% - (3.55rem + var(--p, 0) * 62vh))
    calc(50% - (2.2rem  + var(--p, 0) * 62vw))
    round calc(max(0px, 999px * (1 - var(--p, 0) * 1.45)))
  );
  will-change: clip-path;
}
.portada__ventana img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }

/* el velo solo aparece cuando ya hay foto que oscurecer */
.portada__ventana::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18,18,18,0.76) 0%, rgba(18,18,18,0.1) 42%, rgba(18,18,18,0) 62%);
  opacity: calc((var(--p, 0) - 0.45) * 2.6);
}

/* el monograma: crece y se disuelve conforme la ventana lo rebasa */
.portada__icono {
  position: absolute; top: 50%; left: 50%;
  width: 4.4rem;
  translate: -50% -50%;
  scale: calc(1 + var(--p, 0) * 3.4);
  opacity: calc(1 - var(--p, 0) * 2.6);
  will-change: scale, opacity;
  pointer-events: none;
}

/* el wordmark y la firma entran al final, ya con la foto abierta */
.portada__marca {
  position: absolute;
  left: var(--aire); right: var(--aire);
  bottom: clamp(2rem, 7vh, 4rem);
  opacity: calc((var(--p, 0) - 0.74) * 4.2);
  will-change: opacity;
}
.portada__marca img { width: min(26rem, 66vw); }
.portada__firma {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.9rem);
  color: var(--casi-blanco);
  margin: 1rem 0 0;
}
.portada__firma .acento { font-family: var(--acento); font-size: 1.4em; line-height: 1; }

/* aviso de scroll: se va en cuanto empiezas a bajar */
.portada__baja {
  position: absolute; left: 50%; bottom: clamp(1.75rem, 5vh, 3rem);
  translate: -50% 0;
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  opacity: calc(0.55 - var(--p, 0) * 3);
  display: grid; justify-items: center; gap: 0.6rem;
}
.portada__baja::after {
  content: ""; width: 1px; height: 2.1rem;
  background: linear-gradient(to bottom, currentColor, transparent);
  animation: cae 2.2s ease-in-out infinite;
}
@keyframes cae {
  0%, 100% { transform: scaleY(0.55); transform-origin: top; opacity: 0.5; }
  50%      { transform: scaleY(1);    transform-origin: top; opacity: 1; }
}

/* sin animación: la portada es una foto y ya */
@media (prefers-reduced-motion: reduce) {
  .portada { height: auto; }
  .portada__escena { position: static; height: 88svh; }
  .portada__ventana { clip-path: none; }
  .portada__ventana::after { opacity: 1; }
  .portada__icono, .portada__baja { display: none; }
  .portada__marca { opacity: 1; }
}

/* ================================================================= NAV ==== */

/* una marca y una acción; un menú de anclas dentro de una sola página es relleno */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem var(--aire);
  transition: background 0.5s var(--ease), color 0.5s var(--ease), padding 0.5s var(--ease);
}
/* width:auto obligatorio: el <img> trae width="900" como atributo, así que
   fijando solo la altura el logo se estiraba a 900px de ancho. */
.nav__marca img { height: 1.3rem; width: auto; }
.nav__marca .oscuro { display: none; }
.nav[data-fondo="si"] {
  background: rgba(227, 226, 222, 0.95);
  backdrop-filter: blur(12px);
  color: var(--negro-marca);
  padding-block: 0.8rem;
}
.nav[data-fondo="si"] .claro-logo { display: none; }
.nav[data-fondo="si"] .oscuro { display: block; }
/* mientras el monograma todavía manda, el wordmark del nav estorba */
.nav[data-portada="si"] .nav__marca { opacity: 0; pointer-events: none; }
.nav__marca { transition: opacity 0.5s var(--ease); }

/* =============================================================== BOTÓN ==== */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0 1.8rem;
  border: 1px solid currentColor; border-radius: 999px;
  background: transparent; color: inherit;
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 500;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 0.55s var(--ease), color 0.55s var(--ease);
}
.nav .boton { min-height: 2.5rem; padding: 0 1.3rem; font-size: 0.875rem; }
.boton--wa { gap: 0.55rem; }
.boton__icono { width: 1.15em; height: 1.15em; flex: none; }
.boton--lleno { background: var(--hueso); border-color: var(--hueso); color: var(--negro-marca); }
.boton--lleno:hover { background: transparent; color: var(--hueso); }
.claro .boton--lleno, .arena .boton--lleno {
  background: var(--negro-marca); border-color: var(--negro-marca); color: var(--hueso);
}
.claro .boton--lleno:hover, .arena .boton--lleno:hover { background: transparent; color: var(--negro-marca); }
.boton:not(.boton--lleno):hover { background: var(--hueso); color: var(--negro); }
.claro .boton:not(.boton--lleno):hover,
.arena .boton:not(.boton--lleno):hover { background: var(--negro-marca); color: var(--hueso); }

/* ========================================================== TIPOGRAFÍA ==== */

.voz {
  font-family: var(--display); font-weight: 300;
  line-height: 1.14; letter-spacing: -0.012em;
  font-size: clamp(1.7rem, 1.15rem + 2.5vw, 3.2rem);
}
.voz--chica { font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.95rem); }
.apoyo { max-width: 46ch; opacity: 0.78; }
.dato  { font-size: 0.875rem; line-height: 1.7; opacity: 0.72; }
.claro .apoyo, .arena .apoyo, .claro .dato, .arena .dato { opacity: 0.74; }

/* ============================================================ SECCIONES === */

.seccion { padding-inline: var(--aire); padding-block: clamp(4.5rem, 12vw, 8rem); }

/* Cruce: solo la cápsula sube y se monta sobre el campo de color anterior, de
   modo que el óvalo queda partido entre el negro y el hueso. Eso es lo que
   borra la lectura de "secciones apiladas", sin recurrir a un degradado.
   Aplicarlo a toda la secuencia hacía que se montara encima del titular. */
.cruza { position: relative; z-index: 2; }
.seccion__caja { max-width: 66rem; margin-inline: auto; }
/* Campos de color planos, como los del manual. Lo que rompe la sensación de
   "cajas apiladas" no es difuminar el fondo —eso abarata— sino que el
   contenido cruce el borde: ver .cruza más abajo.

   Encima del color va una sola capa: el grano del cemento pulido, que es el
   acabado real de los muros del showroom. Va en `soft-light` y es gris medio,
   así que no cambia el tono de la marca — solo da superficie.

   Se probó agregar además la trama del monograma en relieve y distraía
   demasiado: aquí el fondo tiene que ser muro, no estampado. */
.claro, .arena {
  color: var(--negro-marca);
  background-image: url("images/concreto.webp");
  background-size: 460px 460px;
  background-blend-mode: soft-light;
}
.claro { background-color: var(--hueso); }
.arena { background-color: var(--arena); }


/* la introducción vive sobre negro, justo después de la portada */
.intro { position: relative; overflow: hidden; }
.intro .seccion__caja { max-width: 46rem; position: relative; }
/* eco de los aros de luz del techo, apenas perceptible */
.intro::before {
  content: ""; position: absolute;
  left: 50%; top: 42%; translate: -50% -50%;
  width: min(48rem, 120vw); aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(166,155,146,0.14) 0%, rgba(166,155,146,0) 62%);
  pointer-events: none;
}

/* --------------------------------------------------------------- piezas --
   Una lista, no una rejilla de tarjetas. */

/* Secuencia fija: la foto se queda quieta en su nicho mientras los textos
   pasan por delante. Es una sola escena continua, no tres tarjetas. */
.secuencia { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 55rem) {
  .secuencia { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(3rem, 7vw, 6rem); }
}

.secuencia__nicho { position: relative; }
@media (min-width: 55rem) {
  .secuencia__nicho {
    position: sticky; top: 0;
    height: 100svh;
    display: grid; align-content: center;
    padding-block: 4.5rem;
    margin-top: clamp(-13rem, -18vw, -7rem);
  }
}
.secuencia__marco {
  position: relative;
  aspect-ratio: 5 / 8;
}
/* El ícono son dos cápsulas concéntricas, así que el marco se construye igual.
   El aro cuelga del MARCO, no del contenedor: colgado del contenedor tomaba
   todo su alto y dibujaba una elipse enorme cruzando la página.
   Y el recorte va en la <img>, no en el marco: con overflow:hidden aquí, el
   aro de afuera quedaba cortado. */
.secuencia__marco::after {
  content: "";
  position: absolute; inset: -0.75rem;
  border: 1px solid currentColor;
  border-radius: var(--capsula);
  opacity: 0.3;
  pointer-events: none;
}
.secuencia__marco img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--capsula);
  opacity: 0;
  transition: opacity 0.9s var(--ease), scale 1.6s var(--ease);
  scale: 1.06;
}
.secuencia__marco img[data-activa="si"] { opacity: 1; scale: 1; }

.pieza {
  min-height: 68svh;
  display: grid; align-content: center;
  padding-block: clamp(2rem, 6vw, 4rem);
}
.pieza__nombre { max-width: 22ch; }
.pieza__apoyo { margin-top: 0.7rem; max-width: 42ch; }
/* en móvil no hay columna fija: cada pieza lleva su foto encima */
.pieza__foto { margin-bottom: 1.5rem; }
.pieza__foto img { width: 100%; aspect-ratio: 5 / 8; object-fit: cover; border-radius: var(--capsula); }
@media (min-width: 55rem) { .pieza__foto { display: none; } }
@media (max-width: 54.99rem) { .secuencia__nicho { display: none; } }

/* --------------------------------------------------------------- visita -- */

.visita { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 55rem) {
  /* la secuencia de arriba tiene su foto a la izquierda; aquí va a la derecha
     para que el ojo cruce y la página no se lea como una sola columna */
  .visita { grid-template-columns: 1fr 1.05fr; }
  .visita__foto { order: 2; }
}
.visita__foto { position: relative; }
.visita__foto img {
  width: 100%; aspect-ratio: 5 / 8; object-fit: cover; object-position: center 58%;
  border-radius: var(--capsula);
}
.visita__foto::after {
  content: "";
  position: absolute; inset: -0.7rem;
  border: 1px solid currentColor;
  border-radius: var(--capsula);
  opacity: 0.28;
  pointer-events: none;
}
.detalles { list-style: none; margin: clamp(1.75rem,4vw,2.5rem) 0 0; padding: 0; }
.detalles li { padding-block: 0.9rem; border-top: 1px solid rgba(35,31,32,0.18); }
.detalles li:last-child { border-bottom: 1px solid rgba(35,31,32,0.18); }
.detalles strong { font-weight: 600; }
.detalles span { opacity: 0.74; }

/* --------------------------------------------------------------- agenda -- */

/* min-width:0 no es opcional: un ítem de grid vale por defecto `auto`, así que
   el carrusel de días (que ya scrollea solo) inflaba la columna y desbordaba
   la página en pantallas angostas. */
.agenda { display: grid; gap: clamp(2rem,5vw,4rem); align-items: start; }
.agenda > * { min-width: 0; }
.secuencia > * { min-width: 0; }
.visita > * { min-width: 0; }
@media (min-width: 62rem) { .agenda { grid-template-columns: 1fr 1fr; } }

/* la tarjeta también va redondeada: en un sitio donde todo lo demás es
   cápsula, un rectángulo de esquina viva se ve pegado con alfileres */
.reserva {
  background: var(--casi-blanco);
  padding: clamp(1.4rem, 3.5vw, 2.25rem);
  border-radius: clamp(1.5rem, 3vw, 2.25rem);
}
.reserva__cab {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid rgba(35,31,32,0.16); margin-bottom: 1.5rem;
}
.reserva__cab h3 { font-family: var(--display); font-size: 1.35rem; }
.campo { margin-bottom: 1.5rem; }
.campo > .dato { margin-bottom: 0.7rem; }

.dias { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.3rem; min-width: 0; }
.dia {
  flex: none; width: 4rem; padding: 0.8rem 0.3rem;
  border: 1px solid rgba(35,31,32,0.16); border-radius: 999px;
  background: transparent; font-family: var(--sans); color: var(--negro-marca);
  cursor: pointer; text-align: center; line-height: 1.3;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.dia small { display: block; font-size: 0.6875rem; opacity: 0.62; }
.dia strong { display: block; font-size: 1.05rem; font-weight: 500; }
.dia[aria-pressed="true"] { background: var(--negro-marca); border-color: var(--negro-marca); color: var(--hueso); }
.dia[aria-pressed="true"] small { opacity: 0.78; }
.dia:disabled { opacity: 0.32; cursor: not-allowed; }

.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem,1fr)); gap: 0.4rem; }
.hora {
  padding: 0.7rem 0.4rem; border: 1px solid rgba(35,31,32,0.16); border-radius: 999px;
  background: transparent; font-family: var(--sans); font-size: 0.9375rem;
  color: var(--negro-marca); cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.hora[aria-pressed="true"] { background: var(--negro-marca); border-color: var(--negro-marca); color: var(--hueso); }
.hora:disabled { opacity: 0.32; cursor: not-allowed; }

.reserva .boton { width: 100%; }
.reserva__aviso {
  margin-top: 0.9rem; padding: 0.8rem 1rem;
  background: var(--hueso); border-radius: 999px;
  font-size: 0.875rem; text-align: center;
}
.reserva__aviso[hidden] { display: none; }

/* ------------------------------------------------------------ preguntas -- */

.faqs { border-top: 1px solid rgba(35,31,32,0.18); margin-top: clamp(2rem,5vw,3rem); }
.faq { border-bottom: 1px solid rgba(35,31,32,0.18); }
.faq__boton {
  width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; background: transparent; border: 0; text-align: left; cursor: pointer;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.05rem, 0.98rem + 0.45vw, 1.35rem); color: inherit;
}
.faq__signo { flex: none; width: 0.85rem; height: 0.85rem; position: relative; opacity: 0.6; }
.faq__signo::before, .faq__signo::after {
  content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px;
  background: currentColor; transition: transform 0.4s var(--ease);
}
.faq__signo::after { transform: rotate(90deg); }
.faq__boton[aria-expanded="true"] .faq__signo::after { transform: rotate(0deg); }
.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); }
.faq__panel[data-abierto="si"] { grid-template-rows: 1fr; }
/* el recorte vive en el wrapper, no en el <p>: si se agrega un hermano se
   saldría del clip y quedaría visible con el acordeón cerrado */
.faq__panel > div { overflow: hidden; min-height: 0; }
.faq__panel p { margin: 0 0 1.35rem; max-width: 58ch; opacity: 0.76; }

/* ================================================================ PIE ==== */

.pie { background: var(--negro); color: var(--hueso); padding: clamp(3.5rem,8vw,5.5rem) var(--aire) 1.75rem; }
.pie__caja { max-width: 66rem; margin-inline: auto; }
.pie__grid { display: grid; gap: 2.25rem; }
@media (min-width: 48rem) { .pie__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.pie__marca { width: min(19rem, 70%); margin-bottom: 1.15rem; }
.pie h4 { font-size: 0.875rem; font-weight: 600; margin: 0 0 0.8rem; opacity: 0.58; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 0.45rem; font-size: 0.9375rem; opacity: 0.84; }
.pie a { text-decoration: none; }
.pie a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pie__base {
  margin-top: clamp(2.5rem,6vw,4rem); padding-top: 1.35rem;
  border-top: 1px solid rgba(227,226,222,0.18);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; justify-content: space-between;
  font-size: 0.875rem; opacity: 0.66;
}

/* barra fija de CTA en móvil */
.cta-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 38;
  padding: 0.7rem var(--aire) calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(18,18,18,0.96);
  border-top: 1px solid rgba(227,226,222,0.18);
  transform: translateY(115%); transition: transform 0.5s var(--ease);
}
.cta-movil[data-visible="si"] { transform: translateY(0); }
.cta-movil .boton { width: 100%; background: var(--hueso); border-color: var(--hueso); color: var(--negro-marca); }
@media (min-width: 60rem) { .cta-movil { display: none; } }

/* ============================================================ REVEALS ==== */

/* solo opacidad: el fade-up de 30px en absolutamente todo es el otro tic que
   delata una plantilla */
.rv {
  opacity: 0;
  translate: 0 2.2rem;
  rotate: 0.4deg;
  transition: opacity var(--lento) var(--ease),
              translate var(--lento) var(--ease),
              rotate var(--lento) var(--ease);
}
.rv.visible { opacity: 1; translate: none; rotate: none; }
/* el desfase hace que los hermanos caigan uno detrás de otro, como cuelgan
   los vestidos en el rack, en vez de aparecer todos de golpe */
.rv:nth-child(2) { transition-delay: 0.09s; }
.rv:nth-child(3) { transition-delay: 0.18s; }
.rv:nth-child(4) { transition-delay: 0.27s; }

/* deriva lenta: las fotos van más despacio que el texto que las acompaña */
.deriva { will-change: transform; translate: 0 calc(var(--f, 0) * -2.6rem); }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; translate: none; rotate: none; transition: none; }
  .deriva { translate: none; }
}