/* =====================================================================
   LA CABECERA, EN UN SOLO SITIO  ·  20-sep-2026
   =====================================================================
   Por que existe: el menu estaba copiado dentro de cada pagina y se habia
   quedado en dos versiones. index, frasly, atajos y libros llevaban el nuevo
   (Cursos, Frasly, Videos, Precios, Dudas de ingles, Zona de alumnos, tema);
   cursos y regalos seguian con el viejo (Home, Cursos, Libros, Frasly,
   El negocio del ingles, Contacto). Desde aqui manda un solo archivo.

   Las reglas salen tal cual de estilo-nuevo.css, acotadas a "nav.nav-frasly"
   para que no toquen nada mas de la pagina que la incluye.

   EL PUENTE DE NOMBRES. La familia vieja (cursos.html, regalos.html) llama a
   los colores de otra manera. En vez de renombrar media pagina, se le dan a
   la cabecera los nombres que ella usa, aqui y solo aqui:

       --bg   = --paper        --ink  = --text        --ink2 = --text-soft
       --line = --border       --soft = --paper-dim   --es   = --indigo

   Y el tema oscuro: la familia nueva lo marca con data-tema="oscuro" y la
   vieja con data-theme="dark". La cabecera atiende a los dos.
   ===================================================================== */

/* EN OSCURO, EL GRIS DE APOYO. La cabecera se lo calcula ella para no depender
   de que cada pagina tenga bien su --text-soft. Aqui hizo falta: cursos.html
   lo definia una sola vez (#574f74, de fondo claro) y no lo redefinia para el
   modo oscuro, asi que el menu se quedaba en 2,2 de contraste. Eso ya esta
   arreglado en la propia cursos.html (20-sep-2026), pero la red se deja
   puesta: manana se mete este menu en otra pagina y vuelve a pasar. */
