/* the white wedding — web pública (boceto de Jota, 9-nov-2026).
   Móvil primero: la columna izquierda del boceto es la primera pantalla y la
   derecha, la segunda. El escritorio sale de ahí, no al revés.
   Estética: papel cálido y tinta; la papelería (invitación, seating, minutas,
   regalos) está DIBUJADA en CSS porque es lo que vende la marca y no depende de
   fotos que aún no tenemos. Nada del degradado RGB de Whiteblock. */

:root {
  /* Paleta elegida por Jota en Color Hunt (9-nov-2026):
     https://colorhunt.co/palette/ffbe91ffddb0fffce1cfebff */
  --melocoton: #FFBE91;
  --albaricoque: #FFDDB0;
  --crema: #FFFCE1;
  --cielo: #CFEBFF;
  --papel: var(--crema);
  --papel-2: var(--albaricoque);
  --papel-3: var(--melocoton);
  --blanco: #FFFFFF;
  --tinta: #1C1B19;
  --tinta-2: #4A4741;
  --gris: #86775F;
  --linea: #EED9B4;
  --oro: #B4975F;
  --oro-claro: var(--albaricoque);
  --verde: #4F6B4A;
  /* Google Sans en TODO de momento (Jota, 9-nov): la tipografía de la marca
     se busca después. `--serif` se queda como nombre del papel «titular». */
  --serif: 'Google Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans: 'Google Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-l: 28px;
  --r-m: 20px;
  --lado: max(20px, env(safe-area-inset-left));
  --cab-h: 76px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
/* `hidden` manda siempre: si no, cualquier `display` de una clase lo pisa
   (el play sin vídeo y el formulario ya enviado se quedaban a la vista). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cab-h) + 8px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--tinta); color: var(--papel); padding: 10px 14px; border-radius: 999px; }
.saltar:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.cab {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: max(16px, env(safe-area-inset-top)) var(--lado) 12px;
  pointer-events: none;
}
/* Sin fondo (Jota, 9-nov): logo y botones flotan y cambian de tono sobre lo oscuro. */
.cab > * { pointer-events: auto; position: relative; }
.logo {
  display: inline-flex; flex-direction: column; text-decoration: none;
  font: 700 30px/.9 var(--serif); letter-spacing: -.035em; color: var(--tinta);
  transition: font-size .3s cubic-bezier(.2, .7, .2, 1);
}
/* Encoge con el tamaño de letra y no con transform: así la franja de la
   cabecera baja con él (con transform quedaba el hueco del logo grande). */
/* El círculo NO se mueve al bajar: es el destino del anillo (anillo.js lo mide). */
.circulo {
  width: 46px; height: 46px; border-radius: 50%; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center; padding: 0; margin-top: 2px;
}
.circulo { position: relative; }
/* Sin 3D (o antes de que cargue) el anillo es un borde dorado. Con 3D lo pinta
   el lienzo justo encima: el botón es el anillo, no un círculo debajo. */
.circulo-anillo {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid #C9A766; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
  transition: transform .25s ease, opacity .2s ease;
}
.con-3d .circulo-anillo { opacity: 0; }
.circulo-x { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; fill: none; stroke: var(--tinta); stroke-width: 1.8; stroke-linecap: round; opacity: 0; transition: opacity .2s ease; }
.circulo[aria-expanded="true"] .circulo-x { opacity: 1; }
.bajar {
  position: fixed; z-index: 28; right: var(--lado); bottom: max(18px, env(safe-area-inset-bottom));
  width: 52px; height: 52px; border: 0; padding: 0; border-radius: 50%; background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.bajar > * { grid-area: 1 / 1; }
.bajar .circulo-anillo { width: 46px; height: 46px; }
.bajar svg { width: 20px; height: 20px; fill: none; stroke: var(--tinta); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  opacity: var(--anillo-b, 1); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.bajar.arriba svg { transform: rotate(180deg); }
.bajar.oscuro svg { stroke: var(--papel); }
.menu-abierto .bajar { opacity: 0; pointer-events: none; }

/* El lienzo del anillo: fijo, a pantalla completa, sin capturar clics. */
.anillo-lienzo {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 31; pointer-events: none; opacity: 0; transition: opacity .4s ease;
}
.anillo-lienzo.listo { opacity: 1; }

/* ── Menú ─────────────────────────────────────────────────────────────── */
.menu {
  position: fixed; inset: 0; z-index: 29; background: var(--papel);
  display: grid; align-items: end; padding: calc(var(--cab-h) + 24px) var(--lado) max(28px, env(safe-area-inset-bottom));
  opacity: 0; transform: scale(.985); transition: opacity .22s ease, transform .22s ease;
}
.menu.abierto { opacity: 1; transform: none; }
.menu[hidden] { display: none; }
.menu ol { list-style: none; margin: 0 0 28px; padding: 0; counter-reset: m; }
.menu li { border-bottom: 1px solid var(--linea); }
.menu li a { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; text-decoration: none; font: 500 30px/1.1 var(--serif); letter-spacing: -.035em; }
.menu li a::before { counter-increment: m; content: '0' counter(m); font: 500 12px var(--sans); color: var(--gris); }
.menu-pie { margin-top: 18px; color: var(--gris); font-size: 14px; }

/* ── Botones ──────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer;
  font: 500 16px/1 var(--sans); text-decoration: none; transition: transform .15s ease, opacity .15s ease;
}
.boton:active { transform: scale(.98); }
.boton:disabled { opacity: .55; cursor: progress; }
.boton-tinta { background: var(--tinta); color: var(--papel); }
.boton-papel { background: var(--papel); color: var(--tinta); }
.pildora {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 18px; border-radius: 999px;
  border: 1.5px solid var(--tinta); background: var(--blanco); cursor: pointer; font: 500 14px/1 var(--sans);
}
.enlace { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ── Portada ──────────────────────────────────────────────────────────── */
.portada {
  position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto;
  padding: calc(var(--cab-h) + 40px) var(--lado) max(28px, env(safe-area-inset-bottom));
}
.portada-anillo { display: grid; place-items: center; min-height: 260px; }
.anillo-svg { width: min(68vw, 360px); opacity: 0; transition: opacity .4s ease; }
.sin-3d .anillo-svg { opacity: 1; }
.portada-pie { display: grid; gap: 22px; justify-items: start; }
.lema { font: 500 clamp(34px, 9.4vw, 60px)/1.04 var(--serif); letter-spacing: -.04em; }
.flecha {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--tinta);
  display: grid; place-items: center; text-decoration: none;
}
.flecha svg, .carrusel-flecha svg, .hoja-cerrar svg, .fv-play svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .flecha svg { animation: baja 2.4s ease-in-out infinite; }
  @keyframes baja { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(3px); } }
}

/* ── Bloques ──────────────────────────────────────────────────────────── */
.bloque { padding: 64px var(--lado); }
.bloque-cab { margin-bottom: 22px; }
.bloque-cab h2, .titulo-suelto { font: 500 40px/1.02 var(--serif); letter-spacing: -.04em; }
.bloque-cab p { margin-top: 10px; color: var(--tinta-2); max-width: 34ch; }
.tarjeta { position: relative; border-radius: var(--r-l); background: var(--papel-2); overflow: hidden; }

/* ── Invitaciones ─────────────────────────────────────────────────────── */
.interruptor {
  display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-bottom: 14px;
  border: 1.5px solid var(--tinta); border-radius: 999px; background: var(--blanco); position: relative;
}
.interruptor button {
  min-height: 38px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: 500 14px/1 var(--sans); transition: background .2s ease, color .2s ease;
}
.interruptor button[aria-selected="true"] { background: var(--tinta); color: var(--papel); }
.tarjeta-inv { aspect-ratio: 4 / 5; display: grid; place-items: center; }
.inv-vista { grid-area: 1 / 1; display: grid; place-items: center; width: 100%; height: 100%; padding: 28px 24px 70px; }
.inv-vista[hidden] { display: none; }
.inv-vista.entra { animation: aparece .32s cubic-bezier(.2, .7, .2, 1); }
@keyframes aparece { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.ver-mas { position: absolute; right: 16px; bottom: 16px; z-index: 2; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .35); }
.ver-mas-panel { margin-top: 14px; }
.lista-puntos { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linea); }
.lista-puntos li { padding: 12px 0; border-bottom: 1px solid var(--linea); color: var(--tinta-2); }
.lista-puntos b { color: var(--tinta); font-weight: 600; }

