/* GUEST · Sellos
   Sobre rosa, papel de carta, tinta azul marino y un único rojo de matasellos.
   Cada diseño es un sello dentado; la invitación es lo que se envía. */

:root {
  --envelope: #f0c4bc;
  --envelope-soft: #f6dcd6;
  --paper: #fbf7f4;
  --white: #ffffff;
  --ink: #1b2650;
  --ink-soft: #4a5480;
  --ink-deep: #131b3b;
  --on-ink: #f4efe9;
  --on-ink-soft: #c3c8de;
  --postmark: #b3263a;
  --line: #e3d6d1;
  --wa: #1fa855;

  --display: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  --mono: 'Courier Prime', 'Courier New', monospace;
  --text: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --section: clamp(4.5rem, 9vw, 8rem);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --shadow: 0 1px 2px rgba(27, 38, 80, .08), 0 18px 36px -20px rgba(27, 38, 80, .45);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; scrollbar-color: var(--ink-soft) var(--paper); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  caret-color: var(--postmark);
}
body::before {
  content: "";
  position: fixed; inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  background: var(--envelope);
  z-index: 60;
}
::selection { background: var(--ink); color: var(--paper); }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--postmark); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 400; }
p { margin: 0; }
.mono { font-family: var(--mono); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: .6rem 1rem; border-radius: 6px; font-weight: 600;
}
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }

.wrap {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; padding: .8rem 1.4rem;
  border: 0; border-radius: 999px;
  font: 600 1rem/1.1 var(--text);
  text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.btn svg { width: 20px; height: 20px; flex: none; transition: transform 200ms var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn-sm { min-height: 44px; padding: .55rem 1.05rem; font-size: .9375rem; }
.btn-block { width: 100%; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px currentColor; }
@media (hover: hover) and (pointer: fine) {
  .btn-ink:hover { background: #26346a; }
  .btn-ink:hover svg { transform: translateX(3px); }
  .btn-line:hover { background: rgba(27, 38, 80, .07); }
}

/* ---------- Cabecera ---------- */
.header {
  position: fixed; z-index: 50;
  top: env(safe-area-inset-top, 0px); left: 0; right: 0;
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 68px;
  padding: .6rem var(--gutter-r) .6rem var(--gutter);
  background: var(--envelope);
  transition: box-shadow 250ms ease;
}
.header.is-solid { box-shadow: 0 10px 24px -20px rgba(27, 38, 80, .6); }
.logo { display: inline-grid; text-decoration: none; color: var(--ink); line-height: 1; }
.logo b { font: 400 1.6rem/1 var(--display); letter-spacing: .02em; }
.logo span { margin-top: .2rem; font: 400 .78rem/1 var(--mono); }
.nav { display: none; gap: 1.6rem; margin-left: auto; }
.nav a { font-size: .9375rem; font-weight: 500; text-decoration: none; color: var(--ink-soft); transition: color 200ms ease; }
.nav a:hover { color: var(--ink); }
.header-cta { margin-left: auto; display: none; }

/* ---------- Sello: borde dentado ---------- */
.stamp {
  --hole: 4px; --step: 12px;
  position: relative;
  display: block;
  padding: 9px;
  background: var(--white);
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle var(--hole), transparent 97%, #000) calc(var(--step) / -2) calc(var(--step) / -2) / var(--step) var(--step);
          mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle var(--hole), transparent 97%, #000) calc(var(--step) / -2) calc(var(--step) / -2) / var(--step) var(--step);
}
.stamp-art { position: relative; display: block; overflow: hidden; background: var(--line); }
.stamp-art img, .stamp-art video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.stamp-shadow { filter: drop-shadow(0 2px 2px rgba(27, 38, 80, .22)) drop-shadow(0 14px 18px rgba(27, 38, 80, .16)); }

/* ---------- Portada ---------- */
.hero {
  background: var(--envelope);
  padding-top: calc(68px + env(safe-area-inset-top, 0px));
}
.hero-grid { display: grid; gap: 2.75rem; padding-block: 1.75rem 0; }
.hero-copy { display: grid; gap: 1.4rem; align-content: start; min-width: 0; }
.hero h1 {
  font: 400 clamp(2.6rem, 4.6vw + 1rem, 4.75rem)/1 var(--display);
  letter-spacing: -.01em;
  max-width: 13ch;
}
.hero-lead { max-width: 32rem; font-size: clamp(1.0625rem, .4vw + 1rem, 1.1875rem); color: var(--ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.envelope {
  position: relative;
  justify-self: center;
  width: 100%; max-width: 560px;
  padding: 1.4rem 1.4rem 1.6rem;
  background: var(--paper);
  border-radius: 4px;
  box-shadow: 0 30px 50px -28px rgba(27, 38, 80, .55);
}
/* Ribete de correo aéreo: lo que hace que el papel se lea como sobre */
.envelope::before {
  content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none;
  padding: 7px;
  background: repeating-linear-gradient(-45deg,
    var(--postmark) 0 11px, transparent 11px 18px, var(--ink) 18px 29px, transparent 29px 36px);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .9;
}
.env-top { position: relative; display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.from { font-size: .85rem; line-height: 1.5; color: var(--ink-soft); }
.stamp-hero { flex: none; width: 52%; max-width: 250px; margin: 0; filter: drop-shadow(0 2px 2px rgba(27, 38, 80, .25)) drop-shadow(0 16px 20px rgba(27, 38, 80, .18)); }
.stamp-hero .stamp { padding: 10px; }
.stamp-hero .stamp-art { aspect-ratio: 390 / 844; }
.stamp-hero figcaption { position: absolute; left: 16px; top: 16px; padding: .1rem .4rem; background: rgba(251, 247, 244, .92); font-size: .78rem; font-weight: 700; }
.hero-toggle {
  position: absolute; right: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 44px; padding: .45rem .8rem;
  border: 0; border-radius: 99px;
  background: rgba(19, 27, 59, .7); color: var(--white);
  font: 600 .8125rem/1 var(--text); cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.hero-toggle:active { transform: scale(0.97); }
.hero-toggle svg { width: 16px; height: 16px; }
.postmark {
  position: absolute; right: calc(min(52%, 250px) - 52px); bottom: -34px;
  width: 104px; height: 104px;
  color: var(--postmark); opacity: .85;
  transform: rotate(-14deg);
  pointer-events: none;
}
.to { margin: 2.4rem 0 0 14%; font-size: 1rem; line-height: 1.6; }
.to b { display: block; font-size: 1.15rem; }

/* Móvil: el sobre abre la portada, con remite, destinatario y el sello animado a la vista */
@media (max-width: 759.98px) {
  /* Título, sobre y después el resto: primero se entiende qué es, luego se ve */
  .hero-grid { gap: 1.35rem; padding-top: 1.1rem; }
  .hero-copy { display: contents; }
  .hero h1 { order: 1; }
  .envelope { order: 2; }
  .hero-lead { order: 3; }
  .hero-actions { order: 4; }
  .envelope {
    display: grid; grid-template-columns: minmax(0, 1fr) 39%; column-gap: 12px;
    padding: 20px 20px 20px 22px;
  }
  .env-top { display: contents; }
  .from { grid-column: 1; grid-row: 1; font-size: .875rem; }
  .stamp-hero { grid-column: 2; grid-row: 1 / 3; width: 100%; max-width: none; }
  .stamp-hero .stamp, .stamp-hero.stamp { padding: 7px; }
  .stamp-hero figcaption { left: 11px; top: 11px; font-size: .6875rem; }
  .to { grid-column: 1; grid-row: 2; align-self: center; margin: 0 0 2.2rem; font-size: .875rem; line-height: 1.5; }
  .to b { font-size: 1rem; line-height: 1.3; margin-block: .1rem; }
  .postmark { right: calc(20px + 39% - 40px); bottom: 10px; width: 78px; height: 78px; }
  .hero-toggle { right: 10px; bottom: 10px; width: 40px; min-height: 40px; padding: 0; justify-content: center; }
  .hero-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hero h1 { max-width: none; font-size: clamp(2.15rem, 9.4vw, 2.8rem); line-height: 1.02; }
}

.promises {
  list-style: none; margin: 0 auto; padding-block: 2.5rem 2.75rem;
  display: grid;
}
.promises li {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 1rem; align-items: start;
  padding-block: 1.15rem;
  border-top: 1.5px dashed color-mix(in srgb, var(--ink) 24%, transparent);
}
.promises li:first-child { border-top: 0; }
.promise-mark {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  color: var(--postmark); border: 1.5px solid currentColor;
  box-shadow: inset 0 0 0 3px var(--envelope), inset 0 0 0 4.5px currentColor;
  rotate: -8deg;
}
.promise-mark svg { width: 22px; height: 22px; }
.promises strong { display: block; font: 400 1.375rem/1.15 var(--display); color: var(--ink); }
.promises p { margin: .3rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }

/* ---------- Secciones ---------- */
.section { padding-block: var(--section); }
.head { display: grid; gap: 1rem; max-width: 36rem; }
.head h2 { font: 400 clamp(2.1rem, 3vw + 1rem, 3.4rem)/1.04 var(--display); letter-spacing: -.005em; }
.head p { color: var(--ink-soft); }
.how .head { max-width: 46rem; }
.how .head p { max-width: 36rem; }
.nowrap { white-space: nowrap; }
.head a { font-weight: 600; }
.note { margin-top: 1.5rem; font-size: .9375rem; color: var(--ink-soft); }

/* ---------- Diseños ---------- */
.designs { background: var(--paper); }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.rail-arrows { display: none; gap: .5rem; }
.rail-arrows button {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, opacity 200ms ease, transform 160ms var(--ease-out);
}
.rail-arrows button:active:not(:disabled) { transform: scale(0.95); }
.rail-arrows svg { width: 22px; height: 22px; }
#railPrev svg { transform: rotate(180deg); }
.rail-arrows button:disabled { opacity: .3; cursor: default; }
@media (hover: hover) and (pointer: fine) { .rail-arrows button:hover:not(:disabled) { background: var(--ink); color: var(--paper); } }

.rail {
  display: grid; grid-auto-flow: column;
  /* El sello, su nombre y su nota caben en pantalla, sin quedar bajo la barra de compra. */
  --stamp-fit: calc((100svh - 340px) * 0.4621 + 22px);
  grid-auto-columns: max(180px, min(60vw, 270px, var(--stamp-fit)));
  gap: 20px;
  margin-top: 2.5rem;
  --rail-pad: max(var(--gutter), calc((100% - 1280px) / 2 + 16px));
  padding: 10px var(--gutter-r) 1.5rem var(--rail-pad);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rail-pad);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline-offset: -2px; }

.design { scroll-snap-align: start; display: grid; gap: .9rem; align-content: start; min-width: 0; }
.design .stamp { padding: 11px; text-decoration: none; transition: translate 240ms var(--ease-out), rotate 240ms var(--ease-out); }
.design .stamp-art { aspect-ratio: 390 / 844; }
.design .stamp-art img { transition: scale 600ms var(--ease-out); }
.design { filter: drop-shadow(0 1px 1px rgba(27, 38, 80, .12)) drop-shadow(0 12px 16px rgba(27, 38, 80, .12)); }
.stamp-no {
  position: absolute; left: 20px; top: 20px;
  padding: .1rem .4rem; background: rgba(251, 247, 244, .92);
  font-size: .75rem; font-weight: 700; color: var(--ink);
}
.stamp-open {
  position: absolute; left: 20px; bottom: 20px;
  display: inline-flex; align-items: center; min-height: 34px;
  padding: .35rem .8rem; border-radius: 99px;
  background: var(--ink); color: var(--paper);
  font-size: .8125rem; font-weight: 600;
}
.stamp-overlay {
  position: absolute; inset: auto 0 24% 0;
  display: grid; justify-items: center; gap: .3rem;
  color: #3d3a35; text-align: center; pointer-events: none;
}
.stamp-overlay b { font: 400 1.3rem/1 var(--display); }
.stamp-overlay small { font-size: .625rem; letter-spacing: .2em; }
.design-meta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-inline: 4px; }
.design-meta h3 { font: 400 1.4rem/1.1 var(--display); min-width: 0; }
@media (hover: hover) and (pointer: fine) {
  .design .stamp:hover { translate: 0 -4px; rotate: -0.8deg; }
  .design .stamp:hover img { scale: 1.03; }
}

.design-end { filter: none; }
.end-card {
  display: grid; gap: .8rem; align-content: center;
  height: 100%; min-height: 420px;
  padding: 1.75rem 1.5rem;
  border: 1.5px dashed var(--ink-soft); border-radius: 6px;
}
.end-card h3 { font: 400 1.6rem/1.1 var(--display); }
.end-card p { color: var(--ink-soft); font-size: .9375rem; }
.end-card hr { width: 100%; border: 0; border-top: 1.5px dashed var(--line); margin: .5rem 0; }
.end-card .btn { justify-self: start; }

.rail-foot { display: flex; align-items: center; gap: 1rem; margin-top: .25rem; }
.meter { flex: 1; height: 2px; background: var(--line); overflow: hidden; }
.meter span { display: block; height: 100%; width: 7%; background: var(--ink); }
#railPosition { font-size: .875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Cómo funciona ---------- */
.how { background: var(--envelope-soft); }
@keyframes stamp-in { 0% { opacity: 0; scale: 1.3; } 60% { opacity: 1; scale: .96; } 100% { opacity: 1; scale: 1; } }
@keyframes rise { from { opacity: 0; translate: 0 10px; } }

/* ---------- App incluida ---------- */
.app { background: var(--ink); color: var(--on-ink); }
.app .head p { color: var(--on-ink-soft); }
/* La app, función a función: cada ficha lleva una captura real de GUEST */
.app .rail-arrows button { border-color: var(--on-ink); color: var(--on-ink); }
@media (hover: hover) and (pointer: fine) { .app .rail-arrows button:hover:not(:disabled) { background: var(--on-ink); color: var(--ink); } }
#appPrev svg { transform: rotate(180deg); }
/* Índice: lo que hace distinta a la app, de un vistazo y a un toque de cada ficha */
.features-index {
  position: relative; display: flex; gap: .5rem; margin-top: 1.75rem; overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter)); padding: .25rem var(--gutter-r) .25rem var(--gutter);
  mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
}
.features-index::-webkit-scrollbar { display: none; }
.features-chip {
  flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: .45rem .95rem; border-radius: 99px;
  border: 1px solid rgba(244, 239, 233, .28); color: var(--on-ink); text-decoration: none;
  font: 600 .875rem/1 var(--text); -webkit-tap-highlight-color: transparent;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 160ms var(--ease-out);
}
.features-chip:active { transform: scale(0.97); }
.features-chip[aria-current] { background: var(--on-ink); border-color: var(--on-ink); color: var(--ink); }
.features-chip:focus-visible { outline: 2px solid var(--envelope); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .features-chip:hover:not([aria-current]) { border-color: var(--on-ink); } }
@media (min-width: 760px) {
  .features-index { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 0; mask-image: none; }
}
.features {
  --rail-pad: max(var(--gutter), calc((100% - 1280px) / 2 + 16px));
  list-style: none; margin: 1.5rem 0 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(82vw, 330px); gap: 16px;
  padding: 4px var(--gutter-r) 1rem var(--rail-pad); scroll-padding-inline: var(--rail-pad);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
.features::-webkit-scrollbar { display: none; }
.features:focus-visible { outline: 2px solid var(--on-ink); outline-offset: -2px; }
.feature {
  scroll-snap-align: start; min-width: 0;
  display: grid; grid-template-rows: auto 1fr; gap: 1.25rem;
  padding: 12px 12px 1.4rem; border-radius: 24px;
  background: rgba(244, 239, 233, .06); box-shadow: inset 0 0 0 1px rgba(244, 239, 233, .12);
}
.feature-phone { position: relative; padding: 8px; border-radius: 30px; background: #0c1230; box-shadow: 0 24px 40px -26px rgba(0, 0, 0, .8); }
.feature .phone-screen {
  --screen: #fbf6f3;
  position: relative; aspect-ratio: 5 / 7; border-radius: 23px; overflow: hidden;
  background: var(--screen);
}
.phone-screen img, .phone-screen video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* La captura sigue más abajo en la app: se funde en lugar de cortarse en seco */
.feature .phone-screen::after {
  content: ""; position: absolute; inset: auto 0 0; height: 11%; pointer-events: none;
  background: linear-gradient(to bottom, rgba(251, 246, 243, 0), var(--screen));
}
.feature .phone-screen.is-video::after { content: none; }
/* Para los dos: la misma boda en dos móviles. El hueco invisible iguala la altura a las demás fichas. */
.feature-pair { position: relative; }
.pair-spacer { visibility: hidden; box-shadow: none; }
.pair-phone { position: absolute; width: 64%; margin: 0; }
.pair-phone:first-of-type { left: 0; top: 0; rotate: -3deg; }
.pair-phone:last-of-type { right: 0; bottom: 26px; rotate: 3deg; }
.pair-phone .feature-phone { padding: 6px; border-radius: 22px; }
.pair-phone .phone-screen { border-radius: 17px; }
.pair-phone figcaption { position: absolute; top: calc(100% + 8px); display: grid; gap: 2px; white-space: nowrap; font-size: .8125rem; line-height: 1.2; color: var(--on-ink-soft); }
.pair-phone:last-of-type figcaption { justify-items: end; }
.pair-phone figcaption b { font-weight: 700; color: var(--on-ink); }
.pair-phone:last-of-type figcaption { right: 4px; }
.pair-phone:first-of-type figcaption { left: 4px; }
.pair-sync {
  position: absolute; left: 22%; top: 86%; translate: -50% -50%;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--envelope); color: var(--ink); box-shadow: 0 0 0 4px var(--ink);
}
.pair-sync svg { width: 22px; height: 22px; }
.feature-sheet {
  position: absolute; z-index: 3; right: -4px; bottom: -12px; width: 58%; padding: 0; border: 0;
  background: var(--white); border-radius: 3px; rotate: 4deg; transform-origin: bottom right; cursor: zoom-in;
  box-shadow: 0 1px 0 rgba(27, 38, 80, .06), 0 18px 30px -12px rgba(0, 0, 0, .55);
  transition: scale 160ms var(--ease-out);
}
.feature-sheet:active { scale: .98; }
.feature-sheet img { display: block; width: 100%; height: auto; border-radius: 3px; }
.feature-sheet:focus-visible { outline: 2px solid var(--envelope); outline-offset: 3px; }
/* Ampliar: toda la pantalla es pulsable; el chip de la esquina lo indica */
.feature .phone-screen::after { z-index: 1; }
.phone-zoom {
  position: absolute; inset: 0; z-index: 2; padding: 0; border: 0; border-radius: inherit;
  background: transparent; cursor: zoom-in;
}
.phone-zoom:focus-visible { outline: 2px solid var(--envelope); outline-offset: -3px; }
.zoom-chip {
  position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: rgba(27, 38, 80, .72); color: var(--on-ink);
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5); transition: scale 160ms var(--ease-out);
}
.zoom-chip svg { width: 16px; height: 16px; }
.phone-zoom:active .zoom-chip { scale: .92; }
@media (hover: hover) and (pointer: fine) { .phone-zoom:hover .zoom-chip { background: var(--ink); } }

/* Captura ampliada */
html.has-dialog { overflow: hidden; }
.shot-dialog { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; }
.shot-dialog[open] { display: grid; place-items: center; }
.shot-dialog::backdrop { background: rgba(19, 27, 59, .88); backdrop-filter: blur(4px); }
.shot-panel {
  display: grid; justify-items: center; gap: 14px;
  padding: max(16px, env(safe-area-inset-top, 0px)) var(--gutter-r) max(16px, env(safe-area-inset-bottom, 0px)) var(--gutter);
}
.shot-dialog[open] .shot-panel { animation: shot-in 220ms var(--ease-out) both; }
@keyframes shot-in { from { opacity: 0; scale: .96; } }
.shot-stage > img, .shot-stage > video {
  display: block; width: auto; height: min(80svh, calc((100vw - 48px) * 1.4)); max-width: calc(100vw - 48px);
  aspect-ratio: 5 / 7; object-fit: cover; object-position: top; border-radius: 22px; background: #fbf6f3;
  box-shadow: 0 0 0 8px #0c1230, 0 30px 60px -20px rgba(0, 0, 0, .7);
}
.shot-stage > img.is-sheet { width: min(calc(100vw - 32px), 760px); height: auto; aspect-ratio: auto; border-radius: 4px; background: var(--white); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); }
/* En el móvil la captura ampliada ocupa todo el ancho, sin marco, para ganar tamaño de lectura */
@media (max-width: 759.98px) {
  .shot-panel { padding-inline: 8px; }
  .shot-stage > img:not(.is-sheet), .shot-stage > video { width: calc(100vw - 16px); max-width: none; height: auto; max-height: calc(100svh - 96px); border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); }
  .shot-stage > img.is-sheet { width: calc(100vw - 16px); }
}
.shot-bar { display: flex; align-items: center; gap: 1rem; color: var(--on-ink); }
.shot-caption { font: 400 1.25rem/1.15 var(--display); }
.shot-close {
  min-height: 44px; padding: 0 1.2rem; border: 1.5px solid var(--on-ink); border-radius: 99px;
  background: transparent; color: var(--on-ink); font: 600 .9375rem/1 var(--text); cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, scale 160ms var(--ease-out);
}
.shot-close:active { scale: .97; }
@media (hover: hover) and (pointer: fine) { .shot-close:hover { background: var(--on-ink); color: var(--ink); } }
.feature-text { display: grid; gap: .55rem; align-content: start; padding-inline: 6px; min-width: 0; }
.feature-text h3 { margin: 0; font: 400 1.6rem/1.1 var(--display); color: var(--on-ink); text-wrap: balance; }
.feature-text p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--on-ink-soft); }
.feature-points { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .45rem; }
.feature-points li { display: flex; gap: .55rem; font-size: .9375rem; line-height: 1.4; color: var(--on-ink); }
.feature-points svg { width: 16px; height: 16px; flex: none; margin-top: .15rem; color: var(--envelope); }
.features-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; margin-top: 1rem; }
.features-count { font-size: .875rem; color: var(--on-ink-soft); font-variant-numeric: tabular-nums; }
.features-foot .note { margin: 0; }
.app .note { color: var(--on-ink-soft); }

