/* El encabezado en movil, que hasta el 2026-08-19 no ofrecia ninguna via de
 * contacto.
 *
 * Medido a 390 px contra produccion: el encabezado mostraba solo el logo. La
 * regla `.nav-links, .brand-meta, .nav-cta { display: none }` del bloque de
 * 880 px se llevaba "Escribeme" y "Agenda tu Sesion" sin dejar menu que los
 * reemplazara, y en /gracias/ se llevaba tambien el unico enlace de vuelta al
 * sitio. El trafico de esta marca viene de Instagram, o sea que la mayoria de
 * las visitas veia ese encabezado y no el de escritorio.
 *
 * Devolver los dos botones tal cual no era opcion y esta medido: a 390 px la
 * marca ocupa 222 px y el par de botones 329, o sea 161 px mas que el ancho
 * disponible. Asi que aqui se hacen dos cosas y no una:
 *
 *   1. los botones vuelven, en version compacta (sin flecha, menos aire);
 *   2. en las paginas que ya tienen el boton flotante "Solicitar primera
 *      sesion", el boton de reserva del encabezado NO vuelve. Es el mismo
 *      destino dos veces, y repetirlo es justo lo que empuja al correo fuera
 *      del ancho. En movil la reserva vive en el flotante y el encabezado
 *      queda para escribir.
 *
 * Vive en un archivo propio y no en el <style> de cada pagina porque las
 * siete no comparten hoja: unas llevan el CSS embebido y otras cargan
 * pagina.css. Pegar la misma media query siete veces crea siete fuentes de
 * verdad que divergen en el primer cambio, que es la leccion (AÑ·2) del
 * 2026-08-15.
 *
 * Se prueba con  node encabezado-movil.test.mjs  desde la raiz del sitio.
 */

/* La franja intermedia, 881 a 1100 px: portatil chico o tableta apaisada.
 *
 * Aqui habia **dos defectos que ya estaban en produccion antes de este
 * archivo**, medidos en los dos lados: los cinco enlaces con sus numeros
 * volados se parten en dos lineas desde 881 hasta 1081, y encima el
 * encabezado se sale de la pantalla entre 881 y 961, con "Agenda tu Sesion"
 * cortado contra el borde derecho.
 *
 * Se ocultan los enlaces en vez de apretarlos, y el motivo es aritmetico: para
 * que la fila entre en una linea a 881 px hay que dejarla en 346 px, y su
 * texto solo ya mide 305, o sea huecos de 10 px entre enlaces. Los numeros
 * volados van a `right: -16px`, asi que con 10 px de hueco cada numero se
 * monta sobre el enlace siguiente. **Apretarlos cambia el defecto de sitio,
 * no lo arregla.**
 *
 * Lo que se pierde es poco y esta duplicado: son anclas a secciones de la
 * misma pagina, que se alcanzan bajando, y la de "Contacto" la cubre el boton
 * "Escribeme" que queda a la vista. Sobre 1100 px no se toca nada. */
@media (min-width: 881px) and (max-width: 1100px) {
  .nav-inner .nav-links { display: none; }
}

@media (max-width: 880px) {
  /* Gana por especificidad (0,2,0 contra 0,1,0), no por orden de carga: asi
   * funciona igual en las paginas que cargan pagina.css despues. */
  .nav-inner .nav-cta {
    display: inline-flex;
    padding: 8px 15px;
    font-size: 12.5px;
    gap: 6px;
    /* En escritorio se apunta con el cursor; aqui se toca con el pulgar. La
     * pastilla compacta quedaba en 32 px de alto y esto la sube a 40 sin
     * cambiar el aire lateral, que es el que estaba peleado con el ancho. */
    min-height: 40px;
  }

  /* La flecha no cabe y no hace falta: la pastilla ya se lee como boton. */
  .nav-inner .nav-cta::after { display: none; }

  /* La reserva ya esta cubierta por el flotante de la esquina inferior. Se
   * apunta por destino y no por posicion para no tocar el unico boton de
   * /gracias/, que lleva a "/" y si tiene que volver. */
  .nav-inner .nav-cta[href="/reservar"] { display: none; }

  /* El punto decorativo del extremo se va, y esto NO es cosmetica: al volver
   * la pastilla, el punto quedaba empujado fuera de la pantalla y se veia
   * cortado contra el borde a 320 y a 390 px. Es `aria-hidden`, o sea que no
   * comunica nada, y sus 28 px mas su hueco son justo el aire que le falta al
   * boton en las pantallas angostas. */
  .nav-inner .status-dot { display: none; }
}

/* Bajo 380 px (iPhone SE y similares) no alcanza con achicar la pastilla: a
 * 320 px la marca a 18 px mas el boton mas los 24 px de aire a cada lado del
 * contenedor se pasan del ancho, medido. Se recortan las tres cosas a la vez,
 * y el aire del contenedor es el que mas rinde porque valen 16 px de una.
 *
 * El caso que manda aqui no es el home sino /gracias/, cuya etiqueta es la
 * mas larga ("Volver al sitio"). Ese encabezado **ya desbordaba en produccion
 * antes de este archivo**: documento de 403 px dentro de una ventana de 390. */
@media (max-width: 380px) {
  .nav-inner { padding-left: 16px; padding-right: 16px; }
  .nav-inner .brand { font-size: 15px; gap: 9px; }
  .nav-inner .nav-cta { padding: 7px 11px; font-size: 11.5px; }
}