/**
 * style.css — EXPO HFTP Los Cabos 2026
 * Identidad visual del material oficial (navy + tricolor cyan/naranja/verde,
 * tipografía redondeada, formas geométricas, fotografía real) llevada a una
 * navegación propia: riel lateral de formas, cortes diagonales entre
 * secciones y un hero editorial. Sin información de stands ni membresías.
 *
 * Secciones:
 *  00. Fuentes (ver fonts.css)
 *  01. Variables & Reset
 *  02. Layout & Utilidades
 *  03. Navbar
 *  04. Riel de navegación (shapes)
 *  05. Botones
 *  06. Hero editorial
 *  07. Costuras diagonales
 *  08. Sede (banda de foto angulada)
 *  09. Audiencia (lista editorial)
 *  10. Conferencias (track horizontal)
 *  11. Patrocinadores (tabla de precios)
 *  12. CTA registro
 *  13. Footer
 *  14. Formularios
 *  15. Tarjeta de confirmación / QR
 *  16. Admin — login
 *  17. Admin — dashboard
 *  18. Check-in / escáner
 *  19. Toast
 */

/* ═══════════════════════════════════════════════════════════════════════
   00. Fuentes — incrustadas en fonts.css (se carga antes que este archivo)
═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   01. Variables & Reset
═══════════════════════════════════════════════════════════════════════ */

:root {
  --navy:    #14163F;
  --navy-2:  #1B1E52;
  --navy-3:  #222663;
  --paper:   #F5F6FB;
  --sage:    #D3E9B4;
  --sage-d:  #B7CE95;

  --cyan:    #00AEEF;
  --cyan-d:  #0090C8;
  --cyan-dd: #006C94;   /* texto cyan sobre fondos cyan claros (AA) */
  --cyan-l:  #E6F7FD;
  --orange:  #F47920;          /* acento de marca (sobre navy, decoración) */
  --orange-btn:  #B0540F;      /* fondo de botón con texto blanco — AA 5.1:1 */
  --orange-btn-h: #984710;     /* hover del botón — AA 6.5:1 */
  --orange-l: #FEF3EC;
  --green:   #8DC63F;
  --green-l: #F2F8E8;
  --violet:  #5B3A8F;
  --red:     #E8524A;

  --white: #FFFFFF;

  --text:      #FFFFFF;
  --text-dim:  rgba(255,255,255,.78);
  --text-mute: rgba(255,255,255,.64);   /* ≥4.5:1 sobre navy — antes .48 fallaba AA */
  --surface:   rgba(255,255,255,.07);
  --border:    rgba(255,255,255,.16);
  --border-soft: rgba(255,255,255,.09);

  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px; --r-full: 9999px;

  /* Elevación neutra: casi negra, offset claro, blur contenido
     (borde + sombra ancha a la vez es un tell — se elige una). */
  --shadow-md: 0 6px 16px rgba(10,11,22,.13);
  --shadow-lg: 0 14px 30px rgba(10,11,22,.18);

  --container: 1180px;
  --font-head: "Baloo 2", "Poppins", system-ui, sans-serif;
  --font-body: "Poppins", system-ui, sans-serif;

  /* Curvas de easing fuertes (las nativas de CSS son débiles) */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease: .18s var(--ease-out);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-body);
  background: var(--navy);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* Superficies del navegador tematizadas desde la paleta */
::selection { background: rgba(0,174,239,.30); color: #fff; }
.section-alt ::selection, .glass ::selection { background: rgba(0,144,200,.22); color: #171A3D; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 3px;
}

.glass {
  background: var(--white);
  /* Sin propiedad `border`: la separación la da la sombra. Dos capas — elevación
     + una línea de contacto de 1px — para que la tarjeta blanca se lea también
     sobre el paper claro, sin caer en el tell "borde 1px + sombra difusa". */
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(20,22,63,.055);
  --text: #171A3D;
  --text-dim: #4C5178;
  --text-mute: #646A8E;   /* AA en blanco y en paper — antes #8B90B4 fallaba */
  --surface: #F5F6FB;
  --border: #E7E9F5;
  --border-soft: #EFF1FA;
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════
   02. Layout & Utilidades
═══════════════════════════════════════════════════════════════════════ */

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
@media (max-width: 768px) { .container { padding-inline: 18px; } }

.section     { padding-block: clamp(64px, 10svh, 108px); position: relative; overflow-x: clip; }  /* las formas decorativas no deben crear scroll horizontal */
.section-alt { background: var(--paper); }
.section-alt + .section-alt { padding-top: 0; box-shadow: 0 -2px 0 var(--paper); }
.section-alt { --text: #171A3D; --text-dim: #4C5178; --text-mute: #646A8E; }
.section-navy { background: var(--navy); }

.section-header { max-width: 640px; margin: 0 0 clamp(28px, 4.5svh, 48px); }
/* Al saltar a una sección (riel lateral o menú), que no quede debajo de la barra fija */
section[id] { scroll-margin-top: 64px; }
.section-header.center { margin-inline: auto; text-align: center; }

.section-title.about-title { max-width: 22ch; font-size: clamp(32px, min(4.6vw, 6.2svh), 56px); margin-bottom: clamp(28px, 5svh, 56px); }
.about-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 36px; } }
.about-lead { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.7; color: var(--text-dim); max-width: 42ch; }
.about-facts { border-top: 1px solid var(--border); }
.about-facts > div {
  display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: baseline;
  padding-block: 18px; border-bottom: 1px solid var(--border-soft);
}
.about-facts dt { font-family: var(--font-head); font-size: 18px; font-weight: 600; color: var(--text); }
.about-facts dd { font-size: 14px; color: var(--text-dim); }
@media (max-width: 480px) { .about-facts > div { grid-template-columns: 1fr; gap: 2px; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: var(--orange); margin-bottom: 12px;
}
.section-title {
  font-family: var(--font-head); font-size: clamp(30px, 4vw, 46px); font-weight: 700;
  color: var(--text); margin-bottom: 14px; letter-spacing: -.015em; line-height: 1.1;
  text-wrap: balance;
}
.section-subtitle { font-size: 16px; color: var(--text-dim); line-height: 1.75; text-wrap: pretty; }
.section-title--sm { font-size: 18px; margin-bottom: 6px; }
.card-sub { font-size: 13px; margin-bottom: 16px; }
.panel-label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-mute); font-weight: 700; margin: 22px 0 10px; }
.admin-header { text-align: left; margin: 0 0 32px; }

