/* ══════════════════════════════════════════════════════════════
   Sandra Castro, alta costura
   Base: fuentes, paleta, escala tipográfica, navbar, pie.
   ══════════════════════════════════════════════════════════════ */

/* ── el wordmark ── */
@font-face{
  font-family:"Eyesome Script";
  src:url("fuentes/eyesome-script.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ── sans geométrica: navegación, precios, rótulos, filtros ── */
@font-face{
  font-family:"Prata";
  src:url("fuentes/prata.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Questrial";
  src:url("fuentes/questrial.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  /* paleta — 70-80 % blanco/marfil, 15-20 % grafito, ≤5 % dorado */
  --blanco:#FBFAF8;
  --marfil:#F0EEE9;
  --grafito:#3A3A3C;
  --tinta:#1A1A1B;
  --dorado:#A87C2E;
  /* derivados */
  --tenue:#8A857E;
  --linea:#E4E0D9;
  --tinta-linea:#2C2C30;
  --tinta-texto:#CFC9C1;
  --tinta-tenue:#77716A;

  --script:"Eyesome Script",cursive;
  --serif:"Prata",Georgia,serif;
  --sans:"Questrial",system-ui,sans-serif;

  --margen:40px;
  --nav:74px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--blanco);
  color:var(--grafito);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}

.medida{max-width:1280px;margin:0 auto;padding:0 var(--margen)}

/* ── escala tipográfica ──────────────────────────────────────── */

/* rótulo: siempre mayúscula, tracking amplio */
.rotulo{
  font-size:10.5px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--tenue);
  font-weight:400;
}
.titular{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.16;
  letter-spacing:-.005em;
  margin:0;
}
.bajada{
  color:var(--tenue);
  font-size:15.5px;
  margin:20px 0 0;
  max-width:42ch;
}

/* enlace de acción: mayúscula espaciada con subrayado dorado */
.accion{
  display:inline-block;
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding-bottom:5px;
  border-bottom:1px solid var(--dorado);
  transition:opacity .3s;
}
.accion:hover{opacity:.6}
/* variante discreta: la línea se enciende al pasar */
.accion-tenue{border-bottom-color:var(--linea)}
.accion-tenue:hover{border-bottom-color:var(--dorado);opacity:1}

/* ── wordmark ─────────────────────────────────────────────────
   Proporciones del proyecto de Canva, sobre el PNG del lockup:
   «Sandra Castro» cuerpo 5.7 con interletrado 0; ALTA COSTURA
   cuerpo 1.7 (= .298 del anterior) con interletrado 800 (= .8em).
   El hueco entre las dos líneas mide 50 px sobre un script de
   115 px en el PNG, o sea .435 em del nombre.
   Todo cuelga de .marca: cambiar su font-size escala el conjunto
   sin romper ninguna de las tres proporciones.
   ───────────────────────────────────────────────────────────── */
.marca{display:block;width:max-content;max-width:100%;font-size:27px;line-height:1;padding-top:.24em}
/* Eyesome desborda su caja por arriba: los remates de la S y la C suben
   .24em por encima del tope del bloque. Sin ese padding el wordmark se
   pega al borde superior y desalinea con el resto de la fila. */
.marca-nombre{
  display:block;
  font-family:var(--script);
  font-size:1em;
  line-height:1;
  letter-spacing:0;
}
.marca-rotulo{
  display:block;
  font-size:.298em;
  line-height:1;
  letter-spacing:.8em;
  text-transform:uppercase;
  text-align:center;
  padding-left:.8em; /* compensa el espacio que el tracking deja tras la última letra */
  margin-top:1.81em; /* deja el hueco de .435em del nombre que marca el PNG */
}

/* ── navegación ──────────────────────────────────────────────── */
.nav{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(251,250,248,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
.nav-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--nav);
  gap:32px;
}
.nav .marca{color:var(--grafito)}
/* accesos rápidos: colección y cita, sin tener que bajar */
.nav-acciones{display:flex;align-items:center;gap:28px}
.nav-cita{
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  padding:10px 0;border-bottom:1px solid transparent;transition:border-color .3s;
}
.nav-cita:hover{border-bottom-color:var(--dorado)}
.nav-link{
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  padding:11px 18px;background:var(--grafito);color:var(--blanco);
  transition:background .3s;
}
.nav-link:hover{background:var(--tinta)}
.nav-corto{display:none}
/* al saltar a una sección, la barra fija no tapa su comienzo */
section[id]{scroll-margin-top:var(--nav)}
.nav .marca{flex-shrink:0;white-space:nowrap}
@media (max-width:640px){
  .nav .marca{font-size:22px}
  .nav-in{gap:12px}
  .nav-acciones{gap:12px}
  .nav-link,.nav-cita,.menu-btn{font-size:9px;letter-spacing:.12em}
  .nav-link{padding:9px 12px}
  .nav-largo{display:none}
  .nav-corto{display:inline}
}
.menu-btn{
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding:10px 0;
  position:relative;
  z-index:2;
  min-width:5em;
  height:36px;
  text-align:right;
}
.menu-x{font-size:26px;line-height:1;letter-spacing:0;font-weight:300;display:inline-block;transform:translateY(-3px)}

/* panel de menú a pantalla completa */
.menu{
  position:fixed;
  inset:var(--nav) 0 0 0;
  z-index:55;
  background:var(--blanco);
  padding:56px var(--margen);
  display:flex;
  flex-direction:column;
  gap:4px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:opacity .35s ease,transform .35s ease,visibility .35s;
}
.menu.abierto{opacity:1;visibility:visible;transform:none}
.menu > a{
  font-family:var(--serif);
  font-size:clamp(26px,4vw,38px);
  line-height:1.5;
  width:max-content;
  max-width:100%;
  border-bottom:1px solid transparent;
  transition:border-color .3s;
}
.menu > a:hover{border-color:var(--dorado)}
.menu-pie{
  margin-top:auto;
  padding-top:40px;
  display:flex;
  flex-wrap:wrap;
  gap:12px 34px;
}
body.menu-abierto{overflow:hidden}

/* ── pie ─────────────────────────────────────────────────────── */
.pie{
  background:var(--tinta);
  color:var(--tinta-texto);
  padding:76px 0 40px;
}
.pie-top{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr 1.2fr;
  gap:40px;
  padding-bottom:56px;
  border-bottom:1px solid var(--tinta-linea);
}
.pie .marca{color:var(--blanco)}
.pie .marca{font-size:34px}
.pie .marca-rotulo{color:var(--tinta-tenue)}
.pie h4{
  font-size:9.5px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--blanco);
  font-weight:400;
  margin:0 0 16px;
}
.pie ul{list-style:none;margin:0;padding:0;font-size:13.5px;line-height:2.05}
.pie a{transition:color .3s}
.pie a:hover{color:var(--blanco)}
.pie-bottom{padding-top:26px}
.pie-bottom small{font-size:10.5px;letter-spacing:.14em;color:#6E6862}

/* ── aparición ───────────────────────────────────────────────── */
.rev{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1);
}
.rev.on{opacity:1;transform:none}

/* ══════════════════════════════════════════════════════════════
   Secciones — se reconstruyen por bloques. Lo de abajo es el
   esqueleto anterior, todavía sin pasar por la escala nueva.
   ══════════════════════════════════════════════════════════════ */

/* ── portada ──────────────────────────────────────────────────
   Tres verticales con margen (no a sangre), rotando de tres en
   tres. Los grupos van apilados y se cruzan por opacidad.
   ───────────────────────────────────────────────────────────── */
.portada{padding-top:30px}
.portada-marco{
  position:relative;
  overflow:hidden;
  height:min(74vh,760px);
  background:var(--marfil);
}
.portada-grupo{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  opacity:0;
  transition:opacity 1.2s ease;
}
.portada-grupo.on{opacity:1}
.portada-grupo img{width:100%;height:100%;object-fit:cover}

/* velo para que el wordmark blanco se sostenga sobre fondos claros */
.portada-marco::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,
    transparent 18%,
    rgba(26,26,27,.30) 40%,
    rgba(26,26,27,.32) 58%,
    transparent 82%);
}
.marca.portada-marca{
  position:absolute;
  left:0;right:0;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:auto;
  margin:0;
  padding-top:0;
  text-align:center;
  color:#fff;
  font-size:clamp(42px,11.2vw,150px);
  text-shadow:0 1px 26px rgba(26,26,27,.42);
  pointer-events:none;
}

