/* ---------- tipografías (autoalojadas, subconjunto latino: sin peticiones a terceros) ---------- */
@font-face { font-family:"EB Garamond"; font-style:normal; font-weight:400 800; font-display:swap; src:url("/static/fonts/eb-garamond.woff2") format("woff2"); }
@font-face { font-family:"EB Garamond"; font-style:italic; font-weight:400 800; font-display:swap; src:url("/static/fonts/eb-garamond-italic.woff2") format("woff2"); }
@font-face { font-family:"Figtree"; font-style:normal; font-weight:300 900; font-display:swap; src:url("/static/fonts/figtree.woff2") format("woff2"); }

/* ---------- tokens ---------- */
/* Un solo tema: negro cálido, con texto marfil y detalles champán. Ningún token lleva azul: los grises son
   neutros o tiran a cálido. Los nombres dicen el papel de cada color, no el color. */
:root {
  color-scheme:dark;
  /* el papel de la página. "deep" para bandas y fondos de apoyo; "surface" para lo que va montado encima;
     "mat" es el paspartú de una copia y "field" el fondo de su ventana cuando aún no hay imagen */
  --bg:#0a0a0a; --bg-deep:#111111; --surface:#181818; --mat:#181818; --field:#111111;
  /* "control-line" es el borde de campos y zonas de formulario: el único filete que necesita 3:1 */
  --line:#262522; --line-strong:#3b3934; --control-line:#7a756a;
  --ink:#f3eee2; --ink-soft:#c9c5bb; --muted:#9c978c;
  /* acción: botones y todo lo interactivo/funcional (foco, selección, progreso) */
  --action:#f3eee2; --action-hover:#e3d8be; --on-action:#0a0a0a; --action-tint:#25231e; --focus:#d8c48e;
  /* champán: el único acento. Filetes, leyendas y precios; la variante "ink" es la que se usa en texto
     e iconos para que mantenga contraste accesible sobre el fondo */
  --accent:#b89b5e; --accent-ink:#d3ba80; --accent-tint:#2a261c;
  --bad:#ec9a92;
  --stage:#050505;
  --shadow:0 0 0;
  --shadow-sm:0 1px 2px rgb(var(--shadow) / .3), 0 4px 14px rgb(var(--shadow) / .28);
  --shadow-lg:0 2px 4px rgb(var(--shadow) / .3), 0 24px 60px -12px rgb(var(--shadow) / .7);
  --shadow-print:0 1px 2px rgb(var(--shadow) / .4), 0 22px 44px -22px rgb(var(--shadow) / .8);
  /* grano de papel casi imperceptible: un ruido SVG incrustado aquí mismo, sin fichero de imagen */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .93 0 0 0 0 .89 0 0 0 .2 -.082'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --serif:"EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --sans:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* esquinas: botones en píldora, copias (fotos, vídeos) casi rectas, paneles y campos suaves */
  --r-print:3px; --r-lg:22px; --r-md:14px;
  /* movimiento: lento y sin rebote. "out" para lo que aparece, "move" para lo que cambia de tamaño en pantalla */
  --ease-out:cubic-bezier(.16, 1, .3, 1); --ease-move:cubic-bezier(.32, .72, 0, 1);
  --wrap:1120px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scrollbar-color:var(--control-line) var(--bg); }
body { margin:0; font:400 1rem/1.6 var(--sans); color:var(--ink); background:var(--grain) var(--bg); -webkit-font-smoothing:antialiased; caret-color:var(--action); }
::selection { color:var(--on-action); background:var(--action); }
[hidden] { display:none !important; }
img, svg { display:block; max-width:100%; }
svg.i { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
h1, h2, h3 { font-family:var(--serif); font-weight:500; line-height:1.12; letter-spacing:-.012em; margin:0; text-wrap:balance; }
p { margin:0; }
a { color:var(--accent-ink); text-underline-offset:.18em; }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; border-radius:6px; }
.wrap { width:min(100% - 2rem, var(--wrap)); margin-inline:auto; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
em { font-style:italic; color:var(--accent-ink); }

/* ---------- botones ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.95rem 1.7rem; font:600 1rem/1 var(--sans); color:var(--on-action); background:var(--action); border:0; border-radius:999px; text-decoration:none; cursor:pointer; box-shadow:0 8px 20px -10px rgb(var(--shadow) / .5); transition:background .2s, color .2s, transform .16s ease-out, box-shadow .2s; }
.btn:hover { background:var(--action-hover); }
@media (hover:hover) and (pointer:fine) { .btn:hover { transform:translateY(-1px); } }
.btn:active { transform:scale(.98); }
.btn:disabled { opacity:.6; cursor:default; transform:none; }
.btn--lg { padding:1.15rem 2.2rem; font-size:1.05rem; }
/* secundario: mismo gesto que el principal, sin competir con él */
.btn--ghost { color:var(--action); background:transparent; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--action) 45%, transparent); }
.btn--ghost:hover { color:var(--on-action); background:var(--action); transform:none; }
.btn[hidden] { display:none; }

/* ---------- cabecera ---------- */
.site-header { padding:1.1rem 0; }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:inline-flex; align-items:center; gap:.65rem; font:500 1.55rem/1 var(--serif); color:var(--ink); text-decoration:none; }
.brand img { width:34px; height:34px; object-fit:contain; }
.nav { display:flex; align-items:center; gap:1.8rem; font-size:.95rem; }
.nav a:not(.btn) { color:var(--ink-soft); text-decoration:none; }
.nav a:not(.btn):hover { color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent); }
.nav .btn { padding:.7rem 1.25rem; font-size:.92rem; }
@media (max-width:640px) { .nav a:not(.btn) { display:none; } .brand { font-size:1.35rem; } .brand img { width:30px; height:30px; } }
.brand, .nav .btn { white-space:nowrap; }

