/* El Álbum — interfaz propia de álbum de estampas: tarjetas como ESTAMPAS (borde blanco troquelado, papel brillante,
   línea de troquel punteada y la esquina que se despega), botones como SOBRES metalizados (orillas engargoladas en
   zigzag y destello), botones secundarios como PESTAÑAS de papel, sellos de tinta "¡Página completa!", el contador
   "ESTAMPAS 7/11" impreso y la marca de la estampa dorada. Passion One (títulos), Grandstander (textos) y Barlow
   Condensed (números), todas OFL y locales. Todo medido contra el marco (.app es contenedor de tamaño: cqw/cqh),
   nunca contra la ventana. Contraste de textos ≥ 4.5:1. */
.ea {
  --tinta: #1E2340; --tinta-2: #4B4560; --papel: #FFF8EA; --papel-2: #F6EBD5; --blanco: #FFFFFF;
  --rojo: #B8222C; --rojo-2: #8E1520; --oro: #E9B23C; --oro-2: #B5811B; --oro-claro: #FFE7A0; --azul: #1F5FC0; --verde: #2E7D4F; --wa: #25D366;
  --troquel: rgba(30, 35, 64, .22); --sombra: 0 2px 0 rgba(30, 35, 64, .06), 0 18px 36px rgba(20, 10, 0, .4);
  --f-titulo: "Passion One", "Grandstander", system-ui, sans-serif; --f-texto: "Grandstander", system-ui, sans-serif; --f-num: "Barlow Condensed", "Arial Narrow", sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  -webkit-text-size-adjust: 100%;
}
.ea, .ea body { margin: 0; height: 100%; background: #2A1A10; color: var(--tinta); font-family: var(--f-texto); }
.ea *, .ea *::before, .ea *::after { box-sizing: border-box; }
.ea button { font: inherit; color: inherit; }
.ea .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- marco: en celular, toda la pantalla; en computadora y tableta, el marco de teléfono ---------- */
.ea .fondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; background:
  radial-gradient(42% 36% at 38% 34%, rgba(255, 214, 150, .55) 0%, rgba(255, 214, 150, 0) 70%),
  repeating-linear-gradient(176deg, #6E4325 0 120px, #5E371D 120px 123px, #7A4C2A 123px 240px, #5E371D 240px 243px); }
.ea .fondo::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(620px, 82vw); height: min(780px, 86vh); transform: translate(-50%, -50%) rotate(-5deg); border-radius: 18px;
  background: linear-gradient(90deg, #FFF3DA 0 49%, #D9C7A6 49% 51%, #FFF3DA 51%); box-shadow: 0 0 0 14px #1F5FC0; filter: blur(14px); opacity: .5; }
.ea .app { position: fixed; inset: 0; z-index: 1; overflow: hidden; isolation: isolate; container-type: size; container-name: marco; background: #2A1A10; transition: opacity .5s ease; }
@media (min-width: 560px) and (min-height: 560px) {
  .ea .app { inset: auto; left: 50%; top: 50%; width: min(430px, 100vw - 32px); height: min(932px, 100dvh - 40px); transform: translate(-50%, -50%); border-radius: 36px;
    box-shadow: 0 0 0 4px var(--papel), 0 0 0 9px var(--tinta), 0 30px 90px rgba(10, 5, 0, .6); }
}
.ea.is-showcase .fondo { display: none; }
.ea.is-showcase .app { inset: 0 !important; width: auto !important; height: auto !important; transform: none !important; border-radius: 0 !important; box-shadow: none !important; }
.ea .stage { position: absolute; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ea .gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .7s ease; }
.ea .gl.is-on { opacity: 1; }
.ea .ui { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.ea .ui > * { pointer-events: auto; }
.ea .sin-gl .stage { background: #6E4325 url("../assets/poster/poster-16x9.webp") center / cover no-repeat; }
.ea .sin-gl .stage::after { content: ""; position: absolute; inset: 0; background: rgba(30, 15, 5, .35); }

/* ---------- ESTAMPA: la tarjeta de la interfaz ---------- */
.ea .estampa-card { position: relative; border: 8px solid var(--blanco); border-radius: 22px; color: var(--tinta);
  background: linear-gradient(155deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 38%), linear-gradient(180deg, var(--papel), var(--papel-2));
  outline: 2px dashed var(--troquel); outline-offset: -9px; box-shadow: var(--sombra); }
/* la esquina que se despega */
.ea .estampa-card::after { content: ""; position: absolute; right: -8px; bottom: -8px; width: 30px; height: 30px; border-radius: 22px 0 22px 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0) 48%, rgba(30, 20, 10, .18) 50%, #EAE3D2 56%, #FFFFFF 80%); box-shadow: -3px -3px 6px rgba(30, 20, 10, .12); pointer-events: none; }

/* ---------- SOBRE: el botón principal ---------- */
.ea .sobre-btn { --s1: #D23440; --s2: #9E1A23; --st: #FFFFFF; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; margin: 6px 0; padding: 12px 22px 10px; border: 0; border-radius: 4px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 3px, rgba(255, 255, 255, .08) 3px 4px), linear-gradient(170deg, var(--s1) 0%, var(--s2) 100%);
  color: var(--st); font: 400 21px/1.05 var(--f-titulo); letter-spacing: .01em; text-decoration: none; cursor: pointer; overflow: visible; -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .28), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 7px 14px rgba(40, 10, 5, .35); transition: transform .12s ease, filter .12s ease; isolation: isolate; }
/* orillas engargoladas (zigzag) arriba y abajo */
.ea .sobre-btn::before, .ea .sobre-btn > .sb-zz { content: ""; position: absolute; left: 0; right: 0; height: 7px; pointer-events: none;
  background: linear-gradient(45deg, transparent 33.33%, var(--z, var(--s1)) 33.33% 66.66%, transparent 66.66%), linear-gradient(-45deg, transparent 33.33%, var(--z, var(--s1)) 33.33% 66.66%, transparent 66.66%);
  background-size: 12px 24px; }
.ea .sobre-btn::before { top: -6px; background-position: 0 -12px; }
.ea .sobre-btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 7px; pointer-events: none; --z: var(--s2);
  background: linear-gradient(135deg, transparent 33.33%, var(--s2) 33.33% 66.66%, transparent 66.66%), linear-gradient(-135deg, transparent 33.33%, var(--s2) 33.33% 66.66%, transparent 66.66%);
  background-size: 12px 24px; background-position: 0 0; }
.ea .sobre-btn .sb-brillo { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: -1; }
.ea .sobre-btn .sb-brillo::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)); transform: skewX(-18deg) translateX(-60%); animation: ea-brillo 3.2s ease-in-out infinite; }
@keyframes ea-brillo { 0%, 55% { transform: skewX(-18deg) translateX(-60%); } 85%, 100% { transform: skewX(-18deg) translateX(520%); } }
.ea .sobre-btn:active { transform: translateY(2px) scale(.985); filter: brightness(.96); }
.ea .sobre-btn:focus-visible, .ea .pestana:focus-visible, .ea .ea-redondo:focus-visible, .ea .ea-x:focus-visible, .ea input:focus-visible, .ea textarea:focus-visible, .ea summary:focus-visible, .ea .fm-sw:focus-visible, .ea .fm-sim:focus-visible, .ea .foto:focus-visible { outline: 4px solid #2F8FE0; outline-offset: 4px; }
.ea .sobre-btn .bi { display: inline-flex; flex: none; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .25)); }
.ea .sobre-btn.is-grande { min-height: 62px; font-size: 25px; }
.ea .sobre-btn.is-block { width: 100%; }
.ea .sobre-btn.is-oro { --s1: #F6D57A; --s2: #C98E22; --st: var(--tinta); }
.ea .sobre-btn.is-oro .bi { filter: none; }

/* ---------- PESTAÑA de papel: botones secundarios ---------- */
.ea .pestana { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 8px 16px; border: 2px solid rgba(30, 35, 64, .18); border-radius: 14px 14px 6px 6px;
  background: linear-gradient(180deg, #FFFFFF, var(--papel)); color: var(--tinta); font: 800 16px/1.15 var(--f-texto); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 3px 0 rgba(30, 35, 64, .16), 0 6px 10px rgba(20, 10, 0, .14); transition: transform .12s ease; }
.ea .pestana::after { content: ""; position: absolute; top: -2px; right: -2px; width: 14px; height: 14px; border-radius: 0 12px 0 4px; background: linear-gradient(225deg, rgba(0, 0, 0, 0) 50%, #E9DFC8 50%); }
.ea .pestana:active { transform: translateY(2px); }
.ea .pestana .bi { display: inline-flex; }
.ea .pestana.is-suave { background: rgba(255, 248, 234, .92); }
.ea .pestana.is-fuerte { background: linear-gradient(180deg, #FFEFC2, var(--oro)); border-color: rgba(120, 80, 10, .3); }
.ea .pestana.is-wa { background: linear-gradient(180deg, #7BEAA6, var(--wa)); color: #08301A; border-color: rgba(0, 70, 30, .25); }
.ea .pestana.is-chica { min-height: 44px; font-size: 15px; }
.ea .pestana[aria-checked="true"] { background: linear-gradient(180deg, #FFE7A0, var(--oro)); border-color: var(--oro-2); box-shadow: 0 3px 0 var(--oro-2), 0 6px 10px rgba(20, 10, 0, .14); }
.ea .ea-redondo { display: inline-grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 4px solid var(--blanco); border-radius: 50%; background: var(--papel); color: var(--tinta); cursor: pointer;
  box-shadow: 0 0 0 1.5px var(--troquel) inset, 0 6px 14px rgba(20, 10, 0, .35); -webkit-tap-highlight-color: transparent; }
.ea .ea-redondo.is-chico { width: 44px; height: 44px; border-width: 3px; }
.ea .ea-redondo:active { transform: scale(.94); }

/* ---------- interfaz fija (arriba): sonido, contador impreso, todos los datos ---------- */
.ea .hud { position: absolute; left: 0; right: 0; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(var(--safe-t) + 10px) 12px 0; pointer-events: none !important; }
.ea .hud > * { pointer-events: auto; }
.ea .hud.is-intro .contador { visibility: hidden; }
.ea .contador { display: inline-flex; align-items: baseline; gap: 4px; margin: 0; padding: 8px 14px 7px; border-radius: 10px; background: var(--papel); border: 2px dashed rgba(30, 35, 64, .35);
  font: 800 19px/1 var(--f-num); letter-spacing: .05em; color: var(--tinta); box-shadow: 0 0 0 4px var(--blanco), 0 6px 14px rgba(20, 10, 0, .35); transform: rotate(-1.5deg); }
.ea .contador strong { font-size: 25px; color: var(--rojo); }
.ea .contador-de { color: var(--tinta-2); }
.ea .contador-oro { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 4px; align-self: center; border-radius: 50%; border: 2px dashed var(--oro-2); color: var(--oro-2); }
.ea .contador.is-oro .contador-oro { border: 0; background: linear-gradient(135deg, #FFE7A0, var(--oro) 60%, #FFF1C4); color: var(--tinta); box-shadow: 0 0 10px rgba(233, 178, 60, .8); }
.ea .contador.is-late { animation: ea-late .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes ea-late { 40% { transform: rotate(-1.5deg) scale(1.14); } }

/* ---------- sello de tinta ---------- */
.ea .sello-dom { position: absolute; right: -6px; top: -26px; z-index: 2; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; color: #B81F2B; border: 4px solid currentColor;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .7), inset 0 0 0 5px currentColor; background: rgba(255, 248, 234, .55); font: 400 17px/.95 var(--f-titulo); text-align: center; transform: rotate(-14deg);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='92'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.7'/%3E%3C/filter%3E%3Crect width='92' height='92' filter='url(%23n)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='92'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.7'/%3E%3C/filter%3E%3Crect width='92' height='92' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: ea-sello .5s .25s cubic-bezier(.3, 1.6, .5, 1) both; }
.ea .sello-dom b { display: block; font-weight: 400; }
@keyframes ea-sello { from { opacity: 0; transform: rotate(-14deg) scale(2.2); } }

/* ---------- portada ---------- */
.ea .portada { position: absolute; left: 16px; right: 16px; top: calc(var(--safe-t) + 12cqh); z-index: 15; padding: 30px 20px 18px; text-align: center; transform: rotate(-1deg); animation: ea-pega .75s cubic-bezier(.2, 1.35, .4, 1) both; }
@keyframes ea-pega { from { opacity: 0; transform: translateY(-34px) rotate(-8deg) scale(.86); } }
.ea .portada.is-out { animation: ea-despega .45s ease-in both; pointer-events: none !important; }
@keyframes ea-despega { to { opacity: 0; transform: translateY(-46px) rotate(6deg) scale(.9); } }
.ea .portada-sello { position: absolute; left: 50%; top: -34px; display: grid; place-items: center; width: 62px; height: 62px; margin-left: -31px; border-radius: 50%; border: 5px solid var(--blanco); background: linear-gradient(135deg, #FFE7A0, var(--oro) 55%, #C98E22); color: var(--tinta); box-shadow: 0 6px 12px rgba(20, 10, 0, .35); }
.ea .portada-k { display: inline-block; margin: 0 0 8px; padding: 4px 12px; border-radius: 999px; background: var(--tinta); color: #FFE7A0; font: 800 15px/1.2 var(--f-num); letter-spacing: .08em; text-transform: uppercase; }
.ea .portada-t { margin: 0; font: 400 clamp(34px, 10.4cqw, 44px)/1 var(--f-titulo); color: var(--tinta); text-wrap: balance; }
.ea .portada-eq { margin: 8px 0 0; font: 800 16px/1.2 var(--f-num); letter-spacing: .06em; color: var(--tinta-2); }
.ea .portada-s { margin: 8px 0 14px; font: 700 17px/1.35 var(--f-texto); color: var(--tinta-2); text-wrap: pretty; }
.ea .portada-acciones { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.ea .portada-acciones .pestana { align-self: center; }

/* ---------- guía de abajo ---------- */
.ea .guia { position: absolute; left: 12px; right: 12px; bottom: calc(var(--safe-b) + 12px); z-index: 14; padding: 14px 16px 12px; text-align: center; animation: ea-sube .5s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes ea-sube { from { opacity: 0; transform: translateY(30px) rotate(2deg); } }
.ea .guia.is-out { animation: ea-baja .3s ease-in both; pointer-events: none !important; }
@keyframes ea-baja { to { opacity: 0; transform: translateY(26px); } }
.ea .guia-t { margin: 0; font: 400 clamp(20px, 6cqw, 24px)/1.1 var(--f-titulo); text-wrap: balance; }
.ea .guia-s { margin: 4px 0 0; font: 700 15px/1.3 var(--f-texto); color: var(--tinta-2); }
.ea .guia-acciones { display: flex; justify-content: center; margin-top: 8px; }
.ea .guia.is-oro { border-color: #FFF1C4; background: linear-gradient(155deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 40%), linear-gradient(180deg, #FFF4D2, #F7DC92); }

/* manita de ayuda */
.ea .manita { position: absolute; left: 0; top: 0; z-index: 16; width: 64px; height: 64px; margin: -8px 0 0 -22px; pointer-events: none !important; will-change: transform, opacity; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
/* lista accesible de las estampas por pegar: aparece sólo con el teclado (al recibir el foco) */
.ea .lista-accesible { position: absolute; left: 12px; right: 12px; top: calc(var(--safe-t) + 74px); z-index: 25; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; border-radius: 16px; background: rgba(255, 248, 234, .97); box-shadow: var(--sombra);
  clip-path: inset(50%); opacity: 0; }
.ea .lista-accesible:focus-within { clip-path: none; opacity: 1; }

/* ---------- ficha de cada página completa ---------- */
.ea .ficha { position: absolute; left: 10px; right: 10px; bottom: calc(var(--safe-b) + 10px); z-index: 30; max-height: 62cqh; overflow: auto; overscroll-behavior: contain; padding: 18px 16px 14px;
  transform: translateY(125%) rotate(3deg); transition: transform .6s cubic-bezier(.2, 1.15, .4, 1); }
.ea .ficha.is-in { transform: translateY(0) rotate(-.6deg); }
.ea .ficha.is-out { transform: translateY(125%) rotate(-3deg); transition-duration: .35s; transition-timing-function: ease-in; pointer-events: none !important; }
.ea .ficha .sello-dom { right: 10px; top: 8px; width: 78px; height: 78px; font-size: 15px; }
.ea .ficha-k { display: flex; align-items: center; gap: 8px; margin: 0 86px 6px 0; font: 800 15px/1.2 var(--f-num); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.ea .ficha-n { padding: 3px 10px; border-radius: 6px; background: var(--tinta); color: #FFE7A0; }
.ea .ficha-t { margin: 0 86px 12px 0; font: 400 clamp(26px, 8cqw, 32px)/1.02 var(--f-titulo); color: var(--tinta); text-wrap: balance; }
.ea .ficha-t:focus { outline: none; }
.ea .ficha-cuerpo { display: flex; flex-direction: column; gap: 12px; }
.ea .ficha-seguir { margin-top: 16px; }
.ea .ficha-auto { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .85); transform-origin: left; animation: ea-auto 11s linear both; }
@keyframes ea-auto { from { transform: scaleX(0); } }
/* piezas de datos */
.ea .dato-estampa { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; background: var(--blanco); box-shadow: 0 0 0 2px var(--troquel) inset, 0 4px 10px rgba(20, 10, 0, .12); }
.ea .de-cal { flex: none; display: grid; grid-template-rows: auto 1fr; width: 68px; height: 74px; border-radius: 10px; overflow: hidden; background: var(--blanco); box-shadow: 0 0 0 2px var(--tinta), 0 4px 0 var(--tinta); transform: rotate(-4deg); }
.ea .de-mes { display: block; padding: 3px 0; background: var(--rojo); color: #fff; font: 800 15px/1 var(--f-num); letter-spacing: .1em; text-align: center; }
.ea .de-dia { display: grid; place-items: center; font: 400 38px/1 var(--f-titulo); color: var(--tinta); }
.ea .de-v { margin: 0; font: 400 clamp(22px, 6.6cqw, 26px)/1.05 var(--f-titulo); }
.ea .de-s { margin: 4px 0 0; font: 800 16px/1.2 var(--f-texto); color: var(--tinta-2); }
.ea .marcador { align-self: center; display: inline-flex; gap: 6px; margin: 0; padding: 7px 16px; border-radius: 8px; background: #121528; color: #FFD66E; font: 800 20px/1 var(--f-num); letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 0 0 3px #2B3157, 0 6px 12px rgba(0, 0, 0, .3); text-shadow: 0 0 8px rgba(255, 214, 110, .55); }
.ea .dato-linea { margin: 0; font: 800 18px/1.25 var(--f-texto); }
.ea .acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.ea .acciones > * { flex: 1 1 140px; }
.ea .alineacion { list-style: none; margin: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; border-radius: 12px; background: linear-gradient(90deg, rgba(46, 125, 79, .1), rgba(46, 125, 79, .04)); box-shadow: 0 0 0 2px rgba(46, 125, 79, .25) inset; }
.ea .alineacion li { display: flex; gap: 10px; align-items: center; font: 800 16px/1.25 var(--f-texto); }
.ea .al-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--verde); color: #fff; font: 800 15px/1 var(--f-num); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--verde); }
.ea .al-hora { flex: none; min-width: 68px; font: 800 17px/1 var(--f-num); color: var(--rojo); letter-spacing: .03em; }
.ea .mensaje-estampa { margin: 0; padding: 16px 16px 12px 22px; border-radius: 12px; background: repeating-linear-gradient(180deg, #FFFDF6 0 31px, rgba(80, 120, 200, .22) 31px 33px); background-position: 0 10px; background-color: #FFFDF6;
  font: 700 21px/33px var(--f-texto); color: var(--tinta); transform: rotate(-.8deg); box-shadow: 0 0 0 2px var(--troquel) inset, 0 8px 14px rgba(20, 10, 0, .18); border-left: 5px solid rgba(216, 52, 59, .4); }
.ea .mensaje-estampa p { margin: 0; }
.ea .mensaje-estampa footer { margin-top: 4px; font: 800 17px var(--f-texto); color: var(--tinta-2); text-align: right; }
.ea .mapa-estampa { border-radius: 12px; overflow: hidden; border: 6px solid var(--blanco); box-shadow: 0 6px 14px rgba(20, 10, 0, .25); transform: rotate(1deg); }
.ea .mapa-estampa svg { display: block; width: 100%; height: auto; }
.ea .lugar-nombre { margin: 0; font: 400 clamp(24px, 7cqw, 28px)/1.05 var(--f-titulo); }
.ea .lugar-dir { margin: -6px 0 0; font: 700 16px/1.35 var(--f-texto); color: var(--tinta-2); }
.ea .invitan-k { margin: 0; font: 700 16px/1.2 var(--f-texto); color: var(--tinta-2); text-align: center; }
.ea .invitan { margin: 0; font: 400 clamp(28px, 8.4cqw, 34px)/1.05 var(--f-titulo); color: var(--tinta); text-align: center; }
.ea .dato-caja { padding: 10px 14px; border-radius: 12px; background: var(--blanco); box-shadow: 0 0 0 2px var(--troquel) inset; }
.ea .dato-caja p { margin: 0; font: 600 16px/1.35 var(--f-texto); }
.ea .dato-caja .dc-k { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font: 800 16px/1.2 var(--f-texto); color: var(--tinta-2); }

/* ---------- la estampa dorada ---------- */
.ea .dorada-nota { position: absolute; left: 12px; right: 12px; bottom: calc(var(--safe-b) + 12px); z-index: 20; padding: 12px 16px 6px; border-radius: 22px; text-align: center; color: var(--tinta);
  background: linear-gradient(155deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, #FFF4D2, #F2C75A); border: 6px solid #FFF8E0; box-shadow: 0 0 30px rgba(255, 200, 90, .55), var(--sombra);
  animation: ea-sube .6s .2s cubic-bezier(.2, 1.3, .4, 1) both; }
.ea .dorada-nota.is-out { animation: ea-baja .3s ease-in both; pointer-events: none !important; }
.ea .dorada-k { margin: 0; font: 800 15px/1.2 var(--f-num); letter-spacing: .12em; text-transform: uppercase; color: #5A3B00; }
.ea .dorada-t { margin: 2px 0 2px; font: 400 clamp(24px, 7.4cqw, 30px)/1.02 var(--f-titulo); text-wrap: balance; }
.ea .dorada-s { margin: 0 0 4px; font: 700 15px/1.3 var(--f-texto); color: #4A3405; }

/* ---------- ¡cumple! y final ---------- */
.ea .cumple { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-b) + 8cqh); z-index: 16; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 18px; text-align: center; pointer-events: none !important; animation: ea-pega .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.ea .cumple-t { margin: 0; padding: 12px 24px 10px; border: 8px solid var(--blanco); border-radius: 22px; background: linear-gradient(180deg, #FFF4D2, #F2C75A); font: 400 clamp(40px, 13cqw, 56px)/1 var(--f-titulo); color: var(--tinta);
  outline: 2px dashed rgba(90, 60, 0, .3); outline-offset: -10px; box-shadow: 0 0 40px rgba(255, 200, 90, .5), var(--sombra); transform: rotate(-2deg); text-wrap: balance; }
.ea .cumple-s { margin: 0; padding: 8px 16px; border-radius: 10px; background: var(--tinta); font: 700 17px/1.3 var(--f-texto); color: #FFF4D2; transform: rotate(1deg); text-wrap: balance; max-width: 92cqw; }
.ea .fin { position: absolute; left: 10px; right: 10px; bottom: calc(var(--safe-b) + 10px); z-index: 18; max-height: 60cqh; overflow: auto; overscroll-behavior: contain; padding: 16px 16px 12px; animation: ea-sube .6s .1s cubic-bezier(.2, 1.2, .4, 1) both; }
.ea .fin-t { margin: 0; font: 400 clamp(30px, 9cqw, 36px)/1 var(--f-titulo); text-wrap: balance; }
.ea .fin-linea { display: flex; flex-wrap: wrap; column-gap: 12px; margin: 6px 0 6px; font: 800 17px/1.3 var(--f-texto); color: var(--tinta-2); }
.ea .fin-linea span + span::before { content: "· "; }
.ea .fin-lugar { margin: 0 0 8px; }
.ea .fin-lugar summary { display: flex; align-items: center; gap: 8px; min-height: 46px; cursor: pointer; font: 800 18px/1.2 var(--f-texto); list-style: none; }
.ea .fin-lugar summary::-webkit-details-marker { display: none; }
.ea .fin-lugar summary small { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--tinta); color: #FFE7A0; font: 800 14px var(--f-num); letter-spacing: .06em; text-transform: uppercase; }
.ea .fin-lugar[open] summary small { visibility: hidden; }
.ea .fin-lugar > :not(summary) { margin-top: 10px; }
.ea .fin-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }

/* ---------- tarjetas que se desplazan: sin barra nativa (salía cuadrada y recortada por las esquinas redondeadas);
   mientras quede contenido abajo, la pestaña "Más abajo" pegada a la orilla (hojas.js → masAbajo) ---------- */
.ea .ficha, .ea .fin, .ea .hoja-pagina { overflow-x: hidden; scrollbar-width: none; }
.ea .ficha::-webkit-scrollbar, .ea .fin::-webkit-scrollbar, .ea .hoja-pagina::-webkit-scrollbar { display: none; }
.ea .mas-abajo { position: sticky; bottom: 0; z-index: 4; height: 0; pointer-events: none; --mas-l: 16px; --mas-r: 16px; }
.ea .hoja-pagina > .mas-abajo { --mas-l: 26px; --mas-r: 18px; }
.ea .mas-abajo > span { position: absolute; left: calc(-1 * var(--mas-l)); right: calc(-1 * var(--mas-r)); bottom: 0; height: 70px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px;
  background: linear-gradient(180deg, rgba(246, 235, 213, 0), rgba(246, 235, 213, .92) 62%); opacity: 0; transition: opacity .25s; }
.ea .hay-mas > .mas-abajo > span { opacity: 1; }
.ea .mas-abajo b { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px 6px 10px; border: 3px solid var(--blanco); border-radius: 999px; background: var(--tinta); color: #FFE7A0;
  font: 800 13px/1 var(--f-num); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 4px 10px rgba(20, 10, 0, .3); transform: rotate(-2deg); }
.ea .mas-abajo i { display: grid; transform: rotate(90deg); }
.ea .hay-mas > .mas-abajo b { animation: ea-mas 1.6s ease-in-out infinite; }
@keyframes ea-mas { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }
.ea.rm .mas-abajo b { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .ea .mas-abajo b { animation: none !important; } }

/* ---------- avisos: estampita que se pega ---------- */
.ea .aviso { position: absolute; left: 50%; top: calc(var(--safe-t) + 74px); z-index: 60; display: flex; align-items: center; gap: 8px; max-width: 90cqw; padding: 9px 16px 9px 10px; border: 4px solid var(--blanco); border-radius: 14px;
  background: var(--papel); color: var(--tinta); font: 700 16px/1.25 var(--f-texto); box-shadow: 0 10px 20px rgba(20, 10, 0, .35); transform: translateX(-50%) rotate(-1.5deg); animation: ea-aviso .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.ea .aviso-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--oro); color: var(--tinta); }
@keyframes ea-aviso { from { opacity: 0; transform: translateX(-50%) translateY(-14px) rotate(-8deg) scale(1.15); } }
.ea .aviso.is-out { opacity: 0; transition: opacity .3s; }
.ea .noscript { position: fixed; inset: auto 16px 16px; z-index: 99; padding: 14px; background: var(--papel); border-radius: 8px; font: 700 16px/1.4 var(--f-texto); }
.ea .dbg-fps { position: absolute; left: 8px; bottom: calc(var(--safe-b) + 6px); margin: 0; padding: 2px 8px; border-radius: 8px; background: rgba(0, 0, 0, .55); color: #fff; font: 12px ui-monospace, monospace; z-index: 80; pointer-events: none; }
.ea .vitrina-t { position: absolute; left: 50%; top: 6%; transform: translateX(-50%) rotate(-2deg); margin: 0; padding: 10px 24px 12px; border: 8px solid var(--blanco); border-radius: 22px; background: var(--papel); box-shadow: var(--sombra); font: 400 clamp(30px, 5vw, 52px)/1 var(--f-titulo); text-align: center; white-space: nowrap; }
.ea .vitrina-t small { display: block; margin-top: 4px; font: 800 .5em var(--f-num); letter-spacing: .06em; color: var(--tinta-2); }

/* ---------- movimiento reducido ---------- */
.ea.rm .portada, .ea.rm .guia, .ea.rm .cumple, .ea.rm .fin, .ea.rm .dorada-nota, .ea.rm .aviso, .ea.rm .sello-dom, .ea.rm .contador.is-late, .ea.rm .sobre-btn .sb-brillo::before { animation: none !important; }
.ea.rm .ficha { transition-duration: .01s; }
@media (prefers-reduced-motion: reduce) {
  .ea .portada, .ea .guia, .ea .cumple, .ea .fin, .ea .dorada-nota, .ea .aviso, .ea .sello-dom, .ea .contador.is-late, .ea .sobre-btn .sb-brillo::before { animation: none !important; }
  .ea .ficha { transition-duration: .01s; }
}