/* ============================================================
   layout.css
   Lo que se repite en las 6 paginas: barra de arriba, pie y boton flotante.
   Parte de la hoja del sitio. Ver README para el orden de carga.
   ============================================================ */

/* ---------- NAV: LA BARRA DE ARRIBA ----------
   El logo y los enlaces. Se queda pegada arriba al bajar
   (eso es "sticky"), para que siempre puedas navegar.
   En celular se parte en dos filas: logo arriba, enlaces abajo.
   -------------------------------------------------------- */
header.nav{
  position:sticky; top:0; z-index:50;
  background:var(--azul-soft);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
  max-width:1160px; margin:0 auto;
}
/* ---------- EL LOGO DEL CLIENTE ----------
   Desde el 2 de septiembre la barra lleva el logo como imagen, no como texto.
   El nombre sigue leyéndose para Google y para los lectores de pantalla por el
   alt de la imagen.

   El archivo llegó de 1536x1024 y 1013 KB, sin transparencia y con el 43% del
   alto en margen blanco. Se reprocesó: recortado al dibujo, con el blanco
   vuelto transparente y reescalado a 600 px de ancho. Quedó en 23 KB.
   El original sin tocar es `assets/fotos/logo-original.png`, fuera del repo.

   El renglón "TOURS · MAHAHUAL" venía dentro del dibujo y se recortó a
   propósito: a la altura de la barra medía 4.5 px, o sea una manchita gris.
   Esa línea la vuelve a escribir el sitio como texto, aquí abajo, y así se ve
   nítida a cualquier tamaño. */
.logo{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-decoration:none; }
.logo img{ display:block; height:42px; width:auto; }
/* En celular la barra se parte en dos filas; el logo se achica para no comerse
   el ancho de la fila de arriba. */
@media(max-width:479px){ .logo img{ height:34px; } }
.logo small{ display:block; font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--azul); }
.nav-links{ display:flex; align-items:center; gap:26px; font-weight:600; font-size:14.5px; }
.nav-links a{ text-decoration:none; opacity:.8; padding-bottom:3px; border-bottom:2px solid transparent; }
.nav-links a:hover{ opacity:1; }
.nav-links a.active{ opacity:1; border-bottom-color: var(--page-accent, var(--rosa)); }
.nav-cta{ display:none; }
/* 880 y no 760: la pastilla ES/EN ocupa ~92px, y con el CTA visible antes de
   eso el logo se queda sin ancho y se parte en dos líneas. */
@media(min-width:880px){ .nav-cta{ display:inline-flex; } }
.nav-links .mobile-hide{ display:none; }
@media(min-width:640px){ .nav-links .mobile-hide{ display:inline; } }
/* Abajo de 640px la barra pasa a DOS FILAS: el logo arriba y los enlaces
   completos abajo. Antes los enlaces se escondían con .mobile-hide y en celular
   sólo quedaba "Contacto", así que desde tours.html no había manera de volver a
   Inicio o a Tours salvo por el logo. Dos filas lo resuelve sin JavaScript ni
   menú hamburguesa, y con la ventaja de que las opciones se ven sin tocar nada. */
@media(max-width:639px){
  .nav-inner{ flex-wrap:wrap; row-gap:8px; padding:12px 20px; }
  .nav-links{ width:100%; justify-content:space-between; gap:8px; font-size:14px; }
  .nav-links .mobile-hide{ display:inline; }
}

/* Selector de idioma: par de píldoras ES/EN. Vive dentro de .nav-links, así que
   hay que neutralizar el subrayado que esa regla le pone a los enlaces activos. */
.lang-switch{
  display:inline-flex; align-items:center; gap:2px;
  border:1.5px solid var(--line); border-radius:999px; padding:2px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em;
}
.nav-links .lang-switch a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:34px; min-width:34px; padding:0 8px;
  border-radius:999px;
  border-bottom:none; opacity:.65; font-weight:600;
}
.nav-links .lang-switch a:hover{ opacity:1; }
.nav-links .lang-switch a.active{
  background:var(--azul); color:var(--paper-light);
  opacity:1; border-bottom-color:transparent;
}
/* Al agregar la pastilla, el logo se quedaba sin ancho y la línea
   TOURS · MAHAHUAL lo partía en dos renglones. Se aprieta el nav en pantallas
   chicas para que el logo siga en una sola línea. */
@media(max-width:900px){ .nav-links{ gap:16px; } }
@media(max-width:520px){
  .logo{ font-size:19px; }
  .logo small{ font-size:9.5px; letter-spacing:.08em; }
  .nav-links{ gap:12px; }
}

/* ---------- FOOTER: EL PIE DE PÁGINA ----------
   La franja azul oscuro del final, igual en las 6 páginas:
   nombre, datos de contacto, enlaces y el aviso de copyright.
   ------------------------------------------- */
footer{ background:var(--azul-deep); color:rgba(247,250,253,0.9); padding:64px 0 40px; }
.footer-grid{ display:grid; gap:36px; }
@media(min-width:760px){ .footer-grid{ grid-template-columns:1.2fr 0.8fr 0.8fr; } }
footer h3{ color:var(--paper-light); font-size:20px; }
footer .foot-logo{ font-family:'Fraunces',serif; font-weight:700; font-size:24px; color:var(--paper-light); }
footer p{ font-size:14.5px; margin-top:14px; opacity:.8; max-width:34ch; }
.foot-links{ list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px; font-size:14.5px; }
.foot-links a{ text-decoration:none; opacity:.85; }
.foot-links a:hover{ opacity:1; }
.foot-bottom{ margin-top:56px; padding-top:22px; border-top:1px solid rgba(247,250,253,0.15); font-size:12.5px; opacity:.8; font-family:'IBM Plex Mono',monospace; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; }

/* ---------- BOTÓN FLOTANTE DE WHATSAPP ----------
   El círculo rosa de la esquina inferior derecha. "fixed"
   significa que no se mueve al hacer scroll: siempre está ahí.
   Es el atajo más importante del sitio, porque toda la
   reservación pasa por WhatsApp.
   --------------------------------------------- */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:58px; height:58px; border-radius:50%;
  background:var(--rosa); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -8px rgba(180,0,95,0.7);
  text-decoration:none;
  transition:transform .18s ease;
}
.wa-float:hover{ transform:scale(1.07); }
.wa-float svg{ width:28px; height:28px; }