/* ==========================================================================
   Hagamos Historia · Barra de navegación unificada
   Un solo navbar para las 32 páginas. Se adapta solo al ancho disponible:
   - "full": todos los enlaces y botones visibles
   - "mid":  botones de acción visibles + menú para las secciones
   - "min":  "Test gratuito" + menú (celular)
   Las clases las pone hh/nav.js según lo que quepa realmente en la barra.
   ========================================================================== */

@font-face{font-family:'HHN Montserrat';font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/montserrat-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'HHN Montserrat';font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/montserrat-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'HHN Montserrat';font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/montserrat-latin-700-normal.woff2) format('woff2')}

.hhn{
  --hhn-ink:#0a1439;
  --hhn-yellow:#ffd166;
  --hhn-green:#56f9aa;
  --hhn-teal:#1cbfc6;
  --hhn-h:64px;
  position:sticky;top:0;z-index:70;
  background:#fff;color:var(--hhn-ink);
  border-bottom:1px solid var(--hhn-ink);
  font-family:'HHN Montserrat','HH Montserrat',Montserrat,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}
.hhn *,.hhn *::before,.hhn *::after{box-sizing:border-box}
.hhn :where(a){color:inherit;text-decoration:none}
.hhn :where(button){font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;text-align:inherit}

/* ---------- barra ---------- */
.hhn-bar{display:flex;align-items:stretch;height:var(--hhn-h);min-width:0}
.hhn-brand{display:flex;align-items:center;gap:10px;padding:0 20px 0 16px;flex-shrink:0;min-width:0}
.hhn-brand img{width:40px;height:40px;flex-shrink:0;display:block}
.hhn-brand span{font-weight:500;font-size:18.5px;letter-spacing:-.03em;white-space:nowrap} /* misma letra del título grande "Hagamos Historia" */