/* Revelado al hacer scroll — un solo gesto, ease-out, desde estado ya visible.
   .is-in lo añade el IntersectionObserver de app.js. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Antes: texto con degradado arcoíris (tell de IA). El énfasis viene del
   peso y el tamaño; el color es un único acento de marca. */
.grad-text { color: var(--cyan); }

/* ═══════════════════════════════════════════════════════════════════════
   03. Navbar
═══════════════════════════════════════════════════════════════════════ */

.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding-block: 18px;
  transition: background var(--ease), border-color var(--ease);
  border-bottom: 1px solid transparent;
}
.navbar.nav-scrolled {
  background: rgba(20,22,63,.92);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--border-soft);
  padding-block: 13px;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-logo img { height: 30px; width: auto; }
.nav-logo .lockup { display: flex; align-items: baseline; gap: 5px; font-family: var(--font-head); font-weight: 700; }
.nav-logo .lockup .expo { font-size: 16px; }
.nav-logo .lockup .yr { font-size: 13px; color: var(--orange); }

.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.nav-toggle {
  display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform var(--ease), opacity var(--ease); }
/* En ≥981px el riel lateral ya cubre la navegación por secciones */
@media (min-width: 981px) { .nav-toggle, .nav-mobile { display: none; } }

.nav-mobile {
  display: none; flex-direction: column; gap: 2px; padding: 14px 18px 18px;
  background: rgba(20,22,63,.98); border-top: 1px solid var(--border-soft);
}
.nav-mobile.open { display: flex; }