/* ---------- Precio ---------- */
.pricing { background: var(--envelope); }
.price-grid { display: grid; gap: 2.5rem; align-items: start; }
.price-card {
  display: grid; gap: 1.2rem;
  padding: clamp(1.5rem, 4vw, 2.4rem);
  background: var(--paper);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.price-top { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.price-label { font-size: .875rem; font-weight: 700; color: var(--postmark); }
.price-amount { display: grid; gap: .2rem; margin-top: .3rem; }
.price-amount strong { font: 400 clamp(3.2rem, 7vw, 4.4rem)/.95 var(--display); font-variant-numeric: tabular-nums; }
.price-amount span { font-size: .9375rem; color: var(--ink-soft); }
.stamp-mini { --hole: 3px; --step: 9px; width: 70px; padding: 7px; rotate: 6deg; flex: none; }
.stamp-mini .stamp-art { aspect-ratio: 390 / 844; }
.includes { display: grid; gap: .75rem; padding-top: 1.2rem; border-top: 1.5px dashed var(--line); }
.includes-label { font-size: .875rem; font-weight: 700; color: var(--ink); }
.includes .checks + .includes-label { margin-top: .6rem; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.checks li { display: flex; gap: .65rem; font-size: .96875rem; line-height: 1.45; }
.checks svg { width: 16px; height: 16px; flex: none; margin-top: .22rem; color: var(--postmark); }
.guarantee { display: flex; gap: .8rem; align-items: center; font-size: .875rem; line-height: 1.5; color: var(--ink-soft); }
.guarantee strong { color: var(--ink); }
.guarantee-seal {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--postmark); box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--postmark);
  color: var(--postmark); font: 700 .625rem/1 var(--mono); letter-spacing: -.02em; rotate: -10deg;
}
/* Selector de diseño: lo elegido aquí viaja con la compra */
.pick { display: grid; gap: .6rem; padding-top: 1.2rem; border-top: 1.5px dashed var(--line); }
.pick-label { font-size: .875rem; font-weight: 700; color: var(--ink); }
.pick-row {
  --pad: clamp(1.5rem, 4vw, 2.4rem);
  position: relative; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(-1 * var(--pad)); padding: 2px var(--pad); scroll-padding-inline: var(--pad);
  mask-image: linear-gradient(90deg, transparent, #000 var(--pad), #000 calc(100% - var(--pad)), transparent);
}
.pick-row::-webkit-scrollbar { display: none; }
.pick-chip {
  flex: none; min-height: 40px; padding: .45rem .95rem; border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); background: transparent; color: var(--ink);
  font: 600 .875rem/1 var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 160ms var(--ease-out);
}
.pick-chip:active { transform: scale(0.97); }
.pick-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .pick-chip:hover:not([aria-pressed="true"]) { border-color: var(--ink); } }
#pickCover { transition: opacity 160ms ease; }
#pickCover.is-swapping { opacity: 0; }
@media (min-width: 760px) {
  .pick-row { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 0; mask-image: none; }
  .pick-chip { min-height: 34px; padding: .4rem .8rem; font-size: .8125rem; }
}

