/* ==========================================================================
   Atelier Bears — estilos base (sección 1)
   Dirección B "Salón editorial". Fuente: traspaso v2, sección 4, y guía de estilo.
   ========================================================================== */

/* ---------- 1. Fuentes (alojadas en el sitio, licencia OFL 1.1) ----------
   Bodoni Moda es variable: el eje de tamaño óptico (opsz 6–96) se ajusta solo
   al tamaño de la letra gracias a font-optical-sizing: auto. */
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/bodoni-moda-opsz-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/bodoni-moda-opsz-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-300.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-400.woff2") format("woff2");
}

/* ---------- 2. Variables ---------- */
:root {
  /* Colores */
  --arena: #EFE6D8;         /* fondo de toda la página */
  --crema: #F8F2E8;         /* El atelier, pie, aviso de cookies */
  --espresso: #231B14;      /* texto, botón principal, bordes */
  --oro: #B08D57;           /* líneas, números grandes, barrido, WhatsApp. Nunca texto pequeño */
  --oro-texto: #75592A;     /* etiquetas pequeñas, ícono de giro, foco (contraste 5:1) */
  --oro-numero: #9E7F4E;    /* números grandes en cursiva: oro un poco más oscuro para llegar a 3:1 */
  --texto-2: #5E4F3E;       /* texto secundario */
  --arena-oscura: #E2D3BA;  /* palabra gigante "Única" */
  --linea: #CDBB9C;         /* divisores finos */
  --polvo: #C9A86A;         /* partículas de polvo dorado */

  /* Familias */
  --f-titulo: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --f-texto: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala de tamaños: de 390 px (celular) a 1440 px (escritorio), fluida en medio */
  --fs-portada: clamp(31px, 10.57px + 5.238vw, 86px);
  --fs-seccion: clamp(44px, 29.14px + 3.81vw, 84px);
  --fs-pieza: clamp(44px, 24.69px + 4.952vw, 96px);
  --fs-numero: clamp(60px, 37.71px + 5.714vw, 120px);
  --fs-escribenos: clamp(72px, 48.23px + 6.095vw, 136px);
  --fs-unica: clamp(116px, 43.94px + 18.476vw, 310px);
  --fs-cita: clamp(42px, 27.89px + 3.619vw, 80px);
  --fs-paso-num: clamp(48px, 39.09px + 2.286vw, 72px);
  --fs-paso: clamp(25px, 22.4px + 0.667vw, 32px);
  --fs-cinta: clamp(24px, 20.29px + 0.952vw, 34px);
  --fs-precio: clamp(28px, 23.54px + 1.143vw, 40px);
  --fs-texto-g: clamp(16px, 14.89px + 0.286vw, 19px);
  --fs-texto: clamp(15px, 13.89px + 0.286vw, 18px);
  --fs-boton: clamp(12px, 11.63px + 0.095vw, 13px);
  --fs-etiqueta: clamp(11px, 10.63px + 0.095vw, 12px);

  /* Espacios: base de 8 px */
  --e-1: 8px;
  --e-2: 16px;
  --e-3: 24px;
  --e-4: 32px;
  --e-5: 40px;
  --e-8: 64px;
  --e-15: 120px;
  --sec-y: clamp(64px, 37.71px + 6.74vw, 140px);  /* separación de secciones */
  --margen: 20px;                                  /* margen lateral del contenedor */
  --ancho: 1280px;
  --toque: 44px;                                   /* mínimo para tocar */

  /* Movimiento */
  --curva: cubic-bezier(.2, .7, .2, 1);
  --sube: 18px;      /* entrada de portada */
  --flota: -8px;     /* flotación */
  --polvo-sube: -70px;
  --deriva: -20px;   /* deriva de "Única" */
  --palabra-sube: 40px;
  --aparece: 40px;   /* aparición al bajar */
  --aparece-l: -50px;
  --cinta-dur: 60s;   /* la pista lleva la frase 4 veces: el doble de recorrido, misma velocidad que antes */
}

@media (min-width: 768px) {
  :root {
    --margen: 40px;
    --sube: 22px;
    --flota: -10px;
    --polvo-sube: -90px;
    --deriva: -36px;
    --palabra-sube: 60px;
    --aparece: 56px;
    --aparece-l: -70px;
    --cinta-dur: 84s;
  }
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--arena);
  color: var(--espresso);
  font-family: var(--f-texto);
  font-weight: 300;
  font-size: var(--fs-texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ol, ul, figure, blockquote { margin: 0; }
h1, h2, h3, h4 {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-optical-sizing: auto;
  text-wrap: balance;   /* reparte las líneas: nunca una palabra sola al final */
}
p, li { text-wrap: pretty; }   /* en párrafos: evita una palabra suelta en la última línea */

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: var(--espresso); }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

::selection { background: var(--oro); color: var(--espresso); }

/* Foco visible: anillo dorado. Se usa oro-texto porque el oro claro
   no llega al contraste 3:1 que pide WCAG sobre arena. */
:focus-visible {
  outline: 2px solid var(--oro-texto);
  outline-offset: 3px;
}

/* Solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 4. Contenedor y secciones ---------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.seccion {
  position: relative;
  padding-block: var(--sec-y);
}
.seccion--crema { background: var(--crema); }

.divisor {
  border: 0;
  border-top: 1px solid var(--linea);
  margin: 0;
}

/* ---------- 5. Tipografía ---------- */
.titular-portada, .titulo-seccion, .nombre-pieza, .titulo-contacto, .cita { text-wrap: balance; }
.titular-portada {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: var(--fs-portada);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.titulo-seccion {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: var(--fs-seccion);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.nombre-pieza {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: var(--fs-pieza);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.numero-pieza {
  font-family: var(--f-titulo);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-numero);
  line-height: 0.8;
  color: var(--oro-numero);
}
.titulo-contacto {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: var(--fs-escribenos);
  line-height: 0.9;
  letter-spacing: -0.05em;
}
.cita {
  font-family: var(--f-titulo);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-cita);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.precio {
  font-family: var(--f-titulo);
  font-size: var(--fs-precio);
  line-height: 1;
}
.texto { font-size: var(--fs-texto); line-height: 1.6; }
.texto-g { font-size: var(--fs-texto-g); line-height: 1.55; }
.texto-2 { color: var(--texto-2); }

.etiqueta {
  font-size: var(--fs-etiqueta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oro-texto);
}
.medidas {
  font-size: var(--fs-etiqueta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-2);
}

@media (min-width: 768px) {
  .titular-portada { line-height: 0.98; letter-spacing: -0.035em; }
  .titulo-seccion { letter-spacing: -0.035em; }
  .nombre-pieza { line-height: 0.9; letter-spacing: -0.045em; }
  .cita { line-height: 1; letter-spacing: -0.03em; }
  .medidas { letter-spacing: 0.2em; }
}

/* ---------- 6. Fotos flotantes (respaldo del modelo 3D) ----------
   Nunca en cajas ni sobre plataforma: multiply + máscara radial. */
.sb-float {
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 46% 50% at 50% 52%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 46% 50% at 50% 52%, #000 62%, transparent 100%);
}

/* Al pasar el cursor, la pieza sube 12 px y crece a 103 % */
.sb-lift { transition: transform .5s var(--curva); }

/* ---------- 7. Botones y enlaces ---------- */

/* Principal: espresso con barrido oro; el texto pasa a espresso y la flecha avanza 5 px */
.sb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 50px;
  padding: 0 22px;
  border: 0;
  border-radius: 0;
  background-color: var(--espresso);
  background-image: linear-gradient(var(--oro), var(--oro));
  background-size: 0% 100%;
  background-repeat: no-repeat;
  color: var(--arena);
  text-decoration: none;
  font-family: var(--f-texto);
  font-size: var(--fs-boton);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background-size .45s var(--curva), color .3s ease-out;
}
.sb-btn svg { flex: none; transition: transform .35s ease-out; }
.sb-btn path { stroke: currentColor; transition: stroke .3s ease-out; }
.sb-btn:active { background-size: 100% 100%; color: var(--espresso); }
.sb-btn--ancho { display: flex; width: 100%; }

@media (min-width: 768px) {
  .sb-btn { min-height: 56px; padding: 0 30px; letter-spacing: 0.18em; }
  .sb-btn--ancho { width: 300px; max-width: 100%; }
}

/* Contorno (aviso de cookies): Rechazar y Aceptar con el mismo peso visual */
.sb-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  min-height: var(--toque);
  padding: 0 16px;
  border: 1px solid var(--espresso);
  border-radius: 0;
  background-color: transparent;
  background-image: linear-gradient(var(--espresso), var(--espresso));
  background-size: 0% 100%;
  background-repeat: no-repeat;
  color: var(--espresso);
  font-family: var(--f-texto);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background-size .45s var(--curva), color .3s ease-out;
}
.sb-line:active { background-size: 100% 100%; color: var(--arena); }

/* Ícono de contacto: círculo con borde; se rellena de espresso, sube 5 px y gira -5° */
.sb-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--toque);
  height: var(--toque);
  border: 1px solid var(--espresso);
  border-radius: 50%;
  background-color: transparent;
  transition: background-color .35s ease-out, transform .35s var(--curva);
}
.sb-ico .s { stroke: var(--espresso); transition: stroke .3s ease-out; }
.sb-ico .f { fill: var(--espresso); transition: fill .3s ease-out; }
.sb-ico:active { background-color: var(--espresso); transform: translateY(-4px) rotate(-5deg); }
.sb-ico:active .s { stroke: var(--arena); }
.sb-ico:active .f { fill: var(--arena); }
.sb-ico--g { width: 88px; height: 88px; }
.sb-ico--g svg { width: 34px; height: 34px; }
.sb-ico--p { width: 48px; height: 48px; }
.sb-ico--p svg { width: 20px; height: 20px; }

@media (min-width: 768px) {
  .sb-ico--g { width: 104px; height: 104px; }
  .sb-ico--g svg { width: 40px; height: 40px; }
}

/* Enlace del pie: subrayado oro que crece desde la izquierda */
.sb-flink {
  display: inline-block;
  padding: 10px 0;
  border: 0;
  background-color: transparent;
  background-image: linear-gradient(var(--oro), var(--oro));
  background-size: 0% 1px;
  background-position: 0 calc(100% - 8px);
  background-repeat: no-repeat;
  color: var(--espresso);
  font-family: var(--f-texto);
  font-weight: 300;
  text-decoration: none;
  transition: background-size .35s ease-out;
}

/* Solo en dispositivos con cursor: así el efecto no se queda "pegado" en el celular */
@media (hover: hover) {
  a:hover { color: var(--oro-texto); }
  .sb-stage:hover .sb-lift { transform: translateY(-12px) scale(1.03); }
  .sb-btn:hover { background-size: 100% 100%; color: var(--espresso); }
  .sb-btn:hover svg { transform: translateX(5px); }
  .sb-line:hover { background-size: 100% 100%; color: var(--arena); }
  .sb-ico:hover { background-color: var(--espresso); transform: translateY(-5px) rotate(-5deg); }
  .sb-ico:hover .s { stroke: var(--arena); }
  .sb-ico:hover .f { fill: var(--arena); }
  .sb-flink:hover { background-size: 100% 1px; color: var(--espresso); }
  .sb-mqwrap:hover .sb-mq { animation-play-state: paused; }
}

/* ---------- 7b. Encabezado (sin logo) y menú de celular ---------- */

/* Enlace "Saltar al contenido": invisible hasta que llega el foco con Tab */
.saltar {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--espresso);
  color: var(--arena);
  font-size: 14px;
  text-decoration: none;
}
.saltar:focus, .saltar:hover { top: 8px; color: var(--arena); }
main:focus { outline: none; }

.cabecera { position: relative; z-index: 2; }
.cabecera__in {
  max-width: var(--ancho);
  height: 60px;
  margin-inline: auto;
  padding: 0 8px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cabecera__ciudad {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.cabecera__der { display: flex; align-items: center; }

/* Navegación de escritorio: oculta en celular */
.cabecera__nav { display: none; }
.cabecera__nav ul {
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 0;
  list-style: none;
}
.cabecera__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  color: var(--espresso);
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* Subrayado oro que se dibuja desde la izquierda */
.cabecera__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.16em;
  bottom: 11px;
  height: 1px;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease-out;
}
.cabecera__nav a:focus-visible::after { transform: scaleX(1); }

/* ES / EN: el idioma actual va subrayado (sin negrita) */
.cabecera__idiomas { display: flex; align-items: center; }
.cabecera__idiomas a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--toque);
  height: var(--toque);
  color: var(--texto-2);
  text-decoration: none;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
}
.cabecera__idiomas a[aria-current="page"] {
  color: var(--espresso);
  text-decoration: underline;
  text-decoration-color: var(--oro);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* Instagram: sin círculo en celular, círculo de 44 px en escritorio */
.cabecera__ig { border-color: transparent; }

/* Botón de menú (solo celular) */
.cabecera__menu,
.menu-movil__cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--toque);
  height: var(--toque);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--espresso);
}

