/* =========================================================
   BASE — escopado bajo #b26-page (anti-Elementor)
========================================================= */
#b26-page{
  --b26-yellow:#ffd200;
  --b26-yellow-h:#e6bd00;
  --b26-ink:#111111;
  --b26-bg:#f7f7f7;
  --b26-bg2:#efefef;
  color:var(--b26-ink);
  font-family:'Montserrat',sans-serif;
  background:var(--b26-bg);
}
#b26-page *, #b26-page *::before, #b26-page *::after{ box-sizing:border-box; }
#b26-page .b26__container{ max-width:1400px; margin:0 auto; padding:0 40px; }
#b26-page img{ display:block; max-width:100%; }
#b26-page h1, #b26-page h2, #b26-page h3, #b26-page p, #b26-page ul, #b26-page li, #b26-page a, #b26-page span{
  font-family:'Montserrat',sans-serif; letter-spacing:0;
}
#b26-page a{ text-decoration:none; }
#b26-page ul{ list-style:none; }

/* =========================================================
   BOTONES
========================================================= */
#b26-page .b26-btn{
  display:inline-block; background:var(--b26-yellow); color:#111 !important;
  padding:16px 30px; border-radius:4px; font-weight:700;
  font-size:clamp(13px, .83vw, 16px); line-height:110%;
  text-decoration:none !important; transition:background .18s ease;
}
#b26-page .b26-btn:hover{ background:var(--b26-yellow-h); }
#b26-page .b26-btn--dark{ background:#111; color:#fff !important; }
#b26-page .b26-btn--dark:hover{ background:#000; }
#b26-page .b26-btn--inverse{ background:#111; color:var(--b26-yellow) !important; }
#b26-page .b26-btn--inverse:hover{ background:#000; }

/* =========================================================
   HERO — claro, con badge
========================================================= */
#b26-page .b26-hero{ position:relative; padding:100px 0 150px; background:var(--b26-bg); }
#b26-page .b26-hero__copy{ max-width:820px; position:relative; z-index:2; }
#b26-page .b26-badge{
  display:inline-block; margin:0 0 28px; padding:8px 18px;
  background:#111; color:#fff; font-weight:700;
  font-size:clamp(16px, 1.2vw, 24px); letter-spacing:.02em;
}
#b26-page .b26-badge em{ font-style:normal; color:var(--b26-yellow); }
#b26-page .b26-hero__title{
  margin:0 0 30px; color:#111; font-weight:600;
  font-size:clamp(40px, 4.6vw, 88px); line-height:105%;
}
#b26-page .b26-hero__subtitle{
  margin:0 0 48px; max-width:660px; color:#333;
  font-size:clamp(14px, 1vw, 19px); line-height:150%;
}
#b26-page .b26-hero__btns{ display:flex; gap:22px; flex-wrap:wrap; }

/* =========================================================
   SECCIÓN OSCURA — contenedor de posicionamiento de la torre
========================================================= */
#b26-page .b26-dark{ position:relative; background:#141414; padding:120px 0; overflow:visible; }
#b26-page .b26-dark__copy{
  position:relative; z-index:2;          /* por delante de la torre */
  max-width:560px; text-align:center;
  margin-right:auto;
}
#b26-page .b26-dark__title{
  margin:0 0 28px; color:#fff; font-weight:700;
  font-size:clamp(32px, 3.2vw, 60px); line-height:110%;
}
#b26-page .b26-dark__p{
  margin:0 0 22px; color:#fff;
  font-size:clamp(14px, 1vw, 19px); line-height:150%;
}
#b26-page .b26-txt-yellow{ color:var(--b26-yellow); }

/* =========================================================
   TORRE
   El asset "torre-2026" viene girado 90º a la IZQUIERDA;
   se endereza con rotate(90deg).
   Es hija de .b26-dark  ->  bottom:0 = borde inferior de la
   sección oscura (ningún padding intermedio la desplaza).

   Se muestra a su PROPORCIÓN NATURAL (sin object-fit, sin
   recorte): así no se estrecha ni se le corta la corona/base.
   Variables de control:
     --tw-h     : ALTO visible de la torre (cuánto sube por el
                  hero; su base queda pegada al fondo del dark)
     --tw-ratio : ancho/alto aproximado del asset; SOLO sirve
                  para alinear el borde derecho de la torre.
     --tw-gap   : padding EXTRA a la derecha respecto al borde
                  del contenedor (súbelo para meterla más adentro).

   El "right" alinea el borde derecho de la torre con el borde
   del contenedor (mismo margen que el título/botones):
     (100% - 1400px)/2  -> mitad del hueco lateral en pantallas
                           más anchas que el contenedor
     + 40px             -> gutter del .b26__container
   El max(40px, …) impide que se pegue al borde en pantallas
   estrechas.

   IMPORTANTE: para que la BASE quede pegada al bottom, el PNG
   no debe tener margen transparente por debajo de la torre
   (recórtalo al contorno). Ver nota al pie del archivo.
========================================================= */
#b26-page .b26-tower{
  --tw-h:clamp(720px, 74vw, 150vh);
  --tw-ratio:.42;
  --tw-gap:0px;
  position:absolute; z-index:1; pointer-events:none;
  bottom:0;                            /* base pegada al fondo de la sección oscura */
  right:max(40px, calc((100% - 1400px) / 2 + 40px + var(--tw-gap)));  /* alinea con el borde del contenedor */
  height:var(--tw-h);
  width:calc(var(--tw-h) * var(--tw-ratio));
}
#b26-page .b26-tower img{
  position:absolute; top:50%; left:50%;
  width:var(--tw-h);                   /* ancho_img = alto visible (se cruza al rotar) */
  height:auto;                         /* alto auto => aspecto natural, SIN recorte */
  max-width:none;
  transform:translate(-50%,-50%) rotate(90deg);
}

