/* ============================================================
   Landing del evento de Yassin
   ------------------------------------------------------------
   Estilo y estructura tomados de nachosala.com/evento-presencial,
   con los valores leidos de la pagina real el 2026-08-24:
     fondo #07070a · acento #e0b25f · Poppins 400/600/700
     tarjetas #0f0f14, radio 16px, borde rgba(255,255,255,.07)
     botones pildora (radius 999px) naranja con texto oscuro
   El tratamiento anterior (negro y oro, Cormorant) era la marca
   de Alejandro y se descarto por completo.
   ============================================================ */

:root{
  --bg:#07070a;
  --card:#0f0f14;
  --card-2:#131319;
  --linea:rgba(255,255,255,.07);
  --linea-2:rgba(255,255,255,.14);
  --texto:#fff;
  --tenue:rgba(255,255,255,.62);
  --tenue-2:rgba(255,255,255,.45);
  /* Dorados leidos de la pieza "30 dias para comunicar" de Yassin
     (2026-08-25). El degradado real de la pieza va de #9e6c2d en sombra
     a #f4cd8a en el brillo; estos son los tres puntos utiles. */
  --oro:#e0b25f;          /* acento: texto, iconos, bordes */
  --oro-luz:#f2d090;      /* brillo alto del degradado */
  --oro-hondo:#c9973f;    /* sombra del degradado */
  --oro-suave:rgba(224,178,95,.13);
  --oscuro:#0a0a0d;
  --radio:16px;
}

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

body{
  background:var(--bg);
  color:var(--texto);
  font-family:'Poppins',system-ui,-apple-system,sans-serif;
  font-size:16px;font-weight:400;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:760px}

h1,h2,h3{line-height:1.06;font-weight:700;letter-spacing:-.02em}
h1 em,h2 em{color:var(--oro);font-style:normal}

section{padding:96px 0}

/* ============ PLACEHOLDER ============ */
.falta{
  background:rgba(255,90,90,.15);
  border-bottom:1px dashed #ff5a5a;
  color:#ffb3b3;
  padding:0 .25em;border-radius:3px;
}

/* ============ NAV FIJA ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  padding:14px 24px;
  background:rgba(7,7,10,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);
}
.nav-marca{
  font-weight:600;font-size:15px;
  color:var(--oro);
  text-decoration:none;letter-spacing:-.01em;
}

/* ============ BOTON ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:14px;font-weight:700;
  color:var(--oscuro);
  background:linear-gradient(180deg,var(--oro-luz) 0%,var(--oro) 46%,var(--oro-hondo) 100%);
  padding:13px 26px;
  border:none;border-radius:999px;
  text-decoration:none;cursor:pointer;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
  box-shadow:0 6px 22px rgba(224,178,95,.22);
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 10px 28px rgba(224,178,95,.32)}
.btn.sm{padding:9px 18px;font-size:13px}
.btn.ghost{
  background:transparent;color:var(--oro);
  border:1px solid rgba(224,178,95,.4);box-shadow:none;
}
.btn.ghost:hover{background:var(--oro-suave);filter:none}
.btn-note{display:block;margin-top:14px;font-size:13px;font-weight:500;color:rgba(255,255,255,.82)}
.centro{text-align:center}

/* ============ PILDORA / KICKER ============ */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--oro);
  background:var(--oro-suave);
  border:1px solid rgba(224,178,95,.28);
  border-radius:999px;
  padding:7px 16px;
  margin-bottom:22px;
}
.pill::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--oro);flex-shrink:0;
}

/* ============ HERO ============ */
.hero{
  padding:132px 0 90px;
  position:relative;
}
.hero::before{
  content:'';position:absolute;top:0;left:0;right:0;height:70%;
  background:radial-gradient(ellipse 60% 70% at 30% 25%,rgba(224,178,95,.10),transparent 70%);
  pointer-events:none;
}
.hero .wrap{position:relative}
/* Una sola columna: la promesa abre, la foto la respalda debajo.
   El orden de secciones sigue siendo el de Nacho; lo que cambia es
   como se apila el hero. */
