/*
 * PORTADA DE WEDDING STUDIO (inicio.html) y 404
 *
 * Identidad del Studio (tienda.css, studio-workspace.css): papel, lienzo y tinta
 * verde en OKLCH, Cormorant Garamond para titulares y cifras, Inter para la
 * interfaz. Un solo acento con intencion: el lacre del sello, que solo aparece
 * donde hay un sello.
 *
 * Movimiento: la clase .m-listo la pone js/landing-boot.js ANTES del primer
 * pintado y solo si no se pidio movimiento reducido. Sin ella todo se pinta
 * quieto y visible; nada depende del JavaScript para leerse.
 */

:root {
  --papel: oklch(99% .004 90);
  --lienzo: oklch(96.5% .007 85);
  --lienzo-hondo: oklch(93.5% .011 85);
  --tinta: oklch(29% .017 155);
  --tinta-suave: oklch(38% .016 155);
  --apagado: oklch(47% .012 95);
  --linea: oklch(87% .013 90);
  --linea-fuerte: oklch(76% .015 95);
  --salvia: oklch(93% .03 150);
  --salvia-honda: oklch(84% .05 150);
  --musgo: oklch(46% .07 145);
  --lacre: oklch(38% .13 18);
  --lacre-luz: oklch(52% .15 16);
  --lacre-hondo: oklch(28% .1 18);
  --noche: oklch(21% .015 155);
  --noche-suave: oklch(27% .018 155);
  --noche-linea: oklch(38% .015 155);
  --claro: oklch(95% .01 90);
  --claro-apagado: oklch(78% .015 120);

  --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --curva: cubic-bezier(.22, 1, .36, 1);
  --curva-muelle: cubic-bezier(.34, 1.36, .64, 1);
  --margen: clamp(1.25rem, 4.2vw, 3.25rem);
  --ancho: 1320px;
  --objetivo: 40px;
  --cabecera: 72px;
  --radio: 6px;
}

@media (pointer: coarse) {
  :root { --objetivo: 44px; }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cabecera) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  interpolate-size: allow-keywords;
}

body {
  margin: 0;
  background: var(--lienzo);
  color: var(--tinta);
  font: 400 1.0625rem/1.65 var(--ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
picture { display: contents; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

::selection { background: var(--salvia-honda); color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
  border-radius: 2px;
}

.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.salto {
  position: absolute;
  left: var(--margen);
  top: -100px;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--tinta);
  color: var(--papel);
  text-decoration: none;
  border-radius: var(--radio);
}
.salto:focus { top: 12px; }

em { font-style: italic; }

/* ── Piezas tipográficas comunes ─────────────────────────────────── */
.ceja {
  font: 600 .75rem/1.4 var(--ui);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--apagado);
}
.ceja--clara { color: var(--claro-apagado); }

.encabezado {
  max-width: 44rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4.25rem);
  text-align: center;
}
.encabezado--izquierda { margin-left: 0; text-align: left; }

.encabezado .ceja { margin-bottom: 1.1rem; }

.encabezado__titulo {
  font: 500 clamp(2.3rem, 1.25rem + 3.3vw, 4.35rem)/1.02 var(--serif);
  letter-spacing: -.015em;
  text-wrap: balance;
}
.encabezado__titulo em { color: var(--musgo); }

.encabezado__texto {
  margin-top: 1.25rem;
  color: var(--tinta-suave);
  font-size: 1.0625rem;
  max-width: 38rem;
  text-wrap: pretty;
}
.encabezado:not(.encabezado--izquierda) .encabezado__texto { margin-inline: auto; }

.enlace-sutil {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo);
  font: 500 .9375rem/1.2 var(--ui);
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--linea-fuerte);
  text-underline-offset: .35em;
  text-decoration-thickness: 1px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: text-decoration-color .2s;
}
.enlace-sutil:hover { text-decoration-color: currentColor; }
.enlace-sutil--claro { color: var(--claro); text-decoration-color: var(--noche-linea); }

/* ── Botones ─────────────────────────────────────────────────────── */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65em;
  min-height: 52px;
  padding: 0 1.5rem;
  border-radius: 4px;
  border: 1px solid transparent;
  font: 600 .9375rem/1 var(--ui);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, transform .35s var(--curva), box-shadow .35s var(--curva);
}
.boton:active { transform: translateY(1px); }
.boton--chico { min-height: max(var(--objetivo), 42px); padding: 0 1.05rem; font-size: .875rem; }

.boton--tinta { background: var(--tinta); color: var(--papel); }
.boton--tinta:hover { background: var(--tinta-suave); box-shadow: 0 10px 24px -12px oklch(29% .017 155 / .55); transform: translateY(-1px); }

.boton--linea { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.boton--linea:hover { background: var(--tinta); color: var(--papel); }

.boton--claro { background: var(--claro); color: var(--noche); }
.boton--claro:hover { background: var(--papel); transform: translateY(-1px); }

.boton__flecha { transition: transform .35s var(--curva); }
.boton:hover .boton__flecha { transform: translateX(3px); }

/* ── Marca (la del Studio: "w." + Wedding + STUDIO) ──────────────── */
.marca {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: var(--objetivo);
  text-decoration: none;
  color: var(--tinta);
}
.marca__w { font: italic 600 2rem/1 var(--serif); letter-spacing: -.04em; transform: translateY(-2px); }
.marca__texto { display: grid; line-height: 1; }
.marca__nombre { font: 500 1.3rem/1 var(--serif); letter-spacing: -.01em; }
.marca__studio { font: 600 .5625rem/1 var(--ui); letter-spacing: .38em; margin-top: .3rem; }
.marca--clara { color: var(--claro); }

/* ── Cabecera ────────────────────────────────────────────────────── */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: oklch(96.5% .007 85 / .86);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
.cabecera[data-desplazado] { border-bottom-color: var(--linea); box-shadow: 0 8px 24px -20px oklch(29% .017 155 / .35); }

.cabecera__marco {
  width: min(100% - 2 * var(--margen), var(--ancho));
  margin-inline: auto;
  height: var(--cabecera);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.navegacion { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.75rem); }
.navegacion__lista { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.8rem); }
.navegacion__lista a {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo);
  font: 500 .9375rem/1 var(--ui);
  text-decoration: none;
  color: var(--tinta-suave);
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1px no-repeat;
  transition: color .2s, background-size .35s var(--curva);
}
.navegacion__lista a:hover { color: var(--tinta); background-size: 100% 1px; }
.navegacion__acciones { display: flex; align-items: center; gap: 1.1rem; }

