/* Estilo del Aula Goatlander — misma marca que la home del portal.
   (La home lleva su CSS inline; esto es la base compartida de las páginas del aula.) */

@font-face{font-family:'Gilroy';src:url('/assets/fonts/Gilroy-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Gilroy';src:url('/assets/fonts/Gilroy-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Gilroy';src:url('/assets/fonts/Gilroy-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Gilroy';src:url('/assets/fonts/Gilroy-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap}

:root{
  --negro:#000000; --superficie:#0b0a08; --tarjeta:#12100c;
  --oro:#B49648; --oro-brillo:#d4af37;
  --gris:#A8A8A8; --blanco:#ffffff;
  --borde:rgba(180,150,72,.16);
  --ease-entra:cubic-bezier(.05,.7,.1,1);
  --ease-sale:cubic-bezier(.3,0,1,1);
  --ease-mueve:cubic-bezier(.2,0,0,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--negro); color:var(--blanco);
  font-family:'Gilroy',-apple-system,sans-serif; font-weight:400;
  line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* fondo que respira */
.ambiente{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--negro)}
.ambiente::before,.ambiente::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.14}
.ambiente::before{width:60vw;height:60vw;left:-18vw;top:-22vw;
  background:radial-gradient(circle,#B49648 0%,transparent 62%);
  animation:respira 22s ease-in-out infinite}
.ambiente::after{width:52vw;height:52vw;right:-20vw;bottom:-18vw;
  background:radial-gradient(circle,#6b5a2a 0%,transparent 60%);
  animation:respira 26s ease-in-out -8s infinite reverse}
@keyframes respira{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4vw,3vw,0) scale(1.12)}}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;padding:16px clamp(20px,5vw,64px);
  background:rgba(0,0,0,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--borde)}
nav .logo img{height:28px;display:block}
nav .enlaces{display:flex;align-items:center;gap:clamp(14px,3vw,32px)}
nav .enlaces a{color:var(--gris);text-decoration:none;font-weight:500;font-size:.92rem;
  letter-spacing:.02em;transition:color .15s var(--ease-entra)}
nav .enlaces a:hover{color:var(--blanco)}
nav .enlaces a.activo{color:var(--oro);font-weight:700}
/* móvil (16-ago-2026): en el teléfono manda el ISOTIPO — el wordmark es 9:1 y a
   18px de alto se comía 160 de los 390px de la barra; con la cabra sola el menú
   respira. Nada se parte en dos líneas, y lo que ya vive en otro sitio se esconde:
   "Inicio" es el propio logo, y "Ayuda" sigue en el pie y en el menú de la cuenta. */
@media (max-width:720px){
  nav{padding:12px 14px}
  nav .enlaces{gap:11px}
  nav .enlaces a{font-size:.8rem;white-space:nowrap}
  nav .logo{display:block;flex:0 0 auto;width:25px;height:29px;
    background:url('/assets/isotipo-blanco.png') center/contain no-repeat}
  nav .logo img{display:none}
  nav .enlaces a[href="/inicio/"],
  nav .enlaces a[href="/classroom/ayuda/"]{display:none}
  .perfil-avatar{width:34px;height:34px}
}
/* en los teléfonos más estrechos la lupa cede su sitio al menú */
@media (max-width:374px){ nav .enlaces .lupa{display:none} }

/* botones */
.btn{display:inline-block;text-decoration:none;font-weight:800;letter-spacing:.03em;
  padding:15px 32px;border-radius:999px;font-size:.98rem;border:0;cursor:pointer;
  font-family:'Gilroy',sans-serif;
  transition:transform .15s var(--ease-entra),box-shadow .15s var(--ease-entra),background .15s var(--ease-entra);
  will-change:transform}
.btn-oro{background:var(--oro);color:#000}
.btn-oro:hover{transform:translateY(-2px);background:var(--oro-brillo);box-shadow:0 12px 34px -10px rgba(180,150,72,.55)}
.btn-oro:active{transform:translateY(0);transition-duration:.08s}
.btn-fantasma{border:1px solid var(--borde);color:var(--oro);background:none}
.btn-fantasma:hover{transform:translateY(-2px);border-color:var(--oro)}

/* tipografía común */
.ojal{color:var(--oro);font-weight:700;letter-spacing:.34em;text-transform:uppercase;
  font-size:.78rem;margin-bottom:26px;display:flex;align-items:center;gap:14px}
.ojal::before{content:"";width:34px;height:1px;background:var(--oro);display:inline-block}
h1,h2{font-weight:800;line-height:1.1;letter-spacing:-.015em}
.bajada{font-style:italic;color:var(--gris);font-size:clamp(1rem,1.8vw,1.25rem);max-width:640px}
.dorado{color:var(--oro)}

/* revelados */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .65s var(--ease-entra),transform .65s var(--ease-entra);
  transition-delay:var(--d,0ms)}
.reveal.visto{opacity:1;transform:none}
html.captura .reveal{opacity:1;transform:none;transition:none}
html.captura *{animation:none!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ── menú de perfil (avatar arriba a la derecha) ── */
.perfil-menu{position:relative;display:flex;align-items:center}
.perfil-avatar{width:38px;height:38px;border-radius:50%;border:2px solid var(--oro,#B49648);
  background:#12100c;color:var(--oro,#B49648);font-family:'Gilroy',sans-serif;font-weight:800;
  font-size:1rem;cursor:pointer;overflow:hidden;padding:0;display:flex;align-items:center;justify-content:center}
.perfil-avatar img{width:100%;height:100%;object-fit:cover}
.perfil-avatar:hover{box-shadow:0 0 0 3px rgba(180,150,72,.25)}
.perfil-desplegable{position:absolute;top:52px;right:0;min-width:230px;z-index:60;
  background:#100e0a;border:1px solid rgba(180,150,72,.3);border-radius:14px;
  padding:8px;box-shadow:0 30px 60px -30px rgba(0,0,0,.9);display:grid;gap:2px}
.perfil-desplegable[hidden]{display:none}
.perfil-cabecera{display:flex;gap:10px;align-items:center;padding:10px 10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:6px}
.perfil-cara{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:0 0 40px;
  background:#12100c;border:1px solid rgba(180,150,72,.4);color:var(--oro,#B49648);
  font-weight:800;display:flex;align-items:center;justify-content:center}
.perfil-cara img{width:100%;height:100%;object-fit:cover}
.perfil-cabecera b{display:block;color:#fff;font-size:.95rem}
.perfil-cabecera small{color:var(--oro,#B49648);font-size:.75rem}
.perfil-desplegable a{color:#d6d6d6;text-decoration:none;font-family:'Gilroy',sans-serif;
  font-size:.9rem;padding:10px 12px;border-radius:9px;transition:background .12s}
.perfil-desplegable a:hover{background:rgba(180,150,72,.12);color:#fff}
.perfil-desplegable a.salir{color:#e0a0a0;margin-top:4px;border-top:1px solid rgba(255,255,255,.07)}
.perfil-desplegable a.salir:hover{background:rgba(200,80,80,.15)}

/* en pantallas estrechas, los enlaces marcados "ocultable" se esconden del nav
   (la regla vivía solo en casa.css y las páginas nuevas también la necesitan) */
@media (max-width:860px){ nav .enlaces a.ocultable{display:none} }