/* ---------- aparición del texto ---------- */
/* El texto está siempre en el DOM y visible. El estado oculto de partida solo existe cuando el script de
   la cabecera ha marcado <html> con .js-reveal, y nunca con movimiento reducido. Al entrar en pantalla
   (una sola vez) se añade .is-in. Las palabras ya ocupan su sitio: no hay salto de maquetación. */
.reveal--words .w { display:inline-block; }
@media screen and (prefers-reduced-motion:no-preference) {
  /* titular: palabra a palabra, con un desenfoque breve */
  .js-reveal .reveal--words .w { opacity:0; transform:translateY(14px); filter:blur(5px); transition:opacity .65s var(--ease-out), transform .65s var(--ease-out), filter .65s var(--ease-out); transition-delay:calc(var(--i) * 80ms); }
  .js-reveal .reveal--words.is-in .w { opacity:1; transform:none; filter:none; }
  /* encabezados de sección: más sobrio, el bloque entero sube un poco */
  .js-reveal .reveal--soft > * { opacity:0; transform:translateY(10px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
  .js-reveal .reveal--soft > :nth-child(2) { transition-delay:.14s; }
  .js-reveal .reveal--soft.is-in > * { opacity:1; transform:none; }
}

/* ---------- hero ---------- */
/* El titular a la izquierda y, de la mitad de la pantalla al borde derecho, un panel apaisado donde los
   ejemplos se turnan: unos 5 s cada uno, con un fundido cruzado de .7 s. Un velo lo oscurece desde la
   izquierda, denso bajo el titular y casi transparente en su tercio derecho. Al pasar el ratón el velo se
   aclara, el panel se despliega un poco hacia la izquierda, aparece un filete champán y el texto se retira;
   el clic abre el visor. Por debajo de 1100 px el panel va a todo el ancho bajo el titular, sin velo.
   Sin JS es un enlace al formulario con el póster del primer ejemplo.
   Los cuatro vídeos son verticales o cuadrados: con object-fit:cover el recorte es arriba y abajo, y --fy
   dice qué altura del vídeo queda a la vista (las caras). */
.hero { container-type:inline-size; padding:0 0 clamp(2.5rem, 6vw, 4.5rem); --veil:10 10 10; }
.hero-band { position:relative; }
.hero-inner { padding-top:1.4rem; text-align:center; }
/* 10.4vw mantiene el titular en dos líneas también en un teléfono */
.hero h1 { max-width:21ch; margin-inline:auto; font-size:clamp(2rem, 10.4vw, 4.8rem); font-weight:400; line-height:1.04; letter-spacing:-.02em; }
.hero .lede { max-width:33rem; margin:1.5rem auto 0; font-size:clamp(1.05rem, .95rem + .45vw, 1.2rem); }
.hero-cta { display:flex; flex-direction:column; align-items:center; gap:.9rem; margin-top:1.8rem; }
.hero-cta small { font-size:.92rem; color:var(--ink-soft); }
.hero h1, .hero .lede, .hero-cta { transition:transform .5s var(--ease-out), opacity .5s var(--ease-out); }

/* el panel: en teléfono y tableta, a todo el ancho (.wrap deja 1rem a cada lado) */
.hero-show { margin:1.6rem -1rem 0; }
.hero-panel { position:relative; display:block; aspect-ratio:3 / 2; overflow:hidden; background:var(--field); isolation:isolate; -webkit-tap-highlight-color:transparent; }
.hero-panel:focus-visible { outline-offset:-3px; border-radius:0; }
.hero-panel video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% var(--fy, 50%); opacity:0; transition:opacity .7s ease; }
.hero-panel video.is-current { opacity:1; }
.hero-panel video[data-example="tribute-2"] { --fy:5%; }
.hero-panel video[data-example="example-wedding"] { --fy:21%; }
.hero-panel video[data-example="anniversary-2"] { --fy:26%; }
.hero-panel video[data-example="firstyear-2"] { --fy:17%; }
.hero-veil { position:absolute; inset:0; z-index:1; pointer-events:none; transition:box-shadow .45s var(--ease-out); }

/* las marcas: un filete fino por ejemplo, con el nombre de la ocasión; champán el que se ve */
.hero-marks { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0 .7rem; padding-inline:1rem; }
.hero-marks button { position:relative; min-height:44px; padding:.95rem 0 .3rem; font:500 .8rem/1.2 var(--sans); letter-spacing:.01em; text-align:left; color:var(--muted); background:none; border:0; cursor:pointer; transition:color .3s; }
.hero-marks button::before { content:""; position:absolute; top:.5rem; left:0; right:0; height:1px; background:var(--line-strong); transition:background .3s; }
.hero-marks button:hover, .hero-marks button[aria-pressed="true"] { color:var(--ink); }
.hero-marks button[aria-pressed="true"]::before { background:var(--accent); }
.hero-marks button:focus-visible { outline-offset:0; }

.trust { display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem 1.7rem; margin:2.2rem 0 0; padding:1.2rem 0 0; list-style:none; font-size:.92rem; color:var(--ink-soft); border-top:1px solid var(--line); }
.trust li { display:flex; align-items:center; gap:.5rem; }
.trust svg { width:18px; height:18px; color:var(--accent-ink); flex:none; }

@media (max-width:519px) {
  .hero-cta .btn { width:min(100%, 22rem); }
  .hero-marks { gap:0 .5rem; }
  .hero-marks button { font-size:.76rem; }
  .trust { justify-content:flex-start; }
}

/* escritorio: el panel, anclado a la derecha desde la mitad; el texto, a la izquierda y por encima */
@media (min-width:1100px) {
  .hero {
    --gutter:max(1rem, (100cqi - var(--wrap)) / 2);   /* el margen izquierdo de .wrap */
    --panel-h:clamp(380px, 32cqi, 74svh);                /* unos 460 px a 1440: entre 16:10 y 3:2 */
    --reach:7.5cqi;                                      /* lo que el titular entra en el panel */
  }
  .hero-band { min-height:calc(var(--panel-h) + 3.4rem); }
  .hero-inner { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; min-height:var(--panel-h); padding-block:1.5rem; text-align:left; }
  .hero h1, .hero .lede, .hero-cta { position:relative; z-index:1; }
  /* la primera línea («Bring the moments that») mide unas 8,65 veces el cuerpo: el cuerpo sale de lo que
     tiene que medir, desde el margen hasta --reach dentro del panel. Sin equilibrar, para que corte ahí */
  .hero h1 { max-width:calc(50cqi - var(--gutter) + var(--reach) + .6em); margin:0; font-size:clamp(3.5rem, (50cqi - var(--gutter) + var(--reach)) / 8.65, 5.8rem); text-wrap:wrap; }
  .hero .lede { max-width:min(33rem, 50cqi - var(--gutter) - 3rem); margin:1.4rem 0 0; }
  .hero-cta { align-items:flex-start; }

  .hero-show { position:absolute; top:0; left:50%; right:0; margin:0; }
  .hero-panel { aspect-ratio:auto; height:var(--panel-h); border-radius:var(--r-print) 0 0 var(--r-print); clip-path:inset(0 0 0 3%); transition:clip-path .5s var(--ease-move); }
  .hero-panel.is-live { cursor:pointer; }
  /* el velo: denso a la izquierda, bajo el titular, y casi transparente en el tercio derecho. El de reposo
     y el del ratón se funden entre sí (un degradado no se puede animar) */
  .hero-veil::before, .hero-veil::after { content:""; position:absolute; inset:0; transition:opacity .45s var(--ease-out); }
  .hero-veil::before { background:linear-gradient(90deg, rgb(var(--veil) / .95) 3%, rgb(var(--veil) / .84) 14%, rgb(var(--veil) / .6) 28%, rgb(var(--veil) / .32) 44%, rgb(var(--veil) / .14) 62%, rgb(var(--veil) / .08) 80%, rgb(var(--veil) / .06)); }
  .hero-veil::after { opacity:0; background:linear-gradient(90deg, rgb(var(--veil) / .88), rgb(var(--veil) / .62) 14%, rgb(var(--veil) / .3) 28%, rgb(var(--veil) / .08) 44%, transparent 62%); }
  .hero-marks { padding:.2rem var(--gutter) 0 3%; }
}
@media (min-width:1100px) and (hover:hover) and (pointer:fine) {
  .hero-panel:hover { clip-path:inset(0); }
  .hero-panel:hover .hero-veil { box-shadow:inset 1px 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
  .hero-panel:hover .hero-veil::before { opacity:0; }
  .hero-panel:hover .hero-veil::after { opacity:1; }
  .hero-band:has(.hero-panel:hover) :is(h1, .lede, .hero-cta) { transform:translateX(-16px); opacity:.84; }
}

/* ---------- visor ---------- */
/* Los cuatro ejemplos enteros, cada uno en un marco con su proporción, sobre un negro al 90 %. El marco cabe
   en unos 80 % de la pantalla y nunca pasa del tamaño natural del vídeo. Flechas fuera del marco, a los
   lados; en teléfono bajan junto a las marcas. Lo abre el clic en el panel del hero. */
.viewer { --arrow:48px; --side:max(var(--arrow) + 2rem, 10vw); --marks:5rem; --top:max(1.5rem, 10svh - var(--marks) / 2);
  --stage-w:calc(100vw - 2 * var(--side)); --stage-h:min(80svh, 100svh - var(--marks) - var(--top));
  position:fixed; inset:0 auto auto 0; width:100vw; height:100vh; max-width:none; max-height:none; margin:0; padding:var(--top) 0 0; color:var(--ink); background:transparent; border:0; overflow:hidden;
  grid-template-columns:var(--side) minmax(0, 1fr) var(--side); grid-template-rows:var(--stage-h) var(--marks); }
.viewer[open] { display:grid; }
.viewer::backdrop { background:transparent; }
/* la página no se desplaza detrás del visor, y no salta al desaparecer su barra */
:root:has(.viewer[open]) { overflow:hidden; scrollbar-gutter:stable; }
.viewer-bg { position:absolute; inset:0; z-index:-1; background:rgb(0 0 0 / .9); }
.viewer-stage { grid-area:1 / 2; display:grid; place-items:center; min-width:0; touch-action:pan-y; }
.viewer-frame { --h:min(var(--stage-h) - 14px, (var(--stage-w) - 14px) * var(--vh) / var(--vw), var(--vh) * 1px);
  grid-area:1 / 1; width:calc(var(--h) * var(--vw) / var(--vh)); height:var(--h); margin:0; outline:1px solid var(--accent); outline-offset:6px;
  visibility:hidden; opacity:0; transition:opacity .6s var(--ease-out), visibility 0s .6s; }
.viewer-frame.is-current { visibility:visible; opacity:1; transition:opacity .6s var(--ease-out), visibility 0s; }
.viewer-frame video { display:block; width:100%; height:100%; object-fit:contain; background:var(--field); }
/* las flechas, pegadas por fuera al marco que se ve: el script pone su tamaño natural en --cvw / --cvh y de
   ahí sale su ancho con la misma cuenta que el del marco */
.viewer { --fh:min(var(--stage-h) - 14px, (var(--stage-w) - 14px) * var(--cvh) / var(--cvw), var(--cvh) * 1px); --fw:calc(var(--fh) * var(--cvw) / var(--cvh)); }
.viewer-arrow { position:absolute; top:calc(var(--top) + var(--stage-h) / 2 - var(--arrow) / 2); transition:left .6s var(--ease-move), right .6s var(--ease-move), background .2s, color .2s, box-shadow .2s, transform .16s ease-out; }
.viewer-arrow--prev { right:calc(50% + var(--fw) / 2 + 7px + 1.4rem); }
.viewer-arrow--next { left:calc(50% + var(--fw) / 2 + 7px + 1.4rem); }
.viewer-arrow--prev svg { transform:scaleX(-1); }
.viewer-close { position:absolute; top:1rem; right:1rem; }
.viewer-marks { grid-area:2 / 2; align-self:center; justify-self:center; width:min(100%, 34rem); padding:0; }
/* botón redondo con filete: las flechas y el cierre del visor */
.round { display:grid; place-items:center; width:var(--arrow, 48px); height:var(--arrow, 48px); padding:0; color:var(--ink); background:rgb(0 0 0 / .35); border:0; border-radius:50%; box-shadow:inset 0 0 0 1px var(--line-strong); cursor:pointer; transition:background .2s, color .2s, box-shadow .2s, transform .16s ease-out; }
.round:hover { color:var(--on-action); background:var(--action); box-shadow:none; }
.round:active { transform:scale(.96); }
.round:focus-visible { border-radius:50%; }
.round svg { width:20px; height:20px; }
/* teléfono: el marco ocupa el ancho; debajo, las marcas a todo el ancho y las dos flechas juntas, centradas */
@media (max-width:699px) {
  .viewer { --side:0px; --top:4.5rem; --marks:calc(7.4rem + env(safe-area-inset-bottom)); --stage-w:calc(100vw - 2rem); --stage-h:calc(100svh - var(--marks) - var(--top));
    grid-template-columns:1rem minmax(0, 1fr) 1rem; grid-template-rows:var(--stage-h) 44px var(--arrow); row-gap:.4rem; }
  .viewer-arrow { position:static; grid-area:3 / 2; justify-self:center; }
  .viewer-arrow--prev { margin-right:calc(var(--arrow) + 1.2rem); }
  .viewer-arrow--next { margin-left:calc(var(--arrow) + 1.2rem); }
  .viewer-marks { grid-area:2 / 2; width:100%; padding:0; }
}

/* ---------- secciones ---------- */
.section { padding:4.5rem 0; }
.section-head { max-width:40rem; margin:0 auto 2.8rem; text-align:center; }
.section-head h2 { font-size:clamp(2.1rem, 5vw, 3.2rem); font-weight:400; line-height:1.08; }
.section-head p { margin-top:.9rem; color:var(--ink-soft); font-size:1.08rem; }

.steps { display:grid; gap:0 3rem; max-width:62rem; margin:0 auto; padding:0; list-style:none; counter-reset:step; }
@media (min-width:760px) { .steps { grid-template-columns:repeat(3, 1fr); } }
.steps li { counter-increment:step; padding:1.4rem 0 1.6rem; border-top:1px solid var(--accent); }
.steps li::before { content:counter(step); display:block; margin-bottom:.5rem; font:italic 400 2.9rem/1 var(--serif); color:var(--accent-ink); }
.steps h3 { margin-bottom:.4rem; font-size:1.5rem; }
.steps p { color:var(--ink-soft); }

/* ---------- láminas ---------- */
/* El catálogo de la exposición: una lámina por ocasión, con su paspartú, su filete champán y el nombre en
   versalitas. Una está abierta y enseña su ejemplo entero, en un marco con la proporción exacta del vídeo;
   las demás esperan como tiras con un recorte del póster. Son botones de radio, así que funciona sin JS y
   con las flechas del teclado: :checked decide cuál se abre. El script añade las dos flechas de los lados,
   el deslizamiento con el dedo y la reproducción.
   El vídeo se dibuja siempre a su tamaño de lámina abierta (--img-w por --img-h, object-fit:contain) y la
   ventana solo deja ver más o menos de él: no se reescala a mitad de la transición. En tira, `left` lo
   coloca con el punto --fx (la cara) en el centro, sin dejar hueco; abierta, la ventana mide lo que el vídeo.
   El alto de la ventana (--win-h) es el menor de tres: lo que cabe en pantalla, el alto natural más bajo
   de los vídeos (--nat-h, así ninguno se amplía) y el que deja caber la lámina más ancha (--max-ar) con
   sus tiras. Las tiras miden todas lo mismo: al cambiar de lámina solo se mueven la que se abre y la que
   se cierra, y la fila, centrada, se estrecha cuando la abierta es vertical. */
.plates-stage { container-type:inline-size; width:min(100% - 2rem, 1560px); margin-inline:auto; }
.plates-deck {
  --arrow:48px; --arrow-gap:clamp(14px, 2cqi, 28px);
  --gap:clamp(8px, 1cqi, 14px); --pad:clamp(7px, .8cqi, 11px); --band:clamp(36px, 3.4cqi, 44px);
  --strip:136px;   /* ancho mínimo de una tira: cabe el nombre más largo */
  --frame:calc(100cqi - 2 * (var(--arrow) + var(--arrow-gap)));
  --win-h:min(62svh, var(--nat-h) * 1px, (var(--frame) - (var(--n) - 1) * (var(--strip) + var(--gap)) - 2 * var(--pad) - 1px) / var(--max-ar));
  /* ancho de cada tira: lo que sobra, a partes iguales, cuando está abierta la lámina más ancha */
  --strip-w:clamp(var(--strip), (var(--frame) - var(--win-h) * var(--max-ar) - 2 * var(--pad) - (var(--n) - 1) * var(--gap) - 1px) / (var(--n) - 1), 176px);
  --t:.62s;
  display:grid; grid-template-columns:var(--arrow) minmax(0, 1fr) var(--arrow); column-gap:var(--arrow-gap); align-items:start;
}
/* las flechas: fuera del marco del carrusel, una a cada lado, a media altura de las ventanas */
.plates-arrow { display:grid; place-items:center; width:var(--arrow); height:var(--arrow); margin-top:calc(var(--pad) + var(--win-h) / 2 - var(--arrow) / 2); padding:0; color:var(--ink); background:none; border:0; border-radius:50%; box-shadow:inset 0 0 0 1px var(--line-strong); cursor:pointer; transition:background .2s, color .2s, box-shadow .2s, transform .16s ease-out; }
.plates-arrow:hover { color:var(--on-action); background:var(--action); box-shadow:none; }
.plates-arrow:active { transform:scale(.96); }
.plates-arrow:focus-visible { border-radius:50%; }
/* cada pieza en su columna aunque falten las flechas (sin JS siguen ocultas y la fila no se descoloca) */
.plates-arrow--prev { grid-area:1 / 1; }
.plates-arrow--next { grid-area:1 / 3; }
.plates-arrow svg { width:20px; height:20px; }
.plates-arrow--prev svg { transform:scaleX(-1); }

.plates { grid-area:1 / 2; display:flex; flex-wrap:wrap; justify-content:center; column-gap:var(--gap); min-width:0; }
.plate { display:contents; }
.plate-frame { --img-h:var(--win-h); --img-w:calc(var(--win-h) * var(--vw) / var(--vh)); order:1; flex:0 0 var(--strip-w); min-width:0; display:flex; flex-direction:column; padding:var(--pad) var(--pad) 0; background:var(--mat); border-radius:var(--r-print); box-shadow:0 0 0 1px var(--line), var(--shadow-print); cursor:pointer; contain:layout; transition:flex-basis var(--t) var(--ease-move), box-shadow .25s; }
.plate input:checked + .plate-frame { flex-basis:calc(var(--img-w) + 2 * var(--pad)); cursor:default; }
.plate input:focus-visible + .plate-frame { outline:3px solid var(--focus); outline-offset:3px; }
@media (hover:hover) and (pointer:fine) {
  .plate input:not(:checked) + .plate-frame:hover { box-shadow:0 0 0 1px var(--accent), var(--shadow-print); }
}
.plate-window { position:relative; flex:none; height:var(--img-h); overflow:hidden; background:var(--field); border-radius:1px; outline:1px solid var(--accent); outline-offset:calc(var(--pad) * .36); }
.plate-window video { position:absolute; top:0; left:clamp(100% - var(--img-w), 50% - var(--fx, .5) * var(--img-w), 0px); width:var(--img-w); max-width:none; height:100%; object-fit:contain; }
/* --fx: qué punto del ancho de la imagen queda en el centro de la tira (la cara) */
.plate-frame[data-example="example-tribute"] { --fx:.31; }
.plate-frame[data-example="wedding-2"] { --fx:.58; }
.plate-frame[data-example="anniversary-1"] { --fx:.67; }
.plate-frame[data-example="firstyear-1"] { --fx:.56; }
/* una plantilla sin vídeo todavía: un marcador sobrio en lugar de la imagen */
.plate-empty { position:absolute; inset:0; display:grid; place-items:center; padding:1rem; text-align:center; font:italic 400 1.2rem/1.3 var(--serif); color:var(--muted); }
/* la leyenda, en versalitas, en el margen inferior del paspartú: el nombre de la ocasión */
.plate-legend { flex:none; height:var(--band); display:flex; align-items:center; justify-content:center; padding-left:.12em; overflow:hidden; font:500 .96rem/1 var(--serif); font-variant-caps:all-small-caps; font-synthesis:none; letter-spacing:.12em; white-space:nowrap; color:var(--accent-ink); }

/* debajo: la ficha de la lámina abierta, centrada. Las cuatro ocupan el mismo sitio y se funden al cambiar */
.plate-text { order:3; flex:0 0 100%; min-width:0; margin-top:clamp(1.3rem, 2.4cqi, 2rem); text-align:center; visibility:hidden; opacity:0; transition:opacity .28s var(--ease-out), visibility 0s .28s; }
.plate + .plate .plate-text { margin-left:calc(-100% - var(--gap)); }
.plate input:checked ~ .plate-text { visibility:visible; opacity:1; transition:opacity .55s var(--ease-out) .14s, visibility 0s; }
.plate-text h3 { font-size:clamp(2.6rem, 5.4cqi, 4.6rem); font-weight:400; line-height:1; letter-spacing:-.022em; }
.plate-line { max-width:34rem; margin:.55rem auto 0; font-size:1.08rem; color:var(--ink-soft); }
.plate-cta { display:flex; align-items:center; justify-content:center; gap:1.4rem; margin-top:1.3rem; }
.plate-price { font:400 1.7rem/1 var(--serif); font-variant-numeric:oldstyle-nums; color:var(--accent-ink); }

.plates-thumbs { display:none; }
/* Por debajo de 1180 px las tiras con nombre ya no dejan sitio a la lámina abierta: las cuatro láminas van
   apiladas y se funden, cada una entera dentro de un cuadrado (--box), así una apaisada y una vertical pesan
   parecido y nada de lo de debajo se mueve al cambiar. Debajo, una fila con las cuatro miniaturas. */
@media (max-width:1179px) {
  .plates-stage { width:min(100% - 2rem, var(--wrap)); }
  .plates-deck { --pad:8px; --band:38px; --box:calc(min(var(--frame), 58svh, var(--nat-h) * 1px) - 2 * var(--pad)); }
  .plates-arrow { margin-top:calc(var(--pad) + var(--box) / 2 - var(--arrow) / 2); }
  .plates { display:grid; grid-template-columns:minmax(0, 1fr); justify-items:center; align-items:center; }
  .plate-frame { --img-w:min(var(--box), var(--box) * var(--vw) / var(--vh)); --img-h:calc(var(--img-w) * var(--vh) / var(--vw)); grid-area:1 / 1; width:calc(var(--img-w) + 2 * var(--pad)); visibility:hidden; opacity:0; touch-action:pan-y; transition:opacity .3s var(--ease-out), visibility 0s .3s; }
  .plate input:checked + .plate-frame { visibility:visible; opacity:1; transition:opacity .55s var(--ease-out), visibility 0s; }

  .plates-thumbs { grid-area:2 / 1; display:grid; grid-template-columns:repeat(var(--n), minmax(0, 1fr)); gap:8px; width:min(100%, 26rem); margin-top:14px; }
  .plate-thumb { display:block; padding:5px 5px 0; background:var(--mat); border-radius:var(--r-print); box-shadow:0 0 0 1px var(--line); cursor:pointer; transition:box-shadow .25s; }
  .plate-thumb-window { display:block; aspect-ratio:1; overflow:hidden; background:var(--field); }
  .plate-thumb img { width:100%; height:100%; object-fit:cover; object-position:var(--pos, center); }
  .plate-thumb b { display:grid; place-items:center; min-height:30px; font:500 .72rem/1.1 var(--sans); text-align:center; color:var(--muted); transition:color .25s; }
  .plate-thumb[data-example="example-tribute"] { --pos:30% center; }
  .plate-thumb[data-example="anniversary-1"] { --pos:center 24%; }
  .plate-thumb[data-example="firstyear-1"] { --pos:center 22%; }
  /* la miniatura de la lámina abierta */
  .plates:has(.plate:nth-child(1) > input:checked) .plate-thumb:nth-child(1),
  .plates:has(.plate:nth-child(2) > input:checked) .plate-thumb:nth-child(2),
  .plates:has(.plate:nth-child(3) > input:checked) .plate-thumb:nth-child(3),
  .plates:has(.plate:nth-child(4) > input:checked) .plate-thumb:nth-child(4),
  .plates:has(.plate:nth-child(5) > input:checked) .plate-thumb:nth-child(5),
  .plates:has(.plate:nth-child(6) > input:checked) .plate-thumb:nth-child(6) { box-shadow:0 0 0 1.5px var(--action); }
  .plates:has(.plate:nth-child(1) > input:checked) .plate-thumb:nth-child(1) b,
  .plates:has(.plate:nth-child(2) > input:checked) .plate-thumb:nth-child(2) b,
  .plates:has(.plate:nth-child(3) > input:checked) .plate-thumb:nth-child(3) b,
  .plates:has(.plate:nth-child(4) > input:checked) .plate-thumb:nth-child(4) b,
  .plates:has(.plate:nth-child(5) > input:checked) .plate-thumb:nth-child(5) b,
  .plates:has(.plate:nth-child(6) > input:checked) .plate-thumb:nth-child(6) b { color:var(--ink); }

  .plate-text { grid-area:3 / 1; justify-self:stretch; align-self:start; margin-top:1.3rem; }
  .plate + .plate .plate-text { margin-left:0; }
}
/* teléfono: sin flechas, que no dejarían sitio a la lámina; se pasa con el dedo o con las miniaturas */
@media (max-width:699px) {
  .plates-deck { --frame:100cqi; display:block; }
  .plates-arrow { display:none; }
}

/* ---------- formulario ---------- */
.order { background:var(--grain), linear-gradient(180deg, var(--bg), var(--bg-deep) 35%, var(--bg-deep) 80%, var(--bg)); }
.form-block + .form-block { margin-top:3.4rem; }
.form-block > h3 { display:flex; align-items:baseline; gap:.8rem; margin-bottom:1.4rem; padding-top:1.2rem; border-top:1px solid var(--accent); font-size:1.75rem; font-weight:500; }
.form-block > h3 span { font:italic 400 2.2rem/1 var(--serif); color:var(--accent-ink); }

/* la plantilla se elige en una lista con filetes, como el índice de láminas de un catálogo: nombre y
   precio. El ejemplo de cada una ya está arriba, en su lámina, y aquí no se repite. Los filetes de dos
   filas vecinas se pisan (margen de -1px) para que entre ellas haya uno solo. */
.choices { display:grid; column-gap:3rem; padding-top:1px; }
@media (min-width:760px) { .choices { grid-template-columns:repeat(2, 1fr); } }
.choice { position:relative; display:block; margin-top:-1px; cursor:pointer; }
.choice input { position:absolute; inset:0; z-index:1; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.choice-row { position:relative; display:flex; align-items:baseline; gap:1rem; padding:1.15rem .5rem 1.1rem; border-block:1px solid var(--line-strong); transition:border-color .25s, background .25s; }
.choice-mark { align-self:center; flex:none; display:grid; place-items:center; width:24px; height:24px; color:var(--on-action); border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--control-line); transition:background .2s, box-shadow .2s; }
.choice-mark svg { width:13px; height:13px; stroke-width:2.6; opacity:0; transform:scale(.6); transition:opacity .2s, transform .25s var(--ease-out); }
.choice strong { font:500 1.5rem/1.15 var(--serif); }
.choice .price { margin-left:auto; font:400 1.35rem/1 var(--serif); font-variant-numeric:oldstyle-nums; color:var(--accent-ink); }
@media (hover:hover) and (pointer:fine) { .choice:hover .choice-row { background:color-mix(in srgb, var(--action-tint) 45%, transparent); } }
.choice input:checked + .choice-row { z-index:1; border-color:var(--action); }
.choice input:checked + .choice-row .choice-mark { background:var(--action); box-shadow:none; }
.choice input:checked + .choice-row .choice-mark svg { opacity:1; transform:none; }
.choice input:focus-visible + .choice-row { z-index:2; outline:3px solid var(--focus); outline-offset:2px; }
.choices-note { margin-top:1.1rem; font-size:.92rem; color:var(--muted); }

.upload { display:grid; gap:1.4rem; }
@media (min-width:860px) { .upload { grid-template-columns:1.4fr 1fr; align-items:stretch; } }
.drop { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem; min-height:300px; padding:1.5rem; text-align:center; color:var(--ink-soft); background:var(--surface); border:1.5px dashed var(--control-line); border-radius:var(--r-print); transition:border-color .2s, background .2s; }
.drop:hover, .drop.is-over { border-color:var(--action); background:var(--action-tint); }
.drop:focus-within { outline:3px solid var(--focus); outline-offset:3px; }
.drop input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.drop .drop-icon { display:grid; place-items:center; width:64px; height:64px; color:var(--accent-ink); background:var(--accent-tint); border-radius:50%; }
.drop .drop-icon svg { width:28px; height:28px; }
.drop strong { font:500 1.5rem/1.2 var(--serif); color:var(--ink); }
.drop .small { font-size:.9rem; color:var(--muted); }
.drop img { max-width:100%; max-height:380px; padding:8px; background:var(--mat); border-radius:var(--r-print); box-shadow:0 0 0 1px var(--line), var(--shadow-print); }
.drop.has-photo { padding:1rem; }
.drop .change { font-size:.9rem; color:var(--accent-ink); font-weight:600; }
.tips { align-self:center; padding:0 0 0 1.4rem; border-left:1px solid var(--accent); }
.tips h4 { margin:0 0 .8rem; font:500 1.35rem/1.2 var(--serif); }
.tips ul { display:grid; gap:.7rem; margin:0; padding:0; list-style:none; font-size:.95rem; color:var(--ink-soft); }
.tips li { display:flex; gap:.6rem; }
.tips svg { flex:none; width:18px; height:18px; margin-top:.2rem; color:var(--accent-ink); }

.consent { display:flex; gap:.8rem; align-items:flex-start; margin-top:1.3rem; font-size:.93rem; line-height:1.5; color:var(--ink-soft); cursor:pointer; }
.consent input { flex:none; width:20px; height:20px; margin:.15rem 0 0; accent-color:var(--action); }

.checkout { margin-top:3rem; padding:2rem 0 0; text-align:center; border-top:1px solid var(--accent); }
.checkout .btn { width:min(100%, 26rem); white-space:nowrap; }
@media (max-width:420px) { .checkout .btn { padding-inline:1rem; font-size:1rem; } }
.checkout .assure { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.4rem; margin-top:1.2rem; font-size:.88rem; color:var(--muted); }
.checkout .assure span { display:inline-flex; align-items:center; gap:.4rem; }
.checkout .assure svg { flex:none; width:16px; height:16px; color:var(--accent-ink); }
.checkout .assure span { text-align:left; }
.error { margin-top:1rem; padding:.8rem 1rem; color:var(--bad); background:var(--surface); border:1px solid color-mix(in srgb, var(--bad) 40%, var(--line)); border-radius:var(--r-md); font-size:.95rem; }
.error[hidden] { display:none; }

.field { margin-top:1.6rem; max-width:26rem; }
.field label { display:block; margin-bottom:.4rem; font-weight:600; font-size:.95rem; }
.field input { width:100%; padding:.85rem 1rem; font:inherit; color:var(--ink); background:var(--surface); border:1.5px solid var(--control-line); border-radius:var(--r-md); }
.field input::placeholder { color:var(--muted); opacity:1; }
.field input:focus-visible { outline:3px solid var(--focus); outline-offset:1px; border-color:var(--action); }
.field .hint { margin-top:.4rem; font-size:.85rem; color:var(--muted); }
.notice { padding:.9rem 0; text-align:center; font-size:.95rem; color:var(--ink); background:var(--accent-tint); border-bottom:1px solid var(--accent); }

/* ---------- FAQ ---------- */
.faq { max-width:46rem; margin-inline:auto; }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.2rem .2rem; font:500 1.35rem/1.3 var(--serif); cursor:pointer; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; flex:none; font:300 1.7rem/1 var(--sans); color:var(--accent-ink); transition:transform .25s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { padding:0 .2rem 1.3rem; color:var(--ink-soft); }

/* ---------- pie ---------- */
.site-footer { padding:3rem 0 2.5rem; font-size:.9rem; text-align:center; color:var(--muted); border-top:1px solid var(--line); }
.footer-top { display:flex; flex-direction:column; align-items:center; gap:.3rem; margin-bottom:1.6rem; }
.footer-top .brand { font-size:1.3rem; }
.footer-tagline { font-size:.88rem; color:var(--muted); }
.footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.4rem; margin:0 0 1.2rem; padding:0; list-style:none; }
.footer-links a { color:var(--ink-soft); text-decoration:none; }
.footer-links a:hover { color:var(--accent-ink); }
.footer-meta { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.5rem 1.4rem; margin-bottom:1.4rem; font-size:.85rem; }
.footer-meta a { color:var(--muted); }
.footer-meta span { display:inline-flex; align-items:center; gap:.4rem; }
.footer-meta svg { width:15px; height:15px; color:var(--accent-ink); flex:none; }
.footer-copy { font-size:.8rem; color:var(--muted); }

/* ---------- páginas legales ---------- */
.legal-wrap { max-width:44rem; }
.legal h1 { font-size:clamp(2.3rem, 5.6vw, 3.1rem); font-weight:400; }
.legal-updated { margin-top:.6rem; font-size:.9rem; color:var(--muted); }
.legal h2 { margin-top:2.4rem; margin-bottom:.9rem; font-size:1.6rem; font-weight:500; }
.legal p { margin-top:.7rem; color:var(--ink-soft); line-height:1.7; }
.legal p:first-of-type { margin-top:0; }

/* ---------- página del pedido ---------- */
/* Una columna centrada, sin tarjeta: el progreso como tres filetes con su nombre (como las marcas del hero),
   el titular en Garamond y el texto debajo. Mientras se espera, una línea fina con un tramo champán que
   pasa despacio, sin porcentaje; con movimiento reducido se queda quieto. El vídeo listo va en su paspartú,
   como una lámina. */
.status-page { min-height:100vh; display:flex; flex-direction:column; }
.status-page main { flex:1; padding:clamp(1rem, 5vh, 3.5rem) 1rem 4rem; }
.status { width:min(100%, 38rem); margin:0 auto; text-align:center; }
.status--ready { width:min(100%, 46rem); }

.stepper { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 .7rem; width:min(100%, 26rem); margin:0 auto 2.6rem; padding:0; list-style:none; }
.stepper li { position:relative; padding-top:.8rem; font:500 .8rem/1.2 var(--sans); letter-spacing:.01em; text-align:left; color:var(--muted); }
.stepper li::before { content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--line-strong); }
.stepper li.is-done, .stepper li[aria-current] { color:var(--ink); }
.stepper li.is-done::before, .stepper li[aria-current]::before { background:var(--accent); }