.custom-card {
  display: grid; gap: 1rem;
  padding: clamp(1.5rem, 4vw, 2.2rem);
  border: 1.5px dashed var(--ink); border-radius: 4px;
}
.custom-card h3 { font: 400 clamp(1.6rem, 1.6vw + 1rem, 2rem)/1.1 var(--display); }
.custom-card > p { color: var(--ink-soft); }
.custom-price { display: grid; gap: .2rem; }
.custom-price strong { font: 400 2.4rem/1 var(--display); }
.custom-price span { font: 500 .9375rem/1.3 var(--text); }

/* ---------- Preguntas ---------- */
.faq { background: var(--paper); }
.faq-grid { display: grid; gap: 2.5rem; }
.faq-list details { border-bottom: 1.5px dashed var(--line); }
.faq-list details:first-child { border-top: 1.5px dashed var(--line); }
.faq-list summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 1.2rem 2.5rem 1.2rem 0;
  font-weight: 600; font-size: 1.0625rem;
  transition: color 200ms ease;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before, .faq-list summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 16px; height: 2px; background: var(--postmark);
  transition: transform 220ms var(--ease-out);
}
.faq-list summary::after { transform: rotate(90deg); }
.faq-list details[open] summary::after { transform: rotate(0); }
.faq-list details p { padding: 0 2.5rem 1.4rem 0; color: var(--ink-soft); max-width: 62ch; }
@media (hover: hover) and (pointer: fine) { .faq-list summary:hover { color: var(--postmark); } }

