#b25-page{
  --b25-yellow:#ffd00f;
  --b25-yellow-h:#e6bc00;
  --b25-ink:#111111;
  --b25-bg:#f7f7f7;
  --b25-bg2:#efefef;
  color:var(--b25-ink);
  font-family:'Montserrat',sans-serif;
  background:var(--b25-bg);
}
#b25-page *, #b25-page *::before, #b25-page *::after{ box-sizing:border-box; }
#b25-page .b25__container{ max-width:1400px; margin:0 auto; padding:0 40px; }
#b25-page img{ display:block; max-width:100%; }
#b25-page h1, #b25-page h2, #b25-page h3, #b25-page p, #b25-page ul, #b25-page li, #b25-page a, #b25-page span{
  font-family:'Montserrat',sans-serif; letter-spacing:0;
}
#b25-page a{ text-decoration:none; }
#b25-page ul{ list-style:none; }

#b25-page .b25-hero{
  position:relative; color:#fff; text-align:center;
  padding:150px 20px 120px; background:#000 center center / cover no-repeat;
}
#b25-page .b25-hero__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.82); }
#b25-page .b25-hero__inner{ position:relative; z-index:1; }
/* Figma: 35px / peso 400 / interlineado 110% / #d3d3d3, SIN espaciado
   entre letras ni mayúsculas forzadas (el texto ya va en mayúsculas en el
   contenido). El .35em de tracking y el uppercase eran nuestros, no del
   diseño, y a 35px desfiguraban bastante el rótulo. */
#b25-page .b25-hero__eyebrow{
  margin:0 0 26px; font-size:clamp(18px, 1.83vw, 35px);
  font-weight:400; letter-spacing:0; text-transform:none; color:#d3d3d3;
  line-height:110%;
}
/* Figma h1: 100px / peso 600 / interlineado 93% */
#b25-page .b25-hero__title{
  margin:0 auto 30px; max-width:1280px; color:#fff;
  font-weight:600; font-size:clamp(40px, 5.21vw, 100px); line-height:93%;
}
/* Figma: 35px / peso 400 (el "Barómetro Educa PHAROS 2025:" del principio
   va en 700 desde el propio contenido, con <strong>) */
#b25-page .b25-hero__subtitle{
  margin:0 auto 46px; max-width:1280px; color:#fff;
  font-size:clamp(16px, 1.83vw, 35px); line-height:110%; font-weight:400;
}
#b25-page .b25-hero__btns{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }

#b25-page .b25-btn{
  display:inline-block; background:var(--b25-yellow); color:#111 !important;
  /* Figma h-6: 20px / peso 700 / interlineado 110% */
  padding:16px 30px; border-radius:4px; font-weight:700;
  font-size:clamp(14px, 1.05vw, 20px); line-height:110%;
  text-decoration:none !important; transition:background .18s ease;
}
#b25-page .b25-btn:hover{ background:var(--b25-yellow-h); }
#b25-page .b25-btn--dark{ background:#111; color:#fff !important; }
#b25-page .b25-btn--dark:hover{ background:#000; }

#b25-page .b25-section{ padding:110px 0; }
#b25-page .b25-section--alt{ background:var(--b25-bg2); }
#b25-page .b25-section--panelwrap{ padding:60px 0 110px; }
#b25-page .b25-section--stats{ padding:90px 0; }
#b25-page .b25-section--viewer{ padding:60px 0; }
/* Figma h3: 65px / peso 700 / interlineado 110% */
#b25-page .b25-h2{
  margin:0 0 34px; font-weight:700; text-transform:uppercase;
  font-size:clamp(30px, 3.39vw, 65px); line-height:110%; color:var(--b25-ink);
}
#b25-page .b25-h2--center{ text-align:center; }
#b25-page .b25-h2--case{ text-transform:none; }
#b25-page .b25-h2__line{ display:inline-block; white-space:nowrap; }
#b25-page .b25-highlight{ display:inline-block; background:var(--b25-yellow); padding:2px 16px; }
#b25-page .b25-p{
  margin:0 0 22px; max-width:700px; font-weight:400;
  font-size:clamp(14px, .94vw, 18px); line-height:140%; color:#222;
}
#b25-page .b25-split{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
#b25-page .b25-split__copy{ min-width:0; }
/* Un solo lado en diagonal, no paralelogramo (antes se inclinaban los dos).
   El corte va SIEMPRE en el borde izquierdo, también en la variante --rev
   (la imagen de "Los objetivos", que va a la izquierda del texto): las dos
   imágenes comparten la misma forma en vez de ir en espejo. */