.menu {
  display: none;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: 0 .9rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  font: 500 .875rem/1 var(--ui);
}
.menu__lineas { display: grid; gap: 5px; width: 16px; }
.menu__lineas span { height: 1.5px; background: currentColor; transition: transform .3s var(--curva); }
.menu[aria-expanded="true"] .menu__lineas span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu[aria-expanded="true"] .menu__lineas span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* ── Hero ────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 6rem);
  overflow: clip;
}
.hero::before {
  /* Grano de papel: un ruido muy tenue, sin archivos extra. */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .22 0 0 0 0 .18 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__marco {
  position: relative;
  width: min(100% - 2 * var(--margen), var(--ancho));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  grid-template-areas:
    "texto escena"
    "texto carrusel";
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.hero__texto { grid-area: texto; max-width: 40rem; }
.hero__ceja { margin-bottom: 1.6rem; }

.hero__titulo {
  font: 500 clamp(3.05rem, 1.35rem + 5.35vw, 6.5rem)/.94 var(--serif);
  letter-spacing: -.022em;
}
.hero__titulo em { color: var(--musgo); }
.linea { display: block; overflow: clip; padding-bottom: .06em; margin-bottom: -.06em; }
.linea__texto { display: inline-block; }

.hero__entrada {
  margin-top: 1.8rem;
  max-width: 31rem;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  color: var(--tinta-suave);
  text-wrap: pretty;
}

.hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; margin-top: 2.2rem; }

.hero__precio {
  margin-top: 1.9rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linea);
  max-width: 31rem;
  font-size: .9375rem;
  color: var(--apagado);
}
.hero__precio strong {
  font: 600 1.35rem/1 var(--serif);
  font-variant-numeric: oldstyle-nums;
  color: var(--tinta);
}

/* Escena: tarjeta de respuesta, teléfono con el sobre real, nota y enlace. */
.hero__escena {
  grid-area: escena;
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 560 / 660;
  justify-self: center;
  --px: 0;
  --py: 0;
  --sy: 0;
}

.escena__halo {
  position: absolute;
  inset: 4% 2% 6% 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--salvia) 0%, oklch(93% .03 150 / .55) 55%, transparent 100%);
}

.capa {
  position: absolute;
  --prof: 0;
  transform: translate3d(calc(var(--px) * var(--prof) * 16px), calc(var(--py) * var(--prof) * 12px + var(--sy) * var(--prof) * -34px), 0);
  transition: transform .9s var(--curva);
  will-change: transform;
}

.escena__telefono { left: 50%; top: 50%; margin: -313px 0 0 -130px; }
.escena__tarjeta { left: 0; bottom: 9%; }
/* A la altura del sello (y del teléfono: +79 px sobre el centro), junto a su borde. */
.escena__nota { left: calc(50% + 166px); top: calc(50% + 60px); display: none; }
.escena__enlace { left: 8%; top: 13%; }

/* Pista bajo el teléfono cuando no hay sitio para la nota lateral. */
.hero__pista {
  grid-area: carrusel;
  justify-self: center;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1rem;
  font: italic 500 1.2rem/1.2 var(--serif);
  color: var(--tinta-suave);
  transition: opacity .4s ease;
}
.hero__pista svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
[data-abierto] .hero__pista { opacity: 0; visibility: hidden; }

@media (min-width: 1360px) {
  .escena__nota { display: flex; }
  .hero__pista { visibility: hidden; }
}

/* Teléfono */
.telefono {
  position: relative;
  width: 300px;
  aspect-ratio: 300 / 626;
  padding: 10px;
  border-radius: 46px;
  background: linear-gradient(150deg, oklch(34% .012 155), oklch(18% .01 155) 60%, oklch(26% .012 155));
  box-shadow:
    0 0 0 1px oklch(100% 0 0 / .06) inset,
    0 2px 0 1px oklch(100% 0 0 / .07) inset,
    0 50px 80px -34px oklch(22% .03 155 / .55),
    0 18px 30px -18px oklch(22% .03 155 / .45);
}
.telefono::before {
  /* Isla de la cámara */
  content: '';
  position: absolute;
  z-index: 4;
  top: 20px;
  left: 50%;
  width: 26%;
  height: 22px;
  margin-left: -13%;
  border-radius: 20px;
  background: oklch(12% .005 155);
}
.telefono__pantalla {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 37px;
  background: oklch(20% .01 60);
  isolation: isolate;
}
.telefono__pantalla img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.pantalla {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease, transform 1.1s var(--curva), clip-path 1.1s var(--curva);
}
.pantalla--activa { opacity: 1; z-index: 1; }
.pantalla--desplegando { opacity: 1; z-index: 2; clip-path: inset(0 0 0 0); }
.pantalla--plegada { clip-path: inset(49.5% 0 49.5% 0); }
.pantalla--saliendo { opacity: 0; transform: scale(1.06); z-index: 1; }

.telefono--chico {
  width: 190px;
  padding: 7px;
  border-radius: 30px;
}
.telefono--chico::before { top: 13px; height: 15px; }
.telefono--chico .telefono__pantalla { border-radius: 24px; }

