/* ==========================================================================
   BioWay - Navegacion
   Isla flotante que se encoge al bajar; en movil baja al borde inferior.
   El indicador se desliza al enlace activo (ver bioway-nav.js).
   ========================================================================== */

/* ── Nav: isla flotante, sin barra corrida ── */
.nav-envoltura{position:fixed;top:0;left:0;right:0;z-index:60;padding:18px 5vw;
  display:flex;justify-content:center;pointer-events:none;transition:padding .35s cubic-bezier(.2,.8,.2,1)}
.nav-envoltura.compacta{padding:10px 5vw}
/* Acotado a `.nav-envoltura` (20-ago-2026): como `nav{}` a secas, esto
   pintaba tambien el <nav> del pie con la pastilla de la isla flotante. */
.nav-envoltura nav{pointer-events:auto;display:flex;align-items:center;gap:34px;
  padding:9px 9px 9px 20px;border-radius:100px;
  background:rgba(252,253,249,.72);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(144,238,144,.35);
  box-shadow:0 1px 2px rgba(13,69,44,.05);
  transition:box-shadow .35s ease, background .35s ease, transform .35s cubic-bezier(.2,.8,.2,1)}
.nav-envoltura.compacta nav{box-shadow:0 14px 40px rgba(13,69,44,.16);background:rgba(252,253,249,.96);border-color:rgba(144,238,144,.6)}
.logo img{height:38px;display:block;transition:height .3s ease}
.nav-envoltura.compacta .logo img{height:32px}
.nav-links{position:relative;display:flex;gap:4px;font-size:14px}
.nav-links a{position:relative;z-index:1;color:var(--texto);text-decoration:none;font-weight:600;
  padding:9px 16px;border-radius:100px;transition:color .25s ease}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--primary)}
/* el indicador se desliza detrás del enlace activo — sin subrayados estáticos */
.nav-marca{position:absolute;top:0;height:100%;border-radius:100px;background:var(--menta-suave);
  z-index:0;opacity:0;transition:transform .38s cubic-bezier(.2,.8,.2,1),width .38s cubic-bezier(.2,.8,.2,1),opacity .25s}
.btn-sesion{background:var(--primary);color:#fff;border:none;padding:11px 22px;border-radius:100px;
  display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap;
  font:700 13.5px var(--cuerpo);cursor:pointer;min-height:42px;position:relative;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease}
.btn-sesion:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(14,79,48,.28);color:#fff}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE (19-ago-2026)

   Esta hoja no tenía NI UNA media query, pese a que su propia cabecera
   prometía «en movil baja al borde inferior». La isla flotante conserva
   `gap:34px` y cinco enlaces a cualquier ancho, así que por debajo de
   ~900px desbordaba: en un teléfono de 390px el botón «Iniciar sesión»
   quedaba fuera de la pantalla y arrastraba la página en horizontal.

   Se resuelve en dos pasos, sin añadir un menú de hamburguesa: primero la
   isla se aprieta, y en teléfono baja al borde inferior —donde el pulgar
   llega— con los enlaces en una tira que se desplaza si no caben.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Tablet y portátiles chicos: la isla se aprieta ── */
@media (max-width:1040px){
  .nav-envoltura{padding:12px 4vw}
  .nav-envoltura nav{gap:14px;padding:8px 8px 8px 14px}
  .nav-links{font-size:13px}
  .nav-links a{padding:8px 11px}
  .logo img{height:32px}
  .btn-sesion{padding:10px 16px;font-size:13px}
}

/* El icono y el rótulo corto sólo existen en la barra de teléfono... */
.nav-links i,.nav-corto{display:none}
/* ...salvo WhatsApp, que en escritorio va como logotipo sin texto: se
   reconoce sin leerlo y devuelve ~78px a la isla, que iba apretada. */
