/* ==========================================================
   Diseño "Lotería" · Boda · ¡Lotería, nos casamos!
   Serigrafía moderna sobre papel crema: rosa mexicano suave, turquesa,
   amarillo maíz, verde nopal y rojo granada en acentos. Trazo de tinta grueso.
   ========================================================== */

@font-face { font-family: "Bungee"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/bungee-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bungee"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/bungee-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Old Standard TT"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/old-standard-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Old Standard TT"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/old-standard-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Old Standard TT"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/old-standard-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Old Standard TT"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/old-standard-700-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Old Standard TT"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../fonts/old-standard-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Old Standard TT"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../fonts/old-standard-italic-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }

/* Separación entre cartas de la tabla (animable: se cierra a 0 al formar el mosaico) */
@property --gap { syntax: "<length>"; inherits: true; initial-value: 5px; }

:root {
  --papel: #fbf3e4;
  --papel-2: #f6e7cc;
  --blanco: #fffaf0;
  --tinta: #2a211d;
  --suave: #6b5d55;
  --rosa: #f29bb8;
  --rosa-2: #d65a86;
  --rosa-claro: #fbd3e0;
  --turq: #58c3bd;
  --turq-2: #2c8a85;
  --maiz: #f5c84c;
  --nopal: #8cbf6a;
  --nopal-2: #557f3a;
  --granada: #d9434e;
  --cielo: #cdeeea;

  --cartel: "Bungee", "Arial Black", system-ui, sans-serif;
  --serif: "Old Standard TT", Georgia, serif;
  --script: "Pacifico", "Caveat", cursive;
  --mano: "Caveat", "Pacifico", cursive;
  --sans: "DM Sans", system-ui, sans-serif;

  --s-fondo: var(--papel);
  --s-tinta: var(--tinta);
  --s-suave: var(--suave);
  --s-acento: var(--rosa-2);
  --s-acento-tinta: #fff;
  --s-tarjeta: var(--blanco);
  --s-borde: rgba(42, 33, 29, .14);
  --s-radio: 12px;
  --s-sombra: 4px 4px 0 var(--turq);
  --s-fuente: var(--serif);
  --s-titulo: var(--script);
  --s-titulo-tam: clamp(1.9rem, 8.6vw, 2.4rem);
  --s-titulo-color: var(--rosa-2);
  --s-etiqueta: var(--sans);
  --s-num: var(--cartel);
  --s-num-color: var(--granada);
  --s-btn-linea-color: var(--tinta);
}

body {
  background: #efe3cd;
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 17px;
}
.amp { font-family: var(--serif); font-style: italic; color: var(--rosa-2); }
.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lot-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Tintas de las ilustraciones (serigrafía) ---------- */
.f-rosa { fill: var(--rosa); }
.f-rosa2 { fill: var(--rosa-claro); }
.f-turq { fill: var(--turq); }
.f-maiz { fill: var(--maiz); }
.f-nopal { fill: var(--nopal); }
.f-granada { fill: var(--granada); }
.f-blanco { fill: var(--blanco); }
.f-piel { fill: #e2a77f; }
.f-cafe { fill: #8b5a3a; }
.f-crema { fill: var(--papel-2); }
.f-cielo { fill: var(--cielo); }
.ti { fill: var(--tinta); }
.tl { fill: none; stroke: var(--tinta); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tl--fino { stroke-width: 1.8; }
.tw { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: .9; }
.tp { fill: none; stroke: #fff; stroke-width: 1.9; stroke-dasharray: 3 3; stroke-linecap: round; }
.td { fill: none; stroke: var(--tinta); stroke-width: 1.7; stroke-dasharray: 3 3.4; stroke-linecap: round; }

/* ---------- Carta (cara) ---------- */
.carta { display: block; width: 100%; height: 100%; }
.carta__papel { fill: var(--blanco); stroke: var(--tinta); stroke-width: 1.5; }
.carta__filete { fill: none; stroke: var(--tinta); stroke-width: 1.2; }
.carta__num { font-family: var(--cartel); font-size: 10px; fill: var(--granada); }
.carta__adorno { fill: var(--maiz); stroke: var(--tinta); stroke-width: .8; }
.carta__banda { fill: var(--papel-2); }
.carta__linea { stroke: var(--tinta); stroke-width: 1.2; }
.carta__nombre { font-family: var(--serif); font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; fill: var(--tinta); }
.carta__cinta { fill: var(--blanco); stroke: var(--tinta); stroke-width: 1.3; stroke-linejoin: round; }
.carta__invitado { font-family: var(--mano); font-weight: 700; font-size: 13px; fill: var(--granada); }

/* ---------- Papel picado ---------- */
.picado {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  padding: 0 10px;
  pointer-events: none;
}
.picado__hilo { position: absolute; left: 0; top: 0; width: 100%; height: 8px; overflow: visible; }
.picado__hilo path { fill: none; stroke: var(--tinta); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.bandera {
  display: block;
  flex: 0 0 auto;
  width: min(52px, calc((100% - 36px) / 7));
  margin-top: 2px;
  transform-origin: 50% 0;
  will-change: transform;
  pointer-events: auto;
  cursor: grab;
}
.bandera__in { display: block; transform-origin: 50% 0; animation: mecer 3.4s ease-in-out infinite alternate; }
.bandera:nth-child(odd) .bandera__in { animation-duration: 2.9s; animation-delay: -1.2s; }
.bandera:nth-child(3n) .bandera__in { animation-duration: 3.8s; animation-delay: -.6s; }
.bandera svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 3px 2px rgba(42, 33, 29, .14)); }
.bandera__papel { fill: currentColor; }
.bandera__letra { font-family: var(--cartel); font-size: 30px; fill: var(--papel); }
.b-rosa { color: var(--rosa); }
.b-turq { color: var(--turq); }
.b-maiz { color: var(--maiz); }
.b-nopal { color: var(--nopal); }
.b-granada { color: #e8737b; }
@keyframes mecer { from { transform: rotate(-2.6deg); } to { transform: rotate(2.6deg); } }

/* ================= INTRO ================= */
.lot {
  position: relative;
  width: min(100%, 520px);
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  margin: 0 auto;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  background:
    radial-gradient(60% 34% at 0% 30%, rgba(242, 155, 184, .28), transparent 70%),
    radial-gradient(55% 32% at 100% 70%, rgba(88, 195, 189, .24), transparent 70%),
    radial-gradient(70% 30% at 50% 108%, rgba(245, 200, 76, .3), transparent 70%),
    var(--papel);
  box-shadow: 0 0 60px -30px rgba(42, 33, 29, .45);
}
.lot__fondo {
  position: absolute;
  inset: 0;
  background-image: var(--grano), radial-gradient(rgba(42, 33, 29, .06) 1px, transparent 1.4px);
  background-size: auto, 14px 14px;
  pointer-events: none;
}
.picado--intro { z-index: 4; padding-top: env(safe-area-inset-top); }
.picado--intro .picado__hilo { top: env(safe-area-inset-top); }

/* Cabecera: gritón + controles (y, al final, los nombres) */
.lot__cab {
  position: relative;
  z-index: 3;
  height: clamp(74px, 12.5svh, 94px);
  margin: 2px 12px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.griton { display: flex; align-items: center; gap: 6px; min-width: 0; height: 100%; transition: opacity .5s ease, transform .5s ease; }
.griton__mega { flex: 0 0 auto; width: 38px; height: 38px; transform: rotate(-10deg); }
.griton__mega svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mega__cono { fill: var(--rosa); stroke: var(--tinta); stroke-width: 2.2; stroke-linejoin: round; }
.mega__boca { fill: var(--maiz); stroke: var(--tinta); stroke-width: 2.2; stroke-linejoin: round; }
.mega__mango { fill: var(--turq); stroke: var(--tinta); stroke-width: 2.2; stroke-linejoin: round; }
.mega__ondas { fill: none; stroke: var(--granada); stroke-width: 2.4; stroke-linecap: round; }
.griton.canta .mega__ondas { animation: ondas .5s ease-in-out 3 alternate; }
@keyframes ondas { from { opacity: .2; } to { opacity: 1; } }
.griton__globo {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-height: 100%;
  margin: 0;
  padding: 6px 11px 6px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border: 2px solid var(--tinta);
  border-radius: 14px 14px 14px 4px;
  background: var(--blanco);
  box-shadow: 3px 3px 0 var(--rosa);
}
.griton__frase { font-style: italic; font-size: clamp(.78rem, 3.5vw, .9rem); line-height: 1.22; color: var(--suave); }
.griton__carta { display: block; margin-top: 1px; font-family: var(--serif); font-weight: 700; font-size: clamp(1rem, 4.8vw, 1.2rem); line-height: 1.15; letter-spacing: .03em; text-transform: uppercase; color: var(--granada); }
.griton__carta:empty { display: none; }
.griton.canta .griton__globo { animation: globo .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes globo { from { transform: scale(.94); } to { transform: scale(1); } }

.lot__ctrl { display: flex; flex-direction: column; align-items: center; gap: 2px; transition: opacity .5s ease; }
.idiomas { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
.idioma { min-width: 28px; min-height: 30px; color: var(--tinta); }
.idioma.is-activo { color: var(--rosa-2); }
.btn-sonido {
  all: unset;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--tinta);
  background: var(--blanco);
  color: var(--tinta);
  cursor: pointer;
}
.btn-sonido:focus-visible { outline: 2px solid var(--rosa-2); outline-offset: 2px; }
.sonido__mudo { display: none; }
.btn-sonido.mudo .sonido__ondas { display: none; }
.btn-sonido.mudo .sonido__mudo { display: inline; }

.lot__fin {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.lot__fin > * { opacity: 0; }
.fin__eyebrow { margin: 0; font-family: var(--sans); font-size: .62rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--rosa-2); }
.fin__nombres { margin: 0; font-family: var(--script); font-weight: 400; font-size: clamp(1.6rem, 8vw, 2.2rem); line-height: 1.25; color: var(--tinta); }
.fin__nombres .amp { font-size: .8em; }
.fin__fecha { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--suave); }
.fin__fecha i { padding: 0 .4em; font-style: normal; color: var(--rosa-2); }

/* Zona de juego: tabla, carta cantada y letrero */
.lot__zona {
  position: relative;
  z-index: 2;
  min-height: 0;
  container-type: size;
  display: grid;
  place-items: center;
}
.tabla-marco {
  position: relative;
  width: min(100cqw - 24px, 75cqh - 34px, 420px);
  padding: 6px 7px;
  border: 2.5px solid var(--tinta);
  border-radius: 10px;
  background: var(--blanco);
  box-shadow: 5px 5px 0 var(--turq), 0 22px 30px -20px rgba(42, 33, 29, .5);
  transform: rotate(-.6deg);
  transition: transform 1s cubic-bezier(.2, .9, .3, 1.2), box-shadow 1s ease;
}
.tabla__banda {
  position: relative;
  height: 20px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}
.tabla__banda--inf { height: 22px; justify-content: center; }
.banda__num { font-family: var(--cartel); font-size: .74rem; color: var(--granada); }
.banda__mono { font-family: var(--script); font-size: .86rem; line-height: 1; color: var(--tinta); }
.banda__mono .amp { font-family: var(--script); font-style: normal; font-size: .9em; }
.banda__suerte, .banda__boda {
  font-family: var(--serif);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: opacity .6s ease, transform .6s ease;
}
.banda__boda { position: absolute; left: 0; right: 0; text-align: center; font-size: .9rem; letter-spacing: .3em; color: var(--granada); opacity: 0; transform: translateY(6px); }

.tabla {
  --gap: 5px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin: 0;
  transition: --gap 1s ease .9s;
}
.casilla {
  all: unset;
  box-sizing: border-box;
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  perspective: 700px;
  border-radius: 5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.casilla:focus-visible { outline: 3px solid var(--rosa-2); outline-offset: 2px; }
.casilla:disabled { cursor: default; }
.casilla__giro {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.3, 1.25, .5, 1);
}
.cara {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 5px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: border-radius .8s ease .9s;
}
.cara--carta { transform: rotateY(180deg); }
.dorso { display: block; width: 100%; height: 100%; transition: opacity .2s ease; }
.cara__foto {
  position: absolute;
  max-width: none;
  width: calc(300% + 2 * var(--gap));
  height: calc(300% + 2 * var(--gap));
  left: calc(var(--col) * (-100% - var(--gap)));
  top: calc(var(--fil) * (-100% - var(--gap)));
  object-fit: cover;
  opacity: 0;
}
.col-0 { --col: 0; } .col-1 { --col: 1; } .col-2 { --col: 2; }
.fil-0 { --fil: 0; } .fil-1 { --fil: 1; } .fil-2 { --fil: 2; }
.casilla.volteada .casilla__giro { transform: rotateY(180deg); }
.casilla.sin-trans .casilla__giro { transition: none; }
.casilla.foto .casilla__giro { transform: rotateY(360deg); transition-duration: 1s; }
.casilla.foto .cara__foto { opacity: 1; }
.casilla.foto .dorso { opacity: 0; }
.casilla:not(.volteada):not(:disabled):hover .casilla__giro { transform: translateY(-3px) rotateZ(-1deg); }

/* Frijolito sobre la casilla */
.frijol {
  position: absolute;
  z-index: 3;
  left: 31%;
  top: 38%;
  width: 38%;
  height: auto;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(1px 2px 1px rgba(42, 33, 29, .35));
  transition: opacity .25s ease;
}
.frijol__cuerpo { fill: #7b4a2d; stroke: var(--tinta); stroke-width: 1; }
.frijol__luz { fill: none; stroke: #fff; stroke-width: 1.3; stroke-linecap: round; opacity: .7; }
.casilla.marcada .frijol { opacity: 1; }

/* Carta que se canta (sale del mazo volteándose) */
.cantada {
  --cw: min(64cqw, 50cqh, 300px);
  position: absolute;
  inset: 0;
  z-index: 20;
  width: var(--cw);
  height: calc(var(--cw) * 4 / 3);
  margin: auto;
  perspective: 1000px;
  visibility: hidden;
  pointer-events: none;
}
.cantada.activa { visibility: visible; }
.cantada__giro { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.cantada__cara {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 9px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 24px 34px -14px rgba(42, 33, 29, .5);
}
.cantada__cara svg { display: block; width: 100%; height: 100%; }
.cantada__cara--frente { transform: rotateY(180deg); }
.cantada.reducida { transition: opacity .25s ease; }

/* Letrero ¡LOTERÍA! */
.letrero {
  position: absolute;
  inset: 0;
  z-index: 30;
  margin: auto;
  width: max-content;
  max-width: 96cqw;
  height: max-content;
  pointer-events: none;
  transition: opacity .7s ease, transform .9s cubic-bezier(.5, 0, .7, .4);
}
.letrero__in {
  display: block;
  padding: .2em .5em .12em;
  font-family: var(--cartel);
  font-size: clamp(2.2rem, 14cqw, 4.4rem);
  line-height: 1;
  white-space: nowrap;
  color: var(--granada);
  text-shadow: 3px 3px 0 var(--rosa-claro), 5px 5px 0 var(--tinta);
  background: var(--blanco);
  border: 3px solid var(--tinta);
  border-radius: 16px;
  box-shadow: 0 0 0 5px var(--blanco), 0 0 0 7.5px var(--tinta), 9px 10px 0 4px var(--maiz);
  opacity: 0;
  transform: rotate(-6deg) scale(.4);
}
.loteria .letrero__in { animation: estampa .75s cubic-bezier(.2, 1.5, .4, 1) forwards; }
@keyframes estampa {
  from { opacity: 0; transform: rotate(-18deg) scale(2.6); }
  to { opacity: 1; transform: rotate(-6deg) scale(1); }
}
.final .letrero { opacity: 0; transform: translateY(-34cqh) scale(.5); }

/* Pie: platito, mazo y "Cantar por mí" */
.lot__pie {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 3.5vw, 18px);
  padding: 4px 12px 0;
  transition: opacity .6s ease, transform .6s ease;
}
.platito { flex: 0 0 auto; width: clamp(66px, 20vw, 86px); }
.platito svg { display: block; width: 100%; height: auto; overflow: visible; }
.platito__barro { fill: #e39b6e; stroke: var(--tinta); stroke-width: 2; }
.platito__fondo { fill: #f4c7a3; stroke: var(--tinta); stroke-width: 1.4; }
.platito__greca { fill: none; stroke: var(--blanco); stroke-width: 1.6; stroke-linecap: round; }
.platito__frijol { fill: #7b4a2d; stroke: var(--tinta); stroke-width: 1.2; transition: opacity .15s ease; }
.platito__frijol.usado { opacity: 0; }

.mazo {
  all: unset;
  box-sizing: border-box;
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mazo__pila { display: block; width: clamp(52px, 15vw, 64px); }
.mazo__pila svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 5px rgba(42, 33, 29, .25)); }
.mazo__tope { transition: transform .25s ease; }
.mazo:hover .mazo__tope, .mazo:focus-visible .mazo__tope { transform: translateY(-5px); }
.mazo__lbl {
  margin-top: 2px;
  padding: 2px 8px;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  background: var(--maiz);
  font-family: var(--cartel);
  font-size: .64rem;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--tinta);
}
.mazo__lbl b { font-weight: 400; color: var(--granada); }
.mazo:focus-visible { outline: 3px solid var(--rosa-2); outline-offset: 4px; border-radius: 8px; }
.mazo:active .mazo__pila { transform: scale(.95); }
.mazo.invita .mazo__pila { animation: invita 1.4s ease-in-out infinite; }
@keyframes invita { 0% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-6px) rotate(-3deg); } 60% { transform: translateY(0) rotate(2deg); } 100% { transform: translateY(0) rotate(0); } }
.mazo.vacio .mazo__pila { opacity: .35; }
.mazo:disabled { cursor: default; }

.btn-pormi {
  all: unset;
  box-sizing: border-box;
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  background: var(--blanco);
  box-shadow: 3px 3px 0 var(--rosa);
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--tinta);
  cursor: pointer;
  transition: transform .2s ease, opacity .3s ease;
}
.btn-pormi svg { flex: 0 0 auto; color: #7b4a2d; }
.btn-pormi:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--rosa); }
.btn-pormi:focus-visible { outline: 3px solid var(--rosa-2); outline-offset: 3px; }
.btn-pormi:disabled { opacity: .55; cursor: default; }

.lot .desliza-c { z-index: 6; color: var(--rosa-2); font-family: var(--sans); }

/* ---------- ¡Lotería! → mosaico → carta grande ---------- */
.loteria .lot__pie { opacity: 0; transform: translateY(14px); pointer-events: none; }
.loteria .tabla-marco { transform: rotate(0) scale(1.03); box-shadow: 7px 7px 0 var(--rosa), 0 26px 36px -20px rgba(42, 33, 29, .55); }
.loteria .casilla.marcada .frijol { animation: brinca .7s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes brinca { from { translate: 0 0; } 40% { translate: 0 -10px; } to { translate: 0 0; } }
.mosaico .casilla .frijol { opacity: 0; transition: opacity .3s ease; }
.mosaico .tabla { --gap: 0px; }
.mosaico .cara { border-radius: 0; }
.mosaico .banda__suerte { opacity: 0; transform: translateY(-6px); }
.mosaico .banda__boda { opacity: 1; transform: none; transition-delay: .9s; }
.mosaico .griton, .mosaico .lot__ctrl { opacity: 0; pointer-events: none; }
.mosaico .griton { transform: translateY(-10px); }
.final .lot__fin .fin__eyebrow { animation: entrar .8s .1s cubic-bezier(.2, .8, .2, 1) both; }
.final .lot__fin .fin__nombres { animation: entrar 1s .3s cubic-bezier(.2, .8, .2, 1) both; }
.final .lot__fin .fin__fecha { animation: entrar .8s .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes entrar { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.listo { touch-action: auto; }
.listo .casilla { cursor: default; }

/* ================= INVITACIÓN ================= */
.contenido { background: var(--papel); background-image: var(--grano); box-shadow: 0 0 60px -30px rgba(42, 33, 29, .45); }
.s-titulo { text-shadow: 2px 2px 0 var(--rosa-claro); }

.picado--tira { width: 100%; max-width: 420px; margin: 0 auto 26px; padding: 0; }
.picado--tira .bandera { width: min(38px, calc((100% - 48px) / 9)); cursor: default; }
.picado--tira .picado__hilo { height: 6px; }
.picado--sep { margin: 8px auto 0; }

.portada { padding-top: 46px; }
.portada__eyebrow { margin: 0 0 18px; font-family: var(--sans); font-size: .66rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--turq-2); }
.cartagrande {
  width: min(84%, 330px);
  margin: 0;
  padding: 8px 8px 6px;
  border: 2.5px solid var(--tinta);
  border-radius: 12px;
  background: var(--blanco);
  box-shadow: 6px 6px 0 var(--rosa), 0 26px 30px -22px rgba(42, 33, 29, .5);
  rotate: -1.5deg;
}
.cartagrande__sup { display: flex; justify-content: space-between; align-items: center; padding: 0 2px 6px; font-family: var(--cartel); font-size: .9rem; color: var(--granada); }
.cartagrande img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 2px solid var(--tinta); border-radius: 4px; }
.cartagrande__inf { padding: 7px 0 2px; font-family: var(--serif); font-weight: 700; font-size: 1.15rem; letter-spacing: .26em; text-transform: uppercase; }
.portada__nombres { margin: 30px 0 0; font-family: var(--script); font-weight: 400; font-size: clamp(2.1rem, 10vw, 2.8rem); line-height: 1.25; }
.portada__nombres .amp { font-size: .75em; }
.portada__fecha { margin: 4px 0 0; font-size: .82rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--suave); }
.portada__texto { margin: 22px 0 0; max-width: 22em; font-size: 1.12rem; line-height: 1.6; font-style: italic; }

.s-cuenta { background: linear-gradient(180deg, var(--papel), rgba(242, 155, 184, .18) 55%, var(--papel)); }
.s-cuenta__caja { border: 2px solid var(--tinta); border-radius: 10px; box-shadow: 3px 3px 0 var(--maiz); }
.s-cuenta__num { font-size: clamp(1.3rem, 6vw, 1.8rem); }
.s-cuenta__lbl { color: var(--tinta); }
.s-btn--linea, .s-btn--mini { border: 2px solid var(--tinta); background: var(--blanco); box-shadow: 3px 3px 0 var(--turq); }

.s-evento { border: 2px solid var(--tinta); border-radius: 12px; }
.s-evento:nth-child(even) { box-shadow: 4px 4px 0 var(--rosa); }
.s-evento__icono { color: var(--tinta); border: 2px solid var(--tinta); background: var(--maiz); }
.s-evento:nth-child(even) .s-evento__icono { background: var(--rosa-claro); }
.s-evento__titulo { color: var(--rosa-2); }
.s-evento__hora { color: var(--granada); font-size: 1.5rem; }
.s-evento__lugar { font-size: 1.12rem; }
.s-evento__dir { font-size: 1rem; }

.cartas { background: linear-gradient(180deg, var(--papel), rgba(88, 195, 189, .16) 50%, var(--papel)); }
.cartas__hint { margin: -14px 0 22px; font-style: italic; color: var(--suave); }
.cartas__rejilla { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
.cartas__item { display: flex; flex-direction: column; align-items: center; }
.cartita {
  all: unset;
  box-sizing: border-box;
  position: relative;
  display: block;
  width: min(100%, 170px);
  aspect-ratio: 3 / 4;
  perspective: 800px;
  cursor: pointer;
}
.cartita:focus-visible { outline: 3px solid var(--rosa-2); outline-offset: 3px; border-radius: 8px; }
.cartita__giro { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3, 1.25, .5, 1); }
.cartita__cara {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 7px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 14px 20px -12px rgba(42, 33, 29, .45);
}
.cartita__cara svg { display: block; width: 100%; height: 100%; }
.cartita__cara--frente { transform: rotateY(180deg); }
.cartita.volteada .cartita__giro { transform: rotateY(180deg); }
.cartita__txt { margin: 12px 0 0; max-width: 15em; font-size: .98rem; line-height: 1.45; }

.s-foto { border: 2px solid var(--tinta); border-radius: 10px; box-shadow: 4px 4px 0 var(--maiz); }
.s-foto:nth-child(2) { box-shadow: 4px 4px 0 var(--turq); }
.s-foto:nth-child(3) { box-shadow: 4px 4px 0 var(--rosa); }
.s-vestimenta { background: linear-gradient(180deg, var(--papel), rgba(245, 200, 76, .2) 55%, var(--papel)); }
.s-vestimenta__tipo { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; letter-spacing: .06em; text-transform: uppercase; color: var(--granada); }
.s-paleta li { border: 2px solid var(--tinta); background: var(--blanco); }
.s-rsvp { background: radial-gradient(80% 60% at 50% 40%, rgba(242, 155, 184, .3), transparent 75%); }
.s-rsvp__saludo { font-family: var(--mano); font-weight: 700; font-size: 1.7rem; color: var(--granada); }
.s-rsvp__texto { font-size: 1.12rem; }
.s-btn--lleno {
  min-height: 56px;
  padding: 0 26px;
  border: 2.5px solid var(--tinta);
  background: var(--rosa-2);
  box-shadow: 4px 4px 0 var(--tinta);
  font-size: .78rem;
  letter-spacing: .1em;
}
.s-btn--lleno:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--tinta); }
.s-pie__n { font-family: var(--script); }
.btn-musica { background: var(--blanco); color: var(--rosa-2); border: 2px solid var(--tinta); }

/* Pantallas bajas: se compacta la cabecera y el pie */
@media (max-height: 680px) {
  .lot__cab { height: 70px; }
  .griton__mega { width: 32px; height: 32px; }
  .griton__frase { font-size: .76rem; }
  .griton__carta { font-size: .98rem; }
  .mazo__pila { width: 48px; }
  .platito { width: 62px; }
  .tabla__banda { height: 18px; }
  .tabla__banda--inf { height: 20px; }
}
@media (max-width: 370px) {
  .btn-pormi { padding: 0 10px; font-size: .62rem; letter-spacing: .06em; }
  .lot__cab { margin-left: 8px; margin-right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .bandera__in, .mazo.invita .mazo__pila, .griton.canta .mega__ondas, .griton.canta .griton__globo { animation: none; }
  .casilla__giro, .cartita__giro { transition-duration: .01s; }
  .tabla { transition: none; }
  .cara { transition: none; }
  .loteria .letrero__in { animation: none; opacity: 1; transform: rotate(-6deg); }
  .loteria .casilla.marcada .frijol { animation: none; }
  .final .lot__fin .fin__eyebrow, .final .lot__fin .fin__nombres, .final .lot__fin .fin__fecha { animation: none; opacity: 1; }
  .letrero { transition-duration: .3s; }
}