/* Por fuera: sobre + invitación de papel */
.sobre {
  grid-area: 1 / 1; width: 82%; aspect-ratio: 1.42; border-radius: 6px; transform: rotate(-6deg) translate(-4%, 14%);
  background: linear-gradient(160deg, #EFE5D1, #E2D4B8); box-shadow: 0 18px 40px -22px rgba(60, 45, 20, .45);
}
.sobre::after { content: ''; position: absolute; inset: 0; clip-path: polygon(0 0, 50% 52%, 100% 0); background: rgba(255, 255, 255, .28); }
.invitacion {
  grid-area: 1 / 1; position: relative; width: 72%; max-width: 300px; aspect-ratio: 5 / 7;
  background: var(--blanco); border-radius: 4px; transform: rotate(2.5deg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 24px 50px -24px rgba(40, 30, 10, .45);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 18px; text-align: center;
  background-image: radial-gradient(rgba(120, 100, 60, .05) 1px, transparent 1px); background-size: 3px 3px;
}
.invitacion::before { content: ''; position: absolute; inset: 8px; border: 1px solid var(--oro-claro); border-radius: 2px; pointer-events: none; }
.inv-pre { font: 500 9px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gris); }
.inv-nombres { font: italic 400 clamp(26px, 8vw, 36px)/1 var(--serif); margin: 6px 0 2px; }
.inv-nombres span { color: var(--oro); }
.inv-texto { font: 400 13px/1.3 var(--serif); color: var(--tinta-2); }
.invitacion hr { width: 36px; border: 0; border-top: 1px solid var(--oro); margin: 6px 0; }
.inv-fecha { font: 400 15px/1.2 var(--serif); }
.inv-qr { display: grid; grid-template-columns: repeat(3, 8px); gap: 2px; margin-top: 10px; }
.inv-qr i { width: 8px; height: 8px; background: var(--tinta); }
.inv-qr i:nth-child(2n) { background: transparent; border: 2px solid var(--tinta); }
.inv-mini { font: 400 9px/1.3 var(--sans); color: var(--gris); }

/* Por dentro: el móvil con la app */
.inv-vista[data-inv-vista="dentro"] { place-items: start center; padding: 26px 20px 0; }
.movil {
  width: min(74%, 270px); aspect-ratio: 9 / 18.5; border-radius: 34px; background: var(--tinta); padding: 8px;
  box-shadow: 0 28px 60px -28px rgba(20, 15, 5, .55);
}
.movil-pantalla { height: 100%; border-radius: 27px; background: var(--blanco); overflow: hidden; padding: 22px 12px 12px; display: flex; flex-direction: column; gap: 10px; font-size: 11px; }
.app-cab span { display: block; font: 400 19px/1 var(--serif); }
.app-cab small { color: var(--gris); font-size: 9.5px; }
.app-cifra { font-size: 10px; color: var(--tinta-2); }
.app-cifra b { font: 400 22px/1 var(--serif); color: var(--tinta); margin-right: 2px; }
.app-barra { height: 5px; border-radius: 3px; background: var(--papel-3); margin-top: 6px; overflow: hidden; }
.app-barra i { display: block; height: 100%; background: var(--verde); border-radius: 3px; }
.app-pestanas { display: flex; gap: 4px; }
.app-pestanas span { padding: 4px 8px; border-radius: 999px; background: var(--papel-2); font-size: 9.5px; }
.app-pestanas .on { background: var(--tinta); color: var(--papel); }
.app-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.app-lista li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 7px 2px; border-bottom: 1px solid var(--papel-2); }
.app-lista li > div { min-width: 0; }
.app-lista b, .app-lista small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-lista .av { width: 24px; height: 24px; border-radius: 50%; background: var(--oro-claro); display: grid; place-items: center; font-size: 8.5px; font-weight: 600; }
.app-lista b { display: block; font-weight: 600; font-size: 10px; line-height: 1.2; }
.app-lista small { display: block; color: var(--gris); font-size: 8.5px; }
.app-lista em { font-style: normal; font-size: 8.5px; font-weight: 600; padding: 2px 6px; border-radius: 999px; }
.app-lista .ok { background: #E3EBDF; color: var(--verde); }
.app-lista .pen { background: #F4EAD6; color: #8A6A2E; }
.app-lista .no { background: #EFE6E3; color: #8E4B3F; }

/* ── Música en directo: carrusel ──────────────────────────────────────── */
.carrusel { position: relative; }
.carrusel-pista {
  list-style: none; margin: 0 calc(-1 * var(--lado)); padding: 0 var(--lado) 6px;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(72%, 300px); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--lado);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-pista > li { scroll-snap-align: start; }
.grupo { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; }
.grupo-foto {
  aspect-ratio: 1; border-radius: var(--r-m); overflow: hidden; background: var(--papel-2); position: relative;
  display: grid; place-items: end start; padding: 16px;
}
.grupo-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.grupo:hover .grupo-foto img { transform: scale(1.03); }

/* Foto de fondo con un velo y el texto encima (Jota: nada de iconos). */
.grupo-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 17, 12, .72), rgba(20, 17, 12, .05) 58%); }
.grupo-encima { position: relative; z-index: 1; color: #fff; display: grid; gap: 2px; }
.grupo-nota { position: absolute; z-index: 1; top: 14px; left: 14px; padding: 5px 10px; border-radius: 999px; background: rgba(251, 249, 245, .9); color: var(--tinta); font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.grupo-encima b { font: 500 22px/1.1 var(--serif); letter-spacing: -.03em; }
.grupo-encima small { font-size: 13.5px; opacity: .85; }
.carrusel-flecha {
  position: absolute; right: -6px; top: calc(min(72vw, 300px) / 2); transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--blanco); cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .3); display: grid; place-items: center;
}
.carrusel-flecha[hidden] { display: none; }