/* Sello de lacre: cae sobre el lacre dibujado del sobre (49% / 63.1% de la pantalla). */
.telefono__sello {
  position: absolute;
  z-index: 3;
  left: 49%;
  top: 63.1%;
  width: 23%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.sello {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease;
}
.sello::after {
  /* Pulso que invita a tocar; se apaga al abrir. */
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid oklch(80% .08 20 / .8);
  opacity: 0;
  pointer-events: none;
}
.sello:focus-visible { outline-color: oklch(95% .03 30); outline-offset: 4px; }
.sello.is-presionado { transform: scale(.9); }

.sello__mitad {
  position: absolute;
  inset: 0;
  transition: transform 1s var(--curva), opacity .7s ease .15s;
}
.sello__mitad--izquierda { clip-path: polygon(0 0, 53% 0, 46% 21%, 56% 40%, 45% 59%, 55% 78%, 48% 100%, 0 100%); }
.sello__mitad--derecha { clip-path: polygon(53% 0, 100% 0, 100% 100%, 48% 100%, 55% 78%, 45% 59%, 56% 40%, 46% 21%); }

.sello__cara {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50% 47% 52% 48% / 48% 53% 47% 52%;
  background:
    radial-gradient(circle at 34% 28%, oklch(62% .15 18 / .9) 0%, transparent 38%),
    radial-gradient(circle at 50% 50%, var(--lacre-luz) 0%, var(--lacre) 58%, var(--lacre-hondo) 100%);
  box-shadow:
    inset 0 -5px 10px oklch(15% .05 18 / .55),
    inset 0 4px 8px oklch(85% .06 20 / .22),
    0 8px 16px -6px oklch(20% .08 18 / .6),
    0 2px 3px oklch(20% .08 18 / .35);
}
.sello__cara::before {
  content: '';
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  border: 1.5px solid oklch(78% .07 20 / .35);
  box-shadow: inset 0 1px 2px oklch(15% .05 18 / .45), 0 1px 0 oklch(85% .06 20 / .18);
}
.sello__letras {
  position: relative;
  font: italic 600 clamp(.95rem, 1.6vw, 1.3rem)/1 var(--serif);
  letter-spacing: -.02em;
  color: oklch(92% .03 30);
  text-shadow: 0 1px 0 oklch(15% .05 18 / .6), 0 -1px 0 oklch(85% .06 20 / .25);
}
.sello__letras i { font-style: italic; font-size: .8em; margin: 0 .04em; opacity: .9; }

.sello.is-roto { pointer-events: none; }
.sello.is-roto::after { display: none; }
.sello.is-roto .sello__mitad--izquierda { transform: translate(-36%, 30%) rotate(-32deg); opacity: 0; }
.sello.is-roto .sello__mitad--derecha { transform: translate(40%, 36%) rotate(27deg); opacity: 0; }

/* Tarjeta de respuesta (papel con líneas de verjurado). */
.tarjeta-respuesta {
  width: 206px;
  aspect-ratio: 5 / 6.6;
  padding: 1.35rem 1.2rem;
  background:
    repeating-linear-gradient(0deg, transparent 0 6px, oklch(60% .02 90 / .045) 6px 7px),
    var(--papel);
  border: 1px solid var(--linea);
  border-radius: 3px;
  box-shadow: 0 30px 50px -30px oklch(29% .03 155 / .5), 0 6px 12px -8px oklch(29% .03 155 / .3);
  transform: rotate(-9deg);
  color: var(--tinta);
  text-align: center;
}
.tarjeta-respuesta__ceja { font: 600 .5625rem/1.3 var(--ui); letter-spacing: .24em; text-transform: uppercase; color: var(--apagado); }
.tarjeta-respuesta__titulo { font: italic 500 1.55rem/1.05 var(--serif); margin: .8rem 0 1rem; }
.tarjeta-respuesta__opcion {
  display: flex;
  align-items: center;
  gap: .5rem;
  font: 400 .8125rem/1.3 var(--serif);
  text-align: left;
  padding: .35rem 0;
  border-bottom: 1px solid var(--linea);
}
.casilla { width: 11px; height: 11px; border: 1px solid var(--tinta-suave); border-radius: 2px; flex: none; position: relative; }
.casilla--marcada::after { content: ''; position: absolute; left: 2px; top: -3px; width: 4px; height: 9px; border: solid var(--musgo); border-width: 0 1.5px 1.5px 0; transform: rotate(40deg); }
.tarjeta-respuesta__pie { margin-top: .9rem; font: 400 .8125rem/1 var(--serif); color: var(--apagado); }
.tarjeta-respuesta__pie span { font: italic 600 1.1rem/1 var(--serif); color: var(--tinta); border-bottom: 1px solid var(--linea-fuerte); padding: 0 .6rem; }

/* Nota a mano junto al sello y chip del enlace */
.escena__nota { align-items: center; gap: .35rem; transition: opacity .5s ease; }
.nota { font: italic 500 1.45rem/1 var(--serif); color: var(--tinta-suave); white-space: nowrap; }
.nota__flecha { width: 54px; height: 34px; flex: none; fill: none; stroke: var(--tinta-suave); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
[data-abierto] .escena__nota { opacity: 0; }

.chip-enlace {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem .55rem .75rem;
  border-radius: 999px;
  background: var(--papel);
  border: 1px solid var(--linea);
  box-shadow: 0 14px 26px -16px oklch(29% .03 155 / .45);
  font: 500 .8125rem/1 var(--ui);
  color: var(--tinta);
  white-space: nowrap;
}
.chip-enlace__punto { width: 7px; height: 7px; border-radius: 50%; background: var(--musgo); box-shadow: 0 0 0 3px var(--salvia); }

/* Controles del carrusel, bajo la escena. */
.hero__carrusel {
  grid-area: carrusel;
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: .55rem;
  margin-top: .5rem;
  text-align: center;
}
/* Oculto, pero con su espacio reservado: abrir el sobre no mueve el texto del hero. */
.hero__carrusel[hidden] { display: grid; visibility: hidden; }
.hero__coleccion { font: italic 500 1.35rem/1.2 var(--serif); }
.hero__coleccion-ceja { font: 600 .75rem/1 var(--ui); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--apagado); margin-right: .35rem; vertical-align: .2em; }
.puntos { display: flex; gap: .25rem; }
.punto {
  width: var(--objetivo);
  height: var(--objetivo);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.punto::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--tinta-suave);
  transition: background-color .25s, transform .3s var(--curva);
}
.punto[aria-pressed="true"]::before { background: var(--tinta); transform: scale(1.15); }
.punto--pausa { margin-left: .35rem; }
.punto--pausa::before,
.punto--pausa[aria-pressed="true"]::before {
  /* Dos barras: pausar. Pulsado, un triángulo: el cambio está detenido. */
  width: 9px;
  height: 11px;
  border: 0;
  border-radius: 0;
  transform: none;
  background: linear-gradient(90deg, var(--tinta-suave) 0 3px, transparent 3px 6px, var(--tinta-suave) 6px 9px);
}
.punto--pausa[aria-pressed="true"]::before {
  width: 0;
  height: 0;
  background: none;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--tinta-suave);
}
.hero__resellar { font-size: .875rem; color: var(--apagado); }