@media (max-width: 640px) { .nav-actions .nav-staff-btn { display: none; } }
@media (max-width: 560px) { .nav-logo-text { display: none; } }
.show-xs { display: none; }
/* Teléfonos angostos: barra superior compacta para que logo + botones quepan en una fila */
@media (max-width: 420px) {
  .nav-inner, .admin-topbar-inner { gap: 10px; }
  .nav-logo { gap: 8px; }
  .nav-logo img { height: 26px; }
  .nav-logo .lockup .expo { font-size: 14px; }
  .nav-logo .lockup .yr { font-size: 12px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn-sm { padding: 8px 13px; }
  .hide-xs { display: none; }
  .show-xs { display: inline; }
}
@media (max-width: 350px) { .nav-logo .lockup { display: none; } }
.nav-mobile .nav-link { display: block; padding: 10px 12px; font-size: 14px; font-weight: 500; color: var(--text-dim); border-radius: var(--r-sm); }
.nav-mobile .nav-link:hover { color: var(--text); background: rgba(255,255,255,.06); }

/* ═══════════════════════════════════════════════════════════════════════
   04. Riel de navegación (shapes)
═══════════════════════════════════════════════════════════════════════ */

.rail {
  position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 90;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.rail::before {
  content: ""; position: absolute; top: 14px; bottom: 14px; left: 50%; width: 1.5px;
  background: var(--border); transform: translateX(-50%); z-index: -1;
}
.rail-item { position: relative; display: flex; align-items: center; padding: 9px 0; }
.rail-shape {
  width: 13px; height: 13px; flex-shrink: 0; opacity: .38; transition: opacity var(--ease), transform var(--ease);
  background: var(--rail-color, var(--cyan));
}
.rail-item:nth-child(4n+1) .rail-shape { border-radius: 50%; }
.rail-item:nth-child(4n+2) .rail-shape { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.rail-item:nth-child(4n+3) .rail-shape { border-radius: 4px; }
.rail-item:nth-child(4n+4) .rail-shape { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.rail-item:hover .rail-shape { opacity: .75; transform: scale(1.2); }
.rail-item.active .rail-shape { opacity: 1; transform: scale(1.35); }

.rail-label {
  position: absolute; right: calc(100% + 14px); top: 50%; transform: translateY(-50%) translateX(6px);
  background: var(--navy-2); color: #fff; font-size: 12px; font-weight: 600; padding: 6px 12px;
  border-radius: var(--r-full); white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity var(--ease), transform var(--ease); box-shadow: var(--shadow-md);
}
.rail-item:hover .rail-label { opacity: 1; transform: translateY(-50%) translateX(0); }

@media (max-width: 980px) { .rail { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   05. Botones
═══════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 28px; border-radius: var(--r-full);
  font-family: var(--font-head); font-size: 14px; font-weight: 700; border: none; cursor: pointer;
  text-decoration: none;
  transition: transform .16s var(--ease-out), box-shadow var(--ease), background var(--ease), border-color var(--ease), color var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--orange); color: #fff;
}
.btn-primary:hover { background: #d4621a; }

.btn-outline { background: transparent; color: var(--text); border: 1.5px solid var(--border); }
.btn-outline:hover { border-color: var(--cyan); color: var(--cyan); }

.btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: rgba(255,255,255,.13); }

/* Feedback físico al presionar — cualquier elemento pulsable (Emil) */
.btn:active { transform: scale(.97); }

.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
.btn-sm { padding: 9px 18px; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transform: none; }
}

.icon { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ═══════════════════════════════════════════════════════════════════════
   06. Hero editorial
═══════════════════════════════════════════════════════════════════════ */

.hero {
  position: relative; overflow: hidden;
  /* Ocupa exactamente una pantalla (debajo de la barra fija) con el contenido centrado */
  min-height: 100svh; display: flex; align-items: center; padding-block: 96px 40px;
  background: var(--navy);
}
.hero > .container { width: 100%; }
.hero-inner { position: relative; z-index: 2; }


.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }


.hero-title {
  font-family: var(--font-head); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(40px, min(6vw, 8.6svh), 76px); line-height: 1.02; margin-bottom: clamp(14px, 2.4svh, 20px);
}
.hero-title .line2 { display: block; color: var(--cyan); }
.hero-subtitle {
  font-size: clamp(15px, 1.4vw, 17px); color: var(--text-dim); max-width: 480px;
  margin-bottom: clamp(22px, 3.6svh, 34px); line-height: 1.7;
}
.hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: clamp(24px, 4svh, 36px); }

.hero-date-strip { display: flex; align-items: stretch; gap: 0; border-top: 1px solid var(--border-soft); padding-top: 22px; max-width: 460px; }
.hero-date-strip > div { padding-right: 22px; margin-right: 22px; border-right: 1px solid var(--border-soft); }
.hero-date-strip > div:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.hds-label { font-size: 12px; color: var(--text-mute); margin-bottom: 2px; }
.hds-value { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--text); }
.hds-value.accent { color: var(--green); }
@media (max-width: 420px) {
  .hero-date-strip > div { padding-right: 14px; margin-right: 14px; }
  .hds-value { font-size: 13px; }
}

.hero-visual { position: relative; }
.hero-photo-frame {
  position: relative; max-width: min(380px, 50svh); margin-inline: auto;
  transform: rotate(2.5deg);
}
.hero-photo {
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg);
  border: 6px solid var(--navy-2); aspect-ratio: 4/5;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

.hero-shape-capsula {
  position: absolute; z-index: -1; bottom: -26px; left: -24px; height: 108px; width: auto;
  
}
.hero-shape-tri-mini {
  position: absolute; z-index: -1; bottom: -38px; left: 58px; height: 44px; width: auto;
  transform: rotate(-10deg); opacity: .92;
}
.hero-date-badge {
  position: absolute; z-index: 3; top: -22px; right: -28px; width: 190px; height: auto;
  transform: rotate(-4deg); border-radius: var(--r-sm); box-shadow: var(--shadow-lg);
}
/* En pantallas medianas y móviles el sello de fecha no debe salirse del borde */
@media (max-width: 1100px) { .hero-date-badge { right: -10px; width: min(190px, 52%); } }

/* Acentos decorativos sueltos (kit de formas en assets/formas/) */
.deco-shape { position: absolute; z-index: -1; width: 84px; height: auto; opacity: .5; pointer-events: none; }
.deco-shape-evento-a { top: 18px; right: -20px; width: 70px; opacity: .55; }
.deco-shape-evento-b { bottom: -24px; left: -28px; width: 96px; transform: rotate(8deg); opacity: .4; }
.deco-shape-patro-a { top: 10px; left: -26px; width: 76px; opacity: .5; }
.deco-shape-patro-b { bottom: -18px; right: -22px; width: 88px; transform: rotate(-6deg); opacity: .45; }
.deco-shape-aud-a { top: 24px; right: -18px; width: 60px; opacity: .5; }
.deco-shape-aud-b { bottom: 40px; left: -22px; width: 100px; transform: rotate(4deg); opacity: .35; }
@media (max-width: 900px) { .deco-shape { display: none; } }

/* Acentos en tarjetas (confirmación de registro, login de staff) — cutoff propio, no el de .deco-shape */
.deco-shape-card { position: absolute; z-index: 0; pointer-events: none; }
.deco-shape-confirm-a { top: -22px; left: -20px; width: 54px; opacity: .8; }
.deco-shape-confirm-b { bottom: -30px; right: -26px; width: 92px; opacity: .6; transform: rotate(-6deg); }
.deco-shape-login-a { top: -18px; right: 28px; width: 46px; opacity: .85; transform: rotate(12deg); }
.deco-shape-login-b { bottom: -24px; left: -22px; width: 72px; opacity: .55; }
@media (max-width: 480px) { .deco-shape-card { display: none; } }


/* ═══════════════════════════════════════════════════════════════════════
   07. Costuras diagonales
═══════════════════════════════════════════════════════════════════════ */

.seam { display: block; width: 100%; height: 64px; margin-block: -1px; position: relative; z-index: 3; }
.seam svg { display: block; width: 100%; height: 100%; overflow: visible; }
.seam-paper { background: var(--paper); box-shadow: 0 -2px 0 var(--paper); }

/* ═══════════════════════════════════════════════════════════════════════
   08. Sede (banda de foto angulada)
═══════════════════════════════════════════════════════════════════════ */

.venue-band {
  position: relative; padding-block: clamp(56px, 8svh, 80px); overflow: hidden;
  clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
  margin-block: -40px;
}
.venue-band-bg { position: absolute; inset: 0; }
.venue-band-bg img { width: 100%; height: 100%; object-fit: cover; }
.venue-band-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(20,22,63,.94) 0%, rgba(20,22,63,.85) 38%, rgba(20,22,63,.35) 68%, rgba(20,22,63,.12) 100%);
}
.venue-band-inner { position: relative; z-index: 2; max-width: 480px; }
.venue-name { font-family: var(--font-head); font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; line-height: 1.08; letter-spacing: -.015em; margin-bottom: 14px; color: #fff; text-wrap: balance; }
.venue-addr { font-size: 14px; color: rgba(255,255,255,.78); line-height: 1.7; margin-bottom: 22px; }
.venue-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: rgba(255,255,255,.78); padding: 11px 0; border-top: 1px solid rgba(255,255,255,.14); }
.venue-row:first-of-type { border-top: none; padding-top: 0; }
.venue-row .icon { color: var(--cyan); margin-top: 1px; flex-shrink: 0; }
.venue-row strong, .venue-row a { color: #fff; font-weight: 600; }
.venue-row a:hover { color: var(--cyan); }
.venue-row span a { white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.venue-actions { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }

@media (max-width: 700px) { .venue-band { clip-path: polygon(0 3%, 100% 0, 100% 97%, 0% 100%); padding-block: 64px; } }

/* ═══════════════════════════════════════════════════════════════════════
   09. Audiencia (lista editorial)
═══════════════════════════════════════════════════════════════════════ */

.aud-grid { display: grid; grid-template-columns: 4fr 7fr; gap: 64px; align-items: start; }
@media (max-width: 860px) { .aud-grid { grid-template-columns: 1fr; gap: 28px; } }
.aud-head { position: sticky; top: 110px; }
@media (max-width: 860px) { .aud-head { position: static; } }
.aud-list { list-style: none; counter-reset: aud; border-top: 1px solid #DADDEB; }
.aud-list li {
  counter-increment: aud; display: grid; grid-template-columns: 48px 1fr; align-items: baseline;
  padding-block: 22px; border-bottom: 1px solid #DADDEB;
  font-family: var(--font-head); font-size: clamp(18px, 2vw, 22px); font-weight: 600; line-height: 1.3; color: var(--text);
}
.aud-list li::before {
  content: counter(aud, decimal-leading-zero);
  font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════
   10. Conferencias
═══════════════════════════════════════════════════════════════════════ */

.section-header:last-child { margin-bottom: 0; }

/* Agenda: dos tarjetas (mañana / tarde). Cada ponencia lleva su número, la hora
   de inicio manda y la de término queda en segundo plano; inauguración y ponencia
   principal se marcan en navy, el tiempo libre con línea punteada. */
.agenda { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 28px); align-items: start; counter-reset: talk; }
@media (max-width: 760px) { .agenda { grid-template-columns: 1fr; } }
.agenda-col {
  position: relative; z-index: 1; background: #fff; border-radius: var(--r-lg); padding: clamp(18px, 2.2vw, 26px);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(20,22,63,.055);
}
.agenda-period {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--text);
  padding: 0 4px 14px; margin-bottom: 6px; border-bottom: 2px solid var(--text);
}
.agenda-period span { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.agenda-list { list-style: none; }
.agenda-list li {
  display: grid; grid-template-columns: 30px 118px 1fr; align-items: center; column-gap: 10px;
  min-height: 52px; padding: 8px 4px; border-bottom: 1px solid #E7E9F5;
  transition: background var(--ease);
}
.agenda-list li:last-child { border-bottom: none; }
.agenda-list li:not(.is-key):not(.is-break) { counter-increment: talk; }
.agenda-list li:not(.is-key):not(.is-break):hover { background: var(--paper); }
.agenda-list li::before {
  content: counter(talk, decimal-leading-zero); align-self: center;
  font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--orange-btn); font-variant-numeric: tabular-nums;
}
.agenda-list li.is-key::before, .agenda-list li.is-break::before { content: ""; }
.agenda-list time { font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.2; }
.t-start { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--text); }
.t-end { font-size: 12.5px; color: var(--text-mute); }
.agenda-name { font-family: var(--font-head); font-size: 18px; font-weight: 600; color: var(--text); line-height: 1.25; }

.agenda-list li.is-key {
  background: var(--navy); border-radius: var(--r-md); border-bottom: none; margin-block: 8px;
  padding-block: 12px; min-height: 60px;
}
.agenda-list li.is-key .t-start, .agenda-list li.is-key .agenda-name { color: #fff; }
.agenda-list li.is-key .t-end { color: rgba(255,255,255,.66); }
.agenda-list li.is-key .agenda-name { font-weight: 800; font-size: 19px; }
.agenda-list li.is-key::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); justify-self: center; }
.agenda-list li.is-key:first-child { margin-top: 10px; }