/* =========================================================
   QUÉ VAS A ENCONTRAR — caja 601×453, sólido amarillo de
   relleno e imagen ampliada anclada a la derecha
========================================================= */
#b26-page .b26-section{ padding:120px 0; }
#b26-page .b26-h2{
  margin:0 0 40px; color:var(--b26-ink); font-weight:700; text-transform:uppercase;
  font-size:clamp(32px, 3.4vw, 64px); line-height:105%;
}
#b26-page .b26-h2__line{ display:inline-block; white-space:nowrap; }
#b26-page .b26-split{ display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }
#b26-page .b26-split__copy{ min-width:0; }
#b26-page .b26-split__media{
  position:relative; overflow:hidden;
  background:var(--b26-yellow);
  aspect-ratio:601 / 453;
}
#b26-page .b26-split__media img{
  position:absolute; top:50%; right:0;
  transform:translateY(-50%);
  height:182%;
  width:auto; max-width:none;
}
#b26-page .b26-checks{ margin:0; padding:0; list-style:none; }
#b26-page .b26-checks li{ display:flex; gap:18px; align-items:flex-start; margin-bottom:28px; max-width:640px; }
#b26-page .b26-checks svg{
  flex:none; margin-top:2px; width:clamp(22px, 1.56vw, 30px); height:clamp(22px, 1.56vw, 30px);
  stroke:var(--b26-yellow);
}
#b26-page .b26-checks span{ font-weight:400; font-size:clamp(15px, 1.15vw, 22px); line-height:130%; color:#222; }

/* =========================================================
   LA PRESENTACIÓN EN DIRECTO
========================================================= */
#b26-page .b26-evento{ background:var(--b26-bg2); padding:120px 0; text-align:center; }
#b26-page .b26-evento__h2{
  margin:0 0 26px; color:#111; font-weight:700; text-transform:uppercase;
  font-size:clamp(32px, 3.4vw, 64px); line-height:105%;
}
#b26-page .b26-evento__lead{ margin:0 auto 64px; max-width:920px; font-size:clamp(15px, 1.1vw, 21px); line-height:140%; color:#222; }
#b26-page .b26-actos{
  display:grid; grid-template-columns:1fr 1fr; gap:44px;
  max-width:1080px; margin:0 auto 64px; text-align:left;
}
#b26-page .b26-acto{ border:2px solid var(--b26-yellow); background:var(--b26-bg); padding:46px 42px; }
#b26-page .b26-acto__tag{
  display:inline-block; margin:0 0 32px; padding:6px 14px;
  background:var(--b26-yellow); color:#111; font-weight:700;
  font-size:clamp(18px, 1.4vw, 26px);
}
#b26-page .b26-acto__line{ display:flex; gap:16px; align-items:baseline; margin:0 0 16px; flex-wrap:wrap; }
#b26-page .b26-acto__name{ font-size:clamp(20px, 1.6vw, 30px); font-weight:700; color:#111; }
#b26-page .b26-acto__time{ font-size:clamp(18px, 1.4vw, 26px); font-weight:500; color:#9a9a9a; }
#b26-page .b26-acto__desc{ margin:0; font-size:clamp(14px, 1vw, 19px); line-height:150%; color:#222; }