.declara{padding-top:104px;padding-bottom:96px}
.declara .rotulo{display:block;margin-bottom:26px}
.declara h1{font-size:clamp(34px,4.6vw,62px);max-width:15ch}
.declara p{margin:30px 0 0;max-width:38ch;color:var(--tenue);font-size:15.5px}

.seccion{padding:96px 0}
.seccion.marfil{background:var(--marfil)}
.encabeza{margin-bottom:56px}
.encabeza .rotulo{display:block;margin-bottom:20px}
.encabeza h2{font-size:clamp(27px,3.4vw,44px);max-width:16ch}
.encabeza p{margin:20px 0 0;max-width:42ch;color:var(--tenue);font-size:15.5px}
/* titular corto que va de corrido, a lo ancho */
.encabeza-ancha h2{max-width:none}
.pie-mapa{margin-top:10px}
.pie-mapa .accion{color:var(--blanco)}
.atelier .atelier-dir{max-width:none}

.destacada{display:grid;grid-template-columns:1.55fr 1fr;gap:56px;align-items:end;margin-bottom:96px}
.destacada img{width:100%;aspect-ratio:3/4;object-fit:cover}
.destacada-txt{padding-bottom:14px}
.destacada-txt h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.25;margin:12px 0 16px}
.destacada-txt p{color:var(--tenue);font-size:15px;margin:0}

