/* ---------- Tokens por modo ---------- */
:root {
  --bg: #f3ece0;
  --fg: #14110d;
  --muted: #2a241d;
  --accent: #5e4119;
  --card: #ffffff;
  --borde: 1.5px solid #a88d62;
  --sombra: 0 10px 30px rgba(60, 40, 15, .18);
  --radio: 4px;
  --f-titulo: "Great Vibes", cursive;
  --f-texto: "Cormorant Garamond", Georgia, serif;
}

[data-modo="novia"] {
  --bg: #eaf3fb;
  --fg: #0b2559;
  --muted: #1d3a72;
  --accent: #1f5fae;
  --celeste: #74acdf;
  --card: #fff;
  --borde: 3px solid #0b2559;
  --sombra: 0 6px 0 var(--celeste);
  --radio: 0;
  --f-titulo: "Anton", Impact, sans-serif;
  --f-texto: "Nunito", system-ui, sans-serif;
}

[data-modo="novio"] {
  --bg: #ffde00;
  --fg: #1a1a1a;
  --muted: #333;
  --accent: #e3350d;
  --card: #fff;
  --borde: 4px solid #1a1a1a;
  --sombra: 6px 6px 0 #1a1a1a;
  --radio: 14px;
  --f-titulo: "Bangers", Impact, sans-serif;
  --f-texto: "Nunito", system-ui, sans-serif;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-texto);
  font-size: 1.2rem;
  line-height: 1.6;
  transition: background .4s, color .4s;
  overflow-x: hidden;
}
main { max-width: 900px; margin: 0 auto; padding: 0 16px 48px; display: grid; gap: 24px; }
h1, h2 { font-family: var(--f-titulo); font-weight: 400; margin: 0 0 .3em; }
h2 { font-size: 2.6rem; color: var(--accent); }

[data-modo="formal"] :is(.solo-novia, .solo-novio),
[data-modo="novia"] :is(.solo-formal, .solo-novio),
[data-modo="novio"] :is(.solo-formal, .solo-novia) { display: none !important; }