.status h1 { font-size:clamp(2.2rem, 6.4vw, 3.3rem); font-weight:400; line-height:1.08; letter-spacing:-.015em; }
.status-text { max-width:32rem; margin:1.1rem auto 0; font-size:1.08rem; color:var(--ink-soft); }
.status-text p + p { margin-top:.55rem; }
.status-small { max-width:32rem; margin:1.4rem auto 0; font-size:.92rem; color:var(--muted); }
.status-small a { color:var(--accent-ink); }
.status-warm { margin-top:.9rem; font:italic 400 1.3rem/1.35 var(--serif); color:var(--accent-ink); }
.status-error { max-width:32rem; margin:1rem auto 0; font-size:.95rem; color:var(--bad); }

.wait-bar { position:relative; width:min(100%, 15rem); height:1px; margin:2.2rem auto 0; overflow:hidden; background:var(--line-strong); }
.wait-bar span { position:absolute; top:0; bottom:0; left:0; width:32%; background:var(--accent); animation:wait 2.6s var(--ease-move) infinite; }
@keyframes wait { from { transform:translateX(-100%); } to { transform:translateX(315%); } }

.actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; margin-top:2.2rem; }
@media (max-width:519px) { .actions .btn { width:100%; } }

/* el vídeo terminado, en su paspartú con el filete champán por dentro */
.print { width:fit-content; max-width:100%; margin:2.2rem auto 0; padding:10px; background:var(--mat); border-radius:var(--r-print); box-shadow:0 0 0 1px var(--line), var(--shadow-print); }
/* de alto, lo que deja la pantalla con el titular arriba y el botón de descarga debajo a la vista */
.print video { display:block; max-width:100%; max-height:max(280px, min(100svh - 29rem, 640px)); background:var(--field); outline:1px solid var(--accent); outline-offset:4px; }

.status-foot { margin-top:3rem; padding-top:1.2rem; font-size:.9rem; border-top:1px solid var(--line); }
.status-foot a { color:var(--muted); }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .wait-bar span { left:34%; transform:none; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
}