.coleccion{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 34px}
.pieza-campo{width:100%;aspect-ratio:3/4;position:relative}
.pieza-campo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(140deg,rgba(255,255,255,.10),rgba(0,0,0,.14))}
.pieza img{width:100%;aspect-ratio:3/4;object-fit:cover}
.pieza-info{padding-top:16px}
.pieza-ref{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--tenue);margin-bottom:10px}
.pieza-color{font-family:var(--serif);font-weight:400;font-size:19px;margin:5px 0 12px}
.pieza-estado{font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dorado);margin:-6px 0 10px}
.pieza-precio{display:flex;flex-wrap:wrap;gap:4px 22px;font-size:12.5px;letter-spacing:.05em}
.pieza-precio span{white-space:nowrap}
.pieza-precio span{color:var(--tenue)}
.pieza-precio b{font-weight:400;color:var(--grafito);margin-left:7px}
.nota-col{margin-top:60px;padding-top:26px;border-top:1px solid var(--linea);
  font-size:13px;color:var(--tenue);letter-spacing:.02em}


/* ── secuencia 01-04 ──────────────────────────────────────────
   Una pista alta con un panel pegado dentro: el scroll de la
   página sigue, pero la vista no avanza hasta que la secuencia
   termina. Es lo mismo que pide el CLAUDE.md sin secuestrar la
   rueda del ratón, que rompe el teclado y el lector de pantalla.
   ───────────────────────────────────────────────────────────── */
.secuencia-pista{position:relative}
.secuencia-fija{
  position:sticky;
  top:var(--nav);
  height:calc(100svh - var(--nav));
  display:flex;
  align-items:center;
  overflow:hidden;
}
.secuencia-fija > .medida{width:100%;height:100%;position:relative}
.paso{
  position:absolute;
  left:var(--margen);
  right:var(--margen);
  top:50%;
  transform:translateY(-50%);
  opacity:0;
  visibility:hidden;
  transition:opacity .55s ease,visibility .55s;
}
.paso.on{opacity:1;visibility:visible}
.paso-num{
  display:block;
  font-size:10.5px;
  letter-spacing:.26em;
  color:var(--dorado);
  margin-bottom:28px;
}
.paso-num b{font-weight:400}
.paso-num span{color:var(--tenue)}
.paso h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(34px,6vw,76px);
  line-height:1.08;
  letter-spacing:-.01em;
  margin:0;
  max-width:14ch;
}
.paso p{
  margin:26px 0 0;
  color:var(--tenue);
  font-size:15.5px;
  max-width:38ch;
}
.paso .accion{margin-top:36px}

/* barra de avance, anclada abajo del panel */
.secuencia-barra{
  position:absolute;
  left:var(--margen);
  bottom:14%;
  width:min(226px,42vw);
  height:1px;
  background:var(--linea);
}
.secuencia-barra span{
  display:block;
  height:100%;
  width:0;
  background:var(--dorado);
  transition:width .25s linear;
}

@media(prefers-reduced-motion:reduce){
  .paso{transition:none}
  .secuencia-barra span{transition:none}
}


/* ── cinta de selección ───────────────────────────────────────
   Arranca alineada con la medida y se sale por la derecha.
   ───────────────────────────────────────────────────────────── */
