/* ENCLAVE 150 · estilos del diseñador (no tocar sin diseño) */

:root{
  /* DinamiCash Design System - tokens oficiales (manual) */
  --dc-red:#FF4E62; --dc-yellow:#FECE26; --dc-purple:#5F154A; --dc-ink:#191A1F;
  --dc-coral-600:#F23A50; --dc-coral-700:#D62742; --dc-coral-50:#FFF0F1; --dc-coral-100:#FFDADE;
  --dc-purple-600:#4E1140; --dc-purple-700:#3C0D31; --dc-purple-50:#F6EEF3; --dc-purple-100:#EBD9E5;
  --dc-paper:#EDEDED; --dc-paper-2:#F4EFF2; --dc-white:#FFFFFF; --dc-cloud:#F0F0F3;
  --dc-line:#E7E7EC; --dc-line-2:#D9DAE0;
  --dc-ink-2:#45474F; --dc-ink-3:#75777F; --dc-ink-4:#A6A8B0;
  --dc-success:#1FB84B; --dc-success-bg:#E4F7EA; --dc-warning:#F5A623; --dc-warning-bg:#FFF3DE;
  --dc-danger:#E5342F; --dc-danger-bg:#FDE6E5;
  --grad:linear-gradient(105deg,#FF4E62 0%,#FECE26 100%);
  --grad-deep:linear-gradient(140deg,#5F154A 0%,#FF4E62 100%);
  --shadow-sm:0 2px 8px rgba(20,20,30,.07); --shadow-md:0 8px 24px rgba(20,20,32,.10);
  --shadow-brand:0 8px 20px rgba(255,78,98,.30);
  --font:'Montserrat','Gotham',system-ui,sans-serif;
  /* aliases legacy del markup */
  --purpura:var(--dc-purple); --rojo:var(--dc-red); --amarillo:var(--dc-yellow);
  --tinta:var(--dc-ink); --tinta2:var(--dc-ink-2); --gris:var(--dc-ink-3);
  --ok:var(--dc-success); --fondo:var(--dc-paper); --carta:var(--dc-white); --borde:var(--dc-line);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --dc-paper:#141418; --dc-paper-2:#1B1620; --dc-white:#1E1F26; --dc-cloud:#26272E;
    --dc-line:#32333B; --dc-line-2:#3D3E47;
    --dc-ink:#F2F2F5; --dc-ink-2:#C7C8CF; --dc-ink-3:#92939B; --dc-ink-4:#6A6B73;
    --dc-purple-50:#2A1424; --dc-purple-100:#3A1B31; --dc-coral-50:#33181C; --dc-coral-100:#432026;
    --dc-success-bg:#12301C; --dc-warning-bg:#332A14; --dc-danger-bg:#361716;
    --shadow-sm:0 2px 8px rgba(0,0,0,.4); --shadow-md:0 8px 24px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --dc-paper:#141418; --dc-paper-2:#1B1620; --dc-white:#1E1F26; --dc-cloud:#26272E;
  --dc-line:#32333B; --dc-line-2:#3D3E47;
  --dc-ink:#F2F2F5; --dc-ink-2:#C7C8CF; --dc-ink-3:#92939B; --dc-ink-4:#6A6B73;
  --dc-purple-50:#2A1424; --dc-purple-100:#3A1B31; --dc-coral-50:#33181C; --dc-coral-100:#432026;
  --dc-success-bg:#12301C; --dc-warning-bg:#332A14; --dc-danger-bg:#361716;
  --shadow-sm:0 2px 8px rgba(0,0,0,.4); --shadow-md:0 8px 24px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0}
body{font-family:var(--font);background:var(--dc-paper);color:var(--dc-ink);
  font-size:15px;line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased}

/* ===== Header business: color oscuro de marca ===== */
.top{background:var(--dc-purple-700);color:#fff;padding:18px 20px 14px;position:relative}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--grad)}
.top .marca{font-weight:800;font-size:20px;letter-spacing:-.01em;color:#fff}
.top .marca em{font-style:normal;color:var(--dc-yellow)}
.top .sub{font-size:12px;color:rgba(255,255,255,.75);margin-top:2px;font-weight:500}
.demo{display:inline-block;background:rgba(255,255,255,.12);color:rgba(255,255,255,.85);
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.25);border-radius:4px;padding:3px 10px;margin-top:8px}
#errbar{display:none;background:var(--dc-danger);color:#fff;padding:8px 16px;font-size:13px;font-weight:600}

/* ===== Nav pills ===== */
nav{display:flex;gap:8px;overflow-x:auto;padding:14px 16px;background:var(--dc-white);
  border-bottom:1px solid var(--dc-line);position:sticky;top:0;z-index:50}
nav a{flex:none;text-decoration:none;color:var(--dc-ink-2);font-weight:600;font-size:13px;
  padding:8px 14px;border-radius:8px;border:1px solid transparent;
  transition:all 180ms cubic-bezier(.22,1,.36,1)}
nav a:hover{background:var(--dc-cloud)}
nav a.act{background:var(--dc-purple);border-color:var(--dc-purple);color:#fff}
nav a:active{transform:scale(.97)}

main{max-width:560px;margin:0 auto;padding:20px 16px 60px}

/* ===== Cards ===== */
.card{background:var(--dc-white);border:1px solid var(--dc-line);border-radius:12px;
  padding:22px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
h2{font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--dc-ink);margin-bottom:6px}
h3{font-size:15px;font-weight:700;color:var(--dc-purple);margin:14px 0 6px}
:root[data-theme="dark"] h3{color:var(--dc-coral-100)}
p{color:var(--dc-ink-2);margin-bottom:10px}
label{display:block;font-size:13px;font-weight:700;color:var(--dc-ink);margin:12px 0 5px}
input,select{width:100%;padding:12px 14px;border:1.5px solid var(--dc-line-2);border-radius:10px;
  font-size:15px;font-family:var(--font);background:var(--dc-white);color:var(--dc-ink);outline:none;
  transition:border-color 140ms, box-shadow 140ms}
input:focus,select:focus{border-color:var(--dc-red);box-shadow:0 0 0 4px rgba(255,78,98,.25)}
.chk{display:flex;gap:10px;align-items:flex-start;margin:12px 0;font-size:13px;color:var(--dc-ink-2)}
.chk input{width:auto;margin-top:2px;accent-color:var(--dc-red)}

/* ===== Buttons: rojo = accion ===== */
button{width:100%;padding:14px;border:none;border-radius:10px;background:var(--dc-red);color:#fff;
  font-size:15px;font-weight:700;font-family:var(--font);cursor:pointer;margin-top:14px;
  box-shadow:var(--shadow-sm);transition:all 140ms cubic-bezier(.22,1,.36,1)}
button:hover{background:var(--dc-coral-600)}
button:active{transform:scale(.97)}
button.sec{background:transparent;color:var(--dc-purple);border:1.5px solid var(--dc-purple);box-shadow:none;font-weight:600}
:root[data-theme="dark"] button.sec{color:#fff;border-color:var(--dc-line-2)}
.aviso{font-size:12px;color:var(--dc-ink-3);margin-top:10px}

/* ===== Banners de estado ===== */
.banner{border-radius:8px;padding:12px 16px;font-size:13px;font-weight:600;margin-bottom:14px}
.banner.pend{background:var(--dc-warning-bg);color:#8A5A00;border:1px solid rgba(245,166,35,.4)}
.banner.ok{background:var(--dc-success-bg);color:var(--dc-success);border:1px solid rgba(31,184,75,.35)}

/* ===== Filas agenda ===== */
.fila{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--dc-line)}
.fila:last-child{border-bottom:none}
.fila small{color:var(--dc-ink-3)}
.hora{flex:none;width:86px;font-weight:800;font-size:13px;color:var(--dc-purple)}
:root[data-theme="dark"] .hora{color:var(--dc-yellow)}

/* ===== Pills estado ===== */
.pill{display:inline-block;border-radius:4px;padding:3px 10px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.pill.ok{background:var(--dc-success-bg);color:var(--dc-success)}
.pill.no{background:var(--dc-danger-bg);color:var(--dc-danger)}
.pill.gr{background:var(--dc-cloud);color:var(--dc-ink-3)}

.acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.acciones a,.acciones button{flex:1;min-width:130px;display:inline-block;text-align:center;text-decoration:none;
  padding:11px 14px;border-radius:10px;font-size:13px;font-weight:700;margin-top:0;
  background:var(--dc-red);color:#fff;border:none;box-shadow:var(--shadow-sm);cursor:pointer}
.acciones a.alt,.acciones button.alt{background:transparent;color:var(--dc-purple);
  border:1.5px solid var(--dc-purple);box-shadow:none}
:root[data-theme="dark"] .acciones a.alt,:root[data-theme="dark"] .acciones button.alt{color:#fff;border-color:var(--dc-line-2)}

/* ===== QR ===== */
.qrbox{display:flex;justify-content:center;padding:18px;background:var(--dc-white);border-radius:12px}
.qrph{width:200px;height:200px;border-radius:8px;background:var(--dc-cloud);display:flex;align-items:center;
  justify-content:center;color:var(--dc-ink-3);font-size:12px;text-align:center;padding:10px}

/* ===== Perfil networking ===== */
.perfil{text-align:center}
.perfil .n{font-size:22px;font-weight:800;color:var(--dc-ink)}
.perfil .c{font-size:14px;font-weight:600;color:var(--dc-purple);margin-top:2px}
:root[data-theme="dark"] .perfil .c{color:var(--dc-coral-100)}
.perfil .e{font-size:13px;color:var(--dc-ink-3);margin-top:2px}
.perfil .acciones a{margin-top:14px}

/* ===== Gafete: segmento business, color oscuro ===== */
.gafete{background:var(--dc-purple-700);border-radius:16px;overflow:hidden;color:#fff;
  max-width:340px;margin:0 auto;box-shadow:var(--shadow-md)}
.gafete .gh{background:var(--dc-purple);border-bottom:3px solid var(--dc-red);padding:18px 20px 14px;display:flex;justify-content:space-between;align-items:center}
.gafete .gh .gm{font-weight:800;font-size:16px;color:#fff}
.gafete .gh .gm em{font-style:normal;color:var(--dc-yellow)}
.gafete .gh .ge{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(255,255,255,.14);border-radius:4px;padding:4px 10px}
.gafete .gn{font-size:24px;font-weight:800;padding:18px 20px 2px;letter-spacing:-.01em}
.gafete .gc{font-size:14px;color:var(--dc-yellow);font-weight:700;padding:0 20px 14px}
.gafete .gq{background:#fff;margin:0 20px;border-radius:8px;padding:14px;display:flex;justify-content:center}
.gafete .gf{padding:14px 20px 18px;font-size:11px;color:rgba(255,255,255,.7);text-align:center;letter-spacing:.06em}

#video{width:100%;border-radius:8px;background:#000}

/* ===== Pasos recorrido ===== */
.paso{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--dc-line)}
.paso:last-child{border-bottom:none}
.paso .num{flex:none;width:30px;height:30px;border-radius:8px;background:var(--dc-purple);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.paso .tx b{display:block;color:var(--dc-ink);font-weight:700}
.paso .tx span{font-size:13px;color:var(--dc-ink-2)}
.paso .tx a{color:var(--dc-coral-700);font-weight:700;text-decoration:none}
:root[data-theme="dark"] .paso .tx a{color:var(--dc-red)}

/* ===== Modal ===== */
.modal{display:none;position:fixed;inset:0;background:rgba(25,26,31,.55);z-index:100;
  align-items:center;justify-content:center;padding:20px}
.modal .mbox{background:var(--dc-white);border-radius:14px;padding:24px;max-width:420px;width:100%;box-shadow:var(--shadow-md)}
.modal .mtxt{background:var(--dc-cloud);border-radius:8px;padding:14px;font-size:13px;color:var(--dc-ink-2);
  white-space:pre-wrap;margin:12px 0;max-height:220px;overflow-y:auto}
code{font-family:ui-monospace,Menlo,monospace;font-size:13px;background:var(--dc-purple-50);
  color:var(--dc-purple);padding:2px 7px;border-radius:6px;font-weight:600}
:root[data-theme="dark"] code{color:var(--dc-coral-100)}

/* ===== Landing narrativa ===== */
.hero{background:var(--dc-purple-700);color:#fff;border-radius:14px;padding:34px 24px 28px;
  margin-bottom:16px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--grad)}
.hero .kick{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--dc-yellow);text-transform:uppercase}
.hero .tit{font-size:40px;font-weight:800;line-height:1.02;margin:10px 0 6px;letter-spacing:-.01em}
.hero .tit em{font-style:normal;color:var(--dc-yellow)}
.hero .tema{font-size:16px;font-weight:600;color:rgba(255,255,255,.92)}
.hero .meta{font-size:13px;color:rgba(255,255,255,.72);margin-top:10px;line-height:1.6}
.hero .lead{font-size:14px;color:rgba(255,255,255,.85);margin-top:14px;border-left:3px solid var(--dc-red);padding-left:12px;line-height:1.55}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.chip{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 10px}
.kicker{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dc-coral-700);margin-bottom:4px}
:root[data-theme="dark"] .kicker{color:var(--dc-red)}
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
@media (max-width:460px){.vgrid{grid-template-columns:1fr}}
.vitem{border:1px solid var(--dc-line);border-radius:10px;padding:14px;background:var(--dc-white)}
.vitem b{display:block;font-size:14px;color:var(--dc-ink);margin:8px 0 4px}
.vitem span{font-size:12.5px;color:var(--dc-ink-2);line-height:1.45}
.vnum{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;
  background:var(--dc-purple-50);color:var(--dc-purple);font-weight:800;font-size:13px}
:root[data-theme="dark"] .vnum{background:var(--dc-purple-100);color:#fff}
.spk{display:flex;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--dc-line)}
.spk:last-child{border-bottom:none}
.avat{flex:none;width:64px;height:64px;border-radius:10px;background:var(--grad-deep);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;letter-spacing:.02em}
.avat.ph{background:var(--dc-cloud);color:var(--dc-ink-4);font-size:11px;font-weight:700;text-align:center;line-height:1.2}
.spk b{display:block;font-size:15px;color:var(--dc-ink)}
.spk .rol{font-size:12px;font-weight:700;color:var(--dc-purple);text-transform:uppercase;letter-spacing:.06em}
:root[data-theme="dark"] .spk .rol{color:var(--dc-yellow)}
.spk span{font-size:13px;color:var(--dc-ink-2);line-height:1.4}
.ph-img{border-radius:10px;background:linear-gradient(140deg,var(--dc-purple-700) 0%,var(--dc-purple) 70%);
  color:rgba(255,255,255,.85);min-height:130px;display:flex;align-items:flex-end;padding:14px;
  font-size:12px;font-weight:600;margin-top:12px;position:relative;overflow:hidden}
.ph-img::before{content:"";position:absolute;inset:0;background:
  radial-gradient(90% 70% at 85% 10%, rgba(255,78,98,.35) 0%, transparent 60%)}
.ph-img i{position:relative;font-style:normal}
.ctafin{background:var(--dc-ink);color:#fff;border-radius:14px;padding:26px 22px;text-align:center;margin-bottom:16px}
:root[data-theme="dark"] .ctafin{background:var(--dc-purple-700)}
.ctafin b{display:block;font-size:19px;font-weight:800;margin-bottom:6px}
.ctafin p{color:rgba(255,255,255,.75);font-size:13.5px}
.ctafin a{display:inline-block;background:var(--dc-red);color:#fff;font-weight:700;font-size:14px;
  text-decoration:none;border-radius:10px;padding:13px 28px;margin-top:12px}


.spk-feat{border:1px solid var(--dc-line);border-radius:12px;padding:18px;margin-bottom:12px;background:var(--dc-white)}
.spk-feat .cab{display:flex;gap:14px;align-items:center}
.spk-feat .avat{width:76px;height:76px;font-size:24px}
.spk-feat .bio{font-size:13.5px;color:var(--dc-ink-2);line-height:1.5;margin-top:12px}
.corps{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.corps span{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--dc-purple);
  background:var(--dc-purple-50);border-radius:4px;padding:4px 9px}
:root[data-theme="dark"] .corps span{color:#fff;background:var(--dc-purple-100)}
.medios{font-size:12px;color:var(--dc-ink-3);margin-top:10px}
.medios b{color:var(--dc-ink)}
.linkpod{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:var(--dc-coral-700);text-decoration:none}
.linkpod:hover{text-decoration:underline}
:root[data-theme="dark"] .linkpod{color:var(--dc-red)}


.spk-hero{background:var(--dc-purple-700);border-radius:14px;overflow:hidden;color:#fff;margin-bottom:14px}
.spk-hero .foto{min-height:180px;background:linear-gradient(160deg,#2A0A21 0%,var(--dc-purple) 85%);
  position:relative;display:flex;align-items:flex-end;padding:14px 18px}
.spk-hero .foto::before{content:"";position:absolute;inset:0;background:
  radial-gradient(85% 75% at 80% 15%, rgba(255,78,98,.4) 0%, transparent 55%),
  radial-gradient(60% 50% at 15% 90%, rgba(254,206,38,.18) 0%, transparent 60%)}
.spk-hero .foto i{position:relative;font-style:normal;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.75)}
.spk-hero .cuerpo{padding:18px 20px 20px}
.spk-hero .rol{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dc-yellow)}
.spk-hero .nom{font-size:30px;font-weight:800;line-height:1.05;margin:6px 0 4px;letter-spacing:-.01em}
.spk-hero .tagline{font-size:14px;font-weight:600;color:rgba(255,255,255,.88)}
.spk-hero .bio{font-size:13.5px;color:rgba(255,255,255,.78);line-height:1.55;margin-top:12px}
.spk-hero .bio u{text-decoration:underline;text-decoration-color:var(--dc-red);text-decoration-thickness:2.5px;
  text-underline-offset:3px;color:#fff;font-weight:700}
.spk-hero .corps{margin-top:12px}
.spk-hero .corps span{background:rgba(255,255,255,.1);color:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.18)}
.spk-hero .corps span.lead{background:var(--dc-red);color:#fff;border-color:var(--dc-red)}
.spk-hero .medios{color:rgba(255,255,255,.6);margin-top:12px}
.spk-hero .medios b{color:var(--dc-yellow)}
.spk-hero .linkpod{color:var(--dc-yellow)}

@media print{ body *{visibility:hidden} .gafete,.gafete *{visibility:visible} .gafete{position:absolute;top:0;left:0} }

/* ===== 09-oct · brochure ENCLAVE150 ===== */
.hero .tema{font-size:17px;line-height:1.4}
em.cur{font-style:italic;color:var(--dc-purple);font-weight:600}
:root[data-theme="dark"] em.cur{color:var(--dc-coral-100)}
p.destaca{font-weight:600;color:var(--dc-ink);border-left:3px solid var(--dc-red);padding-left:12px}
.spk{align-items:flex-start}
.spk .cargo{display:block;font-size:12.5px;font-weight:600;color:var(--dc-ink-3);margin:2px 0 6px}
.charla{display:block;margin-top:8px;font-size:13px;font-weight:700;color:var(--dc-coral-700)}
.charla::before{content:"Charla · ";font-weight:600;color:var(--dc-ink-3)}
:root[data-theme="dark"] .charla{color:var(--dc-red)}
.spk-hero .charla{color:var(--dc-yellow)}
.spk-hero .charla::before{color:rgba(255,255,255,.6)}
.fila.crono small{display:block;margin-top:2px}
.fila.crono .hora{width:92px}
.chips-claro{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.chips-claro span{font-size:12.5px;font-weight:700;color:var(--dc-purple);background:var(--dc-purple-50);border-radius:6px;padding:6px 11px}
.pend-caja{background:#FFF6D6;border:1px dashed #E3C34A;color:#6B5200;border-radius:8px;padding:10px 12px;font-size:12.5px;line-height:1.5;margin:12px 0 0}
.pend-caja.oscura{background:rgba(254,206,38,.14);border-color:rgba(254,206,38,.5);color:#FBE7A1;text-align:left;margin-top:16px}
.card.nota p{color:var(--dc-ink)}
.firma{font-weight:800;margin-top:14px}
.firma small{display:block;font-weight:600;color:var(--dc-ink-3);font-size:12.5px}
.fila>span>b+small{display:block;margin-top:1px}

/* ═════════ 09-oct · LINEA GRAFICA ENCLAVE 150 (PDF del usuario) ═════════
   Fondo "negro escenario" con luz calida ambar y grano; el coral como unico acento;
   tarjetas redondeadas; logo del evento en sans fina espaciada; nombres, datos y
   botones en sans bold mayuscula. Se fuerza el tema oscuro en todas las vistas. */
:root:root:root{
  --dc-red:#F85658; --dc-coral-600:#E9474F; --dc-coral-700:#F85658; --dc-yellow:#F85658; --dc-purple:#F85658;
  --dc-purple-600:#1A1A1E; --dc-purple-700:#1A1A1E; --dc-purple-50:rgba(248,86,88,.14); --dc-purple-100:rgba(248,86,88,.22);
  --dc-coral-50:rgba(248,86,88,.12); --dc-coral-100:#FF9B9C;
  --dc-paper:#080606; --dc-paper-2:#100B0A; --dc-white:#16141A; --dc-cloud:#221F25;
  --dc-line:rgba(255,255,255,.09); --dc-line-2:rgba(255,255,255,.16);
  --dc-ink:#F5F2F0; --dc-ink-2:#CFC9C6; --dc-ink-3:#9A938F; --dc-ink-4:#6E6865;
  --dc-success-bg:rgba(31,184,75,.14); --dc-warning-bg:rgba(245,166,35,.14); --dc-danger-bg:rgba(229,52,47,.16);
  --grad:linear-gradient(90deg,#F85658,rgba(248,86,88,0));
  --shadow-sm:0 2px 10px rgba(0,0,0,.45); --shadow-md:0 14px 36px rgba(0,0,0,.55);
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  color-scheme:dark}
body{background:
  var(--grano),
  radial-gradient(70% 34% at 50% -4%,rgba(255,150,70,.22),rgba(255,150,70,0) 70%),
  radial-gradient(40% 30% at 0% 22%,rgba(255,130,60,.12),rgba(255,130,60,0) 70%),
  radial-gradient(40% 30% at 100% 46%,rgba(255,130,60,.10),rgba(255,130,60,0) 70%),
  #080606;background-attachment:fixed}
/* encabezado: dinamicash a la izquierda, ENCLAVE 150 a la derecha */
.top{background:transparent;padding:18px 20px 12px}
.top::after{height:1px;background:linear-gradient(90deg,rgba(248,86,88,0),#F85658,rgba(248,86,88,0));opacity:.6}
.top-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:560px;margin:0 auto}
.top-dc{height:22px;width:auto;display:block}
.top .marca{font-weight:300;font-size:19px;letter-spacing:.28em;margin-right:-.28em}
.top .sub{max-width:560px;margin:8px auto 0;color:rgba(255,255,255,.45);font-size:11px}
nav{background:rgba(8,6,6,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--dc-line)}
nav a{color:var(--dc-ink-2)}
nav a:hover{background:var(--dc-cloud)}
nav a.act{background:#F85658;border-color:#F85658;color:#fff}
/* tarjetas */
.card,.vitem,.spk-feat{background:var(--grano),linear-gradient(180deg,#1C191F,#141217);border:1px solid var(--dc-line);border-radius:16px;box-shadow:var(--shadow-sm)}
.kicker{color:#F85658;letter-spacing:.2em}
h2{color:var(--dc-ink)}
h3{color:#F85658}
p{color:var(--dc-ink-2)}
.hora{color:#F85658}
.fila{border-bottom-color:var(--dc-line)}
/* portada: el flyer oficial */
.portada{margin:0 0 14px;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-md)}
.portada img{display:block;width:100%;height:auto}
/* tarjeta coral: coral pleno arriba que se desvanece hacia abajo, con grano */
.hero{background:var(--grano),linear-gradient(180deg,#F85658 0%,rgba(248,86,88,.78) 38%,rgba(248,86,88,.18) 82%,rgba(248,86,88,0) 100%),#140F10;
  border:1px solid rgba(248,86,88,.35);border-radius:16px;padding:28px 22px 24px}
.hero::after{display:none}
.hero .kick{color:#fff;opacity:.85;letter-spacing:.2em}
.hero .tit{font-weight:300;font-size:38px;letter-spacing:.24em;margin:12px 0 10px;line-height:1.05}
.pilares{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:11px;font-weight:300;letter-spacing:.24em;text-transform:uppercase;color:#fff}
.pilares i{width:5px;height:5px;border-radius:50%;background:#fff;opacity:.85}
.hero .tema{margin-top:16px;color:#fff;font-weight:700}
.hero .lead{border-left-color:#fff;color:rgba(255,255,255,.88)}
.datos{display:flex;gap:10px;margin-top:20px}
.datos>*{border-radius:12px;padding:12px 14px;font-weight:800;font-size:13px;line-height:1.25;text-transform:uppercase;letter-spacing:.02em;color:#fff;
  background:#F85658;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.datos span{flex:1}
.datos a{display:flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap}
.datos a svg{width:22px;height:22px;flex:0 0 22px}
/* botones */
button,.acciones a,.acciones button,.ctafin a{background:#F85658;text-transform:uppercase;letter-spacing:.04em;font-weight:800}
button:hover{background:#E9474F}
.acciones a.alt,.acciones button.alt,button.sec{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4);box-shadow:none}
/* speakers: flyer + texto */
.flyer{border-radius:16px;overflow:hidden;border:1px solid var(--dc-line);background:#110E10;margin:14px 0}
.flyer img{display:block;width:100%;height:auto}
.flyer .cuerpo{padding:16px 18px 18px;background:var(--grano),linear-gradient(180deg,rgba(248,86,88,.16),rgba(248,86,88,0) 60%)}
.flyer .rol{display:block;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#F85658}
.flyer .nom{display:inline-block;margin:8px 0 4px;background:#F85658;color:#fff;font-size:20px;font-weight:800;padding:2px 8px;border-radius:4px}
.flyer .cargo{display:block;font-size:12.5px;font-weight:700;color:#fff;margin-bottom:8px}
.flyer .bio{font-size:13.5px;color:var(--dc-ink-2);line-height:1.55}
.flyer .charla{color:#fff}
.flyer .charla::before{color:#F85658}
.charla{color:#fff}
.charla::before{color:#F85658}
.avat{background:var(--grano),linear-gradient(180deg,#F85658,rgba(248,86,88,.35))}
.spk .rol{color:#F85658}
.linkpod{color:#FF9B9C}
/* chips, cierre, pie */
.chips-claro span{color:#fff;background:rgba(248,86,88,.18);border:1px solid rgba(248,86,88,.35)}
em.cur{color:#FF9B9C}
p.destaca{color:#fff;border-left-color:#F85658}
.ctafin{background:var(--grano),linear-gradient(180deg,#F85658,rgba(248,86,88,.25) 85%),#140F10;border:1px solid rgba(248,86,88,.35)}
.ctafin p{color:rgba(255,255,255,.85)}
.ctafin a{background:#fff;color:#F85658}
.pie-ev{text-align:center;font-size:11px;font-weight:300;letter-spacing:.32em;color:rgba(255,255,255,.55);margin:22px 0 6px}
.card.nota p{color:var(--dc-ink)}
.pend-caja{background:rgba(254,206,38,.10);border-color:rgba(254,206,38,.45);color:#F5DE95}
input,select{background:#100D10;border-color:var(--dc-line-2);color:var(--dc-ink)}
.gafete{background:#1A1A1E}
.gafete .gh{background:#F85658;border-bottom-color:#fff}
.gafete .gc{color:#FF9B9C}
code{background:rgba(248,86,88,.14);color:#FF9B9C}
@media (max-width:420px){.hero .tit{font-size:30px}.datos{flex-direction:column}}

/* ═════════ 09-oct · Escritorio: la landing deja de verse como celular ═════════
   Desde 960 px la pagina se abre a 1120 px y la landing va en dos columnas;
   el portal (registro, panel, escaner) se queda en una columna mas ancha.
   En celular no cambia nada. */
@media (min-width:960px){
  .top-fila,.top .sub{max-width:1120px}
  nav{justify-content:center}
  main{max-width:1120px;padding:32px 32px 80px}
  main:not(.vista-landing){max-width:760px}
  .vista-landing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
  .vista-landing>*{margin:0!important}
  .vista-landing>.hero,.vista-landing>.ctafin,.vista-landing>.acciones,.vista-landing>.pie-ev,
  .vista-landing>.card:has(.flyer),.vista-landing>.card:has(.crono){grid-column:1/-1}
  /* portada ancha: texto a la izquierda, datos y botones a la derecha */
  .vista-landing>.hero{display:grid;grid-template-columns:1.25fr 1fr;column-gap:48px;padding:52px 52px 46px}
  .vista-landing>.hero>*{grid-column:1}
  .vista-landing>.hero>.datos,.vista-landing>.hero>.acciones{grid-column:2}
  .vista-landing>.hero>.datos{grid-row:1 / span 3;align-self:end;flex-direction:column;margin-top:0}
  .vista-landing>.hero>.acciones{grid-row:4 / span 2;align-self:end}
  .vista-landing>.hero .tit{font-size:clamp(44px,4vw,56px);letter-spacing:.2em;white-space:nowrap}
  .vista-landing>.hero .tema{font-size:22px;max-width:28ch}
  .vista-landing>.hero .lead{font-size:15.5px;max-width:52ch}
  .vista-landing .card{padding:30px}
  .vista-landing h2{font-size:26px}
  /* speakers en dos columnas */
  .vista-landing>.card:has(.flyer){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
  .vista-landing>.card:has(.flyer)>:not(.flyer){grid-column:1/-1}
  .vista-landing .flyer{margin:8px 0}
  /* cronograma en dos columnas */
  .vista-landing>.card:has(.crono){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
  .vista-landing>.card:has(.crono)>:not(.crono){grid-column:1/-1}
  .vista-landing>.ctafin{padding:44px}
  .vista-landing>.acciones{justify-content:center}
  .vista-landing>.acciones a{flex:0 0 auto;min-width:220px}
}

/* ═════════ 09-oct · Hero animado (video de referencia 1009.mp4) ═════════
   1) "Dinamicash presenta" entra palabra por palabra desde un desenfoque.
   2) La primera foto sube girada desde abajo; las otras salen detras y se abren
      en abanico, cada una con un leve giro (fotos en B/N que se funden en coral).
   3) ENCLAVE 150 palabra por palabra, luego pilares, texto, datos y botones.
   4) Las etiquetas de cada speaker aparecen al final. Todo CSS (sin JS). */
.hero.animada{text-align:center}
.hero.animada .lead{text-align:left;max-width:52ch;margin-left:auto;margin-right:auto}
.hero.animada .pilares{justify-content:center}
.hero.animada .datos{justify-content:center}
.hero.animada .acciones{justify-content:center}
.pal{display:inline-block;animation:pal-in .7s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d,0s)}
@keyframes pal-in{from{opacity:0;filter:blur(10px);transform:translate3d(0,.3em,0)}to{opacity:1;filter:none;transform:none}}
.sube{animation:sube-in .7s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d,0s)}
@keyframes sube-in{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
.abanico{display:flex;justify-content:center;align-items:center;margin:22px auto 8px;padding:12px 0 18px}
.carta{--w:min(23%,190px);--r:calc(var(--k) * -4deg);--y:calc(var(--k) * var(--k) * 4px);
  position:relative;flex:0 0 var(--w);aspect-ratio:3/4;margin:0 -1.2%;border-radius:14px;overflow:hidden;
  border:3px solid rgba(255,255,255,.92);box-shadow:0 18px 36px -12px rgba(0,0,0,.6);background:#222;
  transform:translate3d(0,var(--y),0) rotate(var(--r));z-index:calc(4 - var(--i));
  animation:carta-in 1.5s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(.45s + var(--i) * .07s);
  transition:transform .35s cubic-bezier(.16,1,.3,1)}
.carta:nth-child(1){z-index:5}
.carta img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.06);transition:filter .4s ease}
.carta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(248,86,88,0) 45%,rgba(248,86,88,.55) 78%,rgba(248,86,88,.92) 100%)}
.carta figcaption{position:absolute;z-index:1;left:8px;right:8px;bottom:8px;font-size:clamp(9px,1.1vw,13px);font-weight:800;color:#fff;line-height:1.15;text-align:left}
.etq{position:absolute;z-index:2;top:8px;left:8px;font-size:clamp(8px,.85vw,10.5px);font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:#F85658;border-radius:999px;padding:3px 8px;white-space:nowrap;
  animation:etq-in .5s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(2.4s + var(--i) * .12s)}
@keyframes etq-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
/* la tarjeta sube desde abajo girada, se apila en el centro y luego se abre en abanico */
@keyframes carta-in{
  0%{opacity:0;transform:translate3d(calc(var(--k) * 92%),180px,0) rotate(-16deg) scale(.9)}
  38%{opacity:1;transform:translate3d(calc(var(--k) * 92%),0,0) rotate(calc(-8deg + var(--i) * 2deg))}
  100%{opacity:1;transform:translate3d(0,var(--y),0) rotate(var(--r))}}
@media (hover:hover) and (pointer:fine){
  .carta:hover{transform:translate3d(0,calc(var(--y) - 10px),0) rotate(0deg);z-index:6}
  .carta:hover img{filter:none}}
@media (min-width:960px){
  .vista-landing>.hero.animada{display:block;padding:44px 52px 46px}
  .vista-landing>.hero.animada .tit{font-size:clamp(46px,4.4vw,62px)}
  .vista-landing>.hero.animada .tema{max-width:34ch;margin-left:auto;margin-right:auto}
  .vista-landing>.hero.animada .datos{flex-direction:row;max-width:620px;margin-left:auto;margin-right:auto}
  .abanico{margin-top:28px}
  .carta{--w:190px}}
@media (prefers-reduced-motion:reduce){.pal,.sube,.carta,.etq{animation:none}}

/* 09-oct: la portada ya no va encerrada en una tarjeta: el contenido queda suelto
   sobre el fondo de escenario, con un resplandor coral detras de las fotos */
.hero.animada{background:radial-gradient(60% 46% at 50% 30%,rgba(248,86,88,.30),rgba(248,86,88,0) 70%)!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;padding-left:0!important;padding-right:0!important;overflow:visible}
.hero.animada .kick{color:#F85658;opacity:1}
.hero.animada .lead{border-left-color:#F85658}
.hero.animada .pilares i{background:#F85658}

/* 09-oct ("no encierres la informacion en un cuadrado"): en la landing ninguna seccion
   va dentro de una caja; son bloques abiertos sobre el fondo, separados por una linea fina */
.vista-landing>.card,.vista-landing>.ctafin{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  padding:30px 0!important;border-top:1px solid rgba(255,255,255,.09)!important}
.vista-landing .vitem,.vista-landing .flyer{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important}
.vista-landing .flyer{border-left:2px solid #F85658!important;padding-left:16px!important}
.vista-landing .flyer .cuerpo{background:none!important;padding:0!important}
.vista-landing .vitem{border-left:2px solid #F85658!important;padding-left:14px!important}
.vista-landing>.ctafin{text-align:center;background:radial-gradient(50% 60% at 50% 50%,rgba(248,86,88,.22),rgba(248,86,88,0) 70%)!important}
.vista-landing>.ctafin a{background:#F85658;color:#fff}
.vista-landing .pend-caja.oscura{max-width:520px;margin-left:auto;margin-right:auto}
@media (min-width:960px){.vista-landing>.card,.vista-landing>.ctafin{padding:36px 0!important}
  .vista-landing>.card:nth-child(odd of .card){padding-right:20px!important}}

/* ═════════ 09-oct · Portada: Dinamicash presenta -> logo ENCLAVE 150 -> fotos ═════════
   La portada ocupa la pantalla y solo muestra esas tres cosas; lo demas (pilares,
   texto, datos, botones y secciones) aparece al hacer scroll. */
.hero.animada{min-height:calc(100svh - 150px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:28px!important;padding-bottom:28px!important;margin-bottom:0!important}
.hero.animada .kick{font-size:12px;letter-spacing:.32em;margin:0}
.logo-ev{margin:18px auto 6px;width:min(560px,86%);line-height:0}
.logo-ev img{width:100%;height:auto;display:block;animation:logo-in 1.1s cubic-bezier(.16,1,.3,1) .75s both}
@keyframes logo-in{from{opacity:0;filter:blur(14px);transform:scale(1.06);letter-spacing:.3em}to{opacity:1;filter:none;transform:none}}
.hero.animada .carta{animation-delay:calc(1.65s + var(--i) * .07s)}
.hero.animada .etq{animation-delay:calc(3.2s + var(--i) * .12s)}
.baja{margin-top:18px;display:inline-flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.6);text-decoration:none;animation:sube-in .7s ease 3.4s both}
.baja svg{width:20px;height:20px;animation:baja-rebota 1.8s ease-in-out 4.2s infinite}
@keyframes baja-rebota{0%,100%{transform:none}50%{transform:translateY(5px)}}
.hero-info{text-align:center;padding:34px 0 10px;border-top:1px solid rgba(255,255,255,.09)}
.hero-info .pilares,.hero-info .datos,.hero-info .acciones{justify-content:center}
.hero-info .pilares{color:#fff}
.hero-info .pilares i{background:#F85658}
.hero-info .tema{margin:16px auto 0;color:#fff;font-weight:700;font-size:20px;max-width:34ch}
.hero-info .lead{margin:14px auto 0;max-width:52ch;text-align:left;font-size:14.5px;color:rgba(255,255,255,.85);border-left:3px solid #F85658;padding-left:12px}
.hero-info .datos{max-width:620px;margin:20px auto 0}
.hero-info .acciones{max-width:620px;margin:14px auto 0!important}
/* aparecer al llegar con el scroll (solo si hay JS) */
.js-rev .revelar{opacity:0;transform:translate3d(0,26px,0);transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.js-rev .revelar.visto{opacity:1;transform:none}
@media (min-width:960px){
  .vista-landing>.hero-info{grid-column:1/-1}
  .vista-landing>.hero.animada{min-height:calc(100svh - 170px);display:flex!important}
  .hero-info .tema{font-size:24px}}
@media (max-width:420px){.hero-info .datos{flex-direction:column}.logo-ev{width:92%}}
@media (prefers-reduced-motion:reduce){.logo-ev img,.baja,.baja svg{animation:none}}

/* 09-oct (boceto del usuario): las fotos son rectangulos altos y angostos, rectos y
   separados; alternan altura (1 y 3 mas abajo, 2 y 4 mas arriba). Orden: hombre,
   mujer, hombre, mujer. Suben desde abajo una tras otra y quedan en su lugar. */
.hero.animada .abanico{align-items:flex-start;gap:14px;margin:26px auto 4px;padding:0 0 30px}
.hero.animada .carta{--w:clamp(68px,9vw,124px);--r:0deg;--y:26px;flex:0 0 var(--w);width:var(--w);height:calc(var(--w) * 2.5);aspect-ratio:auto;
  margin:0;border-radius:18px;border-width:2px;z-index:1;
  animation:carta-sube 1.1s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(1.65s + var(--i) * .14s)}
.hero.animada .carta:nth-child(even){--y:0px}
.hero.animada .carta img{object-position:50% 30%}
.hero.animada .carta figcaption{font-size:clamp(8.5px,.95vw,12px);left:7px;right:7px;bottom:9px}
.hero.animada .etq{left:50%;top:8px;transform-origin:center;translate:-50% 0;font-size:clamp(7px,.75vw,9.5px);padding:3px 7px;white-space:normal;width:max-content;max-width:calc(100% - 10px);text-align:center;line-height:1.15}
@keyframes carta-sube{0%{opacity:0;transform:translate3d(0,calc(var(--y) + 120px),0) scale(.94)}100%{opacity:1;transform:translate3d(0,var(--y),0)}}
@media (hover:hover) and (pointer:fine){.hero.animada .carta:hover{transform:translate3d(0,calc(var(--y) - 8px),0)}}

/* 09-oct: fotos de la portada con esquinas rectas y sin borde blanco */
.hero.animada .carta{border-radius:0!important;border:0!important}

/* 09-oct (boceto): "Dinamicash presenta" sube a la linea verde y el logo a la azul;
   las fotos se quedan donde estan */
.hero.animada>.kick{transform:translate3d(0,-72px,0)}
.hero.animada>.logo-ev{transform:translate3d(0,-30px,0)}

/* 09-oct (boceto verde): las fotos suben juntas en el centro y al llegar se
   expanden hacia los lados; quedan mas separadas, algo mas grandes y con mas
   diferencia de altura (2 y 4 arriba, 1 y 3 abajo) */
.hero.animada .abanico{--gap:clamp(18px,3.6vw,48px);gap:var(--gap);padding-bottom:64px}
.hero.animada .carta{--w:clamp(72px,9.6vw,120px);height:calc(var(--w) * 2.55);--y:58px;
  animation:carta-expande 1.6s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(1.6s + var(--i) * .06s)}
.hero.animada .carta:nth-child(even){--y:0px}
@keyframes carta-expande{
  0%{opacity:0;transform:translate3d(calc(var(--k) * (100% + var(--gap)) * .78),190px,0) scale(.9)}
  45%{opacity:1;transform:translate3d(calc(var(--k) * (100% + var(--gap)) * .78),30px,0) scale(.97)}
  100%{opacity:1;transform:translate3d(0,var(--y),0)}}

/* 09-oct: sombra marcada en cada foto de la portada (sombra negra + leve brillo coral abajo) */
.hero.animada .carta{box-shadow:0 2px 4px rgba(0,0,0,.35),0 22px 40px -10px rgba(0,0,0,.75),0 30px 60px -24px rgba(248,86,88,.45)!important}

/* 09-oct (video de referencia Klickpin): el logo ENCLAVE 150 se dibuja por fragmentos
   que aparecen en desorden (cada trozo se "pinta" desde un lado) hasta completar la
   palabra; recien cuando el logo esta completo suben las fotos. Los trozos los arma
   trazarLogo(); sin JS o con reduced-motion el logo entra como antes. */
.logo-ev{position:relative}
.logo-ev.trazos img{animation:trz-img 0s linear 2.35s both}
@keyframes trz-img{from{opacity:0}to{opacity:1}}
.logo-ev .trz{position:absolute;display:block;background:var(--logo) no-repeat;pointer-events:none;
  animation:var(--a) var(--t) cubic-bezier(.65,0,.35,1) var(--d) both,trz-fin 0s linear 2.35s forwards}
@keyframes trz-l{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes trz-r{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
@keyframes trz-t{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes trz-b{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes trz-fin{to{visibility:hidden}}
.hero.reinicia,.hero.reinicia *{animation:none!important}
/* 09-oct: version mas sutil, en dos lineas: cada trozo se desliza poco, con fundido y
   leve desenfoque (la linea de arriba baja, la de abajo sube) */
@keyframes trz-t{from{opacity:0;filter:blur(3px);clip-path:inset(0 0 100% 0);transform:translate3d(-2px,-3px,0)}
  60%{opacity:.85}to{opacity:1;filter:none;clip-path:inset(0);transform:none}}
@keyframes trz-b{from{opacity:0;filter:blur(3px);clip-path:inset(100% 0 0 0);transform:translate3d(-2px,3px,0)}
  60%{opacity:.85}to{opacity:1;filter:none;clip-path:inset(0);transform:none}}
.logo-ev .trz{animation-timing-function:cubic-bezier(.22,1,.36,1),linear}
/* las fotos esperan a que el logo termine */
.hero.animada .carta{animation-delay:calc(2.45s + var(--i) * .06s)}
.hero.animada .etq{animation-delay:calc(4.05s + var(--i) * .12s)}
.baja{animation-delay:4.3s}
.baja svg{animation-delay:5.1s}
@media (prefers-reduced-motion:reduce){.logo-ev .trz{display:none}.logo-ev.trazos img{animation:none}}

/* 09-oct (referencia Klickpin "Pallet Ross"): al bajar, las 4 fotos de la portada te
   siguen: se juntan en una pila al centro de la pantalla y, cuando llega la seccion
   siguiente, se abren en cascada diagonal al lado del texto. Lo mueve fotosSiguen();
   sin JS o con reduced-motion las fotos se quedan en la portada. */
.hero.animada{overflow:visible!important;z-index:4}
.hero.animada .carta.sigue{will-change:transform}
.hero-info .destino{position:relative;margin:30px auto 8px;pointer-events:none}
@media (min-width:960px){
  .hero-info.con-destino{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:64px;align-items:center;text-align:left;padding-top:56px}
  .hero-info.con-destino>*{grid-column:1}
  .hero-info.con-destino>.destino{grid-column:2;grid-row:1 / span 5;margin:0}
  .hero-info.con-destino .pilares,.hero-info.con-destino .datos,.hero-info.con-destino .acciones{justify-content:flex-start}
  .hero-info.con-destino .tema,.hero-info.con-destino .lead,.hero-info.con-destino .datos,.hero-info.con-destino .acciones{margin-left:0;margin-right:0}
  .hero-info.con-destino .tema{font-size:30px;line-height:1.2;max-width:22ch}}

/* 09-oct: "no lo encierres en un cuadro": los botones de la portada (Asegura tu lugar /
   Tengo una clave) son texto subrayado, sin caja */
.hero-info .acciones{gap:28px;align-items:center}
.hero-info .acciones a,.hero-info .acciones a.alt{flex:0 0 auto;min-width:0;padding:4px 0;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  color:#F85658;font-size:13px;letter-spacing:.14em;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:7px;transition:color .2s ease,text-underline-offset .2s ease}
.hero-info .acciones a.alt{color:#fff;text-decoration-color:rgba(255,255,255,.45)}
@media (hover:hover) and (pointer:fine){.hero-info .acciones a:hover{color:#fff;text-underline-offset:4px}
  .hero-info .acciones a.alt:hover{color:#F85658;text-decoration-color:#F85658}}
.hero-info .acciones a:focus-visible{outline:2px solid #F85658;outline-offset:4px}
@media (min-width:960px){.hero-info.con-destino .acciones{margin-left:0!important;margin-right:0!important}}

/* 09-oct: "Por que existe", "Que es" y "Para quien es" van separados, cada uno en su
   propia seccion de ancho completo (en escritorio: titulo a la izquierda, contenido a
   la derecha) */
.vista-landing>.card.sola .izq h2{margin-top:10px}
.vista-landing>.card.sola .der>:first-child{margin-top:12px}
.vista-landing>.card.sola .vgrid{gap:22px}
@media (min-width:960px){
  .vista-landing>.card.sola{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:72px;align-items:start;padding:60px 0!important}
  .vista-landing>.card.sola:nth-child(n){padding-right:0!important}
  .vista-landing>.card.sola .izq h2{font-size:34px;line-height:1.15;max-width:16ch}
  .vista-landing>.card.sola .der>:first-child{margin-top:0}
  .vista-landing>.card.sola .der p{font-size:16px}}

/* ═════════ 09-oct · Composicion de la referencia (desde "Por que existe") ═════════
   rotulo con linea · frase grande con palabras coral y atenuadas · carrusel de speakers
   · bloque partido con 4 bloques coral · fila con columnas. Colores de ENCLAVE. */
.vista-landing>.card.sec{padding:56px 0!important}
.sec .rotulo{display:flex;align-items:center;gap:14px;font-size:10.5px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:#F85658}
.sec .rotulo::after{content:"";width:56px;height:1px;background:rgba(255,255,255,.28)}
.sec h2{color:#fff;font-size:clamp(26px,3.2vw,40px);line-height:1.14;letter-spacing:-.015em;margin:16px 0 0;font-weight:800}
.sec h2 em,.sec h3 em{font-style:normal;color:#F85658}
.sec .tenue{color:rgba(255,255,255,.36)}
.sec p{color:rgba(255,255,255,.74)}
.sec .enlace{display:inline-block;color:#F85658;font-weight:800;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:7px;transition:color .2s ease}
@media (hover:hover) and (pointer:fine){.sec .enlace:hover{color:#fff}}
.sec .mini{display:flex;align-items:center;gap:14px;font-size:12px;color:rgba(255,255,255,.52);margin:0}
.sec .mini::before{content:"";flex:0 0 40px;height:1px;background:rgba(255,255,255,.28)}
.sec .rol2{display:block;font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#F85658}
.sec .cab{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.sec .cab .bajada{max-width:60ch;margin:14px 0 0;font-size:15px}
/* frase grande */
.sec-frase{text-align:center}
.sec-frase h2.frase{font-size:clamp(28px,4.2vw,54px);line-height:1.14;font-weight:700;max-width:22ch;margin:34px auto 0}
.sec-frase .pies{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:44px;text-align:left}
.sec-frase .pies p{display:flex;gap:14px;margin:0;font-size:14.5px;line-height:1.6}
.sec-frase .pies p::before{content:"";flex:0 0 40px;height:1px;margin-top:.8em;background:rgba(255,255,255,.28)}
.sec-frase .pies p:last-child{color:#fff;font-weight:600}
.sec-frase .incluye{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 0;margin:28px auto 0;max-width:680px;font-size:14px;color:#fff;font-weight:600}
.sec-frase .incluye b{width:100%;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.sec-frase .incluye span+span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#F85658;margin:0 16px 2px;vertical-align:middle}
.sec-frase .pend-caja,.sec-frase .aviso{max-width:620px;margin-left:auto;margin-right:auto;text-align:center}
/* carrusel */
.carrusel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:34px -16px 0;padding:0 16px 4px;outline:none}
.carrusel::-webkit-scrollbar{display:none}
.carrusel{scroll-padding-left:16px}
@media (min-width:960px){.carrusel{scroll-padding-left:0}}
.slide{flex:0 0 min(76vw,290px);scroll-snap-align:start}
.slide-foto{position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;background:#1a1314}
.slide-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block;filter:grayscale(1) contrast(1.05);transition:filter .5s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.slide-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(248,86,88,0) 50%,rgba(248,86,88,.5) 80%,rgba(248,86,88,.92) 100%)}
.slide-rol{position:absolute;z-index:1;top:12px;left:12px;width:max-content;max-width:calc(100% - 24px);font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(8,6,6,.6);padding:5px 9px}
.slide-foto figcaption{position:absolute;z-index:1;left:14px;right:14px;bottom:14px;font-size:21px;font-weight:800;color:#fff;line-height:1.08}
@media (hover:hover) and (pointer:fine){.slide:hover .slide-foto img{filter:none;transform:scale(1.03)}}
.slide-txt .cargo{display:block;font-size:12.5px;font-weight:700;color:#fff;margin-top:16px;line-height:1.4}
.slide-txt p{font-size:13.5px;line-height:1.6;margin:10px 0}
.slide-txt .charla{margin-top:6px;font-size:13px;color:#fff}
.slide-txt .linkpod{display:inline-block;margin-top:10px;font-size:12.5px;color:#F85658;text-decoration:underline;text-underline-offset:4px}
.slide.texto{flex-basis:min(62vw,230px);display:flex;align-items:center;padding:0 6px}
.slide.texto h3{font-size:clamp(24px,2.4vw,30px);line-height:1.15;color:#fff;font-weight:800;margin:0 0 30%}
.car-pie{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:26px}
.car-flechas{display:flex;gap:6px}
.car-flechas button{background:none!important;border:0!important;box-shadow:none!important;color:#fff;padding:6px;width:auto;min-width:0;cursor:pointer;line-height:0;transition:opacity .2s ease,color .2s ease}
.car-flechas button svg{width:24px;height:24px}
.car-flechas button:disabled{opacity:.3;cursor:default}
@media (hover:hover) and (pointer:fine){.car-flechas button:not(:disabled):hover{color:#F85658}}
.car-barra{position:relative;width:160px;height:2px;background:rgba(255,255,255,.16)}
.car-barra i{position:absolute;top:0;left:0;height:100%;width:30%;background:#F85658}
/* bloque partido */
.sec-split{display:grid;gap:40px;align-items:center}
.sec-split h2{font-size:clamp(28px,3.4vw,46px)}
.sec-split .split-txt>p{font-size:15.5px;line-height:1.6;margin:14px 0 0;max-width:46ch}
.sec-split .sub{font-size:19px;font-weight:800;color:#fff;margin:28px 0 0}
.sec-split .enlace{margin-top:28px}
.sec-split .mini{margin-top:30px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:440px;margin:0 auto}
.tile{position:relative;aspect-ratio:1;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border-radius:6px}
.tile b{font-size:clamp(30px,3.6vw,50px);font-weight:300;letter-spacing:.02em;color:#fff;line-height:1}
.tile span{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.9);margin-top:8px;line-height:1.3}
.tile.t0{border-top-left-radius:64px;background:var(--grano),linear-gradient(160deg,#F85658 0%,rgba(248,86,88,.55) 55%,rgba(248,86,88,.08) 100%),#140F10}
.tile.t1{border-top-right-radius:64px;background:var(--grano),linear-gradient(200deg,rgba(248,86,88,.22) 0%,rgba(248,86,88,0) 70%),#161112;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.tile.t2{border-bottom-left-radius:64px;background:var(--grano),linear-gradient(20deg,rgba(248,86,88,.25) 0%,rgba(248,86,88,0) 65%),#161112;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.tile.t3{border-bottom-right-radius:64px;background:var(--grano),linear-gradient(340deg,#F85658 0%,rgba(248,86,88,.6) 50%,rgba(248,86,88,.1) 100%),#140F10}
.socios .socio{border-top:1px solid rgba(255,255,255,.12);padding:16px 0}
.socios .socio:first-of-type{margin-top:14px}
.socios .socio b{display:block;font-size:19px;color:#fff;font-weight:800}
.socios .socio small{display:block;font-size:13px;color:rgba(255,255,255,.6);margin-top:3px}
/* fila con columnas */
.cols3,.cols2{display:grid;gap:28px;margin-top:34px}
.sec-fila .col{border-top:1px solid rgba(255,255,255,.16);padding-top:20px}
.cols3 .col b{display:block;font-size:44px;font-weight:300;letter-spacing:.04em;color:#F85658;line-height:1}
.cols3 .col span{display:block;margin-top:14px;font-size:17px;font-weight:700;color:#fff;line-height:1.35}
.cols2 .col h3{font-size:26px;color:#fff;font-weight:800;margin:8px 0 12px}
.cols2 .col p{font-size:14.5px;line-height:1.65;margin:0 0 12px}
.sec-fila .acceso{display:grid;gap:10px;margin-top:40px}
.sec-fila .acceso h3{color:#F85658;font-size:20px;font-weight:800;margin:0}
.sec-fila .acceso p{margin:0;font-size:15px;line-height:1.6;max-width:64ch}
/* cronograma y nota */
.sec-crono .cab{margin-bottom:22px}
.sec-crono .mini.der{max-width:36ch}
.sec-nota .nota-txt{max-width:64ch;margin:30px auto 0}
.sec-nota .nota-txt p{font-size:16.5px;line-height:1.7;color:rgba(255,255,255,.82)}
.sec-nota .nota-txt p:nth-child(2){color:#fff}
@media (min-width:700px){
  .cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cols2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
  .sec-fila .acceso{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:baseline}}
@media (min-width:960px){
  .vista-landing>.card.sec{grid-column:1/-1;padding:72px 0!important}
  .vista-landing>.card.sec:nth-child(n){padding-right:0!important}
  .sec-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px}
  .carrusel{margin:40px 0 0;padding:0 0 4px}
  .slide{flex-basis:300px}
  .tiles{gap:14px}}
@media (max-width:640px){
  .sec-frase .pies{grid-template-columns:1fr;gap:22px}
  .sec .cab{align-items:flex-start}
  .tile{padding:14px}
  .tile.t0{border-top-left-radius:40px}.tile.t1{border-top-right-radius:40px}.tile.t2{border-bottom-left-radius:40px}.tile.t3{border-bottom-right-radius:40px}}


/* 09-oct: speakers en dos filas: Terry y Natalia arriba; "Quienes leen el pais todos
   los dias" + Jesus y Alexander abajo */
.carrusel.fila2{margin-top:48px}
@media (min-width:960px){.sec-car .carrusel{overflow:visible}.sec-car .slide.texto{flex-basis:300px}}

/* imagen del escenario (la paso el usuario), recortada 16:9 */
.porque-img{aspect-ratio:16/9!important;overflow:hidden}
/* 09-oct (boceto del usuario): "Por que existe" = titulo a todo el ancho arriba;
   abajo texto a la izquierda y, a la derecha, imagen arriba y texto debajo */
.sec-porque{text-align:left}
.sec-porque h2.frase{max-width:none;margin:28px 0 0;font-size:clamp(24px,3.4vw,44px)}
.porque-grid{display:grid;gap:32px;margin-top:44px}
.porque-izq{margin:0;font-size:18px;line-height:1.6;color:rgba(255,255,255,.8)}
.porque-der p{margin:22px 0 0;font-size:15.5px;line-height:1.6;color:#fff;font-weight:600}
.porque-img{margin:0;aspect-ratio:16/7;display:flex;align-items:center;justify-content:center;
  background:var(--grano),linear-gradient(135deg,rgba(248,86,88,.28),rgba(248,86,88,.04) 70%),#161112;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.porque-img span{font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.porque-img img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:760px){.porque-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);gap:56px}}

/* 09-oct (boceto): la columna izquierda de "Por que existe" lleva imagen arriba (casi
   cuadrada) y el texto debajo */
.porque-img.izq{aspect-ratio:1/1.04!important}
.porque-col-izq .porque-izq{margin-top:22px}

/* ═════════ 09-oct · "Por que existe" en bento (referencia del usuario) ═════════ */
.bento{display:grid;gap:12px;margin-top:28px;text-align:left}
.bento>div{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);border-radius:16px}
.b-dato{padding:20px 20px 22px}
.b-dato b{display:block;font-size:30px;font-weight:300;letter-spacing:.04em;color:#F85658;line-height:1}
.b-dato small{display:block;margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.b-dato p{margin:22px 0 0;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.78)}
.b-titular{padding:26px 24px}
.b-titular h2{margin:0!important;font-size:clamp(24px,3vw,40px)!important;font-weight:300!important;line-height:1.22!important;letter-spacing:.01em!important;text-transform:uppercase;color:#fff}
.b-titular h2 em{font-style:normal;color:#F85658}
.b-caras{display:inline-flex;vertical-align:middle;margin:-.15em .1em 0}
.b-caras img,.b-caras i{width:1.05em;height:1.05em;border-radius:50%;object-fit:cover;object-position:50% 25%;filter:grayscale(1);box-shadow:0 0 0 2px #120d0e;margin-left:-.28em}
.b-caras img:first-child{margin-left:0}
.b-caras i{display:inline-flex;align-items:center;justify-content:center;background:#F85658;color:#fff;font-style:normal;font-size:.62em;font-weight:700;width:1.7em;height:1.7em;margin-left:.15em;align-self:center}
.b-pastilla{display:inline-flex;align-items:center;justify-content:flex-end;vertical-align:middle;width:2.4em;height:.95em;margin:-.12em .12em 0;padding:0 .18em;border-radius:99px;box-shadow:inset 0 0 0 1.5px #F85658;color:#F85658;transition:background .2s ease,color .2s ease}
.b-pastilla svg{width:.62em;height:.62em}
@media (hover:hover) and (pointer:fine){.b-pastilla:hover{background:#F85658;color:#fff}}
.b-foto{position:relative;overflow:hidden;min-height:420px}
.b-foto>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block}
.b-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,6,.78) 0%,rgba(8,6,6,.15) 38%,rgba(8,6,6,.1) 62%,rgba(8,6,6,.8) 100%)}
.b-foto-txt{position:absolute;z-index:1;inset:0;display:flex;flex-direction:column;padding:22px}
.b-foto-txt h3{margin:0;font-size:clamp(24px,2.4vw,32px);line-height:1.1;font-weight:800;color:#fff;max-width:12ch}
.b-foto-txt p{margin:10px 0 0;font-size:12.5px;color:rgba(255,255,255,.75);max-width:28ch}
.b-foto-txt a{margin-top:auto;align-self:flex-start;display:inline-flex;gap:8px;align-items:center;padding:9px 16px;border-radius:99px;background:rgba(8,6,6,.55);backdrop-filter:blur(8px);color:#F85658;font-size:12.5px;font-weight:800;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(248,86,88,.5);transition:background .2s ease,color .2s ease}
@media (hover:hover) and (pointer:fine){.b-foto-txt a:hover{background:#F85658;color:#fff}}
@media (min-width:600px){.bento{grid-template-columns:1fr 1fr}.b-titular,.b-foto{grid-column:1/-1}}
@media (min-width:960px){
  .bento{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.95fr);grid-template-rows:auto 1fr}
  .b-titular{grid-column:1 / span 2}
  .b-foto{grid-column:3;grid-row:1 / span 2;min-height:0}}

/* 09-oct: los botones de "Por que existe" toman solo la FORMA del boton "Acceso limitado"
   (rectangulo con esquinas apenas redondeadas); color y texto quedan como estaban */
.b-foto-txt a{border-radius:12px}
.b-pastilla{border-radius:.22em}
/* 09-oct (marcas del usuario): "Por que existe ENCLAVE150" pasa al primer bloque y
   "19 NOV / Jueves · Valencia" a la foto; se quito la linea larga de fecha y hotel */
.b-dato-tit b{font-size:clamp(22px,2.2vw,28px);line-height:1.15;letter-spacing:.01em;max-width:12ch}
.b-foto-txt h3.b-fecha{font-size:clamp(30px,3vw,40px);font-weight:300;letter-spacing:.04em}
.b-foto-txt h3.b-fecha+p{margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}

/* ═════════ 09-oct · Tipografia delgada en toda la landing ═════════
   el usuario pidio basar toda la landing en el titulo del bloque "Por que existe":
   texto delgado (Montserrat 400). Solo las etiquetas pequenas en mayuscula siguen en
   negrita (como "SPEAKERS") y los botones quedan en 600 */
/* 09-oct: la misma tipografia delgada aplica a todas las vistas (landing, registro, panel, escaner) */
#app,#app *{font-weight:400!important}
#app .rotulo,#app .kicker,#app .rol2,#app .slide-rol,#app .b-dato small,
#app .tile span,#app .etq,#app .kick,#app .pilares,#app .baja,
#app .incluye b,#app .b-foto-txt h3.b-fecha+p,#app .pend-caja b{font-weight:700!important}
#app a.enlace,#app .acciones a,#app .datos>*,#app .ctafin a,#app .b-foto-txt a,
#app .car-flechas button,#app button{font-weight:600!important}
#app label,#app th{font-weight:600!important}
#app h2,#app .frase,#app .tema{letter-spacing:-.005em}


/* ═════════ 09-oct · Speakers en filas (referencia del usuario) ═════════ */
.sec-spk .spk-grupo{margin-top:72px}
.spk-fila{display:grid;gap:26px;margin-top:40px;align-items:center}
.spk-foto{margin:0;padding:12px;border-radius:22px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);max-width:420px;width:100%}
.spk-marco{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--grano),linear-gradient(180deg,#F85658 0%,rgba(248,86,88,.75) 55%,#2a1718 100%)}
.spk-marco img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:grayscale(1) contrast(1.05);transition:filter .5s ease}
.spk-marco::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(248,86,88,0) 48%,rgba(248,86,88,.5) 78%,rgba(248,86,88,.9) 100%)}
@media (hover:hover) and (pointer:fine){.spk-fila:hover .spk-marco img{filter:none}}
.spk-rol{display:block;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#F85658}
.spk-info h3{margin:10px 0 0;font-size:clamp(28px,3vw,42px);line-height:1.1;color:#fff}
.spk-cargo{display:block;margin-top:8px;font-size:15px;color:rgba(255,255,255,.72)}
.spk-bio{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.spk-bio li{position:relative;padding-left:24px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.86)}
.spk-bio li::before{content:"";position:absolute;left:4px;top:.6em;width:7px;height:7px;border-radius:50%;background:#F85658}
.spk-info .linkpod{display:inline-block;margin-top:14px;font-size:13px;color:#F85658;text-decoration:underline;text-underline-offset:4px}
.spk-charla{margin-top:26px;padding:18px 22px;border-radius:14px;color:#fff;font-size:16.5px;line-height:1.4;
  background:#F85658}
.spk-charla small{display:block;margin-bottom:4px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.8);font-weight:700!important}
@media (min-width:760px){
  .spk-fila{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;margin-top:56px}
  .spk-foto{max-width:none}}

/* 09-oct: fotos propias de los speakers (ya traen su fondo coral): sin filtro ni fundido;
   al pasar el cursor por la ficha aparece la version a color con un fundido */
.spk-foto.propia{padding:0;background:none;box-shadow:none}
.spk-foto.propia .spk-marco{background:#100c0d;border-radius:18px}
.spk-foto.propia .spk-marco::after{z-index:1;pointer-events:none} /* 09-oct: se mantiene el fundido coral de abajo, como en las fotos anteriores */
.spk-foto.propia .spk-marco img{filter:none!important;object-position:50% 50%}
.spk-foto.propia .f-cursor{opacity:0;transition:opacity .45s ease}
@media (hover:hover) and (pointer:fine){.spk-fila:hover .spk-foto.propia .f-cursor{opacity:1}}

/* 09-oct: en "Que es" los 4 bloques con datos se reemplazan por una sola imagen (pendiente) */
.queimg{margin:0 auto;width:100%;max-width:460px;aspect-ratio:1;border-radius:22px;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:var(--grano),linear-gradient(150deg,rgba(248,86,88,.35),rgba(248,86,88,.05) 70%),#161112;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.queimg span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:700!important}
.queimg img{width:100%;height:100%;object-fit:cover;display:block}
.queimg{aspect-ratio:4/5!important;max-width:440px!important} /* la imagen que paso el usuario es vertical 4:5 */

/* ═════════ 09-oct · Cronograma con efecto "feature steps" ═════════ */
.pasos{display:grid;gap:28px;margin-top:6px}
.pasos-lista{list-style:none;margin:0;padding:0;order:2}
.paso{position:relative;display:grid;grid-template-columns:34px 78px minmax(0,1fr);gap:12px;align-items:start;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08);opacity:.38;cursor:pointer;transition:opacity .5s ease;outline:none}
.paso.on{opacity:1}
.paso:focus-visible{opacity:1}
@media (hover:hover) and (pointer:fine){.paso:hover{opacity:.8}.paso.on:hover{opacity:1}}
.paso .num{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12.5px;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);transition:background .4s ease,box-shadow .4s ease,transform .4s ease,color .4s ease}
.paso.hecho .num{color:#F85658;box-shadow:inset 0 0 0 1.5px #F85658}
.paso.on .num{background:#F85658;color:#fff;box-shadow:none;transform:scale(1.1)}
.paso .h{padding-top:6px;font-size:13px;color:#F85658}
.paso .t b{display:block;padding-top:4px;font-size:16px;line-height:1.35;color:#fff}
.paso .t small{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.66)}
.paso .barra{position:absolute;left:0;bottom:-1px;height:1px;width:0;background:#F85658;transition:width .1s linear}
.pasos-vis{order:1;position:relative;height:300px;border-radius:18px;overflow:hidden;perspective:1000px;background:#120d0e}
.pv{position:absolute;inset:0;border-radius:18px;overflow:hidden;opacity:0;transform:translate3d(0,100px,0) rotateX(-20deg);transition:transform .5s ease-in-out,opacity .5s ease-in-out}
.pv.on{opacity:1;transform:none}
.pv.sale{opacity:0;transform:translate3d(0,-100px,0) rotateX(20deg)}
.pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.pv::after{content:"";position:absolute;left:0;right:0;bottom:0;height:66%;background:linear-gradient(0deg,#0e0a0b 0%,rgba(14,10,11,.5) 50%,rgba(14,10,11,0) 100%)}
.pv.gen{background:var(--grano),linear-gradient(160deg,#F85658 0%,rgba(248,86,88,.45) 55%,#140f10 100%)}
.pv.gen::after{display:none}
.pv-txt{position:absolute;z-index:1;left:22px;right:22px;bottom:20px}
.pv-txt span{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#F85658;font-weight:700!important}
.pv.gen .pv-txt span{color:#fff;font-size:clamp(40px,5vw,64px);letter-spacing:.02em;text-transform:none;font-weight:400!important;line-height:1}
.pv-txt b{display:block;margin-top:8px;font-size:clamp(18px,1.8vw,24px);line-height:1.2;color:#fff}
@media (min-width:900px){
  .pasos{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:start}
  .pasos-lista{order:1}
  .pasos-vis{order:2;position:sticky;top:96px;height:auto;aspect-ratio:4/5;max-height:72vh}}
@media (prefers-reduced-motion:reduce){.pv,.paso,.paso .num{transition:none}}

/* ═════════ 09-oct · "Para quien es" en bento (solo composicion) ═════════ */
.quien-bento{display:grid;gap:12px}
.quien-bento>div{border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.q-grande{display:flex;flex-direction:column;justify-content:space-between;gap:60px;padding:24px;min-height:260px}
.q-grande .enlace{align-self:flex-end}
.q-grande h2{margin:0!important;font-size:clamp(34px,4.4vw,60px)!important;line-height:1.05}
.q-c{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:22px}
.q-c b{display:block;font-size:44px;letter-spacing:.04em;color:#F85658;line-height:1}
.q-c span{display:block;font-size:17px;line-height:1.35;color:#fff}
@media (min-width:700px){
  .quien-bento{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) minmax(0,.85fr);grid-template-rows:auto auto}
  .q-grande{grid-column:1;grid-row:1 / span 2;min-height:420px}
  .q1{grid-column:2 / span 2;grid-row:1}
  .q2{grid-column:2;grid-row:2}
  .q3{grid-column:3;grid-row:2}}

/* 09-oct: imagen de publico frente al escenario de fondo en el bloque grande de "Para quien es" */
.q-grande{position:relative;overflow:hidden}
.q-grande .q-fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 50%;display:block}
.q-grande::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,6,.55) 0%,rgba(8,6,6,0) 30%,rgba(8,6,6,0) 55%,rgba(8,6,6,.85) 100%)}
.q-grande>.enlace,.q-grande>h2{position:relative;z-index:1}

/* ═════════ 09-oct · Cronograma como linea de tiempo (referencia) — misma animacion ═════════ */
.pasos-lista .paso{grid-template-columns:30px 44px 54px minmax(0,1fr);gap:0;align-items:center;padding:16px 0;border-bottom:0}
.paso::before{content:"";position:absolute;left:14px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.14);transition:background .5s ease}
.paso:first-child::before{top:50%}
.paso:last-child::before{bottom:50%}
.paso.hecho::before{background:#F85658}
.paso.on::before{background:linear-gradient(180deg,#F85658 50%,rgba(255,255,255,.14) 50%)}
.paso:first-child.on::before{background:rgba(255,255,255,.14)}
.paso .nodo{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;background:#120d0e;box-shadow:inset 0 0 0 2px rgba(248,86,88,.55);display:flex;align-items:center;justify-content:center;transition:transform .4s ease,box-shadow .4s ease,background .4s ease}
.paso .nodo::after{content:"";width:10px;height:10px;border-radius:50%;background:rgba(248,86,88,.55);transition:background .4s ease,transform .4s ease}
.paso.hecho .nodo{box-shadow:inset 0 0 0 2px #F85658}
.paso.hecho .nodo::after{background:#F85658}
.paso.on .nodo{background:#F85658;box-shadow:0 0 0 6px rgba(248,86,88,.18),0 0 22px rgba(248,86,88,.55);transform:scale(1.12)}
.paso.on .nodo::after{background:#fff;transform:scale(.9)}
.paso .guion{height:0;border-top:1.5px dashed rgba(255,255,255,.28);margin:0 6px}
.paso .ico{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);transition:color .4s ease,box-shadow .4s ease}
.paso .ico svg{width:24px;height:24px}
.paso.on .ico{color:#F85658;box-shadow:inset 0 0 0 1px rgba(248,86,88,.6)}
.paso .t{position:relative;padding-left:18px}
.paso .t .h{display:block;padding:0;font-size:12px;letter-spacing:.14em;color:#F85658}
.paso .t b{padding-top:3px;font-size:17px}
.paso .t .barra{left:18px;right:auto;bottom:-8px;max-width:calc(100% - 18px)}
@media (max-width:520px){
  .pasos-lista .paso{grid-template-columns:26px 18px 42px minmax(0,1fr)}
  .paso::before{left:12px}
  .paso .nodo{width:26px;height:26px}
  .paso .ico{width:42px;height:42px}.paso .ico svg{width:19px;height:19px}
  .paso .t{padding-left:12px}.paso .t .barra{left:12px}
  .paso .t b{font-size:15.5px}}

/* 09-oct: el usuario confirmo los precios Early bird y Mesa corporativa */
.precios-extra{display:flex;justify-content:center;gap:12px 56px;flex-wrap:wrap;margin:30px auto 0}
.precios-extra>div{display:flex;flex-direction:column;align-items:center;gap:4px}
.precios-extra small{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:700!important}
.precios-extra b{font-size:clamp(26px,3vw,36px);color:#F85658;letter-spacing:.01em}

/* ===== v3.6 · validación del registro, siguiente paso y contacto ===== */
.campo-err,input.campo-err,select.campo-err{border-color:#E5342F!important;box-shadow:0 0 0 3px rgba(229,52,47,.22)}
.lista-err{margin:6px 0 0 18px;padding:0;font-weight:500;color:#F27C78;line-height:1.5}
.lista-err li{margin:2px 0}
.pasos-sig{list-style:none;margin:14px 0 4px;padding:0}
.pasos-sig li{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-top:1px solid rgba(255,255,255,.08)}
.pasos-sig li:first-child{border-top:0}
.pasos-sig .num{flex:0 0 32px;height:32px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;background:rgba(248,86,88,.14);color:#F85658;border:1px solid rgba(248,86,88,.45)}
.pasos-sig li.paso-ok .num{background:rgba(31,184,75,.16);color:#39D36A;border-color:rgba(31,184,75,.45)}
.pasos-sig b.t{display:block;font-size:14.5px;margin-bottom:3px}
.pasos-sig p b{display:inline;color:#fff;font-weight:600}
.pasos-sig p{margin:0;font-size:13px;line-height:1.5;color:var(--dc-ink-4,#A6A8B0)}
.pasos-sig code{font-size:12px;padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.08)}
.card.listo{text-align:left}
.card.listo .check{width:56px;height:56px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;background:rgba(31,184,75,.16);color:#39D36A;border:1px solid rgba(31,184,75,.45);margin-bottom:14px}
.card.contacto h3{margin-top:0}
.card.contacto .acciones a{min-width:0}