/* =========================================================
   Congreso Móvil · Congreso Nacional de Honduras
   Página pública de registro
   ========================================================= */

:root {
  --azul-950: #030d29;
  --azul-900: #061a4a;
  --azul-800: #0a2463;
  --azul-700: #11307f;
  --azul-600: #1a4fd1;
  --azul-500: #2f6bff;
  --azul-300: #8bb8ff;
  --azul-100: #e3edff;
  --azul-50: #f4f8ff;
  --oro-700: #8f6812;
  --oro-600: #b8871b;
  --oro-500: #d4a62a;
  --oro-400: #e9c25b;
  --oro-200: #f8e6a8;
  --tinta: #0b1b3f;
  --tenue: #5a6a8a;
  --linea: #d9e3f3;
  --rojo: #d93843;
  --verde: #15a35a;
  --grad-oro: linear-gradient(135deg, #f8e6a8 0%, #e9c25b 30%, #c9971f 62%, #f2d685 100%);
  --grad-azul: linear-gradient(135deg, #11307f 0%, #0a2463 50%, #061a4a 100%);
  --sombra: 0 34px 80px -30px rgba(2, 10, 40, .7);
  --f-titulo: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-serif: 'Cinzel', Georgia, 'Times New Roman', serif;
  --suave: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-texto);
  color: var(--tinta);
  background: var(--azul-950);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
.ico { width: 1.15em; height: 1.15em; flex: none; }
[hidden] { display: none !important; }

/* ---------- Portada ---------- */
.portada {
  position: relative;
  overflow: hidden;
  overflow: clip; /* recorta sin romper position: sticky */
  color: #fff;
  padding-bottom: 120px;
  background:
    radial-gradient(1100px 650px at 12% -12%, rgba(47, 107, 255, .55), transparent 60%),
    radial-gradient(900px 620px at 108% 18%, rgba(26, 79, 209, .5), transparent 60%),
    linear-gradient(180deg, #0a2463 0%, #061a4a 55%, #04123a 100%);
}
.portada::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cpath d='M45 33l2.9 8.9h9.4l-7.6 5.5 2.9 8.9-7.6-5.5-7.6 5.5 2.9-8.9-7.6-5.5h9.4z' fill='%23fff'/%3E%3C/svg%3E");
}
.fondo { position: absolute; inset: 0; pointer-events: none; }
.orbe {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: flotar 18s ease-in-out infinite;
}
.orbe-1 { width: 540px; height: 540px; background: #2f6bff; opacity: .45; top: -200px; left: -160px; }
.orbe-2 { width: 440px; height: 440px; background: #d4a62a; opacity: .16; bottom: 80px; right: -160px; animation-delay: -6s; }
.orbe-3 { width: 380px; height: 380px; background: #12a8ff; opacity: .2; top: 38%; left: 36%; animation-delay: -11s; }
@keyframes flotar {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(50px, -40px) scale(1.08); }
  66% { transform: translate(-40px, 30px) scale(.94); }
}

/* ---------- Barra superior ---------- */
.barra {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.marca { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.marca img {
  width: 52px; height: 52px; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(233, 194, 91, .7), 0 10px 24px rgba(0, 0, 0, .4);
}
.marca small {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro-200);
}
.marca strong { font-family: var(--f-serif); font-size: 1.18rem; letter-spacing: .06em; }
.chip-estado {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid rgba(233, 194, 91, .4);
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(8px);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #e8efff;
  white-space: nowrap;
}
.chip-estado i {
  width: 8px; height: 8px; border-radius: 50%;
  background: #35d07f;
  box-shadow: 0 0 0 0 rgba(53, 208, 127, .6);
  animation: latido 2s infinite;
}
.chip-estado.cerrado i { background: #ff6b6b; animation: none; }
@keyframes latido {
  0% { box-shadow: 0 0 0 0 rgba(53, 208, 127, .6); }
  70% { box-shadow: 0 0 0 10px rgba(53, 208, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.hero-invitacion { position: sticky; top: 28px; }
.hero-invitacion::before {
  content: "";
  position: absolute;
  inset: 6% -6% -4%;
  background: radial-gradient(closest-side, rgba(233, 194, 91, .35), transparent);
  filter: blur(34px);
  z-index: -1;
}
.tarjeta-invitacion {
  --rx: 0deg;
  --ry: 6deg;
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 44px 90px -30px rgba(0, 0, 0, .8);
  transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .6s var(--suave);
}
.tarjeta-invitacion.siguiendo { transition: transform .12s linear; }
.tarjeta-invitacion::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 2px;
  background: var(--grad-oro);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.tarjeta-invitacion img { width: 100%; height: auto; }
.tarjeta-invitacion:focus-visible { outline: 3px solid var(--oro-400); outline-offset: 4px; }
.brillo {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .32) 45%, transparent 60%);
  transform: translateX(-120%);
  animation: brillar 7s ease-in-out 1.6s infinite;
  pointer-events: none;
}
@keyframes brillar {
  0% { transform: translateX(-120%); }
  30%, 100% { transform: translateX(120%); }
}
.ver-completa {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(6, 26, 74, .78);
  backdrop-filter: blur(8px);
  color: #fff;
  font-weight: 600;
  font-size: .85rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s, transform .3s;
}
.tarjeta-invitacion:hover .ver-completa,
.tarjeta-invitacion:focus-visible .ver-completa { opacity: 1; transform: none; }
@media (hover: none) {
  .ver-completa { top: 12px; right: 12px; bottom: auto; padding: 8px 12px; font-size: .78rem; opacity: 1; transform: none; }
}

/* ---------- Tarjeta de registro ---------- */
#registro { scroll-margin-top: 16px; }
.tarjeta-registro {
  position: relative;
  background: #fff;
  color: var(--tinta);
  border-radius: 28px;
  box-shadow: var(--sombra);
  overflow: hidden;
  transition: background .4s;
}
.tarjeta-registro.completado { background: var(--azul-50); }

.registro-cabecera {
  position: relative;
  padding: 34px 32px 30px;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background: radial-gradient(130% 150% at 50% 0%, #1f5ae0 0%, #0a2463 55%, #061a4a 100%);
}
.registro-cabecera::before {
  content: "";
  position: absolute;
  inset: auto -20% -60% -20%;
  height: 120%;
  background: radial-gradient(closest-side, rgba(90, 160, 255, .35), transparent);
  pointer-events: none;
}
.registro-cabecera::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--grad-oro);
}
.pildora-oro {
  position: relative;
  display: inline-block;
  padding: 7px 24px 7px 28px;
  border-radius: 999px;
  background: var(--grad-oro);
  color: #1b1503;
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px -6px rgba(212, 166, 42, .6), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.titulo {
  position: relative;
  margin: 16px 0 10px;
  font-family: var(--f-titulo);
  font-weight: 900;
  font-size: clamp(2rem, 4.3vw, 3rem);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-shadow: 0 6px 22px rgba(0, 0, 0, .35);
}
.titulo span {
  background: linear-gradient(180deg, #ffffff 35%, #f2d685 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.subtitulo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #d4e3ff;
}
.subtitulo i { height: 2px; flex: 0 0 36px; background: linear-gradient(90deg, transparent, #5aa0ff); }
.subtitulo i:last-child { transform: scaleX(-1); }

.registro-cuerpo { padding: 26px 32px 30px; }
.lead { margin: 0 0 20px; text-align: center; color: var(--tenue); font-size: .97rem; }

.datos-evento { display: grid; gap: 10px; margin-bottom: 16px; }
.dato {
  display: flex;
  align-items: stretch;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(90deg, #fff8e3, #f8e6a8);
  box-shadow: inset 0 0 0 1px rgba(212, 166, 42, .35);
}
.dato-ico {
  display: grid;
  place-items: center;
  width: 62px;
  flex: none;
  padding-right: 8px;
  color: #fff;
  background: var(--grad-azul);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
}
.dato-ico .ico { width: 22px; height: 22px; }
.dato-txt { padding: 9px 14px 9px 4px; }
.dato small {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--azul-600);
}
.dato b { display: block; font-family: var(--f-titulo); font-weight: 800; font-size: 1rem; line-height: 1.25; color: var(--azul-900); }

/* Cuenta regresiva (por días) */
.cuenta {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin: 0 0 22px;
  padding: 10px;
  border-radius: 16px;
  background: var(--azul-50);
  border: 1px solid var(--linea);
}
.cuenta-dias {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  border-radius: 12px;
  text-align: center;
  color: #fff;
  background: var(--grad-azul);
  box-shadow: 0 12px 22px -12px rgba(6, 26, 74, .9);
}
.cuenta-dias::after {
  content: "";
  position: absolute;
  right: -30px; top: -30px;
  width: 90px; height: 90px;
  border-radius: 50%;
  border: 2px solid rgba(233, 194, 91, .3);
}
.cuenta-dias small { font-size: .64rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--oro-400); }
.cuenta-dias b {
  margin: 2px 0;
  font-family: var(--f-titulo);
  font-weight: 900;
  font-size: 2.7rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  animation: tic .6s var(--suave);
}
.cuenta-dias b.texto { margin: 6px 0; font-size: 1.45rem; }
.cuenta-dias span { font-size: .8rem; font-weight: 700; color: #d4e3ff; }
@keyframes tic { from { transform: translateY(-8px); opacity: .2; } to { transform: none; opacity: 1; } }
.cuenta-fechas { display: flex; gap: 8px; }
.hoja-cal {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 70px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--linea);
  background: #fff;
  box-shadow: 0 10px 20px -14px rgba(6, 26, 74, .55);
  transition: box-shadow .3s, border-color .3s;
}
.hoja-cal span {
  align-self: stretch;
  padding: 4px 0;
  text-align: center;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #1d1603;
  background: var(--grad-oro);
}
.hoja-cal b { margin-top: 8px; font-family: var(--f-titulo); font-weight: 900; font-size: 1.9rem; line-height: 1; color: var(--azul-900); }
.hoja-cal small { margin: 3px 0 9px; font-size: .68rem; font-weight: 600; color: var(--tenue); }
.hoja-cal.hoy { border-color: var(--oro-500); box-shadow: 0 0 0 3px rgba(233, 194, 91, .4); }

/* Formulario */
.formulario { display: grid; gap: 14px; }
.campo { position: relative; }
.campo input {
  width: 100%;
  height: 60px;
  padding: 22px 46px 6px 50px;
  border: 1.5px solid var(--linea);
  border-radius: 14px;
  background: #f8fbff;
  color: var(--tinta);
  font: 600 1.02rem var(--f-texto);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.campo label {
  position: absolute;
  left: 50px;
  top: 30px;
  transform: translateY(-50%);
  font-size: 1rem;
  color: #7d8bab;
  pointer-events: none;
  transition: top .18s ease, font-size .18s ease, color .18s ease, letter-spacing .18s ease;
}
.campo input:focus { border-color: var(--azul-500); background: #fff; box-shadow: 0 0 0 4px rgba(47, 107, 255, .14); }
.campo input:focus + label,
.campo input:not(:placeholder-shown) + label {
  top: 17px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--azul-600);
}
.campo-ico {
  position: absolute;
  left: 17px;
  top: 30px;
  transform: translateY(-50%);
  display: flex;
  color: #8a9aba;
  pointer-events: none;
  transition: color .2s;
}
.campo:focus-within .campo-ico { color: var(--azul-500); }
.marca-ok {
  position: absolute;
  right: 16px;
  top: 30px;
  display: flex;
  color: var(--verde);
  opacity: 0;
  transform: translateY(-50%) scale(.4);
  transition: opacity .25s, transform .3s var(--suave);
  pointer-events: none;
}
.campo.valido input { border-color: #8fd8b0; }
.campo.valido .marca-ok { opacity: 1; transform: translateY(-50%) scale(1); }
.campo.invalido input { border-color: var(--rojo); background: #fff7f7; box-shadow: 0 0 0 4px rgba(217, 56, 67, .1); }
.campo.invalido .campo-ico { color: var(--rojo); }
.campo-error { display: block; margin: 6px 4px 0; font-size: .8rem; font-weight: 600; color: var(--rojo); }
.campo-error:empty { display: none; }

.campo-tel input { padding-left: 116px; letter-spacing: .06em; }
.campo-tel label { left: 116px; }
.prefijo {
  position: absolute;
  left: 11px;
  top: 30px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--linea);
  font-size: .88rem;
  font-weight: 700;
  color: var(--azul-800);
  pointer-events: none;
}
.prefijo svg { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }

.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sacudir { animation: sacudir .42s; }
@keyframes sacudir {
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}

.alerta {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #ffd0d4;
  background: #fff1f2;
  color: #9f1d27;
  font-size: .9rem;
  font-weight: 500;
}
.formulario .alerta { margin-bottom: 0; }
.alerta .ico { margin-top: 2px; }
.alerta-ok { border-color: #bfe9d0; background: #ecfaf2; color: #0f6b3b; }

/* Botones */
.boton-oro {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 60px;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  color: #1d1603;
  background: var(--grad-oro);
  background-size: 200% 200%;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 16px 30px -12px rgba(184, 135, 27, .8), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(0, 0, 0, .08);
  transition: transform .2s, box-shadow .2s, background-position .6s;
}
.boton-oro:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 22px 36px -14px rgba(184, 135, 27, .9), inset 0 1px 0 rgba(255, 255, 255, .6); }
.boton-oro:active { transform: translateY(0); }
.boton-oro:focus-visible { outline: 3px solid var(--azul-500); outline-offset: 3px; }
.boton-oro::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -90px;
  width: 60px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: skewX(-20deg);
  animation: destello 3.4s ease-in-out infinite;
}
@keyframes destello { 0% { left: -90px; } 55%, 100% { left: calc(100% + 90px); } }
.boton-oro .ico { transition: transform .2s; }
.boton-oro:hover .ico { transform: translateX(4px); }
.boton-oro .giro {
  position: absolute;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 3px solid rgba(29, 22, 3, .2);
  border-top-color: #1d1603;
  opacity: 0;
  animation: girar .8s linear infinite;
}
.boton-oro.cargando { pointer-events: none; }
.boton-oro.cargando .boton-texto, .boton-oro.cargando > .ico { opacity: 0; }
.boton-oro.cargando .giro { opacity: 1; }
@keyframes girar { to { transform: rotate(360deg); } }
.boton-oro.pequeno { height: 50px; font-size: .78rem; letter-spacing: .04em; }
.boton-oro.pequeno:hover .ico { transform: none; }

.boton-azul {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: var(--grad-azul);
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 14px 26px -14px rgba(6, 26, 74, .9);
  transition: transform .2s;
}
.boton-azul:hover { transform: translateY(-2px); }

.privacidad {
  margin: 2px 0 0;
  text-align: center;
  font-size: .8rem;
  color: var(--tenue);
}
.privacidad .ico { margin-right: 4px; vertical-align: -3px; color: var(--verde); }

.cerrado-aviso {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border-radius: 14px;
  background: var(--azul-50);
  border: 1px solid var(--linea);
  color: var(--azul-800);
}
.cerrado-aviso .ico { width: 28px; height: 28px; color: var(--oro-600); }
.cerrado-aviso p { margin: 0; }

/* ---------- Éxito / pase ---------- */
.exito { padding: 32px 28px 26px; text-align: center; outline: none; animation: aparecer .6s var(--suave); }
@keyframes aparecer { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.check-animado { width: 76px; height: 76px; margin: 0 auto 10px; display: block; }
.check-animado circle { fill: #e6f8ee; stroke: var(--verde); stroke-width: 3; stroke-dasharray: 160; stroke-dashoffset: 160; animation: trazo .7s ease forwards; }
.check-animado path { fill: none; stroke: var(--verde); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: trazo .4s .55s ease forwards; }
@keyframes trazo { to { stroke-dashoffset: 0; } }
.exito-titulo { margin: 0 0 6px; font-family: var(--f-titulo); font-weight: 900; font-size: 1.6rem; color: var(--azul-900); }
.exito-texto { margin: 0 0 20px; color: var(--tenue); }

.pase {
  position: relative;
  overflow: hidden;
  text-align: left;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--linea);
  box-shadow: 0 22px 50px -24px rgba(6, 26, 74, .5);
}
.pase-cabecera {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  color: #fff;
  background: radial-gradient(140% 170% at 0 0, #1f5ae0, #0a2463 60%, #061a4a);
}
.pase-cabecera::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad-oro); }
.pase-cabecera img { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(233, 194, 91, .75); }
.pase-cabecera small { display: block; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--oro-200); }
.pase-cabecera strong { font-family: var(--f-titulo); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.pase-folio {
  margin-left: auto;
  padding: 6px 11px;
  border-radius: 10px;
  color: #1d1603;
  background: var(--grad-oro);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace;
  font-weight: 800;
  font-size: .92rem;
  white-space: nowrap;
}
.pase-cuerpo { padding: 18px 20px 16px; }
.pase-cuerpo small { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.pase-nombre { margin: 2px 0 14px; font-family: var(--f-titulo); font-weight: 800; font-size: 1.35rem; line-height: 1.2; color: var(--azul-900); word-break: break-word; }
.pase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pase-grid .ancho { grid-column: 1 / -1; }
.pase-grid b { font-size: .95rem; color: var(--tinta); }
.pase-pie {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 20px;
  border-top: 2px dashed var(--linea);
  font-size: .8rem;
  color: var(--tenue);
}
.pase-pie::before, .pase-pie::after {
  content: "";
  position: absolute;
  top: -11px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--azul-50);
}
.pase-pie::before { left: -11px; }
.pase-pie::after { right: -11px; }
.estrellas { color: var(--oro-500); letter-spacing: .18em; }

.exito-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.enlace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--azul-600);
  font-weight: 700;
}
.enlace:hover { background: var(--azul-100); }

/* ---------- Ola ---------- */
.ola { position: absolute; left: 0; right: 0; bottom: -1px; height: 110px; z-index: 1; pointer-events: none; }
.ola svg { display: block; width: 100%; height: 100%; }

/* ---------- Sección clara ---------- */
.seccion-clara { position: relative; padding: 36px 0 84px; background: var(--azul-50); }
.contenedor { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.encabezado-seccion { max-width: 680px; margin: 0 auto 40px; text-align: center; }
.etiqueta { font-family: var(--f-serif); font-weight: 700; font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; color: var(--oro-600); }
.encabezado-seccion h2 { margin: 10px 0 10px; font-family: var(--f-titulo); font-weight: 900; font-size: clamp(1.6rem, 3.2vw, 2.35rem); line-height: 1.15; color: var(--azul-900); }
.encabezado-seccion p { margin: 0; color: var(--tenue); font-size: 1.02rem; }

.grid-beneficios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.beneficio {
  position: relative;
  overflow: hidden;
  padding: 30px 26px 28px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--linea);
  box-shadow: 0 18px 40px -28px rgba(6, 26, 74, .45);
  transition: transform .35s var(--suave), box-shadow .35s, opacity .8s var(--suave);
}
.beneficio::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--grad-oro);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .4s var(--suave);
}
.beneficio:hover { box-shadow: 0 30px 54px -28px rgba(6, 26, 74, .55); }
.js .beneficio.revelar.visto:hover { transform: translateY(-6px); }
.beneficio:hover::before { transform: scaleY(1); }
.beneficio .numero { position: absolute; right: 22px; top: 16px; font-family: var(--f-titulo); font-weight: 900; font-size: 3.2rem; line-height: 1; color: var(--azul-100); }
.beneficio-ico {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  margin-bottom: 18px;
  border-radius: 16px;
  color: var(--oro-400);
  background: var(--grad-azul);
  box-shadow: 0 14px 26px -14px rgba(6, 26, 74, .9);
}
.beneficio-ico .ico { width: 26px; height: 26px; }
.beneficio h3 { margin: 0 0 8px; font-family: var(--f-titulo); font-weight: 800; font-size: 1.15rem; color: var(--azul-900); }
.beneficio p { margin: 0; color: var(--tenue); font-size: .95rem; }

.ubicacion {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 28px;
  padding: 28px 30px;
  border-radius: 24px;
  color: #fff;
  background: var(--grad-azul);
  box-shadow: var(--sombra);
}
.ubicacion::after {
  content: "";
  position: absolute;
  right: -70px; top: -70px;
  width: 240px; height: 240px;
  border-radius: 50%;
  border: 2px solid rgba(233, 194, 91, .3);
  box-shadow: 0 0 0 30px rgba(233, 194, 91, .05);
}
.ubicacion-info { display: flex; align-items: center; gap: 18px; }
.ubicacion-ico {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  flex: none;
  border-radius: 50%;
  color: var(--azul-900);
  background: var(--grad-oro);
  box-shadow: 0 0 0 7px rgba(233, 194, 91, .16);
}
.ubicacion-ico .ico { width: 26px; height: 26px; }
.ubicacion small { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--oro-200); }
.ubicacion h3 { margin: 2px 0; font-family: var(--f-titulo); font-weight: 800; font-size: 1.3rem; }
.ubicacion p { margin: 0; color: #c9d8f5; font-size: .92rem; }
.ubicacion-acciones { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.boton-borde {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1.5px solid rgba(233, 194, 91, .6);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  transition: background .25s, color .25s, border-color .25s;
}
.boton-borde:hover { background: var(--grad-oro); color: var(--azul-900); border-color: transparent; }

/* ---------- Pie ---------- */
.pie { padding: 28px 24px calc(28px + env(safe-area-inset-bottom)); background: var(--azul-950); color: #9fb3d9; text-align: center; position: relative; }
.pie::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-oro); }
.pie-contenido { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; font-size: .88rem; }
.pie-contenido p { margin: 0; text-align: left; }
.pie img { width: 42px; height: 42px; border-radius: 50%; }
.pie strong { color: #fff; }

/* ---------- Botón flotante (móvil) ---------- */
.flotante {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 50;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  color: #1d1603;
  background: var(--grad-oro);
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .65), 0 0 0 4px rgba(233, 194, 91, .25);
  transform: translate(-50%, 160%);
  transition: transform .4s var(--suave);
}
.flotante.visible { transform: translate(-50%, 0); }

/* ---------- Visor de la invitación ---------- */
.visor {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 64px 16px 24px;
  background: rgba(3, 13, 41, .93);
  backdrop-filter: blur(8px);
  animation: aparecer .25s ease;
}
.visor img { max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); width: auto; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.visor-cerrar {
  position: absolute;
  top: 14px; right: 14px;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .12);
}
.visor-cerrar:hover { background: rgba(255, 255, 255, .22); }
.visor-descargar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  color: #1d1603;
  background: var(--grad-oro);
  font-weight: 700;
  text-decoration: none;
}

.confeti { position: fixed; inset: 0; z-index: 120; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Animación de entrada ---------- */
.js .revelar { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--suave), transform .8s var(--suave); }
.js .revelar.visto { opacity: 1; transform: none; }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 30px; padding-top: 4px; }
  .hero-invitacion, .hero-registro { width: 100%; max-width: 560px; margin: 0 auto; }
  .hero-invitacion { position: relative; top: 0; }
  .tarjeta-invitacion { --ry: 0deg; }
  .grid-beneficios { grid-template-columns: 1fr; }
  .flotante { display: inline-flex; }
  .pie { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  .barra { padding: 16px; }
  .marca img { width: 44px; height: 44px; }
  .marca strong { font-size: 1rem; }
  .chip-estado { padding: 7px 11px; font-size: .72rem; }
  .hero { padding: 0 16px 24px; }
  .portada { padding-bottom: 96px; }
  .registro-cabecera { padding: 28px 18px 24px; }
  .registro-cuerpo { padding: 22px 18px 24px; }
  .subtitulo { font-size: .66rem; letter-spacing: .22em; }
  .subtitulo i { flex-basis: 20px; }
  .cuenta { padding: 8px; gap: 8px; }
  .cuenta-dias b { font-size: 2.3rem; }
  .cuenta-fechas { gap: 6px; }
  .hoja-cal { width: 62px; }
  .hoja-cal b { font-size: 1.6rem; }
  .formulario .boton-oro { font-size: .9rem; letter-spacing: .05em; }
  .exito { padding: 26px 16px 22px; }
  .exito-acciones { grid-template-columns: 1fr; }
  .pase-cabecera { padding: 14px; }
  .pase-cuerpo { padding: 16px; }
  .pase-pie { padding: 12px 16px; }
  .contenedor { padding: 0 16px; }
  .ubicacion { padding: 24px 20px; }
  .ubicacion-acciones, .boton-borde { width: 100%; }
  .boton-borde { justify-content: center; }
  .ola { height: 70px; }
}
@media (max-width: 380px) {
  .marca small { display: none; }
  .campo-tel input { padding-left: 104px; }
  .campo-tel label { left: 104px; }
  .prefijo { padding: 6px 8px; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .js .revelar { opacity: 1; transform: none; }
}