@media (min-width: 960px) {
  .cabecera__in { height: auto; padding: 24px var(--margen); }
  .cabecera__ciudad { font-size: 12px; letter-spacing: 0.24em; }
  .cabecera__nav { display: block; }
  .cabecera__idiomas { margin-left: 40px; }
  .cabecera__idiomas a { font-size: 13px; }
  .cabecera__ig { margin-left: 12px; border-color: var(--espresso); }
  .cabecera__menu { display: none; }
}

/* Menú a pantalla completa, color arena.
   Al abrir: el fondo baja como cortina, los enlaces entran escalonados,
   las líneas se dibujan y Esmeralda entra desde el borde derecho.
   Los retrasos solo se aplican al abrir; al cerrar, todo se va a la vez. */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--arena);
  overflow-x: hidden;
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .45s var(--curva);
}
.menu-movil[hidden] { display: none; }
.menu-movil.abierto { clip-path: inset(0 0 0 0); }

.menu-movil__barra {
  position: relative;
  z-index: 2;
  height: 60px;
  flex: none;
  padding: 0 8px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-movil__nav {
  position: relative;
  z-index: 2;
  padding: clamp(24px, 6vh, 72px) var(--margen) 0;
}
.menu-movil__lista {
  max-width: 520px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu-movil__lista li {
  position: relative;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .25s var(--curva), transform .25s var(--curva);
}
/* Línea fina oro entre cada enlace: se dibuja de izquierda a derecha */
.menu-movil__lista li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--curva);
}
.menu-movil.abierto .menu-movil__lista li {
  opacity: 1;
  transform: none;
  transition-duration: .3s;
  transition-delay: calc(var(--i) * 60ms + 150ms);
}
.menu-movil.abierto .menu-movil__lista li::after {
  transform: scaleX(1);
  transition-duration: .5s;
  transition-delay: calc(var(--i) * 60ms + 250ms);
}

.menu-movil__lista a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  min-height: var(--toque);
  padding: 10px 0 12px;
  color: var(--espresso);
  text-decoration: none;
  font-family: var(--f-titulo);
  font-size: clamp(40px, 21.6px + 4.7vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  transition: transform .35s var(--curva);
}
/* Número de catálogo: Bodoni cursiva en oro (tono de texto, por contraste) */
.menu-movil__num {
  flex: none;
  min-width: 1.6em;
  font-style: italic;
  font-size: 0.4em;
  letter-spacing: 0;
  color: var(--oro-texto);
  transition: color .3s ease-out;
}
.menu-movil__lista a:active,
.menu-movil__lista a:focus-visible { transform: translateX(8px); }
.menu-movil__lista a:active .menu-movil__num,
.menu-movil__lista a:focus-visible .menu-movil__num { color: var(--espresso); }

/* Esmeralda recortada: pequeña abajo a la derecha en celular, grande a la derecha en tableta */
.menu-movil__oso {
  position: absolute;
  z-index: 1;
  right: -16vw;
  bottom: 224px;
  width: 48vw;
  max-width: 240px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(40%);
  transition: opacity .3s var(--curva), transform .3s var(--curva);
}
.menu-movil.abierto .menu-movil__oso {
  opacity: 1;
  transform: none;
  transition-duration: .5s;
  transition-delay: .2s;
}

/* Abajo: logo, lema, WhatsApp e íconos */
.menu-movil__pie {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 32px var(--margen) 28px;
  opacity: 0;
  transition: opacity .25s var(--curva);
}
.menu-movil.abierto .menu-movil__pie {
  opacity: 1;
  transition-duration: .4s;
  transition-delay: .4s;
}
.menu-movil__logo { width: 72px; height: auto; }
.menu-movil__lema {
  margin-top: 12px;
  font-family: var(--f-titulo);
  font-style: italic;
  font-size: 18px;
  line-height: 1.2;
}
.menu-movil__lema span { color: var(--oro-texto); }
.menu-movil__acciones {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.menu-movil__iconos { display: flex; gap: 10px; }

/* Pantallas bajas (celulares pequeños): el oso se achica para no tocar nada */
@media (max-height: 740px) {
  .menu-movil__oso { width: 34vw; bottom: 228px; right: -10vw; }
}

/* Tableta: oso grande ocupando el lado derecho */
@media (min-width: 600px) {
  .menu-movil__oso {
    top: 50%;
    bottom: auto;
    right: -14vw;
    width: 46vw;
    max-width: 440px;
    margin-top: -34vw;
  }
  .menu-movil__nav { margin-block: auto; padding-top: 0; }
  .menu-movil__pie { margin-top: 0; }
  .menu-movil__logo { width: 88px; }
  .menu-movil__lema { font-size: 20px; }
}

.menu-abierto { overflow: hidden; }

@media (min-width: 960px) {
  .menu-movil { display: none; }
}

@media (hover: hover) {
  .cabecera__nav a:hover { color: var(--espresso); }
  .cabecera__nav a:hover::after { transform: scaleX(1); }
  .cabecera__idiomas a:hover { color: var(--espresso); }
  .menu-movil__lista a:hover { transform: translateX(8px); color: var(--espresso); }
  .menu-movil__lista a:hover .menu-movil__num { color: var(--espresso); }
}

@media (prefers-reduced-motion: reduce) {
  .menu-movil { clip-path: none; transition: none; }
  .menu-movil__lista li, .menu-movil__lista li::after, .menu-movil__oso, .menu-movil__pie,
  .menu-movil.abierto .menu-movil__lista li, .menu-movil.abierto .menu-movil__lista li::after,
  .menu-movil.abierto .menu-movil__oso, .menu-movil.abierto .menu-movil__pie {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .menu-movil__lista a { transition: none; }
  .menu-movil__lista a:hover, .menu-movil__lista a:active, .menu-movil__lista a:focus-visible { transform: none; }
  .cabecera__nav a::after { transition: none; }
}

/* ---------- 7c. Componente de pieza (3D o foto de respaldo) ----------
   .pieza trae las fotos en el HTML. Si tiene modelo y hay WebGL, main.js
   agrega <model-viewer> encima y, cuando carga, oculta las fotos. */
.pieza { position: relative; width: 100%; height: 100%; }
.pieza__fotos { position: absolute; inset: 0; }
.pieza__fotos img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}
.pieza model-viewer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  --poster-color: transparent;
  opacity: 0;
  transition: opacity .6s var(--curva);
}
.pieza.con-modelo model-viewer { opacity: 1; }
.pieza.con-modelo .pieza__fotos { opacity: 0; transition: opacity .6s var(--curva); }