/* ── Secciones ───────────────────────────────────────────────────── */
.seccion { padding: clamp(4.5rem, 10vw, 8.5rem) 0; }
.seccion__marco { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }

/* Colecciones: cuatro invitaciones sobre la mesa. */
.colecciones { background: var(--papel); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }

.mesa {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.6vw, 2.25rem);
  align-items: start;
}
.mesa__pieza { --giro: 0deg; --baja: 0px; transform: translateY(var(--baja)) rotate(var(--giro)); transition: transform 1.2s var(--curva), opacity .9s ease; }
.mesa__pieza:nth-child(1) { --giro: -4deg; --baja: 26px; --junta: 150%; }
.mesa__pieza:nth-child(2) { --giro: -1.2deg; --baja: 0px; --junta: 50%; }
.mesa__pieza:nth-child(3) { --giro: 1.6deg; --baja: 14px; --junta: -50%; }
.mesa__pieza:nth-child(4) { --giro: 4.5deg; --baja: 36px; --junta: -150%; }

.pieza { display: grid; gap: 1.35rem; }
.pieza__telefono {
  position: relative;
  aspect-ratio: 390 / 844;
  border-radius: 30px;
  padding: 7px;
  background: linear-gradient(150deg, oklch(34% .012 155), oklch(18% .01 155) 60%, oklch(26% .012 155));
  box-shadow: 0 40px 60px -36px oklch(22% .03 155 / .6), 0 14px 22px -14px oklch(22% .03 155 / .4);
  transition: transform .6s var(--curva), box-shadow .6s var(--curva);
}
.pieza__telefono img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 24px; }
.mesa__pieza:hover .pieza__telefono { transform: translateY(-10px) rotate(calc(var(--giro) * -1)); box-shadow: 0 56px 70px -40px oklch(22% .03 155 / .65), 0 18px 26px -16px oklch(22% .03 155 / .4); }

.pieza__texto { display: grid; gap: .3rem; padding-inline: .25rem; }
.pieza__nombre { font: 500 1.6rem/1.1 var(--serif); }
.pieza__frase { font: italic 500 1.0625rem/1.35 var(--serif); color: var(--tinta-suave); }
.pieza__rasgos { font: 600 .75rem/1.5 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--apagado); margin-top: .35rem; }

.colecciones__nota {
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  max-width: 44rem;
  text-align: center;
  font: 400 clamp(1.25rem, 1.05rem + .7vw, 1.6rem)/1.45 var(--serif);
  color: var(--tinta-suave);
  text-wrap: balance;
}
.colecciones__nota strong { font-weight: 600; color: var(--tinta); }

/* Cómo funciona: una mesa con las tres herramientas y tres pasos numerados. */
.pasos .seccion__marco {
  display: grid;
  grid-template-areas: "encabezado" "mesa" "lista";
}
.pasos .encabezado { grid-area: encabezado; }

.pasos__mesa {
  grid-area: mesa;
  position: relative;
  aspect-ratio: 1320 / 600;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.pasos__ventana { position: absolute; left: 0; top: 0; width: 64%; }
.pasos__telefono { position: absolute; }
.pasos__telefono--publicado { left: 61%; top: 10%; }
.pasos__telefono--respuesta { left: 79%; top: 24%; }
.pasos__telefono--publicado .telefono { transform: rotate(-3deg); }
.pasos__telefono--respuesta .telefono { transform: rotate(4deg); }
.chip-enlace--flota { position: absolute; left: -38%; top: 20%; }

.ventana {
  overflow: hidden;
  border-radius: 10px;
  background: var(--papel);
  border: 1px solid var(--linea);
  box-shadow: 0 50px 80px -50px oklch(22% .03 155 / .55), 0 16px 28px -20px oklch(22% .03 155 / .35);
}
.ventana__barra { display: flex; gap: 6px; padding: 10px 12px; background: var(--lienzo); border-bottom: 1px solid var(--linea); }
.ventana__barra span { width: 9px; height: 9px; border-radius: 50%; background: var(--linea-fuerte); }
.ventana img { width: 100%; height: auto; aspect-ratio: 1440 / 900; object-fit: cover; object-position: top left; }
.ventana--oscura { border-color: var(--noche-linea); background: var(--noche-suave); }
.ventana--oscura .ventana__barra { background: var(--noche-suave); border-bottom-color: var(--noche-linea); }
.ventana--oscura .ventana__barra span { background: var(--noche-linea); }

.pasos { --hueco-pasos: clamp(1.5rem, 4vw, 3.5rem); }
.pasos__lista {
  grid-area: lista;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hueco-pasos);
  position: relative;
  z-index: 1;
}
.paso { display: grid; gap: .8rem; align-content: start; }
.paso__numero {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--lienzo);
  border: 1px solid var(--tinta);
  font: italic 500 1.5rem/1 var(--serif);
}
.paso__titulo { font: 500 clamp(1.55rem, 1.3rem + .8vw, 2rem)/1.1 var(--serif); margin-top: .5rem; }
.paso__texto { color: var(--tinta-suave); max-width: 24rem; }

