:root{
  /* Light Frutiger-Aero x Apple — LIQUID GLASS EDITION */
  --bg:#f6f9ff;
  --bg2:#eef3fb;
  --fg:#0b1220;
  --muted:#4b5568;
  --accent:#2f7cff;
  --accent-2:#22c6a7;
  /* Glass tuning */
  --glass-a:.42;     /* main layer alpha */
  --glass-b:.28;     /* secondary layer alpha */
  --stroke: rgba(10,20,40,.10);
  --radius: 18px;
  --shadow-float: 0 24px 60px rgba(14, 30, 64, .12);
  --shadow-soft: 0 10px 28px rgba(14, 30, 64, .10);
}

*{box-sizing:border-box}
html,body{height:100%}
body.theme-light{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--fg);
  background:
    radial-gradient(900px 400px at 10% -10%, rgba(173, 232, 255, .35), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(186, 255, 214, .35), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

/* Micro-noise for realism */
body.theme-light::before{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'>\
    <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/>\
    <feColorMatrix type='saturate' values='0'/>\
    <feComponentTransfer><feFuncA type='table' tableValues='0 0 0 0 .05 .06 .05 0 0 0 0 0'/></feComponentTransfer></filter>\
    <rect width='120' height='120' filter='url(%23n)'/></svg>");
  opacity:.08;
}

/* Base glass component */
.glass{
  position:relative;
  background:
    linear-gradient(145deg, rgba(255,255,255, calc(var(--glass-a)+.12)), rgba(255,255,255, var(--glass-b))),
    radial-gradient(120% 140% at 10% -10%, rgba(142, 231, 255, .18), transparent 40%),
    radial-gradient(120% 140% at 110% 120%, rgba(186, 255, 214, .16), transparent 40%);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: var(--shadow-float);
  overflow:hidden;
}

/* Inner highlight + rim light */
.glass::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient( to bottom, rgba(255,255,255,.55), rgba(255,255,255,0) 35% ),
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.45), transparent 50% );
  mix-blend-mode: screen;
  pointer-events:none;
  opacity:.6;
}
/* thin edge highlight */
.glass::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(255,255,255,.25);
  pointer-events:none;
}

/* Container, Nav, Buttons stay similar but with stronger glass cues */
.container{ width:min(1100px, 92vw); margin:0 auto; padding:18px }

.topnav{
  margin-top:18px; padding:10px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  position:sticky; top:12px; z-index:10;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand .dot{
  width:10px; height:10px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #8ee7ff, #2f7cff 70%);
  box-shadow:0 0 18px rgba(47,124,255,.5);
}

.nav-actions{display:flex; gap:10px; flex-wrap:wrap}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:14px;
  border:1px solid rgba(10,20,40,.09);
  background:
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.48));
  color: var(--fg); text-decoration:none; cursor:pointer; transition: .25s ease;
  user-select:none; backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
}
.btn:hover{ transform: translateY(-1px) scale(1.01) }
.btn.primary{
  background:
    linear-gradient(180deg, rgba(47,124,255,.22), rgba(47,124,255,.14)),
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.48));
  border-color: rgba(47,124,255,.28);
}
.btn.ghost{
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.28));
  border-color: rgba(10,20,40,.06);
}

.hero{ padding-top:10px }
.hero .hero-content{ margin-top:18px; padding:28px }
.hero h1{ margin:0 0 8px 0; font-size: clamp(26px, 4vw, 40px); line-height:1.1 }
.lead{ color: var(--fg); opacity:.85; font-size: clamp(14px, 2vw, 18px) }
.meta{ color: var(--muted); margin-top:6px }
.actions{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap }

.grid-2{ display:grid; grid-template-columns: 1.1fr .9fr; gap:14px }
@media (max-width: 960px){ .grid-2{ grid-template-columns: 1fr } }

.card{ padding:18px }

