/* Invitación de Abre y Ven. Todos los colores y tipografías salen de variables que el JS rellena con el
   diseño de cada cliente, así que esta hoja sirve para cualquier estilo. */
:root{
  --fondo:#ff4fa8; --acento:#ff2e9a; --texto:#1a0f14; --sobre:#ffb3d6; --tarjeta:#fde8f1;
  --claro:#ffc3e1; --oscuro:#5a1438; --texto-boton:#ffffff;
  --f-titulo:"Permanent Marker", Georgia, serif; --f-texto:"Fredoka", system-ui, sans-serif;
  --patron:none; --glitter:none; --sello-mask:none;
  --lcd:#d9d3e8; --lcd-ink:#2a1b3d;
  --env-w:min(84vw, 380px);
  --tw:min(92vw, calc((100vh - 200px) * 2 / 3), 540px);
}
@supports (height:100dvh){ :root{ --tw:min(92vw, calc((100dvh - 200px) * 2 / 3), 540px); } }

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;min-height:100%}
body{
  background-color:var(--fondo); background-image:var(--patron); background-size:300px 300px;
  color:var(--texto); font-family:var(--f-texto);
  overflow:hidden; -webkit-tap-highlight-color:transparent;
}
body.degradado{background-image:radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--fondo) 55%, #fff) 0%, var(--fondo) 55%, color-mix(in srgb, var(--fondo) 75%, var(--acento)) 100%)}
body.scroll{overflow-x:hidden; overflow-y:auto}
body.modal{overflow:hidden}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.35), rgba(255,255,255,0) 58%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, color-mix(in srgb, var(--oscuro) 42%, transparent));
}

.etapa{
  position:relative; z-index:1;
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
  padding:max(20px, env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
  transition:opacity .45s ease, transform .45s ease;
}
.etapa.saliendo{opacity:0; transform:scale(1.06)}
/* La cinta derecha de la tarjeta sobresale ~11 px: sin recorte, en el móvil la página se desplaza de lado (15-sep-2026). */
.etapa{overflow-x:clip}

/* ---------- pantalla de móvil ---------- */
.pantalla-movil{
  font-family:"VT323", "Courier New", monospace; color:var(--lcd-ink);
  background-color:var(--lcd);
  background-image:repeating-linear-gradient(0deg, rgba(42,27,61,.07) 0 1px, transparent 1px 3px);
  border-radius:14px; padding:8px 18px 10px; width:min(78vw, 300px);
  box-shadow:inset 0 2px 7px rgba(0,0,0,.35), 0 0 0 5px var(--claro), 0 0 0 7px var(--oscuro), 0 12px 24px color-mix(in srgb, var(--oscuro) 35%, transparent);
}
.estado-movil{display:flex; justify-content:space-between; font-size:18px; opacity:.7; line-height:1}
.msg-movil{margin:4px 0 0; font-size:30px; line-height:1; letter-spacing:.02em}
.de-movil{margin:2px 0 0; font-size:20px; line-height:1}
.parpadeo{animation:parpadeo 1s steps(1) infinite}
@keyframes parpadeo{50%{opacity:0}}

/* ---------- sobre ---------- */
.sobre{
  appearance:none; border:0; padding:0; background:none; cursor:pointer; font:inherit; color:inherit;
  position:relative; width:var(--env-w); aspect-ratio:1.45; perspective:1100px;
  filter:drop-shadow(0 18px 20px color-mix(in srgb, var(--oscuro) 42%, transparent));
  animation:flotar 3.2s ease-in-out infinite;
}
.sobre:focus-visible{outline:3px dashed var(--texto); outline-offset:12px}
@keyframes flotar{50%{transform:translateY(-8px) rotate(-1.2deg)}}
.sobre.abriendo{animation:none}

.sobre-trasera{position:absolute; inset:0; border-radius:6px; background:linear-gradient(color-mix(in srgb, var(--sobre) 78%, var(--oscuro)), color-mix(in srgb, var(--sobre) 70%, var(--oscuro)))}
.carta{
  position:absolute; left:6%; right:6%; top:7%; height:86%; z-index:2; border-radius:3px;
  background-color:var(--tarjeta);
  background-image:
    linear-gradient(90deg, transparent 13%, color-mix(in srgb, var(--acento) 45%, transparent) 13% calc(13% + 1.5px), transparent 0),
    repeating-linear-gradient(transparent 0 calc(var(--env-w) * .07), color-mix(in srgb, var(--oscuro) 13%, transparent) 0 calc(var(--env-w) * .07 + 1px));
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:9% 8% 0;
  color:var(--texto); text-align:center;
  transition:transform .9s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 1px 4px rgba(0,0,0,.15);
}
.carta b{font-family:var(--f-titulo); font-weight:400; font-size:calc(var(--env-w) * .095); line-height:1.05; transform:rotate(-3deg); text-wrap:balance}
.carta small{font-size:calc(var(--env-w) * .052)}

.sobre-frente{
  position:absolute; inset:0; z-index:3; border-radius:6px;
  background:linear-gradient(165deg, color-mix(in srgb, var(--sobre) 62%, #fff), var(--sobre) 55%, color-mix(in srgb, var(--sobre) 88%, var(--oscuro)));
  clip-path:polygon(0 0, 50% 57%, 100% 0, 100% 100%, 0 100%);
}
.lado{position:absolute; inset:0}
.lado.l{clip-path:polygon(0 0, 50% 57%, 0 100%); background:linear-gradient(90deg, color-mix(in srgb, var(--oscuro) 18%, transparent), color-mix(in srgb, var(--oscuro) 6%, transparent))}
.lado.r{clip-path:polygon(100% 0, 50% 57%, 100% 100%); background:linear-gradient(270deg, color-mix(in srgb, var(--oscuro) 22%, transparent), color-mix(in srgb, var(--oscuro) 7%, transparent))}
.remite{
  position:absolute; left:8%; bottom:9%; display:flex; flex-direction:column; text-align:left;
  font-family:var(--f-texto); font-size:calc(var(--env-w) * .052); line-height:1.2; transform:rotate(-2deg); color:var(--texto);
}
.sello-postal{
  position:absolute; right:7%; bottom:10%; width:19%; aspect-ratio:.84; padding:5%;
  background:#fff; outline:3px dotted color-mix(in srgb, var(--acento) 45%, #fff); outline-offset:-2px;
  box-shadow:0 1px 3px rgba(0,0,0,.25); transform:rotate(4deg);
}
.sello-postal i{
  display:grid; place-items:center; width:100%; height:100%; font-style:normal; text-align:center;
  background:var(--acento); color:var(--texto-boton); font-family:var(--f-texto); font-weight:700;
  font-size:calc(var(--env-w) * .042); line-height:.95;
}
.matasellos{
  position:absolute; right:25%; bottom:20%; width:22%; aspect-ratio:1; border-radius:50%;
  border:2px solid color-mix(in srgb, var(--texto) 45%, transparent); display:grid; place-items:center;
  transform:rotate(-14deg); font-family:"Courier New", monospace; font-weight:700; font-size:calc(var(--env-w) * .027);
  color:color-mix(in srgb, var(--texto) 55%, transparent); text-align:center; line-height:1.05;
}

.solapa{
  position:absolute; left:0; right:0; top:0; height:60%; z-index:4;
  transform-origin:50% 0; transform-style:preserve-3d;
  transition:transform .75s cubic-bezier(.5,0,.3,1);
}
.cara{position:absolute; inset:0; clip-path:polygon(0 0, 100% 0, 50% 100%); -webkit-backface-visibility:hidden; backface-visibility:hidden; border-radius:6px 6px 0 0}
.cara-fuera{background:linear-gradient(color-mix(in srgb, var(--sobre) 90%, var(--oscuro)), color-mix(in srgb, var(--sobre) 80%, var(--oscuro)))}
.cara-dentro{
  transform:rotateX(180deg);
  background-color:var(--fondo); background-image:linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)), var(--patron); background-size:auto, 150px 150px;
}
.solapa-sombra{position:absolute; left:0; right:0; top:0; height:63%; z-index:3; clip-path:polygon(0 0, 100% 0, 50% 100%); background:color-mix(in srgb, var(--oscuro) 20%, transparent); transition:opacity .2s}
.abierto .solapa{transform:rotateX(180deg)}
.abierto .solapa-sombra{opacity:0}
.solapa-atras .solapa{z-index:1}
.sube .carta{transform:translateY(-60%)}

.lacre{
  position:absolute; left:50%; top:60%; z-index:5; width:calc(var(--env-w) * .25); aspect-ratio:1;
  transform:translate(-50%, -50%) rotate(-6deg);
  filter:drop-shadow(0 3px 3px color-mix(in srgb, var(--oscuro) 40%, transparent));
}
.lacre-borde,.lacre-brillo{position:absolute; inset:0; -webkit-mask:var(--sello-mask) center / contain no-repeat; mask:var(--sello-mask) center / contain no-repeat}
.lacre-borde{background:#fff}
.lacre-brillo{inset:7%; background-image:var(--glitter), radial-gradient(circle at 34% 28%, var(--claro), var(--acento) 72%); background-size:90px 90px, auto}
.lacre-texto{
  position:absolute; inset:0 0 6% 0; display:grid; place-items:center;
  font-family:var(--f-titulo); font-size:calc(var(--env-w) * .09); color:#fff;
  text-shadow:2px 2px 0 var(--texto), -1px -1px 0 var(--texto), 1px -1px 0 var(--texto), -1px 1px 0 var(--texto);
}
.abriendo .lacre{animation:saltar-lacre .45s ease-in forwards}
@keyframes saltar-lacre{
  40%{transform:translate(-50%, -50%) scale(1.25) rotate(-12deg)}
  100%{transform:translate(-50%, -50%) scale(0) rotate(30deg); opacity:0}
}

.toca{
  margin:0; font-family:var(--f-texto); font-weight:600; font-size:21px; line-height:1.15; text-align:center; max-width:90vw;
  background:var(--tarjeta); color:var(--texto); border:2px solid var(--texto); padding:8px 16px 7px;
  transform:rotate(-2deg); box-shadow:3px 3px 0 var(--texto);
}
.latido{display:inline-block; color:var(--acento); animation:latir 1.1s ease-in-out infinite}
@keyframes latir{15%{transform:scale(1.35)} 30%{transform:scale(1)} 45%{transform:scale(1.2)}}
.saltar{
  appearance:none; border:0; cursor:pointer; padding:8px 14px; border-radius:999px;
  font:600 15px/1.2 var(--f-texto); background:color-mix(in srgb, var(--tarjeta) 88%, transparent); color:var(--texto);
  text-decoration:underline; text-underline-offset:3px;
}
.saltar:focus-visible{outline:2px solid var(--texto); outline-offset:2px}

/* ---------- rasca ---------- */
#etapa-rasca{justify-content:flex-start; gap:14px; opacity:0; transform:translateY(24px)}
#etapa-rasca.dentro{opacity:1; transform:none}
.pegatina{
  margin:0; font-family:var(--f-titulo); font-size:clamp(22px, 6.4vw, 30px); line-height:1.1; text-align:center;
  background:var(--texto); color:var(--tarjeta); padding:6px 16px 4px; transform:rotate(-2deg); box-shadow:4px 4px 0 var(--claro);
}
.pegatina em{color:var(--claro); font-style:normal}
.ticket{
  position:relative; width:var(--tw); aspect-ratio:2/3; flex:none; background:var(--tarjeta);
  box-shadow:0 0 0 6px #fff, 0 20px 40px color-mix(in srgb, var(--oscuro) 45%, transparent);
  container-type:inline-size;
}
.ticket-img,.ticket canvas{position:absolute; inset:0; width:100%; height:100%; display:block; -webkit-user-select:none; user-select:none; object-fit:cover}
.ticket canvas{touch-action:none; cursor:crosshair; transition:opacity .8s ease; z-index:2}
.cinta{position:absolute; z-index:3; width:28%; height:7%; pointer-events:none; background:rgba(255,255,255,.55); box-shadow:0 1px 3px rgba(0,0,0,.15)}
.cinta.ci{top:-2.5%; left:-7%; transform:rotate(-36deg)}
.cinta.cd{bottom:-2.5%; right:-7%; transform:rotate(-36deg)}
.chispa{
  position:absolute; z-index:4; pointer-events:none; color:#fff; font-size:17px; line-height:1;
  text-shadow:0 0 6px var(--acento), 0 0 2px var(--acento); animation:chispa .7s ease-out forwards;
}
@keyframes chispa{
  from{transform:translate(-50%, -50%) scale(.4); opacity:1}
  to{transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2) rotate(90deg); opacity:0}
}

/* tarjeta generada con los datos del cliente */
.tarjeta{position:absolute; inset:0; background:var(--tarjeta); color:var(--texto); display:flex; padding:5cqw}
.tarjeta-marco{
  flex:1; min-height:0; overflow:hidden;
  border:.6cqw solid color-mix(in srgb, var(--acento) 70%, transparent);
  outline:.3cqw solid color-mix(in srgb, var(--acento) 35%, transparent); outline-offset:-2.4cqw;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:1.8cqw; padding:7cqw 6cqw;
}
.tarjeta-marco p,.tarjeta-marco h1{margin:0}
.t-sub{font-size:4.6cqw; text-transform:uppercase; letter-spacing:.14em; color:var(--acento); font-weight:700}
.t-titulo{font-family:var(--f-titulo); font-weight:400; font-size:12cqw; line-height:1.04; text-wrap:balance; overflow-wrap:anywhere}
.t-sep{color:var(--acento); font-size:5cqw}
.t-shh{font-size:4.2cqw; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--acento)}
.aviso-sorpresa{margin:0; padding:10px 12px; border-radius:10px; background:color-mix(in srgb, var(--acento) 16%, transparent); font-size:14px; font-weight:700; line-height:1.35}
.t-dibujo{width:22cqw; max-width:120px; margin:0 auto 1cqw; color:var(--acento)}
.t-dibujo svg{display:block; width:100%; height:auto; max-height:26cqw}
.t-fecha{font-size:5.6cqw; font-weight:700}
.t-pendiente{opacity:.55; font-weight:500}
.t-hora,.t-lugar{font-size:5cqw}
.tarjeta-marco .t-mensaje{margin-top:2cqw; font-size:4.6cqw; line-height:1.35; max-width:64cqw; text-wrap:pretty}
.tarjeta-marco .t-firma{margin-top:2cqw; font-family:var(--f-titulo); font-size:7cqw; color:var(--acento); line-height:1.1}

.progreso{width:var(--tw); font-family:var(--f-texto); color:var(--texto)}
.progreso-fila{display:flex; justify-content:space-between; gap:12px; font-size:15px; font-weight:600; line-height:1; margin-bottom:5px}
.progreso-fila span{background:color-mix(in srgb, var(--tarjeta) 88%, transparent); padding:4px 8px; border-radius:6px}
.progreso-fila span:last-child{font-variant-numeric:tabular-nums}
.barra{height:18px; background:#fff; border:2px solid var(--texto); padding:2px; box-shadow:2px 2px 0 var(--texto)}
.relleno{height:100%; width:0; background:repeating-linear-gradient(90deg, var(--acento) 0 11px, transparent 11px 14px); transition:width .15s linear}

.detalles{
  width:var(--tw); background:var(--tarjeta); color:var(--texto); border:2px solid var(--texto);
  box-shadow:4px 4px 0 var(--texto); padding:14px 16px; display:grid; gap:12px;
}
.det-fila{display:grid; grid-template-columns:92px 1fr; gap:10px; align-items:baseline; font-size:16px; line-height:1.4}
.det-fila p{margin:0}
.det-fila.det-ancha{display:block}
.det-fila.det-ancha .det-etq{display:block; margin-bottom:8px}
.det-etq{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--acento)}
.det-titulo{font-weight:700}
.firma{justify-self:center; margin-top:2px; font-size:13px; color:var(--texto); opacity:.75; text-underline-offset:3px}
.firma:hover, .firma:focus-visible{opacity:1}
.boton-mapa{
  display:inline-flex; margin-top:8px; padding:8px 14px; border-radius:999px; border:2px solid var(--texto);
  background:#fff; color:#1a0f14; font-weight:700; text-decoration:none;
}
.boton-mapa:focus-visible{outline:3px solid var(--acento); outline-offset:2px}
body.scroll #etapa-rasca{padding-bottom:calc(210px + env(safe-area-inset-bottom))}