.pasos__hilo {
  grid-area: lista;
  align-self: start;
  height: 1px;
  /* Del centro del primer número al del tercero: una columna menos, medida con el mismo hueco. */
  margin: 23px calc((100% - 2 * var(--hueco-pasos)) / 3 - 23px) 0 23px;
  background: var(--linea-fuerte);
}
.pasos__hilo span { display: block; height: 100%; background: var(--tinta); transform-origin: left center; transform: scaleX(var(--progreso, 1)); }

/* Incluye: la tarjeta de detalles de un juego de papelería. */
.incluye__marco {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.incluye__encabezado { position: sticky; top: calc(var(--cabecera) + 2.5rem); margin-bottom: 0; }
.incluye__accion { margin-top: 2rem; }

.detalles {
  position: relative;
  padding: clamp(2rem, 4vw, 3.5rem);
  background: var(--papel);
  border: 1px solid var(--linea);
  box-shadow: 0 40px 70px -50px oklch(22% .03 155 / .45);
}
.detalles::before {
  /* Doble filete, como una tarjeta impresa. */
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid var(--linea);
  pointer-events: none;
}
.detalles__titulo {
  display: flex;
  align-items: center;
  gap: 1rem;
  font: italic 500 1.35rem/1 var(--serif);
  color: var(--tinta-suave);
  margin-bottom: 2rem;
}
.detalles__titulo::before, .detalles__titulo::after { content: ''; flex: 1; height: 1px; background: var(--linea); }
.detalles__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2.25rem; }
.detalle { display: grid; grid-template-columns: 30px 1fr; gap: .9rem; align-items: start; font-size: .96875rem; color: var(--tinta-suave); }
.detalle strong { display: block; font: 600 1.25rem/1.2 var(--serif); color: var(--tinta); margin-bottom: .2rem; }
.detalle__icono { width: 30px; height: 30px; fill: none; stroke: var(--musgo); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }

/* Planners: la sección de noche. */
.planners { background: var(--noche); color: var(--claro); }
.planners__marco {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.planners .ceja { margin-bottom: 1.1rem; }
.planners .encabezado__titulo em { color: var(--salvia-honda); }
.planners__entrada { margin-top: 1.4rem; color: var(--claro-apagado); max-width: 34rem; }
.planes { margin-top: 2rem; border-top: 1px solid var(--noche-linea); }
.plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nombre precio" "detalle precio";
  column-gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--noche-linea);
}
.plan__nombre { grid-area: nombre; font: 500 1.5rem/1.15 var(--serif); }
.plan__detalle { grid-area: detalle; font-size: .875rem; color: var(--claro-apagado); }
.plan__precio { grid-area: precio; align-self: center; font: 500 1.9rem/1 var(--serif); font-variant-numeric: oldstyle-nums; }
.plan__precio small { font: 400 .8125rem/1 var(--ui); color: var(--claro-apagado); margin-left: .25rem; }
.planners__nota { margin-top: 1.1rem; font-size: .875rem; color: var(--claro-apagado); }
.planners__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 2rem; }
.planners :focus-visible { outline-color: var(--claro); }

.planners__vista { perspective: 1400px; }
.planners__vista .ventana { transform: rotateY(-9deg) rotateX(3deg); transform-origin: left center; transition: transform 1.2s var(--curva); }
.planners__vista:hover .ventana { transform: rotateY(-3deg) rotateX(1deg); }

/* Precios: etiquetas de papel perforadas. */
.precios { background: var(--lienzo); }
.etiquetas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
}
.etiqueta {
  position: relative;
  display: grid;
  align-content: start;
  gap: .9rem;
  padding: 3.1rem clamp(1.5rem, 2.6vw, 2.25rem) 2.25rem;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: 0 30px 50px -44px oklch(22% .03 155 / .5);
}
.etiqueta::before {
  /* La perforación de la etiqueta. */
  content: '';
  position: absolute;
  top: 1.1rem;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--lienzo);
  box-shadow: inset 0 1px 2px oklch(22% .03 155 / .35), 0 0 0 1px var(--linea);
}
.etiqueta__nombre { font: 500 1.9rem/1.1 var(--serif); }
/* El periodo va siempre bajo el monto: con $1,249 junto a $499 las tres etiquetas conservan la misma línea base. */
.etiqueta__precio { display: grid; justify-items: start; gap: .45rem; }
.etiqueta__monto { font: 500 clamp(3.2rem, 2.6rem + 1.6vw, 4rem)/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: oldstyle-nums proportional-nums; }
.etiqueta__periodo { font-size: .875rem; color: var(--apagado); }
.etiqueta__resumen { font: italic 500 1.125rem/1.35 var(--serif); color: var(--tinta-suave); }
.etiqueta__rasgos { display: grid; gap: .55rem; margin-top: .6rem; padding-top: 1.1rem; border-top: 1px solid var(--linea); font-size: .9375rem; color: var(--tinta-suave); }
.etiqueta__rasgos li { display: grid; grid-template-columns: 16px 1fr; gap: .6rem; }
.etiqueta__rasgos li::before { content: ''; width: 9px; height: 5px; margin-top: .55em; border: solid var(--musgo); border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg); }