/* Stat cards look like thick glass pebbles */
.stats{ display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; align-items:stretch }
.stat{
  display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center;
  padding:20px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,.34)),
    radial-gradient(140% 140% at 10% -10%, rgba(142, 231, 255, .18), transparent 40%),
    radial-gradient(140% 140% at 110% 120%, rgba(186, 255, 214, .16), transparent 40%);
  border:1px solid rgba(10,20,40,.10); border-radius: 16px;
  box-shadow: var(--shadow-soft);
  position:relative; overflow:hidden;
}
.stat::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient( to bottom, rgba(255,255,255,.6), rgba(255,255,255,0) 35% );
  mix-blend-mode: screen; opacity:.7;
}
.stat span{ font-size:28px; font-weight:800; background:linear-gradient(90deg,#2f7cff,#22c6a7); -webkit-background-clip:text; background-clip:text; color:transparent }
.stat small{ color:var(--muted) }

.bullets{ margin:10px 0 0 0; padding-left:18px }
.bullets li{ margin:8px 0; color:#1c2435 }

.people{ list-style:none; margin:0; padding:0; display:grid; gap:12px }
.people li{
  display:flex; gap:12px; align-items:flex-start; padding:12px;
  border:1px dashed rgba(10,20,40,.12); border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,255,255,.40));
  box-shadow: var(--shadow-soft);
}
.avatar{
  width:44px; height:44px; border-radius:12px;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(47,124,255,.5), rgba(34,198,167,.35)),
    linear-gradient(135deg, rgba(47,124,255,.25), rgba(255,255,255,.2));
  border:1px solid rgba(47,124,255,.35);
}
.info{ line-height:1.35 }

.chips{ list-style:none; margin:0; padding:0; display:flex; gap:10px; flex-wrap:wrap }
.chip{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(10,20,40,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.48));
  box-shadow: var(--shadow-soft);
}

.cta{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.cta .cta-actions{ display:flex; gap:10px; flex-wrap:wrap }

.footer .foot{ margin:18px 0 32px; padding:14px; display:flex; align-items:center; justify-content:space-between; gap:8px }
.footer .foot a{ color:#1c2435; opacity:.9; text-decoration:none }
.footer .foot a:hover{ text-decoration:underline }


/* ===============================
   PERFORMANCE MODE TUNING
   =============================== */
:root{
  --blur-strong: 18px;   /* was 28px */
  --blur-soft: 14px;
  --sat: 150%;           /* was 180% */
  --shadow-float: 0 16px 40px rgba(14, 30, 64, .10); /* lighter */
  --shadow-soft: 0 8px 20px rgba(14, 30, 64, .08);
}

/* Remove micro-noise overlay for performance */
body.theme-light::before{ display:none !important; }

/* Limit backdrop-filter: only apply on large containers, not on every small chip/card */
.glass{
  backdrop-filter: blur(var(--blur-strong)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(var(--sat));
}
.stat,
.people li,
.chip,
.btn{
  /* reduce glass computation on many instances */
  backdrop-filter: blur(var(--blur-soft)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur-soft)) saturate(var(--sat));
}

/* Simpler backgrounds for repeated components */
.stat{
  background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,.40));
}
.people li{
  background: linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,255,255,.42));
}
.chip{
  background: linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.46));
}
.btn{
  background: linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.48));
}

/* Reduce layered highlights */
.glass::before{ opacity:.45 }
.stat::before{ opacity:.5 }

/* Lighter shadows */
.btn, .chip, .people li, .stat{ box-shadow: var(--shadow-soft) }

/* Motion reduction */
@media (prefers-reduced-motion: reduce){
  .btn:hover{ transform:none }
}

/* Transparency reduction (fallback for low-power devices) */
@media (prefers-reduced-transparency: reduce){
  .glass, .stat, .people li, .chip, .btn{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255,255,255,.90) !important;
  }
  .glass::before, .stat::before{ display:none !important; }
}

/* Rendering hints */
.glass, .stat, .people li, .chip, .btn{
  will-change: transform, backdrop-filter;
  contain: layout paint style;
}



/* ---- IMAGES & LOGOS ---- */
.hero-img{
  position: relative;
  display:block;
  width:100%;
  margin: -8px 0 16px;
  border-radius: 14px;
  overflow:hidden;
  border:1px solid var(--stroke);
}
.hero-img img{ display:block; width:100%; height:auto; object-fit:cover }

.avatar{
  width:64px; height:64px; border-radius:14px; overflow:hidden; flex:0 0 auto;
  border:1px solid rgba(47,124,255,.25);
}
.avatar img{ width:100%; height:100%; object-fit:cover }