/* ---------- Cierre ---------- */
.closing { background: var(--envelope); padding-block: 3rem var(--section); overflow: hidden; }
.marquee { overflow: hidden; padding-block: 12px; }
.marquee-track { display: flex; gap: 14px; width: max-content; animation: marquee 70s linear infinite; }
.stamp-strip { --hole: 3px; --step: 9px; width: 100px; padding: 7px; flex: none; }
.stamp-strip:nth-child(odd) { rotate: -2deg; }
.stamp-strip:nth-child(even) { rotate: 1.5deg; }
.stamp-strip .stamp-art { aspect-ratio: 390 / 844; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (hover: hover) and (pointer: fine) { .marquee:hover .marquee-track { animation-play-state: paused; } }
.closing-copy { display: grid; justify-items: start; gap: 2rem; padding-top: 3rem; }
.closing h2 { font: 400 clamp(2.4rem, 4vw + 1rem, 4.2rem)/1 var(--display); max-width: 14ch; }
.closing-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Pie ---------- */
.footer { background: var(--ink-deep); color: var(--on-ink-soft); padding-block: 3rem calc(6.5rem + env(safe-area-inset-bottom, 0px)); }
.footer .logo { color: var(--on-ink); }
.footer-grid { display: grid; gap: 1.6rem; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.footer-links a { text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.footer-links a:hover { color: var(--on-ink); text-decoration: underline; }
.footer-ico { width: 1.05em; height: 1.05em; margin-right: .55em; flex: none; }
.footer-copy { font-size: .8125rem; }
.footer-legal { display: flex; flex-wrap: wrap; column-gap: 1.25rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.14); }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; text-decoration: none; }
.footer-legal a:hover { color: var(--on-ink); text-decoration: underline; }

/* ---------- Barra de compra (móvil) y WhatsApp ---------- */
.buybar {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem var(--gutter-r) calc(.7rem + env(safe-area-inset-bottom, 0px)) var(--gutter);
  background: var(--paper);
  box-shadow: 0 -12px 30px -18px rgba(27, 38, 80, .5);
  transform: translateY(110%);
  transition: transform 300ms var(--ease-out);
}
.buybar.is-visible { transform: none; }
.buybar p { display: grid; line-height: 1.1; }
.buybar strong { font: 400 1.4rem/1 var(--display); }
.buybar span { font: 500 .875rem/1.2 var(--text); color: var(--ink-soft); }

.wa-float {
  position: fixed; z-index: 41;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  box-shadow: 0 10px 24px -10px rgba(27, 38, 80, .55), inset 0 0 0 1px rgba(251, 247, 244, .12);
  opacity: 0; transform: scale(.9); pointer-events: none;
  transition: opacity 200ms ease, transform 200ms var(--ease-out);
}
.wa-float:active { transform: scale(.95); }
.wa-float svg { width: 28px; height: 28px; }
body.past-hero .wa-float { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 759.98px) { body.past-hero .wa-float { opacity: 0; transform: scale(.9); pointer-events: none; } }

/* ---------- Entrada de la portada ---------- */
@keyframes settle { from { opacity: 0; translate: 0 14px; scale: .98; } }
@keyframes postmark-in { 0% { opacity: 0; scale: 1.25; } 60% { opacity: .9; scale: .97; } 100% { opacity: .85; scale: 1; } }
.hero-copy > * { animation: rise 420ms var(--ease-out) both; }
.hero-copy > :nth-child(2) { animation-delay: 60ms; }
.hero-copy > :nth-child(3) { animation-delay: 120ms; }
.hero-copy > :nth-child(4) { animation-delay: 180ms; }
.envelope { animation: settle 520ms var(--ease-out) both 160ms; }
.postmark { animation: postmark-in 340ms var(--ease-out) both 780ms; }

@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .envelope, .postmark { animation: fade 200ms ease both !important; }
  .shot-dialog[open] .shot-panel { animation: fade 200ms ease both; }
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
}
@keyframes fade { from { opacity: 0; } }