.cinta{
  display:flex;
  gap:24px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding:0 var(--margen) 10px
          max(var(--margen), calc((100vw - 1280px)/2 + var(--margen)));
  /* sin esto el snap se traga el margen izquierdo nada más cargar y la
     cinta arranca pegada al borde en vez de alineada con el titular */
  scroll-padding-left:max(var(--margen), calc((100vw - 1280px)/2 + var(--margen)));
  scrollbar-width:none;
}
.cinta::-webkit-scrollbar{display:none}
.cinta > *{
  flex:0 0 clamp(208px,24vw,286px);
  width:clamp(208px,24vw,286px);
  scroll-snap-align:start;
}

/* bloque marfil intercalado en la cinta */
.cinta-nota{
  background:var(--marfil);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:38px 30px;
}
.cinta-nota h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(19px,1.8vw,25px);
  line-height:1.3;
  margin:0 0 24px;
  text-wrap:balance;
}
.cinta-guia{
  margin:30px auto 0;
  max-width:1280px;
  padding:0 var(--margen);
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--tenue);
}

/* ── catálogo: barra lateral fija + rejilla ───────────────────
   En escritorio los filtros son una columna izquierda pegajosa.
   En móvil se colapsan en los dos selectores nativos.
   ───────────────────────────────────────────────────────────── */
/* Los filtros van arriba, en una barra que se pega bajo la navegación:
   así se ven todos de entrada, en el computador igual que en el
   teléfono, y la rejilla usa el ancho completo. */
.catalogo{display:block}
.filtros{
  position:sticky;top:var(--nav);z-index:30;
  padding:16px var(--margen);
  margin:0 calc(var(--margen) * -1) 34px;
  background:rgba(251,250,248,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linea);
}
.filtros-lista{display:none}
.filtros-caja{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 28px}
.filtros-movil{display:flex;gap:16px;flex:1 1 640px;max-width:880px}
.filtros-movil label{display:block;flex:1 1 0;min-width:0}
.filtros-movil .rotulo{display:block;margin-bottom:7px}
.filtros-movil select{
  font:inherit;font-size:14px;color:var(--grafito);
  background:var(--blanco);border:1px solid var(--linea);
  padding:10px 11px;border-radius:0;width:100%;min-width:0;cursor:pointer;
}
.filtros-caja .filtros-limpiar{margin:0 0 10px}
@media(min-width:1100px){.catalogo .coleccion{grid-template-columns:repeat(4,minmax(0,1fr));gap:52px 28px}}
.filtros-lista h3{margin:0 0 14px;display:block}
.filtros-lista h3 + ul{margin:0 0 34px}
.filtros-lista ul{list-style:none;padding:0}
.filtros-lista button{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
  font-size:13.5px;
  line-height:1.95;
  color:var(--tenue);
  transition:color .25s;
}
.filtros-lista button:hover:not(:disabled){color:var(--grafito)}
.filtros-lista button:disabled{opacity:.35;cursor:default}
.filtros-lista button[aria-pressed="true"]{color:var(--grafito)}
.filtros-lista button[aria-pressed="true"] .filtro-nombre{
  border-bottom:1px solid var(--dorado);
}
.filtro-nombre{flex:0 1 auto}
.filtro-n{
  margin-left:auto;
  font-size:11px;
  color:var(--tenue);
  font-variant-numeric:tabular-nums;
}
/* círculo del color, con un filo para que el blanco y el plateado no
   se pierdan contra el fondo */
.muestra{
  flex:none;
  width:12px;height:12px;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(58,58,60,.16) inset;
}
.filtros-limpiar{margin-top:4px}
.filtros-cuenta{
  margin:26px 0 0;
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--tenue);
}
.sin-resultado{
  margin:0;
  padding:60px 0;
  color:var(--tenue);
  font-size:15.5px;
}