/* Ícono de giro + texto según el aparato (solo visible si hay modelo 3D) */
.giro {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oro-texto);
}
.giro[hidden] { display: none; }
.giro svg { flex: none; }
.giro__raton { display: none; }
@media (hover: hover) and (pointer: fine) {
  .giro__tactil { display: none; }
  .giro__raton { display: inline; }
}

/* Polvo dorado */
.polvo {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--polvo);
  box-shadow: 0 0 6px rgba(201, 168, 106, .9);
  pointer-events: none;
}
.polvo--esc { display: none; }   /* 10 puntos en celular, 14 en escritorio */

/* ---------- 7d. Portada ---------- */
.portada {
  position: relative;
  /* nada se sale de lado, pero "Única" siempre cabe completa.
     clip recorta igual que hidden, pero NO crea un contenedor de desplazamiento:
     así la aparición al bajar se mide contra la pantalla, no contra la sección. */
  overflow: hidden;
  overflow: clip;
}

/* "Única" detrás de todo */
.portada__palabra {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: calc(var(--logo-alto) + 48px);
  text-align: center;
  pointer-events: none;
}
.portada__palabra p {
  margin: 0;
  font-family: var(--f-titulo);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-unica);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--arena-oscura);
  white-space: nowrap;
}

.portada__in {
  position: relative;
  z-index: 1;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 2px var(--margen) 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "logo    logo"
    "vitrina vitrina"
    "titulo  cartela"
    "texto   texto"
    "boton   boton";
  column-gap: 16px;
}
.portada { --logo-alto: 106px; }   /* alto del logo de 112 px: "Única" va justo debajo */

.portada__logo { grid-area: logo; justify-self: center; }
.portada__logo img { width: 112px; height: auto; }

.portada__vitrina {
  grid-area: vitrina;
  justify-self: center;
  width: 300px;
  max-width: 100%;
  margin-top: 2px;
}
.vitrina__par { position: relative; aspect-ratio: 300 / 360; }

.portada__titular {
  grid-area: titulo;
  align-self: end;
  max-width: 220px;
  margin-top: 16px;
}
.portada__cartela {
  grid-area: cartela;
  align-self: end;
  width: 104px;
}
.portada__texto {
  grid-area: texto;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.55;
  max-width: 430px;
}
.portada__boton { grid-area: boton; margin-top: 20px; }

/* Cartela "N° 01 Esmeralda" */
.cartela {
  border-top: 1px solid var(--oro);
  padding-top: 8px;
}
.cartela__nombre {
  font-family: var(--f-titulo);
  font-style: italic;
  font-size: 17px;
  line-height: 1.15;
}
.cartela__datos {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.cartela__datos span { display: block; }
.cartela .giro { margin-top: 10px; }

/* Celulares bajos: el párrafo se oculta para que el botón quepa en la primera pantalla */
@media (max-width: 599px) and (max-height: 820px) {
  .portada__texto { display: none; }
}

/* Tableta: misma columna, pieza más grande */
@media (min-width: 600px) {
  .portada__vitrina { width: 400px; }
  .portada__titular { max-width: 420px; }
  .portada__cartela { width: 120px; }
  .portada__texto { font-size: 17px; }
  .portada__boton { justify-self: start; }
}

/* Escritorio: texto a la izquierda, vitrina y cartela a la derecha */
@media (min-width: 960px) {
  .portada { min-height: 788px; }
  .portada__in {
    min-height: 788px;
    padding: 16px var(--margen) 72px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px) 120px;
    grid-template-rows: 1fr auto auto auto auto 1fr;
    grid-template-areas:
      ".      vitrina cartela"
      "logo   vitrina cartela"
      "titulo vitrina cartela"
      "texto  vitrina cartela"
      "boton  vitrina cartela"
      ".      vitrina cartela";
    column-gap: 16px;
  }
  .portada__logo { justify-self: start; }
  .portada__logo img { width: 176px; }
  .portada__titular { max-width: 640px; margin-top: 40px; }
  .portada__texto { margin-top: 28px; font-size: 18px; line-height: 1.6; }
  .portada__boton { margin-top: 36px; }
  .portada__vitrina { width: 460px; align-self: center; margin-top: 0; }
  .vitrina__par { aspect-ratio: 470 / 600; }
  .portada__cartela { align-self: end; margin-bottom: 70px; padding-top: 10px; }
  .cartela__nombre { font-size: 20px; }
  .cartela__nombre span { display: block; }
  .cartela__datos { margin-top: 8px; font-size: 11px; line-height: 1.6; }
  .cartela .giro { margin-top: 14px; }
  .polvo { width: 4px; height: 4px; box-shadow: 0 0 8px rgba(201, 168, 106, .9); }
  .polvo--esc { display: block; }

  .portada__palabra { left: auto; right: 3%; top: 28px; text-align: right; }
  .portada__palabra p { letter-spacing: -0.05em; }
}

/* ---------- 7e. Cinta ---------- */
.cinta {
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  padding: 16px 0;
  overflow: hidden;
}
.cinta__pista { display: flex; width: max-content; }
.cinta span {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-right: 22px;
  font-family: var(--f-titulo);
  font-style: italic;
  font-size: var(--fs-cinta);
  line-height: 1.2;
  white-space: nowrap;
}
.cinta i {
  display: block;
  width: 6px;
  height: 6px;
  background: var(--oro);
  transform: rotate(45deg);
}

/* ---------- 7f. Colección en zigzag ---------- */
.coleccion {
  position: relative;
  padding: 64px 0 80px;
  overflow: hidden;
  overflow: clip;   /* ver .portada: recorta sin crear contenedor de desplazamiento */
}