#b25-page .b25-skew,
#b25-page .b25-skew--rev{ clip-path:polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
#b25-page .b25-skew img{ width:100%; height:100%; object-fit:cover; }

#b25-page .b25-checks{ margin:0; padding:0; list-style:none; }
#b25-page .b25-checks li{ display:flex; gap:18px; align-items:flex-start; margin-bottom:28px; max-width:760px; }
#b25-page .b25-checks svg{
  flex:none; margin-top:2px; width:clamp(22px, 1.56vw, 30px); height:clamp(22px, 1.56vw, 30px);
  stroke:var(--b25-yellow);
}
#b25-page .b25-checks span{ font-weight:400; font-size:clamp(15px, 1.15vw, 22px); line-height:130%; color:#222; }

#b25-page .b25-panel{ background:#141414; padding:90px 70px 70px; }
#b25-page .b25-panel__title{
  margin:0 0 18px; text-align:center; color:var(--b25-yellow);
  font-size:clamp(30px, 3.2vw, 60px); line-height:110%; font-weight:700;
}
/* Figma h-4: 35px / peso 700 / interlineado 110%, en blanco sobre el panel
   oscuro ("Identifica las áreas clave que son prioridad...") */
#b25-page .b25-panel__subtitle{
  margin:0 auto 60px; max-width:900px; text-align:center; color:#fff;
  font-size:clamp(16px, 1.83vw, 35px); line-height:110%; font-weight:700;
}
#b25-page .b25-cards{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 80px) / 3);
  gap:40px; overflow-x:auto; scroll-snap-type:x mandatory;
  max-width:1200px; margin:0 auto; padding:4px;
  scrollbar-width:none;
}
#b25-page .b25-cards::-webkit-scrollbar{ display:none; }
#b25-page .b25-card{
  scroll-snap-align:start; background:#ececec; padding:48px 32px; text-align:center;
  border-radius:10px;
}
/* Alto fijo y ancho automático: los iconos de media/ tienen proporciones
   distintas entre sí (80x80, 90x81, 29x27, 56x70, 90x65) y forzarlos a un
   cuadrado los deformaría. El 'color' alimenta al fill:currentColor de los
   ficheros; el 'stroke' sigue ahí para los SVG inline de reserva. */
#b25-page .b25-card svg{
  display:block; height:56px; width:auto; max-width:76px;
  margin:0 auto 24px; color:var(--b25-yellow); stroke:var(--b25-yellow);
}
/* Figma: título de tarjeta 32px/700/110%, texto con la escala "body"
   16px/500/120%. Nuestro texto estaba en 12,5px y peso normal. */
#b25-page .b25-card__title{
  margin:0 0 18px; font-size:clamp(18px, 1.67vw, 32px); line-height:110%;
  font-weight:700; text-transform:uppercase; color:#000;
}
#b25-page .b25-card__text{ margin:0; font-size:16px; line-height:120%; font-weight:500; color:#000; }
#b25-page .b25-panel__nav{ display:flex; gap:16px; justify-content:center; margin-top:54px; }
#b25-page .b25-nav-btn{
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  border:2px solid var(--b25-yellow); background:none; color:var(--b25-yellow);
  display:flex; align-items:center; justify-content:center; transition:all .18s ease;
}
/* Antes el hover rellenaba el círculo de amarillo y ponía la flecha en
   #111, que es el negro que aparecía. Ahora la flecha y el borde pasan al
   amarillo oscuro y el fondo sigue transparente: se oscurece sin cambiar de
   color.
   Se incluye :focus además de :hover porque al hacer clic el botón se queda
   enfocado, y Astra define su propio color para ese estado. */