/* ── tarjeta de pieza con degradado al pie ────────────────── */
.ficha-foto{display:block;position:relative;overflow:hidden}
.ficha-foto img,.ficha-foto .pieza-campo{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.ficha-foto:hover img{transform:scale(1.03)}
/* capa del pase de fotos: entra con un fundido sobre la foto actual */
.ficha-foto .pase-capa{
  position:absolute;top:0;left:0;
  opacity:0;pointer-events:none;
  transition:opacity .7s ease,transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.ficha-foto .pase-capa.on{opacity:1}


/* ── ficha de pieza ───────────────────────────────────────────── */
.volver{display:inline-block;margin-bottom:40px}

.ficha{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:start}

/* galería */
.galeria{position:relative}
.galeria-marco{
  position:relative;
  overflow:hidden;
  background:var(--marfil);
  aspect-ratio:4/5;
}
.galeria-marco img{width:100%;height:100%;object-fit:cover;display:block}
.galeria-flecha,.galeria-lupa{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;height:44px;
  border-radius:50%;
  background:rgba(251,250,248,.88);
  backdrop-filter:blur(6px);
  display:grid;place-items:center;
  font-size:15px;
  color:var(--grafito);
  transition:background .25s;
}
.galeria-flecha:hover,.galeria-lupa:hover{background:var(--blanco)}
.galeria-antes{left:16px}
.galeria-despues{right:16px}
.galeria-lupa{top:auto;bottom:16px;right:16px;transform:none;font-size:14px}

/* lente de aumento: sigue al cursor sobre la foto.
   pointer-events:none es la clave — así nunca se interpone entre el
   cursor y el botón de la lupa, y no hace falta esconderla al
   acercarse a él. */
.lente{
  position:absolute;
  width:230px;height:230px;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  transition:opacity .22s ease;
  background-repeat:no-repeat;
  box-shadow:0 2px 26px rgba(26,26,27,.26), 0 0 0 1px rgba(251,250,248,.85) inset;
  z-index:4;
}
.lente.on{opacity:1}
@media(hover:none){.lente{display:none}}

.miniaturas{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.miniaturas button{
  width:84px;
  aspect-ratio:4/5;
  overflow:hidden;
  opacity:.5;
  transition:opacity .25s;
}
.miniaturas button[aria-current="true"]{opacity:1}
.miniaturas img{width:100%;height:100%;object-fit:cover;display:block}

/* datos */
.ficha-datos .rotulo{display:block;margin-bottom:16px}
.ficha-datos h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(30px,3.6vw,46px);
  line-height:1.12;
  margin:0;
}
.ficha-desc{color:var(--tenue);font-size:15.5px;margin:20px 0 0;max-width:44ch}
.ficha-estado{
  display:inline-block;margin-top:18px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dorado);
}
.ficha-precios{
  display:flex;gap:56px;flex-wrap:wrap;
  margin:36px 0 0;padding:30px 0;
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
}
.ficha-precios .rotulo{display:block;margin-bottom:10px}
.ficha-precios b{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(24px,2.6vw,34px);
}

/* página de condiciones */
.cond-pagina{max-width:calc(680px + var(--margen) * 2)}
.cond-pagina .encabeza h1{font-size:clamp(27px,3.4vw,44px)}
.cond-bloque{border-top:1px solid var(--linea);padding:46px 0 30px}
.cond-bloque h2{
  font-family:var(--serif);font-weight:400;
  font-size:24px;letter-spacing:-.005em;margin:0 0 20px;
}
.cond-bloque p{margin:0 0 15px;font-size:15px;line-height:1.75;color:var(--grafito)}
.cond-bloque p b{font-weight:400;color:var(--tinta)}
.cond-cierre{border-top:1px solid var(--linea);padding-top:46px}
.cond-cierre p{margin:0 0 18px;color:var(--tenue);font-size:15px}

/* condiciones */
.condiciones{background:var(--marfil);padding:34px 32px;margin-top:36px}
.condiciones .rotulo{display:block;margin-bottom:22px}
.condiciones p{margin:0 0 16px;font-size:14.5px;line-height:1.72;color:var(--grafito)}
.condiciones p b{font-weight:400;color:var(--tinta)}
.condiciones a{border-bottom:1px solid var(--dorado);padding-bottom:1px}
.condiciones .accion{margin-top:8px}

.ficha-acciones{display:flex;gap:34px;flex-wrap:wrap;margin-top:40px}

/* botones de la ficha y de la cita */
.boton{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  border:1px solid transparent;
  transition:background .3s,color .3s,border-color .3s;
}
.boton-ws{background:#4E7560;color:#fff}
.boton-ws:hover{background:#41634F}
.boton-linea{border-color:var(--grafito);color:var(--grafito)}
.boton-linea:hover{background:var(--grafito);color:var(--blanco)}
.boton-lleno{background:var(--grafito);color:var(--blanco)}
.boton-lleno:hover{background:var(--tinta)}
.ficha-cta{display:flex;flex-direction:column;gap:12px;margin-top:28px;max-width:420px}
.ficha-nota{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--tenue)}

/* ── lightbox ─────────────────────────────────────────────────── */
.lupa{
  position:fixed;inset:0;z-index:90;
  background:rgba(26,26,27,.94);
  display:grid;
  place-items:center;
  opacity:0;visibility:hidden;
  transition:opacity .3s,visibility .3s;
}
.lupa.abierta{opacity:1;visibility:visible}
.lupa-marco{position:relative;display:grid;place-items:center}
.lupa img{max-width:min(88vw,760px);max-height:78svh;object-fit:contain;display:block}
.lupa-cerrar{
  position:absolute;top:22px;right:26px;
  font-size:30px;line-height:1;color:#fff;
}
.lupa-flecha{
  position:absolute;top:50%;transform:translateY(-50%);
  font-size:22px;color:#fff;padding:18px;opacity:.75;transition:opacity .25s;
}
.lupa-flecha:hover{opacity:1}
.lupa-antes{left:10px}
.lupa-despues{right:10px}
.lupa-cuenta{
  position:absolute;bottom:34px;left:0;right:0;
  text-align:center;color:#fff;
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
}
body.lupa-abierta{overflow:hidden}


/* ── mosaico de momentos ──────────────────────────────────────
   Escritorio: una foto alta a la izquierda y cuatro a la derecha
   en dos filas, con la división de columnas invertida entre ellas
   —ancha+angosta arriba, angosta+ancha abajo—. Esa alternancia es
   la que da el aire editorial.
   Móvil: una dominante a todo el ancho y el resto de dos en dos.
   ───────────────────────────────────────────────────────────── */
.mosaico{
  display:grid;
  /* una columna para la foto alta y doce unidades para la derecha: así
     las dos filas pueden repartirse distinto. Con columnas normales el
     ancho es global a toda la rejilla y la asimetría no se puede dar. */
  grid-template-columns:8.6fr repeat(12,1fr);
  grid-template-rows:1.2fr 1fr;
  gap:20px;
  aspect-ratio:1476/806;
}
.mos{margin:0;position:relative;overflow:hidden;min-height:0}
.mos img{width:100%;height:100%;object-fit:cover;display:block}

.mos-alta     {grid-column:1;        grid-row:1 / span 2}
.mos-ancha    {grid-column:2 / 9;    grid-row:1}   /* ancha arriba */
.mos-angosta  {grid-column:9 / 14;   grid-row:1}
.mos-angosta-2{grid-column:2 / 7;    grid-row:2}   /* y angosta abajo */
.mos-ancha-2  {grid-column:7 / 14;   grid-row:2}

/* Encuadre vertical de cada foto. object-fit recorta por el centro y en
   estas tomas eso cortaba cabezas, así que cada una sube lo suyo. */
.mos-ancha     img{object-position:50% 14%}   /* carolina */
.mos-angosta   img{object-position:50% 0%}    /* azul rey: rostro completo */
.mos-angosta-2 img{object-position:50% 36%}   /* bronce: cabeza casi al borde, más vestido */
.mos-ancha-2   img{object-position:50% 0%}    /* sofía, entre las cortinas */

.mos figcaption{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:52px 20px 16px;
  display:flex;
  align-items:baseline;
  gap:18px;
  flex-wrap:wrap;
  color:#fff;
  background:linear-gradient(transparent,rgba(26,26,27,.58));
}
.mos-rotulo{
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.mos figcaption .accion{color:#fff;border-bottom-color:var(--dorado)}
.mosaico-pie{margin:34px 0 0}

.atelier{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.atelier img{width:100%;aspect-ratio:5/3;object-fit:cover}
.atelier h2{font-size:clamp(26px,3.2vw,40px);margin-bottom:24px}
.atelier p{color:var(--tenue);font-size:15.5px;max-width:40ch;margin:0 0 16px}

.cita{text-align:center;padding:110px 0}
/* instagram: las últimas publicaciones, en cuadros, con el estilo del sitio */
.instagram-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:34px}
.instagram-cab .rotulo{display:block;margin-bottom:14px}
.instagram-cab h2{font-size:clamp(26px,3.2vw,40px)}
.instagram-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.instagram-grid a{display:block;aspect-ratio:1;overflow:hidden;background:var(--marfil)}
.instagram-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.2,.7,.3,1),opacity .4s}
.instagram-grid a:hover img{transform:scale(1.04);opacity:.9}
@media(max-width:900px){.instagram-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}}
.cita h2{font-size:clamp(30px,4vw,52px);margin-bottom:26px}
.cita p{color:var(--tenue);font-size:15.5px;max-width:46ch;margin:0 auto 40px}
.cita-acciones{display:flex;gap:34px;justify-content:center;flex-wrap:wrap}
/* cita: texto a la izquierda, calendario de reservas a la derecha */
.cita-rejilla{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  grid-template-areas:"texto agenda" "pie agenda";grid-template-rows:auto 1fr;
  column-gap:48px;align-items:start;text-align:left;
}
.cita-texto{grid-area:texto}
.cita-pie{grid-area:pie}
.cita-agenda{grid-area:agenda}
.cita .cita-pie p{margin:0 0 18px;max-width:42ch}
.cita .cita-texto p{margin:0 0 22px;max-width:42ch;color:var(--grafito)}
.cita .rotulo{display:block;margin-bottom:20px}
.cita .titular{margin-bottom:24px}
.cita .cita-texto .cita-gancho{font-family:var(--serif);font-size:clamp(19px,2vw,24px);color:var(--grafito);margin:8px 0 34px}
.cita .cita-pie .cita-ayuda{color:var(--tenue);font-size:14.5px;margin:0 0 14px}
.cita-ws{max-width:340px}

.cita .cita-ayuda a{border-bottom:1px solid var(--dorado);padding-bottom:1px}
.cita .cita-nota{font-size:13px}
.cita-agenda{background:#fff;border:1px solid var(--linea)}
.cita-agenda iframe{display:block;width:100%;height:640px;border:0}
@media (max-width:900px){
  .cita-rejilla{grid-template-columns:1fr;grid-template-areas:"texto" "agenda" "pie";row-gap:30px}
  .cita .cita-texto .cita-gancho{margin-bottom:0}
  /* en el teléfono, la alternativa por WhatsApp va centrada bajo el calendario */
  .cita-pie{text-align:center;display:flex;flex-direction:column;align-items:center}
  .cita .cita-pie .cita-ayuda{max-width:none}
  .cita-pie .cita-ws{width:100%}
  .cita-agenda iframe{height:720px}
}

/* ── adaptación ──────────────────────────────────────────────── */
@media(max-width:1000px){
  .destacada{grid-template-columns:1fr;gap:30px;align-items:start}
  .atelier{grid-template-columns:1fr;gap:34px}
  .coleccion{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 26px}
  .pie-top{grid-template-columns:1fr 1fr;gap:40px 34px}
}
@media(max-width:720px){
  :root{--margen:20px;--nav:62px}
  .marca{font-size:22px}
  /* pie del teléfono: una sola columna centrada; la navegación ya está
     en el menú */
  .pie-top{grid-template-columns:1fr;gap:34px;text-align:center;justify-items:center}
  .pie-nav{display:none}
  .pie .marca{font-size:36px;margin:0 auto 6px}
  .pie-bottom{text-align:center}
  .menu{padding:40px var(--margen)}
  .portada{padding-top:18px}
  .portada-marco{height:auto;aspect-ratio:.93}
  .cinta{gap:14px}
  .secuencia-fija{height:calc(100svh - var(--nav))}
  .catalogo{grid-template-columns:minmax(0,1fr);gap:0}
  /* en una tarjeta de 164 px alquiler y venta no caben en una línea y se
     montaban sobre la tarjeta vecina */
  .pieza-precio{flex-direction:column;gap:3px}
  .pieza-color{font-size:17px}
  /* en móvil la barra se pega bajo la navegación y no se va al bajar */
  .filtros{
    top:var(--nav);
    z-index:30;
    max-height:none;
    overflow:visible;
    padding:12px var(--margen) 12px;
    margin:0 calc(var(--margen) * -1) 22px;
    background:rgba(251,250,248,.96);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--linea);
  }
  .filtros-lista{display:none}
  .filtros-movil{display:flex;gap:10px;flex-wrap:nowrap;align-items:flex-end}
  .filtros-movil label{flex:1 1 0;min-width:0}
  .filtros-movil label{display:block}
  /* color a todo el ancho; los dos precios debajo, lado a lado */
  .filtros-movil{flex-wrap:wrap;row-gap:16px}
  .filtros-movil label:first-child{flex-basis:100%}
  .filtros-movil .rotulo{display:block;margin-bottom:9px}
  .filtros-movil select{
    font:inherit;font-size:14px;color:var(--grafito);
    background:var(--blanco);border:1px solid var(--linea);
    padding:10px 11px;border-radius:0;width:100%;min-width:0;
  }
  .filtros-movil .rotulo{margin-bottom:6px}
  .filtros-caja{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
  .filtros-movil{flex:1 1 100%}
  .filtros-limpiar{margin-top:4px;font-size:10px}
  .filtros-cuenta{margin:4px 0 0;margin-left:auto}
  .ficha{grid-template-columns:1fr;gap:38px}
  .volver{margin-bottom:28px}
  .galeria-flecha{width:38px;height:38px}
  .miniaturas button{width:66px}
  .ficha-precios{gap:34px;margin-top:28px;padding:24px 0}
  .condiciones{padding:28px 22px}
  .lupa-flecha{padding:12px;font-size:19px}
  .declara{padding-top:66px;padding-bottom:60px}
  .seccion{padding:66px 0}
  .encabeza{margin-bottom:38px}
  .destacada{margin-bottom:62px}
  .mosaico{
    grid-template-columns:1fr 1fr;
    grid-template-rows:none;
    aspect-ratio:auto;
    gap:12px;
  }
  .mos-alta{grid-column:1 / span 2;grid-row:auto}
  .mos-alta img{aspect-ratio:4/3;height:auto}
  .mos-ancha,.mos-angosta,.mos-angosta-2,.mos-ancha-2{grid-column:auto;grid-row:auto}
  /* Orden propio del móvil: novia a todo el ancho y las otras cuatro de
     dos en dos. No coincide con el orden del HTML, que es el de
     escritorio, pero así el marcado no se duplica. */
  .mos-alta     {order:1; grid-column:1 / span 2}
  .mos-ancha-2  {order:2}   /* sofía    */
  .mos-ancha    {order:3}   /* carolina */
  .mos-angosta-2{order:4}   /* bronce   */
  .mos-angosta  {order:5}   /* azul     */

  .mosaico .mos:not(.mos-alta) img{aspect-ratio:3/4;height:auto}
  /* la dominante pasa a apaisada en móvil y el recorte centrado le
     cortaba el pelo */
  .mos-alta img{aspect-ratio:4/3;height:auto;object-position:50% 24%}
  /* «Disponible en tienda» son veinte letras y la tarjeta mide 171 px:
     con el tracking de escritorio se parte en dos líneas */
  .mos figcaption .accion{font-size:9px;letter-spacing:.13em}
  .mos figcaption{padding:46px 14px 13px;gap:4px;flex-direction:column;align-items:flex-start}
  .cita{padding:70px 0}
  .pie{padding:60px 0 34px}
}

@media(prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  .menu{transition:none}
  html{scroll-behavior:auto}
}

/* ── página de momentos ──────────────────────────────────────────
   Filas justificadas: --r es ancho/alto de cada foto. Crecer en
   proporción a --r deja todas las fotos de una fila a la misma altura
   y la fila ocupa el ancho entero, sin recortar ninguna. */
.momentos-mosaico{display:flex;flex-direction:column;gap:18px}
.mom-fila{display:flex;gap:18px;align-items:flex-start}
.mom{margin:0;flex:var(--r) 1 0;min-width:0}
.mom.rev{transition-delay:var(--d,0ms)}
.mom-abrir{display:block;width:100%;cursor:zoom-in;background:var(--marfil);aspect-ratio:var(--r);overflow:hidden}
a.mom-abrir{cursor:pointer}
.mom-abrir img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.3,1),opacity .4s}
.mom-abrir:hover img{transform:scale(1.025)}
.mom figcaption{padding-top:12px;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.mom .mos-rotulo{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--grafito)}
.mom-linea{font-family:var(--serif);font-size:16px;color:var(--grafito)}
.mom .accion{margin-top:4px}
/* tarjeta de momento: pie sobre degradado */
.mom-tarjeta{position:relative;text-align:left}
.mom-pie{
  position:absolute;left:0;right:0;bottom:0;
  padding:70px 20px 18px;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  background:linear-gradient(180deg,transparent,rgba(26,26,27,.66));
  color:#fff;
}
.mom-pie .mos-rotulo{color:#fff}
.mom-pie .mom-linea{color:#fff}
.mom-pie .accion{color:#fff;margin-top:6px}
.galeria-momento{gap:18px}
.galeria-momento .mom-fila{gap:18px}
@media (max-width:640px){.momentos-mosaico{gap:10px}.mom-pie{padding:50px 12px 12px}.mom-fila{gap:10px}.galeria-momento,.galeria-momento .mom-fila{gap:10px}.mom-linea{font-size:14px}}