/* Osos recortados saliendo del borde, en su zona reservada */
.recorte {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.recorte img { width: 100%; height: auto; }
.recorte--obsidiana { left: -128px; top: 30px; width: 240px; }
.recorte--jardin { display: none; }

.coleccion__cabeza {
  position: relative;
  z-index: 1;
  min-height: 340px;
  padding: 0 var(--margen) 0 124px;   /* deja libre la zona de Obsidiana */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.coleccion__titulo .titulo-seccion { margin-top: 12px; }
.coleccion__intro { margin-top: 16px; font-size: 15px; line-height: 1.6; }

.coleccion__filas {
  position: relative;
  z-index: 1;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* Cada fila (celular): pieza de 280 px pegada a un lado, texto alineado a ese lado */
.fila { position: relative; display: flex; flex-direction: column; }
.fila--izq { align-items: flex-start; }
.fila--der { align-items: flex-end; }

.fila__escena { position: relative; width: 280px; }
.fila__marco { position: relative; aspect-ratio: 3 / 4; }
.fila__marco .sb-lift { position: absolute; inset: 0; }
.fila__marco .pieza__fotos img { object-position: 50% 55%; }

.fila__num {
  display: block;
  font-family: var(--f-titulo);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-numero);
  line-height: 1;
  color: var(--oro-numero);
}
.fila__texto .fila__num { display: none; }
.fila__num--movil { position: absolute; top: -8px; }
.fila--izq .fila__num--movil { right: -62px; }
.fila--der .fila__num--movil { left: -62px; }

.fila .giro { margin-top: 4px; }
.fila--izq .giro { padding-left: 20px; justify-content: flex-start; }
.fila--der .giro { padding-right: 20px; justify-content: flex-end; }

.fila__texto {
  width: 100%;
  margin-top: 14px;
  padding: 0 var(--margen);
}
.fila--der .fila__texto { text-align: right; }
.fila__medidas { margin-top: 10px; }
.fila__desc { margin-top: 10px; font-size: 16px; line-height: 1.5; }
.fila__compra {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
.fila--der .fila__compra { justify-content: flex-end; }

@media (min-width: 600px) {
  .fila__escena { width: 340px; }
}

/* Galería de cada pieza: la foto grande cambia con un fundido suave */
.galeria__foto { opacity: 0; transition: opacity .45s var(--curva); }
.galeria__foto.es-activa { opacity: 1; }
.fila__marco { touch-action: pan-y; }   /* el dedo de lado cambia de foto; hacia arriba/abajo, desplaza la página */

/* Miniaturas flotantes; la activa lleva una línea espresso debajo */
.galeria {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.fila--izq .galeria { padding-left: 14px; justify-content: flex-start; }
.fila--der .galeria { padding-right: 14px; justify-content: flex-end; }
.galeria__min {
  position: relative;
  width: var(--toque);
  height: 60px;
  padding: 0 0 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.galeria__min img {
  width: 40px;
  height: 53px;
  margin: 0 auto;
  object-fit: cover;
  opacity: .6;
  transition: opacity .3s ease-out, transform .35s var(--curva);
}
.galeria__min::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2px;
  background: var(--espresso);
  transform: scaleX(0);
  transition: transform .35s var(--curva);
}
.galeria__min[aria-current="true"] img { opacity: 1; }

/* Foto de un cuadro (por ejemplo, el que acompaña a Primario): se ve completa,
   sin máscara radial ni multiply, porque no es un oso flotando */
.pieza__fotos img.galeria__foto--cuadro {
  object-fit: contain;
  /* Margen interior: el cuadro no toca el borde de la pantalla en celular y, al pasar el
     cursor (sube 12 px y crece 3 %), nunca sale de su marco. */
  padding: 8%;
}
@media (min-width: 960px) {
  .pieza__fotos img.galeria__foto--cuadro { padding: 5%; }
}
.galeria__min--cuadro img { object-fit: contain; }
.galeria__min[aria-current="true"]::after { transform: scaleX(1); }

@media (hover: hover) {
  .galeria__min:hover img { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .galeria__foto, .galeria__min img, .galeria__min::after { transition: none; }
  .galeria__min:hover img { transform: none; }
}

/* Escritorio: filas a lo ancho, alternando lado */
@media (min-width: 960px) {
  .cinta { padding: 22px 0; }
  .cinta span { gap: 36px; padding-right: 36px; }
  .cinta i { width: 7px; height: 7px; }

  .coleccion { padding: 120px 0 160px; }
  .recorte--obsidiana { display: none; }
  .recorte--jardin { display: block; right: -150px; top: 70px; width: 330px; }

  .coleccion__cabeza {
    max-width: var(--ancho);
    min-height: 400px;
    margin-inline: auto;
    padding: 0 340px 0 var(--margen);   /* deja libre la zona de Jardín */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px 64px;
  }
  .coleccion__titulo { flex: 1 1 420px; min-width: 0; }
  .coleccion__titulo .titulo-seccion { margin-top: 16px; }
  .coleccion__intro { flex: 1 1 260px; max-width: 340px; margin-top: 0; font-size: 18px; }

  .coleccion__filas { margin-top: 48px; gap: 72px; }

  .fila {
    max-width: var(--ancho);
    width: 100%;
    margin-inline: auto;
    padding: 0 var(--margen);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px 96px;
  }
  .fila--der { flex-direction: row-reverse; }
  .fila__escena { flex: 0 1 var(--ancho-pieza); width: auto; min-width: 280px; }
  .fila__num--movil { display: none; }
  .fila--izq .galeria, .fila--der .galeria { padding: 0; justify-content: center; margin-top: 10px; }
  .fila .giro,
  .fila--izq .giro,
  .fila--der .giro { margin-top: 8px; padding: 0; justify-content: center; font-size: 11px; letter-spacing: 0.18em; }

  .fila__texto { flex: 1 1 360px; max-width: 480px; min-width: 0; margin-top: 0; padding: 0; }
  .fila--der .fila__texto { text-align: left; }
  .fila__texto .fila__num { display: block; line-height: 0.8; }
  .fila__texto .nombre-pieza { margin-top: 24px; }
  .fila__medidas { margin-top: 18px; }
  .fila__desc { margin-top: 14px; max-width: 440px; font-size: 19px; line-height: 1.55; }
  .fila__compra {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--linea);
    gap: 28px;
  }
  .fila--der .fila__compra { justify-content: flex-start; }
}

/* ---------- 7g. Encargos y pre-orden ---------- */
.encargos {
  position: relative;
  padding: 72px 0 80px;
  border-top: 1px solid var(--linea);
  overflow: hidden;
  overflow: clip;   /* ver .portada */
}
.recorte--nocturne { right: -118px; top: 50px; width: 236px; }

.encargos__in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-areas: "cabeza" "texto" "pasos" "nota" "boton";
}
.encargos__cabeza {
  grid-area: cabeza;
  min-height: 320px;
  padding: 0 128px 0 var(--margen);   /* deja libre la zona de Nocturne */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.encargos__cabeza .titulo-seccion { margin-top: 12px; }
.encargos__texto { grid-area: texto; margin: 8px var(--margen) 0; font-size: 16px; line-height: 1.6; }

.encargos__pasos {
  grid-area: pasos;
  position: relative;
  margin: 40px var(--margen) 0;
  padding-left: 22px;
}
.encargos__linea {
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--oro);
}
.encargos__pasos ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.paso { display: flex; align-items: baseline; gap: 18px; }
.paso__num {
  display: inline-block;
  min-width: 58px;
  font-family: var(--f-titulo);
  font-style: italic;
  font-size: var(--fs-paso-num);
  line-height: 0.9;
  color: var(--oro-numero);
  transition: color .35s ease-out, transform .35s var(--curva);
}
.paso__titulo { display: block; font-family: var(--f-titulo); font-size: var(--fs-paso); line-height: 1.1; }
.paso__texto { display: block; margin-top: 8px; font-size: 15px; line-height: 1.6; max-width: 360px; }

.encargos__nota { grid-area: nota; margin: 32px var(--margen) 0; font-size: 13px; line-height: 1.6; color: var(--texto-2); }
.encargos__boton { grid-area: boton; margin: 18px var(--margen) 0; width: auto; min-width: 0; }
@media (min-width: 768px) and (max-width: 959px) {
  .encargos__boton { justify-self: start; }
}

@media (min-width: 960px) {
  .encargos { padding: 140px 0 160px; }
  .recorte--nocturne { right: auto; left: -170px; top: 120px; width: 380px; }

  .encargos__in {
    max-width: var(--ancho);
    margin-inline: auto;
    padding: 0 var(--margen) 0 clamp(40px, 20vw, 290px);   /* deja libre la zona de Nocturne */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas:
      "cabeza pasos"
      "texto  pasos"
      "nota   pasos"
      "boton  pasos"
      ".      pasos";
    column-gap: 80px;
    align-items: start;
  }
  .encargos__cabeza { min-height: 0; padding: 0; }
  .encargos__cabeza .titulo-seccion { margin-top: 16px; }
  .encargos__texto { margin: 24px 0 0; font-size: 18px; max-width: 420px; }
  .encargos__nota { margin: 18px 0 0; font-size: 14px; }
  .encargos__boton { margin: 32px 0 0; justify-self: start; width: auto; }
  .encargos__pasos { margin: 0; padding-left: 28px; }
  .encargos__linea { top: 12px; bottom: 12px; }
  .encargos__pasos ol { gap: 48px; }
  .paso { gap: 28px; }
  .paso__num { min-width: 86px; }
  .paso__texto { margin-top: 10px; font-size: 17px; }
}

@media (hover: hover) {
  .paso:hover .paso__num { color: var(--espresso); transform: translateX(8px); }
}

/* ---------- 7h. El atelier (fondo crema) ---------- */
.atelier {
  position: relative;
  padding: 72px 0 80px;
  background: var(--crema);
}
.atelier__foto { display: flex; justify-content: center; }
.atelier__foto .sb-bob { width: 320px; max-width: 100%; }
.atelier__foto img { width: 100%; height: auto; }
.atelier__texto { padding: 24px var(--margen) 0; }
.atelier .cita { margin-top: 14px; }
.atelier__parrafo { margin-top: 14px; font-size: 16px; line-height: 1.7; max-width: 500px; }
.atelier .cita + .atelier__parrafo { margin-top: 24px; }

/* Escalera Art / Passion / Exclusivity */
.escalera {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--f-titulo);
  font-size: 32px;
  line-height: 1.1;
}
.escalera span:nth-child(2) { padding-left: 44px; font-style: italic; color: var(--oro-texto); }
.escalera span:nth-child(3) { padding-left: 88px; }

@media (min-width: 960px) {
  .atelier { padding: 140px 0; }
  .atelier__in {
    max-width: var(--ancho);
    margin-inline: auto;
    padding: 0 var(--margen);
    display: flex;
    align-items: center;
    gap: 56px 96px;
  }
  .atelier__foto { flex: 1 1 420px; min-width: 0; }
  .atelier__foto .sb-bob { width: 520px; }
  .atelier__texto { flex: 1 1 440px; min-width: 0; padding: 0; }
  .atelier .cita { margin-top: 18px; }
  .atelier__parrafo { margin-top: 18px; font-size: 18px; }
  .atelier .cita + .atelier__parrafo { margin-top: 32px; }
  .escalera { margin-top: 44px; font-size: 40px; }
  .escalera span:nth-child(2) { padding-left: 64px; }
  .escalera span:nth-child(3) { padding-left: 128px; }
}

/* ---------- 7i. Contacto ---------- */
.contacto {
  position: relative;
  padding: 72px 0 300px;   /* abajo queda la zona reservada de Cerise en celular */
  overflow: hidden;
  overflow: clip;   /* ver .portada */
}
.recorte--cerise { right: -96px; bottom: -40px; width: 250px; }

.contacto__in {
  position: relative;
  z-index: 1;
  padding: 0 var(--margen);
}
.contacto .titulo-contacto { margin-top: 12px; }
.contacto__texto { margin-top: 18px; font-size: 16px; line-height: 1.6; max-width: 460px; }
.contacto__iconos { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; }
.contacto__envios {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.contacto__rombo { display: none; color: var(--oro); }

@media (min-width: 960px) {
  .contacto { padding: 140px 0 150px; }
  .recorte--cerise { bottom: auto; right: -160px; top: 80px; width: 380px; }
  .contacto__in {
    max-width: var(--ancho);
    margin-inline: auto;
    padding: 0 clamp(40px, 26vw, 360px) 0 var(--margen);   /* deja libre la zona de Cerise */
  }
  .contacto .titulo-contacto { margin-top: 16px; }
  .contacto__texto { margin-top: 24px; font-size: 18px; }
  .contacto__iconos { margin-top: 44px; gap: 20px; }
  .contacto__envios {
    margin-top: 40px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 22px;
    font-size: 13px;
    letter-spacing: 0.18em;
  }
  .contacto__rombo { display: inline; }
}

/* ---------- 7j. Botón fijo de WhatsApp ----------
   Círculo oro con pulso. Cuando el aviso de cookies está abierto, consent.js
   pone su alto en --aviso-alto y el botón sube para no taparlo. */
.wa-fijo {
  position: fixed;
  z-index: 40;
  right: 16px;
  bottom: 16px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--oro);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(calc(-1 * var(--aviso-alto, 0px)));
  transition: transform .45s var(--curva);
}
.wa-fijo svg { width: 26px; height: 26px; }

/* En la portada no aparece (no tapa "Ver la colección"): main.js agrega .wa-visible
   al pasar la portada y el botón entra con un fundido. Sin JavaScript se ve siempre. */
.js .wa-fijo[data-tras-portada] {
  transition: transform .45s var(--curva), opacity .45s var(--curva), visibility 0s linear .45s;
}
.js .wa-fijo[data-tras-portada]:not(.wa-visible) {
  opacity: 0;
  visibility: hidden;   /* tampoco se alcanza con el teclado mientras está oculto */
  transform: translateY(calc(16px - var(--aviso-alto, 0px)));
}
.js .wa-fijo[data-tras-portada].wa-visible {
  transition: transform .45s var(--curva), opacity .45s var(--curva), visibility 0s;
}
.wa-fijo:active { transform: translateY(calc(-1 * var(--aviso-alto, 0px))) scale(.94); }

@media (min-width: 960px) {
  .wa-fijo { right: 28px; bottom: 28px; width: 62px; height: 62px; }
  .wa-fijo svg { width: 28px; height: 28px; }
}
@media (hover: hover) {
  .wa-fijo:hover { transform: translateY(calc(-1 * var(--aviso-alto, 0px))) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .wa-fijo,
  .js .wa-fijo[data-tras-portada],
  .js .wa-fijo[data-tras-portada].wa-visible { transition: none; }
  .wa-fijo:hover, .wa-fijo:active { transform: translateY(calc(-1 * var(--aviso-alto, 0px))); }
}

/* ---------- 7k. Pie (crema, línea oro arriba) ---------- */
.pie {
  background: var(--crema);
  border-top: 1px solid var(--oro);
}
.pie__in { padding: 48px var(--margen) 28px; }
.pie__logo { width: 110px; height: auto; }
.pie__iconos { margin-top: 24px; display: flex; gap: 10px; }
.pie__centro { display: flex; flex-direction: column; }
.pie__legal {
  order: 0;
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-size: 15px;
}
.pie .sb-flink {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  padding: 0;
  font-size: inherit;
  background-position: 0 calc(100% - 10px);
}
.pie__aviso { margin-top: 22px; font-size: 13px; line-height: 1.6; color: var(--texto-2); }
.pie__final {
  margin: 0 var(--margen);
  padding: 16px 0 100px;   /* abajo queda sitio para el botón fijo de WhatsApp */
  border-top: 1px solid var(--arena-oscura);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
}

/* En celular el orden es: logo, íconos, enlaces, aviso */
@media (max-width: 959px) {
  .pie__in { display: flex; flex-direction: column; }
  .pie__logo { order: 1; }
  .pie__iconos { order: 2; }
  .pie__centro { order: 3; }
}

@media (min-width: 960px) {
  .pie__in {
    max-width: var(--ancho);
    margin-inline: auto;
    padding: 64px var(--margen) 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px 64px;
  }
  .pie__logo { width: 132px; }
  .pie__centro { flex: 1 1 380px; max-width: 520px; }
  .pie__legal { margin-top: 0; flex-direction: row; flex-wrap: wrap; gap: 0 28px; font-size: 14px; }
  .pie__aviso { margin-top: 16px; }
  .pie__iconos { margin-top: 0; }
  .pie__final {
    max-width: calc(var(--ancho) - 2 * var(--margen));
    margin: 0 auto;
    padding: 20px 0 32px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
  }
  /* Sin espacio lateral sobrante: se deja sitio para el botón fijo de WhatsApp */
  @media (max-width: 1360px) {
    .pie__final { margin: 0 var(--margen); padding-right: 80px; }
  }
}

/* ---------- 7l. Aviso de cookies (caso C) ----------
   Franja inferior crema. Rechazar y Aceptar idénticos. Mientras está abierto,
   la página gana abajo el alto del aviso (--aviso-alto) para no tapar nada para siempre. */
.aviso-cookies {
  position: fixed;
  z-index: 45;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 100vh;
  overflow-y: auto;
  background: var(--crema);
  border-top: 1px solid var(--oro);
  animation: avisoSube .45s var(--curva) both;
}
.aviso-cookies[hidden] { display: none; }
.aviso-cookies:focus { outline: none; }
.aviso-cookies:focus-visible { outline: 2px solid var(--oro-texto); outline-offset: -4px; }
.aviso-abierto body { padding-bottom: var(--aviso-alto, 0px); }

.aviso-cookies__in {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 14px 16px 12px;
}
.aviso-cookies__texto { font-size: 13px; line-height: 1.45; }
.aviso-cookies__texto a { color: var(--oro-texto); }

.aviso-cookies__panel { margin-top: 10px; }
.aviso-cookies__panel[hidden] { display: none; }
.aviso-cookies fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; }
.aviso-cookies__opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--toque);
  font-size: 13px;
  cursor: pointer;
}
.aviso-cookies__opcion--fija { color: var(--texto-2); cursor: default; }
.aviso-cookies__opcion input { width: 18px; height: 18px; margin: 0; accent-color: var(--espresso); }
.aviso-cookies__panel .sb-line { margin-top: 6px; }