/* Committee/Sponsors logos list */
.logos{ list-style:none; margin:10px 0 0 0; padding:0; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; align-items:center }
.logos li{
  display:flex; align-items:center; gap:12px; padding:12px;
  border:1px dashed rgba(10,20,40,.12); border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,255,255,.42));
  box-shadow: var(--shadow-soft);
}
.logos .logo{ max-width:100%; height:auto; object-fit:contain }
.logos li span{ color:#1c2435 }

/* Sponsors more compact & centered */
.logos-sponsors{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.logos-sponsors li{ justify-content:center }
.logo.sponsor{ max-height:100px }

/* Optional gallery */
.gallery{ list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px }
.gallery img{ width:100%; height:auto; border-radius:12px; border:1px solid var(--stroke); object-fit:cover }
@media (max-width: 960px){
  .logos{ grid-template-columns: 1fr }
  .logos-sponsors{ grid-template-columns: repeat(2, minmax(0,1fr)) }
  .gallery{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 560px){
  .gallery{ grid-template-columns: 1fr }
}

/* ==== Ajustes de avatares conferencistas ==== */
.people .avatar {
  width: 80px;   /* tamaño más grande */
  height: 80px;
  border-radius: 50%;       /* círculo perfecto */
  overflow: hidden;
  flex: 0 0 auto;
  border: 2px solid rgba(47,124,255,0.25); /* borde sutil */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

/* ===== FIX: speakers abre hacia ABAJO ===== */
.people.speakers li,
.speakers .speaker{
  display: block !important;   /* cancela el flex del .people li */
  padding: 0 !important;
}

.speaker {
  border: 1px dashed rgba(10,20,40,.12);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,255,255,.42));
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* fila clickable (queda arriba) */
.speaker .row{
  width: 100%;
  display: grid;
  grid-template-columns: 80px 1fr 24px;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}

/* panel de detalle (oculto por defecto, se expande ABAJO) */
.speaker .more{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  transition: max-height .35s ease, opacity .25s ease, transform .35s ease, padding .2s ease;
  padding: 0 14px;
  width: 100%;
}

.speaker.open .more{
  max-height: 320px; /* sube si tu texto es más largo */
  opacity: 1;
  transform: translateY(0);
  padding: 12px 14px 16px;
  border-top: 1px dashed rgba(10,20,40,.12);
}

.speaker .chev{ opacity:.6; transition: transform .25s ease }
.speaker.open .chev{ transform: rotate(180deg) }

/* avatar redondo */
.speaker .avatar{ width:80px; height:80px; border-radius:50%; overflow:hidden; border:2px solid rgba(47,124,255,.25); display:flex; align-items:center; justify-content:center; background:#fff }
.speaker .avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50% }

.stats {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
  text-align: center;
}

.stat span {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary, #0077ff);
}

.stat small {
  display: block;
  font-weight: 600;
  margin-top: 4px;
}

.stat p {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: #444;
}

/* texto largo */
.stats-text {
  grid-column: 1 / -1; /* ocupa todo el ancho en la grid */
  margin-top: 20px;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
}

@media (max-width: 768px){
  .stats { grid-template-columns: 1fr 1fr; }
}

/* ===== Comité Organizador ===== */
.logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}

.logos li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.logo-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 2px solid rgba(47,124,255,.25);
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-circle img {
  width: 101%;
  height: 101%;
  object-fit: contain;
}

.logos p {
  font-size: 0.9rem;
  color: #333;
  max-width: 150px;
}

/* Responsivo */
@media (max-width: 900px) {
  .logos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .logos { grid-template-columns: 1fr; }
}

/* ===== Grid de logos (mantiene el look actual) ===== */
.org-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.org-card{
  display:block;
  border:1px dashed rgba(10,20,40,.12);
  border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,255,255,.42));
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}