/* ---------- Selector ---------- */
.modos {
  position: fixed; top: 12px; right: 12px; z-index: 10;
  display: flex; gap: 4px; padding: 4px;
  background: var(--card); border: var(--borde); border-radius: 999px;
  box-shadow: var(--sombra);
}
.modos button {
  font: inherit; font-size: .95rem; cursor: pointer;
  border: 0; border-radius: 999px; padding: 6px 14px;
  background: transparent; color: var(--fg);
}
.modos button[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* ---------- Menú de secciones ---------- */
html { scroll-behavior: smooth; }
main > * { scroll-margin-top: 72px; }
.menu {
  position: fixed; top: 12px; left: 12px; z-index: 10;
  display: flex; gap: 2px; padding: 4px;
  background: var(--card); border: var(--borde); border-radius: 999px;
  box-shadow: var(--sombra);
}
.menu a {
  font-size: .95rem; text-decoration: none; color: var(--fg);
  border-radius: 999px; padding: 6px 12px; white-space: nowrap;
}
.menu a:hover, .menu a:focus-visible { background: var(--accent); color: #fff; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 80px 16px 40px; position: relative;
}
.hero h1 { font-size: clamp(3.5rem, 12vw, 7rem); line-height: 1.1; }
.amp { color: var(--accent); }
.pre { max-width: 30ch; color: var(--muted); font-style: italic; }
.fecha { font-size: 1.4rem; letter-spacing: .15em; text-transform: uppercase; }

.cuenta { display: flex; gap: 12px; margin-top: 16px; }
.cuenta div {
  min-width: 70px; padding: 10px 6px;
  border: var(--borde); border-radius: var(--radio);
  background: var(--card); box-shadow: var(--sombra);
}
.cuenta b { display: block; font-size: 1.8rem; line-height: 1; }
.cuenta small { color: var(--muted); font-size: .8rem; }

/* ---------- Cards ---------- */
.eventos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: inherit; }
.card {
  background: var(--card); border: var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 32px 24px; text-align: center;
  transition: transform .2s;
  display: flex; flex-direction: column; gap: 14px;
}
/* En flex los márgenes no colapsan: el espaciado lo maneja gap */
.card > * { margin-top: 0; margin-bottom: 0; }
/* Botones siempre al pie de la tarjeta: quedan alineados aunque el contenido varíe */
.acciones { margin-top: auto !important; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.acciones .btn { margin-top: 0; }
.cuando { font-weight: 600; font-size: 1.25rem; }
.btn {
  display: inline-block; margin-top: 8px; cursor: pointer;
  font: inherit; font-size: .95rem; text-decoration: none;
  padding: 8px 20px; border-radius: var(--radio);
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
  transition: background .2s, color .2s;
}
.btn:hover { background: var(--accent); color: #fff; }

.alias { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin: 20px 0; }
.alias > div { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 220px; }
.alias code { font-size: 1.15rem; padding: 4px 12px; background: var(--bg); border-radius: var(--radio); word-break: break-all; }
.firma { font-style: italic; color: var(--muted); }

footer { text-align: center; padding: 32px 16px 48px; font-family: var(--f-titulo); font-size: 2rem; color: var(--accent); }

/* ---------- Confirmar asistencia ---------- */
.rsvp input:not([type="radio"]), .rsvp textarea {
  font: inherit; color: var(--fg); background: var(--bg);
  border: var(--borde); border-radius: var(--radio); padding: 10px 12px; width: 100%;
}
.rsvp textarea::placeholder { color: var(--muted); opacity: .55; font-style: italic; }
.rsvp textarea:focus::placeholder { color: transparent; }
.rsvp-buscar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.rsvp-buscar input { max-width: 240px; text-align: center; text-transform: uppercase; letter-spacing: .15em; }
.rsvp-buscar .btn, .rsvp-form .btn { margin-top: 0; }
.rsvp-form { display: flex; flex-direction: column; gap: 16px; text-align: left; }
.rsvp-form[hidden] { display: none; }
.rsvp-form > label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.rsvp-form > label small { font-weight: normal; color: var(--muted); }
.rsvp-personas { display: flex; flex-direction: column; gap: 10px; }
.rsvp-personas fieldset {
  margin: 0; padding: 10px 14px; border: var(--borde); border-radius: var(--radio);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
}
.rsvp-personas legend { float: left; flex: 1 1 100%; font-weight: 700; padding: 0; }
.rsvp-personas label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.rsvp-personas input { width: 1.2em; height: 1.2em; accent-color: var(--accent); }
.rsvp-form .btn { align-self: center; }
.rsvp-msg:empty { display: none; }
.rsvp-msg { font-weight: 700; color: var(--accent); }

/* ---------- Padrinos ---------- */
:root { --oculto: "Muy pronto"; --silueta: #5e411955; }
[data-modo="novia"] { --oculto: "A confirmar"; --silueta: #0b255966; }
[data-modo="novio"] { --oculto: "???"; --silueta: #1a1a1a; }
[data-modo="novio"] .de-novia, [data-modo="novia"] .de-novio { display: none; }

/* 2 por fila (novia/novio, y formal en celular); formal en escritorio: 4 en fila */
.padrinos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 12px; width: 100%; max-width: 480px; margin: 0 auto; }
@media (min-width: 601px) { [data-modo="formal"] .padrinos-grid { grid-template-columns: repeat(4, 1fr); max-width: none; } }
.padrino { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.padrino-foto {
  position: relative; width: min(120px, 100%); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: var(--borde); background: var(--bg);
}
.padrino-foto img { width: 100%; height: 100%; object-fit: cover; }
/* Silueta genérica mientras no haya foto */
.padrino-foto:not(:has(img))::before {
  content: ""; position: absolute; inset: 18% 12% 0; background: var(--silueta);
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='32' r='22'/><path d='M6 100c0-28 20-44 44-44s44 16 44 44z'/></svg>") center bottom / contain no-repeat;
          mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='32' r='22'/><path d='M6 100c0-28 20-44 44-44s44 16 44 44z'/></svg>") center bottom / contain no-repeat;
}
.padrino figcaption { display: flex; flex-direction: column; line-height: 1.3; }
.padrino small { color: var(--muted); font-size: .9rem; }
.padrino.oculto b { display: none; }
.padrino.oculto figcaption::before { content: var(--oculto); font-weight: 800; }
.padrino.oculto img { filter: blur(10px) grayscale(1); }

/* Novio: fondo "¿Quién es ese Pokémon?" y foto como silueta negra */
[data-modo="novio"] .padrino-foto { background: repeating-conic-gradient(#3b4cca 0 10deg, #6a7ef0 10deg 20deg); }
[data-modo="novio"] .padrino.oculto img { filter: blur(6px) brightness(.15); }
[data-modo="novio"] .padrino.oculto figcaption::before { font-family: "Press Start 2P", monospace; font-size: 1rem; }
/* Novia: borde celeste como los retratos */
[data-modo="novia"] .padrino-foto { border: 4px solid var(--celeste); }

/* ---------- Música ---------- */
#yt { position: fixed; bottom: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.musica {
  position: fixed; bottom: 16px; right: 16px; z-index: 10;
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  font-size: 1.3rem; color: var(--accent);
  background: var(--card); border: var(--borde); box-shadow: var(--sombra);
}

/* ---------- Novia: detalles clásicos ---------- */
/* Cormorant es fina: un peso más para que se lea bien */
[data-modo="formal"] body { font-weight: 500; }
[data-modo="formal"] .cuando, [data-modo="formal"] strong { font-weight: 700; }

/* Ornamento floral bajo los títulos */
[data-modo="formal"] .card h2::after {
  content: ""; display: block; width: 140px; height: 20px; margin: 4px auto 0;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 20'><g fill='none' stroke='%235e4119' stroke-width='1' stroke-linecap='round'><path d='M4 10h48M88 10h48'/><path d='M52 10c6-6 10-6 12 0M88 10c-6 6-10 6-12 0'/><g transform='translate(70 10)'><ellipse rx='2.5' ry='5' cy='-5'/><ellipse rx='2.5' ry='5' cy='-5' transform='rotate(72)'/><ellipse rx='2.5' ry='5' cy='-5' transform='rotate(144)'/><ellipse rx='2.5' ry='5' cy='-5' transform='rotate(216)'/><ellipse rx='2.5' ry='5' cy='-5' transform='rotate(288)'/><circle r='1.5' fill='%235e4119'/></g></g></svg>") center / contain no-repeat;
}

/* Textura de florcitas muy tenue en todo el fondo */
[data-modo="formal"] body {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><defs><g id='f'><ellipse rx='3.5' ry='7' cy='-7'/><ellipse rx='3.5' ry='7' cy='-7' transform='rotate(72)'/><ellipse rx='3.5' ry='7' cy='-7' transform='rotate(144)'/><ellipse rx='3.5' ry='7' cy='-7' transform='rotate(216)'/><ellipse rx='3.5' ry='7' cy='-7' transform='rotate(288)'/><circle r='2'/></g><path id='l' d='M0 0c-5-6-5-12 0-18c5 6 5 12 0 18z'/></defs><g fill='%235e4119' fill-opacity='.04' stroke='%235e4119' stroke-opacity='.13' stroke-width='.8'><use href='%23f' x='30' y='35'/><use href='%23f' transform='translate(115 112) scale(.7) rotate(20)'/><use href='%23l' transform='translate(80 70) rotate(40)'/><use href='%23l' transform='translate(18 125) rotate(-30)'/><use href='%23l' transform='translate(135 30) rotate(70)'/></g></svg>");
}

/* Ramas en dos esquinas del hero */
[data-modo="formal"] .hero::before,
[data-modo="formal"] .hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; opacity: .4;
  width: clamp(130px, 32vw, 260px); aspect-ratio: 1;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='%235e4119' fill-opacity='.08' stroke='%235e4119' stroke-width='1.1' stroke-linecap='round'><path fill='none' d='M5 195C50 160 85 120 150 42'/><path d='M60 152c-8-18 0-32 14-38c4 18-4 32-14 38z'/><path d='M40 168c-20-2-30-14-32-28c18 0 30 12 32 28z'/><path d='M97 108c-4-20 6-32 20-36c2 18-8 30-20 36z'/><path d='M82 126c-18 4-32-4-38-18c18-4 32 4 38 18z'/><path d='M126 72c-16 8-30 4-38-8c16-8 30-4 38 8z'/><g transform='translate(155 35)'><ellipse rx='7' ry='14' cy='-14'/><ellipse rx='7' ry='14' cy='-14' transform='rotate(72)'/><ellipse rx='7' ry='14' cy='-14' transform='rotate(144)'/><ellipse rx='7' ry='14' cy='-14' transform='rotate(216)'/><ellipse rx='7' ry='14' cy='-14' transform='rotate(288)'/><circle r='4' fill-opacity='.3'/></g><g transform='translate(112 140) scale(.55)'><path fill='none' d='M-60 60C-30 30 -10 15 0 0'/><ellipse rx='7' ry='14' cy='-14'/><ellipse rx='7' ry='14' cy='-14' transform='rotate(72)'/><ellipse rx='7' ry='14' cy='-14' transform='rotate(144)'/><ellipse rx='7' ry='14' cy='-14' transform='rotate(216)'/><ellipse rx='7' ry='14' cy='-14' transform='rotate(288)'/><circle r='4' fill-opacity='.3'/></g></g></svg>") center / contain no-repeat;
}
[data-modo="formal"] .hero::before { left: 0; bottom: 0; }
[data-modo="formal"] .hero::after { right: 0; top: 0; transform: rotate(180deg); }

/* ---------- Novia: peronista ---------- */
/* Franjas celestes de la bandera arriba y abajo del hero */
[data-modo="novia"] .hero {
  background: linear-gradient(var(--celeste) 0 28px, #fff 28px calc(100% - 28px), var(--celeste) calc(100% - 28px));
}
[data-modo="novia"] h1 { text-transform: uppercase; color: var(--fg); text-shadow: 4px 4px 0 var(--celeste); letter-spacing: 1px; }
[data-modo="novia"] h2 { text-transform: uppercase; letter-spacing: 1px; }
[data-modo="novia"] .amp { color: var(--celeste); text-shadow: 4px 4px 0 var(--fg); }
[data-modo="novia"] .fecha { font-family: "Anton", sans-serif; letter-spacing: .08em; }
[data-modo="novia"] .cuenta b { font-family: "Anton", sans-serif; font-weight: 400; }
[data-modo="novia"] .btn { border: 0; background: var(--accent); color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
[data-modo="novia"] .btn:hover { background: var(--fg); }
[data-modo="novia"] .dex { font-family: "Anton", sans-serif; font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
[data-modo="novia"] .nota { background: #74acdf33; border-left-color: var(--accent); }
[data-modo="novia"] .meme { font-family: "Anton", sans-serif; background: var(--fg); letter-spacing: .03em; transform: rotate(-1.5deg); max-width: 90vw; }
[data-modo="novia"] footer { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: 1.6rem; }
/* Fotos de Perón y Evita: retrato redondo con borde celeste */
.poke.foto img { border-radius: 50%; object-fit: cover; object-position: top; border: 4px solid var(--celeste); filter: none; }
.grito { font-family: "Anton", sans-serif; font-size: 1.6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin: 0; }

/* Sol de mayo en CSS puro */
.sol {
  width: 96px; aspect-ratio: 1; border-radius: 50%; margin-bottom: 8px;
  background:
    radial-gradient(circle, #f6b40e 0 32%, #c88a04 33% 35%, transparent 36%),
    repeating-conic-gradient(#f6b40e 0 6deg, transparent 6deg 15deg);
  animation: girar 40s linear infinite;
}

/* ---------- Novio: Pokémon / memes ---------- */
[data-modo="novio"] body {
  background-image: radial-gradient(#0000001a 2px, transparent 2px);
  background-size: 22px 22px;
}
[data-modo="novio"] h1 { color: #3b4cca; -webkit-text-stroke: 2px #1a1a1a; text-shadow: 5px 5px 0 #1a1a1a; letter-spacing: 2px; }
[data-modo="novio"] h2 { -webkit-text-stroke: 1px #1a1a1a; letter-spacing: 1px; }
[data-modo="novio"] .card:hover { transform: rotate(-1deg) scale(1.02); }
[data-modo="novio"] .card:nth-child(2):hover { transform: rotate(1deg) scale(1.02); }
[data-modo="novio"] .btn { border: 3px solid #1a1a1a; background: var(--accent); color: #fff; font-weight: 800; box-shadow: 3px 3px 0 #1a1a1a; }
[data-modo="novio"] .btn:active { transform: translate(3px, 3px); box-shadow: none; }
[data-modo="novio"] .fecha { font-family: "Press Start 2P", monospace; font-size: .8rem; line-height: 2; }
[data-modo="novio"] .cuenta b { font-family: "Press Start 2P", monospace; font-size: 1.1rem; }

.dialogo {
  font-family: "Press Start 2P", monospace; font-size: .75rem; line-height: 2;
  background: #fff; border: 4px solid #1a1a1a; border-radius: 8px;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #3b4cca;
  padding: 16px 20px; margin-bottom: 16px; max-width: 90vw;
}
.dialogo::after { content: " ▼"; animation: parpadeo 1s steps(1) infinite; }
.meme {
  margin-top: 24px; font-family: "Bangers", sans-serif; font-size: 1.5rem; letter-spacing: 1px;
  background: #1a1a1a; color: #fff; padding: 4px 14px; transform: rotate(-2deg);
}
.dex { font-family: "Press Start 2P", monospace; font-size: .6rem; color: #3b4cca; margin: 0 0 8px; }
.nota { font-size: .95rem; background: #ffde0055; border-left: 4px solid var(--accent); padding: 6px 10px; text-align: left; }

.poke { margin: 12px 0; }
.poke img { width: 140px; height: 140px; object-fit: contain; filter: drop-shadow(4px 4px 0 #1a1a1a); }
.card:hover .poke img { animation: tambalear .5s ease-in-out; }
.poke figcaption { font-weight: 800; font-size: .95rem; }

/* Pokebolas flotando de fondo (CSS puro) */
.pokebolas { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.pokebolas span {
  position: absolute; width: 48px; height: 48px; border-radius: 50%;
  border: 3px solid #1a1a1a; opacity: .35;
  background:
    radial-gradient(circle, #fff 0 5px, #1a1a1a 5px 9px, transparent 9px),
    linear-gradient(#e3350d 0 45%, #1a1a1a 45% 55%, #fff 55%);
  animation: flotar 9s ease-in-out infinite;
}
.pokebolas span:nth-child(1) { left: 6%;  top: 12%; }
.pokebolas span:nth-child(2) { left: 85%; top: 25%; animation-delay: -2s; width: 32px; height: 32px; }
.pokebolas span:nth-child(3) { left: 12%; top: 70%; animation-delay: -4s; }
.pokebolas span:nth-child(4) { left: 78%; top: 80%; animation-delay: -6s; width: 64px; height: 64px; }
.pokebolas span:nth-child(5) { left: 45%; top: 50%; animation-delay: -1s; width: 28px; height: 28px; }
.pokebolas span:nth-child(6) { left: 60%; top: 8%;  animation-delay: -5s; }
.hero, main, footer { position: relative; z-index: 1; }

@keyframes flotar { 50% { transform: translateY(-30px) rotate(180deg); } }
@keyframes tambalear { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes parpadeo { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .pokebolas span, .dialogo::after, .card:hover .poke img, .sol { animation: none; }
  html { scroll-behavior: auto; }
}
/* Animaciones de hover solo con mouse (en celular se "pegan" al tocar) */
@media (hover: none) {
  [data-modo="novio"] .card:hover, [data-modo="novio"] .card:nth-child(2):hover { transform: none; }
  .card:hover .poke img { animation: none; }
  .btn:hover { background: transparent; color: var(--accent); }
  :is([data-modo="novio"], [data-modo="novia"]) .btn:hover { background: var(--accent); color: #fff; }
}

/* ---------- Celulares ---------- */
@media (max-width: 600px) {
  body { font-size: 1.25rem; }
  [data-modo="novio"] body { font-size: 1.12rem; }
  /* Controles abajo, al alcance del pulgar y sin tapar el contenido de arriba */
  .modos { top: auto; right: auto; bottom: 16px; left: 16px; }
  .modos button { padding: 10px 11px; font-size: .9rem; }
  .musica { width: 48px; height: 48px; }
  /* Menú arriba centrado; los modos quedan abajo */
  .menu { left: 50%; transform: translateX(-50%); max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; }
  .menu a { padding: 6px 10px; font-size: .95rem; }
  main, footer { padding-bottom: 96px; }

  /* Sin alto de pantalla completa: evita el espacio vacío arriba y abajo */
  .hero { min-height: 0; padding: 56px 16px 40px; }
  .pre { font-size: 1.3rem; }
  .fecha { font-size: 1.3rem; letter-spacing: .04em; }
  .cuenta small { font-size: .95rem; }
  [data-modo="novio"] .fecha { font-size: .65rem; letter-spacing: 0; }
  .cuenta { gap: 8px; }
  .cuenta div { min-width: 64px; }
  .meme { font-size: 1.3rem; }

  h2 { font-size: 2.2rem; }
  main { gap: 20px; }
  .card { padding: 24px 16px; }
  .cuando { font-size: 1.3rem; }
  .dex { font-size: .65rem; }
  .poke img { width: 120px; height: 120px; }
  .btn { padding: 12px 28px; }
  .alias > div { min-width: 0; width: 100%; }
  footer { font-size: 1.7rem; }
}