.etiquetas { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); align-items: stretch; padding-block: 1.25rem; }
.etiqueta--destacada {
  border-color: var(--tinta);
  margin-block: -1.25rem;
  padding-block: 3.6rem 2.75rem;
  box-shadow: 0 44px 70px -46px oklch(22% .03 155 / .65);
}
.etiqueta--destacada .etiqueta__monto { font-size: clamp(3.6rem, 2.9rem + 2vw, 4.6rem); }
.etiqueta__insignia { font: 600 .75rem/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--lacre); }
.etiqueta__lacre {
  position: absolute;
  top: -18px;
  right: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50% 47% 52% 48% / 48% 53% 47% 52%;
  background:
    radial-gradient(circle at 34% 28%, oklch(62% .15 18 / .9) 0%, transparent 40%),
    radial-gradient(circle, var(--lacre-luz) 0%, var(--lacre) 60%, var(--lacre-hondo) 100%);
  box-shadow: inset 0 -3px 6px oklch(15% .05 18 / .5), 0 6px 12px -4px oklch(20% .08 18 / .55);
}
.etiqueta__lacre::before { content: ''; position: absolute; inset: 16%; border-radius: 50%; border: 1px solid oklch(78% .07 20 / .35); }

.precios__pie { display: grid; justify-items: center; gap: 1.25rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); text-align: center; color: var(--apagado); }

/* Preguntas */
.preguntas { background: var(--papel); border-top: 1px solid var(--linea); }
.preguntas__marco { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.preguntas .encabezado { margin-bottom: 0; }
.preguntas .encabezado__texto a { color: var(--tinta); text-underline-offset: .25em; overflow-wrap: anywhere; }
.acordeon { border-top: 1px solid var(--linea); }
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 64px;
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
  font: 500 clamp(1.25rem, 1.1rem + .5vw, 1.5rem)/1.25 var(--serif);
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: '';
  flex: none;
  width: 13px;
  height: 13px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform .35s var(--curva);
}
.pregunta[open] summary::after { transform: rotate(45deg); }
.pregunta p { padding: 0 2rem 1.4rem 0; color: var(--tinta-suave); max-width: 40rem; }
.pregunta p a { color: var(--tinta); text-underline-offset: .2em; }
.pregunta::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--curva), content-visibility .45s allow-discrete; }
.pregunta[open]::details-content { block-size: auto; }

/* Cierre */
.cierre {
  position: relative;
  padding: clamp(5rem, 11vw, 9rem) 0;
  background: radial-gradient(60% 70% at 50% 45%, var(--salvia) 0%, transparent 70%), var(--lienzo);
  text-align: center;
  overflow: clip;
}
.cierre__marco { width: min(100% - 2 * var(--margen), 52rem); margin-inline: auto; display: grid; justify-items: center; gap: 1.5rem; }
.cierre__sello {
  position: relative;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50% 47% 52% 48% / 48% 53% 47% 52%;
  background:
    radial-gradient(circle at 34% 28%, oklch(62% .15 18 / .9) 0%, transparent 38%),
    radial-gradient(circle, var(--lacre-luz) 0%, var(--lacre) 58%, var(--lacre-hondo) 100%);
  box-shadow: inset 0 -5px 10px oklch(15% .05 18 / .55), inset 0 4px 8px oklch(85% .06 20 / .22), 0 10px 18px -8px oklch(20% .08 18 / .6);
}
.cierre__sello::before { content: ''; position: absolute; inset: 15%; border-radius: 50%; border: 1.5px solid oklch(78% .07 20 / .35); }
.cierre__sello .sello__letras { font-size: 1.15rem; }
.cierre__titulo { font: 500 clamp(2.6rem, 1.3rem + 4.4vw, 5.2rem)/1 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.cierre__titulo em { color: var(--musgo); }
.cierre__texto { color: var(--tinta-suave); max-width: 30rem; }

/* Pie */
.pie { background: var(--noche); color: var(--claro-apagado); padding: clamp(3.5rem, 7vw, 5rem) 0 1.5rem; }
.pie__marco {
  width: min(100% - 2 * var(--margen), var(--ancho));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--noche-linea);
}
.pie__frase { margin-top: 1rem; font: italic 500 1.35rem/1.3 var(--serif); color: var(--claro); max-width: 20rem; }
.pie__contacto { margin-top: 1rem; font-size: .9375rem; overflow-wrap: anywhere; }
.pie a { color: var(--claro); text-decoration: none; }
.pie a:hover { text-decoration: underline; text-underline-offset: .25em; }
.pie :focus-visible { outline-color: var(--claro); }
.pie__columnas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.pie__titulo { font: 600 .75rem/1.4 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--claro-apagado); margin-bottom: .9rem; }
.pie__columnas ul { display: grid; gap: .1rem; }
.pie__columnas a { display: inline-flex; align-items: center; min-height: var(--objetivo); font-size: .9375rem; }
.pie__base {
  width: min(100% - 2 * var(--margen), var(--ancho));
  margin-inline: auto;
  padding-top: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: .875rem;
}
.pie__arriba { display: inline-flex; align-items: center; gap: .4rem; min-height: var(--objetivo); }

/* Barra de acción en teléfono: aparece al dejar atrás el hero. */
.barra-accion { display: none; }

/* ── 404 ─────────────────────────────────────────────────────────── */
.perdida { min-height: calc(100svh - var(--cabecera)); display: grid; place-items: center; padding: 3rem var(--margen) 5rem; text-align: center; }
.perdida__marco { display: grid; justify-items: center; gap: 1.4rem; max-width: 40rem; }
.perdida__titulo { font: 500 clamp(2.4rem, 1.4rem + 3.8vw, 4.4rem)/1.02 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.perdida__titulo em { color: var(--musgo); }
.perdida__texto { color: var(--tinta-suave); }
.perdida__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .85rem; margin-top: .5rem; }
.sello-roto { position: relative; width: 84px; height: 84px; margin-bottom: .5rem; }
.sello-roto .sello__mitad--izquierda { transform: translate(-9%, 4%) rotate(-10deg); }
.sello-roto .sello__mitad--derecha { transform: translate(9%, 7%) rotate(9deg); }
.sello-roto .sello__letras { font-size: 1.2rem; }