/* header visual igual: logo redondo arriba, nombre centrado */
.card-head{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  width:100%; border:0; background:transparent; cursor:pointer;
  padding:16px 14px 12px;
}
.logo-circle{
  width:101px; height:101px; border-radius:50%;
  overflow:hidden; background:#fff;
  border:2px solid rgba(47,124,255,.25);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 18px rgba(0,0,0,.06) inset;
}
.logo-circle img{ width:101%; height:101%; object-fit:contain; display:block }
.org-name{ margin:0; text-align:center; font-weight:800; color:#2b2f42 }

/* panel desplegable (debajo, smooth) */
.org-card .more{
  max-height:0; opacity:0; overflow:hidden;
  transform: translateY(-6px);
  transition: max-height .35s ease, opacity .25s ease, transform .35s ease, padding .2s ease;
  padding:0 14px;
  text-align:center;
  color:#3d3f52;
}
.org-card.open .more{
  max-height:160px; /* sube si necesitas más texto */
  opacity:1; transform: translateY(0);
  padding:10px 14px 16px;
  border-top:1px dashed rgba(10,20,40,.12);
}

/* responsive */
@media (max-width: 1000px){
  .org-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px){
  .org-grid{ grid-template-columns: 1fr; }
  .logo-circle{ width:88px; height:88px }
}

/* ==== Inscripción (glass form) ==== */
.enroll { padding: 20px; }
.enroll h2 { margin-bottom: 6px; }
.enroll .muted { color: #5c637a; margin-bottom: 14px; }

.enroll .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.enroll .field { display: flex; flex-direction: column; gap: 6px; }
.enroll .field span.help { font-size: .85rem; color: #6a728a; }
.enroll .field input,
.enroll .field select,
.enroll .field textarea {
  border-radius: 12px;
  border: 1px solid rgba(47,124,255,.25);
  background: rgba(255,255,255,.7);
  padding: 10px 12px;
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
  backdrop-filter: blur(6px);
}
.enroll .field input:focus,
.enroll .field select:focus,
.enroll .field textarea:focus {
  border-color: rgba(0,128,255,.45);
  box-shadow: 0 0 0 4px rgba(0,128,255,.12);
  background: rgba(255,255,255,.9);
}
.enroll .field select[multiple] { min-height: 120px; }

.enroll .span-2 { grid-column: 1 / -1; }
.enroll .chk label { display: flex; gap: 8px; align-items: center; }

.enroll .actions { margin-top: 10px; display: flex; gap: 10px; }
.ok { color: #0a7c3a; }
.err { color: #b63a2d; }
.hidden { display: none; }

@media (max-width: 720px) {
  .enroll .grid { grid-template-columns: 1fr; }
}

#pais option {
  padding-left: 28px;              /* espacio para la bandera */
  background-repeat: no-repeat;
  background-position: 6px center; /* bandera alineada a la izquierda */
  background-size: 16px auto;      /* tamaño de la banderita */
}

/* ====== Form glass nice ====== */
.enroll { padding: 20px; }
.enroll h2 { margin-bottom: 6px; }
.enroll .muted { color: #5f6b7a; margin-bottom: 14px; }

.enroll form .grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.enroll .field{ display:flex; flex-direction:column; gap:6px; }
.enroll .field label{
  font-weight: 700;
  color:#1e2233;
}
.enroll .field input,
.enroll .field select,
.enroll .field textarea{
  border-radius: 12px;
  border:1px solid rgba(47,124,255,.25);
  background: rgba(255,255,255,.72);
  padding: 10px 12px;
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
  backdrop-filter: blur(6px);
}
.enroll .field input::placeholder,
.enroll .field textarea::placeholder{ color:#96a0b2; }

.enroll .field input:focus,
.enroll .field select:focus,
.enroll .field textarea:focus{
  border-color: rgba(0,128,255,.45);
  box-shadow: 0 0 0 4px rgba(0,128,255,.12);
  background: rgba(255,255,255,.92);
}

.enroll .span-2{ grid-column: 1 / -1; }
.enroll .actions{ margin-top: 8px; display:flex; gap:10px; }

/* mensajes */
.ok{ color:#0a7c3a; margin-top:8px; }
.err{ color:#b63a2d; margin-top:8px; }
.hidden{ display:none; }

/* input nativo feo off (opc) */
input[type="email"]::-webkit-contacts-auto-fill-button{ visibility:hidden; display:none !important; }

/* responsive */
@media (max-width: 760px){
  .enroll form .grid{ grid-template-columns: 1fr; }
}

/* =======================
   FORMULARIO INSCRIPCIÓN
   ======================= */

#contacto .card {
  padding: 24px;
}

#contacto form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

#contacto .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#contacto .field label {
  font-weight: 600;
  color: #1e2233;
  font-size: 0.95rem;
}

#contacto input,
#contacto select,
#contacto textarea {
  border-radius: 14px;
  border: 1px solid rgba(47, 124, 255, 0.25);
  background: rgba(255, 255, 255, 0.72);
  padding: 12px 14px;
  font-size: 0.95rem;
  outline: none;
  transition: all 0.2s ease;
  backdrop-filter: blur(6px);
  color: #222;
}

#contacto input::placeholder,
#contacto textarea::placeholder {
  color: #8b96a8;
}

#contacto input:focus,
#contacto select:focus,
#contacto textarea:focus {
  border-color: rgba(0, 128, 255, 0.45);
  box-shadow: 0 0 0 4px rgba(0, 128, 255, 0.12);
  background: rgba(255, 255, 255, 0.92);
}

#contacto textarea {
  min-height: 120px;
  resize: vertical;
}

/* botón enviar */
#contacto .btn.primary {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 12px 24px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 1rem;
}

/* mensajes */
#contacto .ok {
  grid-column: 1 / -1;
  color: #0a7c3a;
  font-weight: 600;
  margin-top: 6px;
}

