:root {
  --ink: #f8f6ff;
  --muted: #c8c2db;
  --night: #09051b;
  --panel: rgba(22, 12, 53, .82);
  --pink: #ff4fc8;
  --cyan: #45e9ff;
  --yellow: #ffe359;
  --purple: #8d5cff;
  --danger: #ff7485;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--night);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
/* 1. ANIMACIÓN DE PARPADEO PARA LAS ESTRELLAS */
@keyframes starTwinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

body { 
  margin: 0; 
  min-height: 100vh; 
  overflow-x: hidden; 
  /* Degradado de fondo (cielo nocturno synthwave) */
  background: linear-gradient(180deg, #050212 0%, #11062b 50%, #20073e 100%);
  position: relative;
  isolation: isolate;
}

/* 2. ESTRELLAS QUE PARPADEAN */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  
  /* Generamos múltiples "puntos" blancos de diferentes tamaños usando radial-gradients */
  background-image: 
    radial-gradient(1px 1px at 10% 12%, rgba(255, 255, 255, 0.8) 100%, transparent),
    radial-gradient(1.5px 1.5px at 25% 35%, rgba(255, 255, 255, 0.9) 100%, transparent),
    radial-gradient(2px 2px at 45% 15%, rgba(255, 255, 255, 0.95) 100%, transparent),
    radial-gradient(1px 1px at 70% 28%, rgba(255, 255, 255, 0.7) 100%, transparent),
    radial-gradient(2px 2px at 85% 45%, rgba(255, 255, 255, 0.9) 100%, transparent),
    radial-gradient(1.5px 1.5px at 15% 65%, rgba(255, 255, 255, 0.8) 100%, transparent),
    radial-gradient(1px 1px at 55% 75%, rgba(255, 255, 255, 0.6) 100%, transparent),
    radial-gradient(2px 2px at 80% 85%, rgba(255, 255, 255, 0.85) 100%, transparent),
    radial-gradient(1.5px 1.5px at 90% 18%, rgba(255, 255, 255, 0.75) 100%, transparent),
    radial-gradient(1px 1px at 38% 58%, rgba(255, 255, 255, 0.8) 100%, transparent),
    radial-gradient(2px 2px at 65% 62%, rgba(255, 255, 255, 0.9) 100%, transparent);
    
  /* Hacemos que los puntos se repitan en todo el scroll */
  background-size: 550px 550px;
  
  /* Animación suave que hace "respirar" el brillo de las estrellas */
  animation: starTwinkle 4s infinite ease-in-out;
  will-change: opacity;
}

/* 3. CUADRÍCULA DE NEÓN (Se mantiene en la parte inferior sobre las estrellas) */
body::after {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60vh; /* Ocupa la mitad inferior */
  background-image: 
    linear-gradient(transparent 95%, rgba(255, 79, 200, 0.35) 100%), /* Líneas horizontales */
    linear-gradient(90deg, transparent 95%, rgba(69, 233, 255, 0.3) 100%); /* Líneas verticales */
  background-size: 50px 50px;
  transform: perspective(500px) rotateX(60deg) scale(2);
  transform-origin: bottom center;
  z-index: 0; /* Se sitúa encima de las estrellas, pero detrás del contenido */
  pointer-events: none;
}
header, main, footer { position: relative; z-index: 1; }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
.wrap { width: min(100% - 2rem, 68rem); margin-inline: auto; }
.ambient { position: fixed; width: 20rem; height: 20rem; border-radius: 999px; filter: blur(90px); opacity: .18; pointer-events: none; }
.ambient-one { top: 5rem; left: -8rem; background: var(--pink); }
.ambient-two { right: -10rem; top: 35rem; background: var(--cyan); }

.hero { min-height: 92vh; display: grid; place-content: center; justify-items: center; text-align: center; padding-block: 5rem; position: relative; }
.hero::before { content: ""; position: absolute; inset: 18% 5% auto; height: 20rem; background: linear-gradient(140deg, transparent 47%, rgba(69,233,255,.22) 48% 49%, transparent 50%), linear-gradient(35deg, transparent 47%, rgba(255,79,200,.18) 48% 49%, transparent 50%); z-index: -1; }
.eyebrow { margin: 0 0 .8rem; color: var(--cyan); font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
h1 { margin: 0; max-width: 12ch; font-size: clamp(3.5rem, 13vw, 8.5rem); line-height: .82; letter-spacing: -.07em; text-transform: uppercase; }
h1 span { display: block; font-family: "Brush Script MT", "Segoe Script", cursive; font-weight: 500; text-transform: none; color: var(--pink); text-shadow: 0 0 28px rgba(255,79,200,.45); transform: rotate(-4deg); }
h1 strong { color: var(--yellow); text-shadow: .06em .05em 0 var(--pink), .1em .09em 0 var(--cyan); }
.lead { max-width: 33rem; color: var(--muted); font-size: clamp(1.05rem, 3vw, 1.3rem); }
.date-card { margin: 1.4rem 0 2rem; padding: 1rem 1.35rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: center; align-items: baseline; border: 1px solid rgba(255,255,255,.2); border-radius: 1.2rem; background: rgba(9,5,27,.65); box-shadow: inset 0 0 0 1px rgba(69,233,255,.1), 0 18px 50px rgba(0,0,0,.3); text-transform: uppercase; letter-spacing: .08em; }
.date-card strong { color: var(--yellow); font-size: 2.3rem; }
.primary-button { display: inline-flex; justify-content: center; align-items: center; min-height: 3.3rem; padding: .8rem 1.4rem; border: 0; border-radius: 999px; background: linear-gradient(135deg, var(--pink), #b241ff); color: white; font-weight: 900; text-decoration: none; cursor: pointer; box-shadow: 0 12px 30px rgba(255,79,200,.26); }
.primary-button:hover { transform: translateY(-2px); }
.music-button { position: absolute; right: 0; top: 1.4rem; z-index: 2; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; padding: .55rem .9rem; color: var(--ink); background: rgba(9,5,27,.82); cursor: pointer; transition: transform .2s ease, border-color .2s ease, color .2s ease; }
.music-button:hover, .music-button:focus-visible { transform: translateY(-2px); border-color: var(--pink); color: var(--pink); outline: none; }
.music-button[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); }

.details { display: grid; gap: 1.2rem; grid-template-columns: 1.15fr .85fr; align-items: stretch; padding-block: 5rem; }
.details > div { padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid rgba(255,255,255,.13); border-radius: 1.6rem; background: var(--panel); }
h2 { margin: .1rem 0 1rem; font-size: clamp(2rem, 7vw, 4rem); line-height: 1; }
.details p { color: var(--muted); line-height: 1.7; }
.text-link { color: var(--cyan); font-weight: 800; text-underline-offset: .25rem; }
.dress-card { display: grid; place-content: center; text-align: center; background: linear-gradient(145deg, rgba(255,79,200,.18), rgba(69,233,255,.08)) !important; }
.dress-card .cassette { color: var(--yellow); font-size: 2.5rem; letter-spacing: .15em; }
.dress-card p { margin-bottom: .2rem; text-transform: uppercase; letter-spacing: .1em; }
.dress-card strong { font-size: clamp(2.5rem, 8vw, 4.8rem); color: var(--pink); text-shadow: .05em .05em 0 var(--cyan); }

.countdown-section { padding-block: 4rem; background: rgba(255,255,255,.035); border-block: 1px solid rgba(255,255,255,.08); }
.countdown-section .wrap { text-align: center; }
.countdown { display: flex; justify-content: center; gap: clamp(1rem, 6vw, 4rem); }
.countdown div { display: grid; gap: .25rem; }
.countdown strong { font-size: clamp(2.8rem, 10vw, 6rem); color: var(--yellow); line-height: 1; }
.countdown span { color: var(--muted); text-transform: uppercase; font-size: .7rem; letter-spacing: .15em; }

.rsvp { padding-block: 5rem 7rem; max-width: 44rem; }
.invite-status { margin-bottom: 1.5rem; text-align: center; }
/* 1. Definir la animación del parpadeo/latido */
@keyframes neonPulse {
  0% {
    box-shadow: 0 0 10px rgba(229, 255, 0, 0.4), 0 0 20px rgba(0, 255, 255, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 255, 0, 0.8), 0 0 40px rgba(0, 255, 255, 0.4);
    transform: scale(1.05); /* Crece un 5% */
  }
  100% {
    box-shadow: 0 0 10px rgba(255, 247, 0, 0.4), 0 0 20px rgba(0, 255, 255, 0.2);
    transform: scale(1);
  }
}

/* 2. Actualizar la clase .pass para usar la animación */
.invite-status .pass { 
    display: inline-block; 
    margin-top: 1rem; 
    padding: 0.8rem 1.5rem; 
    font-size: 2.25rem; 
    background-color: rgba(0, 255, 255, 0.1); 
    border: 2px solid red; 
    border-radius: 1rem; 
    color: yellow; 
    font-weight: 900; 
    text-transform: uppercase; 
    letter-spacing: .15em; 
    
    /* Agregamos la animación aquí: dura 1.5 segundos, es infinita y tiene una curva suave */
    animation: neonPulse 1.5s infinite ease-in-out;
}
form { display: grid; gap: 1.25rem; padding: clamp(1.25rem, 5vw, 2.5rem); border: 1px solid rgba(255,255,255,.13); border-radius: 1.6rem; background: var(--panel); }
label, legend { color: var(--ink); font-weight: 750; }
input, select, textarea { width: 100%; margin-top: .55rem; padding: .9rem 1rem; border: 1px solid rgba(255,255,255,.2); border-radius: .8rem; color: white; background: rgba(4,2,15,.66); outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(69,233,255,.14); }
fieldset { display: grid; gap: .65rem; border: 0; padding: 0; margin: 0; }
.choice { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; border: 1px solid rgba(255,255,255,.13); border-radius: .8rem; cursor: pointer; }
.choice input { width: auto; margin: 0; accent-color: var(--pink); }
.optional { color: var(--muted); font-weight: 400; }
.assigned-seats { margin: 0; padding: .9rem 1rem; border: 1px solid rgba(69,233,255,.28); border-radius: .8rem; color: var(--cyan); background: rgba(69,233,255,.06); line-height: 1.45; }
.confirmation-question { margin: .35rem 0 0; text-align: center; color: var(--ink); font-size: clamp(1.35rem, 5vw, 2rem); font-weight: 900; }
.confirmation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.confirmation-actions button { width: 100%; }
.form-message { min-height: 1.5rem; margin: 0; text-align: center; color: var(--cyan); }
.error { color: var(--danger) !important; }
footer { padding: 2rem; text-align: center; color: var(--muted); border-top: 1px solid rgba(255,255,255,.08); }

/* Admin */
.admin-body { background: #0b0718; }
.admin-shell { width: min(100% - 2rem, 78rem); margin: 0 auto; padding-block: 2rem 5rem; }
.admin-header { display: flex; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.admin-header h1 { max-width: none; font-size: clamp(2rem, 7vw, 4rem); text-transform: none; letter-spacing: -.04em; }
.admin-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.secondary-button, .danger-button { border: 1px solid rgba(255,255,255,.2); border-radius: .7rem; padding: .7rem 1rem; background: rgba(255,255,255,.06); color: white; text-decoration: none; cursor: pointer; }
.danger-button { color: #ff9aa6; }
.summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.stat { padding: 1.2rem; border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; background: rgba(255,255,255,.045); }
.stat strong { display: block; color: var(--yellow); font-size: 2.3rem; }
.stat span { color: var(--muted); font-size: .82rem; }
.admin-form { display: grid; grid-template-columns: 2fr .65fr 2fr auto; gap: .8rem; align-items: end; margin-bottom: 1.5rem; }
.table-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; }
table { width: 100%; border-collapse: collapse; min-width: 58rem; background: rgba(255,255,255,.03); }
th, td { padding: .85rem; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; vertical-align: top; }
th { color: var(--cyan); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
td { color: #e8e3f5; }
.status-pill { display: inline-block; padding: .25rem .55rem; border-radius: 999px; background: rgba(255,255,255,.08); font-size: .78rem; white-space: nowrap; }
.status-pill.yes { color: #78f0b0; background: rgba(45,196,118,.1); }
.status-pill.no { color: #ff9aa6; background: rgba(255,116,133,.1); }
.row-actions { display: flex; gap: .45rem; }
.row-actions button { padding: .35rem .55rem; font-size: .78rem; }
.token-gate { width: min(100% - 2rem, 28rem); margin: 15vh auto; padding: 2rem; border: 1px solid rgba(255,255,255,.13); border-radius: 1.3rem; background: var(--panel); text-align: center; }

@media (max-width: 760px) {
  .details { grid-template-columns: 1fr; }
  .summary { grid-template-columns: 1fr 1fr; }
  .admin-form { grid-template-columns: 1fr; }
  .admin-header { align-items: flex-start; flex-direction: column; }
  .music-button { position: fixed; top: .75rem; right: .75rem; padding: .65rem .8rem; font-size: .84rem; box-shadow: 0 8px 24px rgba(0,0,0,.28); }
  .confirmation-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}