.hhn-links,.hhn-actions{display:flex;align-items:stretch;flex-shrink:0}
.hhn-links{margin-left:auto}
.hhn-item{
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  border-left:1px solid var(--hhn-ink);
  padding:0 16px;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;
  transition:background .15s,color .15s;
}
.hhn-item:hover,.hhn-item:focus-visible{background:var(--hhn-ink);color:#fff;outline:none}
.hhn-item svg{width:15px;height:15px;flex-shrink:0}
.hhn-item[aria-current="page"]{font-weight:700;box-shadow:inset 0 -3px 0 var(--hhn-teal)}
.hhn-item.is-mat{background:var(--hhn-yellow);font-weight:700}
.hhn-item.is-mat:hover,.hhn-item.is-mat[aria-expanded="true"]{background:var(--hhn-ink);color:#fff}
.hhn-item.is-mat svg{transition:transform .2s}
.hhn-item.is-mat[aria-expanded="true"] svg{transform:rotate(180deg)}
.hhn-item.is-wa{background:var(--hhn-green);font-weight:700}
.hhn-item.is-wa:hover{background:var(--hhn-ink);color:#fff}
.hhn-item.is-back[hidden]{display:none!important}

/* botón oscuro (Crear cuenta / Test gratuito) */
.hhn-cta{display:flex;align-items:center;border-left:1px solid var(--hhn-ink);padding:0 12px}
.hhn-pill{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  border-radius:9px;background:var(--hhn-ink);color:#fff!important;
  padding:8px 14px;font-size:11.5px;font-weight:700;text-transform:uppercase;line-height:1.15;letter-spacing:.02em;
  box-shadow:inset 0 -3px 0 rgba(255,255,255,.15);white-space:nowrap;transition:background .15s;
}
.hhn-pill:hover{background:#1c2a66}
.hhn-pill.is-teal{background:var(--hhn-teal);color:var(--hhn-ink)!important;box-shadow:inset 0 -3px 0 rgba(10,20,57,.15)}
.hhn-pill.is-teal:hover{background:#3fd3d9}

/* botón de menú */
.hhn-burger{
  display:flex;align-items:center;gap:8px;border-left:1px solid var(--hhn-ink)!important;
  padding:0 16px!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.04em;
}
.hhn-burger:hover,.hhn-burger[aria-expanded="true"]{background:var(--hhn-ink)!important;color:#fff!important}
.hhn-burger svg{width:22px;height:22px}
.hhn-burger .ic-x{display:none}
.hhn-burger[aria-expanded="true"] .ic-menu{display:none}
.hhn-burger[aria-expanded="true"] .ic-x{display:block}

/* ---------- desplegable de Materias (escritorio) ---------- */
.hhn-dd{position:relative;display:flex}
.hhn-dd-panel{
  position:absolute;right:0;top:100%;width:250px;background:#fff;border:1px solid var(--hhn-ink);
  box-shadow:0 18px 40px -18px rgba(10,20,57,.45);
}
.hhn-dd-panel[hidden]{display:none}
.hhn-dd-panel a{display:flex;align-items:center;gap:12px;padding:14px 18px;font-size:12.5px;font-weight:500;text-transform:uppercase;border-bottom:1px solid rgba(10,20,57,.12)}
.hhn-dd-panel a:last-child{border-bottom:0}
.hhn-dd-panel a:hover,.hhn-dd-panel a:focus-visible{background:var(--hhn-ink);color:#fff;outline:none}
.hhn-dot{width:12px;height:12px;flex-shrink:0;display:inline-block}

/* ---------- menú completo ---------- */
.hhn-menu{
  position:absolute;right:0;top:100%;width:min(340px,100vw);max-height:calc(100vh - var(--hhn-h) - 8px);overflow-y:auto;
  background:#fff;border:1px solid var(--hhn-ink);border-right:0;box-shadow:0 24px 48px -20px rgba(10,20,57,.5);
  overscroll-behavior:contain;
}
.hhn-menu[hidden]{display:none}
.hhn-menu-top{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px;border-bottom:1px solid rgba(10,20,57,.12)}
.hhn-menu-top .hhn-pill{padding:12px 10px;font-size:12px}
.hhn-menu-top .is-out{background:#fff;color:var(--hhn-ink)!important;box-shadow:inset 0 0 0 1.5px var(--hhn-ink)}
.hhn-menu-top .is-out:hover{background:#eef3ff}
.hhn-menu-top .is-full{grid-column:1/-1}
.hhn-menu-label{padding:14px 18px 6px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(10,20,57,.5)}
.hhn-menu a.hhn-row,.hhn-menu button.hhn-row{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:13px 18px;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;border-bottom:1px solid rgba(10,20,57,.1)
}
.hhn-menu .hhn-row:hover,.hhn-menu .hhn-row:focus-visible{background:var(--hhn-ink);color:#fff;outline:none}
.hhn-menu .hhn-row[aria-current="page"]{font-weight:700;box-shadow:inset 4px 0 0 var(--hhn-teal)}
.hhn-menu .hhn-row.is-wa{background:var(--hhn-green);font-weight:700}
.hhn-menu .hhn-row.is-wa:hover{background:var(--hhn-ink)}
.hhn-menu .hhn-row svg{width:16px;height:16px;flex-shrink:0}

/* ---------- pestañas de materias (solo en páginas de materia) ---------- */
.hhn-sub{display:flex;overflow-x:auto;border-top:1px solid var(--hhn-ink);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hhn-sub::-webkit-scrollbar{display:none}
.hhn-sub a{
  flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  padding:11px 16px;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  border-right:1px solid rgba(10,20,57,.15)
}
.hhn-sub a:last-child{border-right:0}
.hhn-sub a:hover{background:#eef3ff}
.hhn-sub a[aria-current="page"]{color:#fff}

/* ---------- niveles según el espacio ----------
   full  → todo visible
   fullc → todo visible, más compacto
   mid   → secciones al menú; Atrás, Test gratuito, Contáctanos, Ingresar, Crear cuenta visibles
   midc  → igual, más compacto y Contáctanos solo con ícono
   mida  → solo Ingresar + Crear cuenta (o Mi portal + Salir) visibles
   min   → Test gratuito (o Mi portal) + Menú
   tiny  → igual, para pantallas muy angostas
   -------------------------------------------------------------- */
.hhn[data-tier="full"] .hhn-burger,.hhn[data-tier="fullc"] .hhn-burger{display:none}
.hhn[data-tier="fullc"] .hhn-item{padding:0 11px;font-size:11.5px}
.hhn[data-tier="fullc"] .hhn-brand{padding:0 14px 0 14px}
.hhn[data-tier="fullc"] .hhn-brand span{font-size:16.5px}
.hhn[data-tier="fullc"] .hhn-cta{padding:0 10px}

.hhn[data-tier="mid"] .hhn-links,.hhn[data-tier="midc"] .hhn-links,.hhn[data-tier="mida"] .hhn-links,
.hhn[data-tier="min"] .hhn-links,.hhn[data-tier="tiny"] .hhn-links{display:none}
.hhn[data-tier="mid"] .hhn-actions,.hhn[data-tier="midc"] .hhn-actions,.hhn[data-tier="mida"] .hhn-actions,
.hhn[data-tier="min"] .hhn-actions,.hhn[data-tier="tiny"] .hhn-actions{margin-left:auto}

.hhn[data-tier="midc"] .hhn-item{padding:0 12px;font-size:11.5px}
.hhn[data-tier="midc"] .hhn-item.is-wa .t{display:none}
.hhn[data-tier="midc"] .hhn-item.is-wa svg{width:18px;height:18px}
.hhn[data-tier="midc"] .hhn-brand{padding:0 12px 0 14px}
.hhn[data-tier="midc"] .hhn-brand span{font-size:16.5px}
.hhn[data-tier="midc"] .hhn-cta{padding:0 10px}

.hhn[data-tier="mida"] .hhn-actions > .opt.is-wa{display:none} /* en tableta "Test gratuito" se queda; WhatsApp va al menú */
.hhn[data-tier="mida"] .hhn-item{padding:0 12px;font-size:11.5px}
.hhn[data-tier="mida"] .hhn-brand{padding:0 10px 0 12px}
.hhn[data-tier="mida"] .hhn-brand span{font-size:15.5px}
.hhn[data-tier="mida"] .hhn-cta{padding:0 8px}

/* min: solo Test gratuito (o Mi portal) + menú */
.hhn[data-tier="min"] .hhn-actions > :not(.keep-min),
.hhn[data-tier="tiny"] .hhn-actions > :not(.keep-min){display:none}
.hhn[data-tier="min"] .hhn-brand{padding:0 10px 0 12px;gap:8px}
.hhn[data-tier="min"] .hhn-brand img{width:36px;height:36px}
.hhn[data-tier="min"] .hhn-brand span{font-size:15px}
.hhn[data-tier="min"] .hhn-cta{padding:0 8px}
.hhn[data-tier="min"] .hhn-burger{padding:0 12px!important}
/* tiny: además se esconde el texto "Menú" y se achica la marca */
.hhn[data-tier="tiny"] .hhn-brand{padding:0 8px 0 10px;gap:6px}
.hhn[data-tier="tiny"] .hhn-brand img{width:32px;height:32px}
.hhn[data-tier="tiny"] .hhn-brand span{font-size:13.5px}
.hhn[data-tier="tiny"] .hhn-cta{padding:0 6px}
.hhn[data-tier="tiny"] .hhn-pill{padding:7px 9px;font-size:10.5px}
.hhn[data-tier="tiny"] .hhn-burger{padding:0 10px!important}
.hhn[data-tier="tiny"] .hhn-burger span{display:none}

.hhn[data-tier="mida"] .is-back,.hhn[data-tier="min"] .is-back,.hhn[data-tier="tiny"] .is-back{display:none!important}
.is-back{border-right:1px solid var(--hhn-ink)}

/* mientras se mide, nada se ve cortado */
.hhn[data-tier="measure"] .hhn-bar{overflow:hidden}

/* ---------- pie de página simple (privacidad) ---------- */
.hhn-foot{background:#0a1439;color:rgba(255,255,255,.75);font-family:'HHN Montserrat',ui-sans-serif,system-ui,sans-serif;font-size:13px;padding:28px 20px}
.hhn-foot-in{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between}
.hhn-foot nav{display:flex;flex-wrap:wrap;gap:10px 22px}
.hhn-foot a{color:#fff;text-decoration:none;font-weight:600;text-transform:uppercase;font-size:11.5px;letter-spacing:.04em}
.hhn-foot a:hover{color:#5cdedf}

/* ---------- arreglos visuales de la portada ---------- */
/* "Nuestra metodología" no se corta en celular */
@media (max-width:639px){
  .hh-met-centro h2{font-size:12vw!important}
}
/* fundadores: sin huecos entre palabras */
#fundadores .text-justify{text-align:left!important}

@media print{.hhn{position:static}.hhn-burger,.hhn-menu{display:none!important}}

/* "¿Aún tienes preguntas?": diseño original + personaje (en espejo) asomado
   abajo, en el centro, mirando hacia las preguntas de la derecha */
#preguntas{position:relative;overflow:hidden}
#preguntas > .grid > :not(.hh-faq-fig){position:relative;z-index:1}
.hh-faq-fig{pointer-events:none}
.hh-faq-body{position:relative;display:block;width:100%;transform-origin:50% 100%}
.hh-faq-alien{display:block;width:100%;height:auto}
/* parpadeo: los párpados bajan y suben rápido cada 4,5 s */
.hh-faq-lids{position:absolute;left:0;top:0;width:100%;height:auto;transform-origin:50% 28%;transform:scaleY(0);animation:hh-blink 4.5s ease-in-out infinite}
@keyframes hh-blink{0%,90%,100%{transform:scaleY(0)}93%{transform:scaleY(1)}95%{transform:scaleY(1)}98%{transform:scaleY(0)}}
@media (min-width:1024px){
  #preguntas{--hhw:clamp(210px,19vw,290px)}
  #preguntas > .grid{grid-template-columns:minmax(0,25rem) minmax(0,1fr)!important;column-gap:0!important}
  #preguntas h2{font-size:clamp(3.4rem,5.2vw,5.5rem)!important}
  /* las preguntas dejan sitio al personaje a su izquierda */
  #preguntas > .grid > div:nth-child(2){margin-left:calc(var(--hhw) + clamp(24px,3vw,48px))}
  .hh-faq-fig{position:absolute;bottom:0;left:calc(clamp(20px,2.5vw,32px) + 25rem - 12px);width:var(--hhw);z-index:0}
  .hh-faq-body{animation:hh-alien 5s ease-in-out infinite}
}
@keyframes hh-alien{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(6px) rotate(1.5deg)}}
@media (max-width:1023px){
  #preguntas{padding-bottom:0!important}
  .hh-faq-fig{display:flex;justify-content:center;margin-top:24px}
  .hh-faq-body{width:min(250px,66%)}
}
@media (prefers-reduced-motion:reduce){.hh-faq-body{animation:none!important}}

/* ---- Personaje de "¿Qué te ofrecemos?" ---- */
.hh-ofr-fig{position:relative;z-index:20;pointer-events:none}
.hh-ofr-body{position:relative;display:block}
.hh-ofr-img{display:block;width:100%;height:auto}
@media (max-width:767px){
  .hh-ofr-fig{margin-top:1.5rem;display:flex;justify-content:flex-end}
  .hh-ofr-body{width:min(78%,360px);margin-bottom:-2%}
  .hh-ofr-fig+ul{margin-top:0!important}
}
@media (min-width:768px){
  .hh-ofr-fig{height:0}
  .hh-ofr-body{position:absolute;right:clamp(4px,1vw,16px);bottom:calc(-3.5rem - 2px);width:var(--hhofw,min(34vw,440px));transform:translateY(2%)}
}

/* ---- Fases (Diagnóstico, Clases, Simulacros, Retroalimentación): aumento al pasar el cursor ---- */
li.group.min-h-\[22rem\]{transition:transform .3s ease-out,box-shadow .3s ease-out,background-color .15s ease}
li.group.min-h-\[22rem\]:hover{z-index:10;transform:scale(1.06);box-shadow:0 24px 60px -12px rgba(10,20,57,.55)}
@media (prefers-reduced-motion:reduce){li.group.min-h-\[22rem\]{transition:background-color .15s ease}li.group.min-h-\[22rem\]:hover{transform:none}}

/* ---- Fluidez de animaciones: capas propias en la GPU ---- */
.hh-bh{will-change:transform;transform:translateZ(0);backface-visibility:hidden}
#inicio video,section video{transform:translateZ(0);backface-visibility:hidden}
#inicio>svg{will-change:transform;transform:translateZ(0)}
.hh-g{will-change:transform}

/* ---- Humo del hero de Sociales: los gases suben por dentro, la silueta queda quieta ---- */
.hh-g.hh-gas1{animation:hh-gas 14s linear infinite}
.hh-g.hh-gas2{animation:hh-gas2 20s linear infinite}
@keyframes hh-gas{from{transform:translate(0,0)}to{transform:translate(-18px,-660px)}}
@keyframes hh-gas2{from{transform:translate(0,0)}to{transform:translate(22px,-660px)}}
@media (prefers-reduced-motion:reduce){.hh-g.hh-gas1,.hh-g.hh-gas2{animation:none}}

/* Atrás pegado a los demás botones */
.hhn-bar>.is-back{margin-left:auto}
.hhn-bar>.is-back:not([hidden])+.hhn-links{margin-left:0}
.hhn[data-tier="mida"] .is-back+.hhn-links,.hhn[data-tier="min"] .is-back+.hhn-links,.hhn[data-tier="tiny"] .is-back+.hhn-links{margin-left:auto}


/* Atrás + botones: sin hueco a anchos intermedios */
.hhn-bar>.is-back:not([hidden])~.hhn-actions{margin-left:0!important}
/* En celular el botón Atrás no se muestra: los botones van siempre pegados a la derecha (antes, al llegar desde otra
   página, "Test gratuito" y el menú quedaban corridos a la izquierda con un hueco vacío) */
.hhn[data-tier="mida"] .hhn-bar>.hhn-actions,.hhn[data-tier="min"] .hhn-bar>.hhn-actions,.hhn[data-tier="tiny"] .hhn-bar>.hhn-actions{margin-left:auto!important}
/* Tableta: el botón "Materias" se queda en la barra (el resto de secciones sigue en el menú) */
.hhn[data-tier="mid"] .hhn-links,.hhn[data-tier="midc"] .hhn-links,.hhn[data-tier="mida"] .hhn-links{display:flex}
.hhn[data-tier="mid"] .hhn-links>a,.hhn[data-tier="midc"] .hhn-links>a,.hhn[data-tier="mida"] .hhn-links>a{display:none}
.hhn[data-tier="mid"] .hhn-links,.hhn[data-tier="midc"] .hhn-links,.hhn[data-tier="mida"] .hhn-links{margin-left:auto}
.hhn[data-tier="mid"] .hhn-links~.hhn-actions,.hhn[data-tier="midc"] .hhn-links~.hhn-actions,.hhn[data-tier="mida"] .hhn-links~.hhn-actions{margin-left:0!important}

/* Navbar: leve aumento al pasar el ratón */
@media (hover:hover){.hhn-item,.hhn-pill,.hhn-burger{transition:background .15s,color .15s,scale .2s cubic-bezier(.2,.8,.2,1)}.hhn-item:hover,.hhn-pill:hover,.hhn-burger:hover{scale:1.06;position:relative;z-index:2}}
@media (prefers-reduced-motion:reduce){.hhn-item:hover,.hhn-pill:hover,.hhn-burger:hover{scale:1}}
/* Portada: fundadores y preguntas frecuentes con leve aumento */
@media (hover:hover){
  #fundadores :has(> h3){transition:scale .3s cubic-bezier(.2,.8,.2,1)}
  #fundadores :has(> h3):hover{scale:1.03}
  #preguntas details{transition:scale .25s cubic-bezier(.2,.8,.2,1)}
  #preguntas details:hover{scale:1.03}
  .hhn-item:hover,.hhn-pill:hover,.hhn-burger:hover{transform:scale(1.06)}
}
/* Aumentos leves al pasar el ratón (todo el sitio) */
.hhn-item,.hhn-pill,.hhn-burger{transition:background .15s,color .15s,transform .2s cubic-bezier(.2,.8,.2,1)!important;scale:none!important}
.hh-met-centro h2,a[href^="materia-"],.hh-faq-body,
a[href*="instagram.com"],a[href*="tiktok.com"],a[href*="facebook.com"],a[href*="whatsapp.com/channel"],a[aria-label="Contáctanos por WhatsApp"],
#inicio a[href="test.html"],#inicio a[href="registro.html"],.hhp-zoom{transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,filter .28s ease}
@media (hover:hover){
  .hhn-item:hover,.hhn-pill:hover,.hhn-burger:hover{transform:scale(1.04)}
  .hh-met-centro h2:hover{transform:scale(1.05)}
  a[href^="materia-"]:hover{transform:scale(1.05);position:relative;z-index:2}
  .hh-faq-fig{pointer-events:auto}
  .hh-faq-body:hover{transform:scale(1.08) rotate(-2deg)}
  a[href*="instagram.com"]:hover,a[href*="tiktok.com"]:hover,a[href*="facebook.com"]:hover,a[href*="whatsapp.com/channel"]:hover,a[aria-label="Contáctanos por WhatsApp"]:hover{transform:scale(1.07)}
  #inicio a[href="test.html"]:hover,#inicio a[href="registro.html"]:hover{transform:scale(1.07)}
  #inicio a[href="test.html"]:hover{filter:brightness(1.04)}
  .hhp-zoom:hover{transform:scale(1.02);box-shadow:0 22px 44px -20px rgba(10,20,57,.45);position:relative;z-index:2}
}
@media (prefers-reduced-motion:reduce){.hhn-item:hover,.hhn-pill:hover,.hhn-burger:hover,.hh-met-centro h2:hover,a[href^="materia-"]:hover,.hh-faq-body:hover,a:hover,.hhp-zoom:hover{transform:none!important}}
/* Portada: títulos, personajes y botón final con leve aumento */
body:has(#fundadores) section h2,.hh-ofr-body,.hh-faq-body,section[class*="bg-[#7c1fd0]"] a[href="test.html"]{transition:scale .3s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
  body:has(#fundadores) section h2:hover{scale:1.04}
  .hh-ofr-fig{pointer-events:auto}
  .hh-ofr-body:hover{scale:1.05}
  .hh-faq-body:hover{scale:1.08;transform:none}
  section[class*="bg-[#7c1fd0]"] a[href="test.html"]:hover{scale:1.07}
}
@media (prefers-reduced-motion:reduce){body:has(#fundadores) section h2:hover,.hh-ofr-body:hover,.hh-faq-body:hover,section a:hover{scale:1!important}}
/* Puntajes de los fundadores (473 / 446): aumento al pasar el ratón */
.hh-score{transition:scale .3s cubic-bezier(.2,.8,.2,1);cursor:default}
@media (hover:hover){.hh-score:hover{scale:1.15;z-index:5}}
@media (prefers-reduced-motion:reduce){.hh-score:hover{scale:1}}

/* Celulares: los campos de texto con letra menor a 16 px hacen que el iPhone acerque la pantalla al tocarlos */
@media (max-width:767px){input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}}

/* ---------- Hero en celular y tableta vertical ----------
   Cada escena tiene su propio encuadre vertical (data-vb, aplicado por nav.js) con todos sus protagonistas y sus
   animaciones. Debajo, la escena se funde con un color tomado del mismo dibujo (--hb) y ahí va el texto, como en PC. */
@media (max-width:1023px) and (orientation:portrait){
  .hhm-hero{--ah:min(calc(100vw * var(--ar,1)),60svh);display:block!important;min-height:0!important;background:var(--hb,#0a1439)!important}
  .hhm-hero>svg{position:relative!important;inset:auto!important;display:block;width:100%!important;height:var(--ah)!important;max-width:none}
  .hhm-hero>div.absolute{display:block!important;opacity:1!important;inset:auto 0 0 0!important;top:calc(var(--ah) - 90px)!important;height:auto!important;
    background:linear-gradient(to bottom,transparent 0,var(--hb,#0a1439) 90px)!important}
  .hhm-hero>div:last-child{position:relative;margin-top:-18px;padding-top:0!important;padding-bottom:44px!important}
  .hhm-hero h1{font-size:clamp(2.6rem,12vw,4.5rem)!important}
}
@media (max-width:639px) and (orientation:portrait){
  .hhm-hero p{font-size:16.5px!important;line-height:1.55!important}
  .hhm-hero h1+p{margin-top:16px!important}
}
/* Portada en celular: la escena del video en un recuadro vertical arriba y el texto debajo */
@media (max-width:767px) and (orientation:portrait){
  .hhm-banda{--bh:min(calc(100vw * 1.45),73.1svh);height:var(--bh)!important}
  .hhm-banda{background:#0a1439}
  .hhm-banda video{object-fit:cover!important;object-position:50% 45%!important}
  .hhm-banda>div:first-of-type{background:linear-gradient(to bottom,rgba(10,20,57,0) 86%,rgba(10,20,57,.6) 94%,#0a1439 100%)!important}
  /* estrellas de la portada: fuera de la estación y del texto; la central no va en celular */
  #inicio>span[aria-hidden]:nth-of-type(1){left:5%!important;top:22px!important;width:34px!important;height:34px!important}
  #inicio>span[aria-hidden]:nth-of-type(2){left:40%!important;top:6px!important;width:26px!important;height:26px!important}
  #inicio>span[aria-hidden]:nth-of-type(3){display:none!important}
  #inicio>span[aria-hidden]:nth-of-type(4){display:none!important}
  #inicio>span[aria-hidden]:nth-of-type(5){left:88%!important;top:270px!important;width:30px!important;height:30px!important}
  #inicio>span[aria-hidden]:nth-of-type(6){left:30%!important;top:90px!important;width:22px!important;height:22px!important}
  .hhm-contenido{justify-content:flex-start!important;min-height:0!important;padding-top:calc(min(calc(100vw * 1.45),73.1svh) * .5824 + 0.6px)!important;padding-bottom:44px!important}
}
}


/* Tarjetas para ir a cada materia (portada y "Explora las otras materias"): aumento fuerte al pasar el mouse */
@media (hover:hover){
  a.group[href^="materia-"]{transition:scale .4s cubic-bezier(.2,.9,.3,1.6),box-shadow .4s,filter .3s!important}
  a.group[href^="materia-"]:hover{scale:1.1!important;z-index:3;box-shadow:0 26px 44px -14px rgba(10,20,57,.6);filter:brightness(1.08)}
  a.group[href^="materia-"]:hover>svg{transition:translate .35s cubic-bezier(.2,.9,.3,1.6),scale .35s;translate:12px 0;scale:1.35}
  a.group[href^="materia-"]:hover>span[aria-hidden="true"]{rotate:60deg;scale:1.25;transition:rotate .6s,scale .6s}
}

/* ---------- Portada: aumentos más fuertes ---------- */
@media (hover:hover){
  #fundadores :has(> h3):hover{scale:1.07}
  body:has(#fundadores) section h2:hover{scale:1.08}
  .hh-score:hover{scale:1.3}
  .hh-ofr-body:hover{scale:1.12}
  .hh-ofr-fig~ul>li:hover{scale:1.1!important;z-index:10}
  li.group.min-h-\[22rem\]:hover{transform:scale(1.1)}
  #preguntas details:hover{scale:1.05}
  .hh-faq-body:hover{scale:1.15}
  #inicio a[href="test.html"]:hover,#inicio a[href="registro.html"]:hover{transform:scale(1.15)}
  section[class*="bg-[#7c1fd0]"] a[href="test.html"]:hover{scale:1.15}
}
.hh-ofr-fig~ul>li{transition:scale .4s cubic-bezier(.2,.9,.3,1.6),box-shadow .3s!important}
/* Botón "Haz el test gratuito" de la portada: late para llamar la atención */
#inicio a[href="test.html"]{animation:hh-late 2.6s 1.2s ease-in-out infinite;box-shadow:0 0 0 0 rgba(28,191,198,.6)}
@keyframes hh-late{0%,55%,100%{scale:1;box-shadow:0 0 0 0 rgba(28,191,198,.55)}20%{scale:1.12;box-shadow:0 0 0 14px rgba(28,191,198,0)}35%{scale:.97}}
/* Astronauta de la metodología: flota con más movimiento */
@media (prefers-reduced-motion:reduce){#inicio a[href="test.html"]{animation:none}}

/* Metodología en celular: la escena animada (planetas, astronauta flotando, cable) en lugar de la imagen fija */
@media (max-width:767px){
  #metodo>div:first-child{display:flex;flex-direction:column}
  #metodo>div:first-child>div.md\:hidden{display:none}
  #metodo>div:first-child>div[aria-hidden].hidden{display:block!important;order:2;aspect-ratio:auto!important;
    --mh:min(118vw,470px);height:var(--mh);width:calc(var(--mh) * 2.2605);flex:none;
    margin-left:clamp(calc(100vw - var(--mh) * 2.2605),calc(50vw - var(--mh) * 2.2605 * .72),0px)}
  #metodo .hh-met-centro{order:1;padding-top:24px!important;padding-bottom:20px!important}
  #metodo>div:first-child>div[aria-hidden]:not(.hidden):not(.md\:hidden){background:linear-gradient(to bottom,rgba(26,10,60,.6),transparent 30%)!important}
}

/* "¿Qué te ofrecemos?" en celular: título más arriba y la chica sentada en el borde señalando hacia abajo */
@media (max-width:767px){
  section:has(>.hh-ofr-fig){padding-top:48px!important}
  .hh-ofr-fig{margin-top:.25rem}
  .hh-ofr-body{width:min(70%,320px);margin-bottom:-4%}
}

/* "¿Aún tienes preguntas?" en celular y tableta: el alien al lado del título, a la altura de las preguntas */
@media (max-width:1023px){
  #preguntas{padding-bottom:6rem!important}
  #preguntas>.grid>div:first-child>p{padding-right:40%;min-height:150px}
  .hh-faq-fig{position:absolute!important;top:calc(6rem + min(15vw,4.5rem) * 2.94 + 4px);right:16px;width:38%;max-width:220px;margin:0!important;z-index:0}
  .hh-faq-body{width:100%!important;animation:hh-alien 5s ease-in-out infinite}
}

/* Cuentas (crear cuenta, ingresar, olvidé contraseña/correo…): en celular y tableta la ilustración animada
   del PC va arriba, como un cartel grande, y el formulario debajo */
@media (max-width:1023px){
  main>div.grid>aside.hidden{display:flex!important;flex-direction:column;justify-content:flex-end;height:min(88vw,50svh);min-height:300px;padding:22px 20px!important}
  main>div.grid>aside.hidden>p{font-size:clamp(2rem,9vw,3rem)!important;line-height:1!important}
  main>div.grid>aside.hidden .hh-olv-d{width:auto!important;height:96%!important;max-width:none}
  main>div.grid:has(>aside.hidden)>div:not(aside){padding-top:32px!important}
  .hh-olv-m{display:none!important}
}

/* Botón "Atrás" en celular: redondo, debajo de la barra, a la izquierda */
.hhn[data-tier="mida"] .is-back:not([hidden]),.hhn[data-tier="min"] .is-back:not([hidden]),.hhn[data-tier="tiny"] .is-back:not([hidden]){
  display:flex!important;position:fixed;top:74px;left:10px;z-index:60;width:44px;height:44px;padding:0!important;justify-content:center;align-items:center;
  border:1.5px solid var(--hhn-ink,#0a1439)!important;border-radius:50%;background:#fff;font-size:0!important;gap:0!important;box-shadow:0 6px 16px -6px rgba(10,20,57,.45);margin:0!important}
.hhn[data-tier="mida"] .is-back svg,.hhn[data-tier="min"] .is-back svg,.hhn[data-tier="tiny"] .is-back svg{width:20px;height:20px}

/* Celular/tableta: el alien queda a la derecha, así que se refleja para que mire hacia "¿Aún tienes preguntas?" */
@media (max-width:1023px){.hh-faq-body picture{display:contents}}
/* Peso ×3 / ×1: crece al pasar el mouse (o al tocarlo en el celular) */
.hhm-peso{transition:scale .4s cubic-bezier(.2,.9,.3,1.7),box-shadow .4s;cursor:default}
.hhm-peso:hover,.hhm-peso:active{scale:1.22;box-shadow:0 24px 40px -14px rgba(10,20,57,.55);z-index:3;position:relative}

/* Materias: "Puntaje global" y tarjetas de temas/competencias con aumento fuerte al pasar el cursor */
.lg\:grid-cols-\[18rem_1fr\],.lg\:grid-cols-\[18rem_1fr\]>div[style*="background"]{transition:scale .4s cubic-bezier(.2,.9,.3,1.7),box-shadow .4s}
@media (hover:hover){
  .lg\:grid-cols-\[18rem_1fr\]:hover{scale:1.1!important;box-shadow:0 30px 50px -18px rgba(10,20,57,.55);position:relative;z-index:3}
  .lg\:grid-cols-\[18rem_1fr\]>div[style*="background"]:hover{scale:1.14}
  .hhm-card:hover,.hhm-up:hover{scale:1.12!important;z-index:4!important;position:relative;box-shadow:0 30px 50px -16px rgba(10,20,57,.55)!important}
}
.hhm-card,.hhm-up{transition:scale .4s cubic-bezier(.2,.9,.3,1.7),box-shadow .4s!important}

/* Fundadores en celular: los puntajes en la esquina superior izquierda, sin tapar la cara, iguales en los dos */
@media (max-width:767px){
  #fundadores .hh-score{left:38px!important;top:38px!important;right:auto!important}
  #fundadores .hh-score-in{font-size:2.1rem!important;padding:6px 14px!important}
}

/* "¿Desde dónde partes?": tarjetas de cada materia con aumento fuerte al pasar el mouse */
a.group[href^="test-"]{transition:scale .45s cubic-bezier(.2,.9,.3,1.7),translate .45s cubic-bezier(.2,.9,.3,1.7),box-shadow .4s!important;position:relative}
a.group[href^="test-"]>div:first-child{transition:filter .3s}
a.group[href^="test-"] svg{transition:rotate .5s cubic-bezier(.2,.9,.3,1.8),scale .5s cubic-bezier(.2,.9,.3,1.8),translate .35s}
@media (hover:hover){
  a.group[href^="test-"]:hover{scale:1.1;translate:0 -10px;z-index:5;box-shadow:0 34px 60px -18px rgba(10,20,57,.55),0 0 0 3px rgba(255,255,255,.9)}
  a.group[href^="test-"]:hover>div:first-child{filter:brightness(1.12) saturate(1.15)}
  a.group[href^="test-"]:hover>div:first-child svg{rotate:-12deg;scale:1.35}
  a.group[href^="test-"]:hover>div:last-child svg{translate:8px 0;scale:1.3}
}
@media (prefers-reduced-motion:reduce){a.group[href^="test-"]:hover{scale:1;translate:0}}

/* Metodología: el planeta con anillo gira y se balancea (recortado del fondo; debajo, un parche del mismo color del cielo) */
.hh-sat,.hh-sat-tapa{position:absolute;pointer-events:none}
.hh-sat-tapa{border-radius:50%;background:radial-gradient(closest-side,rgb(24,18,84) 78%,rgba(24,18,84,0) 100%);transform:scale(1.32,1.16)}
.hh-sat{transform-origin:50% 55%;animation:hh-sat 6.5s ease-in-out infinite;will-change:transform}
@keyframes hh-sat{0%,100%{transform:rotate(-14deg) translateY(0) scale(1)}50%{transform:rotate(14deg) translateY(-6%) scale(1.06)}}
/* Planetas: giran más rápido */
.cd-planeta-gira[style*="animation-duration:1.2s"]{animation-duration:.75s!important}
.cd-planeta-gira[style*="animation-duration:1.4s"]{animation-duration:.85s!important}
.cd-planeta-gira[style*="animation-duration:1.6s"]{animation-duration:.95s!important}
/* Astronauta: flota con más movimiento sin salirse del cuadro */
@keyframes cd-flota{0%,100%{transform:translate(-2.5%,-2%) rotate(-3deg)}25%{transform:translate(1.5%,1.5%) rotate(1deg)}50%{transform:translate(2.5%,5%) rotate(3deg)}75%{transform:translate(-1%,2%) rotate(-1deg)}}
.cd-flota{animation-duration:5.5s!important}
@media (prefers-reduced-motion:reduce){.hh-sat{animation:none}}

/* Barra de navegación: leve expansión al pasar el mouse */
@media (hover:hover){
  .hhn-item,.hhn-pill,.hhn-burger,.hhn-brand,.hhn-cta{transition:transform .25s cubic-bezier(.2,.9,.3,1.6),background .15s,color .15s!important}
  .hhn-item:hover,.hhn-pill:hover,.hhn-burger:hover,.hhn-cta:hover{transform:scale(1.08)!important;position:relative;z-index:3}
  .hhn-brand:hover{transform:scale(1.04)}
}
/* Más expansión en las tarjetas de materias y en las de "¿Desde dónde partes?" */
@media (hover:hover){
  a.group[href^="materia-"]:hover{scale:1.16!important}
  a.group[href^="test-"]:hover{scale:1.16;translate:0 -14px}
}


/* Portada en PC: fondo nuevo (nebulosa) en todo el hero; el video lleva el mismo fondo y portada.js lo alinea */
@media (min-width:1024px){
  #inicio{background:url(../videos/hero-fondo.webp) center/cover no-repeat,#0a1439!important}
  #inicio>.hhm-banda>div{display:none!important}
}

/* Metodología: el astronauta crece al pasar el mouse, igual que el título "Nuestra metodología" */
@media (hover:hover) and (min-width:768px){
  #metodo>div:first-child>div[aria-hidden]:not(.md\:hidden):not(.hidden),#metodo .hh-met-centro{pointer-events:none}
  #metodo .hh-met-centro h2{pointer-events:auto}
  #metodo [data-astro-body]{pointer-events:auto}
  #metodo [data-astro-body]>img{transition:scale .3s cubic-bezier(.2,.8,.2,1);transform-origin:72% 82%}
  #metodo [data-astro-body]:hover>img{scale:1.08}
}
/* Inglés en celular: astronautas más pequeños y hacia la izquierda (solo vertical; PC igual) */
@media (max-width:1023px) and (orientation:portrait){
  .hhm-hero image[href$="astronautas.webp"]{transform-box:fill-box;transform-origin:50% 50%;transform:translate(-150px,20px) scale(.72)}
}
/* "¿Desde dónde partes?" en celular: personajes un poco más centrados y tarjetas sin crecer de más */
@media (max-width:639px){
  .hham-lienzo{left:clamp(calc(100cqw - var(--w)),calc(50cqw - var(--w) * .49),0px)!important}
}
@media (max-width:767px){
  a.group[href^="test-"]:hover{scale:1.03!important;translate:0 -4px!important}
  a.group[href^="test-"]:hover>div:first-child svg{scale:1.15!important}
}
/* Ingresar y Crear cuenta en celular: elementos del recuadro blanco apenas más separados */
@media (max-width:639px){
  .w-full.max-w-md:has(#password)>h1+p{margin-top:20px!important}
  .w-full.max-w-md:has(#password)>.mt-8{margin-top:38px!important}
  .w-full.max-w-md:has(#password) form>:not([hidden]):not([type=hidden])~:not([hidden]){margin-top:26px!important}
  .w-full.max-w-md:has(#password) form label{margin-bottom:9px!important}
}
/* Portada en celular: espacios del texto y botones proporcionales a la altura, para que "Crear mi cuenta" no quede pegado al borde */
@media (max-width:767px) and (orientation:portrait){
  #inicio h1+p{margin-top:calc(clamp(18px,3.2svh,32px) + 1.1px)!important}
  #inicio h1+p+div{margin-top:clamp(18px,3.2svh,32px)!important;gap:clamp(8px,1.2svh,12px)!important}
  #inicio h1+p+div>a{padding-top:9px!important;padding-bottom:9px!important}
}
/* Matemáticas en celular: texto 1 mm más arriba */
@media (max-width:1023px) and (orientation:portrait){
  .hhm-mat>div:last-child{margin-top:-33px!important}
}
/* Lectura Crítica en celular: sol y luna 2 mm más arriba (solo celular) */
.hh-solluna-movil{display:none}
@media (max-width:1023px) and (orientation:portrait){
  .hh-solluna-movil{display:inline}
  .hh-glow-sol,.hh-glow-luna{translate:0 -27px}
}
/* Ciencias Naturales en celular: texto 4,5 mm más arriba (la escena queda como estaba) */
@media (max-width:1023px) and (orientation:portrait){
  .hhm-cien>div:last-child{margin-top:-63px!important}
  .hhm-cien h1{margin-top:16px!important}
  #inicio.hhm-cien h1+p{margin-top:18px!important}
  #inicio.hhm-cien h1+p+div{margin-top:16px!important;gap:8px!important}
}
/* Ciencias Naturales en celular: burbujas más visibles y más burbujas; escena 2 mm más larga hacia abajo */
.hh-bub-movil{display:none}
@media (max-width:1023px) and (orientation:portrait){
  .hh-bub-movil{display:inline}
  .hhm-cien .hh-bub2 circle{fill:rgba(255,255,255,.28)!important;stroke:rgba(255,255,255,.98)!important;stroke-width:4px!important}
  .hhm-cien .hh-bub2{filter:drop-shadow(0 0 6px rgba(190,240,255,.9))}
  .hhm-cien>div:last-child{margin-top:-71px!important}
}
/* Puntajes de los fundadores: "/500" más pequeño junto al número */
.hh-score-in{white-space:nowrap}
.hh-de{font-size:.62em;font-weight:800;opacity:.75;margin-left:.08em;letter-spacing:0}
/* Fundadores: las fotos un poco más a la derecha y el puntaje más pequeño y más a la izquierda para no tapar la cara */
#fundadores img[src*="juan-camilo"],#fundadores img[src*="david-mauricio"]{transform:translateX(7%)}
@media (max-width:1023px){
  #fundadores .hh-score{left:16px!important;top:28px!important}
  #fundadores .hh-score-in{font-size:1.75rem!important;padding:5px 11px!important}
}
@media (min-width:1024px){
  #fundadores .hh-score{left:4%!important}
  #fundadores .hh-score-in{font-size:2.9rem!important}
}
/* David: puntaje un poco más abajo y más cerca de él */
@media (max-width:1023px){#fundadores div:has(> div img[src*="david-mauricio"])>.hh-score,#fundadores div:has(> img[src*="david-mauricio"])>.hh-score{left:46px!important;top:58px!important}}
@media (min-width:1024px){#fundadores div:has(> div img[src*="david-mauricio"])>.hh-score,#fundadores div:has(> img[src*="david-mauricio"])>.hh-score{left:11%!important;top:22%!important}}
/* Portal en celular: el dibujo del chico y el alien se desvanece abajo en vez de cortarse en seco */
@media (max-width:1023px){
  .hhp-amigos svg{-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 98%);mask-image:linear-gradient(to bottom,#000 62%,transparent 98%)}
}
/* ---------- Celular horizontal (acostado): todo más pequeño y proporcionado ----------
   Solo pantallas acostadas y bajas (teléfonos). No afecta PC, portátil, monitor, tableta ni el celular vertical. */
@media (orientation:landscape) and (max-height:500px) and (max-width:1000px){
  html{zoom:.7}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:1000px){
  #inicio>.hhm-banda{height:100%!important}
  #inicio>.hhm-banda video{object-position:50% 40%!important}
  #inicio>.hhm-banda>div{display:none!important}
  #inicio{background:linear-gradient(90deg,rgba(10,20,57,.85),rgba(10,20,57,.35) 55%,transparent),#0a1439!important}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:1000px){
  #inicio .hhm-contenido{padding-top:34px!important;padding-bottom:34px!important;min-height:0!important}
  #inicio h1{font-size:3.4rem!important}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:1000px){
  .hhp-amigos{width:min(40%,260px)!important}
}

/* Tableta horizontal (1024–1279): la escena de la portada llega hasta la barra de navegación (sin franja vacía arriba) */
@media (min-width:1024px) and (max-width:1279px){
  #inicio{min-height:0!important;height:56.25vw!important}
  #inicio>.hhm-banda{top:0!important;bottom:0!important;width:100%!important;height:auto!important}
  #inicio .hhm-contenido{min-height:0!important;height:100%!important;padding-top:0!important;padding-bottom:0!important;justify-content:center!important}
}
/* "¿Desde dónde partes?": en tableta y monitor se ve más cielo arriba (el sol completo), como en portátil */
@media (min-width:1024px) and (max-width:1279px){.hham-sec{min-height:53vw!important}}
@media (min-width:1600px){.hham-sec{min-height:min(46vw,900px)!important}}
/* Monitor: el alien de "¿Aún tienes preguntas?" no queda debajo del signo de interrogación */
@media (min-width:1600px){#preguntas .hh-faq-body{translate:55px 0;scale:.88;transform-origin:50% 100%}}
/* Monitor: "Crea tu cuenta gratis y empieza el test" un poco más grande */
@media (min-width:1600px){
  main h1+p.mx-auto.max-w-md{font-size:18px!important;max-width:34rem!important}
  main section:has(h1+p.mx-auto.max-w-md) h1{font-size:4.6rem!important}
  main section:has(h1+p.mx-auto.max-w-md) h1~div a{font-size:17px!important;padding:16px 30px!important}
  main section:has(h1+p.mx-auto.max-w-md) h1~a{font-size:15px!important}
  main section:has(h1+p.mx-auto.max-w-md) p.mt-6{font-size:1.45rem!important}
}
/* Portada en celular (todas las pantallas verticales de teléfono): el video es más alto y la portada llena la pantalla.
   El texto y la escena de arriba quedan exactamente donde estaban; abajo se ve más nebulosa en vez de un espacio vacío. */
@media (max-width:767px) and (orientation:portrait){
  #inicio{--bh:min(calc(100vw * 1.45),73.1svh);--bf:max(var(--bh),min(calc(100svh - 4rem),calc(100vw * 2.1)))}
  #inicio>.hhm-banda{height:var(--bf)!important}
  #inicio>.hhm-banda video{object-position:50% calc((var(--bh) - 100vw * 1.45) * .45)!important}
  #inicio>.hhm-banda>div:first-of-type{background:linear-gradient(to bottom,rgba(10,20,57,0) 0,rgba(10,20,57,0) calc(var(--bh) * .80),rgba(10,20,57,.55) calc(var(--bh) * .95),rgba(10,20,57,.6) calc(100% - 40px),#0a1439 100%)!important}
  #inicio .hhm-contenido{min-height:var(--bf)!important}
}

/* Tableta vertical: la escena completa arriba (sin recortes) y el texto abajo; la portada llena la pantalla */
@media (min-width:768px) and (max-width:1023px) and (orientation:portrait){
  #inicio{background:#0a1439!important}
  #inicio>.hhm-banda{top:0!important;bottom:auto!important;left:auto!important;right:0!important;width:118%!important;height:auto!important;aspect-ratio:16/9!important}
  #inicio>.hhm-banda video{object-fit:cover!important;object-position:50% 50%!important}
  #inicio>.hhm-banda>div:first-of-type{display:block!important;background:linear-gradient(to bottom,rgba(10,20,57,0) 70%,#0a1439 100%),linear-gradient(to right,#0a1439 0,rgba(10,20,57,0) 14%)!important}
  #inicio .hhm-contenido{min-height:calc(100svh - 4rem)!important;padding-top:0!important;padding-bottom:64px!important;justify-content:flex-end!important}
}
/* Celular: el alien de "¿Aún tienes preguntas?" más grande y apoyado sobre la línea de las preguntas (no flota cortado) */
@media (max-width:767px) and (orientation:portrait){
  #preguntas>.grid{display:flex!important;flex-direction:column;gap:0!important}
  #preguntas>.grid>div:first-child{order:0}
  #preguntas>.grid>div:first-child>p{padding-right:52%!important;min-height:0!important}
  #preguntas .hh-faq-fig{order:1;position:relative!important;top:auto!important;right:auto!important;align-self:flex-end;width:52%!important;max-width:240px!important;margin:-120px -4px 0 0!important;display:block!important}
  #preguntas .hh-faq-body{animation:hh-alien 5s ease-in-out infinite}
  #preguntas>.grid>div:nth-child(2){order:2;position:relative;z-index:2;background:#fff}
}
/* Celular: el agujero negro de "Las 5 materias" más grande, completo y unido al título y a las cinco materias */
@media (max-width:767px) and (orientation:portrait){
  #materias .hh-bh{width:122%!important;max-width:none!important;margin:-30px -11% -12% -11%!important;display:block;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 72%,transparent 100%)}
  #materias .hh-bh-txt{position:relative;z-index:2}
}
/* Sociales en celular: el texto sube para que se vean los dos recuadros (50 preguntas / 3 competencias) */
@media (max-width:767px) and (orientation:portrait){
  .hhm-soc>div:last-child{margin-top:-63px!important}
  #inicio.hhm-soc h1{margin-top:16px!important}
  #inicio.hhm-soc h1+p{margin-top:18px!important}
  #inicio.hhm-soc h1+p+div{margin-top:16px!important;gap:8px!important}
}
/* Celulares bajos (iPhone SE): Ciencias Naturales sube un poco más para que se lea hasta "fórmulas" */
@media (max-width:767px) and (orientation:portrait) and (max-height:700px){
  .hhm-cien>div:last-child{margin-top:-103px!important}
  .hhm-soc>div:last-child{margin-top:-80px!important}
}
/* Simulacros en celular: el aumento sale de frente (desde el centro), no hacia un lado */
@media (max-width:767px) and (orientation:portrait){
  #simulacros li,#simulacros article{transform-origin:50% 50%!important}
}
/* Fundadores en celular: entrada con un aumento más marcado */
@media (max-width:767px) and (orientation:portrait){
  #fundadores .hhp-lado.hhp-on{animation-name:hhp-lado-fuerte!important;animation-duration:1.1s!important}
  @keyframes hhp-lado-fuerte{0%{opacity:0;transform:translateX(var(--x,-120px)) scale(.35) rotate(var(--r,-6deg))}60%{opacity:1;transform:translateX(0) scale(1.16) rotate(0)}82%{transform:scale(.97)}100%{opacity:1;transform:none}}
  #fundadores .hhp-in.hhp-on{animation-name:hhp-zoom-fuerte!important;animation-duration:1.1s!important}
  @keyframes hhp-zoom-fuerte{0%{opacity:0;transform:translateY(80px) scale(.4)}58%{opacity:1;transform:translateY(-8px) scale(1.14)}80%{transform:scale(.97)}100%{opacity:1;transform:none}}
}
/* "¿Desde dónde partes?" en celular: el sol sale más rápido, para que se vea al entrar */
@media (max-width:1023px){
  .hham-escena .hham-sol{animation:hham-sube 2.6s .15s cubic-bezier(.25,.6,.3,1) forwards,hham-late 4s ease-in-out 2.75s infinite!important}
  .hham-escena .hham-luz{animation:hham-alba 2.6s .15s ease-out forwards!important}
  .hham-escena .hham-frente{animation:hham-ilumina 2.6s .15s ease-out forwards!important}
}
/* Celular horizontal: la portada llena toda la pantalla (sin espacio blanco abajo), con el video de fondo y el texto centrado */
@media (orientation:landscape) and (max-height:500px) and (max-width:1000px){
  #inicio{min-height:calc(100svh / .7 - 4rem)!important;height:calc(100svh / .7 - 4rem)!important}
  #inicio>.hhm-banda{top:0!important;bottom:0!important;left:0!important;right:0!important;width:100%!important;height:100%!important;aspect-ratio:auto!important}
  #inicio>.hhm-banda video{object-fit:cover!important;object-position:60% 45%!important}
  #inicio .hhm-contenido{min-height:100%!important;height:100%!important;padding-top:0!important;padding-bottom:0!important;justify-content:center!important;transform:none!important}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:1000px){
  #inicio>.hhm-banda>div:first-of-type{display:block!important;background:linear-gradient(90deg,rgba(10,20,57,.7) 0,rgba(10,20,57,.35) 38%,rgba(10,20,57,0) 58%)!important}
}
/* Celular horizontal: la escena completa (Tierra, Luna y estación) a la derecha, a todo lo alto; la nebulosa sigue a la izquierda */
@media (orientation:landscape) and (max-height:500px) and (max-width:1000px){
  #inicio{background:url(../videos/hero-fondo.webp) 0 50%/auto 100% no-repeat,#0a1439!important}
  #inicio>.hhm-banda{left:auto!important;right:0!important;width:auto!important;height:100%!important;aspect-ratio:16/9!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);mask-image:linear-gradient(90deg,transparent 0,#000 16%)}
  #inicio>.hhm-banda video{object-fit:cover!important;object-position:50% 50%!important}
  #inicio>.hhm-banda>div:first-of-type{display:none!important}
  #inicio::before{content:"";position:absolute;inset:0;z-index:-5;background:linear-gradient(90deg,rgba(10,20,57,.55) 0,rgba(10,20,57,.2) 40%,rgba(10,20,57,0) 55%);pointer-events:none}
}
/* Celular horizontal: texto y botones de la portada 1 mm más abajo */
@media (orientation:landscape) and (max-height:500px) and (max-width:1000px){
  #inicio .hhm-contenido>*{translate:0 5.5px}
}
/* iPhone 15 Pro Max y teléfonos grandes (≥420 de ancho y ≥900 de alto), vertical: el texto y los botones de la portada bajan hasta ~3 mm del final */
@media (orientation:portrait) and (min-width:420px) and (max-width:767px) and (min-height:900px){
  #inicio .hhm-contenido>*{translate:0 105px}
}
/* Pixel 8 (412×892), vertical: texto y botones de la portada 3 mm más abajo */
@media (orientation:portrait) and (min-width:405px) and (max-width:419px) and (min-height:880px) and (max-height:905px){
  #inicio .hhm-contenido>*{translate:0 11px}
}
/* Pixel 8: la escena (Tierra, Luna, estación, naves y astronautas) baja hacia la mitad, con más cielo arriba; el texto y los botones cerca del borde inferior */
@media (orientation:portrait) and (min-width:405px) and (max-width:419px) and (min-height:880px) and (max-height:905px){
  #inicio>.hhm-banda{background:url(../videos/hero-movil-cielo.webp?v=2) 0 0/100% auto no-repeat,#0a1439!important;overflow:hidden}
  #inicio>.hhm-banda video{transform:translateY(31px)!important;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40px);mask-image:linear-gradient(to bottom,transparent 0,#000 40px)}
  #inicio .hhm-contenido>*{translate:0 83.5px}
  #inicio>span[aria-hidden]{translate:0 31px}
}
/* Teléfono horizontal: el texto de "¿Aún tienes preguntas?" en renglones normales (no palabra por palabra) */
@media (orientation:landscape) and (max-height:500px) and (max-width:1000px){
  #preguntas>.grid>div:first-child>p{padding-right:0!important;min-height:0!important;max-width:24rem!important}
}
/* iPhone 15 (393×852), vertical: en Sociales y Ciencias la escena baja y el color de abajo llega hasta el final (sin franja blanca) */
@media (orientation:portrait) and (min-width:385px) and (max-width:400px) and (min-height:800px) and (max-height:880px){
  #inicio.hhm-soc{--ah:calc(min(calc(100vw * var(--ar,1)),60svh) + 22px);min-height:calc(100svh - 64px)!important}
  #inicio.hhm-cien{--ah:calc(min(calc(100vw * var(--ar,1)),60svh) + 12px);min-height:calc(100svh - 64px)!important}
}
/* Tableta vertical: la escena (Tierra y estación) baja y se ve completa; arriba queda cielo y el fondo del cielo llega más abajo */
@media (min-width:768px) and (max-width:1023px) and (orientation:portrait){
  #inicio{background:linear-gradient(to bottom,rgba(10,20,57,0) 0,rgba(10,20,57,0) 50%,rgba(10,20,57,.75) 72%,#0a1439 88%),url(../videos/hero-fondo.webp) 22% 0/auto 82% no-repeat,#0a1439!important}
  #inicio>.hhm-banda{top:120px!important;width:100%!important;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 88%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 88%,transparent 100%)}
  #inicio>.hhm-banda>div:first-of-type{display:none!important}
  #inicio .hhm-contenido{padding-bottom:28px!important}
}
/* Tableta vertical: la Tierra y la Luna se ven completas (sin sombreado arriba) y todo sube ~4 mm */
@media (min-width:768px) and (max-width:1023px) and (orientation:portrait){
  #inicio>.hhm-banda{top:105px!important;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 4%,#000 88%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 4%,#000 88%,transparent 100%)}
  #inicio .hhm-contenido{padding-bottom:43px!important}
}
/* Tableta vertical: video propio con la estación completa; solo un leve desvanecido arriba y abajo */
@media (min-width:768px) and (max-width:1023px) and (orientation:portrait){
  #inicio>.hhm-banda{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 3%,#000 91%,transparent 100%)!important;mask-image:linear-gradient(to bottom,transparent 0,#000 3%,#000 91%,transparent 100%)!important}
}
/* Tableta vertical (video propio 1920×1240): la Tierra y la Luna suben sin cortarse arriba; la estación más grande y más abajo */
@media (min-width:768px) and (max-width:1023px) and (orientation:portrait){
  #inicio>.hhm-banda{top:70px!important;aspect-ratio:1920/1240!important;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 3%,#000 94%,transparent 100%)!important;mask-image:linear-gradient(to bottom,transparent 0,#000 3%,#000 94%,transparent 100%)!important}
}
/* Tableta vertical: distribución como la imagen de referencia (Luna arriba a la izquierda de la Tierra, estación grande en diagonal) */
@media (min-width:768px) and (max-width:1023px) and (orientation:portrait){
  #inicio>.hhm-banda{top:0!important;aspect-ratio:4/3!important;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 90%,transparent 100%)!important;mask-image:linear-gradient(to bottom,#000 0,#000 90%,transparent 100%)!important}
}
/* Tableta vertical: los paneles de abajo a la derecha de la estación se ven completos (el desvanecido empieza más abajo) */
@media (min-width:768px) and (max-width:1023px) and (orientation:portrait){
  #inicio>.hhm-banda{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 95%,transparent 100%)!important;mask-image:linear-gradient(to bottom,#000 0,#000 95%,transparent 100%)!important}
}
/* Tableta vertical: escena más grande y más abajo (video 1920×1860) */
@media (min-width:768px) and (max-width:1023px) and (orientation:portrait){
  #inicio>.hhm-banda{aspect-ratio:1920/1860!important}
}
/* Tableta vertical: toda la escena sube 3,5 mm (sin cambiar tamaños) */
@media (min-width:768px) and (max-width:1023px) and (orientation:portrait){
  #inicio>.hhm-banda{top:-13px!important}
}
/* Tableta vertical: escena un poco más pequeña y 3 mm más arriba (dentro del video); el fondo del cielo llega casi a los botones */
@media (min-width:768px) and (max-width:1023px) and (orientation:portrait){
  #inicio>.hhm-banda{aspect-ratio:1920/2170!important;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 88%,transparent 100%)!important;mask-image:linear-gradient(to bottom,#000 0,#000 88%,transparent 100%)!important}
}
/* ---------- Celular horizontal: ajustes rápidos ---------- */
@media (orientation:landscape) and (max-height:500px) and (max-width:1000px){
  /* Simulacros: el aumento sale de frente (desde el centro), como en "¿Qué te ofrecemos?" */
  #simulacros li,#simulacros article{transform-origin:50% 50%!important}
  /* "¿Desde dónde partes?": escena más alta (se ven el sol, las montañas, los árboles y las personas) */
  .hham-escena{height:600px!important}
  .hham-lienzo{--w:100cqw!important;--h:55.859cqw!important;top:calc(100cqh - var(--h))!important;left:0!important}
  .hham-escena::after{height:140px!important}
  /* Portal: el chico y el alien saludando, bastante más grandes (con el desvanecido abajo) */
  .hhp-amigos{width:min(72%,500px)!important}
  /* Preguntas: alien más grande a la derecha y las líneas de las preguntas más cortas */
  #preguntas>.grid>div:nth-child(2){margin-right:330px!important}
  #preguntas .hh-faq-fig{width:290px!important;max-width:290px!important;right:64px!important;translate:0 -80px}
  /* Ingresar, Crear cuenta, Olvidé correo/contraseña: el cartel de arriba más alto */
  main>div.grid>aside.hidden{height:calc(100svh / .7 - 64px)!important;min-height:440px!important}
  /* Ingresar: la Tierra a un tamaño en que se ve su curvatura */
  main>div.grid>aside.hidden>div[style*="fondos/ingresar.webp"]{background:linear-gradient(to right,#0a1439 calc(100% - 526px),rgba(10,20,57,0) calc(100% - 420px)),url(../fondos/ingresar.webp) right bottom/auto 160% no-repeat!important}
  main>div.grid>aside.hidden div[style*="container-type:size"]>svg{left:auto!important;right:0!important;transform:none!important;width:calc(160cqh * 896 / 1200)!important}
}
/* Celular horizontal: alien de "¿Aún tienes preguntas?" sin el fragmento azul de la izquierda y sin corte en seco abajo */
@media (orientation:landscape) and (max-height:500px) and (max-width:1000px){
  #preguntas .hh-faq-body{clip-path:inset(0 0 0 8%);-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 98%);mask-image:linear-gradient(to bottom,#000 70%,transparent 98%)}
}
/* Celular horizontal, Ingresar y Crear cuenta: estrellas en todo el cartel y una flecha que pulsa hacia abajo (el formulario está debajo) */
@media (orientation:landscape) and (max-height:500px) and (max-width:1000px){
  main>div.grid>aside.hidden:has(>div[style*="fondos/ingresar.webp"])::after{content:"";position:absolute;left:0;top:0;width:2px;height:2px;border-radius:50%;z-index:0;pointer-events:none;box-shadow:1275px 261px 0 1.5px rgba(255,255,255,0.9),59px 476px 0 0px rgba(255,255,255,0.75),321px 115px 0 1px rgba(255,255,255,0.9),504px 389px 0 1.5px rgba(255,255,255,0.6),510px 13px 0 1px rgba(255,255,255,0.75),572px 186px 0 0.5px rgba(255,255,255,1),147px 142px 0 0.5px rgba(255,255,255,1),270px 1px 0 0.5px rgba(255,255,255,0.6),441px 169px 0 1px rgba(255,255,255,0.75),642px 203px 0 0.5px rgba(255,255,255,0.75),1414px 201px 0 1px rgba(255,255,255,1),44px 369px 0 0.5px rgba(255,255,255,1),298px 270px 0 1px rgba(255,255,255,0.6),617px 3px 0 0px rgba(255,255,255,0.9),634px 363px 0 1px rgba(255,255,255,0.9),1426px 323px 0 1px rgba(255,255,255,0.75),967px 180px 0 1px rgba(255,255,255,0.6),46px 366px 0 0px rgba(255,255,255,1),1124px 428px 0 1px rgba(255,255,255,0.9),1184px 9px 0 0px rgba(255,255,255,1),1449px 185px 0 0px rgba(255,255,255,0.75),503px 473px 0 1.5px rgba(255,255,255,0.9),726px 537px 0 1px rgba(255,255,255,0.9),221px 376px 0 0px rgba(255,255,255,0.9),886px 93px 0 1px rgba(255,255,255,0.75),1050px 371px 0 1px rgba(255,255,255,0.75),564px 558px 0 1px rgba(255,255,255,0.6),1404px 324px 0 0.5px rgba(255,255,255,0.9),160px 152px 0 1px rgba(255,255,255,0.9),330px 49px 0 1.5px rgba(255,255,255,0.6),1092px 415px 0 0.5px rgba(255,255,255,0.6),1216px 352px 0 1px rgba(255,255,255,0.9),1333px 431px 0 0px rgba(255,255,255,0.75),1307px 33px 0 1px rgba(255,255,255,1),424px 133px 0 1px rgba(255,255,255,0.75),218px 172px 0 1px rgba(255,255,255,1),305px 60px 0 1px rgba(255,255,255,1),289px 464px 0 1.5px rgba(255,255,255,0.75),928px 499px 0 1px rgba(255,255,255,0.9),561px 298px 0 1px rgba(255,255,255,1),300px 115px 0 1.5px rgba(255,255,255,1),367px 511px 0 0.5px rgba(255,255,255,0.9),182px 503px 0 1.5px rgba(255,255,255,0.9),1122px 514px 0 0px rgba(255,255,255,0.9),728px 35px 0 1px rgba(255,255,255,0.9),1145px 287px 0 1px rgba(255,255,255,1),1414px 300px 0 0.5px rgba(255,255,255,0.9),1189px 11px 0 1.5px rgba(255,255,255,1),513px 333px 0 1px rgba(255,255,255,0.9),591px 512px 0 1px rgba(255,255,255,0.9),560px 353px 0 1px rgba(255,255,255,1),353px 460px 0 1px rgba(255,255,255,0.9),1061px 145px 0 0.5px rgba(255,255,255,0.75),741px 488px 0 0px rgba(255,255,255,0.9),1473px 426px 0 1.5px rgba(255,255,255,0.75),1189px 528px 0 1px rgba(255,255,255,1),1277px 277px 0 0.5px rgba(255,255,255,0.6),327px 451px 0 0.5px rgba(255,255,255,0.75),1404px 184px 0 1px rgba(255,255,255,0.6),463px 169px 0 0.5px rgba(255,255,255,0.6),226px 324px 0 1px rgba(255,255,255,0.75),396px 36px 0 1px rgba(255,255,255,1),719px 389px 0 1.5px rgba(255,255,255,0.6),418px 243px 0 0px rgba(255,255,255,0.9),717px 415px 0 1px rgba(255,255,255,0.9),235px 560px 0 0px rgba(255,255,255,0.9),1126px 308px 0 1px rgba(255,255,255,0.6),1116px 524px 0 1.5px rgba(255,255,255,0.9),600px 360px 0 1px rgba(255,255,255,0.75),838px 551px 0 1px rgba(255,255,255,0.9),291px 160px 0 1.5px rgba(255,255,255,1),976px 203px 0 1.5px rgba(255,255,255,0.75),186px 359px 0 1px rgba(255,255,255,0.6),221px 333px 0 1px rgba(255,255,255,0.75),1289px 384px 0 1px rgba(255,255,255,1),463px 505px 0 1px rgba(255,255,255,0.9),1450px 388px 0 0.5px rgba(255,255,255,1),1220px 266px 0 1px rgba(255,255,255,0.9),514px 425px 0 1px rgba(255,255,255,0.6),629px 503px 0 0.5px rgba(255,255,255,0.9),976px 24px 0 1.5px rgba(255,255,255,0.6),908px 251px 0 0px rgba(255,255,255,0.9),279px 401px 0 1px rgba(255,255,255,0.6),1090px 280px 0 1px rgba(255,255,255,0.75),75px 251px 0 1px rgba(255,255,255,1),316px 292px 0 1px rgba(255,255,255,0.9),1245px 486px 0 0px rgba(255,255,255,0.6),258px 307px 0 1.5px rgba(255,255,255,0.9),1450px 344px 0 1.5px rgba(255,255,255,0.9),54px 475px 0 1px rgba(255,255,255,0.9),1396px 135px 0 0px rgba(255,255,255,0.6),516px 466px 0 1.5px rgba(255,255,255,0.6),391px 14px 0 1px rgba(255,255,255,1),1218px 493px 0 1px rgba(255,255,255,1),802px 201px 0 1px rgba(255,255,255,0.9),135px 310px 0 1px rgba(255,255,255,0.6),1192px 293px 0 1px rgba(255,255,255,1),292px 169px 0 1.5px rgba(255,255,255,1),1019px 338px 0 1px rgba(255,255,255,0.75),1199px 554px 0 0px rgba(255,255,255,0.6),1500px 235px 0 0px rgba(255,255,255,0.9),128px 26px 0 1px rgba(255,255,255,0.9),140px 414px 0 0px rgba(255,255,255,1),252px 125px 0 1.5px rgba(255,255,255,0.75),1322px 113px 0 1px rgba(255,255,255,0.75),1445px 448px 0 0.5px rgba(255,255,255,0.75),1250px 189px 0 0.5px rgba(255,255,255,1),137px 218px 0 1.5px rgba(255,255,255,0.6),221px 388px 0 1px rgba(255,255,255,0.6),117px 121px 0 1.5px rgba(255,255,255,1);animation:hh-estrellas 3.5s ease-in-out infinite alternate}
  main>div.grid>aside.hidden:is(:has(>div[style*="fondos/ingresar.webp"]),:has(>div[style*="fondos/registro.webp"]))::before{content:"";position:absolute;left:50%;bottom:30px;width:34px;height:34px;margin-left:-17px;border-right:5px solid #5eead4;border-bottom:5px solid #5eead4;z-index:3;pointer-events:none;filter:drop-shadow(0 0 6px rgba(94,234,212,.8));animation:hh-baja 1.6s ease-in-out infinite}
  main>div.grid>aside.hidden>p{z-index:2}
}
@keyframes hh-estrellas{from{opacity:.55}to{opacity:1}}
@keyframes hh-baja{0%{transform:translateY(-6px) rotate(45deg);opacity:.35}50%{transform:translateY(6px) rotate(45deg);opacity:1}100%{transform:translateY(-6px) rotate(45deg);opacity:.35}}
/* Portada en todos los teléfonos verticales: la misma composición del Android promedio (360×800), a escala de cada pantalla.
   El video es el mismo (iPhone SE tiene uno propio, más compacto) y el bloque de texto se escala con --hz (portada.js). */
@media (max-width:767px) and (orientation:portrait){
  #inicio>.hhm-banda{background:#0a1439!important}
  #inicio>.hhm-banda video{transform:none!important;-webkit-mask-image:none!important;mask-image:none!important;object-position:50% 0!important}
  #inicio>span[aria-hidden]{translate:none!important}
  #inicio>span[aria-hidden]:nth-of-type(2){display:none!important}
  #inicio .hhm-contenido{zoom:var(--hz,.95);min-height:calc((100svh - 4rem) / var(--hz,.95))!important;padding-top:0!important;padding-bottom:14.7px!important;justify-content:flex-end!important}
  #inicio .hhm-contenido>*{translate:none!important}
  #inicio .hhm-contenido>h1{font-size:64.8px!important;margin-top:0!important}
  #inicio .hhm-contenido>h1+p{font-size:18px!important;max-width:310px!important;margin-top:7.4px!important}
  #inicio .hhm-contenido>h1+p+div{margin-top:5.3px!important;gap:9.6px!important;max-width:300px!important}
}
/* Tableta vertical: la misma composición del Android promedio, compactada para su pantalla (video propio con la escena más pequeña) */
@media (min-width:768px) and (max-width:1023px) and (orientation:portrait){
  #inicio{background:#0a1439!important}
  #inicio>.hhm-banda{top:0!important;bottom:auto!important;left:0!important;right:0!important;width:100%!important;height:calc(100svh - 4rem)!important;aspect-ratio:auto!important;background:#0a1439!important;-webkit-mask-image:none!important;mask-image:none!important}
  #inicio>.hhm-banda video{object-fit:cover!important;object-position:50% 0!important;transform:none!important;-webkit-mask-image:none!important;mask-image:none!important}
  #inicio>.hhm-banda>div:first-of-type{display:block!important;background:linear-gradient(to bottom,rgba(10,20,57,0) 0,rgba(10,20,57,0) 62%,rgba(10,20,57,.5) 80%,rgba(10,20,57,.6) 100%)!important}
  #inicio>span[aria-hidden]{translate:none!important}
  #inicio .hhm-contenido{zoom:var(--hz,1.2);min-height:calc((100svh - 4rem) / var(--hz,1.2))!important;padding-top:0!important;padding-bottom:14.7px!important;justify-content:flex-end!important}
  #inicio .hhm-contenido>*{translate:none!important}
  #inicio .hhm-contenido>h1{font-size:64.8px!important;margin-top:0!important}
  #inicio .hhm-contenido>h1+p{font-size:18px!important;max-width:310px!important;margin-top:7.4px!important}
  #inicio .hhm-contenido>h1+p+div{margin-top:5.3px!important;gap:9.6px!important;max-width:300px!important}
}
/* iPhone SE (pantalla baja): texto un poco más grande que la escala automática */
@media (max-width:767px) and (orientation:portrait) and (max-height:700px){
  #inicio{--hz:.74}
}
/* Tableta vertical: texto algo más pequeño para dejar sitio a una escena grande */
@media (min-width:768px) and (max-width:1023px) and (orientation:portrait){
  #inicio{--hz:1.05}
  #inicio>span[aria-hidden]:is(:nth-of-type(3),:nth-of-type(5),:nth-of-type(6)){display:none!important}
}
/* TABLETA-TEXTO-ANCHO: tableta vertical, texto a lo ancho (párrafo en 2 líneas, botones lado a lado) y bastante más arriba */
@media (min-width:768px) and (max-width:1023px) and (orientation:portrait){
  #inicio .hhm-contenido{padding-bottom:55px!important}
  #inicio .hhm-contenido>h1{font-size:78px!important}
  #inicio .hhm-contenido>h1+p{max-width:600px!important;font-size:19px!important}
  #inicio .hhm-contenido>h1+p+div{max-width:none!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:14px!important;margin-top:14px!important}
}
/* FIN TABLETA-TEXTO-ANCHO */
/* Celular: "Las 5 materias" — el agujero negro pegado a la línea de arriba (sin franja blanca), y título y texto compactos debajo */
@media (max-width:767px) and (orientation:portrait){
  #materias{padding-top:0!important}
  #materias .hh-bh{width:calc(100% + 40px)!important;margin:0 -20px 0 -20px!important;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 78%,transparent 100%)!important;mask-image:linear-gradient(to bottom,#000 0,#000 78%,transparent 100%)!important}
  #materias .hh-bh-txt{margin-top:10px;padding-bottom:28px!important}
  #materias .hh-bh-txt h2{font-size:clamp(3rem,15vw,4.4rem)!important}
  #materias .hh-bh-txt p{margin-top:12px!important}
}
/* "¿Desde dónde partes?" en celulares y tabletas: el sol sale apenas se abre la página, desde más arriba y más rápido */
@keyframes hham-sube-ya{from{transform:translateY(22%)}to{transform:translateY(0)}}
@media (max-width:1023px){
  .hham-escena .hham-sol{animation:hham-sube-ya 1.3s 0s cubic-bezier(.2,.7,.3,1) both,hham-late 4s ease-in-out 1.3s infinite!important}
  .hham-escena .hham-luz{animation:hham-alba 1.3s 0s ease-out forwards!important}
  .hham-escena .hham-frente{animation:hham-ilumina 1.3s 0s ease-out forwards!important}
}
/* ---------- Celular horizontal: más arreglos ---------- */
@media (orientation:landscape) and (max-height:500px) and (max-width:1000px){
  /* sin la línea entre la barra y la portada de cada página */
  .hhn{border-bottom:0!important;box-shadow:none!important}
  /* "¿Desde dónde partes?": escena menos acercada (se ve toda la imagen) y sin el corte horizontal sobre el título */
  .hham-sec .hham-escena{height:auto!important;aspect-ratio:1.5!important;container-type:inline-size!important;background:linear-gradient(to bottom,#012a6c 0,#0868c4 30%,#0a2a6a 62%,#0a1439 100%)!important}
  .hham-sec .hham-escena .hham-lienzo{--w:120cqw!important;--h:67.03cqw!important;left:-10cqw!important;top:0!important;-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 72%,transparent 100%)}
  .hham-sec .hham-escena::after{height:38%!important;background:linear-gradient(to bottom,rgba(10,20,57,0) 0,rgba(10,20,57,.18) 25%,rgba(10,20,57,.5) 50%,rgba(10,20,57,.82) 75%,#0a1439 100%)!important}
  /* Ingresar y Crear cuenta: flecha hacia abajo casi imperceptible, fina y blanca */
  main>div.grid>aside.hidden:is(:has(>div[style*="fondos/ingresar.webp"]),:has(>div[style*="fondos/registro.webp"]))::before{width:18px!important;height:18px!important;margin-left:-9px!important;bottom:22px!important;border-right:1.5px solid rgba(255,255,255,.38)!important;border-bottom:1.5px solid rgba(255,255,255,.38)!important;filter:drop-shadow(0 0 2px rgba(0,0,0,.35))!important;animation:hh-baja-suave 2.4s ease-in-out infinite!important}
  /* "¿Aún tienes preguntas?": el texto de abajo del título un poco más grande */
  #preguntas>.grid>div:first-child>p{font-size:17px!important}
}
@keyframes hh-baja-suave{0%,100%{transform:translateY(-3px) rotate(45deg);opacity:.25}50%{transform:translateY(3px) rotate(45deg);opacity:.7}}
/* Metodología en todos los teléfonos y tabletas (sin mouse): el astronauta se acerca hacia el frente al aparecer y al tocarlo */
@keyframes hh-astro-frente{0%{scale:1}45%{scale:1.12}75%{scale:.98}100%{scale:1}}
@media (hover:none),(max-width:1023px){
  #metodo [data-astro-body]>img{transform-origin:50% 60%}
  #metodo [data-astro-body].hh-astro-ya>img{animation:hh-astro-frente 1.1s cubic-bezier(.2,.8,.2,1) both}
}
/* Materias: el botón "Haz el test gratuito" de "¿Cuánto sabes de…?" late para llamar la atención (como el de la portada) */
a.rounded-full[href^="test-"]{animation:hh-late 2.6s 1s ease-in-out infinite;box-shadow:0 0 0 0 rgba(28,191,198,.6)}
@media (prefers-reduced-motion:reduce){a.rounded-full[href^="test-"]{animation:none}}
/* "¿Desde dónde partes?" en celular vertical: la escena se funde suave con el fondo (sin línea donde termina el dibujo) */
@media (max-width:767px) and (orientation:portrait){
  .hham-sec .hham-escena .hham-lienzo{-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 72%,transparent 100%)}
  .hham-sec .hham-escena::after{height:42%!important;background:linear-gradient(to bottom,rgba(10,20,57,0) 0,rgba(10,20,57,.15) 25%,rgba(10,20,57,.45) 50%,rgba(10,20,57,.8) 75%,#0a1439 100%)!important}
}
/* iPhone SE: "¿Desde dónde partes?", el texto y el letrero azul suben para que quepan completos */
@media (max-width:767px) and (orientation:portrait) and (max-height:700px){
  .hham-sec>div.relative{margin-top:-34px!important}
}
/* Todos los teléfonos verticales: la portada de cada materia y la de "¿Desde dónde partes?" llenan la pantalla (sin blanco abajo al abrir) */
@media (max-width:767px) and (orientation:portrait){
  #inicio.hhm-hero{min-height:calc(100svh - 4rem)!important}
}
/* Tableta vertical: la portada de cada materia y la de "¿Desde dónde partes?" llenan la pantalla (sin blanco abajo al abrir) */
@media (min-width:768px) and (max-width:1023px) and (orientation:portrait){
  #inicio.hhm-hero{min-height:calc(100svh - 4rem)!important}
}
/* Celulares y tabletas: los textos bajo los títulos de sección (materias y "Las 5 materias") más grandes */
@media (max-width:1023px){
  main h2+p.text-\[16px\],#materias .hh-bh-txt p{font-size:18.5px!important;line-height:1.55!important}
}
/* Cualquier teléfono vertical más ancho (en proporción) que el Android promedio: la escena se escala igual que el texto
   (no por el ancho), pegada a la derecha como en el diseño; a la izquierda continúa el mismo cielo, sin cortes */
@media (max-width:767px) and (orientation:portrait) and (min-height:701px){
  #inicio>.hhm-banda{background:url(../videos/hero-fondo.webp) 32% 0/auto 100% no-repeat,#0a1439!important}
  #inicio>.hhm-banda video{position:absolute!important;top:0!important;right:0!important;left:auto!important;width:max(var(--hvw,100%),0px)!important;max-width:100%!important;height:auto!important;object-fit:contain!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%)!important;mask-image:linear-gradient(90deg,transparent 0,#000 14%)!important}
}
/* "Mi cuenta" en la barra (celular, con sesión iniciada): solo texto, como "Ingresar", sin botón de color */
.hhn-cta.only-min .hhn-pill.is-teal{background:none!important;box-shadow:none!important;color:var(--hhn-ink,#0a1439)!important;padding:0 12px!important;font-weight:500!important;letter-spacing:.02em;text-transform:uppercase;font-size:12px!important;border-radius:0}
.hhn-cta.only-min .hhn-pill.is-teal:hover{background:none!important;text-decoration:underline}
/* Celular horizontal, "¿Desde dónde partes?": sin ninguna línea entre el dibujo y el título (fondo liso y desvanecido continuo) */
@media (orientation:landscape) and (max-height:500px) and (max-width:1000px){
  .hham-sec .hham-escena{background:#0a1439!important;margin-bottom:-2px!important;clip-path:inset(0 0 6px 0)}
  .hham-sec .hham-escena .hham-lienzo>*{outline:0!important}
  .hham-sec .hham-escena::after{display:none!important}
  .hham-sec .hham-escena .hham-lienzo{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 50%,rgba(0,0,0,.6) 70%,rgba(0,0,0,.2) 86%,transparent 100%)!important;mask-image:linear-gradient(to bottom,#000 0,#000 50%,rgba(0,0,0,.6) 70%,rgba(0,0,0,.2) 86%,transparent 100%)!important}
  .hham-sec,.hham-sec>div.relative{background:#0a1439!important;border:0!important;box-shadow:none!important}
}
/* Celulares y tabletas (vertical y horizontal), "¿Desde dónde partes?": el dibujo se recorta antes de su borde de abajo,
   así su última fila de píxeles nunca se ve como una raya sobre el título */
@media (max-width:1023px){
  .hham-sec .hham-escena{clip-path:inset(0 0 6px 0);margin-bottom:-6px!important}
  .hham-sec>div.relative{background:#0a1439}
}
/* Tableta vertical, Sociales: el texto sube 2 mm */
@media (min-width:768px) and (max-width:1023px) and (orientation:portrait){
  #inicio.hhm-soc>div:last-child{translate:0 -24px}
}
/* Celular: "Contáctanos" del mismo tamaño que "Canal de WhatsApp", en su propia fila justo encima de él */
@media (max-width:767px){
  a[aria-label="Contáctanos por WhatsApp"]{box-shadow:none!important;padding:0 6px 0 24px!important;height:var(--hh-canal-h,52px);gap:10px!important;min-width:246px;justify-content:space-between}
  a[aria-label="Contáctanos por WhatsApp"]>span:first-child{font-size:16px!important;font-weight:600!important}
  a[aria-label="Contáctanos por WhatsApp"]>span:last-child{width:40px!important;height:40px!important}
  li:has(>a[aria-label="Contáctanos por WhatsApp"]){flex-basis:100%}
}
/* iPhone SE (celulares bajos): en todas las materias se ve el texto completo al abrir */
@media (max-width:767px) and (orientation:portrait) and (max-height:700px){
  #inicio.hhm-hero h1+p{font-size:15px!important;line-height:1.5!important;margin-top:10px!important}
  #inicio.hhm-hero h1{font-size:clamp(2.3rem,10.5vw,3rem)!important}
  #inicio.hhm-hero:not(.hhm-cien):not(.hhm-soc)>div:last-child{margin-top:-80px!important}
}
/* iPhone 15 Pro Max (y teléfonos grandes): en Sociales, Ciencias Naturales e Inglés el texto baja un poco (2 mm) */
@media (orientation:portrait) and (min-width:420px) and (max-width:767px) and (min-height:900px){
  #inicio.hhm-soc>div:last-child,#inicio.hhm-cien>div:last-child,#inicio.hhm-hero:has(image[href*="ingles/"])>div:last-child{translate:0 8px}
}
/* iPhone 15 Pro Max: Sociales baja otros 2 mm */
@media (orientation:portrait) and (min-width:420px) and (max-width:767px) and (min-height:900px){
  #inicio.hhm-soc>div:last-child{translate:0 16px}
}