#contacto .err {
  grid-column: 1 / -1;
  color: #b63a2d;
  font-weight: 600;
  margin-top: 6px;
}

/* responsive */
@media (max-width: 768px) {
  #contacto form {
    grid-template-columns: 1fr;
  }
}

/* ======================
   HERO CON LOGO
   ====================== */

.hero-content {
  display: grid;
  grid-template-columns: 1fr 260px; /* texto | logo */
  align-items: start;              /* logo alineado arriba */
  gap: 24px;
}

.hero-text {
  flex: 1;
}

.hero-logo {
  justify-self: end;
  display: flex;
  align-items: flex-start; /* asegura que el logo quede arriba */
  justify-content: center;
}

.hero-logo img {
  max-width: 220px;     /* tamaño del logo */
  height: auto;
  border-radius: 20px;  /* bordes suaves */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* responsive: apila logo abajo en móvil */
@media (max-width: 900px) {
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-logo {
    justify-self: center;
    margin-top: 16px;
  }
  .hero-logo img {
    max-width: 180px;
  }
}

/* panel de detalle: quita el tope fijo y deja que el JS mande la altura */
.speaker .more{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  transition: max-height .35s ease, opacity .25s ease, transform .35s ease, padding .2s ease;
  padding: 0 14px;
  width: 100%;
  will-change: max-height, transform, opacity;
}

/* ya no fijamos 320px aquí: el JS setea max-height dinámico */
.speaker.open .more{
  border-top: 1px dashed rgba(10,20,40,.12);
}

/* Chips base (ajústalo si ya tienes una clase .chip) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 22px rgba(16, 24, 40, .06);
  border: 1px solid rgba(16,24,40,.08);
  color: #1f2a37;
  font-weight: 500;
  cursor: default;
  user-select: none;
}

/* Convertir el pill en botón accesible */
.chip.expandable {
  cursor: pointer;
  position: relative;
}
.chip.expandable summary {
  list-style: none;
  outline: none;
}
.chip.expandable summary::-webkit-details-marker { display: none; }

/* Flechita */
.chip.expandable summary::after{
  content: "▾";
  font-size: .9rem;
  line-height: 1;
  margin-left: .4rem;
  transform: translateY(1px) rotate(0deg);
  transition: transform .25s ease;
  opacity: .65;
}
.chip.expandable[open] summary::after{
  transform: translateY(1px) rotate(180deg);
  opacity: .9;
}

/* Panel expandible */
.chip.expandable .chip-panel{
  margin-top: .6rem;
  padding: .9rem 1rem;
  border-radius: 14px;
  background: rgba(255,255,255,.7);
  border: 1px dashed rgba(16,24,40,.15);
  box-shadow: 0 10px 30px rgba(16,24,40,.08);
  max-width: min(980px, 100%);
  /* anim */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  transition: max-height .35s ease, opacity .25s ease, transform .35s ease;
}
.chip.expandable[open] .chip-panel{
  max-height: 800px;            /* suficiente para el texto largo */
  opacity: 1;
  transform: translateY(0);
}

/* === Chips base (ajusta si ya tienes .chip) === */
.chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem; border-radius:999px;
  background:#fff; color:#1f2a37; font-weight:500;
  border:1px solid rgba(16,24,40,.08);
  box-shadow:0 6px 22px rgba(16,24,40,.06);
  user-select:none;
}

/* Expandible */
.chip.expandable{ cursor:pointer; position:relative; }
.chip.expandable summary{ list-style:none; outline:0; }
.chip.expandable summary::-webkit-details-marker{ display:none; }