/* ---------- Tableta ---------- */
@media (min-width: 760px) {
  .header-cta { display: inline-flex; }
  .promises { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .promises li { border-top: 0; padding: .25rem 2rem; border-left: 1.5px dashed color-mix(in srgb, var(--ink) 24%, transparent); }
  .promises li:first-child { border-left: 0; padding-left: 0; }
  .rail-arrows { display: flex; }
  .rail { --stamp-fit: calc((100svh - 250px) * 0.4621 + 22px); grid-auto-columns: max(200px, min(270px, var(--stamp-fit))); gap: 28px; }
  .price-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .price-grid .head { grid-column: 1 / -1; }
  .faq-grid { grid-template-columns: .8fr 1.2fr; gap: 3rem; }
  .faq-grid .head { align-self: start; position: sticky; top: 100px; }
  .footer-grid { grid-template-columns: 1fr auto; align-items: start; }
  .footer-copy, .footer-legal { grid-column: 1 / -1; }
  .buybar { display: none; }
  .footer { padding-bottom: 3rem; }
  .stamp-strip { width: 120px; }
}

/* ---------- Escritorio ---------- */
@media (min-width: 1100px) {
  .nav { display: flex; }
  .header-cta { margin-left: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 4rem; padding-top: 2.5rem; min-height: calc(100dvh - 68px - 9rem); }
  .envelope { padding: 2rem 2rem 2.2rem; }
  .price-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, .9fr); gap: 2.5rem; }
  .price-grid .head { grid-column: auto; padding-top: 1rem; }
  .custom-card { margin-top: 4rem; }
}

/* =========================================================
   Ronda 3: sellos en movimiento, apertura y cierre, visor
   ========================================================= */
[hidden] { display: none !important; }
.btn-paper { background: var(--paper); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn-paper:hover { background: var(--white); } }

/* Sello como botón: abre la invitación en el visor */
button.stamp { width: 100%; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.design .stamp:active { translate: 0 1px; }
.design-meta { align-items: baseline; }
.design-buy {
  flex: none; display: inline-flex; align-items: center; min-height: 44px;
  font: 700 .9375rem/1 var(--mono); color: var(--postmark);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em;
}
.design-note { padding-inline: 4px; margin-top: -.45rem; font-size: .9375rem; line-height: 1.45; color: var(--ink-soft); }
.rail-soon { font-size: .875rem; white-space: nowrap; }

/* Apertura y cierre */
.moments { background: var(--ink-deep); color: var(--on-ink); overflow: hidden; }
.moments .head p { color: var(--on-ink-soft); }
.moments .head .btn { justify-self: start; margin-top: .5rem; }
.moments .btn-ink { background: var(--paper); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .moments .btn-ink:hover { background: var(--white); } }
.moments-grid { display: grid; gap: 3rem; }
.moments-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; max-width: 620px; }
.moment { margin: 0; display: grid; gap: .9rem; min-width: 0; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .35)); }
.moment .stamp { padding: 9px; rotate: -1.5deg; }
.moment-close { margin-top: 3rem; }
.moment-close .stamp { rotate: 1.5deg; }
.moment .stamp-art { aspect-ratio: 390 / 844; }
.moment figcaption { font-size: .9375rem; font-weight: 700; color: var(--on-ink); }