#b25-page .b25-nav-btn:hover,
#b25-page .b25-nav-btn:focus,
#b25-page .b25-nav-btn:focus-visible{
  background:none;
  border-color:var(--b25-yellow-h);
  color:var(--b25-yellow-h);
}
/* El chevron es un <svg stroke="currentColor">, así que normalmente basta
   con el color del botón. Se fija también el stroke directamente y con
   !important porque el tema (o el CSS que Astra genera desde el
   Personalizador) aplica su propio color a button:hover / button:focus, y
   es lo que estaba dejando la flecha en negro. Atacar el stroke del SVG
   salta por encima de la herencia de currentColor y de esas reglas. */
#b25-page .b25-nav-btn svg{ stroke:var(--b25-yellow) !important; }
#b25-page .b25-nav-btn:hover svg,
#b25-page .b25-nav-btn:focus svg,
#b25-page .b25-nav-btn:focus-visible svg{ stroke:var(--b25-yellow-h) !important; }

#b25-page .b25-valor{ text-align:center; }
/* Figma h-5: 25px / peso 700 / interlineado 110% / #141414 */
#b25-page .b25-valor__lead{
  margin:0 auto 70px; max-width:950px; font-weight:700;
  font-size:clamp(15px, 1.31vw, 25px); line-height:110%; color:#141414;
}
#b25-page .b25-valor__grid{ display:grid; grid-template-columns:repeat(4, 1fr); }
#b25-page .b25-valor__item{ padding:10px 30px; border-right:1px solid #cfcfcf; }
#b25-page .b25-valor__item:last-child{ border-right:0; }
#b25-page .b25-valor__item svg{
  width:clamp(26px, 1.8vw, 36px); height:clamp(26px, 1.8vw, 36px);
  stroke:var(--b25-yellow); margin:0 auto 20px;
}
#b25-page .b25-valor__text{ margin:0; font-size:clamp(13px, .94vw, 18px); line-height:145%; color:#222; }

#b25-page .b25-viewer__full{ width:100%; height:auto; display:block; }

/* Vídeo: mismo ancho que tenía la imagen que sustituye. El aspect-ratio
   mantiene el 16:9 a cualquier tamaño sin trucos de padding. */
#b25-page .b25-viewer__video{
  position:relative; width:100%; aspect-ratio:16/9;
  background:#000; overflow:hidden;
}
#b25-page .b25-viewer__video iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}

#b25-page .b25-prensa{ background:var(--b25-yellow); padding:95px 0; }
/* Figma: 55px / peso 700 / interlineado 97% (53,4px sobre 55) / #141414 */
#b25-page .b25-prensa__h2{
  margin:0 0 60px; text-align:center; color:#141414;
  font-size:clamp(28px, 2.87vw, 55px); line-height:97%; font-weight:700;
}
#b25-page .b25-prensa__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:44px; max-width:1200px; margin:0 auto; }
#b25-page .b25-prensa__card{ display:flex; flex-direction:column; align-items:flex-start; }
#b25-page .b25-prensa__card img{ width:100%; height:220px; object-fit:cover; margin-bottom:26px; }
/* Figma h-5: 25px / peso 700 / interlineado 110% */
#b25-page .b25-prensa__title{ margin:0 0 24px; font-size:clamp(16px, 1.31vw, 25px); line-height:110%; font-weight:700; color:#000; }
#b25-page .b25-prensa__card .b25-btn{ margin-top:auto; }

#b25-page .b25-stats{ display:grid; grid-template-columns:repeat(3, 1fr); }
#b25-page .b25-stat{
  text-align:center; padding:10px 30px; border-right:2px solid var(--b25-yellow);
  display:flex; flex-direction:column; justify-content:center; min-width:0;
}
#b25-page .b25-stat:last-child{ border-right:0; }
/* Figma h-2: 80px / peso 700 / interlineado 110% / #141414 (teníamos 800) */
#b25-page .b25-stat__num{
  margin:0 0 14px; font-weight:700; white-space:nowrap;
  font-size:clamp(40px, 4.17vw, 80px); line-height:110%; color:#141414;
}
/* Figma h-4: 35px / peso 700 / interlineado 110% / #141414. Es el cambio
   más fuerte de la sección: teníamos 24px en peso normal. */
