/* Encabezado único del sitio (logo, menú y Contacto). Lo inserta js/site-header.js en todas las
   páginas. Medidas, colores y estados copiados del Home aprobado; si cambia, cambia aquí y en
   js/site-header.js para todo el sitio a la vez.

   Variantes (data-variant en la etiqueta <script> de cada página):
   - auto  → transparente sobre un hero oscuro; al bajar 50 px aparece la barra oscura (como el Home).
   - solid → la barra oscura siempre visible, para páginas que empiezan sobre fondo claro o sin hero
             bajo la barra (mismo color y proporciones; solo cambia cuándo aparece el fondo). */

.vh { position:fixed; top:0; left:0; right:0; z-index:50; font-family:'Poppins',sans-serif; letter-spacing:0; -webkit-font-smoothing:antialiased; }
.vh *, .vh *::before, .vh *::after { box-sizing:border-box; }
.vh-ov { position:absolute; inset:0; background:hsl(232 24% 11% / .95); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 10px 34px hsl(232 24% 3% / .4); border-bottom:1px solid hsl(0 0% 100% / .06); pointer-events:none; opacity:0; transition:opacity .35s ease; }
.vh[data-scrolled="true"] .vh-ov, .vh[data-variant="solid"] .vh-ov { opacity:1; }
.vh-in { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 24px; }
.vh-bar { height:70px; display:flex; align-items:center; justify-content:space-between; }
.vh-logo { display:flex; align-items:center; }
/* logotipo refinado oficial (blanco sobre oscuro). El SVG casi no tiene margen: se dibuja a 2,0735 × la altura
   de la caja anterior con un relleno lateral de 0,177 × la altura, de modo que ocupa la misma caja (82,5 × 34)
   y el trazo visible mantiene su tamaño y posición. */
.vh-logo img { width:70.5px; height:34px; padding:0 6.0px; box-sizing:content-box; object-fit:contain; display:block; }

/* escritorio (≥1024 px, mismo corte que el Home) */
.vh-links { display:flex; align-items:center; gap:4px; }
.vh-link { display:inline-flex; align-items:center; gap:5px; font-family:inherit; font-size:13px; font-weight:400; line-height:normal; color:hsl(0 0% 100% / .74); padding:8px 12px; border-radius:8px; text-decoration:none; transition:color .2s, background .2s; }
.vh-link:hover, .vh-drop:hover > .vh-link, .vh-drop:focus-within > .vh-link { color:hsl(0 0% 100% / .95); background:hsl(0 0% 100% / .05); }
.vh-link[aria-current="page"] { color:#fff; }
.vh-link svg { display:block; }
.vh-drop { position:relative; }
.vh-panel { position:absolute; top:100%; left:0; padding-top:10px; width:280px; display:none; }
.vh-drop-learning .vh-panel { width:300px; }
.vh-drop:hover .vh-panel, .vh-drop:focus-within .vh-panel, .vh-drop.is-open .vh-panel { display:block; }
.vh-panel-in { background:linear-gradient(180deg, hsl(232 24% 14%), hsl(232 24% 11%)); border:1px solid hsl(0 0% 100% / .1); border-radius:14px; box-shadow:0 24px 50px hsl(232 24% 3% / .5); padding:8px; }
.vh-panel a { display:block; font-size:13px; color:hsl(0 0% 100% / .9); padding:11px 16px; border-radius:9px; text-decoration:none; transition:background .2s, color .2s; }
.vh-panel a:hover, .vh-panel a:focus-visible { background:hsl(0 0% 100% / .08); color:hsl(252 74% 82%); outline:none; }
.vh-cta { margin-left:12px; display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:500; line-height:normal; color:#fff; padding:10px 20px; border-radius:999px; text-decoration:none; background:linear-gradient(90deg, hsl(263 45% 52%), hsl(232 24% 19%)); transition:transform .3s, box-shadow .3s, filter .3s; }
.vh-cta:hover { color:#fff; transform:translateY(-2px); box-shadow:0 10px 28px hsl(263 45% 52% / .45); filter:brightness(1.1); }
.vh a:focus-visible, .vh button:focus-visible { outline:2px solid hsl(252 74% 82%); outline-offset:2px; }

/* móvil y tablet (<1024 px) */
.vh-toggle { display:none; align-items:center; justify-content:center; width:42px; height:42px; border:none; background:hsl(0 0% 100% / .08); color:#fff; border-radius:10px; cursor:pointer; transition:background .2s; padding:0; }
.vh-toggle:hover { background:hsl(0 0% 100% / .14); }
.vh-toggle .vh-i-close { display:none; }
.vh-toggle[aria-expanded="true"] .vh-i-open { display:none; }
.vh-toggle[aria-expanded="true"] .vh-i-close { display:block; }
.vh-mob { position:relative; z-index:1; background:hsl(232 24% 10% / .98); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-top:1px solid hsl(0 0% 100% / .07); max-height:calc(100vh - 70px); overflow-y:auto; }
.vh-mob[hidden] { display:none; }
.vh-mob-in { padding:20px 24px; display:flex; flex-direction:column; gap:2px; max-width:1200px; margin:0 auto; }
.vh-mob-btn { display:flex; align-items:center; justify-content:space-between; width:100%; font-family:inherit; font-size:15px; color:hsl(0 0% 100% / .72); padding:13px 12px; border-radius:8px; background:none; border:none; cursor:pointer; text-align:left; }
.vh-mob-btn svg { transition:transform .25s ease; }
.vh-mob-btn[aria-expanded="true"] svg { transform:rotate(180deg); }
.vh-mob-sub { margin:2px 0 8px 12px; display:flex; flex-direction:column; gap:2px; border-left:1px solid hsl(0 0% 100% / .1); padding-left:12px; }
.vh-mob-sub[hidden] { display:none; }
.vh-mob-sub a { font-size:13px; color:hsl(0 0% 100% / .6); padding:9px 12px; border-radius:6px; text-decoration:none; }
.vh-mob-sub a:hover { color:hsl(252 74% 82%); }
.vh-mob-link { font-size:15px; color:hsl(0 0% 100% / .72); padding:13px 12px; border-radius:8px; text-decoration:none; }
.vh-mob-link:hover { background:hsl(0 0% 100% / .05); color:#fff; }
.vh-mob-link[aria-current="page"], .vh-mob-btn[data-current="true"] { color:#fff; }
.vh-mob-cta { margin-top:12px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:14px; font-weight:500; color:#fff; padding:15px; border-radius:999px; text-decoration:none; background:linear-gradient(90deg, hsl(263 45% 52%), hsl(232 24% 19%)); }
.vh-mob-cta:hover { color:#fff; }
@media (max-width:1023px){
  .vh-links { display:none; }
  .vh-toggle { display:inline-flex; }
}
@media (min-width:1024px){ .vh-mob { display:none !important; } }

/* espacio reservado bajo la barra en páginas cuyo contenido empieza arriba del todo */
.vh-spacer { height:70px; }

/* Barra de desplazamiento del Home (10 px, morado translúcido). Va aquí para que el ancho útil de la
   ventana —y con él la posición del logo y del menú fijos— sea idéntico en todas las páginas. */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:hsl(263 45% 52% / .4); border-radius:8px; }