.aviso-cookies__botones { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.aviso-cookies__botones .sb-line { flex: 1 1 0; min-width: 0; }
.aviso-cookies__config {
  flex: none;
  min-height: var(--toque);
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--espresso);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (min-width: 960px) {
  .aviso-cookies__in {
    padding: 16px var(--margen);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
  }
  .aviso-cookies__texto { flex: 1 1 380px; font-size: 14px; line-height: 1.5; }
  .aviso-cookies__panel { margin-top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
  .aviso-cookies fieldset { flex-direction: row; flex-wrap: wrap; gap: 4px 20px; }
  .aviso-cookies__opcion { font-size: 14px; }
  .aviso-cookies__panel .sb-line { margin-top: 0; }
  .aviso-cookies__botones { margin-top: 0; }
  .aviso-cookies__botones .sb-line { flex: none; width: 132px; }
}

@keyframes avisoSube {
  from { transform: translateY(100%); }
  to { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .aviso-cookies { animation: none; }
}

/* ---------- 7m. Páginas legales ----------
   Texto cómodo de leer: columna de 720 px como máximo. */
.legal { padding: 32px 0 80px; }
.legal__in {
  max-width: calc(560px + 2 * var(--margen));   /* unos 75–80 caracteres por línea */
  margin-inline: auto;
  padding: 0 var(--margen);
  font-size: 16px;
  line-height: 1.7;
}
.legal__in .titulo-seccion { margin-top: 12px; }
.legal__fecha { margin-top: 16px; font-size: 13px; color: var(--texto-2); }
.legal__in h2 {
  margin-top: 48px;
  font-size: clamp(24px, 20.29px + 0.952vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.legal__in p, .legal__in ul, .legal__in ol { margin-top: 14px; }
.legal__in ul, .legal__in ol { padding-left: 1.2em; }
.legal__in li + li { margin-top: 6px; }
.legal__in li::marker { color: var(--oro-texto); }
.legal__in strong { font-weight: 400; }   /* jerarquía por tamaño, no por negrita */
.legal__in a { color: var(--espresso); text-decoration-color: var(--oro); text-underline-offset: 3px; }
.legal__in code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.88em;
  background: var(--crema);
  padding: 1px 5px;
}

.legal__tabla { margin-top: 18px; overflow-x: auto; }
.legal__tabla table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.legal__tabla th, .legal__tabla td { padding: 12px 12px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.legal__tabla th { font-weight: 400; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-2); }

.legal__boton-cookies {
  min-height: var(--toque);
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--espresso);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--oro);
  text-underline-offset: 3px;
}

@media (min-width: 960px) {
  .legal { padding: 56px 0 140px; }
  .legal__in { font-size: 17px; }
}

/* ---------- 8. Animaciones ---------- */
.sb-a { animation: sbTurnA 12s ease-in-out infinite; }       /* respaldo: foto A */
.sb-b { animation: sbTurnB 12s ease-in-out infinite; }       /* respaldo: foto B */
.sb-dust { animation: sbDust 6s ease-out infinite; }         /* polvo dorado */
.sb-word { animation: sbDrift 18s ease-in-out infinite alternate; }
.sb-wordin { animation: sbWordIn 1.2s var(--curva) .15s both; }
.sb-up { animation: sbUp .6s var(--curva) both; }            /* entrada de portada */
.d1 { animation-delay: .1s; }
.d2 { animation-delay: .2s; }
.d3 { animation-delay: .32s; }
.d4 { animation-delay: .44s; }
.d5 { animation-delay: .56s; }
.sb-par { transition: transform .7s var(--curva); }          /* parallax con el cursor */
.sb-bob { animation: sbBob 6s ease-in-out infinite; }        /* flotación */
.sb-cutbob { animation: sbBob 9s ease-in-out infinite; }     /* osos recortados */
.sb-spin { animation: sbSpinHint 3.2s var(--curva) infinite; }  /* ícono de giro */
.sb-wa { animation: sbPulse 3.2s ease-out infinite; }        /* pulso de WhatsApp */
.sb-mq { animation: sbMq var(--cinta-dur) linear infinite; } /* cinta */

/* Aparición al bajar: ligada al scroll donde el navegador lo permite.
   El rango termina con "entry …": cuando entró parte del propio bloque. Eso siempre
   ocurre (también en la última pieza y en pantallas muy altas), a diferencia de "cover",
   que depende del alto de la pantalla y de que el bloque llegue a subir. */
@supports (animation-timeline: view()) {
  .rv { animation: sbRv linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  .rv-l { animation: sbRvL linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  .rv-line { transform-origin: top; animation: sbLine linear both; animation-timeline: view(); animation-range: entry 10% entry 100%; }
}
/* Respaldo: main.js agrega .js al <html> y .en-vista a cada bloque con IntersectionObserver */
@supports not (animation-timeline: view()) {
  .js .rv, .js .rv-l {
    opacity: 0;
    transform: translateY(var(--aparece));
    transition: opacity .8s var(--curva), transform .8s var(--curva);
  }
  .js .rv-l { transform: translateX(var(--aparece-l)); }
  .js .rv-line { transform: scaleY(0); transform-origin: top; transition: transform 1.2s var(--curva); }
  .js .en-vista { opacity: 1; transform: none; }
}

@keyframes sbTurnA {
  0%, 40% { opacity: 1; transform: none; }
  50% { opacity: 0; transform: translateX(-6%) scaleX(.94); }
  88% { opacity: 0; transform: translateX(6%) scaleX(.94); }
  98%, 100% { opacity: 1; transform: none; }
}
@keyframes sbTurnB {
  0%, 40% { opacity: 0; transform: translateX(6%) scaleX(.94); }
  50%, 88% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: translateX(-6%) scaleX(.94); }
}
@keyframes sbDust {
  0% { opacity: 0; transform: translateY(0); }
  30% { opacity: .9; }
  100% { opacity: 0; transform: translateY(var(--polvo-sube)); }
}
@keyframes sbDrift {
  from { transform: translateX(0); }
  to { transform: translateX(var(--deriva)); }
}
@keyframes sbWordIn {
  from { opacity: 0; transform: translateY(var(--palabra-sube)); }
  to { opacity: 1; transform: none; }
}
@keyframes sbUp {
  from { opacity: 0; transform: translateY(var(--sube)); }
  to { opacity: 1; transform: none; }
}
@keyframes sbBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--flota)); }
}
@keyframes sbSpinHint {
  0%, 60% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}