#b25-page .b25-stat__label{
  margin:0 auto; max-width:420px; font-weight:700;
  font-size:clamp(16px, 1.83vw, 35px); line-height:110%; color:#141414;
}

/* Modal Lead Gen */
body.b25-modal-lock{ overflow:hidden; }
#b25-page .b25-lead-modal{ position:fixed; inset:0; z-index:9999; display:none; }
#b25-page .b25-lead-modal.is-open{ display:block; }
#b25-page .b25-lead-modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
#b25-page .b25-lead-modal__dialog{
  position:relative; z-index:1;
  background:#fff; border-top:6px solid var(--b25-yellow);
  max-width:520px; width:calc(100% - 40px);
  margin:8vh auto; padding:44px 36px 36px;
}
/* El glifo "×" no llena el alto de su línea, así que con el line-height
   por defecto quedaba pegado arriba dentro del botón. Con flex se centra
   por caja, no por métrica de fuente, y ya no depende del tipo. El
   padding:0 evita que el user-agent le meta relleno propio y lo descuadre
   de nuevo. */
#b25-page .b25-lead-modal__close{
  position:absolute; top:10px; right:10px;
  width:36px; height:36px; border:0; border-radius:4px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:#111; color:#fff; font-size:24px; line-height:1; cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
/* !important: Astra/Bootstrap estilan button:hover y ganarían por especificidad */
#b25-page .b25-lead-modal__close:hover,
#b25-page .b25-lead-modal__close:focus-visible{
  background:var(--b25-yellow) !important; color:#111 !important;
}
#b25-page .b25-lead-modal__title{ margin:0 0 8px; font-size:24px; font-weight:700; color:#111; }
#b25-page .b25-lead-modal__sub{ margin:0 0 26px; font-size:14px; color:#555; }
#b25-page .b25-lead-form label{ display:block; margin:0 0 16px; font-size:13px; font-weight:700; color:#111; }
#b25-page .b25-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;
}
#b25-page .b25-lead-form input:focus{ outline:2px solid var(--b25-yellow); border-color:var(--b25-yellow); }
#b25-page .b25-lead-form button[type="submit"]{
  width:100%; border:0; cursor:pointer; appearance:none; font-family:'Montserrat',sans-serif;
  background:var(--b25-yellow) !important; color:#111 !important;
}
#b25-page .b25-lead-form button[type="submit"]:hover,
#b25-page .b25-lead-form button[type="submit"]:focus-visible{
  background:#cca300 !important; color:#111 !important;
}
#b25-page .b25-lead-form button[type="submit"]:disabled{ cursor:not-allowed; opacity:.7; }
#b25-page .b25-lead-form__error{ margin:12px 0 0; color:#c62828; font-size:13px; font-weight:600; }

@media (max-width:1000px){
  #b25-page .b25-split{ grid-template-columns:1fr; gap:44px; }
  #b25-page .b25-cards{ grid-auto-columns:calc((100% - 40px) / 2); }
  #b25-page .b25-valor__grid{ grid-template-columns:repeat(2, 1fr); gap:40px 0; }
  #b25-page .b25-valor__item:nth-child(2){ border-right:0; }
  #b25-page .b25-prensa__grid{ grid-template-columns:1fr; max-width:560px; }
  #b25-page .b25-stats{ grid-template-columns:1fr; gap:40px 0; }
  #b25-page .b25-stat{ border-right:0; border-bottom:2px solid var(--b25-yellow); padding-bottom:30px; }
  #b25-page .b25-stat:last-child{ border-bottom:0; }
  #b25-page .b25-panel{ padding:60px 30px 50px; }
}
@media (max-width:640px){
  #b25-page .b25-section{ padding:60px 0; }
  #b25-page .b25-hero{ padding:90px 20px 70px; }
  #b25-page .b25-cards{ grid-auto-columns:100%; }
  #b25-page .b25-valor__grid{ grid-template-columns:1fr; }
  #b25-page .b25-valor__item{ border-right:0; }
  #b25-page .b25-lead-modal__dialog{ margin:4vh auto; padding:36px 22px 26px; }
}