html[data-tema="oscuro"] nav.nav-frasly,
html[data-theme="dark"] nav.nav-frasly{
  --ink2: color-mix(in srgb, var(--text, #fff) 80%, var(--paper, #000));
}

nav.nav-frasly{
  --bg:   var(--paper,  #fff);
  --ink:  var(--text,   #1f1733);
  --ink2: var(--text-soft, var(--text, #574f74));
  --line: var(--border, #e6e2f0);
  --soft: var(--paper-dim, #f6f4fb);
  /* El acento (el "ly" del logo y el enlace de la pagina en la que estas) NO
     se toma de la pagina: es el de la cabecera, el mismo #E4572E que ya usan
     index, frasly, atajos y libros. Si se tomara de --indigo, en regalos.html
     salia #4b0082 sobre fondo oscuro, o sea 1,47 de contraste: el "ly" del
     logo, invisible. Y ademas una cabecera comun tiene que verse igual en
     todas partes, no cambiar de color segun la pagina en la que cae. */
  --es:   #E4572E;
}

/* NAV */
nav.nav-frasly{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav.nav-frasly .nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:66px}
nav.nav-frasly .logo{font-family:'Fraunces',serif;font-weight:700;font-size:1.15rem;text-decoration:none;white-space:nowrap}
nav.nav-frasly .logo b{color:var(--es)}
nav.nav-frasly .menu{display:flex;gap:1.1rem;align-items:center;list-style:none}
nav.nav-frasly .menu a{text-decoration:none;font-size:.92rem;font-weight:500;color:var(--ink2);white-space:nowrap}
nav.nav-frasly .menu a:hover{color:var(--ink)}
nav.nav-frasly .menu .actual{color:var(--es);font-weight:700}
nav.nav-frasly .menu .zona{background:var(--ink);color:var(--bg);padding:.5rem 1.1rem;border-radius:999px;font-weight:700}
html[data-tema="oscuro"] nav.nav-frasly .menu .zona,
html[data-theme="dark"] nav.nav-frasly .menu .zona{background:var(--card);color:var(--ink)}
nav.nav-frasly #luna{background:none;border:0;font-size:1.2rem;cursor:pointer}
/* Desplegables del menú (Dudas de inglés / El negocio del inglés): el
   <details>/<summary> de más abajo está pensado para acordeones tipo FAQ
   (fondo, borde, sombra propios) y desentonaba metido en la barra de
   navegación, apretando el buscador de al lado hasta dejarlo sin sitio. */
/* 25-ago-2026: antes usaba <details>/<summary>, y el <summary> SOLO puede
   desplegar (es lo único que hace nativamente), nunca navegar a la vez.
   Mismo patrón que ya usan los 377 artículos del blog: la etiqueta es un
   enlace real, y un botón aparte, más pequeño, abre el panel. */
nav.nav-frasly .menu-desp{position:relative;display:inline-flex;align-items:center;gap:.2rem}
nav.nav-frasly .menu-desp>a{text-decoration:none;font-size:.92rem;font-weight:500;color:var(--ink2);white-space:nowrap}
nav.nav-frasly .menu-desp>a:hover{color:var(--ink)}
nav.nav-frasly .menu-desp>a.actual{color:var(--es);font-weight:700}
nav.nav-frasly .menu-desp .desp-boton{background:none;border:1px solid var(--line);border-radius:50%;width:19px;height:19px;padding:0;margin:0;font-size:.68rem;color:var(--ink2);cursor:pointer;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:transform .15s,border-color .15s,background .15s}
nav.nav-frasly .menu-desp:hover .desp-boton,
nav.nav-frasly .menu-desp .desp-boton:hover{border-color:var(--ink2);background:var(--soft)}
nav.nav-frasly .menu-desp .desp-boton[aria-expanded="true"]{transform:rotate(180deg)}
nav.nav-frasly .menu-desp .desp-panel{position:absolute;top:calc(100% + 22px);left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:.5rem;display:flex;flex-direction:column;gap:.1rem;min-width:250px;z-index:60}
nav.nav-frasly .menu-desp .desp-panel[hidden]{display:none}
nav.nav-frasly .menu-desp .desp-panel a{display:block;padding:.55rem .8rem;border-radius:8px;font-size:.86rem;font-weight:500;color:var(--ink2);text-decoration:none;white-space:normal;line-height:1.3}
nav.nav-frasly .menu-desp .desp-panel .cab{display:block;padding:.4rem .8rem .1rem;font-size:.78rem/* 7-sep-2026: era .68rem = 10,88 px en movil, por debajo de los 12 que se leen bien. Se cambia AQUI y no con una regla nueva al final, que con «.desp-panel .cab» no ganaba a esta. */;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);opacity:.7}
nav.nav-frasly .menu-desp .desp-panel .sep{display:block;border-top:1px solid var(--line);margin:.3rem .4rem}
nav.nav-frasly .menu-desp .desp-panel a:hover{background:var(--soft);color:var(--ink)}
@media (max-width:1300px){  nav.nav-frasly .menu-desp{position:static;width:100%;display:flex;align-items:center;justify-content:flex-start;gap:.6rem;border-bottom:1px solid var(--line);padding:.2rem 0}
  nav.nav-frasly .menu-desp>a{padding:.7rem 0}
  nav.nav-frasly .menu-desp .desp-boton{width:32px;height:32px;justify-content:center;border:1px solid var(--line);border-radius:50%}
  nav.nav-frasly .menu-desp .desp-panel{position:static;transform:none;box-shadow:none;border:0;border-radius:0;min-width:0;padding:0 0 .6rem 1rem;width:100%}
}
nav.nav-frasly .burger{display:none;background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--ink)}
/* BUSCADOR (solo index, frasly y dudas) */
nav.nav-frasly .busca{flex:1;min-width:170px;max-width:280px}
nav.nav-frasly .busca-m{display:none}
nav.nav-frasly .busca input{width:100%;padding:.55rem 1rem;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:.88rem;outline:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
nav.nav-frasly .busca input:focus{border-color:var(--es)}
/* DUDAS */
nav.nav-frasly .buscador-grande{max-width:640px;margin:2rem auto 0}
nav.nav-frasly .buscador-grande input{width:100%;padding:1.1rem 1.6rem;font:inherit;font-size:1.05rem;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--ink);outline:none;box-shadow:var(--shadow)}
nav.nav-frasly .buscador-grande input:focus{border-color:var(--es)}
@media(max-width:1300px){  nav.nav-frasly .busca{display:none}
  nav.nav-frasly .menu{display:none;position:absolute;top:66px;right:0;left:auto;width:min(100%,420px);align-items:stretch;background:var(--bg);flex-direction:column;padding:1.2rem;border-bottom:1px solid var(--line);border-left:1px solid var(--line)}
  nav.nav-frasly .menu.abierto{display:flex}
  nav.nav-frasly .menu .busca-m{display:block;width:100%}
  nav.nav-frasly .menu .busca-m .busca{display:block;margin-bottom:.8rem}
  nav.nav-frasly .burger{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0}
  /* 7-sep-2026: medido en un movil de 375 px, este boton eran 23x34 pixeles.
     Es la ÚNICA navegacion que hay en movil y no llegaba ni a la mitad de los
     44x44 que piden Apple y Google para algo que se pulsa con el dedo. Se
     agranda la zona de toque sin tocar el icono ni el tamano de letra: la
     caja crece hacia la izquierda, donde hay 101 px libres hasta el logo, asi
     que no se mueve nada mas. De paso queda mejor centrado: antes el icono
     estaba a 33 px del borde y el logo a 22 del suyo; ahora los dos a 22. */
}