/* ============================================================
   Tokens — el color codifica las tres sesiones de la jornada
   ============================================================ */
:root{
  --asfalto:#1B1E22;
  --asfalto-2:#262B31;
  --asfalto-3:#39404A;

  --normativa:#C8102E;   /* 1ª sesión */
  --innovacion:#0B5AA2;  /* 2ª sesión */
  --sostenible:#6F9440;  /* 3ª sesión */
  --amarillo:#F2B705;    /* acción sobre fondo oscuro */

  --papel:#F2F3EF;
  --papel-2:#E4E7E0;
  --tinta:#171A1E;
  --tinta-suave:#565D66;

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --texto:"IBM Plex Sans",system-ui,sans-serif;

  --borde:1px solid rgba(23,26,30,.14);
  --borde-oscuro:1px solid rgba(255,255,255,.16);
}

/* ============================================================
   Base
   ============================================================ */
html{scroll-behavior:smooth; scroll-padding-top:74px;}
body{font-family:var(--texto); color:var(--tinta); background:var(--papel); font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--display); font-weight:800; letter-spacing:-.015em; line-height:1.05; text-wrap:balance;}
h1{font-size:clamp(2.05rem,4.2vw,3.35rem);}
h2{font-size:clamp(1.7rem,3.3vw,2.7rem);}
h3{font-size:clamp(1.05rem,1.8vw,1.3rem); line-height:1.2; letter-spacing:-.01em;}
p{max-width:66ch;}
a{color:var(--innovacion);}
:focus-visible{outline:3px solid var(--amarillo); outline-offset:3px; border-radius:2px;}