/* ── Movimiento (solo con .m-listo) ─────────────────────────────── */
@keyframes sube-linea { from { transform: translate3d(0, 105%, 0); } to { transform: none; } }
@keyframes sube { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes escena-entra { from { opacity: 0; transform: translate3d(0, 44px, 0) rotate(1.5deg); } to { opacity: 1; transform: none; } }
@keyframes sello-llega {
  0% { opacity: 0; transform: scale(1.7) rotate(-24deg); }
  62% { opacity: 1; transform: scale(.94) rotate(3deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes flotar { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -9px, 0); } }
@keyframes mecer { 0%, 100% { transform: rotate(-9deg) translate3d(0, 0, 0); } 50% { transform: rotate(-7.5deg) translate3d(0, -6px, 0); } }
@keyframes pulso { 0% { opacity: .75; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

[data-orden="1"] { --m-orden: 1; } [data-orden="2"] { --m-orden: 2; } [data-orden="3"] { --m-orden: 3; }
[data-orden="4"] { --m-orden: 4; } [data-orden="5"] { --m-orden: 5; } [data-orden="6"] { --m-orden: 6; }
.m-listo .m-hero { animation: sube .95s var(--curva) both; animation-delay: calc(var(--m-orden, 0) * 90ms + 120ms); }
.m-listo .linea__texto.m-hero { animation-name: sube-linea; animation-duration: 1.05s; }
.m-listo .hero__escena { animation: escena-entra 1.3s var(--curva) .35s both; }
.m-listo .telefono__sello { animation: aparece .01s linear 1.15s both; }
/* backwards, no both: al terminar, el sello vuelve a sus propias reglas (la presión
   de .is-presionado); con both el último fotograma las taparía para siempre. */
.m-listo .sello { animation: sello-llega .9s var(--curva) 1.15s backwards; }
.m-listo .sello:not(.is-roto)::after { animation: pulso 2.4s ease-out 2.2s infinite; }
.m-listo .escena__telefono .telefono { animation: flotar 7s ease-in-out 1.8s infinite; }
.m-listo .tarjeta-respuesta { animation: mecer 9s ease-in-out 1.2s infinite; }
/* backwards por la misma razón: son capas con paralaje (transform de .capa). */
.m-listo .escena__nota, .m-listo .escena__enlace { animation: sube .9s var(--curva) 1.6s backwards; }
[data-pausado] * { animation-play-state: paused !important; }

.m-listo .m-entrada { transition: opacity .9s ease, transform 1.15s var(--curva); transition-delay: var(--m-retardo, 0ms); }
.m-listo .m-entrada:not(.m-visto) { opacity: 0; transform: translate3d(0, 30px, 0); }
.m-listo .mesa__pieza.m-entrada:not(.m-visto) { opacity: 0; transform: translate3d(var(--junta), 70px, 0) rotate(0deg); }
.m-listo .pasos__ventana.m-entrada:not(.m-visto) { transform: translate3d(-40px, 30px, 0); }
.m-listo .pasos__telefono.m-entrada:not(.m-visto) { transform: translate3d(0, 70px, 0); }
/* La tarjeta de detalles se despliega como papel doblado. */
.m-listo .detalles.m-entrada { transition: opacity .6s ease, clip-path 1.3s var(--curva), transform 1.3s var(--curva); clip-path: inset(0 0 0 0); }
.m-listo .detalles.m-entrada:not(.m-visto) { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
/* Las etiquetas cuelgan de su perforación y se asientan. */
.m-listo .etiqueta.m-entrada { transform-origin: 50% 1.4rem; transition: opacity .7s ease, transform 1.4s var(--curva-muelle); }
.m-listo .etiqueta.m-entrada:not(.m-visto) { transform: translate3d(0, -18px, 0) rotate(-4deg); }
.m-listo .etiqueta--destacada.m-entrada:not(.m-visto) { transform: translate3d(0, -32px, 0) rotate(3deg); }
/* La ventana del Planificador gira hacia quien la mira. */
.m-listo .planners__vista.m-entrada:not(.m-visto) { opacity: 0; transform: none; }
.m-listo .planners__vista.m-entrada:not(.m-visto) .ventana { transform: rotateY(-28deg) rotateX(6deg) translate3d(40px, 0, 0); }
/* El sello del cierre se estampa. */
.m-listo .cierre__marco.m-visto .cierre__sello { animation: sello-llega .9s var(--curva) .15s both; }

/* ── Adaptación ─────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .navegacion__lista { display: none; }
}

@media (max-width: 1100px) {
  .telefono { width: 268px; border-radius: 42px; }
  .escena__telefono { margin: -280px 0 0 -118px; }
  .tarjeta-respuesta { width: 184px; padding: 1.1rem 1rem; }
}

@media (max-width: 900px) {
  :root { --cabecera: 64px; }
  .menu { display: inline-flex; }
  .navegacion {
    position: fixed;
    inset: var(--cabecera) 0 auto 0;
    display: grid;
    gap: 1.25rem;
    padding: 1.25rem var(--margen) calc(1.75rem + env(safe-area-inset-bottom));
    background: var(--lienzo);
    border-bottom: 1px solid var(--linea);
    box-shadow: 0 30px 40px -30px oklch(29% .017 155 / .35);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, transform .35s var(--curva), visibility 0s .35s;
  }
  .navegacion.is-abierta { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .35s var(--curva), visibility 0s; }
  .navegacion__lista { display: grid; gap: 0; }
  .navegacion__lista a { width: 100%; min-height: 52px; font-size: 1.0625rem; border-bottom: 1px solid var(--linea); background: none; }
  .navegacion__acciones { justify-content: space-between; }

  .hero__marco {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "texto" "escena" "carrusel";
    row-gap: 2rem;
  }
  .hero__texto { max-width: 38rem; }
  .hero__escena { max-width: 470px; aspect-ratio: 470 / 560; }
  .telefono { width: 236px; border-radius: 38px; padding: 8px; }
  .telefono__pantalla { border-radius: 31px; }
  .telefono::before { top: 16px; height: 18px; }
  .escena__telefono { margin: -246px 0 0 -104px; }
  .tarjeta-respuesta { width: 160px; padding: .95rem .85rem; }
  .tarjeta-respuesta__titulo { font-size: 1.25rem; margin: .55rem 0 .7rem; }
  .tarjeta-respuesta__opcion { font-size: .6875rem; }
  .escena__tarjeta { left: 0; bottom: 6%; }
  .escena__enlace { left: 2%; top: 9%; }

  .mesa {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(70vw, 260px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: .5rem var(--margen) 2.5rem;
    margin-inline: calc(var(--margen) * -1);
    scroll-padding-inline: var(--margen);
    scrollbar-width: thin;
  }
  .mesa__pieza { scroll-snap-align: start; }
  .mesa__pieza:nth-child(n) { --giro: 0deg; --baja: 0px; --junta: 0; }

  .pasos__mesa { aspect-ratio: 900 / 640; }
  .pasos__ventana { width: 86%; }
  /* Anclados por la derecha: nunca se salen del ancho de la página. */
  .pasos__telefono--publicado { left: auto; right: 22%; top: 28%; }
  .pasos__telefono--respuesta { left: auto; right: 0; top: 34%; }
  .telefono--chico { width: 150px; padding: 6px; border-radius: 24px; }
  .telefono--chico .telefono__pantalla { border-radius: 19px; }
  .chip-enlace--flota { left: -55%; top: 62%; }

  .incluye__marco, .planners__marco, .preguntas__marco { grid-template-columns: minmax(0, 1fr); }
  .incluye__encabezado { position: static; margin-bottom: 0; }
  .planners__vista .ventana { transform: none; }

  .etiquetas { grid-template-columns: minmax(0, 1fr); max-width: 30rem; padding-block: 0; }
  .etiqueta--destacada { margin-block: 0; }
  .pie__marco { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .navegacion__acciones .boton { flex: 1; }
  .pasos__lista { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .paso { grid-template-columns: 46px 1fr; column-gap: 1.1rem; }
  .paso__numero { grid-row: span 2; }
  .paso__titulo { margin-top: .4rem; }
  .pasos__hilo { width: 1px; height: auto; align-self: stretch; margin: 23px 0 40px 22.5px; justify-self: start; }
  .pasos__hilo span { transform-origin: center top; transform: scaleY(var(--progreso, 1)); }
  .detalles__lista { grid-template-columns: minmax(0, 1fr); }
  .pie__columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie__base { flex-direction: column-reverse; align-items: flex-start; }

  .barra-accion {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem var(--margen) calc(.7rem + env(safe-area-inset-bottom));
    background: oklch(99% .004 90 / .94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--linea);
    transform: translateY(110%);
    transition: transform .45s var(--curva);
  }
  .barra-accion.is-visible { transform: none; }
  .barra-accion__texto { font: italic 500 1.2rem/1.1 var(--serif); }
}

@media (max-width: 420px) {
  .hero__acciones .boton { flex: 1 1 100%; }
  .hero__escena { aspect-ratio: 360 / 500; }
  .telefono { width: 208px; border-radius: 34px; padding: 7px; }
  .telefono__pantalla { border-radius: 28px; }
  .escena__telefono { margin: -218px 0 0 -96px; }
  .tarjeta-respuesta { width: 132px; padding: .8rem .7rem; }
  .tarjeta-respuesta__ceja { font-size: .5rem; }
  .tarjeta-respuesta__titulo { font-size: 1.05rem; }
  .tarjeta-respuesta__opcion { font-size: .625rem; gap: .35rem; }
  .tarjeta-respuesta__pie { display: none; }
  .escena__enlace { top: 4%; }
  .chip-enlace { font-size: .75rem; padding: .45rem .7rem .45rem .6rem; }
  .pasos__mesa { aspect-ratio: auto; height: min(118vw, 470px); }
  .pasos__ventana { width: 100%; }
  .telefono--chico { width: 34vw; padding: 5px; border-radius: 20px; }
  .telefono--chico .telefono__pantalla { border-radius: 16px; }
  .telefono--chico::before { top: 10px; height: 11px; }
  .pasos__telefono--publicado { right: 30%; top: 30%; }
  .pasos__telefono--respuesta { right: 1%; top: 40%; }
  .chip-enlace--flota { left: -48%; top: 64%; }
}

/* En pantallas bajas de escritorio el hero cabe entero: la escena escala con zoom
   (cambia su caja de diseño, no solo su pintura) y el titular se modera. */
@media (min-width: 901px) and (max-height: 940px) {
  .hero { padding-top: clamp(1.5rem, 4vh, 3rem); padding-bottom: clamp(2.5rem, 5vh, 4rem); }
  .hero__escena { zoom: .9; }
}
@media (min-width: 901px) and (max-height: 820px) {
  .hero__escena { zoom: .8; }
  .hero__titulo { font-size: clamp(2.9rem, 1.2rem + 4.6vw, 5.6rem); }
  .hero__entrada { margin-top: 1.35rem; }
  .hero__acciones { margin-top: 1.6rem; }
  .hero__precio { margin-top: 1.4rem; }
}
@media (min-width: 901px) and (max-height: 700px) {
  .hero__escena { zoom: .7; }
}

@media (min-width: 1600px) {
  :root { --ancho: 1440px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .capa { transform: none !important; }
}