/* ── Foto y vídeo ─────────────────────────────────────────────────────── */
.tarjeta-fv { aspect-ratio: 4 / 3.6; background: var(--tinta); color: var(--papel); display: grid; }
.fv-tiras { position: absolute; inset: 18px 18px auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; opacity: .9; }
.fv-tiras i { aspect-ratio: 3 / 2; border-radius: 4px; background: linear-gradient(135deg, #3A3733, #2A2825); position: relative; }
.fv-tiras i::after { content: ''; position: absolute; inset: auto 6px 6px auto; width: 22%; height: 3px; border-radius: 2px; background: rgba(251, 249, 245, .25); }
.fv-tiras i:nth-child(2), .fv-tiras i:nth-child(4) { background: linear-gradient(135deg, #4A4237, #2E2A25); }
.fv-tiras i:nth-child(6) { background: linear-gradient(135deg, #5B4B33, #2E2A25); }
.fv-play {
  position: absolute; top: 18px; right: 18px; z-index: 2; width: 56px; height: 56px; border-radius: 50%;
  border: 1.5px solid var(--papel); background: rgba(28, 27, 25, .35); color: var(--papel); cursor: pointer; display: grid; place-items: center;
}
.fv-play svg { fill: currentColor; stroke: none; width: 22px; height: 22px; margin-left: 3px; }
.fv-texto { align-self: end; padding: 22px; display: grid; gap: 8px; position: relative; }
.fv-titulo { font: 500 40px/1 var(--serif); letter-spacing: -.04em; }
.fv-texto p:last-child { color: rgba(251, 249, 245, .72); max-width: 34ch; }
.con-video .fv-tiras { display: none; }
.fv-poster, .reg-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fv-velo { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 18, 15, .74), rgba(20, 18, 15, .05) 62%); }
.video-marco { aspect-ratio: 16 / 9; width: 100%; background: #000; }
.video-marco iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── Imprenta: ejemplo grande + miniaturas ────────────────────────────── */
.tarjeta-imp { aspect-ratio: 4 / 3.4; display: grid; place-items: center; padding: 26px; }
.imp-miniaturas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.imp-mini {
  aspect-ratio: 1; border-radius: 16px; border: 1.5px solid transparent; background: var(--papel-2); cursor: pointer;
  display: grid; place-items: center; padding: 0; overflow: hidden; transition: border-color .2s ease;
}
.imp-mini[aria-selected="true"] { border-color: var(--tinta); }
.imp-mini { position: relative; }
/* La pieza de verdad, centrada y a escala: así la miniatura es el mismo dibujo. */
.mini-escala { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.3); pointer-events: none; }
.pieza { background: var(--blanco); box-shadow: 0 18px 40px -22px rgba(40, 30, 10, .5); text-align: center; position: relative; }
.pieza-entra { animation: aparece .3s cubic-bezier(.2, .7, .2, 1); }
.pieza::before { content: ''; position: absolute; inset: 7px; border: 1px solid var(--oro-claro); pointer-events: none; }
/* Seating */
.p-seating { width: 270px; padding: 22px 18px; }
.p-seating h4 { margin: 0 0 12px; font: italic 400 24px/1 var(--serif); }
.p-seating .mesas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; text-align: left; }
.p-seating .mesa b { display: block; font: 500 8px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--oro); margin-bottom: 4px; }
.p-seating .mesa span { display: block; font: 400 10.5px/1.35 var(--serif); color: var(--tinta-2); }
/* Número de mesa */
.p-mesa { width: 150px; height: 200px; display: grid; place-items: center; align-content: center; gap: 4px; }
.p-mesa small { font: 500 9px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gris); }
.p-mesa b { font: 400 92px/.9 var(--serif); font-weight: 400; }
.p-mesa i { font: italic 400 14px var(--serif); color: var(--oro); }
.p-mesa-pie { width: 72px; height: 12px; background: #C9B48A; border-radius: 2px 2px 6px 6px; margin: -2px auto 0; box-shadow: 0 10px 20px -10px rgba(40, 30, 10, .5); }
/* Minuta */
.p-menu { width: 170px; padding: 24px 16px; display: grid; gap: 7px; }
.p-menu h4 { margin: 0; font: italic 400 26px/1 var(--serif); }
.p-menu small { font: 500 8px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--oro); margin-top: 4px; }
.p-menu span { font: 400 10.5px/1.3 var(--serif); color: var(--tinta-2); }
/* Centro de mesa (papel y flor) */
.p-centro { width: 240px; height: 190px; background: none; box-shadow: none; display: grid; place-items: end center; }
.p-centro::before { display: none; }
.p-centro .mantel { position: absolute; inset: auto 0 0; height: 60px; border-radius: 50%; background: radial-gradient(ellipse at center, #fff, #ECE5D7 70%); }
.p-centro .jarron { position: absolute; bottom: 30px; left: 50%; width: 46px; height: 64px; transform: translateX(-50%); border-radius: 12px 12px 18px 18px; background: linear-gradient(90deg, #E8E2D6, #FFFFFF 45%, #DDD4C2); }
.p-centro .flor { position: absolute; border-radius: 50%; }
.p-centro .f1 { width: 54px; height: 54px; bottom: 82px; left: calc(50% - 46px); background: radial-gradient(circle, #FFFDF8 30%, #EDE3D0 72%); }
.p-centro .f2 { width: 44px; height: 44px; bottom: 96px; left: calc(50% - 4px); background: radial-gradient(circle, #FBF2E6 30%, #E6CFB1 72%); }
.p-centro .f3 { width: 34px; height: 34px; bottom: 78px; left: calc(50% + 22px); background: radial-gradient(circle, #FFFFFF 30%, #E4E8DC 72%); }
.p-centro .hoja-v { position: absolute; width: 40px; height: 14px; border-radius: 50%; background: #9DAA8A; bottom: 84px; }
.p-centro .h1 { left: calc(50% - 64px); transform: rotate(-28deg); }
.p-centro .h2 { left: calc(50% + 34px); transform: rotate(24deg); bottom: 96px; }
.p-centro .tarjetita { position: absolute; bottom: 14px; left: calc(50% + 34px); width: 44px; height: 30px; background: var(--blanco); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .3); font: italic 400 9px/30px var(--serif); text-align: center; }

/* ── Regalos ──────────────────────────────────────────────────────────── */
.bloque-cab-suelto { margin-bottom: 18px; }
.tarjeta-reg { aspect-ratio: 4 / 3.6; display: grid; background: var(--papel-3); color: #fff; }
.reg-escena { position: absolute; inset: 0; }
.reg-caja {
  position: absolute; left: 12%; top: 16%; width: 38%; aspect-ratio: 1.1; border-radius: 6px;
  background: linear-gradient(135deg, #D8C09A, #C4A779); box-shadow: 0 22px 40px -24px rgba(60, 40, 10, .6);
  display: grid; place-items: center; align-content: center; transform: rotate(-5deg);
}
.reg-caja::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 10px; transform: translateX(-50%); background: var(--blanco); opacity: .9; }
.reg-caja span, .reg-caja small { position: relative; background: var(--blanco); padding: 2px 8px; font: italic 400 13px/1.2 var(--serif); }
.reg-caja small { font: 500 8px var(--sans); letter-spacing: .2em; margin-top: 2px; }
.reg-tarro {
  position: absolute; right: 14%; top: 12%; width: 25%; aspect-ratio: .78; border-radius: 14px 14px 18px 18px;
  background: linear-gradient(90deg, #E2B866, #F3D493 40%, #C8973F); box-shadow: 0 22px 40px -24px rgba(60, 40, 10, .6);
  display: grid; place-items: center; align-content: center; text-align: center; transform: rotate(4deg);
}
.reg-tarro::before { content: ''; position: absolute; top: -10%; left: 12%; right: 12%; height: 16%; border-radius: 6px; background: #8A7454; }
.reg-tarro span, .reg-tarro small { background: var(--blanco); padding: 2px 6px; font: italic 400 11px/1.2 var(--serif); }
.reg-tarro small { font: 500 7px var(--sans); letter-spacing: .14em; }
.reg-etiqueta {
  position: absolute; left: 44%; top: 50%; padding: 8px 14px 8px 22px; background: var(--blanco);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); transform: rotate(-3deg);
  font: italic 400 15px var(--serif); box-shadow: 0 12px 20px -12px rgba(0, 0, 0, .3);
}
.reg-texto { align-self: end; padding: 22px; position: relative; }
.reg-titulo { font: 500 28px/1.1 var(--serif); letter-spacing: -.03em; }

/* ── Formulario ───────────────────────────────────────────────────────── */
.bloque-oscuro { background: var(--tinta); color: var(--papel); border-radius: var(--r-l) var(--r-l) 0 0; margin-top: 24px; }
.bloque-oscuro .bloque-cab p { color: rgba(251, 249, 245, .7); }
.formulario { display: grid; gap: 18px; }
.campos { display: grid; gap: 14px; }
.campo { display: grid; gap: 6px; font-size: 14px; }
.campo > span { color: rgba(251, 249, 245, .78); }
.campo i { font-style: normal; color: rgba(251, 249, 245, .45); }
.campo input, .campo textarea {
  width: 100%; min-height: 52px; padding: 13px 16px; border-radius: 14px;
  border: 1px solid rgba(251, 249, 245, .22); background: rgba(251, 249, 245, .06); color: var(--papel);
  font: 400 16px/1.3 var(--sans); outline: none; transition: border-color .2s ease, background .2s ease;
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo input::placeholder, .campo textarea::placeholder { color: rgba(251, 249, 245, .35); }
.campo input:focus, .campo textarea:focus { border-color: var(--papel); background: rgba(251, 249, 245, .1); }
.campo input[aria-invalid="true"] { border-color: #E59A8A; }
.campo input[type="date"] { color-scheme: dark; }
.fecha-aviso { min-height: 1em; font-size: 13px; }
.fecha-aviso.libre { color: #B7D3AE; }
.fecha-aviso.ocupada { color: #F0D49B; }
.intereses { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.intereses legend { font-size: 14px; color: rgba(251, 249, 245, .78); margin-bottom: 8px; padding: 0; }
.intereses label { position: relative; cursor: pointer; }
.intereses input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.intereses span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(251, 249, 245, .3); font-size: 14px; transition: background .15s ease, color .15s ease;
}
.intereses input:checked + span { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.intereses input:focus-visible + span { outline: 2px solid var(--papel); outline-offset: 2px; }
.grupo-elegido { font-size: 14px; color: var(--oro-claro); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consentir { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: rgba(251, 249, 245, .8); }
.consentir input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--papel); flex: none; }
.turnstile { min-height: 65px; }
.form-estado { min-height: 1.4em; font-size: 14px; }
.form-estado.error { color: #F2B3A6; }
.formulario .boton { justify-self: start; min-width: 220px; }
.gracias { padding: 18px 0 8px; outline: none; }
.gracias-titulo { font: 500 34px/1.1 var(--serif); letter-spacing: -.035em; margin-bottom: 8px; }

/* ── Pie ──────────────────────────────────────────────────────────────── */
.pie { background: var(--tinta); color: rgba(251, 249, 245, .7); padding: 40px var(--lado) max(32px, env(safe-area-inset-bottom)); display: grid; gap: 10px; font-size: 14px; border-top: 1px solid rgba(251, 249, 245, .1); }
.logo-pie { color: var(--papel); font-size: 24px; margin-bottom: 8px; }

/* ── Hojas (diálogos) ─────────────────────────────────────────────────── */
.hoja {
  border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 560px; max-height: 88dvh;
  border-radius: var(--r-l) var(--r-l) 0 0; background: var(--papel); color: var(--tinta);
}
.hoja::backdrop { background: rgba(28, 27, 25, .45); }
.hoja[open] { animation: sube .28s cubic-bezier(.2, .7, .2, 1); }
@keyframes sube { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.hoja-dentro { position: relative; padding: 26px 22px max(26px, env(safe-area-inset-bottom)); display: grid; gap: 12px; overflow-y: auto; max-height: 88dvh; }
.hoja-cerrar { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--tinta); background: var(--blanco); cursor: pointer; display: grid; place-items: center; z-index: 2; }
.hoja h3 { font: 500 30px/1.1 var(--serif); letter-spacing: -.035em; padding-right: 50px; }
.hoja-sub { color: var(--gris); font-size: 14px; }
.hoja-foto:empty { display: none; }
.hoja-foto { border-radius: var(--r-m); overflow: hidden; aspect-ratio: 16 / 10; background: var(--papel-2); margin: -4px 0 4px; }
.hoja-foto img { width: 100%; height: 100%; object-fit: cover; }
.hoja-formatos { list-style: none; margin: 4px 0 8px; padding: 0; border-top: 1px solid var(--linea); }
.hoja-formatos li { padding: 12px 0; border-bottom: 1px solid var(--linea); }
.hoja-formatos b { display: block; font-weight: 600; }
.hoja-formatos small { color: var(--gris); }
.hoja-video { max-width: 960px; background: #000; }
.hoja-video .hoja-dentro { padding: 0; }
.hoja-video video { width: 100%; max-height: 80dvh; background: #000; }
.hoja-video .hoja-cerrar { background: rgba(255, 255, 255, .9); }

/* ── Escritorio ───────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  :root { --lado: max(48px, calc((100vw - 1240px) / 2)); --cab-h: 92px; }
  .circulo { width: 54px; height: 54px; }
  .circulo-anillo { width: 48px; height: 48px; }
  .portada { grid-template-rows: 1fr auto; padding-top: calc(var(--cab-h) + 20px); }
  .anillo-svg { width: 440px; }
  .portada-pie { grid-template-columns: 1fr auto; align-items: end; }
  .lema { font-size: clamp(64px, 6.4vw, 104px); }
  .bloque { padding: 120px var(--lado); display: grid; grid-template-columns: minmax(260px, 4fr) 7fr; gap: 48px; align-items: start; }
  .bloque-cab { position: sticky; top: calc(var(--cab-h) + 24px); margin: 0; }
  .bloque-cab h2, .titulo-suelto { font-size: 64px; }
  .bloque-cab p { font-size: 18px; }
  #foto-video { display: block; }
  .tarjeta-fv { aspect-ratio: 21 / 9; }
  .fv-tiras { inset: 28px 28px auto 40%; grid-template-columns: repeat(6, 1fr); }
  .fv-texto { padding: 40px; }
  .fv-titulo { font-size: 80px; }
  .fv-play { width: 76px; height: 76px; top: 28px; right: 28px; }
  .tarjeta-inv { aspect-ratio: 16 / 11; }
  .tarjeta-imp, .tarjeta-reg { aspect-ratio: 16 / 10; }
  .p-seating { transform: scale(1.25); }
  .p-mesa, .p-menu, .p-centro { transform: scale(1.3); }
  .mini-escala { transform: translate(-50%, -50%) scale(.36); }
  .carrusel-pista { margin: 0; padding: 0 0 6px; grid-auto-columns: calc((100% - 28px) / 3); scroll-padding-inline: 0; }
  .carrusel-flecha { right: -22px; top: calc((min(100vw, 1240px) * 7 / 11 - 28px) / 6); }
  .reg-titulo { font-size: 44px; }
  .reg-texto { padding: 36px; }
  .bloque-oscuro { border-radius: 40px 40px 0 0; }
  .campos { grid-template-columns: 1fr 1fr; gap: 16px 18px; }
  .hoja { margin: auto; border-radius: var(--r-l); }
  .pie { grid-template-columns: 1fr auto auto; align-items: end; gap: 32px; }
}
@media (min-width: 900px) and (max-width: 1100px) {
  .bloque { grid-template-columns: 1fr; gap: 28px; }
  .bloque-cab { position: static; }
}

/* ── Invitaciones por fuera: las que ha hecho el equipo ───────────────── */
.inv-vista[data-inv-vista="fuera"] { place-items: start center; padding: 26px 20px 0; gap: 0; }
.movil-foto .movil-pantalla { padding: 0; }
.movil-foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: opacity .25s ease; }
.movil-foto img.cambia { opacity: 0; }
.inv-parejas { position: absolute; left: 14px; right: 110px; bottom: 16px; z-index: 2; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.inv-parejas::-webkit-scrollbar { display: none; }
.inv-parejas button {
  flex: none; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--linea); background: var(--blanco);
  font: 500 12.5px/1 var(--sans); cursor: pointer; white-space: nowrap;
}
.inv-parejas button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.ver-reales { margin-top: 14px; color: var(--tinta-2); font-size: 15px; }
.ver-reales a { color: var(--tinta); text-underline-offset: 3px; }

/* ── La app de la boda ────────────────────────────────────────────────── */
/* La app se ve ENTERA (con su barra de pestañas): la tarjeta crece con el móvil. */
.tarjeta-app { display: grid; place-items: center; padding: 26px 20px; }
.movil-app { width: min(70%, 270px); }
.movil-app .movil-pantalla { position: relative; padding: 22px 12px 62px; }
.mapp-vista { display: flex; flex-direction: column; gap: 10px; animation: aparece .28s cubic-bezier(.2, .7, .2, 1); }
.mapp-cuenta { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--papel-2); }
.mapp-cuenta b { font: 500 34px/1 var(--serif); letter-spacing: -.04em; }
.mapp-cuenta span { font-size: 10px; line-height: 1.25; color: var(--tinta-2); }
.mapp-pago { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.mapp-pago small { display: block; font-size: 9px; color: var(--gris); }
.mapp-pago b { font: 600 14px/1.2 var(--sans); }
.mapp-pago .app-barra { grid-column: 1 / -1; margin-top: 2px; }
.mapp-t { font: 600 9px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin-top: 4px; }
.mapp-lista, .mapp-pedidos, .mapp-horario, .mapp-cifras { list-style: none; margin: 0; padding: 0; }
.mapp-lista li, .mapp-pedidos > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--papel-2); }
.mapp-lista b, .mapp-pedidos b { display: block; font-size: 10.5px; font-weight: 600; }
.mapp-lista small, .mapp-pedidos small { display: block; font-size: 8.8px; color: var(--gris); }
.mapp-lista li > small { grid-column: 1; }
.mapp-lista em, .mapp-pedidos em { grid-row: 1 / span 2; grid-column: 2; font-style: normal; font-size: 8.5px; font-weight: 600; padding: 3px 7px; border-radius: 999px; }
.mapp-pedidos em { grid-row: 1; }
.mapp-lista .ok, .mapp-pedidos .ok { background: #E3EBDF; color: var(--verde); }
.mapp-lista .pen, .mapp-pedidos .pen { background: #F4EAD6; color: #8A6A2E; }
.pasos { grid-column: 1 / -1; list-style: none; margin: 4px 0 0; padding: 0; display: flex; gap: 3px; }
.pasos li { flex: 1; height: 4px; border-radius: 2px; background: var(--papel-3); }
.pasos li.h { background: var(--verde); }
.pasos li.a { background: #C9A766; }
.mapp-horario { position: relative; display: grid; gap: 10px; padding-left: 4px; }
.mapp-horario::before { content: ''; position: absolute; left: 30px; top: 6px; bottom: 6px; width: 1px; background: var(--linea); }
.mapp-horario li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.mapp-horario time { font: 600 10px/1.6 var(--sans); }
.mapp-horario li > div { position: relative; padding: 8px 10px; border-radius: 12px; background: var(--papel-2); }
.mapp-horario li > div::before { content: ''; position: absolute; left: -16px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: #C9A766; box-shadow: 0 0 0 3px var(--blanco); }
.mapp-horario b { display: block; font-size: 11px; font-weight: 600; }
.mapp-horario small { display: block; font-size: 9px; color: var(--gris); }
.mapp-horario .precio { color: var(--tinta); font-weight: 600; margin-top: 2px; }
.mapp-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.mapp-cifras li { padding: 10px 6px; border-radius: 12px; background: var(--papel-2); text-align: center; }
.mapp-cifras b { display: block; font: 500 20px/1 var(--serif); letter-spacing: -.03em; }
.mapp-cifras small { font-size: 8.5px; color: var(--gris); }
.mapp-barra {
  position: absolute; left: 8px; right: 8px; bottom: 8px; display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px; border-radius: 18px; background: var(--papel-2);
}
.mapp-barra button { display: grid; justify-items: center; gap: 2px; border: 0; background: none; padding: 4px 0; border-radius: 12px; cursor: pointer; font: 500 8.5px/1 var(--sans); color: var(--gris); }
.mapp-barra svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mapp-barra button[aria-selected="true"] { background: var(--blanco); color: var(--tinta); }
.nota-app { margin-top: 12px; font-size: 14px; color: var(--gris); }

/* ── Imprenta: invitación física como pieza ───────────────────────────── */
.p-invitacion { width: 190px; aspect-ratio: 5 / 7; padding: 18px 14px; display: grid; align-content: center; justify-items: center; gap: 5px; }
.p-invitacion .pre { font: 600 7px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gris); }
.p-invitacion .nombres { font: 500 22px/1 var(--serif); letter-spacing: -.04em; margin: 4px 0 2px; }
.p-invitacion .nombres span { color: #B4975F; }
.p-invitacion .txt { font-size: 9.5px; color: var(--tinta-2); }
.p-invitacion hr { width: 28px; border: 0; border-top: 1px solid #B4975F; margin: 4px 0; }

@media (min-width: 900px) {
  .tarjeta-app { padding: 40px; }
  .movil-app { width: 300px; }
  .bajar { width: 60px; height: 60px; }
  .bajar .circulo-anillo { width: 54px; height: 54px; }
}

/* ── Portada v4 (Jota, 9-nov): la marca enorme detrás de los anillos ───── */
.portada { position: relative; overflow: hidden; }
.portada-anillo { min-height: min(62svh, 520px); }
@media (min-width: 900px) {
}

/* ── Paleta: dónde va cada color ──────────────────────────────────────── */
.tarjeta-inv, .tarjeta-app { background: var(--cielo); }
.tarjeta-imp { background: var(--albaricoque); }
.imp-mini { background: var(--albaricoque); }
.imp-mini[aria-selected="true"] { background: var(--melocoton); }
.interruptor, .pildora { background: var(--crema); }
.inv-parejas button { background: var(--crema); }
.intereses input:checked + span { background: var(--melocoton); border-color: var(--melocoton); color: var(--tinta); }
.grupo-nota { background: var(--crema); }
.boton-papel { background: var(--melocoton); }
.mapp-cuenta, .mapp-cifras li, .mapp-horario li > div { background: var(--crema); }
.mapp-barra { background: var(--albaricoque); }
.app-pestanas span { background: var(--crema); }
.app-lista .av { background: var(--albaricoque); }
.sobre { background: linear-gradient(160deg, var(--albaricoque), var(--melocoton)); }

/* ── La marca viajera (v8, Jota 9-nov) ─────────────────────────────────────
   Tres líneas, a la izquierda. Grande en la portada, DETRÁS de los anillos (el
   lienzo va por encima); al salir de la portada se hace pequeña y sube hasta
   ser el logo de arriba, en el mismo tiempo que vuelan los anillos (1,7 s).
   Es un único elemento fijo: no desaparece y aparece, viaja. */
/* Ojo: solo la marca de la cabecera ([data-marca]); el logo del pie también es
   .logo y no debe moverse de su sitio (v8 lo clavaba arriba, en crema). */
.logo[data-marca] {
  position: fixed; z-index: 30; left: var(--lado); top: max(16px, env(safe-area-inset-top));
  font-size: 17px; line-height: .88;
  transition: font-size 1.7s cubic-bezier(.65, 0, .35, 1), top 1.7s cubic-bezier(.65, 0, .35, 1), color .3s ease;
}
.logo[data-marca].grande { top: max(24svh, calc(var(--cab-h) + 70px)); font-size: clamp(60px, 23vw, 120px); }
.logo[data-marca].sin-transicion { transition: none; }
.cab { min-height: 70px; }
/* La marca ya no ocupa sitio en la cabecera: el menú, a la derecha. */
.cab .circulo { margin-left: auto; }
@media (min-width: 900px) {
  .logo[data-marca] { font-size: 19px; }
  .logo[data-marca].grande { top: max(20svh, calc(var(--cab-h) + 30px)); font-size: min(13vw, 22svh, 210px); }
}
@media (prefers-reduced-motion: reduce) { .logo[data-marca] { transition: color .2s ease; } }

/* Sobre zonas oscuras (formulario, pie, fotos), logo, cruz y flecha en claro. */
.logo[data-marca].sobre-oscuro { color: var(--crema); }
.circulo.sobre-oscuro .circulo-x { stroke: var(--crema); }
.bajar.sobre-oscuro svg { stroke: var(--crema); }

/* ── El menú es el anillo (v9, Jota 9-nov) ──────────────────────────────────
   Al abrir, el anillo del botón crece, se centra y se inclina para enseñar su
   canto interior, con las opciones grabadas en cursiva floreada (anillo.js).
   El fondo se desenfoca. Sin 3D, la lista de siempre, en la misma cursiva. */
@font-face {
  font-family: 'Great Vibes'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/great-vibes-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Great Vibes'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/great-vibes-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
.menu-hueco, .menu-mando, .menu-pista { display: none; }
.sin-3d .menu li a { font: 400 42px/1.2 'Great Vibes', cursive; letter-spacing: 0; }
.con-3d .menu {
  /* Velo crema y desenfoque: la página se queda detrás, borrosa. Sin selección
     de texto encima (seleccionar sobre backdrop-filter congela Chrome). */
  background: rgba(255, 252, 225, .42);
  -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
  padding-top: calc(var(--cab-h) + 4px); align-items: stretch;
  transform: none; transition: opacity .45s ease;
  -webkit-user-select: none; user-select: none; touch-action: none; cursor: grab;
}
.con-3d .menu.arrastrando { cursor: grabbing; }
.con-3d .menu-dentro { display: flex; flex-direction: column; align-items: center; height: 100%; text-align: center; }
/* La lista no se ve (el anillo la enseña), pero el teclado y el lector la usan. */
.con-3d .menu ol { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.con-3d .menu-hueco { display: block; position: relative; flex: 1 1 auto; align-self: stretch; min-height: 220px; }
.con-3d .menu-mando {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  position: absolute; left: 0; right: 0; top: var(--menu-bajo, 70%);
}
.con-3d .menu-pista {
  display: block; position: absolute; left: 0; right: 0; top: calc(var(--menu-bajo, 70%) + 56px);
  margin: 0; color: var(--gris); font-size: 13px; transition: opacity .5s ease;
}
.menu-pista.vista { opacity: 0; }
.menu-girar {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--tinta); background: transparent;
  display: grid; place-items: center; padding: 0; cursor: pointer; color: var(--tinta);
  transition: transform .15s ease, background-color .2s ease;
}
.menu-girar:hover { background: rgba(255, 190, 145, .35); }
.menu-girar:active { transform: scale(.94); }
.menu-girar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu-cuenta { min-width: 6ch; font: 500 13px/1 var(--sans); letter-spacing: .08em; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.con-3d .menu-pie { margin-top: 12px; }
/* Con el menú abierto la marca va a la cabecera, como al bajar. */
.menu-abierto .logo[data-marca].grande { top: max(16px, env(safe-area-inset-top)); font-size: 17px; }
@media (min-width: 900px) { .menu-abierto .logo[data-marca].grande { font-size: 19px; } }

/* ── Portada en escritorio (v10, Jota 9-nov: «en PC la maquetación es bastante
   mejorable») ──────────────────────────────────────────────────────────────
   Portada de revista a dos columnas que salen del MISMO tamaño de letra de la
   marca (--marca-f), así nada se pisa con ninguna ventana: a la izquierda la
   marca en tres líneas, centrada en vertical; a la derecha los dos anillos
   (montan un poco sobre el final de la marca: «detrás de los anillos») y, abajo
   a la derecha, el lema en pequeño. La letra se limita por el ancho Y el alto. */
@media (min-width: 900px) {
  :root {
    --lado-portada: max(48px, 4vw);
    --marca-f: min(13.5vw, calc((100svh - 2 * var(--cab-h)) / 2.75), 250px);
  }
  .logo[data-marca] {
    transition: font-size 1.7s cubic-bezier(.65, 0, .35, 1), top 1.7s cubic-bezier(.65, 0, .35, 1),
      left 1.7s cubic-bezier(.65, 0, .35, 1), color .3s ease;
  }
  .logo[data-marca].grande {
    left: var(--lado-portada);
    font-size: var(--marca-f);
    top: max(calc(var(--cab-h) + 4px), calc(50svh - var(--marca-f) * 1.4));
  }
  .menu-abierto .logo[data-marca].grande { left: var(--lado); top: max(16px, env(safe-area-inset-top)); font-size: 19px; }
  .portada {
    height: 100svh; min-height: 480px;
    grid-template-columns: calc(var(--marca-f) * 2.6) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    padding: calc(var(--cab-h) + 4px) var(--lado-portada) max(36px, 5svh);
  }
  .portada-anillo { grid-column: 2; grid-row: 1; min-height: 0; }
  .portada-pie { grid-column: 2; grid-row: 2; justify-self: end; display: block; }
  .lema { font-size: clamp(26px, 2.5vw, 44px); line-height: 1.08; letter-spacing: -.03em; }
  .anillo-svg { width: min(100%, 440px); }
}

/* iPhone (v11): la isla baja la cabecera; sin este margen extra, al terminar la
   portada el logo quedaba pegado al título de Invitaciones. */
@media (max-width: 899px) {
  .portada { padding-bottom: calc(max(28px, env(safe-area-inset-bottom)) + env(safe-area-inset-top, 0px)); }
}
.portada-pie { transition: opacity .3s ease; }
.tras-portada .portada-pie { opacity: 0; }

/* ── Formulario en el iPhone (v13, Jota 9-nov: «la página desborda
   lateralmente en móvil, el campo de fecha es demasiado ancho») ──────────
   El campo de fecha de iOS trae un ancho mínimo propio y, dentro de una
   rejilla (cuyos hijos no encogen por debajo de su contenido), empujaba la
   columna y con ella toda la página hacia fuera. Columnas que sí encogen,
   campos que no pasan del 100 % y la fecha sin la apariencia nativa de iOS. */
.campos { grid-template-columns: minmax(0, 1fr); }
.campo { min-width: 0; }
.campo input, .campo textarea { min-width: 0; max-width: 100%; }
.campo input[type="date"] { -webkit-appearance: none; appearance: none; display: block; text-align: left; }
.campo input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
@media (min-width: 900px) { .campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Y por si algo más se pasa: la página nunca se arrastra de lado. */
html { overflow-x: clip; }

/* v14: la marca la mueve el scroll (tww.js, estilos en línea por fotograma):
   sin transiciones de tamaño ni de sitio, salvo al abrir o cerrar el menú. */
/* v16: se mueve y encoge con transform (la tarjeta gráfica), no con la letra. */
.logo[data-marca].ligada { transition: color .3s ease; transform-origin: 0 0; }
.logo[data-marca].ligada.marca-suave { transition: transform .8s cubic-bezier(.65, 0, .35, 1), color .3s ease; }

/* ── Invitaciones por dentro: el proceso entero (v15, idea de Jota 9-nov) ───
   El invitado confirma en la invitación → su ficha vuela a la app de la pareja →
   les llega el aviso → entra en la lista con su mesa. En escritorio, los dos
   móviles a la vez; en el móvil, uno tras otro. Lo anima tww.js en bucle. */
.inv-vista[data-inv-vista="dentro"] { display: block; padding: 0; }
.inv-escena { position: relative; width: 100%; height: 100%; }
.inv-pasos {
  position: absolute; z-index: 3; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; margin: 0; padding: 4px; list-style: none; white-space: nowrap;
  border-radius: 999px; background: rgba(255, 252, 225, .9); box-shadow: 0 8px 20px -14px rgba(20, 15, 5, .45);
}
.inv-pasos li {
  display: flex; align-items: center; height: 28px; padding: 0 4px; border-radius: 999px;
  font: 500 12px/1 var(--sans); color: var(--tinta-2); transition: background-color .35s ease, color .35s ease, padding .45s cubic-bezier(.2, .7, .2, 1);
}
.inv-pasos b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; border: 1.5px solid currentColor; }
.inv-pasos span { max-width: 0; overflow: hidden; opacity: 0; transition: max-width .45s cubic-bezier(.2, .7, .2, 1), opacity .3s ease, margin .45s ease; }
.inv-pasos li.activo { background: var(--tinta); color: var(--papel); padding: 0 12px 0 4px; }
.inv-pasos li.activo span { max-width: 190px; opacity: 1; margin-left: 8px; }
.inv-pasos li.hecho b { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

.inv-escena .movil {
  position: absolute; top: 62px; left: 50%; width: min(74%, 250px); margin-left: calc(min(74%, 250px) / -2);
  transition: transform .7s cubic-bezier(.65, 0, .35, 1), opacity .6s ease;
}
/* Móvil: uno tras otro (el invitado sale por la izquierda, entra la pareja). */
.inv-escena .movil-pareja { transform: translateX(118%) rotate(4deg); opacity: 0; }
.inv-escena.en-pareja .movil-invitado { transform: translateX(-118%) rotate(-4deg); opacity: 0; }
.inv-escena.en-pareja .movil-pareja { transform: none; opacity: 1; }
@media (min-width: 900px) {
  .inv-escena .movil { top: 70px; width: 232px; margin-left: -116px; }
  .inv-escena .movil-invitado, .inv-escena.en-pareja .movil-invitado { left: 30%; transform: none; opacity: 1; }
  .inv-escena .movil-pareja, .inv-escena.en-pareja .movil-pareja { left: 70%; transform: none; opacity: 1; }
}

/* La invitación del invitado, con su formulario */
.inv-form { position: relative; padding: 20px 14px 12px; gap: 9px; background: linear-gradient(#FFFDF5, var(--blanco) 40%); }
.invf-cab { text-align: center; padding-bottom: 8px; border-bottom: 1px solid var(--linea); }
.invf-nombres { display: block; font: 400 27px/1.15 'Great Vibes', cursive; color: var(--tinta); }
.invf-cab small { color: var(--gris); font-size: 8.5px; letter-spacing: .04em; }
.invf-titulo { margin: 0; font: 600 11px/1.2 var(--sans); text-align: center; }
.invf-campo { display: grid; gap: 4px; }
.invf-etq { font-size: 8px; color: var(--gris); text-transform: uppercase; letter-spacing: .08em; }
.invf-input { height: 26px; padding: 0 8px; display: flex; align-items: center; border: 1px solid var(--linea); border-radius: 8px; font-size: 11px; }
.invf-cursor { width: 1px; height: 13px; margin-left: 1px; background: var(--tinta); animation: parpadea 1s steps(1) infinite; }
@keyframes parpadea { 50% { opacity: 0; } }
.invf-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.invf-chips span { padding: 4px 8px; border-radius: 999px; border: 1px solid var(--linea); font-size: 9.5px; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.invf-chips span.marcado { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.invf-boton { height: 30px; margin-top: 2px; display: grid; place-items: center; border-radius: 999px; background: var(--tinta); color: var(--papel); font: 600 10.5px/1 var(--sans); transition: transform .15s ease; }
.invf-boton.marcado { transform: scale(.95); }
.invf-gracias {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center;
  background: var(--crema); opacity: 0; transition: opacity .45s ease;
}
.enviado .invf-gracias { opacity: 1; }
.invf-gracias svg { width: 40px; height: 40px; fill: none; stroke: var(--verde); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.invf-gracias b { font: 400 30px/1 'Great Vibes', cursive; }
.invf-gracias small { font-size: 9.5px; color: var(--gris); }

/* La ficha que viaja y el dedo que toca */
.inv-ficha {
  position: absolute; left: 0; top: 0; z-index: 4; padding: 0 8px; border-radius: 12px; background: var(--blanco);
  box-shadow: 0 18px 36px -14px rgba(20, 15, 5, .5); opacity: 0; pointer-events: none; will-change: transform, opacity;
}
.inv-ficha .app-lista li { border: 0; }
.inv-toque {
  position: absolute; z-index: 5; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: rgba(28, 27, 25, .18); border: 2px solid rgba(28, 27, 25, .5); opacity: 0; pointer-events: none;
}
.inv-toque.pulsa { animation: toque .6s ease-out; }
@keyframes toque { 0% { opacity: 0; transform: scale(1.7); } 30% { opacity: 1; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.25); } }

/* La fila nueva en la app y el aviso */
.app-lista li.nueva {
  max-height: 0; padding-block: 0; border-bottom-width: 0; opacity: 0; overflow: hidden; border-radius: 8px;
  transition: max-height .32s ease, padding .32s ease, opacity .25s ease, background-color 1.2s ease;
}
.app-lista li.nueva.abierta { max-height: 46px; padding-block: 7px; border-bottom-width: 1px; }
.app-lista li.nueva.dentro { opacity: 1; background-color: rgba(255, 190, 145, .45); }
.app-lista li.nueva.asentada { background-color: transparent; }
.app-lista small.destello { animation: destello 1.2s ease; }
@keyframes destello { 0%, 40% { color: #9A4A16; font-weight: 600; } 100% { color: var(--gris); } }
.movil-pareja .movil-pantalla { position: relative; }
.app-aviso {
  position: absolute; z-index: 3; left: 10px; right: 10px; top: 8px; display: grid; grid-template-columns: 22px 1fr; gap: 7px; align-items: center;
  padding: 7px 9px; border-radius: 14px; background: #FFFEF4; border: 1px solid #E5C893; box-shadow: 0 12px 26px -14px rgba(20, 15, 5, .5);
  transform: translateY(-150%); transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.app-aviso.visible { transform: none; }
.app-aviso .av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--albaricoque); font-size: 8px; font-weight: 600; }
.app-aviso b { display: block; font-size: 9.5px; font-weight: 700; color: #9A4A16; }
.app-aviso small { display: block; font-size: 8.5px; color: var(--tinta-2); }

/* ── La app con la estética del modo bodas del OS (Jota, 9-nov) ─────────────
   Cabecera en píldora melocotón con «the white wedding», el menú redondo y, en
   el apartado de usuario, cada uno de la pareja DENTRO DE SU ANILLO. Fondo
   crema, superficies y bordes dorados claros, lo activo en melocotón. */
.movil-tww .movil-pantalla { background: #FFFCE1; padding-top: 10px; }
.movil-app.movil-tww .movil-pantalla { padding: 10px 10px 62px; }
.app-top {
  display: flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 4px 0 11px;
  border-radius: 999px; background: #FFBE91;
}
.app-marca { flex: 1; min-width: 0; font: 700 10.5px/1 var(--sans); letter-spacing: -.035em; white-space: nowrap; }
.app-hamb { width: 22px; height: 22px; border-radius: 50%; display: grid; place-content: center; gap: 2.5px; background: rgba(154, 74, 22, .12); }
.app-hamb i { display: block; width: 9px; height: 1.3px; border-radius: 1px; background: var(--tinta); }
.app-pareja { position: relative; display: flex; align-items: center; padding-left: 2px; }
.anillo-av {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font: 700 9px/1 var(--sans); color: var(--tinta);
  border: 2.2px solid transparent;
  background: var(--fondo-av, #FFDDB0) padding-box,
    linear-gradient(135deg, #F6EAD0, #C9A766 35%, #F3E3BE 55%, #A9874D 80%, #E9D3A0) border-box;
  box-shadow: 0 1px 2px rgba(80, 55, 15, .25);
}
.anillo-av.a1 { --fondo-av: #FFDDB0; }
.anillo-av.a2 { --fondo-av: #CFEBFF; margin-left: -8px; }
.app-badge {
  position: absolute; top: -5px; right: -5px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px;
  display: grid; place-items: center; font: 700 7.5px/1 var(--sans); font-style: normal;
  background: #FFFEF4; color: #9A4A16; border: 1px solid #E5C893;
  opacity: 0; transform: scale(.4); transition: opacity .3s ease, transform .35s cubic-bezier(.2, .9, .3, 1.4);
}
.app-badge.visible { opacity: 1; transform: none; }
.movil-tww .app-pestanas span { background: #FFF1CF; }
.movil-tww .app-pestanas .on { background: rgba(255, 190, 145, .55); color: #9A4A16; font-weight: 600; }
.movil-tww .app-lista li { border-bottom-color: #F0DDB6; }
.movil-tww .app-barra { background: #FFF1CF; }
.movil-tww .mapp-cuenta, .movil-tww .mapp-horario li > div, .movil-tww .mapp-cifras li { background: #FFF1CF; }
.movil-tww .mapp-lista li, .movil-tww .mapp-pedidos > li { border-bottom-color: #F0DDB6; }
.movil-tww .mapp-barra { background: #FFF1CF; border: 1px solid #F0DDB6; }
.movil-tww .mapp-barra button[aria-selected="true"] { background: rgba(255, 190, 145, .55); color: #9A4A16; }
.movil-tww .mapp-horario li > div::before { box-shadow: 0 0 0 3px #FFFCE1; }

/* ── La reserva, integrada en la página (v17, Jota 9-nov: «debe estar
   integrada en el diseño de la web, no en un mockup») ──────────────────────
   La invitación es una tarjeta de papel con su formulario y la lista de la
   pareja, un panel de la web. La ficha viaja por el puente entre las dos: en
   escritorio, lado a lado; en el móvil, de arriba abajo. */
.tarjeta-inv:has(> .inv-vista[data-inv-vista="dentro"]:not([hidden])) { aspect-ratio: auto; }
.inv-vista[data-inv-vista="dentro"] { height: auto; }
.inv-escena { height: auto; }
.inv-flujo { display: grid; padding: 62px 14px 76px; }
.rsvp, .lista-boda {
  position: relative; overflow: hidden; border-radius: 22px; border: 1px solid #F0DDB6;
  box-shadow: 0 22px 46px -30px rgba(20, 15, 5, .45);
}
.rsvp { display: grid; gap: 11px; padding: 20px 18px 18px; background: linear-gradient(#FFFDF5, var(--blanco) 45%); }
.rsvp-cab { text-align: center; padding-bottom: 10px; border-bottom: 1px solid var(--linea); }
.rsvp-nombres { display: block; font: 400 34px/1.1 'Great Vibes', cursive; }
.rsvp-cab small { color: var(--gris); font-size: 11px; letter-spacing: .04em; }
.rsvp-titulo { margin: 0; text-align: center; font: 600 14px/1.2 var(--sans); }
.rsvp .invf-etq { font-size: 10px; }
.rsvp .invf-input { height: 38px; padding: 0 12px; border-radius: 12px; font-size: 15px; }
.rsvp .invf-cursor { height: 17px; }
.rsvp .invf-chips { gap: 6px; }
.rsvp .invf-chips span { padding: 7px 12px; font-size: 13px; }
.rsvp .invf-boton { height: 44px; margin-top: 4px; font-size: 14px; }
.rsvp .invf-gracias b { font-size: 40px; }
.rsvp .invf-gracias small { font-size: 13px; }
.rsvp .invf-gracias svg { width: 52px; height: 52px; }
/* El puente: un hilo punteado con su flecha (vertical en el móvil). */
.inv-puente { position: relative; height: 40px; display: grid; place-items: center; }
.inv-puente::before { content: ''; width: 0; height: 100%; border-left: 2px dotted rgba(28, 27, 25, .28); }
.inv-puente i { position: absolute; bottom: 4px; width: 9px; height: 9px; border-right: 2px solid rgba(28, 27, 25, .4); border-bottom: 2px solid rgba(28, 27, 25, .4); transform: rotate(45deg); }
/* La lista de la pareja, con la estética del modo bodas del OS. */
.lista-boda { display: grid; gap: 12px; padding: 16px 16px 8px; background: #FFFCE1; }
.lista-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lista-cab b { display: block; font: 600 16px/1.2 var(--sans); letter-spacing: -.01em; }
.lista-cab small { display: block; font-size: 11.5px; color: var(--gris); }
.lista-boda .anillo-av { width: 32px; height: 32px; font-size: 11px; border-width: 2.6px; }
.lista-boda .anillo-av.a2 { margin-left: -10px; }
.lista-boda .app-badge { top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; font-size: 9.5px; }
.lista-boda .app-cifra { font-size: 12.5px; }
.lista-boda .app-cifra b { font-size: 30px; }
.lista-boda .app-barra { height: 6px; background: #FFDDB0; }
.lista-boda .app-lista li, .inv-ficha .app-lista li { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; padding: 9px 2px; border-bottom-color: #F0DDB6; }
.lista-boda .app-lista li.nueva { padding-block: 0; }
.lista-boda .app-lista li.nueva.abierta { max-height: 60px; padding-block: 9px; }
.lista-boda .app-lista li:last-child { border-bottom: 0; }
.lista-boda .app-lista .av, .inv-ficha .app-lista .av { width: 32px; height: 32px; font-size: 11px; }
.lista-boda .app-lista b, .inv-ficha .app-lista b { font-size: 14px; }
.lista-boda .app-lista small, .inv-ficha .app-lista small { font-size: 11.5px; }
.lista-boda .app-lista em, .inv-ficha .app-lista em { font-size: 11px; padding: 3px 9px; }
.inv-ficha { padding: 0 10px; border-radius: 16px; }
.lista-boda .app-aviso { left: 12px; right: 12px; top: 10px; grid-template-columns: 30px 1fr; padding: 9px 12px; border-radius: 16px; }
.lista-boda .app-aviso .av { width: 30px; height: 30px; font-size: 10.5px; }
.lista-boda .app-aviso b { font-size: 12.5px; }
.lista-boda .app-aviso small { font-size: 11.5px; }
@media (min-width: 900px) {
  .inv-flujo { grid-template-columns: minmax(0, 1.18fr) 52px minmax(0, 1fr); align-items: center; padding: 70px 26px 30px; }
  .inv-puente { height: auto; align-self: stretch; }
  .inv-puente::before { width: 100%; height: 0; border-left: 0; border-top: 2px dotted rgba(28, 27, 25, .28); }
  .inv-puente i { bottom: auto; right: 2px; transform: rotate(-45deg); }
}

/* ── La reserva de verdad (v18): controles reales con sus microinteracciones ── */
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rsvp input.invf-input {
  width: 100%; font: 400 16px/1 var(--sans); color: var(--tinta); background: var(--blanco);
  border: 1px solid var(--linea); outline: none; transition: border-color .2s ease, box-shadow .25s ease;
}
.rsvp input.invf-input::placeholder { color: #B8A88C; }
.rsvp input.invf-input:focus { border-color: #E5C893; box-shadow: 0 0 0 4px rgba(255, 190, 145, .35); }
.rsvp input.invf-input.llama { animation: llama 1.4s ease-out; }
@keyframes llama { 0% { box-shadow: 0 0 0 0 rgba(255, 190, 145, .7); } 100% { box-shadow: 0 0 0 12px rgba(255, 190, 145, 0); } }
.rsvp input.invf-input.sacude { animation: sacude .38s cubic-bezier(.36, .07, .19, .97); border-color: #E59A8A; }
@keyframes sacude { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.invf-chips button {
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--linea); background: var(--blanco);
  font: 500 13px/1 var(--sans); color: var(--tinta); cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
}
.invf-chips button:hover { border-color: #E5C893; }
.invf-chips button:active { transform: scale(.95); }
.invf-chips button[aria-checked="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.rsvp button.invf-boton { width: 100%; border: 0; cursor: pointer; transition: transform .12s ease, background-color .2s ease; }
.rsvp button.invf-boton:hover { background: #33312C; }
.rsvp button.invf-boton:active { transform: scale(.97); }
.rsvp-nota { margin: -2px 0 0; text-align: center; font-size: 11.5px; color: var(--gris); }
.rsvp .invf-gracias { pointer-events: none; }
.enviado .rsvp .invf-gracias { pointer-events: auto; }
.invf-gracias svg circle { stroke-dasharray: 63; stroke-dashoffset: 63; }
.invf-gracias svg path { stroke-dasharray: 16; stroke-dashoffset: 16; }
.enviado .invf-gracias svg circle { animation: traza .5s .1s ease-out forwards; }
.enviado .invf-gracias svg path { animation: traza .35s .5s ease-out forwards; }
@keyframes traza { to { stroke-dashoffset: 0; } }
.enviado .invf-gracias b { animation: aparece .45s .25s cubic-bezier(.2, .7, .2, 1) both; }
.invf-otra {
  margin-top: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--linea); background: var(--blanco);
  font: 500 13px/1 var(--sans); color: var(--tinta); cursor: pointer; transition: border-color .2s ease, transform .12s ease;
}
.invf-otra:hover { border-color: #E5C893; }
.invf-otra:active { transform: scale(.96); }
.app-badge.salta { animation: salta .45s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes salta { 0% { transform: scale(.4); } 60% { transform: scale(1.2); } 100% { transform: none; } }
.app-lista .no { background: #EFE6E3; color: #8E4B3F; }

/* ── El velo (v19, Jota 9-nov: «mejor que el blurreado, que entre un velo
   translúcido de fondo») ───────────────────────────────────────────────────
   Al abrir el menú cae desde arriba un velo crema translúcido, como el tul de
   un velo de novia: la página sigue viéndose detrás, nítida pero apagada (sin
   desenfoque, que además pesaba en el iPhone). Baja con el borde difuminado y,
   al cerrar, sube y se va. El anillo con las opciones queda delante. */
.con-3d .menu {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  opacity: 1; transform: none; transition: none;
}
.con-3d .menu::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 120%; z-index: -1; pointer-events: none;
  /* El tul: una trama de puntos dorados muy fina sobre crema translúcido. */
  background:
    radial-gradient(circle, rgba(201, 167, 102, .18) 0 .7px, transparent 1.1px) 0 0 / 6px 6px,
    linear-gradient(rgba(255, 252, 225, .93), rgba(255, 252, 225, .84));
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 83%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 83%, transparent 100%);
  transform: translateY(-101%);
  transition: transform .55s cubic-bezier(.55, 0, .8, .4); /* al cerrar sube y acelera */
}
.con-3d .menu.abierto::before { transform: none; transition: transform .85s cubic-bezier(.16, 1, .3, 1); } /* cae y se posa */
.con-3d .menu-dentro { opacity: 0; transition: opacity .2s ease; }
.con-3d .menu.abierto .menu-dentro { opacity: 1; transition: opacity .45s .35s ease; }