.hero-grid{
  display:flex;flex-direction:column;align-items:center;
  gap:0;text-align:center;
}
.hero-foto{
  width:100%;max-width:420px;height:auto;aspect-ratio:3/4;
  object-fit:cover;object-position:center 20%;
  border-radius:26px;
  border:1px solid var(--linea);
  display:block;margin:0 auto 34px;
}
.hero h1{
  font-size:clamp(2.3rem,5.4vw,4rem);
  max-width:17ch;margin:0 auto 22px;
  text-wrap:balance;
}
.hero .bajada{
  color:var(--tenue);font-size:16.5px;
  max-width:52ch;margin:0 auto 38px;
}
.hero .datos{max-width:520px;width:100%;margin-left:auto;margin-right:auto}
.hero .dato{text-align:left}

/* Tarjetas de dato: fecha y lugar */
.datos{display:flex;flex-direction:column;gap:10px;margin-bottom:30px}
.dato{
  display:flex;align-items:center;gap:14px;
  background:var(--card);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:14px 18px;
}
.dato-ico{
  flex-shrink:0;width:34px;height:34px;border-radius:10px;
  background:var(--oro-suave);
  display:flex;align-items:center;justify-content:center;
  color:var(--oro);
}
.dato-ico svg{width:17px;height:17px}
.dato-tit{font-size:14px;font-weight:600;line-height:1.35}
.dato-sub{font-size:13px;color:var(--tenue-2);line-height:1.35}

/* ============ TITULARES DE SECCION ============ */
.sec-tit{font-size:clamp(1.8rem,3.6vw,2.5rem);margin-bottom:14px}
.sec-baja{color:var(--tenue);max-width:56ch;margin-bottom:46px}
.centro .sec-baja{margin-left:auto;margin-right:auto}
.centro .pill{margin-left:auto;margin-right:auto}

/* ============ CAMPOS DE FORMULARIO ============ */
.campo{display:block;margin-bottom:20px}
.campo-tit{
  display:block;margin-bottom:8px;
  font-size:13px;font-weight:500;color:rgba(255,255,255,.82);
}
.campo input{
  width:100%;
  background:var(--card);
  border:1px solid var(--linea);
  border-radius:12px;
  padding:14px 16px;
  font-family:inherit;font-size:15px;
  color:var(--texto);
  transition:border-color .15s ease;
}
.campo input::placeholder{color:var(--tenue-2)}
.campo input:focus{
  outline:none;
  border-color:rgba(224,178,95,.55);
}
.campo-pista{
  display:block;margin-top:7px;
  font-size:12.5px;color:var(--tenue-2);
}
.campo-error{
  display:none;margin-bottom:16px;
  font-size:13.5px;color:#ff8a8a;
}
.campo-legal{
  margin-top:18px;
  font-size:12.5px;line-height:1.55;color:var(--tenue-2);
}
.btn[disabled]{opacity:.6;cursor:default}

/* ============ DONDE ESTAS HOY ============ */
/* Deliberadamente sin tarjeta y en gris: es el problema. La seccion
   siguiente son tarjetas con el numero en oro, y ese contraste es
   lo que hace de bisagra entre el dolor y la solucion. */
.dolores{
  list-style:none;
  max-width:640px;margin:0 auto;
}
.dolores li{
  position:relative;
  padding:17px 0 17px 40px;
  font-size:15px;line-height:1.55;
  color:var(--tenue);
  border-bottom:1px solid var(--linea);
}
.dolores li:last-child{border-bottom:0}
.dolores li::before{
  content:"";position:absolute;left:8px;top:27px;
  width:14px;height:1px;background:var(--tenue-2);
}
.dolores-cierre{
  max-width:640px;margin:34px auto 0;
  text-align:center;font-size:17px;font-weight:500;
  color:var(--texto);
}

/* ============ LO QUE VAS A VIVIR ============ */
.vivir{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:16px;
}
.vivir-item{
  background:var(--card);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:26px 24px 28px;
  transition:border-color .18s ease,transform .18s ease;
}
.vivir-item:hover{border-color:rgba(224,178,95,.3);transform:translateY(-2px)}
.vivir-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:11px;
  background:var(--oro-suave);
  color:var(--oro);
  font-size:13px;font-weight:700;
  margin-bottom:16px;
}
.vivir-item p{font-size:15px;line-height:1.55;color:rgba(255,255,255,.86)}