/* Flechita */
.chip.expandable summary::after{
  content:"▾"; font-size:.9rem; margin-left:.4rem;
  transform:translateY(1px) rotate(0deg);
  transition:transform .25s ease, opacity .25s ease;
  opacity:.65;
}
.chip.expandable[open] summary::after{
  transform:translateY(1px) rotate(180deg); opacity:.9;
}

/* Panel animado */
.chip.expandable .chip-panel{
  margin-top:.6rem;
  padding:.9rem 1rem;
  border-radius:14px;
  background:rgba(255,255,255,.72);
  border:1px dashed rgba(16,24,40,.15);
  box-shadow:0 10px 30px rgba(16,24,40,.08);

  /* animación suave con altura dinámica */
  max-height:0;
  opacity:0;
  overflow:hidden;
  transform:translateY(-6px);
  transition:max-height .38s ease, opacity .28s ease, transform .38s ease;
  will-change:max-height, transform, opacity;
}
.chip.expandable[open] .chip-panel{
  /* el max-height real lo setea JS para que sea exacto */
  opacity:1;
  transform:translateY(0);
}

/* --- Chips layout (por si hace falta) --- */
ul.chips{ display:flex; flex-wrap:wrap; gap:.6rem .6rem; }

/* La pill (details) debe comportarse como chip */
.chip.expandable{
  display:inline-block;                 /* que sea pill real */
  padding:.55rem .9rem;
  border-radius:999px;                  /* pill cerrada */
  background:#fff;
  color:#1f2a37;
  font-weight:500;
  border:1px solid rgba(16,24,40,.08);
  box-shadow:0 6px 22px rgba(16,24,40,.06);
  cursor:pointer;
}

/* Quitar bullet/flechita nativa */
.chip.expandable summary{ list-style:none; outline:0; }
.chip.expandable summary::-webkit-details-marker{ display:none; }

/* Flechita custom */
.chip.expandable summary::after{
  content:"▾"; font-size:.9rem; margin-left:.4rem;
  transform:translateY(1px) rotate(0deg);
  transition:transform .25s ease, opacity .25s ease;
  opacity:.65;
}
.chip.expandable[open] summary::after{
  transform:translateY(1px) rotate(180deg); opacity:.9;
}

/* ===== El contenido EXPANDE LA MISMA PILL ===== */
.chip.expandable .chip-panel{
  /* sin caja propia */
  background: transparent;
  border: 0;
  box-shadow: none;

  /* tipografía y espaciado */
  margin: 0;
  padding: 0.55rem 0 0 0;              /* un respiro arriba */
  line-height: 1.45;

  /* animación suave */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  transition: max-height .38s ease, opacity .28s ease, transform .38s ease;
  will-change: max-height, transform, opacity;
}

/* Cuando está abierta: la pill cambia de radio para verse natural */
.chip.expandable[open]{
  border-radius: 16px;                 /* de pill a “pastilla” abierta */
}
.chip.expandable[open] .chip-panel{
  /* la altura real la setea el JS; acá solo el resto de la anim */
  opacity: 1;
  transform: translateY(0);
}

.header-contacto {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .6rem;
}

.btn-whatsapp {
  display: inline-block;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  font-size: .9rem;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
}

/* Si tu form aún no es grid, activa esto */
#form-inscripcion{
  display:grid;
  grid-template-columns: 1fr 1fr;   /* dos columnas */
  gap: 14px;
}

/* Colocar cada botón en su columna */
#form-inscripcion .action-left{
  grid-column: 1 / 2;               /* debajo de la columna izquierda */
  justify-self: start;
}
#form-inscripcion .action-right{
  grid-column: 2 / 3;               /* en el espacio vacío a la derecha */
  justify-self: end;
}

/* Botón WhatsApp (si no lo tienes ya) */
.btn-whatsapp{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.7rem 1.1rem; border-radius:10px;
  background:#25D366; color:#fff; font-weight:600;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(37,211,102,.3);
  transition:transform .2s, box-shadow .2s;
}
.btn-whatsapp:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(37,211,102,.4); }
.btn-whatsapp svg{ display:block; }

/* Responsive: en pantallas chicas, apila y que ocupen ancho completo */
@media (max-width: 640px){
  #form-inscripcion{ grid-template-columns: 1fr; }
  #form-inscripcion .action-left,
  #form-inscripcion .action-right{ grid-column: 1 / -1; justify-self: stretch; }
  .btn.primary, .btn-whatsapp{ text-align:center; width:100%; }
}