/* Visor */
body.viewer-open { overflow: hidden; }
.viewer {
  position: fixed; inset: 0; z-index: 100;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--ink-deep); color: var(--on-ink);
  padding-top: env(safe-area-inset-top, 0px);
  opacity: 0; transition: opacity 220ms var(--ease-out);
}
.viewer.is-open { opacity: 1; }
.viewer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 52px; padding: .2rem var(--gutter-r) .2rem var(--gutter);
}
.viewer-title { display: flex; align-items: baseline; gap: .7rem; min-width: 0; }
.viewer-title .mono { font-size: .875rem; color: var(--on-ink-soft); }
.viewer-title b { font: 400 1.35rem/1 var(--display); }
.viewer-close, .viewer-nav, .viewer-dock button {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid rgba(244, 239, 233, .35); background: transparent; color: var(--on-ink);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color 200ms ease, transform 160ms var(--ease-out);
}
.viewer-close svg, .viewer-nav svg, .viewer-dock button svg { width: 20px; height: 20px; }
.viewer-close:active, .viewer-nav:active, .viewer-dock button:active { transform: scale(0.94); }
.viewer-prev svg, #viewerPrevM svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .viewer-close:hover, .viewer-nav:hover { border-color: var(--on-ink); } }
.viewer-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 4px var(--gutter-r) 8px var(--gutter); }
/* El tamaño exacto lo calcula main.js: un móvil de 390 px de ancho, escalado para que se vea entero */
.viewer-device {
  position: relative; overflow: hidden;
  width: 300px; height: 600px;
  border-radius: 22px;
  background: var(--ink);
  box-shadow: 0 0 0 6px #232c55, 0 30px 60px -24px rgba(0, 0, 0, .7);
  translate: 0 10px; transition: translate 300ms var(--ease-out);
}
.viewer.is-open .viewer-device { translate: 0 0; }
.viewer-device iframe {
  position: absolute; left: 0; top: 0;
  width: 390px; height: 844px; max-width: none;
  border: 0; background: var(--ink);
  transform-origin: 0 0;
  opacity: 0; transition: opacity 240ms ease;
}
.viewer-device.is-loaded iframe { opacity: 1; }
.viewer-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.viewer-nav, .viewer-info { display: none; }
.viewer-dock {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  padding: .35rem var(--gutter-r) calc(.6rem + env(safe-area-inset-bottom, 0px)) var(--gutter);
}
.viewer-dock .btn { flex: 1; max-width: 220px; }

@media (prefers-reduced-motion: reduce) { .viewer-device { translate: none; } }

@media (min-width: 760px) {
  .moments-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 4rem; }
  .moments-pair { gap: 28px; }
}
@media (min-width: 1100px) {
  .viewer-stage { grid-template-columns: 1fr auto 1fr; gap: 2.5rem; padding-bottom: 2rem; }
  .viewer-nav { display: grid; width: 52px; height: 52px; }
  .viewer-prev { justify-self: end; }
  .viewer-next { justify-self: start; }
  .viewer-info { display: grid; gap: 1rem; position: absolute; right: calc(var(--gutter-r) + 1rem); top: 50%; translate: 0 -50%; width: 250px; }
  .viewer-info .mono { color: var(--on-ink-soft); font-size: .875rem; }
  .viewer-info h2 { font: 400 2.8rem/1 var(--display); }
  .viewer-info p:not(.mono) { color: var(--on-ink-soft); }
  .viewer-dock { display: none; }
}
@media (min-width: 1100px) and (max-width: 1379.98px) { .viewer-info { display: none; } }

/* Móvil: un sello protagonista en el centro; los vecinos asoman más pequeños y apagados. */
@media (max-width: 759.98px) {
  .rail {
    --stamp-fit: calc((100svh - 240px) * 0.4621 + 22px);
    --col: max(190px, min(66vw, 270px, var(--stamp-fit)));
    grid-auto-columns: var(--col);
    gap: 10px;
    padding-inline: calc((100vw - var(--col)) / 2);
    scroll-padding-inline: 0;
  }
  .rail .design { scroll-snap-align: center; transition: scale 360ms var(--ease-out), opacity 360ms var(--ease-out); }
  .rail.has-focus .design:not(.is-active) { scale: .84; opacity: .45; }
  .rail .design-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (max-width: 759.98px) and (prefers-reduced-motion: reduce) { .rail .design { transition: none; } }

/* Selector de diseños en apertura y cierre */
.moments-picker {
  display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter)); padding: .25rem var(--gutter-r) .25rem var(--gutter);
  scroll-padding-inline: var(--gutter);
  mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
}
.moments-picker::-webkit-scrollbar { display: none; }
.moments-chip {
  flex: none; min-height: 40px; padding: .45rem .95rem; border-radius: 99px;
  border: 1px solid rgba(244, 239, 233, .28); background: transparent; color: var(--on-ink);
  font: 600 .875rem/1 var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 160ms var(--ease-out);
}
.moments-chip:active { transform: scale(0.97); }
.moments-chip[aria-pressed="true"] { background: var(--on-ink); border-color: var(--on-ink); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .moments-chip:hover:not([aria-pressed="true"]) { border-color: var(--on-ink); } }
@media (min-width: 760px) {
  .moments-picker { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 0; mask-image: none; }
}
.moments-pair .stamp-art video { transition: opacity 180ms ease, filter 180ms ease; }
.moments-pair.is-swapping .stamp-art video { opacity: 0; filter: blur(4px); }
@media (prefers-reduced-motion: reduce) { .moments-pair .stamp-art video { transition: none; } }

/* Apertura y cierre: nombres junto a los sellos */
.moments-grid { grid-template-areas: "head" "picker" "pair" "cta"; row-gap: 1.25rem; }
.moments-grid > .head { grid-area: head; }
.moments-picker { grid-area: picker; }
.moments-pair { grid-area: pair; margin-top: 1rem; }
.moments-cta { grid-area: cta; margin-top: .75rem; }
@media (max-width: 759.98px) {
  .moments-picker {
    position: sticky; z-index: 2; background: var(--ink-deep);
    transform: translateZ(0); /* capa propia: evita restos de texto al repintar en Android */
    padding-block: .75rem; mask-image: none;
    box-shadow: 0 10px 14px -10px rgba(0, 0, 0, .5);
  }
  .moments-pair { max-width: calc(((100svh - 270px) * 0.4621 + 18px) * 2 + 14px); }
  .moment-close { margin-top: 1.75rem; }
}
@media (min-width: 760px) {
  .moments-grid { grid-template-areas: ". pair" "head pair" "picker pair" "cta pair" ". pair"; grid-template-rows: 1fr auto auto auto 1fr; row-gap: 1.5rem; }
  .moments-pair { margin-top: 0; align-self: center; max-width: min(620px, calc(((100svh - 260px) * 0.4621 + 18px) * 2 + 28px)); }
  .moments-cta { margin-top: 0; align-self: start; }
}