/* ============ PONENTE PRINCIPAL ============ */
.principal{
  display:grid;grid-template-columns:minmax(0,420px) 1fr;
  gap:48px;align-items:center;
}
.principal-foto{
  /* Mismas medidas que .hero-foto: 420 en escritorio, 300 en movil.
     Antes la columna era de 330px fijos y en movil la caja la estiraba
     a 327 contra los 300 del hero: la foto secundaria terminaba mas
     grande que la principal. */
  width:100%;max-width:420px;height:auto;aspect-ratio:3/4;
  object-fit:cover;object-position:center 18%;
  border-radius:22px;
  border:1px solid var(--linea);
  display:block;
}
.principal-bio{color:var(--tenue);font-size:15.5px}
.principal-bio + .principal-bio{margin-top:14px}

/* ============ CARRUSEL DE PONENTES ============ */
.carrusel{
  overflow:hidden;position:relative;
  padding:4px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.carrusel-track{
  display:flex;gap:18px;width:max-content;
  animation:desliza 34s linear infinite;
}
.carrusel:hover .carrusel-track{animation-play-state:paused}
/* La lista va duplicada, asi que -50% deja la copia justo donde
   empezaba el original: el bucle no tiene salto. */
@keyframes desliza{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.carrusel .pon{width:216px;flex-shrink:0}

/* Sin animacion para quien la desactivo: pasa a scroll manual. */
@media (prefers-reduced-motion:reduce){
  .carrusel{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .carrusel-track{animation:none}
}
.pon{
  background:var(--card);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:14px 14px 20px;
  text-align:center;
}
.pon-foto{
  width:100%;height:auto;aspect-ratio:3/4;
  object-fit:cover;object-position:center 20%;
  border-radius:12px;
  display:block;margin-bottom:14px;
}
.pon-nom{font-size:16px;font-weight:600;margin-bottom:2px}
.pon-rol{font-size:12px;color:var(--oro);letter-spacing:.04em}

.pon.oculto .pon-foto{
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 10px,transparent 10px 20px),
    var(--card-2);
  display:flex;align-items:center;justify-content:center;
}
.pon.oculto .pon-foto span{font-size:2.2rem;color:rgba(255,255,255,.16);font-weight:700}
.pon.oculto .pon-nom{color:var(--tenue-2)}
.pon.oculto .pon-rol{color:var(--tenue-2)}

/* ============ CONTADOR ============ */
.cuenta{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.cuenta-caja{
  min-width:86px;padding:16px 10px;
  background:var(--card);
  border:1px solid var(--linea);
  border-radius:var(--radio);
}
.cuenta-num{
  display:block;font-size:1.9rem;font-weight:700;
  color:var(--oro);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.cuenta-lbl{
  display:block;margin-top:6px;
  font-size:10px;font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--tenue-2);
}

/* ============ ENTRADAS ============ */
.tickets{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:20px;align-items:start;
}
.tk{
  background:var(--card);
  border:1px solid var(--linea);
  border-radius:22px;
  padding:34px 30px;
  position:relative;
  display:flex;flex-direction:column;
}
.tk.destacada{
  border-color:rgba(224,178,95,.42);
  background:linear-gradient(180deg,rgba(224,178,95,.06),transparent 40%),var(--card);
}
.tk-badge{
  position:absolute;top:-12px;left:30px;
  background:linear-gradient(180deg,var(--oro-luz),var(--oro-hondo));
  color:var(--oscuro);
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  padding:5px 14px;border-radius:999px;
}
.tk h3{font-size:19px;font-weight:600;margin-bottom:14px;letter-spacing:-.01em}
.tk-precios{display:flex;align-items:baseline;gap:11px;margin-bottom:24px}
.tk-precio{font-size:2.7rem;font-weight:700;line-height:1;letter-spacing:-.03em}
.tk-precio-viejo{font-size:1.05rem;color:var(--tenue-2);text-decoration:line-through}
/* Pildora del descuento, al lado del precio viejo tachado: el numero grande
   dice cuanto cuesta y esto dice cuanto se ahorra. Usa los tokens del oro,
   asi que si cambia la marca cambia sola. */
.tk-dto{
  font-size:.78rem;font-weight:600;letter-spacing:.02em;
  color:var(--oro);
  background:var(--oro-suave);
  border:1px solid rgba(224,178,95,.28);
  padding:5px 9px;border-radius:999px;
  white-space:nowrap;
}
.tk ul{list-style:none;margin-bottom:26px;flex-grow:1}
.tk li{
  padding:9px 0 9px 28px;position:relative;
  font-size:14.5px;color:rgba(255,255,255,.84);
}
.tk li::before{
  content:'';position:absolute;left:0;top:16px;
  width:15px;height:15px;border-radius:50%;
  background:var(--oro-suave);
}
.tk li::after{
  content:'';position:absolute;left:4.5px;top:20px;
  width:6px;height:3px;
  border-left:1.6px solid var(--oro);
  border-bottom:1.6px solid var(--oro);
  transform:rotate(-45deg);
}
/* La mastermind es lo unico que la VIP tiene y la General no, asi que va
   resaltada: se lee sin recorrer la lista entera. Los margenes negativos
   caben de sobra dentro del padding de 30px de la tarjeta.
   El tilde y su circulo se corren lo mismo que el texto, y el circulo sube
   de opacidad porque sobre el fondo dorado el tono de siempre desaparece. */
.tk li.destaca{
  color:var(--oro);font-weight:600;
  background:var(--oro-suave);
  margin:4px -12px;
  padding-left:40px;padding-right:14px;
  border-radius:10px;
}
.tk li.destaca::before{left:12px;background:rgba(224,178,95,.24)}
.tk li.destaca::after{left:16.5px}
.tk .btn{width:100%;padding:15px 20px}
.tk-nota{
  display:block;text-align:center;margin-top:11px;
  font-size:12.5px;color:var(--tenue-2);
}

/* Lo que NO entra en esta entrada. Se muestra a proposito: deja ver
   lo que se pierde quien compra la general en vez de la VIP. */
.tk li.no{color:var(--tenue-2)}
.tk li.no::before{background:rgba(255,255,255,.05)}
.tk li.no::after{
  content:'\2715';
  left:0;top:9px;width:15px;height:15px;
  border:none;transform:none;
  display:flex;align-items:center;justify-content:center;
  font-size:8.5px;font-weight:700;
  color:var(--tenue-2);
}

/* ============ UBICACION / MAPA ============ */
.mapa{
  width:100%;height:360px;
  border:1px solid var(--linea);
  border-radius:var(--radio);
  background:var(--card);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.mapa iframe{width:100%;height:100%;border:0;filter:grayscale(.6) invert(.92) contrast(.9)}

/* ============ FECHA Y HORARIO ============ */
.fecha-caja{
  background:var(--card);
  border:1px solid var(--linea);
  border-radius:22px;
  padding:44px 32px;text-align:center;
}
.fecha-caja .val{font-size:clamp(1.35rem,3.4vw,2rem);font-weight:700;letter-spacing:-.02em}
.fecha-caja .val + .val{margin-top:8px;color:var(--oro)}

/* ============ FOOTER ============ */
footer{
  border-top:1px solid var(--linea);
  padding:80px 0 40px;text-align:center;
}
.dudas-tit{font-size:clamp(1.7rem,3.4vw,2.3rem);margin-bottom:12px}
.dudas-baja{color:var(--tenue);margin-bottom:26px}
.legal{
  margin-top:56px;padding-top:26px;
  border-top:1px solid var(--linea);
  font-size:12.5px;color:var(--tenue-2);
}

/* ============ BARRA FIJA MOVIL ============ */
.barra{
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:rgba(7,7,10,.94);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--linea);
  padding:11px 16px;display:none;
}
.barra .btn{width:100%;padding:15px}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  section{padding:68px 0}
  .hero{padding:104px 0 64px}
  .hero-foto{max-width:300px}
  .principal{grid-template-columns:1fr;gap:28px;max-width:420px;margin:0 auto;text-align:center}
  .principal-foto{max-width:300px;margin-left:auto;margin-right:auto}
  .principal .pill{margin-left:auto;margin-right:auto}
  .principal .sec-tit{margin-left:auto;margin-right:auto}
  .cuenta-caja{min-width:72px;padding:13px 8px}
  .cuenta-num{font-size:1.5rem}
  .barra{display:block}
  body{padding-bottom:74px}
  .nav .btn{display:none}
}
@media (max-width:400px){
  .cuenta{gap:7px}
  .cuenta-caja{min-width:64px;padding:11px 5px}
  .cuenta-num{font-size:1.3rem}
}