/* =========================================================
   ACCESO ANTICIPADO
========================================================= */
#b26-page .b26-acceso{ background:#141414; padding:120px 0; text-align:center; }
#b26-page .b26-acceso__h2{
  margin:0 0 26px; color:var(--b26-yellow); font-weight:700; text-transform:uppercase;
  font-size:clamp(34px, 3.4vw, 64px); line-height:105%;
}
#b26-page .b26-acceso__lead{ margin:0 auto 74px; max-width:880px; color:#fff; font-size:clamp(15px, 1.2vw, 22px); line-height:140%; }
#b26-page .b26-acceso__box{
  position:relative; max-width:1160px; margin:0 auto;
  padding:120px 30px; background:#222 center center / cover no-repeat;
}
#b26-page .b26-acceso__overlay{ position:absolute; inset:0; background:rgba(70,70,70,.55); }
#b26-page .b26-acceso__inner{ position:relative; z-index:1; }
#b26-page .b26-acceso__title{
  margin:0 auto 26px; max-width:700px; color:#fff; font-weight:700;
  font-size:clamp(28px, 2.8vw, 52px); line-height:115%;
}
#b26-page .b26-acceso__sub{ margin:0 0 40px; color:#fff; font-size:clamp(16px, 1.3vw, 24px); line-height:135%; }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:1000px){
  #b26-page .b26-hero{ padding:70px 0 60px; }

  /* Torre en flujo normal, centrada bajo el copy (misma técnica). */
  #b26-page .b26-tower{
    position:relative; bottom:auto; right:auto;
    margin:40px auto 0;
    height:min(96vw, 520px);
    width:calc(min(96vw, 520px) * var(--tw-ratio, .42));
  }
  #b26-page .b26-tower img{ width:min(96vw, 520px); }

  #b26-page .b26-dark{ padding:80px 0; }
  #b26-page .b26-dark__copy{ margin-left:auto; margin-right:auto; }
  #b26-page .b26-split{ grid-template-columns:1fr; gap:44px; }
  #b26-page .b26-actos{ grid-template-columns:1fr; max-width:560px; }
  #b26-page .b26-section, #b26-page .b26-evento, #b26-page .b26-acceso{ padding:70px 0; }
}

/* =========================================================
   NOTA sobre torre-2026.png
   Si la BASE de la torre no llega al borde inferior de la
   sección oscura, el PNG tiene margen transparente por debajo.
   Recórtalo al contorno (una sola vez), p.ej.:
     mogrify -trim +repage torre-2026.png
   Afinado sin tocar el asset:
     --tw-h     -> más alto = sube más por el hero y baja más su base
     --tw-ratio -> ancho de la torre / posición del borde derecho
     --tw-gap   -> padding extra a la derecha (meterla más adentro)
========================================================= */


/* Modal Lead Gen */
body.b26-modal-lock{ overflow:hidden; }
#b26-page .b26-lead-modal{ position:fixed; inset:0; z-index:9999; display:none; }
#b26-page .b26-lead-modal.is-open{ display:block; }
#b26-page .b26-lead-modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
#b26-page .b26-lead-modal__dialog{
  position:relative; z-index:1;
  background:#fff; border-top:6px solid var(--b26-yellow);
  max-width:520px; width:calc(100% - 40px);
  margin:8vh auto; padding:44px 36px 36px;
}
#b26-page .b26-lead-modal__close{
  position:absolute; top:10px; right:10px;
  width:36px; height:36px; border:0; border-radius:4px;
  background:#111; color:#fff; font-size:20px; line-height:1; cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
/* !important: Astra/Bootstrap estilan button:hover y ganarían por especificidad */
#b26-page .b26-lead-modal__close:hover,
#b26-page .b26-lead-modal__close:focus-visible{
  background:var(--b26-yellow) !important; color:#111 !important;
}
#b26-page .b26-lead-modal__title{ margin:0 0 8px; font-size:24px; font-weight:700; color:#111; }
#b26-page .b26-lead-modal__sub{ margin:0 0 26px; font-size:14px; color:#555; }
#b26-page .b26-lead-form label{ display:block; margin:0 0 16px; font-size:13px; font-weight:700; color:#111; }
#b26-page .b26-lead-form input{
  display:block; width:100%; margin-top:6px;
  padding:12px 14px; border:1px solid #ccc; border-radius:4px;
  font-family:'Montserrat',sans-serif; font-size:14px;
}
#b26-page .b26-lead-form input:focus{ outline:2px solid var(--b26-yellow); border-color:var(--b26-yellow); }
#b26-page .b26-lead-form button[type="submit"]{
  width:100%; border:0; cursor:pointer; appearance:none; font-family:'Montserrat',sans-serif;
  background:var(--b26-yellow) !important; color:#111 !important;
}
#b26-page .b26-lead-form button[type="submit"]:hover,
#b26-page .b26-lead-form button[type="submit"]:focus-visible{
  background:#cca300 !important; color:#111 !important;
}
#b26-page .b26-lead-form button[type="submit"]:disabled{ cursor:not-allowed; opacity:.7; }
#b26-page .b26-lead-form__error{ margin:12px 0 0; color:#c62828; font-size:13px; font-weight:600; }

@media (max-width:640px){
  #b26-page .b26-lead-modal__dialog{ margin:4vh auto; padding:36px 22px 26px; }
}