/* ---------- Cómo funciona: tira de sellos con matasellos ---------- */
.steps { position: relative; list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
.steps::before {
  content: ""; position: absolute; left: 39px; top: 20px; bottom: 20px; width: 2px;
  background: repeating-linear-gradient(180deg, var(--ink-soft) 0 6px, transparent 6px 12px); opacity: .35;
}
.step { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 1.1rem; align-items: start; align-content: start; }
.step-visual { position: relative; width: 80px; }
.stamp-step { padding: 7px; --hole: 3px; --step: 9px; filter: drop-shadow(0 6px 10px rgba(27, 38, 80, .14)); }
.stamp-step .stamp-art { aspect-ratio: 3 / 4; background: var(--paper); }
.stamp-step img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.step:nth-child(odd) .stamp-step { rotate: -2deg; }
.step:nth-child(even) .stamp-step { rotate: 1.5deg; }
.step-text { display: grid; gap: .3rem; padding-top: .2rem; min-width: 0; }
.step-no { font-size: .8125rem; font-weight: 700; color: var(--postmark); letter-spacing: .08em; }
.step-text h3 { font: 700 1.15rem/1.25 var(--text); letter-spacing: -.01em; text-wrap: balance; }
.step-text p { font-size: .9375rem; line-height: 1.5; color: var(--ink-soft); max-width: 34ch; }

/* Matasellos con el plazo, estampado sobre el sello */
.step-postmark {
  position: absolute; right: -12px; bottom: -14px;
  display: grid; place-content: center; justify-items: center; gap: 1px;
  width: 62px; height: 62px; border-radius: 50%;
  border: 2px solid var(--postmark); color: var(--postmark);
  background: color-mix(in srgb, var(--envelope-soft) 94%, transparent);
  box-shadow: inset 0 0 0 3px var(--envelope-soft), inset 0 0 0 4px var(--postmark), 0 2px 6px color-mix(in srgb, var(--ink) 14%, transparent);
  font-family: var(--mono); line-height: 1; text-align: center;
  rotate: -14deg;
}
.step-postmark b { font-size: .875rem; font-weight: 700; letter-spacing: -.04em; }
.step-postmark small { font-size: .5rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.step-postmark.is-range b { font-size: .75rem; letter-spacing: -.06em; }

/* Miniaturas: cuestionario, cambios y app */
.mini-form, .mini-app { display: grid; align-content: start; gap: 6px; padding: 10px 8px; }
.mini-form b { height: 7px; width: 70%; background: var(--ink); border-radius: 2px; margin-bottom: 3px; }
.mini-form i { height: 5px; border-radius: 3px; background: var(--line); }
.mini-form i:nth-of-type(2) { width: 82%; }
.mini-form i:nth-of-type(3) { width: 64%; }
.mini-form u { margin-top: 4px; width: 60%; height: 12px; border-radius: 99px; background: var(--ink); }
.mini-edit i:nth-of-type(2) { position: relative; }
.mini-edit i:nth-of-type(2)::after { content: ""; position: absolute; inset: 1px -3px auto; height: 2px; background: var(--postmark); rotate: -4deg; }
.mini-edit s {
  justify-self: end; margin-top: 2px; width: 14px; height: 8px;
  border-left: 2px solid var(--postmark); border-bottom: 2px solid var(--postmark); rotate: -45deg;
}
.stamp-step .mini-app { background: var(--ink); gap: 7px; }
.mini-app b { height: 7px; width: 60%; border-radius: 2px; background: var(--on-ink); margin-bottom: 3px; }
.mini-app i { position: relative; height: 12px; border-radius: 3px; background: rgba(244, 239, 233, .14); }
.mini-app i::after { content: ""; position: absolute; right: 3px; top: 3px; width: 14px; height: 6px; border-radius: 99px; background: var(--envelope); }
.mini-app i:nth-of-type(3)::after { background: rgba(244, 239, 233, .35); }

/* Entrada: el sello se asienta y el matasellos se estampa */
.steps .step-visual > .stamp, .steps .step-text { transition: opacity 360ms var(--ease-out), translate 360ms var(--ease-out); }
.steps .step:not(.is-in) .step-visual > .stamp, .steps .step:not(.is-in) .step-text { opacity: 0; translate: 0 10px; }
.steps .step:not(.is-in) .step-postmark { opacity: 0; }
.steps .step.is-in .step-postmark { animation: stamp-in 320ms var(--ease-out) 220ms both; }

@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.75rem; margin-top: 3.5rem; }
  .steps::before { left: 6%; right: 6%; top: 76px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(90deg, var(--ink-soft) 0 6px, transparent 6px 12px); }
  .step { grid-template-columns: 1fr; gap: 1.25rem; }
  .step-visual { width: 116px; }
  .step-postmark { width: 72px; height: 72px; right: -34px; bottom: auto; top: -16px; }
  .step-postmark b { font-size: 1rem; }
  .step-postmark.is-range b { font-size: .875rem; }
  .step-postmark small { font-size: .5625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .steps .step-visual > .stamp, .steps .step-text { transition: none; }
  .steps .step:not(.is-in) .step-visual > .stamp, .steps .step:not(.is-in) .step-text, .steps .step:not(.is-in) .step-postmark { opacity: 1; translate: none; }
  .steps .step.is-in .step-postmark { animation: none; }
}