/* ==========================================================================
   nav.css — LA barra de navegación. Única para todo el sitio.
   --------------------------------------------------------------------------
   Antes vivía duplicada en dos hojas: styles.css la pintaba para la home y
   pages.css para las internas. Eran casi iguales, y ese "casi" es lo que se
   veía: la pastilla cambiaba de alto al entrar en una interna porque
   pages.css declara line-height:1.6 en el body y los enlaces y el botón lo
   heredaban; el ".io" se descolocaba porque a una le faltaba una propiedad
   que la otra sí tenía.

   Aquí no se hereda NADA del documento: cada pieza declara su tipografía,
   su interlineado y su caja. Así la barra mide lo mismo en la home, en un
   núcleo, en el blog o en un caso.

   Se carga la última en las 24 páginas. El selector cubre las dos formas de
   markup que existen: <nav class="pg-nav"> en las internas y un <nav> suelto
   en la home (por eso "body > nav", que además deja fuera el <nav> de
   enlaces legales del pie).
   ========================================================================== */

body > nav, .pg-nav{
  position:fixed; top:14px; left:50%; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  width:calc(100% - 28px); max-width:1100px;
  padding:10px 12px 10px 22px;
  background:#f2f1ea; border:none; border-radius:999px;
  /* SOLO anillo interior. Una sombra exterior o una promoción de capa eran
     lo único capaz de pintar una copia desplazada de la pastilla. */
  box-shadow:inset 0 0 0 1px rgba(15,31,16,.10);
  transform:translateX(-50%);
  font-family:"Geist", system-ui, -apple-system, sans-serif;
}

/* ---- logotipo ----
   La pastilla ".io" es un inline-flex dentro del enlace: sin inline-flex +
   align-items + line-height en el propio .logo se alinea por la BASE del
   texto y cae por debajo de "monje". */
body > nav .logo, .pg-nav .logo{
  display:inline-flex; align-items:center; line-height:1;
  font-family:inherit; font-weight:600; font-size:22px; letter-spacing:-.02em;
  color:#0f1f10; text-decoration:none; flex:none;
}
body > nav .logo .pill, .pg-nav .logo .pill{
  display:inline-flex; align-items:center; line-height:1;
  background:#C7FF2E; color:#0F0F0F; font-weight:700; font-size:.58em; letter-spacing:-.01em;
  /* border:none explícito: en la home existe un .pill genérico (las del chat)
     con borde de 1px, y sin esto la pastilla del logo salía 2px más alta que
     en las internas. Era exactamente el "el menú cambia" que se veía. */
  border:none; border-radius:.34em; padding:.16em .4em .2em; margin-left:.16em; vertical-align:.06em;
}