.seccion{padding:clamp(3.5rem,7vw,6.5rem) 0;}
.seccion-oscura{background:var(--asfalto); color:#EEF0F2;}
.seccion-oscura p{color:#C3C8CE;}
.seccion-papel{background:var(--papel);}
.seccion-blanca{background:#fff;}

.rotulo{font-family:var(--display); font-weight:700; font-size:.9rem; color:var(--sostenible); margin-bottom:.65rem;}
.seccion-oscura .rotulo{color:#9CC46A;}
.entradilla{font-size:1.15rem; color:var(--tinta-suave); max-width:60ch;}
.seccion-oscura .entradilla{color:#B9BFC6;}

/* Botones: amarillo sobre fondo oscuro, asfalto sobre fondo claro */
.btn{font-family:var(--display); font-weight:700; border-radius:2px; padding:.85rem 1.6rem;}
.btn-accion{background:var(--amarillo); color:var(--tinta); border:2px solid var(--amarillo);}
.btn-accion:hover,.btn-accion:focus{background:#FFC922; border-color:#FFC922; color:var(--tinta);}
.btn-principal{background:var(--asfalto); color:#fff; border:2px solid var(--asfalto);}
.btn-principal:hover,.btn-principal:focus{background:#000; border-color:#000; color:#fff;}
.btn-linea{background:transparent; color:#fff; border:2px solid rgba(255,255,255,.45);}
.btn-linea:hover,.btn-linea:focus{background:rgba(255,255,255,.1); color:#fff; border-color:#fff;}
.btn-linea-oscura{background:transparent; color:var(--tinta); border:2px solid rgba(23,26,30,.3);}
.btn-linea-oscura:hover,.btn-linea-oscura:focus{background:var(--tinta); color:#fff; border-color:var(--tinta);}
.btn-sm{padding:.5rem 1rem; font-size:.9rem;}

/* ============================================================
   Navegación
   ============================================================ */
.barra{background:rgba(27,30,34,.95); backdrop-filter:blur(8px); border-bottom:var(--borde-oscuro);}
.barra .navbar-brand{font-family:var(--display); font-weight:800; color:#fff; font-size:1rem; line-height:1.15;}
.barra .navbar-brand span{display:block; font-family:var(--texto); font-weight:400; font-size:.78rem; color:#A7AEB6;}
.barra .nav-link{color:#D6DADF; font-weight:500; font-size:.96rem; white-space:nowrap;}
.barra .nav-link:hover,.barra .nav-link:focus{color:#fff;}
.barra .navbar-toggler{border-color:rgba(255,255,255,.3);}
@media (max-width:767.98px){ .barra .navbar-brand{font-size:.9rem; max-width:78%;} .barra .navbar-brand span{display:none;} }

/* ============================================================
   Portada: la lámina de la jornada sangra por la derecha
   ============================================================ */
.portada-cuerpo{position:relative; background:#fff; overflow:hidden; padding:clamp(3rem,6vw,5rem) 0 clamp(3rem,6vw,5rem);}
.portada-cuerpo .container{position:relative; z-index:1;}
.jornada{display:inline-block; font-family:var(--display); font-weight:700; font-size:.95rem; color:#fff; background:var(--asfalto); padding:.35rem .8rem; margin-bottom:1.5rem;}
.fecha-lugar{font-family:var(--display); font-weight:700; font-size:clamp(1.05rem,2vw,1.3rem); border-top:3px solid var(--asfalto); padding-top:1rem; margin-top:1.75rem; display:inline-block;}
.fecha-lugar small{display:block; font-family:var(--texto); font-weight:400; font-size:.95rem; color:var(--tinta-suave); margin-top:.3rem;}
.aviso-plazo{font-size:.95rem; color:var(--tinta-suave); margin-top:1.5rem; display:flex; gap:.6rem; align-items:flex-start; max-width:34rem;}
.aviso-plazo b{color:var(--tinta);}
.lamina{display:block; width:100%; max-width:440px; height:auto; margin:2.5rem auto 0;}
@media (min-width:992px){ .lamina{max-width:520px; margin:0 0 0 auto;} }

/* Franja de datos clave */
.datos{background:var(--asfalto);}
.dato{padding:1.6rem 1.25rem; border-left:var(--borde-oscuro);}
.dato:first-child{border-left:0;}
.dato dt{font-size:.85rem; color:#9AA2AB; font-weight:400; margin-bottom:.2rem;}
.dato dd{font-family:var(--display); font-weight:700; font-size:1.1rem; color:#fff; margin:0;}
@media (max-width:767.98px){
  .dato{border-left:0; border-top:var(--borde-oscuro); padding:1.1rem 0;}
  .dato:first-child{border-top:0;}
}

/* ============================================================
   Introducción
   ============================================================ */
.motivo{padding:1.75rem 0; border-top:var(--borde);}
.motivo h3{margin-bottom:.5rem;}
.motivo p{margin-bottom:0; color:var(--tinta-suave);}
.marca-numero{font-family:var(--display); font-weight:800; font-size:.95rem; color:#fff; width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; background:var(--asfalto-3);}
.cita{border-left:6px solid var(--sostenible); padding:1.25rem 0 1.25rem 1.5rem; font-size:1.2rem; line-height:1.5;}
.cita footer{font-size:.92rem; color:var(--tinta-suave); margin-top:.75rem;}

/* ============================================================
   Sesiones
   ============================================================ */
.sesion{background:#fff; border:var(--borde); border-top:6px solid var(--asfalto-3); padding:1.75rem 1.5rem; height:100%;}
.sesion-1{border-top-color:var(--normativa);}
.sesion-2{border-top-color:var(--innovacion);}
.sesion-3{border-top-color:var(--sostenible);}
.sesion .orden{font-family:var(--display); font-weight:700; font-size:.85rem; margin-bottom:.55rem;}
.sesion-1 .orden{color:var(--normativa);}
.sesion-2 .orden{color:var(--innovacion);}
.sesion-3 .orden{color:var(--sostenible);}
.sesion h3{margin-bottom:.7rem;}
.sesion p{font-size:.97rem; color:var(--tinta-suave); margin:0;}
.sesion .horario{display:block; font-size:.88rem; color:var(--tinta-suave); margin-top:1rem; padding-top:.8rem; border-top:var(--borde);}

/* ============================================================
   Programa
   ============================================================ */
.carril{position:relative; list-style:none; margin:0; padding-left:0;}
.parada{display:grid; grid-template-columns:5.5rem 2.5rem 1fr; align-items:start;}
.hora{font-family:var(--display); font-weight:700; font-variant-numeric:tabular-nums; font-size:1.05rem; color:#fff; padding-top:1.55rem;}
.linea{position:relative; align-self:stretch;}
.linea::before{content:""; position:absolute; left:50%; top:0; bottom:0; width:4px; transform:translateX(-50%); background:repeating-linear-gradient(to bottom, rgba(255,255,255,.7) 0 14px, transparent 14px 26px);}
.parada:first-child .linea::before{top:1.9rem;}
.parada:last-child .linea::before{bottom:calc(100% - 1.9rem);}
.hito{position:absolute; left:50%; top:1.6rem; transform:translateX(-50%); width:15px; height:15px; border-radius:50%; background:var(--amarillo); border:3px solid var(--asfalto);}
.charla{padding:1.35rem 0 1.35rem .35rem; border-bottom:var(--borde-oscuro);}
.parada:last-child .charla{border-bottom:0;}
.charla h3{color:#fff; margin-bottom:.6rem; max-width:48ch;}
.charla h3 small{display:block; font-family:var(--texto); font-weight:400; font-size:.9rem; color:#A7AEB6; letter-spacing:0; margin-top:.35rem;}
.ponente{margin:0 0 .15rem; color:#fff; font-weight:600; font-size:1rem;}
.cargo{margin:0 0 .9rem; color:#A7AEB6; font-size:.93rem; line-height:1.45; max-width:50ch;}
.cargo:last-child{margin-bottom:0;}
.pendiente{display:inline-block; font-size:.8rem; font-weight:600; color:#EBD9A2; border:1px solid rgba(242,183,5,.5); padding:.1rem .5rem; margin-bottom:.6rem;}
.pausa .charla h3{color:#9CC46A; font-size:1rem; font-weight:700;}
.pausa .hito{background:transparent; border:3px solid #9CC46A;}
.rotulo-sesion{display:flex; align-items:center; gap:1rem; padding:2.25rem 0 .75rem;}
.rotulo-sesion h3{color:#fff; font-size:1.2rem; margin:0;}
.rotulo-sesion .pastilla{font-family:var(--display); font-weight:800; font-size:.78rem; color:#fff; padding:.25rem .6rem; flex:0 0 auto;}
.s1 .pastilla,.s1 .hito{background:var(--normativa);}
.s2 .pastilla,.s2 .hito{background:var(--innovacion);}
.s3 .pastilla,.s3 .hito{background:var(--sostenible);}
@media (max-width:575.98px){
  .parada{grid-template-columns:3.9rem 1.6rem 1fr;}
  .hora{font-size:.95rem;}
  .rotulo-sesion{flex-wrap:wrap; gap:.6rem;}
}

/* ============================================================
   Organiza, colabora y patrocina
   ============================================================ */
.nivel{border-top:var(--borde); padding:2rem 0;}
.nivel:last-child{padding-bottom:0;}
.nivel-titulo{font-family:var(--display); font-weight:700; font-size:.95rem; color:var(--tinta-suave); margin:0;}
.logo{background:#fff; border:var(--borde); display:flex; align-items:center; justify-content:center; height:120px; padding:1rem 1.25rem;}
.logo img{max-width:100%; max-height:76px; width:auto; height:auto; object-fit:contain;}
.logo-grande{height:170px;}
.logo-grande img{max-height:124px;}
.logo-oro{height:190px; border:2px solid #C9A227;}
.logo-oro img{max-height:140px;}
.nivel-oro .nivel-titulo{color:#8C6D0C;}

/* ============================================================
   Cuotas y condiciones
   ============================================================ */
.cuota{background:#fff; border:var(--borde); padding:1.75rem 1.5rem; height:100%; display:flex; flex-direction:column;}
.cuota-destacada{border:3px solid var(--innovacion);}
.cuota h3{font-size:1.05rem; margin-bottom:.9rem; min-height:2.5em;}
.precio{font-family:var(--display); font-weight:800; font-size:2.4rem; line-height:1; letter-spacing:-.03em; margin-bottom:0;}
.precio small{display:block; font-family:var(--texto); font-weight:400; font-size:.85rem; color:var(--tinta-suave); letter-spacing:0; margin-top:.45rem; line-height:1.4;}
.precio small b{font-weight:600; color:var(--tinta);}
.incluye{list-style:none; padding:0; margin:1.25rem 0 0; font-size:.95rem; color:var(--tinta-suave);}
.incluye li{padding:.35rem 0 .35rem 1.4rem; position:relative;}
.incluye li::before{content:""; position:absolute; left:0; top:.95rem; width:.7rem; height:2px; background:var(--sostenible);}
.cuota .btn{margin-top:auto;}
.cuota .incluye{margin-bottom:1.5rem;}
.pago{background:var(--papel-2); border-left:6px solid var(--asfalto-3); padding:1.35rem 1.5rem; font-size:.95rem;}
.pago dl{margin:0;}
.pago dt{font-weight:600; font-size:.85rem; color:var(--tinta-suave);}
.pago dd{margin:0 0 .7rem; font-family:var(--display); font-weight:600;}
.pago dd:last-child{margin-bottom:0;}
.condicion{border:var(--borde); background:var(--papel); padding:1.5rem 1.5rem 1.25rem; height:100%;}
.condicion h3{font-size:1.05rem; margin-bottom:.9rem;}
.condicion p{font-size:.97rem; color:var(--tinta-suave);}
.plazos{list-style:none; padding:0; margin:0;}
.plazos li{display:grid; grid-template-columns:8.5rem 1fr; gap:1rem; padding:.7rem 0; border-top:var(--borde); font-size:.97rem;}
.plazos li b{font-family:var(--display); font-weight:700;}
@media (max-width:575.98px){ .plazos li{grid-template-columns:1fr; gap:.2rem;} }

/* ============================================================
   Formulario
   ============================================================ */
.tarjeta-form{background:#fff; border:var(--borde); padding:clamp(1.5rem,3vw,2.75rem);}
.form-label{font-size:.88rem; font-weight:600; color:var(--tinta-suave); margin-bottom:.3rem;}
.form-control,.form-select{border-radius:2px; border:1px solid rgba(23,26,30,.22); padding:.65rem .85rem; font-size:1rem; background:#FCFCFB;}
.form-control:focus,.form-select:focus{border-color:var(--innovacion); box-shadow:0 0 0 3px rgba(11,90,162,.15); background:#fff;}
.form-check-input:checked{background-color:var(--innovacion); border-color:var(--innovacion);}
.form-check-input:focus{box-shadow:0 0 0 3px rgba(11,90,162,.2);}
.bloque-form{border-top:var(--borde); padding-top:1.5rem; margin-top:1.75rem;}
.bloque-form:first-of-type{border-top:0; padding-top:0; margin-top:0;}
.titulo-bloque{font-family:var(--display); font-weight:700; font-size:1rem; margin-bottom:1.1rem;}
.ayuda{font-size:.82rem; color:var(--tinta-suave); margin-top:.3rem;}
.legal{font-size:.82rem; color:var(--tinta-suave); line-height:1.5;}
.opcion-cuota{border:var(--borde); padding:.85rem 1rem; cursor:pointer; display:block; margin-bottom:.6rem;}
.opcion-cuota:hover{border-color:var(--innovacion);}
.opcion-cuota .form-check-input{margin-top:.35rem;}

/* ============================================================
   Sede y pie
   ============================================================ */
.sede address{font-family:var(--display); font-weight:700; font-size:1.3rem; line-height:1.3; margin-bottom:1rem;}
.sede figure{max-width:600px; margin-left:auto !important;}
.foto-sede{display:block; width:100%; height:auto; border:var(--borde);}
.foto-sede + figcaption{font-size:.85rem; color:var(--tinta-suave); margin-top:.6rem;}
.pie{background:var(--asfalto); color:#AEB5BD; padding:3.5rem 0 2.5rem; font-size:.94rem;}
.pie a{color:#fff; text-decoration:none;}
.pie a:hover{text-decoration:underline;}
.pie h4{color:#fff; font-size:1rem; margin-bottom:.8rem;}
.pie-final{border-top:var(--borde-oscuro); margin-top:2.5rem; padding-top:1.5rem; font-size:.85rem; color:#8B939C;}

/* ============================================================
   Movimiento: una sola secuencia, en la portada
   ============================================================ */
@keyframes entra{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
@keyframes desliza{from{opacity:0; transform:translateX(24px);} to{opacity:1; transform:none;}}
.anim-1{animation:entra .6s ease-out both;}
.anim-2{animation:entra .6s ease-out .12s both;}
.anim-3{animation:entra .6s ease-out .24s both;}
.lamina{animation:desliza .8s cubic-bezier(.2,.8,.3,1) .2s both;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .anim-1,.anim-2,.anim-3,.lamina{animation:none;}
}