@keyframes sbPulse {
  0% { box-shadow: 0 0 0 0 rgba(176, 141, 87, .55), 0 8px 20px rgba(35, 27, 20, .18); }
  70% { box-shadow: 0 0 0 18px rgba(176, 141, 87, 0), 0 8px 20px rgba(35, 27, 20, .18); }
  100% { box-shadow: 0 0 0 0 rgba(176, 141, 87, 0), 0 8px 20px rgba(35, 27, 20, .18); }
}
@keyframes sbMq {
  to { transform: translateX(-50%); }
}
@keyframes sbRv {
  from { opacity: 0; transform: translateY(var(--aparece)); }
  to { opacity: 1; transform: none; }
}
@keyframes sbRvL {
  from { opacity: 0; transform: translateX(var(--aparece-l)); }
  to { opacity: 1; transform: none; }
}
@keyframes sbLine {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* ---------- 9. Reducir movimiento: todo quieto ----------
   Queda la foto frontal fija; el modelo 3D se podrá seguir arrastrando. */
@media (prefers-reduced-motion: reduce) {
  .sb-a, .sb-b, .sb-dust, .sb-word, .sb-wordin, .sb-up, .sb-bob, .sb-cutbob,
  .sb-spin, .sb-wa, .sb-mq, .rv, .rv-l, .rv-line { animation: none; }
  .sb-b, .sb-dust { opacity: 0; }
  .js .rv, .js .rv-l, .js .rv-line { opacity: 1; transform: none; transition: none; }
  .sb-par, .sb-lift, .sb-ico, .sb-btn svg { transition: none; }
  .sb-stage:hover .sb-lift, .sb-ico:hover, .sb-ico:active, .sb-btn:hover svg { transform: none; }
}