/* ---- enlaces ---- */
body > nav .nav-links, .pg-nav .nav-links{ display:flex; align-items:center; gap:2px; }
body > nav .nav-links a, .pg-nav .nav-links a{
  font-family:inherit; font-weight:500; font-size:15px; line-height:1.2;
  color:#43563f; padding:9px 15px; border-radius:999px; text-decoration:none;
  white-space:nowrap; transition:background .16s, color .16s;
}
body > nav .nav-links a:hover, .pg-nav .nav-links a:hover{ background:rgba(15,31,16,.07); color:#0f1f10; }

/* ---- desplegable de Servicios ----
   "Servicios" es un enlace de verdad a /servicios (es el hub, y el enlace
   desde las 25 páginas es justo lo que se busca). El panel NO cuelga de un
   botón: en escritorio se abre al pasar por encima y al entrar con el
   tabulador, y en móvil se ve siempre, sangrado. Así los cuatro núcleos
   están en el DOM en todas las páginas pase lo que pase con el ratón. */
/* align-self:stretch para que el grupo llegue de arriba abajo de la pastilla.
   Sin él, el alto lo marca el enlace (36px) y la pastilla es más alta porque
   la manda el botón Contacta: el top:100% del panel caía DENTRO de la
   pastilla y el panel salía pisándola por 3px en vez de colgar debajo. */
body > nav .nav-drop, .pg-nav .nav-drop{
  position:relative; display:flex; align-items:center; align-self:stretch;
}

/* el chevron va DENTRO del enlace, así hereda el color del tema sin que haya
   que repintarlo aparte en cada uno de los tres trajes del menú */
body > nav .nav-links .nav-drop > a, .pg-nav .nav-links .nav-drop > a{
  display:inline-flex; align-items:center; gap:6px;
}
body > nav .nav-caret, .pg-nav .nav-caret{
  width:9px; height:6px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .2s;
}

body > nav .nav-drop-p, .pg-nav .nav-drop-p{
  position:absolute; top:100%; left:0; z-index:1;
  /* El padding-top hace de PUENTE. Si el panel se separase con un top:calc()
     quedaría un hueco muerto entre la pastilla y el panel: el ratón lo cruza,
     pierde el :hover y el desplegable se cierra a medio camino.
     Son los 10px de padding-bottom de la pastilla + los 10px de aire que se
     quieren ver debajo de ella. */
  padding-top:20px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s, transform .16s, visibility 0s .16s;
}
body > nav .nav-drop-in, .pg-nav .nav-drop-in{
  display:flex; flex-direction:column; gap:2px; min-width:196px;
  background:#f2f1ea; border:1px solid rgba(15,31,16,.08); border-radius:18px; padding:8px;
  box-shadow:0 18px 44px -20px rgba(0,0,0,.45);
}
body > nav .nav-links .nav-drop-in a, .pg-nav .nav-links .nav-drop-in a{
  padding:9px 14px; border-radius:12px;
}

/* Las reglas de "abierto" van acotadas a escritorio A PROPÓSITO. Llevan un
   :hover / :focus-within de más, así que son MÁS específicas que las de
   móvil de abajo y le ganarían aunque el @media vaya después. Acotarlas es
   lo que evita que el panel de móvil se comporte como el de escritorio. */
@media(min-width:861px){
  /* con el ratón solo donde hay ratón de verdad: en una tablet ancha (sin
     hamburguesa) el :hover se queda pegado y el panel se comería el primer
     toque en vez de abrir /servicios */
  @media(hover:hover){
    body > nav .nav-drop:hover .nav-drop-p, .pg-nav .nav-drop:hover .nav-drop-p{
      opacity:1; visibility:visible; transform:translateY(0);
      transition:opacity .16s, transform .16s, visibility 0s 0s;
    }
    body > nav .nav-drop:hover .nav-caret, .pg-nav .nav-drop:hover .nav-caret{ transform:rotate(180deg); }
  }
  /* con el tabulador: sirve para teclado y no depende de que exista ratón */
  body > nav .nav-drop:focus-within .nav-drop-p, .pg-nav .nav-drop:focus-within .nav-drop-p{
    opacity:1; visibility:visible; transform:translateY(0);
    transition:opacity .16s, transform .16s, visibility 0s 0s;
  }
  body > nav .nav-drop:focus-within .nav-caret, .pg-nav .nav-drop:focus-within .nav-caret{ transform:rotate(180deg); }

  /* Escape (lo pone nav.js). Lleva una clase de más que las dos reglas de
     arriba, así que las gana sin necesidad de !important. */
  body > nav .nav-drop.hushed .nav-drop-p, .pg-nav .nav-drop.hushed .nav-drop-p{
    opacity:0; visibility:hidden; transition:none;
  }
  body > nav .nav-drop.hushed .nav-caret, .pg-nav .nav-drop.hushed .nav-caret{ transform:none; }
}

/* ---- botón de contacto ---- */
body > nav .btn-contacta, .pg-nav .btn-contacta{
  display:inline-flex; align-items:center; line-height:1.2;
  font-family:inherit; font-weight:600; font-size:15px;
  background:#0f1f10; color:#f5f4f2; border:1px solid #0f1f10;
  padding:11px 22px; border-radius:999px; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:transform .2s, background .2s, border-color .2s, color .2s;
}
body > nav .btn-contacta:hover, .pg-nav .btn-contacta:hover{
  transform:translateY(-1px); background:#C7FF2E; color:#0b170c; border-color:#C7FF2E;
}

/* ---- hamburguesa ---- */
body > nav .nav-burger, .pg-nav .nav-burger{
  display:none; width:40px; height:40px; padding:0; border:none; background:transparent; cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  border-radius:50%; transition:background .16s;
}
body > nav .nav-burger:hover, .pg-nav .nav-burger:hover{ background:rgba(15,31,16,.06); }
body > nav .nav-burger span, .pg-nav .nav-burger span{
  display:block; width:20px; height:2px; background:#0f1f10; border-radius:2px;
  transition:transform .2s, opacity .2s;
}
body > nav.open .nav-burger span:nth-child(1), .pg-nav.open .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body > nav.open .nav-burger span:nth-child(2), .pg-nav.open .nav-burger span:nth-child(2){ opacity:0; }
body > nav.open .nav-burger span:nth-child(3), .pg-nav.open .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---- móvil ---- */
@media(max-width:860px){
  body > nav, .pg-nav{ padding:10px 10px 10px 20px; }
  body > nav .nav-burger, .pg-nav .nav-burger{ display:inline-flex; }
  /* en móvil el contacto vive en el botón flotante de WhatsApp, no en el nav */
  body > nav .btn-contacta, .pg-nav .btn-contacta{ display:none; }
  body > nav .nav-links, .pg-nav .nav-links{
    position:absolute; top:calc(100% + 10px); left:0; right:0;
    display:none; flex-direction:column; gap:2px;
    /* En horizontal el contenedor va con align-items:center, y al girar a
       columna eso centraba cada enlace por su ancho. Se veía bien con seis
       líneas sueltas, pero la sangría de los núcleos necesita un margen
       izquierdo común: centrados, el árbol no se lee. */
    align-items:stretch;
    background:#f2f1ea; border:1px solid rgba(15,31,16,.08); border-radius:22px; padding:10px;
    box-shadow:0 18px 44px -20px rgba(0,0,0,.6);
  }
  body > nav.open .nav-links, .pg-nav.open .nav-links{ display:flex; }
  body > nav .nav-links a, .pg-nav .nav-links a{ padding:13px 16px; border-radius:14px; font-size:16px; }

  /* En móvil no hay desplegable que abrir: el menú ya se despliega entero con
     la hamburguesa, y los cuatro núcleos caben sangrados debajo de Servicios.
     Un acordeón dentro de otro acordeón sería un toque de más para llegar a
     lo mismo. Antes eran 6 líneas sueltas; ahora son 7 con jerarquía. */
  body > nav .nav-drop, .pg-nav .nav-drop{ display:block; }
  body > nav .nav-caret, .pg-nav .nav-caret{ display:none; }
  /* flex y no inline-flex: si no, la zona tocable de Servicios mide lo que
     mide la palabra y las demás filas ocupan el ancho entero */
  body > nav .nav-links .nav-drop > a, .pg-nav .nav-links .nav-drop > a{ display:flex; }
  body > nav .nav-drop-p, .pg-nav .nav-drop-p{
    position:static; padding:0; z-index:auto;
    opacity:1; visibility:visible; transform:none; transition:none;
  }
  body > nav .nav-drop-in, .pg-nav .nav-drop-in{
    min-width:0; background:transparent; box-shadow:none; border-radius:0;
    /* la línea de la izquierda es lo que hace de árbol */
    border:none; border-left:1px solid rgba(15,31,16,.12);
    padding:0 0 0 10px; margin:2px 0 2px 16px;
  }
  body > nav .nav-links .nav-drop-in a, .pg-nav .nav-links .nav-drop-in a{
    padding:11px 14px; border-radius:12px; font-size:15px;
  }
}
@media(max-width:560px){
  body > nav, .pg-nav{ padding:12px 12px 12px 18px; }
  body > nav .logo, .pg-nav .logo{ font-size:21px; }
}