.nav-links a.solo-icono{padding:9px 13px}
.nav-links a.solo-icono i{display:block;font-size:17px;line-height:1}
.nav-links a.solo-icono .nav-txt{display:none}
.nav-links a.solo-icono:hover i{color:#25D366}

/* ── Teléfono: barra de iconos anclada abajo ──────────────────────────
   La primera versión de este bloque dejaba los enlaces en una tira
   desplazable. Medido después en producción: de 467px de contenido sólo se
   veían 234 — «Punto BioWay» y «WhatsApp» quedaban fuera sin ninguna señal
   de que hubiera más, que es peor que no tenerlos. Ahora es una barra de
   cinco destinos con icono y rótulo corto, todos visibles a la vez: el
   patrón de app, que es lo que espera quien navega con el pulgar. */
@media (max-width:760px){
  .nav-envoltura{top:auto;bottom:0;padding:0;pointer-events:none}
  .nav-envoltura.compacta{padding:0}
  .nav-envoltura nav{width:100%;max-width:none;gap:0;padding:6px 6px calc(4px + env(safe-area-inset-bottom));
    border-radius:20px 20px 0 0;border-left:none;border-right:none;border-bottom:none;
    background:rgba(252,253,249,.97);box-shadow:0 -6px 24px rgba(13,69,44,.13);
    align-items:stretch}
  .nav-envoltura.compacta nav{box-shadow:0 -6px 24px rgba(13,69,44,.17)}
  /* El logotipo sobra: quien está aquí ya sabe en qué sitio está, y son
     38px que les hacen falta a los cinco destinos. */
  .logo{display:none}
  .nav-links{flex:1;min-width:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;font-size:10px}
  .nav-links a{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;padding:7px 2px;border-radius:12px;font-weight:600;line-height:1;
    color:var(--medio);min-width:0}
  .nav-links i{display:block;font-size:16px;line-height:1}
  /* El texto largo se cambia por el corto: «Trazabilidad» no cabe bajo un
     icono de 62px, «Traza» sí. */
  .nav-txt{display:none}
  .nav-corto{display:block;font-size:10px;letter-spacing:.1px;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav-links a[aria-current]{color:var(--primary);background:var(--menta-suave)}
  /* El indicador deslizante se apaga: se calcula en JS sobre una fila
     horizontal y aquí la retícula es otra. */
  .nav-marca{display:none}
  .btn-sesion{flex:0 0 auto;align-self:center;margin-left:4px;
    padding:9px 13px;font-size:12px;min-height:36px}
  /* La barra tapa el pie del documento: se le hace sitio. 82px eran de la
     barra anterior; la de ahora mide 59 medidos en produccion (6+4 de
     padding propio mas la fila de iconos). Los 23px de sobra se veian como
     una franja blanca —el fondo del body es #FCFDF9— entre el final del pie
     —menta #EAFBEF— y la barra. Se ajusta a la altura real mas el area
     segura del telefono, que en un iPhone no es cero. */
  body{padding-bottom:calc(59px + env(safe-area-inset-bottom))}
  /* Y ese sitio se pinta del color del pie. La reserva es padding del body,
     asi que la pintaba el fondo del body (#FCFDF9) y quedaba una franja
     clara bajo el pie, que es menta: se veia como un corte entre el final
     de la pagina y la barra. Con el degradado el ultimo tramo continua el
     pie y la union desaparece. */
  body{background:linear-gradient(180deg,var(--papel) 0,var(--papel) calc(100% - 140px),var(--menta-suave) calc(100% - 140px),var(--menta-suave) 100%)}
}

/* Muy estrecho: el botón se queda solo con el verbo. */
@media (max-width:380px){
  .nav-links{font-size:9.5px}
  .btn-sesion{padding:9px 11px;font-size:11.5px}
  .btn-sesion .sesion-larga{display:none}
}

/* Quien pida menos animación no ve deslizamientos. */
@media (prefers-reduced-motion:reduce){
  .nav-envoltura,nav,.nav-marca,.logo img,.btn-sesion{transition:none}
}

/* ── 761-860px: el escalón que faltaba (20-ago-2026) ──────────────────
   Justo encima del breakpoint de teléfono la barra vuelve a ser una isla
   horizontal, pero el ancho todavía no da: medido en producción, los cinco
   enlaces piden 418px y sólo disponen de 408. Faltando 10px, el rótulo más
   largo se parte en dos líneas y, como `.nav-links` es un flex con
   `align-items` normal, los cinco se estiran a la altura del partido: el
   enlace pasa de 37px a 58 y la isla entera de 84 a 100. El resultado era
   una barra hinchada que se comía el aire sobre el titular del hero.

   La corrección aprieta el espaciado lateral, no el tamaño de letra: los
   13px se conservan porque son el mínimo legible de la isla, y de los
   márgenes salen de sobra los 10px que faltaban. */
@media (min-width:761px) and (max-width:860px){
  .nav-envoltura{padding:12px 2.5vw}
  .nav-envoltura nav{gap:8px;padding:8px 8px 8px 10px}
  .nav-links{gap:2px}
  .nav-links a{padding:8px 7px}
  .nav-links a.solo-icono{padding:9px 9px}
  .btn-sesion{padding:10px 13px}
  /* Cinturón de seguridad: aunque el cálculo cambie con otra fuente o
     con un rótulo más largo, el enlace nunca se parte en dos líneas. */
  .nav-links a{white-space:nowrap}
}