/* ---------- barra inferior ---------- */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  padding:26px 14px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgba(20,10,16,.86) 55%, rgba(20,10,16,0));
  transform:translateY(110%); transition:transform .6s cubic-bezier(.2,.9,.2,1);
}
.dock.visible{transform:none}
.dock-dentro{max-width:540px; margin:0 auto; display:grid; gap:9px}
.cuenta{
  margin:0; text-align:center; font-family:"VT323", "Courier New", monospace; font-size:23px; line-height:1;
  color:var(--lcd-ink); background:var(--lcd); border-radius:10px; padding:6px 12px 5px;
  font-variant-numeric:tabular-nums; box-shadow:inset 0 2px 5px rgba(0,0,0,.3);
}
.acciones{display:grid; grid-template-columns:1.3fr 1fr; gap:9px}
.gel{
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:52px; padding:6px 14px; border-radius:999px; text-decoration:none; cursor:pointer;
  font:700 16px/1.1 var(--f-texto); color:var(--texto-boton);
  background:linear-gradient(color-mix(in srgb, var(--acento) 68%, #fff), var(--acento) 55%, color-mix(in srgb, var(--acento) 80%, #000));
  border:2px solid color-mix(in srgb, var(--acento) 55%, #000);
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.2), 0 3px 0 color-mix(in srgb, var(--acento) 45%, #000);
}
.gel::before{content:""; position:absolute; left:9%; right:9%; top:3px; height:44%; border-radius:999px; background:linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.06))}
.gel span{position:relative}
.gel.plata{color:#1a0f14; background:linear-gradient(#ffffff, #dcdee6 55%, #b3b6c4); border-color:#8d90a0; box-shadow:inset 0 -3px 6px rgba(0,0,0,.12), 0 3px 0 #6f7282}
button.gel{appearance:none; width:100%}
button.gel:disabled{opacity:.7; cursor:progress}
.gel:active{transform:translateY(2px)}
.gel:focus-visible{outline:3px solid #fff; outline-offset:3px}
.musica{
  justify-self:center; appearance:none; border:1px solid rgba(255,255,255,.55); background:transparent; color:#fff;
  border-radius:999px; padding:6px 16px; font:600 14px/1 var(--f-texto); cursor:pointer;
}
.musica[aria-pressed="true"]{background:rgba(255,255,255,.2)}
.musica:focus-visible{outline:2px solid #fff; outline-offset:2px}

/* ---------- ventana de confirmación ---------- */
.hoja{position:fixed; inset:0; z-index:40; display:flex; align-items:flex-end; justify-content:center; padding:12px 10px calc(10px + env(safe-area-inset-bottom))}
@media (min-width:600px){ .hoja{align-items:center} }
.hoja-fondo{position:absolute; inset:0; background:rgba(20,10,16,.62)}
.ventana{
  position:relative; width:min(100%, 460px); max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--tarjeta); color:var(--texto); border:2px solid var(--texto); border-radius:12px; box-shadow:6px 6px 0 var(--texto);
  animation:entrar .35s cubic-bezier(.2,.9,.2,1);
}
.ventana:focus{outline:none}
@keyframes entrar{from{transform:translateY(40px); opacity:0}}
.ventana-barra{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex:none;
  padding:7px 7px 7px 14px; border-bottom:2px solid var(--texto);
  background:linear-gradient(color-mix(in srgb, var(--acento) 70%, #fff), var(--acento) 60%, color-mix(in srgb, var(--acento) 82%, #000));
  color:var(--texto-boton); font:700 15px/1.2 var(--f-texto);
}
.ventana-x{appearance:none; flex:none; width:34px; height:30px; border-radius:6px; border:2px solid var(--texto); cursor:pointer; background:linear-gradient(#fff, #d9dbe4); color:#1a0f14; font:700 20px/1 system-ui, sans-serif}
.ventana-x:focus-visible{outline:3px solid #fff; outline-offset:1px}
.ventana-cuerpo{overflow:auto; padding:16px; display:grid; gap:15px}
.campo{display:grid; gap:6px; margin:0; padding:0; border:0; min-width:0}
.etq{padding:0; font-weight:700; font-size:17px; line-height:1.2}
.etq em{font-weight:500; font-style:normal; opacity:.7; font-size:15px}
.campo input,.campo textarea{width:100%; font:500 17px/1.3 var(--f-texto); color:#1a0f14; background:#fff; border:2px solid var(--texto); border-radius:8px; padding:10px 12px}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(26,15,20,.45)}
.campo input:focus,.campo textarea:focus{outline:3px solid var(--acento); outline-offset:1px}
.campo textarea{resize:vertical}
.eleccion{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.eleccion label{position:relative; display:flex}
.eleccion input{position:absolute; inset:0; margin:0; opacity:0}
.eleccion span{flex:1; display:grid; place-items:center; text-align:center; min-height:50px; padding:6px 8px; cursor:pointer; border:2px solid var(--texto); border-radius:999px; background:#fff; color:#1a0f14; font:700 16px/1.15 var(--f-texto)}
.eleccion input:checked + span{background:var(--acento); color:var(--texto-boton)}
.eleccion input[value="no"]:checked + span{background:var(--texto); color:var(--tarjeta)}
.eleccion input:focus-visible + span{outline:3px solid var(--acento); outline-offset:2px}
.si-viene{display:grid; gap:15px}
.contador{display:flex; align-items:center; width:max-content; border:2px solid var(--texto); border-radius:999px; background:#fff; overflow:hidden}
.contador button{appearance:none; border:0; width:52px; height:46px; cursor:pointer; background:var(--claro); color:#1a0f14; font:700 24px/1 system-ui, sans-serif}
.contador button:disabled{opacity:.35; cursor:default}
.contador button:focus-visible{outline:3px solid var(--acento); outline-offset:-3px}
.contador output{min-width:58px; text-align:center; font:700 26px/1 var(--f-texto); color:#1a0f14; font-variant-numeric:tabular-nums}
.ayuda{margin:0; font-size:14px; line-height:1.35; opacity:.75}
.error{margin:0; color:#b0003a; font-weight:700; font-size:15px; line-height:1.3}
.error:empty{display:none}
.dudas{justify-self:center; font-size:14px; color:var(--texto); text-underline-offset:3px}
.hecho{justify-items:center; text-align:center; padding-bottom:20px}
.hecho p{margin:0}
.hecho .hecho-titulo{margin-top:6px; font-family:var(--f-titulo); font-size:34px; line-height:1.1; color:var(--acento); transform:rotate(-3deg)}
#hecho-texto{font-size:17px; line-height:1.4; max-width:34ch}
.hecho .gel{max-width:260px}
.casilla{display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.4; cursor:pointer}
.casilla input{width:20px; height:20px; margin:1px 0 0; flex:none; accent-color:var(--acento)}
.aviso-datos{margin:0; font-size:12.5px; line-height:1.45; opacity:.8}
.aviso-datos a{color:var(--texto)}

.confeti{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:50}
.banda-vista{position:fixed; top:0; left:0; right:0; z-index:60; background:#1a0f14; color:#fff; font:600 13px/1.3 system-ui, sans-serif; text-align:center; padding:6px 10px}
.aviso-flotante{
  position:fixed; left:50%; bottom:calc(160px + env(safe-area-inset-bottom)); z-index:70; transform:translateX(-50%);
  background:#1a0f14; color:#fff; padding:10px 16px; border-radius:14px; font:600 14px/1.3 system-ui, sans-serif;
  box-shadow:0 6px 18px rgba(0,0,0,.3); max-width:90vw; text-align:center;
}

@media (prefers-reduced-motion: reduce){
  .sobre,.latido,.parpadeo{animation:none}
  .etapa,.carta,.solapa,.ticket canvas,.dock{transition-duration:.2s}
}
/* ---------- Revelación, preguntas y regalos (15-sep-2026) ---------- */
.campo select{width:100%; font:500 17px/1.3 var(--f-texto); color:#1a0f14; background:#fff; border:2px solid var(--texto); border-radius:8px; padding:10px 12px}
.campo select:focus{outline:3px solid var(--acento); outline-offset:1px}
.equipos input[value="nino"]:checked + span{background:#8ec5f0; color:#0f2a40}
.equipos input[value="nina"]:checked + span{background:#f5b3cc; color:#401a2a}
.eleccion.nombres{grid-template-columns:repeat(auto-fit, minmax(110px, 1fr))}
.hecho-extra{display:grid; gap:14px; width:100%; text-align:left}
.hecho-extra:empty{display:none}
.tras-confirmar{display:grid; gap:14px}
.apuesta,.regalos{display:grid; gap:8px}
.apuesta-barra{display:flex; height:16px; border-radius:999px; overflow:hidden; border:2px solid var(--texto); background:#fff}
.apuesta-barra span{display:block; height:100%; transition:width .6s ease}
.a-nino{background:#8ec5f0}
.a-nina{background:#f5b3cc}
.apuesta-cifras{display:flex; justify-content:space-between; margin:0; font-size:15px}
.copiable{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:2px dashed var(--acento); border-radius:10px; background:#fff; color:#1a0f14}
.copiable code{font:600 15px/1.35 ui-monospace, Menlo, Consolas, monospace; overflow-wrap:anywhere}
.copiar{appearance:none; flex:none; border:2px solid var(--texto); border-radius:999px; background:var(--claro); color:#1a0f14; font:700 14px/1 var(--f-texto); padding:9px 14px; cursor:pointer}
.copiar:focus-visible{outline:3px solid var(--acento); outline-offset:2px}
@media (prefers-reduced-motion: reduce){ .apuesta-barra span{transition:none} }
/* ---------- Plato principal y actividades (15-sep-2026) ---------- */
.plato-fila{display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:600; font-size:16px}
.plato-fila .contador button{width:44px; height:40px}
.plato-fila .contador output{min-width:44px; font-size:22px}
.actividades{display:grid; gap:10px}
.casilla.actividad{font-size:16px; line-height:1.35}
.actividad small{font-size:14px; opacity:.75}
.actividad input:disabled + span{opacity:.5}
/* ---------- Solo adultos (15-sep-2026) ---------- */
.t-aviso{margin:8px 0 0; font:700 12px/1 var(--f-texto); letter-spacing:.16em; text-transform:uppercase; color:var(--acento)}
/* ---------- Adornos de tarjeta: papel picado, banderines… (15-sep-2026) ---------- */
.t-adorno{position:absolute; left:0; right:0; top:0; z-index:1; pointer-events:none; filter:drop-shadow(0 2px 2px rgba(0,0,0,.18))}
.t-adorno svg{display:block; width:100%; height:auto}
.tarjeta.con-adorno{padding-top:14cqw}
.t-esquina{position:absolute; bottom:0; width:27cqw; z-index:1; pointer-events:none}
.t-esquina svg{display:block; width:100%; height:auto}
.t-esquina.izq{left:0}
.t-esquina.der{right:0; transform:scaleX(-1)}
.tarjeta.con-adorno .t-dibujo{width:30cqw; max-width:150px}
.tarjeta.con-adorno .t-dibujo svg{max-height:34cqw}
/* ---------- Estilos de aviso de mensaje, cuenta atrás, botones y cuestionario (15-sep-2026) ----------
   «brillo» es el original (años 2000) y no lleva reglas: el resto lo sobrescribe según la clase acabado-* del body. */
body:not(.acabado-brillo) .gel::before{display:none}
body:not(.acabado-brillo) .pantalla-movil{font-family:var(--f-texto); background-image:none; width:min(82vw, 320px); padding:12px 16px 14px; box-shadow:none}
body:not(.acabado-brillo) .estado-movil{display:none}
body:not(.acabado-brillo) .pantalla-movil::before{content:"MENSAJES · AHORA"; display:block; font:700 11px/1 var(--f-texto); letter-spacing:.14em; opacity:.6; margin-bottom:6px}
body:not(.acabado-brillo) .msg-movil{font:700 20px/1.2 var(--f-texto); letter-spacing:0; margin:0}
body:not(.acabado-brillo) .de-movil{font:500 14px/1.3 var(--f-texto); opacity:.7; margin-top:3px}
body:not(.acabado-brillo) .parpadeo{animation:none}

/* Moderno */
.acabado-moderno .pantalla-movil{color:#16121a; background-color:rgba(255,255,255,.94); border-radius:22px; box-shadow:0 14px 34px rgba(0,0,0,.28)}
.acabado-moderno .dock{background:linear-gradient(to top, color-mix(in srgb, var(--oscuro) 82%, transparent) 55%, transparent)}
.acabado-moderno .cuenta{font:600 17px/1.2 var(--f-texto); color:#fff; background:color-mix(in srgb, var(--oscuro) 82%, transparent); border:1px solid rgba(255,255,255,.3); box-shadow:none; border-radius:12px; padding:9px 12px}
.acabado-moderno .gel{background:var(--acento); border:0; border-radius:14px; box-shadow:0 6px 16px color-mix(in srgb, var(--acento) 38%, transparent)}
.acabado-moderno .gel.plata{background:#fff; color:#1a0f14; box-shadow:0 6px 16px rgba(0,0,0,.18)}
.acabado-moderno .ventana{border:0; border-radius:20px; box-shadow:0 20px 50px rgba(0,0,0,.35)}
.acabado-moderno .ventana-barra{background:var(--tarjeta); color:var(--texto); border-bottom:1px solid color-mix(in srgb, var(--texto) 14%, transparent); font:700 16px/1.2 var(--f-texto); padding:12px 12px 12px 18px}
.acabado-moderno .ventana-x{border:0; border-radius:50%; width:34px; height:34px; background:color-mix(in srgb, var(--texto) 8%, transparent); color:var(--texto)}
.acabado-moderno .campo input,.acabado-moderno .campo textarea,.acabado-moderno .campo select,.acabado-moderno .eleccion span,.acabado-moderno .contador{border:1.5px solid color-mix(in srgb, var(--texto) 22%, transparent); border-radius:12px}
.acabado-moderno .eleccion input:checked + span{border-color:var(--acento)}
.acabado-moderno .contador button{background:color-mix(in srgb, var(--acento) 14%, #fff)}

/* Suave */
.acabado-suave .pantalla-movil{color:var(--texto); background-color:#fff; border-radius:28px; box-shadow:0 10px 28px rgba(0,0,0,.14), 0 0 0 6px color-mix(in srgb, var(--claro) 60%, transparent)}
.acabado-suave .dock{background:linear-gradient(to top, color-mix(in srgb, var(--oscuro) 70%, transparent) 55%, transparent)}
.acabado-suave .cuenta{font:600 16px/1.2 var(--f-texto); color:var(--texto); background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.08); border-radius:999px; padding:9px 14px}
.acabado-suave .gel{background:var(--claro); color:var(--texto); border:0; border-radius:999px; box-shadow:0 4px 12px rgba(0,0,0,.14)}
.acabado-suave #confirmar,.acabado-suave #enviar{background:var(--acento); color:var(--texto-boton)}
.acabado-suave .gel.plata{background:#fff; color:var(--texto)}
.acabado-suave .ventana{border:0; border-radius:26px; box-shadow:0 18px 44px rgba(0,0,0,.22)}
.acabado-suave .ventana-barra{background:var(--claro); color:var(--texto); border:0; padding:12px 12px 12px 20px}
.acabado-suave .ventana-x{border:0; border-radius:50%; background:#fff; color:var(--texto)}
.acabado-suave .campo input,.acabado-suave .campo textarea,.acabado-suave .campo select,.acabado-suave .eleccion span,.acabado-suave .contador{border:0; border-radius:16px; background:color-mix(in srgb, var(--claro) 35%, #fff)}
.acabado-suave .eleccion input:checked + span{background:var(--acento); color:var(--texto-boton)}
.acabado-suave .contador button{background:var(--claro)}

/* Elegante */
.acabado-elegante .pantalla-movil{color:var(--texto); background-color:var(--tarjeta); border-radius:2px; box-shadow:0 14px 30px rgba(0,0,0,.25); outline:1px solid var(--acento); outline-offset:-8px; text-align:center; padding:18px 20px}
.acabado-elegante .pantalla-movil::before{content:"TIENES UNA INVITACIÓN"; color:var(--acento); opacity:1}
.acabado-elegante .msg-movil{font:600 24px/1.15 var(--f-titulo)}
.acabado-elegante .dock{background:linear-gradient(to top, color-mix(in srgb, var(--oscuro) 88%, transparent) 60%, transparent)}
.acabado-elegante .cuenta{font:500 19px/1.2 var(--f-titulo); letter-spacing:.06em; color:#fff; background:color-mix(in srgb, var(--oscuro) 82%, transparent); box-shadow:none; border-top:1px solid rgba(255,255,255,.45); border-bottom:1px solid rgba(255,255,255,.45); border-radius:0; padding:8px 0}
.acabado-elegante .gel{background:color-mix(in srgb, var(--oscuro) 60%, transparent); color:#fff; border:1px solid rgba(255,255,255,.75); border-radius:2px; box-shadow:none; font:600 12.5px/1.2 var(--f-texto); letter-spacing:.1em; text-transform:uppercase; padding:6px 10px}
.acabado-elegante #confirmar,.acabado-elegante #enviar{background:var(--acento); color:var(--texto-boton); border-color:var(--acento)}
.acabado-elegante .ventana .gel.plata{color:var(--texto); border-color:var(--acento)}
.acabado-elegante .ventana{border:1px solid var(--acento); border-radius:3px; box-shadow:0 20px 50px rgba(0,0,0,.3); outline:1px solid color-mix(in srgb, var(--acento) 45%, transparent); outline-offset:-7px}
.acabado-elegante .ventana-barra{background:transparent; color:var(--texto); border-bottom:1px solid color-mix(in srgb, var(--acento) 55%, transparent); font:600 21px/1.2 var(--f-titulo); padding:14px 12px 12px 20px}
.acabado-elegante .ventana-x{border:0; background:transparent; color:var(--texto); font-weight:400}
.acabado-elegante .etq{font:600 13px/1.3 var(--f-texto); letter-spacing:.14em; text-transform:uppercase}
.acabado-elegante .etq em{text-transform:none; letter-spacing:0}
.acabado-elegante .campo input,.acabado-elegante .campo textarea,.acabado-elegante .campo select{background:transparent; color:var(--texto); border:0; border-bottom:1px solid color-mix(in srgb, var(--texto) 45%, transparent); border-radius:0; padding:8px 2px}
.acabado-elegante .campo input::placeholder,.acabado-elegante .campo textarea::placeholder{color:color-mix(in srgb, var(--texto) 45%, transparent)}
.acabado-elegante .eleccion span{border:1px solid color-mix(in srgb, var(--acento) 70%, transparent); border-radius:2px; background:transparent; color:var(--texto); font:500 15px/1.2 var(--f-texto); letter-spacing:.04em}
.acabado-elegante .contador{border:1px solid color-mix(in srgb, var(--acento) 70%, transparent); border-radius:2px; background:transparent}
.acabado-elegante .contador button{background:transparent; color:var(--texto)}
.acabado-elegante .contador output{color:var(--texto); font-family:var(--f-titulo)}
.acabado-elegante .hecho .hecho-titulo{transform:none}

/* Papel artesanal */
.acabado-papel .pantalla-movil{color:var(--texto); background-color:var(--tarjeta); border:2px solid var(--texto); border-radius:12px; box-shadow:4px 4px 0 var(--texto); outline:1.5px dashed color-mix(in srgb, var(--texto) 40%, transparent); outline-offset:-8px; transform:rotate(-2deg)}
.acabado-papel .cuenta{font:700 18px/1.2 var(--f-titulo); color:var(--texto); background:var(--tarjeta); border:2px solid var(--texto); box-shadow:3px 3px 0 var(--texto); border-radius:6px; outline:1.5px dashed color-mix(in srgb, var(--texto) 40%, transparent); outline-offset:-6px; padding:8px 12px}
.acabado-papel .gel{background:var(--acento); border:2px solid var(--texto); border-radius:10px; box-shadow:3px 3px 0 var(--texto); outline:1.5px dashed color-mix(in srgb, var(--texto-boton) 65%, transparent); outline-offset:-7px}
.acabado-papel .gel.plata{background:var(--tarjeta); color:var(--texto); outline-color:color-mix(in srgb, var(--texto) 45%, transparent)}
.acabado-papel .gel:active{box-shadow:1px 1px 0 var(--texto); transform:translate(2px, 2px)}
.acabado-papel .ventana{border:2px solid var(--texto); border-radius:14px; box-shadow:5px 5px 0 var(--texto); background-image:repeating-linear-gradient(0deg, transparent 0 27px, color-mix(in srgb, var(--texto) 6%, transparent) 27px 28px)}
.acabado-papel .ventana-barra{background:var(--acento); border-bottom:2px dashed var(--texto)}
.acabado-papel .ventana-x{border-radius:50%; background:var(--tarjeta)}
.acabado-papel .campo input,.acabado-papel .campo textarea,.acabado-papel .campo select{border:2px dashed color-mix(in srgb, var(--texto) 55%, transparent); border-radius:10px}
.acabado-papel .eleccion span{border-radius:10px; border-style:dashed}
.acabado-papel .eleccion input:checked + span{border-style:solid}
.acabado-papel .contador{border-radius:10px}

/* Neón */
.acabado-neon .pantalla-movil{color:#fff; background-color:#0c0814; border:2px solid var(--acento); border-radius:18px; box-shadow:0 0 18px var(--acento), inset 0 0 12px color-mix(in srgb, var(--acento) 40%, transparent); text-shadow:0 0 8px var(--acento)}
.acabado-neon .dock{background:linear-gradient(to top, rgba(8,5,14,.94) 60%, transparent)}
.acabado-neon .cuenta{font:600 18px/1.2 var(--f-titulo); letter-spacing:.06em; color:#fff; background:#0c0814; border:1px solid color-mix(in srgb, var(--acento) 70%, transparent); box-shadow:0 0 10px color-mix(in srgb, var(--acento) 60%, transparent); text-shadow:0 0 6px var(--acento); padding:9px 12px}
.acabado-neon .gel{background:#120d1c; color:#fff; border:2px solid var(--acento); border-radius:12px; box-shadow:0 0 12px var(--acento), inset 0 0 10px color-mix(in srgb, var(--acento) 45%, transparent); text-shadow:0 0 8px var(--acento)}
.acabado-neon .gel.plata{border-color:#7cf7d4; box-shadow:0 0 12px #7cf7d4, inset 0 0 10px rgba(124,247,212,.35); text-shadow:0 0 8px #7cf7d4}
.acabado-neon .ventana{background:#120d1c; color:#f4eefc; border:2px solid var(--acento); border-radius:16px; box-shadow:0 0 22px color-mix(in srgb, var(--acento) 70%, transparent)}
.acabado-neon .ventana-barra{background:transparent; color:#fff; border-bottom:1px solid color-mix(in srgb, var(--acento) 60%, transparent); text-shadow:0 0 8px var(--acento)}
.acabado-neon .ventana-x{background:transparent; color:#fff; border:1px solid var(--acento)}
.acabado-neon .campo input,.acabado-neon .campo textarea,.acabado-neon .campo select,.acabado-neon .eleccion span,.acabado-neon .contador{background:#1c1530; color:#fff; border:1.5px solid color-mix(in srgb, var(--acento) 55%, transparent); border-radius:10px}
.acabado-neon .campo input::placeholder,.acabado-neon .campo textarea::placeholder{color:rgba(255,255,255,.4)}
.acabado-neon .eleccion input:checked + span{background:var(--acento); color:var(--texto-boton); box-shadow:0 0 12px var(--acento)}
.acabado-neon .eleccion input[value="no"]:checked + span{background:#f4eefc; color:#120d1c}
.acabado-neon .contador button{background:transparent; color:#fff}
.acabado-neon .contador output{color:#fff}
.acabado-neon .aviso-datos a,.acabado-neon .dudas,.acabado-neon .casilla{color:#f4eefc}
.acabado-neon .hecho .hecho-titulo{text-shadow:0 0 12px var(--acento)}
.acabado-neon .copiable{background:#1c1530; color:#fff}

/* ---------- Escenas de cine de los temas épicos (15-sep-2026): una imagen fija que cubre la pantalla ---------- */
body.escena{background-image:none}
body.escena::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:var(--patron) center / cover no-repeat, var(--fondo)}
.escena .cara-dentro{background-image:linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)), var(--patron); background-size:auto, cover; background-position:center}

/* ---------- Sobre a medida (mejora general, fase 2, 15-sep-2026): papel, forro, lacre, ribete ---------- */
.sobre{--ruido:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibras:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .08 0 0 0 .28 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23k)'/%3E%3C/svg%3E");
  --base-frente:linear-gradient(165deg, color-mix(in srgb, var(--sobre) 62%, #fff), var(--sobre) 55%, color-mix(in srgb, var(--sobre) 88%, var(--oscuro)));
  --base-trasera:linear-gradient(color-mix(in srgb, var(--sobre) 78%, var(--oscuro)), color-mix(in srgb, var(--sobre) 70%, var(--oscuro)));
  --base-solapa:linear-gradient(color-mix(in srgb, var(--sobre) 90%, var(--oscuro)), color-mix(in srgb, var(--sobre) 80%, var(--oscuro)));
  --textura:none}
.papel-lino{--textura:repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 4px)}
.papel-algodon{--textura:var(--ruido)}
.papel-kraft{--textura:var(--fibras), linear-gradient(rgba(120,80,30,.16), rgba(120,80,30,.16))}
.papel-terciopelo{--textura:radial-gradient(130% 90% at 25% 15%, rgba(255,255,255,.24), transparent 55%), radial-gradient(120% 90% at 85% 100%, rgba(0,0,0,.3), transparent 60%), var(--ruido)}
.sobre:not(.papel-liso) .sobre-frente{background:var(--textura), var(--base-frente)}
.sobre:not(.papel-liso) .sobre-trasera{background:var(--textura), var(--base-trasera)}
.sobre:not(.papel-liso) .cara-fuera{background:var(--textura), var(--base-solapa)}

/* Forro interior de la solapa */
.forro-liso .cara-dentro{background:color-mix(in srgb, var(--sobre) 30%, #fff)}
.forro-rayas .cara-dentro{background:repeating-linear-gradient(45deg, var(--acento) 0 7px, var(--tarjeta) 7px 16px)}
.forro-lunares .cara-dentro{background:radial-gradient(circle, var(--acento) 22%, transparent 25%) 0 0 / 18px 18px, var(--tarjeta)}
.forro-oro .cara-dentro{background:linear-gradient(115deg, #a77b2f, #f3dc9b 32%, #b8893c 52%, #f1d995 72%, #9c7430)}
.forro-marmol .cara-dentro{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='turbulence' baseFrequency='.012 .05' numOctaves='4' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .55 0 0 0 0 .58 0 0 0 -1.6 1.1'/%3E%3C/filter%3E%3Crect width='240' height='240' fill='%23f7f4ee'/%3E%3Crect width='240' height='240' filter='url(%23m)'/%3E%3C/svg%3E") center / cover, #f7f4ee}

/* Color del lacre */
.lacre-oro .lacre-brillo{background-image:var(--glitter), radial-gradient(circle at 34% 28%, #f7e3a6, #b8893c 72%)}
.lacre-plata .lacre-brillo{background-image:var(--glitter), radial-gradient(circle at 34% 28%, #f6f7f9, #939ca7 72%)}
.lacre-rojo .lacre-brillo{background-image:radial-gradient(circle at 34% 28%, #e8665a, #8e1b16 72%)}
.lacre-negro .lacre-brillo{background-image:radial-gradient(circle at 34% 28%, #6b6b70, #111114 72%)}
.lacre-rosa .lacre-brillo{background-image:var(--glitter), radial-gradient(circle at 34% 28%, #ffd3e0, #c75b7f 72%)}
.lacre-verde .lacre-brillo{background-image:radial-gradient(circle at 34% 28%, #a6d6ae, #2f6b3c 72%)}
.lacre-azul .lacre-brillo{background-image:radial-gradient(circle at 34% 28%, #aac7ef, #1f3f7a 72%)}
.lacre-oro .lacre-texto,.lacre-plata .lacre-texto{text-shadow:2px 2px 0 rgba(0,0,0,.45), -1px -1px 0 rgba(0,0,0,.35), 1px -1px 0 rgba(0,0,0,.35), -1px 1px 0 rgba(0,0,0,.35)}

/* Ribete dorado: en el contorno del frente (con su «V») y de la solapa */
.ribete .sobre-frente::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(100deg, #b8893c, #f1d995 45%, #c9a052);
  clip-path:polygon(evenodd, 0 0, 50% 57%, 100% 0, 100% 100%, 0 100%, 0 0, 1.4% 3.2%, 50% 60.5%, 98.6% 3.2%, 98.6% 97.6%, 1.4% 97.6%, 1.4% 3.2%)}
.ribete .cara-fuera::before{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(100deg, #b8893c, #f1d995 45%, #c9a052);
  clip-path:polygon(evenodd, 0 0, 100% 0, 50% 100%, 0 0, 3.6% 2.4%, 96.4% 2.4%, 50% 94.5%, 3.6% 2.4%)}
.ribete .sobre-trasera{box-shadow:inset 0 0 0 3px #c9a052}

/* Remite y matasellos según la claridad del sobre (15-sep-2026) */
.remite{color:var(--texto-sobre, var(--texto))}
.matasellos{color:color-mix(in srgb, var(--texto-sobre, var(--texto)) 62%, transparent); border-color:color-mix(in srgb, var(--texto-sobre, var(--texto)) 48%, transparent)}

/* ---------- Apertura del sobre (15-sep-2026, Jose: «se abre quitando un trozo, no hacia arriba como un sobre») ----------
   El drop-shadow (filter) de .sobre obligaba a pintar en plano y la solapa se aplastaba en vez de girar. La sombra pasa
   a la trasera y la solapa gira en 3D hacia arriba; su cara exterior se oscurece al levantarse. */
.sobre{filter:none; perspective:520px; perspective-origin:50% 0}
.sobre-trasera{box-shadow:0 18px 26px color-mix(in srgb, var(--oscuro) 38%, transparent)}
.ribete .sobre-trasera{box-shadow:inset 0 0 0 3px #c9a052, 0 18px 26px color-mix(in srgb, var(--oscuro) 38%, transparent)}
.solapa{transition:transform 1s cubic-bezier(.4,0,.2,1)}
.cara-fuera{transition:filter .8s ease}
.abierto .cara-fuera{filter:brightness(.8)}
/* La cara interior ya va girada 180°: su triángulo se dibuja con la punta arriba para que, con la solapa abierta,
   el sobre quede con la punta hacia arriba como uno de verdad (Jose: «se queda como un triángulo invertido»). */
.cara-dentro{clip-path:polygon(50% 0, 100% 100%, 0 100%); border-radius:0 0 6px 6px}

/* ---------- Tarjeta a medida (mejora general, fase 3, 15-sep-2026): marco, papel, alineación, título y foto con datos ---------- */
.tarjeta{--ruido-t:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.papelt-algodon{background-image:var(--ruido-t)}
.papelt-lino{background-image:repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.03) 0 1px, transparent 1px 4px)}
.papelt-kraft{background-color:color-mix(in srgb, var(--tarjeta) 72%, #c49a62); background-image:var(--ruido-t)}
.papelt-acuarela{background-image:radial-gradient(60% 40% at 18% 12%, color-mix(in srgb, var(--acento) 20%, transparent), transparent 70%), radial-gradient(55% 42% at 88% 92%, color-mix(in srgb, var(--acento) 16%, transparent), transparent 72%), radial-gradient(40% 30% at 80% 20%, color-mix(in srgb, var(--claro) 30%, transparent), transparent 70%), var(--ruido-t)}

.marco-ninguno .tarjeta-marco{border:0; outline:0}
.marco-fino .tarjeta-marco{border:.3cqw solid color-mix(in srgb, var(--acento) 65%, transparent); outline:0}
.marco-doble .tarjeta-marco{border:1.4cqw double color-mix(in srgb, var(--acento) 80%, transparent); outline:0}
.marco-artdeco .tarjeta-marco{border:.45cqw solid var(--acento); outline:.25cqw solid color-mix(in srgb, var(--acento) 70%, transparent); outline-offset:-2.2cqw;
  box-shadow:inset 0 0 0 3.4cqw transparent, inset 0 0 0 3.65cqw color-mix(in srgb, var(--acento) 45%, transparent)}
.marco-esquinas .tarjeta-marco{border:0; outline:0; --e:color-mix(in srgb, var(--acento) 80%, transparent);
  background:linear-gradient(var(--e), var(--e)) top left / 12cqw .5cqw no-repeat, linear-gradient(var(--e), var(--e)) top left / .5cqw 12cqw no-repeat,
    linear-gradient(var(--e), var(--e)) top right / 12cqw .5cqw no-repeat, linear-gradient(var(--e), var(--e)) top right / .5cqw 12cqw no-repeat,
    linear-gradient(var(--e), var(--e)) bottom left / 12cqw .5cqw no-repeat, linear-gradient(var(--e), var(--e)) bottom left / .5cqw 12cqw no-repeat,
    linear-gradient(var(--e), var(--e)) bottom right / 12cqw .5cqw no-repeat, linear-gradient(var(--e), var(--e)) bottom right / .5cqw 12cqw no-repeat}
.marco-puntos .tarjeta-marco{border:.7cqw dotted color-mix(in srgb, var(--acento) 75%, transparent); outline:0}

.alin-izquierda .tarjeta-marco{align-items:flex-start; text-align:left}
.alin-izquierda .t-dibujo{margin:0 0 1cqw}
.alin-izquierda .tarjeta-marco .t-mensaje{max-width:none}
.titulo-grande .t-titulo{font-size:15cqw}
.titulo-pequeno .t-titulo{font-size:9.5cqw}

/* Foto arriba y datos debajo */
.con-foto-arriba .tarjeta-marco{justify-content:flex-start; padding-top:4cqw; gap:1.4cqw}
/* La foto cede alto antes que el título: así el ajuste automático no deja el título diminuto. */
.t-foto{width:100%; flex:1 1 40%; min-height:22cqw; overflow:hidden; border-radius:1.2cqw; margin-bottom:1.5cqw}
.t-foto img{width:100%; height:100%; object-fit:cover; display:block; -webkit-user-select:none; user-select:none}
.con-foto-arriba .t-titulo{font-size:10cqw}
.con-foto-arriba.titulo-grande .t-titulo{font-size:12.5cqw}
/* Foto de fondo con los datos encima, sobre un degradado oscuro */
.t-foto-fondo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; -webkit-user-select:none; user-select:none}
.con-foto-fondo::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(transparent 30%, rgba(0,0,0,.25) 48%, rgba(0,0,0,.78))}
.con-foto-fondo .tarjeta-marco{position:relative; z-index:2; justify-content:flex-end; color:#fff; border-color:rgba(255,255,255,.7); outline-color:rgba(255,255,255,.35)}
.con-foto-fondo .t-sub,.con-foto-fondo .t-sep,.con-foto-fondo .t-firma,.con-foto-fondo .t-aviso{color:#fff}
.con-foto-fondo .t-titulo{text-shadow:0 2px 12px rgba(0,0,0,.5)}
.con-foto-fondo .t-adorno,.con-foto-fondo .t-esquina{z-index:2}

/* Con letras caligráficas (Great Vibes, Parisienne) la cuenta atrás elegante no se leía: va con la letra de texto (15-sep-2026). */
.acabado-elegante .cuenta{font:600 15px/1.2 var(--f-texto); letter-spacing:.1em; text-transform:uppercase}

/* ---------- Marca de empresa (15-sep-2026): logo en la tarjeta y en el lacre ---------- */
.t-logo{width:calc(var(--logo, 48) * 1cqw); margin:0 auto 2cqw}
.t-logo img{display:block; width:100%; height:auto; max-height:calc(var(--logo, 48) * .45cqw); object-fit:contain; -webkit-user-select:none; user-select:none}
.alin-izquierda .t-logo{margin:0 0 2cqw}
.lacre-logo{position:absolute; inset:9%; border-radius:50%; background:#fff; display:grid; place-items:center; overflow:hidden; box-shadow:inset 0 0 0 2px rgba(0,0,0,.08)}
.lacre-logo img{max-width:calc(var(--logo, 80) * 1%); max-height:calc(var(--logo, 80) * 1%); object-fit:contain}
.corporativo .cinta{display:none}
.corporativo .toca{transform:none; box-shadow:0 6px 18px color-mix(in srgb, var(--oscuro) 18%, transparent); border:0; border-radius:999px; font-size:16px; letter-spacing:.02em; padding:10px 20px}
.corporativo .pegatina{transform:none; box-shadow:none; border-radius:999px; background:var(--acento); color:#fff; font:600 clamp(13px, 3.6vw, 16px)/1.2 var(--f-texto); letter-spacing:.12em; text-transform:uppercase; padding:9px 20px}
.corporativo .pegatina em{color:inherit; opacity:.85}
.corporativo .ticket{box-shadow:0 0 0 1px color-mix(in srgb, var(--oscuro) 12%, transparent), 0 18px 40px color-mix(in srgb, var(--oscuro) 28%, transparent)}

/* ---------- Foto propia de fondo (fase 4, 15-sep-2026): difuminada y con velo del color de fondo ---------- */
/* body::before ya se usa: foto y velo van juntos en ::after (difuminar un velo liso no lo cambia). */
body.foto-fondo{background-image:none}
body.foto-fondo::after{content:""; position:fixed; inset:calc(var(--desenfoque, 18px) * -2.5); z-index:-1; pointer-events:none;
  background:linear-gradient(color-mix(in srgb, var(--fondo) var(--velo, 45%), transparent), color-mix(in srgb, var(--fondo) var(--velo, 45%), transparent)), var(--foto-fondo) center / cover no-repeat, var(--fondo);
  filter:blur(var(--desenfoque, 18px))}

/* ---------- Aperturas (fase 5, 15-sep-2026): romper el lacre y abrir el telón ---------- */
/* Romper el lacre, versión 2 (Jose: «de mayor calidad»). 0-0,5 s: tiembla cada vez más y la grieta se dibuja con dos
   ramas; 0,5 s: destello, «crac» y tres trozos que saltan hacia fuera y caen con gravedad girando; miguitas de cera. */
.apertura-lacre .abriendo .lacre{animation:temblar-lacre .5s linear}
@keyframes temblar-lacre{
  0%{transform:translate(-50%, -50%) rotate(-6deg) scale(1)}
  12%{transform:translate(-50%, -50%) rotate(-8deg) scale(1.03)}
  24%{transform:translate(calc(-50% - 1px), -50%) rotate(-4deg) scale(1.05)}
  36%{transform:translate(calc(-50% + 2px), calc(-50% - 1px)) rotate(-9deg) scale(1.07)}
  48%{transform:translate(calc(-50% - 2px), -50%) rotate(-3deg) scale(1.09)}
  60%{transform:translate(calc(-50% + 3px), calc(-50% + 1px)) rotate(-10deg) scale(1.11)}
  72%{transform:translate(calc(-50% - 3px), -50%) rotate(-2deg) scale(1.13)}
  84%{transform:translate(calc(-50% + 2px), calc(-50% - 1px)) rotate(-9deg) scale(1.15)}
  94%{transform:translate(-50%, -50%) rotate(-6deg) scale(1.16)}
  100%{transform:translate(-50%, -50%) rotate(-6deg) scale(1.16)}
}
.lacre-trozo{position:absolute; inset:0}
.lacre-pieza{position:absolute; inset:0}
.t-a{transform-origin:28% 50%}
.t-b{transform-origin:76% 20%}
.t-c{transform-origin:74% 68%}
.t-a .lacre-pieza{clip-path:polygon(0 0, 54% 0, 47% 22%, 56% 38%, 46% 52%, 55% 70%, 48% 100%, 0 100%)}
.t-b .lacre-pieza{clip-path:polygon(54% 0, 100% 0, 100% 41%, 70% 34%, 56% 38%, 47% 22%)}
.t-c .lacre-pieza{clip-path:polygon(56% 38%, 70% 34%, 100% 41%, 100% 100%, 48% 100%, 55% 70%, 46% 52%)}
/* Al partirse, cada trozo gana canto (borde oscuro) y sombra propia que sigue el borde roto. */
.rompiendo .lacre-trozo{filter:drop-shadow(0 1.5px 0 rgba(0,0,0,.5)) drop-shadow(0 5px 5px rgba(0,0,0,.35))}
.lacre-grieta{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none;
  -webkit-mask:var(--sello-mask) center / contain no-repeat; mask:var(--sello-mask) center / contain no-repeat;
  filter:drop-shadow(.8px .4px 0 rgba(255,255,255,.5))}
.lacre-grieta path{fill:none; stroke:rgba(20,10,8,.78); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:130; stroke-dashoffset:130}
.lacre-grieta .g2,.lacre-grieta .g3{stroke-width:1.7; stroke-dasharray:60; stroke-dashoffset:60}
.apertura-lacre .abriendo .lacre-grieta .g1{animation:grieta .34s cubic-bezier(.6,0,.9,.5) .1s forwards}
.apertura-lacre .abriendo .lacre-grieta .g3{animation:grieta .16s ease-in .3s forwards}
.apertura-lacre .abriendo .lacre-grieta .g2{animation:grieta .14s ease-in .36s forwards}
@keyframes grieta{to{stroke-dashoffset:0}}
.rompiendo .lacre-grieta{opacity:0; transition:opacity .04s linear .5s}
/* Destello corto y cálido (en fondos oscuros el blanco grande quedaba como una mancha gris). */
.lacre-destello{position:absolute; inset:-18%; border-radius:50%; pointer-events:none; opacity:0; transform:scale(.5); mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(255,246,220,1) 0, rgba(255,214,150,.75) 22%, rgba(255,190,120,.22) 44%, transparent 62%)}
.rompiendo .lacre-destello{animation:destello .32s cubic-bezier(.2,.7,.3,1) .5s}
@keyframes destello{0%{opacity:0; transform:scale(.5)} 30%{opacity:1; transform:scale(.95)} 100%{opacity:0; transform:scale(1.25)}}
.rompiendo .t-a{animation:trozo-a 1.05s linear .5s forwards}
.rompiendo .t-b{animation:trozo-b 1.05s linear .5s forwards}
.rompiendo .t-c{animation:trozo-c 1.05s linear .53s forwards}
/* Primer tramo: salta hacia fuera frenando; segundo: cae acelerando (gravedad) y gira en 3D. */
@keyframes trozo-a{
  0%{transform:none; opacity:1; animation-timing-function:cubic-bezier(0, 0, .3, 1)}
  20%{transform:translate(-16%, -9%) rotate(-12deg); opacity:1; animation-timing-function:cubic-bezier(.5, 0, 1, 1)}
  78%{opacity:1}
  100%{transform:translate(-58%, 250%) rotate(-80deg) rotateX(55deg); opacity:0}
}
@keyframes trozo-b{
  0%{transform:none; opacity:1; animation-timing-function:cubic-bezier(0, 0, .3, 1)}
  20%{transform:translate(15%, -16%) rotate(14deg); opacity:1; animation-timing-function:cubic-bezier(.5, 0, 1, 1)}
  78%{opacity:1}
  100%{transform:translate(72%, 210%) rotate(100deg) rotateY(50deg); opacity:0}
}
@keyframes trozo-c{
  0%{transform:none; opacity:1; animation-timing-function:cubic-bezier(0, 0, .3, 1)}
  20%{transform:translate(11%, 7%) rotate(7deg); opacity:1; animation-timing-function:cubic-bezier(.5, 0, 1, 1)}
  78%{opacity:1}
  100%{transform:translate(30%, 290%) rotate(52deg) rotateX(-45deg); opacity:0}
}
.lacre-miga{position:absolute; left:50%; top:50%; width:var(--s); height:calc(var(--s) * .8); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius:40% 55% 45% 60%; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 35% 30%, var(--claro), var(--acento) 70%); box-shadow:0 1px 1px rgba(0,0,0,.3)}
/* Las miguitas son del mismo color que el lacre elegido, no del acento del tema. */
.lacre-oro .lacre-miga{background:radial-gradient(circle at 35% 30%, #f7e3a6, #b8893c 70%)}
.lacre-plata .lacre-miga{background:radial-gradient(circle at 35% 30%, #f6f7f9, #939ca7 70%)}
.lacre-rojo .lacre-miga{background:radial-gradient(circle at 35% 30%, #e8665a, #8e1b16 70%)}
.lacre-negro .lacre-miga{background:radial-gradient(circle at 35% 30%, #6b6b70, #111114 70%)}
.lacre-rosa .lacre-miga{background:radial-gradient(circle at 35% 30%, #ffd3e0, #c75b7f 70%)}
.lacre-verde .lacre-miga{background:radial-gradient(circle at 35% 30%, #a6d6ae, #2f6b3c 70%)}
.lacre-azul .lacre-miga{background:radial-gradient(circle at 35% 30%, #aac7ef, #1f3f7a 70%)}
.rompiendo .lacre-miga{animation:miga .85s cubic-bezier(.15,.6,.45,1) .5s forwards}
/* Las miguitas salen por la grieta (van detrás de los trozos) y se hacen visibles ya en camino, no sobre el sello. */
@keyframes miga{
  0%{opacity:0; transform:translate(0, 0) rotate(var(--r))}
  14%{opacity:1}
  70%{opacity:1}
  100%{opacity:0; transform:translate(calc(cos(var(--a)) * var(--d)), calc(sin(var(--a)) * var(--d) + 34px)) rotate(calc(var(--r) + 220deg))}
}
@media (prefers-reduced-motion: reduce){
  .apertura-lacre .abriendo .lacre,.apertura-lacre .abriendo .lacre-grieta path,.rompiendo .lacre-destello{animation:none}
  .rompiendo .lacre-trozo,.rompiendo .lacre-miga{animation-duration:.3s; animation-delay:0s}
}

.telon{appearance:none; border:0; padding:0; margin:0; background:none; font:inherit; color:inherit; cursor:pointer;
  position:fixed; inset:0; z-index:30; overflow:hidden; transition:opacity .55s ease}
.telon:focus-visible{outline:3px dashed var(--tarjeta); outline-offset:-12px}
.telon-hoja{position:absolute; top:0; bottom:0; width:50.5%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.34) 0, rgba(255,255,255,.1) 5.5%, rgba(0,0,0,.34) 11%),
    linear-gradient(180deg, color-mix(in srgb, var(--sobre) 70%, #000) 0%, var(--sobre) 38%, color-mix(in srgb, var(--sobre) 62%, #000) 100%);
  box-shadow:inset 0 -50px 70px rgba(0,0,0,.35);
  transition:transform 1.35s cubic-bezier(.65,0,.25,1)}
.telon-hoja.izq{left:0; transform-origin:0 50%}
.telon-hoja.der{right:0; transform-origin:100% 50%}
.telon.abierto .telon-hoja{transform:scaleX(.14)}
.telon-bambalina{position:absolute; left:0; right:0; top:0; height:clamp(48px, 9vh, 84px); z-index:2;
  /* Festones: medias elipses que cuelgan de la barra, con ribete claro debajo. */
  background:
    radial-gradient(50% 100% at 50% 0, color-mix(in srgb, var(--sobre) 50%, #000) 98%, transparent 100%) 0 100% / clamp(44px, 14vw, 80px) 52% repeat-x,
    linear-gradient(color-mix(in srgb, var(--sobre) 50%, #000), color-mix(in srgb, var(--sobre) 50%, #000)) 0 0 / 100% 49% no-repeat;
  filter:drop-shadow(0 2px 0 var(--claro)) drop-shadow(0 8px 8px rgba(0,0,0,.4))}
.telon-bambalina::after{content:""; position:absolute; left:0; right:0; top:47%; height:3px; background:var(--claro); opacity:.85}
.telon-cartel{position:absolute; left:50%; top:45%; z-index:3; width:min(76vw, 330px); transform:translate(-50%, -50%);
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:22px 18px 16px; text-align:center;
  background:var(--tarjeta); color:var(--texto); border-radius:6px;
  box-shadow:0 0 0 3px var(--claro), 0 0 0 6px var(--oscuro), 0 18px 34px rgba(0,0,0,.45);
  transition:transform .5s ease, opacity .45s ease}
.telon-cartel b{font-family:var(--f-titulo); font-weight:400; font-size:clamp(26px, 8vw, 38px); line-height:1.05; text-wrap:balance}
.telon-cartel small{font-size:16px}
.telon-cartel .lacre{position:relative; left:auto; top:auto; width:78px; margin-top:10px; transform:rotate(-6deg)}
.telon-cartel .lacre-texto{font-size:28px}
.telon.abriendo .lacre{animation:none}
.telon.abriendo .telon-cartel{transform:translate(-50%, -160%); opacity:0}
.telon.fuera{opacity:0; pointer-events:none}
.apertura-cortina #etapa-sobre .toca{position:fixed; left:0; right:0; bottom:calc(76px + env(safe-area-inset-bottom)); margin:0 auto; width:max-content; max-width:90vw; z-index:31; transition:opacity .3s}
.apertura-cortina #etapa-sobre .saltar{position:fixed; left:0; right:0; bottom:calc(24px + env(safe-area-inset-bottom)); margin:0 auto; width:max-content; z-index:31}
.apertura-cortina .telon.abriendo ~ .toca{opacity:0}

/* ---------- Más información, versión 2 (Jose: «un plus de calidad y un toque más elegante»). Patrones de Zola, Joy,
   Paperless Post y bodas.net: cabecera centrada con icono de línea fina y filete con rombo, versalitas espaciadas para
   etiquetas, línea de tiempo para el transporte, tarjetas de alojamiento completas y galería editorial. ---------- */
.bloque{display:grid; gap:16px; padding-top:28px; margin-top:8px; border-top:1px solid color-mix(in srgb, var(--texto) 12%, transparent); scroll-margin:24px}
/* Si no hay detalles antes, el primer bloque no lleva la línea de arriba (quedaba pegada al borde de la caja). */
.detalles > .bloque:first-child{border-top:0; margin-top:0; padding-top:2px}
.bloque-cabeza{display:grid; justify-items:center; gap:7px; text-align:center}
.bloque-icono{width:30px; height:30px; color:var(--acento)}
.bloque-icono svg{display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round}
.bloque-titulo{margin:0; font-family:var(--f-titulo); font-weight:600; font-size:clamp(25px, 6.8vw, 31px); line-height:1.08; letter-spacing:.005em; color:var(--texto); text-wrap:balance}
.bloque-filete{position:relative; display:block; width:88px; height:9px; opacity:.85;
  background:linear-gradient(var(--acento), var(--acento)) left center / 36px 1px no-repeat, linear-gradient(var(--acento), var(--acento)) right center / 36px 1px no-repeat}
.bloque-filete::after{content:""; position:absolute; left:50%; top:50%; width:5px; height:5px; background:var(--acento); transform:translate(-50%, -50%) rotate(45deg)}
.versal{font-family:var(--f-texto); font-size:11px; font-weight:600; line-height:1.3; letter-spacing:.2em; text-transform:uppercase; color:var(--acento)}
/* Vestimenta */
.vestir{display:grid; gap:14px; justify-items:center; text-align:center; font-size:16px; line-height:1.5}
.vestir-nivel{padding:6px 14px 5px; border:1px solid color-mix(in srgb, var(--acento) 50%, transparent); border-radius:999px}
.vestir-codigo{margin:0; font-family:var(--f-titulo); font-size:22px; font-style:italic; line-height:1.3; text-wrap:balance}
.vestir-quien{display:grid; grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); width:100%; border-block:1px solid color-mix(in srgb, var(--texto) 12%, transparent)}
.vestir-quien > div{display:grid; gap:4px; align-content:start; padding:12px 8px}
.vestir-quien > div + div{border-left:1px solid color-mix(in srgb, var(--texto) 12%, transparent)}
.vestir-quien p{margin:0; font-size:15px; line-height:1.4}
.vestir-paleta{display:grid; gap:10px; justify-items:center}
.vestir-colores{display:flex; flex-wrap:wrap; justify-content:center; gap:12px 16px; margin:0; padding:0; list-style:none}
.vestir-colores li{display:grid; justify-items:center; gap:7px; font-size:12px; line-height:1.2; max-width:68px}
.vestir-colores i{width:34px; height:34px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 3px var(--tarjeta), 0 0 0 4px color-mix(in srgb, var(--texto) 14%, transparent)}
.vestir-evitar{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin:0; font-size:14px}
.vestir-evitar i{position:relative; width:20px; height:20px; border-radius:50%; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.vestir-evitar i::after{content:""; position:absolute; left:-3px; right:-3px; top:50%; height:1.5px; background:#9b3b33; transform:rotate(-45deg)}
.vestir-nota{margin:0; max-width:34ch; font-size:15px; opacity:.85}
/* Cómo llegar: línea de tiempo */
.tiempo{list-style:none; margin:0 auto; padding:0; width:100%; max-width:420px}
.tiempo li{display:grid; grid-template-columns:58px 17px 1fr; column-gap:10px; padding-bottom:18px}
.tiempo li:last-child{padding-bottom:0}
.tiempo.sin-horas li{grid-template-columns:17px 1fr}
.tiempo.sin-horas .tiempo-hora{display:none}
.tiempo-hora{padding-top:3px; text-align:right; font-family:var(--f-texto); font-size:13px; font-weight:600; letter-spacing:.08em; color:var(--acento); font-variant-numeric:tabular-nums}
.tiempo-punto{position:relative}
.tiempo-punto::before{content:""; position:absolute; z-index:1; left:50%; top:6px; width:9px; height:9px; border:1.5px solid var(--acento); border-radius:50%; background:var(--tarjeta); transform:translateX(-50%)}
.tiempo li:not(:last-child) .tiempo-punto::after{content:""; position:absolute; left:50%; top:17px; bottom:-10px; width:1px; background:color-mix(in srgb, var(--acento) 45%, transparent)}
.tiempo-texto{display:grid; gap:2px; font-size:15px; line-height:1.45}
.tiempo-titulo{font-family:var(--f-titulo); font-size:19px; font-weight:600; line-height:1.2}
/* Lugares con foto (ceremonia, banquete…) */
.lugares{display:grid; gap:16px}
.lugar{display:grid; overflow:hidden; border:1px solid color-mix(in srgb, var(--texto) 14%, transparent); border-radius:3px; background:color-mix(in srgb, var(--tarjeta) 75%, #fff)}
.lugar-foto{aspect-ratio:3 / 2; overflow:hidden; background:color-mix(in srgb, var(--texto) 8%, transparent)}
.lugar-foto img{display:block; width:100%; height:100%; object-fit:cover}
.lugar-cuerpo{display:grid; gap:6px; justify-items:start; padding:16px 16px 18px; font-size:15px; line-height:1.45}
.lugar-cuerpo p{margin:0}
.lugar-nombre{margin:0; font-family:var(--f-titulo); font-size:24px; font-weight:600; line-height:1.15; text-wrap:balance}
/* Nuestra canción (Spotify, se carga al pulsar) */
.cancion-nota{margin:0; text-align:center; font-family:var(--f-titulo); font-size:20px; font-style:italic; text-wrap:balance}
.cancion-hueco{display:grid; justify-items:center; gap:8px}
.cancion-aviso{margin:0; font-size:12px; opacity:.65}
.cancion-spotify{width:100%; border:0; border-radius:12px}
/* Dónde alojarse */
.aloj-lista{display:grid; gap:12px}
.aloj{display:grid; gap:6px; justify-items:start; padding:18px 16px; border:1px solid color-mix(in srgb, var(--texto) 14%, transparent); border-radius:3px; background:color-mix(in srgb, var(--tarjeta) 75%, #fff); font-size:15px; line-height:1.45}
.aloj-nombre{margin:0; font-family:var(--f-titulo); font-size:22px; font-weight:600; line-height:1.15}
.aloj p{margin:0}
.aloj-dir{font-size:14px; opacity:.75}
.aloj-codigo{display:inline-flex; gap:8px; align-items:baseline; margin-top:2px; padding:6px 10px; border:1px dashed color-mix(in srgb, var(--acento) 60%, transparent); border-radius:3px; font-size:13px}
.aloj-codigo b{font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size:14px; letter-spacing:.08em}
.aloj-limite{font-size:14px; font-weight:600; color:var(--acento)}
.aloj-botones{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px !important}
.boton-fino{display:inline-flex; align-items:center; min-height:40px; padding:8px 18px; border:1px solid var(--texto); border-radius:999px; background:transparent; color:var(--texto); font-size:14px; font-weight:600; letter-spacing:.03em; text-decoration:none}
.boton-fino.lleno{background:var(--texto); color:var(--tarjeta)}
.boton-fino:focus-visible{outline:2px solid var(--acento); outline-offset:2px}
/* Preguntas frecuentes */
.faq-lista{border-top:1px solid color-mix(in srgb, var(--texto) 14%, transparent)}
.faq{border-bottom:1px solid color-mix(in srgb, var(--texto) 14%, transparent)}
.faq summary{display:grid; grid-template-columns:1fr 16px; gap:14px; align-items:center; padding:15px 2px; list-style:none; cursor:pointer; font-size:16px; font-weight:600; line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; width:14px; height:14px; justify-self:end; transition:transform .25s ease;
  background:linear-gradient(var(--acento), var(--acento)) center / 14px 1.5px no-repeat, linear-gradient(var(--acento), var(--acento)) center / 1.5px 14px no-repeat}
.faq[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline:2px solid var(--acento); outline-offset:2px}
.faq p{margin:0 2px 16px; font-size:15px; line-height:1.55; opacity:.9}
/* Galería editorial: la primera grande y el resto de dos en dos (la última, si queda sola, también grande) */
.galeria{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.galeria-foto{appearance:none; border:0; padding:0; margin:0; overflow:hidden; aspect-ratio:4/5; border-radius:2px; background:color-mix(in srgb, var(--texto) 8%, transparent); cursor:zoom-in}
.galeria-foto:first-child,.galeria-foto:last-child:nth-child(even){grid-column:1 / -1; aspect-ratio:3/2}
.galeria-foto img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.galeria-foto:hover img{transform:scale(1.03)}
.galeria-foto:focus-visible{outline:2px solid var(--acento); outline-offset:2px}
@media (prefers-reduced-motion: reduce){ .galeria-foto img,.faq summary::after{transition:none} }
/* Caja de detalles de papelería fina en los acabados elegante y suave (bodas, ceremonias, empresa…): sin el borde
   grueso con sombra dura del estilo años 2000. */
.acabado-elegante .detalles{border:1px solid color-mix(in srgb, var(--acento) 40%, transparent); outline:1px solid color-mix(in srgb, var(--acento) 22%, transparent); outline-offset:-8px;
  border-radius:2px; box-shadow:0 26px 60px color-mix(in srgb, var(--oscuro) 16%, transparent); padding:34px 24px 26px; gap:16px}
.acabado-suave .detalles{border:0; border-radius:24px; box-shadow:0 20px 50px color-mix(in srgb, var(--oscuro) 14%, transparent); padding:30px 22px 24px; gap:16px}
.acabado-elegante .det-etq,.acabado-suave .det-etq{font-size:11px; font-weight:600; letter-spacing:.2em}
.acabado-elegante .boton-mapa,.acabado-suave .boton-mapa{border-width:1px; background:transparent; color:var(--texto); font-size:14px; font-weight:600}
.visor{position:fixed; inset:0; z-index:60; background:rgba(8,6,10,.96); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); display:grid; place-items:center; padding:20px}
.visor img{max-width:100%; max-height:calc(100vh - 120px); object-fit:contain; border-radius:6px}
@supports (height:100dvh){ .visor img{max-height:calc(100dvh - 120px)} }
.visor button{appearance:none; border:0; background:rgba(255,255,255,.16); color:#fff; font-size:30px; line-height:1; width:48px; height:48px; border-radius:50%; cursor:pointer; position:absolute}
.visor-cerrar{top:max(14px, env(safe-area-inset-top)); right:14px}
.visor-ant{left:10px; top:50%; transform:translateY(-50%)}
.visor-sig{right:10px; top:50%; transform:translateY(-50%)}
.visor button:focus-visible{outline:3px solid #fff; outline-offset:2px}
.visor-cuenta{position:absolute; left:0; right:0; bottom:max(18px, env(safe-area-inset-bottom)); margin:0; text-align:center; color:#fff; font:600 14px/1 var(--f-texto); opacity:.85}

/* Transporte con plazas en la línea de tiempo (Boda Completa, 15-sep-2026). */
.tiempo-plazas{margin-top:5px; font-size:10px; letter-spacing:.16em}

/* ---------- boda: aviso de cambios, tu mesa, «Busca tu mesa», pase y álbum (16-sep-2026) ---------- */
.aviso-cambio{display:grid; gap:4px; padding:12px 14px; border-radius:10px; border:1.5px solid var(--acento); background:color-mix(in srgb, var(--acento) 10%, var(--tarjeta)); font-size:16px; line-height:1.4}
.aviso-cambio p{margin:0}
.saludo-pase{margin:0; font-size:16px; line-height:1.4}
.plazo{font-weight:700; opacity:.9}
.busca-mesa{display:grid; gap:10px; grid-template-columns:1fr auto; align-items:end}
.busca-mesa .campo{min-width:0}
.busca-mesa .boton-fino{min-height:48px; display:inline-flex; align-items:center; justify-content:center; text-align:center; padding-inline:22px}
.busca-mesa-resultado{font-size:15px; line-height:1.4}
.busca-mesa-resultado p{margin:0}
.mesas-encontradas{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.mesas-encontradas li{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:10px 12px; border-radius:8px; background:color-mix(in srgb, var(--acento) 8%, #fff); color:#1a0f14}
.mesas-encontradas b{font-family:var(--f-titulo); color:var(--acento); font-size:19px; text-align:right}
.tu-mesa{display:grid; gap:2px; justify-items:center; text-align:center; padding:12px; border-radius:10px; border:1.5px dashed var(--acento)}
.tu-mesa p{margin:0}
.tu-mesa-nombre{font-family:var(--f-titulo); font-size:28px; line-height:1.1; color:var(--acento)}
/* Con quién se sienta y capitán de mesa (16-sep-2026). */
.eres-capitan{font-weight:700}
.companeros{opacity:.92; line-height:1.5}
.mesas-encontradas li > div{display:grid; gap:2px; min-width:0}
.mesas-encontradas small.companeros{display:block; font-size:13px}
.album-texto{margin:0; text-align:center}
.album-botones{justify-content:center}
@media (max-width:420px){ .busca-mesa{grid-template-columns:1fr} }
/* Save the Date: sin «Confirmar», el botón del calendario ocupa toda la fila. */
.acciones > :only-child{grid-column:1 / -1; flex:1 1 100%}
/* Después de confirmar: enlace discreto para que el invitado cree la suya (medido con ?de=invitado). */
.crea-la-tuya{justify-self:center; font-size:13px; color:var(--texto); opacity:.75; text-underline-offset:3px; text-align:center}
/* Invitación gratuita (6-oct-2026): el llamado «Crea la tuya gratis» tras confirmar, con más presencia que el enlace discreto. */
.crea-la-tuya.crea-gratis{opacity:1; padding:10px 14px; border:1px dashed color-mix(in srgb, var(--texto) 35%, transparent); border-radius:12px; font-size:14px; text-decoration:none}
.crea-la-tuya.crea-gratis strong{text-decoration:underline; text-underline-offset:3px}
.firma-gratis{opacity:.9}
/* Bodas y Save the Date (por tipo de evento, no por acabado: el acabado «suave» lo comparten los temas dulces): la pegatina deja de ser un rótulo negro y pasa a ser un rótulo fino en papel. */
body.aspecto-boda .pegatina,
body.tipo-savethedate .pegatina{
  background:color-mix(in srgb, var(--tarjeta) 88%, #fff); color:var(--texto); border:1px solid color-mix(in srgb, var(--acento) 45%, transparent);
  font-size:clamp(13px, 3.4vw, 16px); letter-spacing:.24em; text-transform:uppercase; padding:9px 18px; transform:none; box-shadow:none;
}
body.aspecto-boda .pegatina em,
body.tipo-savethedate .pegatina em{color:var(--acento)}
/* Bodas (16-sep-2026): la carta del sobre dejaba de parecer papelería y parecía una hoja de cuaderno, con sus
   renglones y el título torcido. Aquí va en papel liso, con un filete fino y el texto recto. */
body.aspecto-boda .carta,
body.tipo-savethedate .carta{
  background-image:none;
  box-shadow:0 1px 3px rgba(0,0,0,.10), inset 0 0 0 1px color-mix(in srgb, var(--acento) 30%, transparent);
  padding-top:11%;
}
body.aspecto-boda .carta b,
body.tipo-savethedate .carta b{transform:none; letter-spacing:.01em}
body.aspecto-boda .carta small,
body.tipo-savethedate .carta small{
  margin-top:6px; font-size:calc(var(--env-w) * .042); letter-spacing:.2em; text-transform:uppercase; opacity:.8;
}
/* Y el «toca el sobre» deja de ser un cartel con sombra dura y corazón: rótulo fino en versalitas. */
body.aspecto-boda .toca,
body.tipo-savethedate .toca{
  background:transparent; color:var(--texto); border:0; box-shadow:none; transform:none; padding:8px 0;
  font-family:var(--f-titulo); font-weight:500; font-size:clamp(14px, 3.6vw, 17px);
  letter-spacing:.26em; text-transform:uppercase; opacity:.8;
}
body.aspecto-boda .toca .latido,
body.tipo-savethedate .toca .latido{display:none}

/* ---------- Sobre de boda: la foto ES el sobre (16-sep-2026) ----------
   Dibujar el sobre con CSS no se acercaba al realismo de la papeleria buena. Ahora el sobre es una fotografia a
   sangre y la apertura se hace partiendola: la solapa de arriba gira en 3D y el cuerpo se queda quieto. La misma
   foto pinta el cuerpo y la solapa, encajada por porcentajes, asi que el corte casa exactamente. */
body.aspecto-boda #etapa-sobre,
body.tipo-savethedate #etapa-sobre{padding:0; gap:0}
/* Nada alrededor: ni rotulo, ni sello de fecha, ni remite, ni la pantallita de movil. */
body.aspecto-boda #etapa-sobre .toca, body.tipo-savethedate #etapa-sobre .toca,
body.aspecto-boda #etapa-sobre .pantalla-movil, body.tipo-savethedate #etapa-sobre .pantalla-movil,
body.aspecto-boda .sello-postal, body.tipo-savethedate .sello-postal,
body.aspecto-boda .matasellos, body.tipo-savethedate .matasellos,
body.aspecto-boda .remite, body.tipo-savethedate .remite{display:none}
/* El sobre ocupa la pantalla entera. --v es la altura a la que baja el pico de la solapa en la foto. */
body.aspecto-boda #etapa-sobre .sobre,
body.tipo-savethedate #etapa-sobre .sobre{
  --v:41%;
  position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto;
  border-radius:0; animation:none; filter:none; perspective:950px;
}
/* El cuerpo del sobre: la foto entera. */
body.aspecto-boda .sobre .sobre-frente,
body.tipo-savethedate .sobre .sobre-frente{
  background:var(--foto-sobre) center top / auto 100% no-repeat;
  /* Al cuerpo se le recorta la V: si se deja la foto entera, la solapa cerrada sigue viendose debajo y el sobre
     parece que no se abre aunque la solapa este girando. */
  clip-path:polygon(0 0, 50% var(--v), 100% 0, 100% 100%, 0 100%);
  border-radius:0; box-shadow:none;
}
body.aspecto-boda .sobre .sobre-frente::before,
body.tipo-savethedate .sobre .sobre-frente::before,
body.aspecto-boda .sobre .sobre-frente::after,
body.tipo-savethedate .sobre .sobre-frente::after{display:none}
body.aspecto-boda .sobre .sobre-trasera,
body.tipo-savethedate .sobre .sobre-trasera{
  background:#e9e0d0 var(--ruido); border-radius:0;
  box-shadow:inset 0 14px 22px -12px rgba(0,0,0,.28);   /* la sombra del papel al fondo del sobre */
}
body.aspecto-boda .lado,
body.tipo-savethedate .lado{display:none}
/* La solapa: el trozo de ARRIBA de la misma foto, escalado para que encaje con el cuerpo sin costura. */
body.aspecto-boda .solapa,
body.tipo-savethedate .solapa{height:var(--v); filter:drop-shadow(0 2px 4px rgba(0,0,0,.10))}
body.aspecto-boda .solapa-sombra,
body.tipo-savethedate .solapa-sombra{display:none}
body.aspecto-boda .sobre .cara-fuera,
body.tipo-savethedate .sobre .cara-fuera{
  background:var(--foto-sobre) center top / auto 244% no-repeat;
  border-radius:0;
}
body.aspecto-boda .sobre .cara-fuera::before,
body.tipo-savethedate .sobre .cara-fuera::before{display:none}
/* El interior del sobre, al levantarse la solapa. */
body.aspecto-boda .cara-dentro,
body.tipo-savethedate .cara-dentro{background:#ede4d4 var(--ruido)}
/* El lacre viene en la foto: al abrirse se parte por la costura, como el de verdad. */
body.aspecto-boda .lacre,
body.tipo-savethedate .lacre{display:none}
/* La carta, una tarjeta dentro del sobre. */
/* La tarjeta, DENTRO del sobre: asomando por la V, no flotando pegada al borde de la pantalla. */
body.aspecto-boda .carta,
body.tipo-savethedate .carta{left:14%; right:14%; top:19%; height:33%; padding:7% 8% 0; background-image:none}
body.aspecto-boda .carta b,
body.tipo-savethedate .carta b{font-size:min(9vw, 46px); transform:none}
body.aspecto-boda .carta small,
body.tipo-savethedate .carta small{font-size:min(3.4vw, 17px); letter-spacing:.2em; text-transform:uppercase; opacity:.8}
/* La tarjeta sube hasta asomar por encima del sobre: con poco recorrido se queda dentro de la V y el texto
   aparece cortado por los bordes de la solapa. */
body.aspecto-boda .sube .carta,
body.tipo-savethedate .sube .carta{transform:translateY(-32%)}

/* ---------- Apertura en cuatro pliegues (Jose, 16-sep-2026) ----------
   «Que los cuatro pliegues se abran cada uno en su direccion y dentro este el rasca». Cada pliegue es un recorte de
   la MISMA foto del sobre, girando sobre su borde exterior: arriba, izquierda, derecha y abajo. */
.pliegue{display:none}
body.aspecto-boda .pliegue,
body.tipo-savethedate .pliegue{
  display:block; position:absolute; inset:0; z-index:4;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  background:var(--foto-sobre) center top / auto 100% no-repeat;
  box-shadow:0 0 22px rgba(0,0,0,.10);
  will-change:transform, filter;
}
body.aspecto-boda .pl-ar,
body.tipo-savethedate .pl-ar{clip-path:polygon(0 0, 100% 0, 50% var(--v)); transform-origin:50% 0}
body.aspecto-boda .pl-ab,
body.tipo-savethedate .pl-ab{clip-path:polygon(0 100%, 50% 60%, 100% 100%); transform-origin:50% 100%}
body.aspecto-boda .pl-iz,
body.tipo-savethedate .pl-iz{clip-path:polygon(0 0, 50% var(--v), 50% 60%, 0 100%); transform-origin:0 50%}
body.aspecto-boda .pl-de,
body.tipo-savethedate .pl-de{clip-path:polygon(100% 0, 50% var(--v), 50% 60%, 100% 100%); transform-origin:100% 50%}




/* Con los cuatro pliegues, el frente, la solapa y la carta que subia ya no pintan nada. */
body.aspecto-boda .sobre .sobre-frente, body.tipo-savethedate .sobre .sobre-frente,
body.aspecto-boda .solapa, body.tipo-savethedate .solapa,
body.aspecto-boda .solapa-sombra, body.tipo-savethedate .solapa-sombra,
body.aspecto-boda .carta, body.tipo-savethedate .carta{display:none}

/* ---------- Iniciales grabadas en el lacre y frase estampada (Jose, 16-sep-2026) ----------
   Todo tiene que seguir pareciendo parte del sobre real. Las iniciales se hunden en la cera con dos capas: una sombra
   oscura en «multiply» y una luz clara en «screen», desplazadas un pelo. Asi toman el color del lacre que haya
   debajo, sea dorado o del tono del papel, sin tener que saberlo. */
.lacre-iniciales,.sobre-frase{display:none}
body.aspecto-boda .lacre-iniciales,
body.tipo-savethedate .lacre-iniciales{
  display:block; position:absolute; left:50%; top:49.4%; z-index:6; width:14vh; height:14vh;
  transform:translate(-50%, -50%); pointer-events:none;
  font-family:var(--f-titulo); font-size:5vh; line-height:1; letter-spacing:.02em;
  transition:opacity .38s ease;
}
body.aspecto-boda .lacre-iniciales::before, body.aspecto-boda .lacre-iniciales::after,
body.tipo-savethedate .lacre-iniciales::before, body.tipo-savethedate .lacre-iniciales::after{
  content:attr(data-t); position:absolute; inset:0; display:grid; place-items:center;
}
body.aspecto-boda .lacre-iniciales::before,
body.tipo-savethedate .lacre-iniciales::before{
  /* Grabado en el color real de la cera (--cera lo pone el JS por tema): el hueco, un tono mas oscuro; su borde de
     arriba en sombra y el de abajo con luz. Sin mezclas de fusion, que daban letras grises o plateadas encima. */
  color:color-mix(in srgb, var(--cera, #b39060) 84%, #000);
  text-shadow:0 -1px 0 color-mix(in srgb, var(--cera, #b39060) 52%, #000), 0 1px 0 color-mix(in srgb, var(--cera, #b39060) 48%, #fff);
}
body.aspecto-boda .lacre-iniciales::after,
body.tipo-savethedate .lacre-iniciales::after{display:none}
/* Al romperse el lacre, las iniciales se van con el. */
body.aspecto-boda .abriendo .lacre-iniciales,
body.tipo-savethedate .abriendo .lacre-iniciales{opacity:0}

/* La frase de la solapa de abajo: va DENTRO del pliegue inferior, asi se abre con el. */
body.aspecto-boda .sobre-frase,
body.tipo-savethedate .sobre-frase{
  display:block; position:absolute; left:0; right:0; bottom:9%; text-align:center;
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif; font-weight:600;
  font-size:2.3vh; line-height:1; letter-spacing:.34em; text-transform:uppercase;
}
/* Estampado en lamina dorada mate, como el grabado de la solapa de arriba. */
body.estampado-oro .sobre-frase{
  background:linear-gradient(100deg, #9c7a3c, #e2c47c 42%, #a6823e 68%, #d5b469);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 .5px 0 rgba(0,0,0,.22));
}
/* Estampado en relieve, tono sobre tono: el texto no se ve, solo su luz y su sombra. */
body.estampado-relieve .sobre-frase{color:transparent}
body.estampado-relieve .sobre-frase::before,
body.estampado-relieve .sobre-frase::after{content:attr(data-t); position:absolute; inset:0}
body.estampado-relieve .sobre-frase::before{color:rgba(255,255,255,.32); mix-blend-mode:screen; transform:translateY(-.1vh)}
body.estampado-relieve .sobre-frase::after{color:rgba(0,0,0,.26); mix-blend-mode:multiply; transform:translateY(.12vh)}
/* El de volutas ya trae la solapa de abajo decorada: sin frase. */
body.estampado-no .sobre-frase{display:none}

/* ---------- El rasca DENTRO del sobre (16-sep-2026) ----------
   En bodas el sobre va fijo encima de la tarjeta, y su fondo interior es transparente: al abrirse los cuatro pliegues
   no queda un hueco gris, se ve directamente la invitacion que estaba debajo. */
body.aspecto-boda #etapa-sobre,
body.tipo-savethedate #etapa-sobre{position:fixed; inset:0; z-index:30; min-height:0}
body.aspecto-boda .sobre .sobre-trasera,
body.tipo-savethedate .sobre .sobre-trasera{background:transparent; box-shadow:none}

/* ---------- El rasca a sangre (Jose, 16-sep-2026) ----------
   Como el sobre: la tarjeta para rascar ocupa la pantalla entera, sin el cartel de «Rasca y descubre», sin la barra
   de progreso y sin los trozos de celo de las esquinas. Solo en bodas: los cumpleanos conservan su estilo. */
body.aspecto-boda #etapa-rasca,
body.tipo-savethedate #etapa-rasca{padding:0; gap:0}
body.aspecto-boda .pegatina, body.tipo-savethedate .pegatina,
body.aspecto-boda #etapa-rasca .progreso, body.tipo-savethedate #etapa-rasca .progreso,
body.aspecto-boda .ticket .cinta, body.tipo-savethedate .ticket .cinta{display:none}
body.aspecto-boda .ticket,
body.tipo-savethedate .ticket{
  width:100vw; height:100vh; max-width:none; aspect-ratio:auto; margin:0; border-radius:0; box-shadow:none;
}
@supports (height:100dvh){
  body.aspecto-boda .ticket,
  body.tipo-savethedate .ticket{height:100dvh}
}

/* ---------- Apertura de los pliegues (16-sep-2026, segunda version) ----------
   La primera iba «a trompicones»: la curva de aceleracion se aplica a CADA tramo entre fotogramas clave, y con cinco
   tramos por pliegue cada uno arrancaba lento y frenaba. Ademas animar filter en cuatro capas 3D perdia fotogramas.
   Ahora: dos fotogramas clave y UNA curva continua por pliegue; la asimetria la dan los retrasos y las duraciones;
   y la luz, una capa negra que solo cambia de opacidad (barato de dibujar). */
body.aspecto-boda .pliegue,
body.tipo-savethedate .pliegue{will-change:transform}
body.aspecto-boda .pliegue::before,
body.tipo-savethedate .pliegue::before{
  content:""; position:absolute; inset:0; background:#000; opacity:0; pointer-events:none;
}
@keyframes pliegue-ar{from{transform:rotateX(0)} to{transform:rotateX(-100deg)}}
@keyframes pliegue-ab{from{transform:rotateX(0)} to{transform:rotateX(100deg)}}
@keyframes pliegue-iz{from{transform:rotateY(0)} to{transform:rotateY(100deg)}}
@keyframes pliegue-de{from{transform:rotateY(0)} to{transform:rotateY(-100deg)}}
@keyframes pliegue-luz{from{opacity:0} to{opacity:.22}}
body.aspecto-boda .abierto .pl-ar,
body.tipo-savethedate .abierto .pl-ar{animation:pliegue-ar 1.5s cubic-bezier(.55,.06,.25,1) 0s both}
body.aspecto-boda .abierto .pl-iz,
body.tipo-savethedate .abierto .pl-iz{animation:pliegue-iz 1.65s cubic-bezier(.55,.06,.25,1) .34s both}
body.aspecto-boda .abierto .pl-de,
body.tipo-savethedate .abierto .pl-de{animation:pliegue-de 1.58s cubic-bezier(.55,.06,.25,1) .5s both}
body.aspecto-boda .abierto .pl-ab,
body.tipo-savethedate .abierto .pl-ab{animation:pliegue-ab 1.75s cubic-bezier(.55,.06,.25,1) .78s both}
body.aspecto-boda .abierto .pl-ar::before, body.tipo-savethedate .abierto .pl-ar::before{animation:pliegue-luz 1.5s ease-in 0s both}
body.aspecto-boda .abierto .pl-iz::before, body.tipo-savethedate .abierto .pl-iz::before{animation:pliegue-luz 1.65s ease-in .34s both}
body.aspecto-boda .abierto .pl-de::before, body.tipo-savethedate .abierto .pl-de::before{animation:pliegue-luz 1.58s ease-in .5s both}
body.aspecto-boda .abierto .pl-ab::before, body.tipo-savethedate .abierto .pl-ab::before{animation:pliegue-luz 1.75s ease-in .78s both}
@media (prefers-reduced-motion: reduce){
  body.aspecto-boda .abierto .pliegue, body.tipo-savethedate .abierto .pliegue,
  body.aspecto-boda .abierto .pliegue::before, body.tipo-savethedate .abierto .pliegue::before{animation-duration:.01s; animation-delay:0s}
}

/* ---------- «Solapa clásica»: sobre real por capas (Jose, 16-sep-2026) ----------
   Réplica del movimiento de un vídeo de Kling con piezas de tres fotos alineadas de cada sobre. El escenario tiene la
   proporción de las fotos (768×1376) y llena el alto; en pantallas más estrechas se recortan los lados, como antes. */
body.aspecto-boda #etapa-sobre .sobre-real,
body.tipo-savethedate #etapa-sobre .sobre-real{overflow:hidden; perspective:none; background:var(--fondo); container-type:size}
/* El sobre CUBRE la pantalla, nunca deja fondo a los lados (Jose, 16-sep-2026): toma el mayor de «alto de pantalla» y
   «ancho de pantalla» y se centra; en pantallas anchas se recorta arriba y abajo, con el lacre casi en el centro. */
.sr-escenario{position:absolute; top:50%; left:50%; width:max(100cqw, 100cqh * 768 / 1376); aspect-ratio:768/1376;
  transform:translate(-50%, -50%); perspective:1500px; perspective-origin:50% 42%}
.sr-capa{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; user-select:none}
.sr-sombra{opacity:0; transform-origin:50% 0; will-change:transform, opacity}
.sr-solapa{position:absolute; inset:0; transform-origin:50% 0; transform-style:preserve-3d; will-change:transform}
/* La luz sobre la solapa al levantarse: la punta se aclara y el doblez se oscurece, recortados con la propia solapa. */
.sr-brillo,.sr-doblez{position:absolute; inset:0; opacity:0; pointer-events:none;
  -webkit-mask:var(--mascara) center / 100% 100% no-repeat; mask:var(--mascara) center / 100% 100% no-repeat}
.sr-brillo{background:linear-gradient(to bottom, rgba(255,255,255,0) 20%, #fffaf0 75%)}
.sr-doblez{background:linear-gradient(to bottom, rgba(70,52,28,.55) 0%, rgba(70,52,28,.18) 18%, rgba(70,52,28,0) 34%)}
/* Piezas del lacre: recorte de 360 px con la esquina en (204, 500) de la foto. */
.sr-lacre{position:absolute; left:calc(var(--lacre-x, 204) / 768 * 100%); top:calc(var(--lacre-y, 500) / 1376 * 100%); width:calc(360 / 768 * 100%); aspect-ratio:1;
  pointer-events:none; transform-origin:50% 50%}
.sr-lacre img{position:absolute; inset:0; width:100%; height:100%; display:block}
.sr-arriba,.sr-abajo{visibility:hidden}
.lacre-partido .sr-arriba,.lacre-partido .sr-abajo{visibility:visible}
.sr-grieta{opacity:0}
/* Iniciales grabadas en la cera, recortadas con la silueta de su trozo para partirse con él. El grabado es el del
   sobre de pliegues: el color real de la cera un tono más oscuro, sombra fina arriba y luz fina abajo. */
.sr-iniciales{position:absolute; inset:0; pointer-events:none; font-family:var(--f-titulo);
  -webkit-mask:var(--pieza) center / 100% 100% no-repeat; mask:var(--pieza) center / 100% 100% no-repeat}
/* Tamaño y centrado los calcula encajarIniciales() midiendo la tinta de las letras (invitacion.js). */
.sr-iniciales b{position:absolute; left:50%; top:50%; white-space:nowrap; font-weight:inherit; line-height:1; letter-spacing:0;
  font-size:var(--ini-t, 5vh); transform:translate(calc(-50% + var(--ini-dx, 0px)), calc(-50% + var(--ini-dy, 0px)));
  color:color-mix(in srgb, var(--cera, #b39060) 84%, #000);
  text-shadow:0 -1px 0 color-mix(in srgb, var(--cera, #b39060) 52%, #000), 0 1px 0 color-mix(in srgb, var(--cera, #b39060) 48%, #fff)}
/* Logo grabado en la cera: tres capas con la silueta del logo (sombra arriba, luz abajo y la tinta un tono más oscuro). */
.sr-logo i{position:absolute; width:var(--logo-t, 34%); aspect-ratio:1; transform:translate(-50%, -50%);
  -webkit-mask:var(--logo-img) center / contain no-repeat; mask:var(--logo-img) center / contain no-repeat}
.sr-logo .sr-logo-sombra{background:color-mix(in srgb, var(--cera, #b39060) 50%, #000); margin-top:-1px}
.sr-logo .sr-logo-luz{background:color-mix(in srgb, var(--cera, #b39060) 45%, #fff); margin-top:1px}
.sr-logo .sr-logo-tinta{background:color-mix(in srgb, var(--cera, #b39060) 80%, #000)}
/* Monograma «M&L»: posiciones y tamaños medidos por encajarMonograma(). */
.sr-iniciales.mono b{left:0; top:0; transform:none}
.sr-iniciales.mono .m1{left:var(--m1-x, 30%); top:var(--m1-y, 40%); font-size:var(--m1-t, 4vh)}
.sr-iniciales.mono .m2{left:var(--m2-x, 60%); top:var(--m2-y, 45%); font-size:var(--m2-t, 4vh)}
.sr-iniciales.mono .amp{left:var(--amp-x, 47%); top:var(--amp-y, 45%); font-size:var(--amp-t, 2.2vh)}
/* La frase estampada en la solapa de abajo, que aquí no se mueve. */
.sobre-real .sobre-frase{z-index:1}
.sr-luz{position:absolute; inset:0; opacity:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,250,238,.95) 0%, rgba(255,246,226,.75) 40%, rgba(255,246,226,.25) 75%, rgba(255,246,226,0) 100%)}
.sr-blanco{position:absolute; inset:0; opacity:0; pointer-events:none; background:#fffdf8}
/* En bodas con este sobre no hay iniciales sueltas ni pliegues: todo va dentro del escenario. */
.sobre-real .lacre-iniciales,.sobre-real .pliegue{display:none}

/* Bodas y Save the Date: su regla de «rasca a sangre» (padding:0) pisaba el hueco inferior de la invitación descubierta y
   la barra fija tapaba el final (la firma «Hecha con Abre y Ven»); Jose tenía que estirar para verlo (17-sep-2026). */
body.aspecto-boda.scroll #etapa-rasca,
body.tipo-savethedate.scroll #etapa-rasca{padding-bottom:calc(210px + env(safe-area-inset-bottom))}

/* Empresa: sin corazón junto a «toca el sobre» (17-sep-2026). */
body.tipo-empresa .toca .latido{display:none}

/* Color propio de los títulos (marca de empresa, 17-sep-2026). */
.t-titulo,.bloque-titulo{color:var(--titulo, var(--texto))}

/* ---------- Vídeo de felicitación (17-sep-2026) ---------- */
.felicita-caja{display:grid; gap:8px; justify-items:center; text-align:center; padding:14px; border-radius:12px; border:1.5px dashed var(--acento)}
.felicita-caja p{margin:0}
.grabadora{position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:12px; background:rgba(12,8,6,.78)}
.grabadora-caja{position:relative; width:min(420px, 100%); max-height:100%; overflow:auto; display:grid; gap:12px; padding:18px 16px 20px; border-radius:18px; background:var(--tarjeta, #fffdf8); color:var(--texto, #2d2a26); box-shadow:0 30px 80px rgba(0,0,0,.45)}
.grabadora-titulo{margin:0; font:600 26px/1.1 var(--f-titulo); text-align:center; color:var(--titulo, var(--texto))}
.grabadora-cerrar{position:absolute; top:8px; right:10px; width:40px; height:40px; border:0; border-radius:50%; background:transparent; font-size:28px; line-height:1; color:inherit; cursor:pointer}
.grabadora-pantalla{position:relative; aspect-ratio:3/4; max-height:56vh; border-radius:14px; overflow:hidden; background:#111; justify-self:center; width:100%}
.grabadora-pantalla video{width:100%; height:100%; object-fit:cover; display:block}
/* Vídeo sorpresa (29-sep-2026): pantalla apaisada, marco «reproductor 2000» y aviso de giro. */
.grabadora-pantalla.horizontal{aspect-ratio:16/9; max-height:42vh; width:100%}
.marco2000{position:absolute; inset:0; pointer-events:none; border:6px solid transparent; border-image:linear-gradient(135deg,#ff4fa8,#ffd166,#4fd1ff,#b36bc4) 1; box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.marco2000-barra{position:absolute; left:0; right:0; top:0; height:22px; display:flex; align-items:center; gap:6px; padding:0 8px; background:linear-gradient(#5b8def,#2456c8); color:#fff; font:700 11px/1 Verdana,Tahoma,sans-serif; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.marco2000-barra i{width:10px; height:10px; border-radius:2px; background:#ffd166; box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.marco2000-barra::after{content:"_ ▢ ✕"; margin-left:auto; font-size:10px; opacity:.9}
.grabadora-gira{position:absolute; inset:0; margin:0; display:grid; place-content:center; text-align:center; background:rgba(0,0,0,.72); color:#fff; font:700 22px/1.2 var(--f-texto); z-index:2}
.grabadora-gira small{font-weight:500; font-size:14px; opacity:.85}
.grabadora-nombre input{width:100%}
.vs-caja p{margin:0 0 8px}
.vs-plazo{font-weight:600}
.vs-boton{width:100%}
.vs-nota{font-size:.85em; opacity:.8}
.grabadora-vivo{transform:scaleX(-1)}
.grabadora-vivo.trasera{transform:none}
/* Cuenta atrás visible y botón de cambiar de cámara (Jose, 29-sep-2026) */
.grabadora-tiempo{padding:8px 18px; font:800 24px/1 var(--f-texto); letter-spacing:.04em; box-shadow:0 4px 14px rgba(0,0,0,.35)}
.grabadora-tiempo.final{animation:latido .5s infinite alternate; background:#ff1744}
@keyframes latido{from{transform:translateX(-50%) scale(1)} to{transform:translateX(-50%) scale(1.12)}}
.grabadora-preparados{position:absolute; inset:0; display:grid; place-items:center; font:900 120px/1 var(--f-texto); color:#fff; text-shadow:0 6px 30px rgba(0,0,0,.6); background:rgba(0,0,0,.25); z-index:3}
/* Escenario de grabación a pantalla completa (29-sep-2026): el marco 2000 ocupa toda la pantalla del móvil; si el
   navegador no gira con el móvil, la interfaz se gira sola (esc-giro). */
body.grabando{overflow:hidden}
.grabadora-escenario{position:fixed; inset:0; z-index:96; background:#000}
.esc-giro{position:absolute; left:0; top:0; overflow:hidden; background:#000}
.esc-giro .grabadora-vivo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.marco2000-lleno{border-width:10px}
.marco2000-lleno .marco2000-barra{height:30px; font-size:14px; padding:0 12px}
.esc-giro .grabadora-tiempo{top:44px}
.esc-giro .grabadora-preparados{font-size:min(38vw, 38vh)}
.esc-giro .grabadora-gira{font-size:26px; padding:0 24px}
.esc-igual{margin-top:14px; padding:8px 14px; border:1.5px solid #fff; border-radius:999px; background:transparent; color:#fff; font:600 14px/1 var(--f-texto)}
.esc-botones{position:absolute; left:16px; right:16px; bottom:22px; display:flex; justify-content:space-between; align-items:center; gap:10px; z-index:4}
.esc-boton{padding:12px 18px; border:0; border-radius:999px; background:rgba(255,255,255,.9); color:#111; font:700 16px/1 var(--f-texto); cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.3)}
.esc-parar{background:#ff1744; color:#fff; padding:14px 26px; font-size:18px; margin:0 auto}
.grabadora-antes{margin:0; padding:16px; display:grid; place-items:center; height:100%; text-align:center; color:#fff; font:600 15px/1.35 var(--f-texto)}
.grabadora-tiempo{position:absolute; top:36px; left:50%; transform:translateX(-50%); z-index:3; padding:4px 10px; border-radius:999px; background:#c62828; color:#fff; font:700 15px/1 var(--f-texto); font-variant-numeric:tabular-nums}
.grabadora-estado{margin:0; text-align:center; font-size:15px}
.grabadora-botones{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.grabadora-consiente{font-size:13px; text-align:left}
.grabadora-enviar{justify-self:stretch}

/* ---------- Concurso con votación y diploma (17-sep-2026) ---------- */
.concurso{display:grid; gap:14px}
.concurso-texto{margin:0; text-align:center; font-size:16px; line-height:1.45}
.concurso-categorias{display:grid; gap:10px; margin:0; padding:0; list-style:none; text-align:center}
.concurso-categorias li{display:grid; gap:2px}
.concurso-cat-nombre{font-family:var(--f-titulo); font-size:20px; font-weight:600; line-height:1.2}
.concurso .gel:focus-visible{outline-color:var(--acento)}
.diplomas{display:grid; gap:22px}
.diploma-caja{display:grid; gap:10px; justify-items:center; text-align:center}
.diploma-caja.sin-votos{padding:16px; border:1.5px dashed color-mix(in srgb, var(--texto) 30%, transparent); border-radius:12px}
.diploma-rasca{position:relative; width:100%; aspect-ratio:1754 / 1240; border-radius:6px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.18)}
.diploma-rasca canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.diploma-capa{touch-action:none; cursor:grab; transition:opacity .6s ease}
.diploma-botones{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0}
.diploma-botones[hidden]{display:none}
.diploma-saltar{min-height:36px; font-size:13px; opacity:.8}
@media (prefers-reduced-motion: reduce){.diploma-capa{transition:none}}
.diploma-botones .boton-fino,.diploma-saltar{font-family:var(--f-texto); cursor:pointer}

/* ---------- Concurso: «Tu plato» y «La carta» v2, menú degustación (17-sep-2026, «un extra de calidad») ---------- */
/* «menu-carta»: .carta ya es la carta del sobre. Ritmo de 8 px; Cormorant Garamond para lo de carta y DM Sans para lo pequeño. */
.papel-carta{
  --tinta-carta:color-mix(in srgb, var(--texto) 88%, #1d1712);
  --papel:color-mix(in srgb, var(--tarjeta) 84%, #efe4cc);
  --oro:#b8914a;
  --serif-carta:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans-carta:"DM Sans", system-ui, sans-serif;
  position:relative; color:var(--tinta-carta);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(90% 60% at 50% 100%, rgba(150,110,50,.07), transparent 70%),
    var(--papel);
  border:1px solid color-mix(in srgb, var(--oro) 55%, transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 12px 28px -18px rgba(60,40,20,.45);
  border-radius:6px;
}
.papel-carta::before{content:""; position:absolute; inset:6px; border:1px solid color-mix(in srgb, var(--oro) 35%, transparent); border-radius:3px; pointer-events:none}
.plato-vacio{width:52%; height:52%; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; opacity:.6}
.carta-antetitulo{margin:0; font:600 11px/1.4 var(--sans-carta); letter-spacing:.32em; text-transform:uppercase; color:var(--acento)}
.carta-regla{display:flex; align-items:center; justify-content:center; gap:8px; width:min(200px, 70%); margin:0 auto}
.carta-regla span{flex:1; height:4px; border-block:1px solid color-mix(in srgb, var(--oro) 80%, transparent)}
.carta-regla svg{width:14px; height:8px; fill:var(--oro)}
.carta-boton{appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 20px; border:1px solid var(--tinta-carta);
  border-radius:999px; background:transparent; color:var(--tinta-carta); font:600 14px/1.1 var(--sans-carta); letter-spacing:.02em; cursor:pointer; transition:background-color .2s, color .2s}
.carta-boton.lleno{background:var(--tinta-carta); color:var(--papel)}
.carta-boton:disabled{opacity:.6; cursor:progress}
.carta-boton:focus-visible{outline:3px solid var(--acento); outline-offset:3px}

/* «Tu plato» */
.mi-plato{display:grid; gap:16px; justify-items:center; text-align:center; padding:32px 24px 24px}
.mi-plato .campo{width:100%; text-align:left}
.mi-plato-foto{display:grid; place-items:center; width:min(240px, 100%); aspect-ratio:4 / 3; overflow:hidden; border-radius:4px; color:var(--oro);
  background:color-mix(in srgb, var(--papel) 70%, #e6d8bb); outline:1px solid color-mix(in srgb, var(--oro) 60%, transparent); outline-offset:5px; box-shadow:0 10px 22px -14px rgba(60,40,20,.55)}
.mi-plato-foto img{width:100%; height:100%; object-fit:cover; display:block}
.mi-plato-nombre{margin:0; font:italic 500 26px/1.15 var(--serif-carta); text-wrap:balance}
.mi-plato-botones{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.mi-plato-ayuda{margin:0; font:400 13px/1.45 var(--sans-carta); opacity:.75}
.mi-plato-ayuda:empty{display:none}

/* La carta */
.menu-carta{display:grid; gap:24px; padding:32px 16px 24px}
.carta-cabeza{display:grid; justify-items:center; gap:8px; text-align:center}
.carta-titulo{margin:0; font:600 clamp(32px, 9vw, 40px)/1.02 var(--serif-carta); letter-spacing:.01em; color:var(--tinta-carta); text-wrap:balance}
.carta-ayuda{margin:0; max-width:30ch; font:italic 500 17px/1.35 var(--serif-carta); opacity:.8}
.carta-selector{position:sticky; top:0; z-index:4; display:grid; gap:8px; margin:0 -8px; padding:8px; background:var(--papel);
  border-bottom:1px solid color-mix(in srgb, var(--oro) 35%, transparent)}
/* Cada pestaña mide lo que su nombre: «Originalidad» y «Presentación» caben enteras a 360 px; con cinco categorías, se desliza. */
.carta-pestanas{display:flex; gap:4px; padding:4px; border-radius:999px; background:color-mix(in srgb, var(--tinta-carta) 7%, transparent); overflow-x:auto; scrollbar-width:none}
.carta-pestanas::-webkit-scrollbar{display:none}
.carta-pestana{appearance:none; position:relative; display:flex; align-items:center; justify-content:center; flex:1 0 auto; min-height:44px; padding:6px 14px; border:0; border-radius:999px;
  background:transparent; color:var(--tinta-carta); font:600 12.5px/1.1 var(--sans-carta); letter-spacing:-.01em; cursor:pointer; transition:background-color .2s, color .2s, box-shadow .2s}
.carta-pestana span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.carta-pestana[aria-pressed="true"]{background:var(--papel); box-shadow:0 1px 3px rgba(40,25,10,.22); color:var(--acento)}
/* La marca de votada va en la esquina de la pestaña: así el nombre de la categoría cabe entero. */
.carta-check{position:absolute; top:2px; right:3px; display:grid; place-items:center; width:15px; height:15px; border-radius:50%; background:var(--acento); color:var(--texto-boton);
  font:700 9px/1 var(--sans-carta); font-style:normal; opacity:0; transform:scale(.6); transition:opacity .2s, transform .2s}
.carta-pestana.votada .carta-check{opacity:1; transform:none}
.carta-pestana:focus-visible{outline:3px solid var(--acento); outline-offset:1px}
.carta-progreso{margin:0; text-align:center; font:500 12px/1.3 var(--sans-carta); letter-spacing:.06em; opacity:.7}

.carta-platos{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.carta-plato{position:relative; display:grid; grid-template-columns:1fr 108px; align-items:center; gap:12px; padding:16px 12px; border:1px solid transparent; border-radius:6px; transition:border-color .2s, background-color .2s}
.carta-plato + .carta-plato::before{content:""; position:absolute; left:12px; right:12px; top:-5px; border-top:1px dashed color-mix(in srgb, var(--tinta-carta) 18%, transparent)}
.carta-elegir{appearance:none; display:grid; gap:4px; align-content:center; min-height:88px; margin:0; padding:0; border:0; background:none; color:inherit; text-align:left; cursor:pointer; font:inherit}
/* Toda la tarjeta del plato vota (la lupa de la foto queda por encima). */
.carta-elegir::after{content:""; position:absolute; inset:0; border-radius:6px}
.carta-elegir:focus-visible{outline:none}
.carta-elegir:focus-visible::after{outline:3px solid var(--acento); outline-offset:2px}
.carta-num{font:600 13px/1 var(--serif-carta); letter-spacing:.14em; color:var(--acento)}
.carta-linea{display:flex; align-items:baseline; gap:8px; min-width:0}
.carta-nombre{flex:0 1 auto; min-width:0; font:italic 500 22px/1.1 var(--serif-carta); overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.carta-puntos{flex:1 1 12px; min-width:12px; border-bottom:1.5px dotted color-mix(in srgb, var(--tinta-carta) 40%, transparent); transform:translateY(-5px)}
.carta-estado{font:500 12px/1.35 var(--sans-carta); opacity:.7}
.carta-estado:empty{display:none}
.carta-foto{position:relative; display:grid; place-items:center; width:108px; aspect-ratio:4 / 3; overflow:hidden; border-radius:3px; color:var(--oro);
  background:color-mix(in srgb, var(--papel) 70%, #e6d8bb); outline:1px solid color-mix(in srgb, var(--oro) 55%, transparent); outline-offset:3px; box-shadow:0 8px 16px -10px rgba(60,40,20,.6)}
.carta-foto img{width:100%; height:100%; object-fit:cover; display:block}
.carta-foto::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); pointer-events:none}
.carta-lupa{appearance:none; position:absolute; z-index:2; right:6px; bottom:10px; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:transparent; cursor:zoom-in}
.carta-lupa svg{width:26px; height:26px; padding:4px; border-radius:50%; background:rgba(20,14,8,.55); fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round}
.carta-lupa:focus-visible svg{outline:3px solid var(--acento); outline-offset:2px}
.carta-cinta{position:absolute; top:-9px; left:12px; padding:3px 10px 3px 8px; border-radius:2px; background:var(--acento); color:var(--texto-boton);
  font:700 10px/1.4 var(--sans-carta); letter-spacing:.12em; text-transform:uppercase; box-shadow:0 2px 6px -2px rgba(0,0,0,.35); opacity:0; transform:translateY(4px); transition:opacity .2s, transform .2s; pointer-events:none}
.carta-cinta:not(:empty){opacity:1; transform:none}
.carta-cinta::before{content:"★ "}
.carta-plato.elegido{border-color:var(--acento); background:color-mix(in srgb, var(--acento) 7%, transparent)}
.carta-plato.elegido + .carta-plato::before,.carta-plato.elegido::before{opacity:0}
.carta-plato.bloqueado{opacity:.55}
.carta-plato.bloqueado .carta-elegir{cursor:not-allowed}

/* Tique «Tus votos»: categoría, puntos y plato en una sola línea (el plato se corta con «…»). */
.carta-resumen{display:grid; gap:8px; padding:16px; border:1px dashed color-mix(in srgb, var(--tinta-carta) 30%, transparent); border-radius:4px; background:color-mix(in srgb, #fff 35%, transparent); text-align:center}
.carta-resumen ul{list-style:none; margin:0; padding:0; display:grid; gap:8px; text-align:left}
.carta-resumen li{display:flex; align-items:baseline; gap:8px; min-width:0}
.resumen-cat{flex:none; font:600 11px/1.3 var(--sans-carta); letter-spacing:.14em; text-transform:uppercase}
.resumen-plato{flex:0 1 auto; min-width:0; max-width:64%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:italic 500 18px/1.3 var(--serif-carta)}
.resumen-plato em{font-style:italic; opacity:.55}
.carta-guardar{position:sticky; bottom:calc(var(--alto-dock, 12px) + env(safe-area-inset-bottom)); z-index:4; display:grid; margin:0 -8px; padding:8px;
  background:linear-gradient(to top, var(--papel) 70%, transparent)}
.carta-boton.grande{min-height:52px; font-size:16px; box-shadow:0 10px 20px -12px rgba(30,20,10,.6)}
.carta-boton.hecho{background:var(--acento); border-color:var(--acento); color:var(--texto-boton)}
@media (min-width: 480px){ .menu-carta{padding:40px 32px 32px} .carta-plato{grid-template-columns:1fr 150px} .carta-foto{width:150px} }
@media (prefers-reduced-motion: reduce){ .carta-plato,.carta-pestana,.carta-cinta,.carta-check,.carta-boton{transition:none} }

/* Contador de letras del nombre de la participación (17-sep-2026). */
.contador-letras{justify-self:end; font:500 12px/1.2 var(--f-texto); opacity:.6; font-variant-numeric:tabular-nums}
.contador-letras.al-limite{opacity:1; color:var(--acento)}

/* Cómo llegar (18-sep-2026): dirección de la parada con su botón, y el bloque «Dónde aparcar» con Google Maps y Waze. */
.tiempo-lugar{font-size:14px; opacity:.75}
.boton-peque-inv{min-height:34px; padding:6px 14px; font-size:13px; margin-top:6px; justify-self:start}
.boton-mapa + .boton-mapa{margin-left:6px}

/* Descuento del invitado (18-sep-2026): discreto, con los colores de la invitación, bajo la confirmación. */
.descuento-invitado{display:grid; gap:10px; justify-items:center; text-align:center; margin-top:4px; padding:14px 14px 16px; border:1px dashed color-mix(in srgb, var(--texto) 30%, transparent); border-radius:12px}
.descuento-texto{margin:0; font-size:14px; line-height:1.45}
.descuento-boton{min-height:40px; padding:8px 20px; border:1px solid var(--texto); border-radius:999px; background:transparent; color:var(--texto); font-family:inherit; font-size:14px; font-weight:600; line-height:1; cursor:pointer}
.descuento-boton:focus-visible,.descuento-ir:focus-visible{outline:2px solid var(--acento); outline-offset:2px}
.descuento-codigo{display:grid; gap:6px; justify-items:center}
.descuento-codigo p{margin:0}
.descuento-cifra{font:700 20px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.06em; user-select:all}
.descuento-nota{font-size:13px; opacity:.8}
.descuento-ir{display:inline-flex; margin-top:4px; padding:9px 18px; border-radius:999px; background:var(--texto); color:var(--tarjeta); font-size:14px; font-weight:600; text-decoration:none}

/* Enlace de novedad (20-sep-2026): el aviso llama la atención un momento al llegar. */
.aviso-cambio.aviso-nuevo{animation:aviso-nuevo 1.6s ease-out 1}
@keyframes aviso-nuevo{0%,40%{box-shadow:0 0 0 4px color-mix(in srgb, currentColor 35%, transparent)} 100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){ .aviso-cambio.aviso-nuevo{animation:none} }

/* ---------- número grande (27-sep-2026): la edad o los años en lugar del dibujo ---------- */
.t-numero{display:flex; align-items:center; justify-content:center; gap:3.5cqw; margin:0 auto 1.5cqw; color:var(--acento); font-family:var(--f-titulo); font-weight:600; font-size:26cqw; line-height:1; letter-spacing:.02em; font-variant-numeric:lining-nums}
.t-numero::before,.t-numero::after{content:""; flex:0 0 11cqw; height:1px; background:currentColor; opacity:.65}
.t-numero span{display:block}
.alin-izquierda .t-numero{justify-content:flex-start; margin-left:0}
.alin-izquierda .t-numero::before{display:none}
.con-foto-fondo .t-numero{color:#fff}

/* ---------- temas oscuros sin sobre negro de foto (27-sep-2026): el azul noche se apaga a carbón; el lacre sigue dorado ---------- */
body.sobre-carbon .sr-capa{filter:saturate(.18) brightness(.62) contrast(1.08)}
body.sobre-carbon .sobre .sobre-frente,body.sobre-carbon .sobre .cara-fuera{filter:saturate(.18) brightness(.62) contrast(1.08)}
/* Frase larga en la solapa («Setenta primaveras»): más pequeña y menos espaciada para que no se corte. */
body.aspecto-boda .sobre-frase.larga,body.tipo-savethedate .sobre-frase.larga{font-size:1.75vh; letter-spacing:.2em}

/* ---------- regalo conjunto de la sorpresa (27-sep-2026) ---------- */
/* Regalo entre todos (Jose, 27-sep-2026): la foto arriba a todo el ancho y el texto debajo, nunca en columna estrecha. */
.bote{display:block}
.bote-foto{display:block; width:100%; max-height:190px; object-fit:cover; border-radius:14px; margin:0 0 10px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.12)}
.bote-texto{min-width:0}
.bote-texto a{display:inline-block; margin-top:2px}
.bote-cuota{margin:6px 0 2px; font-size:1.05em}
.bote-nota{margin:4px 0 0; font-size:.82em; opacity:.75}
.bote-privado{display:block; margin-top:14px; padding:14px; border-radius:14px; background:rgba(255,255,255,.55)}
.bote-privado .copiable{margin:8px 0}
.aportado{display:inline-flex; align-items:center; gap:8px; margin-top:6px; font-weight:600}
.aportado input{width:20px; height:20px; accent-color:var(--acento)}
.aportado-cant{display:inline-flex; align-items:center; gap:4px; margin-left:8px}
.aportado-cant input{width:70px; padding:6px 8px; border:1px solid rgba(0,0,0,.2); border-radius:8px; font:inherit; text-align:right}
.bote-estado{margin:8px 0 0; font-size:.9em; font-weight:600}
.bote-ok{color:#2f7a5a} .bote-dice{color:#9a6a1f}

.menu-calendario{position:fixed; z-index:60; display:flex; flex-direction:column; min-width:240px; padding:6px; border-radius:14px; background:#fff; color:#1a0f14; box-shadow:0 8px 28px rgba(0,0,0,.35)}
.menu-calendario a{padding:12px 14px; border-radius:10px; color:inherit; text-decoration:none; font:600 15px/1.2 system-ui,sans-serif}
.menu-calendario a:hover,.menu-calendario a:focus-visible{background:#eceef3; outline:none}

/* ---------- «Noche de brujas» (22-oct-2026): invitación adulta de Halloween ----------
   Sobre granate de foto oscurecido y envejecido, cera de color sangre y una capa de ambiente: mugre de papel viejo,
   telarañas, luz de vela que tiembla y viñeta. Los filtros van en cada imagen (no en el escenario) para no romper el 3D de la solapa. */
body.velada{background:#0d0709}
body.velada .sr-escenario img{filter:brightness(.58) saturate(.62) contrast(1.2) sepia(.25)}
body.velada .sr-lacre img{filter:sepia(.8) saturate(2.8) hue-rotate(-50deg) brightness(.4) contrast(1.35)}
#atm{position:fixed; inset:0; z-index:40; pointer-events:none; overflow:hidden}
#atm i{position:absolute; display:block}
#atm .vig{inset:0; background:radial-gradient(125% 95% at 50% 52%, transparent 38%, rgba(2,0,1,.86) 100%)}
#atm .mugre{inset:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='900'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='4' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .13 0 0 0 0 .07 0 0 0 1.5 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") center / cover; mix-blend-mode:multiply; opacity:.27}
#atm .luz{inset:-12%; background:radial-gradient(58% 44% at 50% 84%, rgba(255,170,70,.30), rgba(255,110,30,.09) 48%, transparent 72%); mix-blend-mode:screen; animation:vela 3.3s linear infinite; transform-origin:50% 84%}
#atm .l2{background:radial-gradient(40% 30% at 16% 26%, rgba(255,150,60,.20), transparent 70%); animation-duration:2.3s; animation-delay:-1.1s; transform-origin:16% 26%}
@keyframes vela{
  0%{opacity:.78; transform:scale(1)} 7%{opacity:.96; transform:scale(1.03) translateX(-1%)} 13%{opacity:.68; transform:scale(.99)}
  21%{opacity:1; transform:scale(1.05)} 29%{opacity:.8; transform:scale(1.01) translateX(1%)} 38%{opacity:.93; transform:scale(1.02)}
  47%{opacity:.66; transform:scale(.98)} 55%{opacity:.98; transform:scale(1.04) translateX(-1%)} 63%{opacity:.8; transform:scale(1.01)}
  74%{opacity:1; transform:scale(1.05)} 83%{opacity:.72; transform:scale(.99) translateX(1%)} 91%{opacity:.9; transform:scale(1.02)} 100%{opacity:.78; transform:scale(1)}}
#atm .tela{width:36vmin; height:51vmin; background-repeat:no-repeat; background-size:contain; background-position:0 0; opacity:.85}
#atm .tl{left:0; top:0; background-image:url("/img/brujas/tela.webp")}
#atm .tr{right:0; top:0; transform:scaleX(-1); width:30vmin; height:41vmin; background-image:url("/img/brujas/tela.webp")}
#atm .bl{left:0; bottom:0; transform:scaleY(-1); width:24vmin; height:33vmin; opacity:.6; background-image:url("/img/brujas/tela.webp")}
@media (prefers-reduced-motion:reduce){#atm .luz{animation:none; opacity:.85}}
body.velada .sr-brillo{background:linear-gradient(to bottom, rgba(255,160,70,0) 20%, #7a3a16 75%)}
body.velada .sr-luz{background:linear-gradient(to bottom, rgba(255,150,60,.55) 0%, rgba(200,90,30,.4) 40%, rgba(120,40,15,.2) 75%, rgba(60,15,8,0) 100%)}
body.velada .sr-blanco{background:#120709}

/* «Noche de brujas», versión con miedo y repulsión (22-oct-2026, Jose: «que la gente vea el vídeo con cierto miedo y repulsión»):
   sangre que cuelga del borde, el lacre que sangra, una viuda negra que baja por un hilo y un latido que enrojece los bordes.
   Todo lo del sobre cerrado se apaga cuando se rompe el lacre. */
#atm .chorreo{left:0; right:0; top:0; height:24vmin; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-10%' y='-5%' width='120%' height='115%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045 .018' numOctaves='3' seed='4' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='6' result='d'/%3E%3CfeGaussianBlur in='d' stdDeviation='1.3' result='bl'/%3E%3CfeSpecularLighting in='bl' surfaceScale='6' specularConstant='1.1' specularExponent='26' lighting-color='%23e8b8a8' result='s'%3E%3CfePointLight x='-60' y='-80' z='170'/%3E%3C/feSpecularLighting%3E%3CfeComposite in='s' in2='d' operator='in' result='sp'/%3E%3CfeComposite in='d' in2='sp' operator='arithmetic' k1='0' k2='1' k3='.75' k4='0'/%3E%3C/filter%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%231f0203'/%3E%3Cstop offset='.45' stop-color='%2352080a'/%3E%3Cstop offset='1' stop-color='%23240304'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg filter='url(%23b)'%3E%3Cpath d='M0 0H400V7C370 12 340 6 300 11S230 7 190 12 120 6 70 11 20 8 0 11Z' fill='url(%23g)'/%3E%3Cpath d='M9.5 0C11.3 4.1 12.7 11.9 12.7 21.1L12.4 31.6C10.7 33.6 11.8 36.0 14.0 36.1C16.5 36.0 17.2 33.6 15.4 31.6L15.4 20.4C15.4 11.9 16.7 4.1 18.5 0Z' fill='url(%23g)'/%3E%3Cpath d='M52.5 0C54.3 8.9 55.7 25.9 55.7 45.9L55.4 71.9C54.0 73.6 55.0 75.7 57.0 75.8C59.3 75.7 59.9 73.6 58.4 71.9L58.4 44.4C58.4 25.9 59.7 8.9 61.5 0Z' fill='url(%23g)'/%3E%3Cpath d='M67.5 0C71.7 6.0 75.1 17.5 75.1 31.0L74.8 45.5C71.4 49.2 73.4 53.7 78.0 53.9C83.3 53.7 84.5 49.2 81.2 45.5L81.2 30.0C81.2 17.5 84.3 6.0 88.5 0Z' fill='url(%23g)'/%3E%3Crect x='94.8' y='0' width='3.9' height='27.5' rx='2.1' fill='url(%23g)' opacity='.9'/%3E%3Cpath d='M108.5 0C112.7 4.1 116.1 11.9 116.1 21.1L115.8 29.8C112.6 33.2 114.5 37.5 119.0 37.6C124.1 37.5 125.3 33.2 122.2 29.8L122.2 20.4C122.2 11.9 125.3 4.1 129.5 0Z' fill='url(%23g)'/%3E%3Cpath d='M147.5 0C149.3 7.9 150.7 23.1 150.7 40.9L150.4 64.5C149.6 65.7 150.2 67.2 152.0 67.3C154.0 67.2 154.4 65.7 153.4 64.5L153.4 39.6C153.4 23.1 154.7 7.9 156.5 0Z' fill='url(%23g)'/%3E%3Cpath d='M184.5 0C188.7 4.1 192.1 11.9 192.1 21.1L191.8 29.8C188.7 33.2 190.5 37.4 195.0 37.6C200.1 37.4 201.3 33.2 198.2 29.8L198.2 20.4C198.2 11.9 201.3 4.1 205.5 0Z' fill='url(%23g)'/%3E%3Crect x='211.8' y='0' width='3.9' height='18.7' rx='2.1' fill='url(%23g)' opacity='.9'/%3E%3Cpath d='M246.7 0C248.0 7.9 249.1 23.1 249.1 40.9L248.8 63.7C247.2 65.6 248.2 67.9 250.0 68.0C252.1 67.9 252.7 65.6 251.0 63.7L251.0 39.6C251.0 23.1 252.0 7.9 253.3 0Z' fill='url(%23g)'/%3E%3Cpath d='M265.3 0C266.6 1.0 267.7 2.8 267.7 5.0L267.4 5.9C266.0 7.6 266.9 9.7 268.6 9.8C270.6 9.7 271.1 7.6 269.6 5.9L269.6 4.8C269.6 2.8 270.6 1.0 271.9 0Z' fill='url(%23g)'/%3E%3Crect x='273.9' y='0' width='1.2' height='4.4' rx='0.7' fill='url(%23g)' opacity='.9'/%3E%3Cpath d='M276.7 0C280.9 7.9 284.3 23.1 284.3 40.9L284.0 61.4C280.5 65.2 282.6 69.8 287.2 70.0C292.5 69.8 293.8 65.2 290.4 61.4L290.4 39.6C290.4 23.1 293.5 7.9 297.7 0Z' fill='url(%23g)'/%3E%3Cpath d='M316.9 0C318.2 4.1 319.3 11.9 319.3 21.1L319.0 31.8C317.5 33.6 318.5 35.8 320.2 35.9C322.2 35.8 322.8 33.6 321.2 31.8L321.2 20.4C321.2 11.9 322.2 4.1 323.5 0Z' fill='url(%23g)'/%3E%3Crect x='325.5' y='0' width='1.2' height='18.7' rx='0.7' fill='url(%23g)' opacity='.9'/%3E%3Cpath d='M334.3 0C336.1 7.9 337.5 23.1 337.5 40.9L337.2 63.1C335.2 65.5 336.5 68.4 338.8 68.5C341.5 68.4 342.3 65.5 340.2 63.1L340.2 39.6C340.2 23.1 341.5 7.9 343.3 0Z' fill='url(%23g)'/%3E%3Cpath d='M350.5 0C351.8 6.0 352.9 17.5 352.9 31.0L352.6 48.4C351.6 49.7 352.3 51.3 353.8 51.4C355.5 51.3 356.0 49.7 354.8 48.4L354.8 30.0C354.8 17.5 355.8 6.0 357.1 0Z' fill='url(%23g)'/%3E%3Cpath d='M366.4 0C368.8 1.7 370.7 4.9 370.7 8.7L370.4 10.6C367.9 13.4 369.5 16.8 372.4 17.0C375.8 16.8 376.7 13.4 374.2 10.6L374.2 8.4C374.2 4.9 376.0 1.7 378.4 0Z' fill='url(%23g)'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; animation:chorrea 11s cubic-bezier(.3,.1,.4,1) .6s both; filter:drop-shadow(0 3px 3px rgba(0,0,0,.7))}
@keyframes chorrea{from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 -6% 0)}}
#atm .goteo{left:50%; top:calc(50% + 14vmin); width:30vmin; height:21vmin; margin-left:-15vmin; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140' preserveAspectRatio='xMidYMin meet'%3E%3Cdefs%3E%3Cfilter id='b' x='-10%' y='-5%' width='120%' height='115%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045 .018' numOctaves='3' seed='4' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='6' result='d'/%3E%3CfeGaussianBlur in='d' stdDeviation='1.3' result='bl'/%3E%3CfeSpecularLighting in='bl' surfaceScale='6' specularConstant='1.1' specularExponent='26' lighting-color='%23e8b8a8' result='s'%3E%3CfePointLight x='-60' y='-80' z='170'/%3E%3C/feSpecularLighting%3E%3CfeComposite in='s' in2='d' operator='in' result='sp'/%3E%3CfeComposite in='d' in2='sp' operator='arithmetic' k1='0' k2='1' k3='.75' k4='0'/%3E%3C/filter%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%231f0203'/%3E%3Cstop offset='.45' stop-color='%2352080a'/%3E%3Cstop offset='1' stop-color='%23240304'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg filter='url(%23b)'%3E%3Cpath d='M52 0C60 -4 80 6 100 3S130 -2 142 2L140 12C120 16 96 10 76 14S56 10 52 0Z' fill='%232a0304' opacity='.9'/%3E%3Cpath d='M64.9 0C66.9 7.9 68.6 23.1 68.6 40.9L68.3 62.9C66.0 65.4 67.4 68.6 70.0 68.7C73.0 68.6 73.8 65.4 71.6 62.9L71.6 39.6C71.6 23.1 73.1 7.9 75.1 0Z' fill='url(%23g)'/%3E%3Cpath d='M81.1 0C83.9 13.4 86.1 39.2 86.1 69.4L85.8 108.8C83.4 111.4 84.9 114.7 88.0 114.8C91.6 114.7 92.5 111.4 90.1 108.8L90.1 67.2C90.1 39.2 92.1 13.4 94.9 0Z' fill='url(%23g)'/%3E%3Cpath d='M102.1 0C103.7 5.8 104.9 16.8 104.9 29.8L104.6 46.4C103.6 47.7 104.3 49.3 106.0 49.4C107.9 49.3 108.4 47.7 107.2 46.4L107.2 28.8C107.2 16.8 108.3 5.8 109.9 0Z' fill='url(%23g)'/%3E%3Cpath d='M118.3 0C120.6 10.1 122.4 29.4 122.4 52.1L122.1 81.3C120.2 83.5 121.4 86.2 124.0 86.3C127.0 86.2 127.7 83.5 125.7 81.3L125.7 50.4C125.7 29.4 127.4 10.1 129.7 0Z' fill='url(%23g)'/%3E%3C/g%3E%3C/svg%3E") 50% 0 / 100% 100% no-repeat; animation:chorrea 8s cubic-bezier(.4,.1,.5,1) 1.2s both; filter:drop-shadow(0 2px 2px rgba(0,0,0,.7)); transition:opacity .35s}
#atm .arana{position:absolute; left:63%; top:-60vh; width:34vmin; margin-left:-17vmin; animation:baja 10s ease-in-out 1s infinite; transition:opacity .3s}
#atm .arana::before{content:""; position:absolute; left:50%; bottom:calc(100% - 1px); width:1px; height:100vh; background:linear-gradient(to bottom, transparent, rgba(240,230,215,.55)); transform:translateX(-.5px)}
#atm .arana img{display:block; width:100%; height:auto; animation:balanceo 3.2s ease-in-out infinite; transform-origin:50% 0}
@keyframes baja{0%{top:-60vh} 38%{top:18vh} 46%{top:17vh} 52%{top:21vh} 60%{top:20vh} 100%{top:-60vh}}
@keyframes balanceo{0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)}}
#atm .arana .pd0,#atm .arana .pi1{animation:pata .34s ease-in-out infinite alternate; transform-origin:0 0}
#atm .arana .pd1,#atm .arana .pi0{animation:pata .34s ease-in-out infinite alternate-reverse; transform-origin:0 0}
@keyframes pata{from{transform:rotate(-5deg)} to{transform:rotate(5deg)}}
#atm .latido{inset:0; background:radial-gradient(110% 85% at 50% 50%, transparent 45%, rgba(150,0,0,.5) 100%); opacity:0; animation:latido 1.25s ease-out infinite; mix-blend-mode:normal}
@keyframes latido{0%{opacity:0} 8%{opacity:.85} 20%{opacity:.15} 30%{opacity:.7} 48%{opacity:0} 100%{opacity:0}}
body:has(.lacre-partido) #atm .goteo, body:has(.lacre-partido) #atm .arana{opacity:0}
@media (prefers-reduced-motion:reduce){#atm .arana,#atm .latido,#atm .chorreo,#atm .goteo{animation:none} #atm .arana{display:none}}
#atm .polvo{inset:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='800'%3E%3Cfilter id='f'%3E%3CfeGaussianBlur stdDeviation='.5'/%3E%3C/filter%3E%3Cg filter='url(%23f)'%3E%3Ccircle cx='311' cy='593' r='1.5' fill='%23ffd7a0' opacity='0.72'/%3E%3Ccircle cx='370' cy='738' r='0.6' fill='%23ffd7a0' opacity='0.48'/%3E%3Ccircle cx='472' cy='519' r='1.6' fill='%23ffd7a0' opacity='0.31'/%3E%3Ccircle cx='235' cy='197' r='1.2' fill='%23ffd7a0' opacity='0.54'/%3E%3Ccircle cx='7' cy='173' r='0.9' fill='%23ffd7a0' opacity='0.71'/%3E%3Ccircle cx='383' cy='128' r='1.5' fill='%23ffd7a0' opacity='0.32'/%3E%3Ccircle cx='309' cy='101' r='0.6' fill='%23ffd7a0' opacity='0.69'/%3E%3Ccircle cx='105' cy='172' r='1.7' fill='%23ffd7a0' opacity='0.69'/%3E%3Ccircle cx='145' cy='769' r='1.2' fill='%23ffd7a0' opacity='0.59'/%3E%3Ccircle cx='102' cy='753' r='1.4' fill='%23ffd7a0' opacity='0.73'/%3E%3Ccircle cx='447' cy='239' r='1.0' fill='%23ffd7a0' opacity='0.33'/%3E%3Ccircle cx='73' cy='52' r='0.9' fill='%23ffd7a0' opacity='0.55'/%3E%3Ccircle cx='2' cy='542' r='1.0' fill='%23ffd7a0' opacity='0.40'/%3E%3Ccircle cx='409' cy='385' r='0.9' fill='%23ffd7a0' opacity='0.49'/%3E%3Ccircle cx='352' cy='46' r='1.7' fill='%23ffd7a0' opacity='0.26'/%3E%3Ccircle cx='375' cy='676' r='0.6' fill='%23ffd7a0' opacity='0.64'/%3E%3Ccircle cx='183' cy='463' r='0.6' fill='%23ffd7a0' opacity='0.27'/%3E%3Ccircle cx='90' cy='764' r='0.8' fill='%23ffd7a0' opacity='0.63'/%3E%3Ccircle cx='465' cy='754' r='1.0' fill='%23ffd7a0' opacity='0.43'/%3E%3Ccircle cx='262' cy='620' r='0.7' fill='%23ffd7a0' opacity='0.62'/%3E%3Ccircle cx='399' cy='688' r='0.6' fill='%23ffd7a0' opacity='0.72'/%3E%3Ccircle cx='46' cy='273' r='1.3' fill='%23ffd7a0' opacity='0.71'/%3E%3Ccircle cx='170' cy='739' r='1.2' fill='%23ffd7a0' opacity='0.41'/%3E%3Ccircle cx='158' cy='142' r='0.7' fill='%23ffd7a0' opacity='0.32'/%3E%3Ccircle cx='345' cy='797' r='0.8' fill='%23ffd7a0' opacity='0.27'/%3E%3Ccircle cx='493' cy='427' r='1.0' fill='%23ffd7a0' opacity='0.37'/%3E%3Ccircle cx='297' cy='661' r='1.1' fill='%23ffd7a0' opacity='0.46'/%3E%3Ccircle cx='28' cy='733' r='0.6' fill='%23ffd7a0' opacity='0.50'/%3E%3Ccircle cx='419' cy='104' r='1.4' fill='%23ffd7a0' opacity='0.72'/%3E%3Ccircle cx='315' cy='630' r='0.7' fill='%23ffd7a0' opacity='0.47'/%3E%3Ccircle cx='75' cy='676' r='0.9' fill='%23ffd7a0' opacity='0.48'/%3E%3Ccircle cx='500' cy='682' r='1.7' fill='%23ffd7a0' opacity='0.48'/%3E%3Ccircle cx='244' cy='584' r='1.1' fill='%23ffd7a0' opacity='0.40'/%3E%3Ccircle cx='202' cy='117' r='1.0' fill='%23ffd7a0' opacity='0.74'/%3E%3Ccircle cx='480' cy='502' r='1.1' fill='%23ffd7a0' opacity='0.42'/%3E%3Ccircle cx='45' cy='218' r='1.5' fill='%23ffd7a0' opacity='0.68'/%3E%3Ccircle cx='181' cy='629' r='1.5' fill='%23ffd7a0' opacity='0.60'/%3E%3Ccircle cx='332' cy='608' r='1.0' fill='%23ffd7a0' opacity='0.60'/%3E%3Ccircle cx='140' cy='389' r='1.4' fill='%23ffd7a0' opacity='0.60'/%3E%3Ccircle cx='147' cy='756' r='1.3' fill='%23ffd7a0' opacity='0.54'/%3E%3Ccircle cx='6' cy='438' r='0.9' fill='%23ffd7a0' opacity='0.59'/%3E%3Ccircle cx='231' cy='653' r='1.3' fill='%23ffd7a0' opacity='0.65'/%3E%3Ccircle cx='174' cy='515' r='1.4' fill='%23ffd7a0' opacity='0.66'/%3E%3Ccircle cx='175' cy='674' r='1.6' fill='%23ffd7a0' opacity='0.59'/%3E%3Ccircle cx='488' cy='765' r='1.2' fill='%23ffd7a0' opacity='0.51'/%3E%3Ccircle cx='83' cy='669' r='1.6' fill='%23ffd7a0' opacity='0.49'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 500px 800px; opacity:.6; animation:polvo 40s linear infinite; mix-blend-mode:screen}
@keyframes polvo{from{background-position:0 0} to{background-position:-60px -800px}}
@media (prefers-reduced-motion:reduce){#atm .polvo{animation:none}}

/* La carta de debajo del lacre (22-oct-2026, Jose: «escrita por un demonio o una bruja, letra de pluma, con manchas, desagradable»;
   «el rojo más oscuro y que parezca escrito sobre el papel»): papel de pergamino viejo quemado por los bordes, manchas de humedad,
   de tinta y de sangre seca; la tinta es oscura, sin brillo ni sombra, y algo corrida, como si se hubiera secado dentro de la fibra. */
body.velada .tarjeta{
  background-color:#2a1a0c;
  background-image:
    radial-gradient(130% 95% at 50% 45%, transparent 38%, rgba(8,3,1,.78) 100%),
    url(/img/brujas/pergamino.webp);
  background-size:100% 100%, 100% 100%;
  box-shadow:inset 0 0 6cqw 1.5cqw rgba(0,0,0,.75)}
body.velada .tarjeta-marco{border:0; outline:0; filter:url(#tinta); font-family:var(--f-texto)}
body.velada .tarjeta-marco h1{font-family:var(--f-titulo); color:#4b0a07; text-shadow:none; opacity:.9; letter-spacing:.01em}
body.velada .tarjeta-marco p, body.velada .tarjeta-marco .t-mensaje{font-family:'IM Fell English', Georgia, serif; font-style:italic; color:#0c0503; text-shadow:none; opacity:1}
body.velada .tarjeta-marco .t-firma{font-family:var(--f-titulo); color:#4b0a07; text-shadow:none; opacity:.9}
body.velada .cuenta{background:rgba(10,3,3,.9); color:#c9b08a; border-top:1px solid rgba(140,20,15,.65); border-bottom:1px solid rgba(140,20,15,.65); border-radius:0; font-family:'IM Fell English', Georgia, serif; font-style:italic; letter-spacing:.06em; box-shadow:none}
body.velada .gel{background:linear-gradient(#5e0b0d,#2a0406); color:#e6d3b0; border:1px solid #7a1a16; border-radius:2px; font-family:'IM Fell English', Georgia, serif; font-style:italic; letter-spacing:.05em; text-shadow:0 1px 0 #000; box-shadow:0 0 14px rgba(120,10,10,.35)}
body.velada .acciones .gel + .gel, body.velada .acciones a.gel{background:rgba(10,3,3,.78); color:#bda782; border-color:#4a1a16; box-shadow:none}

/* El final de la página (lo que sale al deslizar hacia abajo): cementerio, niebla y la llamada. */
body.velada .detalles{background:linear-gradient(#000 0, #060203 14cqw, #020101 100%)}
.cementerio{margin:6cqw -5cqw 0; padding:8cqw 6cqw 0; background:none; text-align:center; overflow:hidden; position:relative}
.cm-ante{font-family:'UnifrakturCook', serif; font-size:7.4cqw; color:#9a2018; margin:0 0 4cqw; letter-spacing:.01em; text-shadow:0 1px 0 #000}
.cm-cta{display:inline-block; font:italic 400 5cqw/1.2 'IM Fell English', Georgia, serif; color:#e2cfa9; text-decoration:none; background:linear-gradient(#5e0b0d,#2a0406); border:1px solid #7a1a16; padding:3.4cqw 6cqw; border-radius:2px; box-shadow:0 0 18px rgba(120,10,10,.45); letter-spacing:.04em}
.cm-cta b{font-weight:400; color:#f0d9a6; text-decoration:underline; text-decoration-color:#8c1a14; text-underline-offset:3px}
.cm-letra{font:italic 400 3.6cqw/1.3 'IM Fell English', Georgia, serif; color:#8c7a5c; margin:3cqw 0 0}
.cm-escena{position:relative; margin:4cqw -6cqw 0; height:72cqw; -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 20%, #000 62%, transparent 96%), linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to bottom, transparent 0, #000 20%, #000 62%, transparent 96%), linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%); mask-composite:intersect}
.cm-svg{display:block; width:100%; height:100%}
.cm-niebla{position:absolute; left:-20%; right:-20%; bottom:-4cqw; height:34cqw; background:radial-gradient(closest-side at 28% 50%, rgba(190,195,205,.2), transparent), radial-gradient(closest-side at 72% 50%, rgba(190,195,205,.15), transparent); animation:niebla 22s ease-in-out infinite alternate; pointer-events:none}
.cm-niebla.n2{bottom:-8cqw; height:26cqw; opacity:.8; animation-duration:31s; animation-direction:alternate-reverse}
@keyframes niebla{from{transform:translateX(-6%)} to{transform:translateX(6%)}}
.cm-svg .ojos{animation:parpadeo 7s infinite}
@keyframes parpadeo{0%,44%,48%,100%{opacity:1} 46%{opacity:0} 80%{opacity:1} 82%{opacity:0} 83%{opacity:1}}
@media (prefers-reduced-motion:reduce){.cm-niebla,.cm-svg .ojos{animation:none}}

/* El pacto: la ventana de confirmar, oscura y comprometedora (22-oct-2026). */
body.velada .hoja-fondo{background:rgba(0,0,0,.84)}
body.velada .ventana{background:#17100c linear-gradient(#1d1410, #120b09); color:#d6c5a2; border:1px solid #5c1612; border-radius:3px; box-shadow:0 0 46px rgba(130,10,10,.45), inset 0 0 46px rgba(0,0,0,.85)}
body.velada .ventana-barra{background:linear-gradient(#4d0b0d,#220305); border-bottom:1px solid #6e1713; color:#e4d1ab; font:400 21px/1.2 'UnifrakturCook', serif; letter-spacing:.02em}
body.velada .ventana-x{background:#220806; color:#e4d1ab; border:1px solid #6e1713; border-radius:2px}
body.velada .etq, body.velada .ayuda, body.velada .aviso-datos, body.velada .dudas{font-family:'IM Fell English', Georgia, serif; font-style:italic; color:#cdbb98; font-weight:400}
body.velada .etq{font-size:19px}
body.velada .campo input, body.velada .campo textarea, body.velada .campo select{background:#0d0806; color:#eadcbb; border:1px solid #5b2a22; border-radius:2px; font-family:'IM Fell English', Georgia, serif; font-size:18px}
body.velada .campo input::placeholder{color:rgba(205,187,152,.4)}
body.velada .eleccion span{background:#0d0806; color:#cdbb98; border:1px solid #5b2a22; border-radius:2px; font:italic 400 16px/1.2 'IM Fell English', Georgia, serif}
body.velada .eleccion input:checked + span{background:linear-gradient(#5e0b0d,#2a0406); color:#f0dcb0; border-color:#8c1a14; box-shadow:0 0 14px rgba(140,15,10,.5)}
body.velada .eleccion input[value="no"]:checked + span{background:#1c1c1c; color:#9a9a9a; border-color:#444; box-shadow:none}
body.velada .contador{background:#0d0806; border-color:#5b2a22; border-radius:2px}
body.velada .contador button{background:#220806; color:#e4d1ab}
body.velada .contador output{color:#eadcbb}
.pacto{margin:0; padding:12px 14px; font:italic 400 15px/1.45 'IM Fell English', Georgia, serif; color:#c9b690; border:1px solid #5c1612; border-left:4px solid #8c1a14; background:rgba(60,6,6,.35)}
body.velada .hecho .hecho-titulo{font-family:'UnifrakturCook', serif; color:#8c1a14; font-weight:400; text-shadow:0 0 12px rgba(140,15,10,.5); transform:rotate(-2deg)}
body.velada .hecho p{font-family:'IM Fell English', Georgia, serif; font-style:italic; color:#d6c5a2}
body.velada .error{color:#d4423a}
.cm-foto{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 100%}

/* «Noche de brujas»: opciones del anfitrión (22-oct-2026). */
body.bruja-sin-sangre #atm .chorreo, body.bruja-sin-sangre #atm .goteo{display:none}
body.bruja-telas-0 #atm .tela{display:none}
body.bruja-telas-1 #atm .tr, body.bruja-telas-1 #atm .bl{display:none}
body.bruja-telas-2 #atm .bl{display:none}
body.bruja-sobre-negro .sr-escenario img{filter:brightness(.17) saturate(.1) contrast(1.3)}
body.bruja-sobre-negro #atm .luz{opacity:.45}
body.bruja-sobre-negro .sr-lacre img{filter:sepia(.8) saturate(2.4) hue-rotate(-50deg) brightness(.3) contrast(1.4)}
body.velada.bruja-letra-pluma .tarjeta-marco h1, body.velada.bruja-letra-pluma .tarjeta-marco .t-firma{font-family:'Great Vibes', cursive; font-weight:400; letter-spacing:0; text-transform:none}
body.velada.bruja-letra-pluma .tarjeta-marco h1{font-size:1.45em; line-height:1.05}
body.velada.bruja-letra-pluma .ventana-barra, body.velada.bruja-letra-pluma .hecho .hecho-titulo, body.velada.bruja-letra-pluma .cm-ante{font-family:'Great Vibes', cursive; font-weight:400; font-size:1.25em}

/* 23-oct-2026 (auditoría de calidad): sin mayúsculas ornamentales en botones y etiquetas (la J y la Q no se leían),
   brasas en vez de corazones al rascar, aire en el pacto y legibilidad de los campos. */
body.velada .gel, body.velada .etq, body.velada .cuenta, body.velada .det-etq{text-transform:none; letter-spacing:.02em}
body.velada .gel{font-size:17px}
body.velada .etq{font-size:21px}
body.velada .chispa{color:#e8742c; font-size:13px; text-shadow:0 0 7px #b02a10, 0 0 2px #7a1208}
body.velada .campo input::placeholder{color:rgba(225,205,165,.62)}
body.velada .pacto{margin-top:6px}
body.velada .aviso-datos{margin-bottom:14px}