.agenda-list li.is-break { border: 1.5px dashed #C9CDE3; border-radius: var(--r-md); margin-top: 8px; }
.agenda-list li.is-break .t-start { font-size: 16px; font-weight: 600; color: var(--text-mute); }
.agenda-list li.is-break .agenda-name { font-family: var(--font-body); font-size: 15px; font-weight: 400; font-style: italic; color: var(--text-mute); }

@media (max-width: 420px) {
  .agenda-list li { grid-template-columns: 24px 96px 1fr; column-gap: 8px; }
  .t-start, .agenda-name { font-size: 16px; }
  .agenda-list li.is-key .agenda-name { font-size: 16px; }
  .t-end { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .agenda-list li { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   10a. Hospedaje
═══════════════════════════════════════════════════════════════════════ */

.stay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); align-items: stretch; }
@media (max-width: 820px) { .stay-grid { grid-template-columns: 1fr; } }
.stay-card {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-md), 0 0 0 1px rgba(20,22,63,.055);
  --text: #171A3D; --text-dim: #4C5178; --text-mute: #646A8E; --border: #DADDEB;
  color: var(--text);
}
.stay-photo { border-radius: var(--r-lg) var(--r-lg) 0 0; width: 100%; aspect-ratio: 5 / 2; height: auto; object-fit: cover; background: #E3E6F0; }
.stay-body { display: flex; flex-direction: column; flex: 1; padding: clamp(20px, 2.4vw, 30px); }
.stay-kind { font-size: 13px; font-weight: 600; color: var(--orange-btn); margin-bottom: 6px; }
.stay-name { font-family: var(--font-head); font-size: clamp(21px, 2vw, 25px); font-weight: 700; line-height: 1.2; margin-bottom: 6px; text-wrap: balance; }
.stay-addr { font-size: 14px; color: var(--text-dim); line-height: 1.55; margin-bottom: 18px; }
.stay-rates { width: 100%; border-collapse: collapse; border-top: 1px solid var(--border); }
.stay-rates th, .stay-rates td { padding-block: 11px; border-bottom: 1px solid var(--border); vertical-align: baseline; }
.stay-rates th { text-align: left; font-size: 14px; font-weight: 500; color: var(--text); padding-right: 12px; }
.stay-rates td { text-align: right; font-family: var(--font-head); font-size: 22px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stay-note { font-size: 13px; color: var(--text-mute); margin: 8px 0 16px; }
.stay-list { list-style: none; display: grid; gap: 7px; margin-bottom: 22px; }
.stay-list li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.stay-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.stay-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.stay-actions .btn-outline { border-color: #C9CDE3; }
.stay-actions .btn-outline:hover { border-color: var(--cyan-d); color: var(--cyan-dd); }

/* ── Composición de formas de marca detrás de la agenda y el hospedaje ──
   Las formas viven en el contenedor (no en cada tarjeta) y quedan por detrás,
   asomando por los bordes como en el marco de la foto del inicio. La agenda
   aprovecha el hueco bajo la columna de la tarde, que es más corta. */
.agenda-side, .stay-grid { position: relative; isolation: isolate; }
.comp-shape { position: absolute; z-index: 0; height: auto; pointer-events: none; }
/* Mañana: cápsula verde que asoma por debajo de la tarjeta */
.ag-capsula  { left: 34px; bottom: -46px; width: 46px; transform: rotate(-12deg); }
/* Tarde: triángulo detrás de la esquina superior y, en el hueco bajo la tarjeta,
   un domo naranja que sale de detrás con un triángulo pequeño al pie */
.ag-tri      { top: -36px; right: -34px; width: 116px; }
.ag-domo     { top: calc(100% - 40px); right: 10%; width: 210px; }
.ag-tri-mini { top: calc(100% + 32px); right: calc(10% + 218px); width: 54px; }
/* Hospedaje: diagonal de color — media luna arriba a la izquierda, triángulo
   arriba a la derecha, cuarto verde abajo a la derecha */
.st-luna     { top: -46px; left: -50px; width: 136px; }
.st-tri      { top: -34px; right: -34px; width: 112px; }
.st-cuarto   { bottom: -58px; right: 16%; width: 140px; transform: scaleX(-1); }
@media (max-width: 820px) {
  .st-luna { top: -30px; left: -30px; width: 92px; }
  .st-tri { top: -24px; right: -22px; width: 76px; }
  .st-cuarto { right: 10%; bottom: -36px; width: 110px; }
}
@media (max-width: 760px) {
  .ag-domo, .ag-tri-mini { display: none; }
  .ag-tri { top: -24px; right: -20px; width: 80px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   10b. Galería (carrusel de fotos)
═══════════════════════════════════════════════════════════════════════ */

.gallery-scroll {
  display: flex; gap: clamp(12px, 1.4vw, 22px); overflow-x: auto; padding: 4px 4px 20px; margin: 0 -4px;
  scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  -webkit-overflow-scrolling: touch;
}
.gallery-scroll::-webkit-scrollbar { height: 6px; }
.gallery-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-full); }
.gallery-tile {
  scroll-snap-align: start; flex: 0 0 auto; width: clamp(190px, min(20vw, 32svh), 300px); aspect-ratio: 5/4;
  border-radius: var(--r-md); background: #E3E6F0;
  position: relative; overflow: hidden; box-shadow: var(--shadow-md);
  transition: transform var(--ease);
}
.gallery-tile:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .gallery-tile:hover { transform: none; } }
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ── Visor de fotos (lightbox) ── */
.gallery-tile { padding: 0; border: none; cursor: zoom-in; font: inherit; }
.gallery-tile:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: none;
  background: rgba(10,11,30,.94); color: #fff; overflow: hidden;
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(10,11,30,.6); }
.lightbox-figure { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: min(1400px, 100vw - 160px); }
.lightbox-img { display: block; max-width: 100%; max-height: calc(100dvh - 140px); width: auto; height: auto; border-radius: var(--r-sm); object-fit: contain; }
.lightbox-count { font-size: 13px; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.lightbox-btn {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; transition: background var(--ease);
}
.lightbox-btn:hover { background: rgba(255,255,255,.24); }
.lightbox-btn .icon { width: 22px; height: 22px; }
.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lightbox-figure { max-width: calc(100vw - 24px); }
  .lightbox-img { max-height: calc(100dvh - 180px); }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 20px; transform: none; }
  .lightbox-prev { left: calc(50% - 60px); }
  .lightbox-next { right: calc(50% - 60px); }
}

@media (max-width: 640px) {
  .gallery-scroll { gap: 9px; padding-bottom: 16px; }
  .gallery-tile { width: 128px; border-radius: var(--r-sm); }
}

/* ═══════════════════════════════════════════════════════════════════════
   11. Patrocinadores (banda de logos)
═══════════════════════════════════════════════════════════════════════ */

/* ── Patrocinadores: 4 lugares del mismo tamaño ── */
.sponsor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .sponsor-grid { grid-template-columns: repeat(2, 1fr); } }
/* En teléfonos el patrocinador ocupa todo el ancho para conservar su peso frente a los participantes */
@media (max-width: 560px) {
  .sponsor-slot--taken { grid-column: 1 / -1; }
  .sponsor-slot--taken img { max-width: 280px; }
  .sponsor-slot--open { min-height: 104px; padding: 16px 12px; }
  /* Si los espacios libres son impares, el último ocupa toda la fila */
  .sponsor-slot--open:last-child:nth-child(odd of .sponsor-slot--open) { grid-column: 1 / -1; }
}
.sponsor-slot {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: clamp(150px, 21svh, 196px); padding: 28px 24px; border-radius: var(--r-lg); text-align: center;
}
.sponsor-slot--taken { background: #fff; box-shadow: 0 10px 28px rgba(20,22,63,.10), 0 0 0 1px #E7E9F5; }
.sponsor-slot--taken { padding-inline: 18px; }
.sponsor-slot--taken img { width: 100%; max-width: 320px; height: auto; margin-top: 10px; }
.sponsor-tier {
  position: absolute; top: 14px; left: 16px; font-size: 12px; font-weight: 600; color: var(--orange-btn);
}
.sponsor-slot--open {
  border: 1.5px dashed #C9CDE3; color: #4C5178;
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.sponsor-slot--open:hover, .sponsor-slot--open:focus-visible { border-color: var(--orange-btn); background: #fff; color: #171A3D; }
.sponsor-slot-title { font-family: var(--font-head); font-size: 17px; font-weight: 700; }
.sponsor-slot-cta { font-size: 13px; color: var(--orange-btn); font-weight: 600; }
#patrocinadores .section-subtitle a { color: var(--cyan-dd); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ── Empresas participantes: carrusel continuo ── */
.part-block { margin-top: clamp(40px, 6svh, 64px); }
.part-title { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: #4C5178; margin-bottom: 14px; }
.part-marquee {
  display: flex; flex-direction: column; gap: clamp(10px, 1.6svh, 18px); overflow: hidden; padding-block: 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.part-row { overflow: visible; }
.part-track { list-style: none; display: flex; align-items: center; gap: clamp(24px, 3.4vw, 48px); width: max-content; }
.part-marquee.is-ready .part-track { animation: partScroll var(--part-duration, 40s) linear infinite; }
.part-marquee.is-ready .part-row.is-reverse .part-track { animation-direction: reverse; }
.part-marquee:hover .part-track, .part-marquee:focus-within .part-track { animation-play-state: paused; }
/* Sin JavaScript: lista fija en cuadrícula */
.part-marquee:not(.is-ready) .part-track { width: auto; flex-wrap: wrap; justify-content: center; }
.part-logo { flex: 0 0 auto; }
.part-logo img { display: block; width: 130px; height: 52px; }
@keyframes partScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - clamp(24px, 3.4vw, 48px) / 2)); }
}
@media (max-width: 560px) { .part-logo img { width: 105px; height: 42px; } }
/* Sin animación: los logos se acomodan en una cuadrícula fija */
@media (prefers-reduced-motion: reduce) {
  .part-marquee { -webkit-mask-image: none; mask-image: none; }
  .part-marquee.is-ready .part-track { animation: none; }
  .part-track { width: auto; flex-wrap: wrap; justify-content: center; }
  .part-track [aria-hidden="true"] { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   12. CTA registro
═══════════════════════════════════════════════════════════════════════ */

.cta-band {
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  padding: 56px clamp(28px, 5vw, 64px); border-radius: var(--r-lg);
  background: var(--cyan-dd);
}
.cta-band h2 { font-family: var(--font-head); font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; line-height: 1.1; margin-bottom: 8px; color: #fff; }
.cta-band p { color: rgba(255,255,255,.9); font-size: 15px; max-width: 46ch; }
.cta-band .btn-primary { background: #fff; color: var(--navy); box-shadow: var(--shadow-lg); }
.cta-band .btn-primary:hover { background: var(--paper); }

/* ═══════════════════════════════════════════════════════════════════════
   13. Footer
═══════════════════════════════════════════════════════════════════════ */

.footer { padding-block: 70px 26px; background: var(--navy); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; margin-bottom: 36px; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-brand img { height: 28px; }
.footer-brand span { font-family: var(--font-head); font-weight: 700; font-size: 14px; }
.footer-brand .footer-logo-full { height: auto; width: 210px; max-width: 100%; }
.footer-desc { font-size: 13px; color: var(--text-dim); line-height: 1.7; max-width: 300px; }
.footer-heading { font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 14px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a, .footer-col li { font-size: 13px; color: var(--text-dim); transition: color var(--ease); }
.footer-col a:hover { color: var(--cyan); }
.footer-bottom {
  border-top: 1px solid var(--border-soft); padding-top: 20px; display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--text-mute);
}
.footer-bottom a { color: var(--text-mute); }
.footer-bottom a:hover { color: var(--cyan); }

@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 420px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } .footer-col a { overflow-wrap: anywhere; } }

/* ═══════════════════════════════════════════════════════════════════════
   14. Formularios
═══════════════════════════════════════════════════════════════════════ */

.reg-page { padding-top: 136px; overflow-x: clip; }
.reg-layout { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
@media (max-width: 900px) { .reg-layout { grid-template-columns: 1fr; gap: 36px; } }
.reg-aside { position: sticky; top: 110px; }
@media (max-width: 900px) { .reg-aside { position: static; } }
.reg-aside .section-subtitle { max-width: 42ch; }
.reg-facts { margin-top: 36px; border-top: 1px solid var(--border-soft); }
.reg-facts > div { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
.reg-facts dt { color: var(--text-mute); }
.reg-facts dd { color: var(--text); font-weight: 500; }
.reg-facts a { color: var(--cyan); }
.reg-facts a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .reg-facts { margin-top: 24px; } }
.reg-confirm-wrap { position: relative; scroll-margin-top: 96px; }
.reg-submit { margin-top: 8px; }

.form-card { padding: 36px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; gap: 0; } }
fieldset.field { border: none; min-width: 0; }
.field { margin-bottom: 18px; }
.field label, .field legend { display: block; font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: 7px; letter-spacing: .01em; }
.field label .req { color: var(--orange-btn); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--r-sm); font-size: 14px; font-family: var(--font-body);
  background: #FBFBFE; border: 1.5px solid #E7E9F5; color: var(--text); outline: none;
  transition: border-color var(--ease), box-shadow var(--ease); box-sizing: border-box;
}
.field input::placeholder, .field textarea::placeholder { color: #7A80A3; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,174,239,.14); }
.field-hint { font-size: 12px; color: var(--text-mute); margin-top: 6px; text-align: right; }
.field textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background: #FBFBFE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23646A8E' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; }
.form-section-title { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--text);
  margin: 28px 0 14px; padding-top: 22px; border-top: 1px solid var(--border); }

.type-toggle { display: flex; gap: 10px; }
.type-option {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; cursor: pointer;
  border: 1.5px solid #E7E9F5; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; color: var(--text-dim);
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.type-option input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.type-option { position: relative; }
.type-option:hover { border-color: #C9CDE3; }
.type-option:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }
.type-option.checked { border-color: var(--cyan); background: var(--cyan-l); color: var(--cyan-dd); }

.field-error {
  background: #FDEEED; border: 1px solid #F3B3AE; border-radius: var(--r-sm);
  padding: 10px 14px; font-size: 12px; color: #C22B22; margin-bottom: 18px; display: none;
}
.field-error.show { display: block; }

.form-note { font-size: 12px; color: var(--text-mute); text-align: center; margin-top: 16px; line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════════════
   15. Tarjeta de confirmación / QR
═══════════════════════════════════════════════════════════════════════ */

.confirm-card { padding: 40px 36px; text-align: center; }
.confirm-title { font-family: var(--font-head); font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.confirm-sub { font-size: 14px; color: var(--text-dim); margin-bottom: 26px; }

.qr-frame {
  display: inline-flex; padding: 16px; background: #fff; border: 1.5px solid #E7E9F5; border-radius: var(--r-lg); margin-bottom: 18px;
}
.qr-frame canvas, .qr-frame img { display: block; border-radius: 6px; }

.qr-code-text { font-family: monospace; font-size: 13px; letter-spacing: .06em; color: var(--cyan-dd); font-weight: 700; margin-bottom: 22px; }

.confirm-details {
  text-align: left; background: #F5F6FB; border: 1px solid #EFF1FA; border-radius: var(--r-md);
  padding: 16px 18px; margin-bottom: 24px; display: flex; flex-direction: column; gap: 8px;
}
.confirm-row { display: flex; justify-content: space-between; font-size: 13px; }
.confirm-row span:first-child { color: var(--text-mute); }
.confirm-row span:last-child { color: var(--text); font-weight: 600; }

.confirm-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ═══════════════════════════════════════════════════════════════════════
   16. Admin — login
═══════════════════════════════════════════════════════════════════════ */

.admin-shell {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--navy);
}
.admin-login-card { position: relative; width: 100%; max-width: 380px; padding: 36px; text-align: center; }
.admin-login-icon {
  width: 50px; height: 50px; border-radius: 50%; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center;
  background: var(--cyan-l); color: var(--cyan-dd);
}
.admin-login-card h1 { font-family: var(--font-head); font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.admin-login-card p.sub { font-size: 13px; color: var(--text-dim); margin-bottom: 26px; }
.admin-login-card .field { text-align: left; }

/* ═══════════════════════════════════════════════════════════════════════
   17. Admin — dashboard
═══════════════════════════════════════════════════════════════════════ */

.admin-topbar {
  position: sticky; top: 0; z-index: 40; background: rgba(20,22,63,.94); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft); padding-block: 14px;
}
.admin-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.admin-topbar .nav-logo img { height: 26px; }

.admin-main { padding-block: 40px 80px; }

/* ── Lista de asistentes (admin.html) ──
   Banda navy con el resumen + lista clara agrupada por día, con el código
   de cada asistente tratado como talón de boleto. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.gl-head { padding-block: 44px 40px; border-bottom: 1px solid var(--border-soft); }
.gl-head-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 36px; }
.gl-kicker { font-size: 13px; color: var(--text-mute); margin-bottom: 6px; }
.gl-title { font-family: var(--font-head); font-size: clamp(30px, 4vw, 44px); font-weight: 700; line-height: 1.05; letter-spacing: -.015em; }
.gl-countdown { font-size: 15px; color: var(--text-dim); }
.gl-countdown strong { font-family: var(--font-head); font-size: 28px; font-weight: 700; color: var(--orange); margin-right: 4px; }

.gl-metrics { display: grid; grid-template-columns: auto 1fr 1fr 1.1fr; gap: 0; align-items: stretch; }
.gl-metrics > * { padding: 4px 32px; border-left: 1px solid var(--border-soft); }
.gl-metrics > :first-child { padding-left: 0; border-left: none; }
.gl-total { display: flex; flex-direction: column; justify-content: flex-end; }
.gl-total-num { font-family: var(--font-head); font-size: clamp(64px, 8vw, 96px); font-weight: 700; line-height: .85; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.gl-total-label { font-size: 14px; color: var(--text-dim); margin-top: 8px; }
.gl-metric { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.gl-metric-title { font-size: 13px; color: var(--text-mute); }
.gl-bar { display: flex; height: 10px; border-radius: var(--r-full); overflow: hidden; background: rgba(255,255,255,.1); }
.gl-bar.is-empty .gl-seg { flex-grow: 0 !important; }
.gl-seg { display: block; height: 100%; flex: 0 0 auto; transition: flex-grow .5s var(--ease-out), width .5s var(--ease-out); }
#barPerfil .gl-seg { flex-basis: 0; }
.gl-seg--prof { background: var(--cyan); }
.gl-seg--est  { background: var(--orange); }
.gl-seg--in   { background: var(--green); }
.gl-legend { font-size: 14px; color: var(--text-dim); display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.gl-legend strong { color: var(--text); font-weight: 600; }
.gl-key { display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.gl-li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin-right: 14px; }
.gl-key--prof { background: var(--cyan); }
.gl-key--est  { background: var(--orange); }
.gl-spark { display: flex; align-items: flex-end; gap: 4px; height: 56px; }
.gl-spark-col { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; background: rgba(255,255,255,.28); }
.gl-spark-col.is-today { background: var(--cyan); }

.gl-insights { display: grid; grid-template-columns: 2.2fr 1fr; gap: 0; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--border-soft); }
.gl-insight { padding-inline: 32px; border-left: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 10px; }
.gl-insight:first-child { padding-left: 0; border-left: none; }
.gl-channels { list-style: none; columns: 2; column-gap: 36px; }
.gl-channels li { display: grid; grid-template-columns: minmax(0, 1fr) 90px 24px; align-items: center; gap: 10px; font-size: 13px; color: var(--text-dim); break-inside: avoid; padding-block: 4px; }
.gl-ch-bar { height: 6px; border-radius: var(--r-full); background: rgba(255,255,255,.1); overflow: hidden; }
.gl-ch-bar span { display: block; height: 100%; background: var(--cyan); border-radius: inherit; }
.gl-ch-n { text-align: right; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.gl-channels-empty { font-size: 13px; color: var(--text-mute); }
@media (max-width: 1200px) { .gl-channels { columns: 1; } .gl-channels li { grid-template-columns: 220px minmax(0, 1fr) 24px; } }
.gl-member-line { font-size: 14px; color: var(--text-dim); }
.gl-member-line strong { font-family: var(--font-head); font-size: 26px; font-weight: 700; color: var(--text); margin-right: 6px; }
.gl-member-line strong.is-accent { color: var(--orange); }

@media (max-width: 980px) {
  .gl-insights { grid-template-columns: 1fr; row-gap: 24px; }
  .gl-insight { padding-left: 0; border-left: none; }
  .gl-metrics { grid-template-columns: auto 1fr; row-gap: 28px; }
  .gl-metrics > :nth-child(3) { padding-left: 0; border-left: none; }
}
@media (max-width: 560px) {
  .gl-metrics { grid-template-columns: 1fr; }
  .gl-metrics > * { padding-left: 0; border-left: none; }
}
@media (prefers-reduced-motion: reduce) { .gl-seg { transition: none; } }

/* Lista */
.gl-body { background: var(--paper); color: #171A3D; padding-block: 32px 96px; min-height: 60vh; }
.gl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.gl-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-filter {
  border: 1.5px solid #DADDEB; background: #fff; color: #4C5178; border-radius: var(--r-full);
  padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.gl-filter span { font-weight: 500; color: #646A8E; margin-left: 2px; font-variant-numeric: tabular-nums; }
.gl-filter:hover { border-color: #B9BEDA; }
.gl-filter.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.gl-filter.is-on span { color: rgba(255,255,255,.7); }
.gl-filter:focus-visible { outline: 2px solid var(--cyan-dd); outline-offset: 2px; }
.gl-tools { display: flex; gap: 8px; flex: 1 1 320px; justify-content: flex-end; }
.gl-search { position: relative; flex: 1; max-width: 340px; }
.gl-search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #646A8E; }
.gl-search input {
  width: 100%; padding: 9px 12px 9px 36px; border-radius: var(--r-sm); border: 1.5px solid #DADDEB; background: #fff;
  color: #171A3D; font: 14px var(--font-body); outline: none;
}
.gl-search input:focus { border-color: var(--cyan-dd); }
.gl-export {
  border: 1.5px solid #DADDEB; background: transparent; color: #171A3D; border-radius: var(--r-sm);
  padding: 9px 14px; font: 600 13px var(--font-body); cursor: pointer; white-space: nowrap;
}
.gl-export:hover { background: #fff; }
.gl-result { font-size: 13px; color: #646A8E; min-height: 20px; margin-bottom: 4px; }

/* Tarjetas de asistentes: fila compacta que se despliega al hacer clic */
.gl-list[hidden] { display: none; }
.gl-day { margin-top: 26px; }
.gl-day-title { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-head); font-size: 17px; font-weight: 700; color: #171A3D; margin-bottom: 10px; }
.gl-day-title span { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: #646A8E; }
.gl-cards { list-style: none; background: #fff; border-radius: var(--r-md); box-shadow: 0 1px 2px rgba(20,22,63,.06), 0 0 0 1px #E7E9F5; overflow: hidden; }
.gl-card + .gl-card { border-top: 1px solid #EFF1FA; }
.gl-card { position: relative; transition: background var(--ease); }
.gl-card::before {   /* marca lateral: verde cuando ya entró */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: background var(--ease);
}
.gl-card.is-in::before { background: var(--green); }
.gl-card:hover, .gl-card.is-open { background: #FAFBFE; }

.gl-card-head {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 72px 132px 20px; align-items: center; gap: 16px;
  width: 100%; padding: 14px 20px; border: none; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.gl-card-head:focus-visible { outline: 2px solid var(--cyan-dd); outline-offset: -2px; border-radius: var(--r-md); }
.gl-mono {
  width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 15px; font-weight: 700; letter-spacing: .02em;
}
.gl-mono--prof { background: var(--cyan-l); color: var(--cyan-dd); }
.gl-mono--est  { background: var(--orange-l); color: #9A4A0D; }
.gl-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gl-name { font-size: 15px; font-weight: 600; color: #171A3D; }
.gl-org { font-size: 13px; color: #4C5178; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-tag { display: inline-block; vertical-align: 1px; margin-left: 8px; padding: 1px 7px; border-radius: 4px;
  font-size: 11px; font-weight: 600; color: var(--navy); background: #ECEEF7; }
.gl-tag--lead { color: #8A3F0B; background: var(--orange-l); }
.gl-when { font-size: 13px; color: #646A8E; font-variant-numeric: tabular-nums; text-align: right; }
.gl-state { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; font-size: 13px; color: #646A8E; white-space: nowrap; }
.gl-state.is-in { color: #3f7614; font-weight: 600; }
.gl-dot { width: 7px; height: 7px; border-radius: 50%; background: #C9CDE3; flex-shrink: 0; }
.gl-state.is-in .gl-dot { background: var(--green); box-shadow: 0 0 0 3px rgba(141,198,63,.22); }
.gl-chev { width: 18px; height: 18px; fill: none; stroke: #8B90B0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s var(--ease-out), stroke var(--ease); }
.gl-card:hover .gl-chev { stroke: #171A3D; }
.gl-card.is-open .gl-chev { transform: rotate(180deg); stroke: #171A3D; }

/* Panel desplegable (animación de altura con grid 0fr → 1fr) */
.gl-card-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease-out); }
.gl-card.is-open .gl-card-body { grid-template-rows: 1fr; }
.gl-card-inner { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s .28s; padding-inline: 76px 56px; }
.gl-card.is-open .gl-card-inner { visibility: visible; transition: visibility 0s; }
.gl-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-top: 2px; }
.gl-code { font: 700 13px/1 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .1em; color: var(--navy);
  background: var(--cyan-l); padding: 6px 10px; border-radius: 6px; }
.gl-card.is-in .gl-code { background: var(--green-l); }
.gl-link { font-size: 14px; color: #171A3D; text-decoration: underline; text-decoration-color: #C9CDE3; text-underline-offset: 3px; }
.gl-link:hover { text-decoration-color: var(--cyan-dd); color: var(--cyan-dd); }
.gl-answers { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 28px; padding: 16px 0 20px; }
.gl-answers .gl-wide { grid-column: 1 / -1; order: 3; }
.gl-answers dt { font-size: 12px; color: #646A8E; margin-bottom: 2px; }
.gl-answers dd { font-size: 14px; color: #171A3D; line-height: 1.5; }
.gl-none { color: #8B90B0; font-style: italic; }
@media (prefers-reduced-motion: reduce) { .gl-card-body, .gl-chev { transition: none; } }

.gl-empty { text-align: center; padding: 72px 24px; color: #4C5178; }
.gl-empty-title { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: #171A3D; margin-bottom: 6px; }

@media (max-width: 760px) {
  .gl-tools { justify-content: stretch; }
  .gl-search { max-width: none; }
  .gl-card-head { grid-template-columns: 40px minmax(0, 1fr) 18px; row-gap: 6px; padding: 14px 16px; }
  .gl-when, .gl-state { grid-column: 2; justify-content: flex-start; text-align: left; }
  .gl-when { grid-row: 2; }
  .gl-when::before { content: "Registro "; }
  .gl-state { grid-row: 3; }
  .gl-chev { grid-column: 3; grid-row: 1; }
  .gl-org { white-space: normal; }
  .gl-card-inner { padding-inline: 16px; }
  .gl-answers { grid-template-columns: 1fr; gap: 10px; }
  .gl-channels { columns: 1; }
  .gl-channels li { grid-template-columns: minmax(0, 1fr) 80px 24px; }
}

/* Buscador (usado en check-in) */
.table-search { flex: 1; min-width: 200px; position: relative; }
.table-search input {
  width: 100%; padding: 11px 14px 11px 40px; border-radius: var(--r-full); border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 13px; outline: none; font-family: var(--font-body);
}
.table-search input::placeholder { color: var(--text-mute); }
.table-search input:focus { border-color: var(--cyan); }
.table-search .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-mute); }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-full); font-size: 11px; font-weight: 700; }
.badge-green { background: var(--green-l); color: #3f7614; }


/* ═══════════════════════════════════════════════════════════════════════
   18. Check-in / escáner
═══════════════════════════════════════════════════════════════════════ */

.checkin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .checkin-grid { grid-template-columns: 1fr; } }

.scanner-card { padding: 24px; }
.scanner-viewport {
  width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden; background: #10122E;
  border: 1px solid #E7E9F5; position: relative; margin-bottom: 16px;
}
.scanner-viewport #qrReader { width: 100%; height: 100%; }
.scanner-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: rgba(255,255,255,.4); font-size: 13px; text-align: center; padding: 20px;
}
.scanner-placeholder .icon { width: 36px; height: 36px; opacity: .6; }

.manual-card { padding: 24px; }
.recent-list { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; margin-top: 16px; }
.recent-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); background: #F5F6FB;
  border: 1px solid #EFF1FA; font-size: 13px;
}
.recent-item .icon { color: #3f7614; flex-shrink: 0; }
.recent-item .rname { font-weight: 600; color: #171A3D; flex: 1; }
.recent-item .rtime { color: #646A8E; font-size: 11px; }

.checkin-counter { text-align: center; padding: 22px; margin-bottom: 24px; }
.checkin-counter-value { font-family: var(--font-head); font-size: 44px; font-weight: 700; color: #3f7614; }
.checkin-counter-label { font-size: 12px; color: #646A8E; text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════
   19. Toast
═══════════════════════════════════════════════════════════════════════ */

.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 1100; max-width: 340px;
  background: #fff; border: 1px solid #E7E9F5; color: #171A3D;
  padding: 14px 18px; border-radius: var(--r-md); font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px;
  transform: translateY(16px); opacity: 0; pointer-events: none;
  transition: transform .25s var(--ease-out), opacity .25s var(--ease-out);
}
.toast.show { transform: none; opacity: 1; }
.toast.success .icon { color: #3f7614; }
.toast.error .icon { color: #C22B22; }
.toast.info .icon { color: var(--cyan-dd); }

@media (max-width: 640px) {
  .form-card, .confirm-card, .admin-login-card { padding: 26px 22px; }
  .section { padding-block: 72px; }
}

/* ── Powered by ───────────────────────────────────────────────── */
.footer-powered{display:flex;align-items:center;justify-content:flex-end;gap:5px;padding:8px 24px 4px;font-size:11px;color:var(--text-mute);width:100%;box-sizing:border-box;max-width:none!important;margin:0!important}
.footer-powered img{height:11px;width:auto;opacity:.6}