/* ==========================================================================
   MP Travel Services — Estructura
   --------------------------------------------------------------------------
   El armazón que llevan todas las páginas y también el panel: la barra de
   arriba con el menú, el pie y el botón de WhatsApp.

   En celular el menú se convierte en un panel lateral que entra por la
   derecha; esa es la única parte del archivo que cambia de forma entre las
   dos maquetas.

   Los tokens, el vidrio y los botones vienen de `base.css`.
   ========================================================================== */

/* ==========================================================================
   HEADER
   ========================================================================== */
.header{
  position:sticky;top:0;z-index:50;
  background:var(--glass-2);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--glass-edge);
}

.header .contenedor{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);min-height:var(--alto-header);
}

.logo{display:flex;align-items:center;gap:.65rem;text-decoration:none}

.logo img{height:32px;width:auto}

.logo span{
  font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  white-space:nowrap;
}

/* Botón de tres rayas. Oculto por defecto: solo existe en celular. */
.menu-btn{
  display:none;place-content:center;gap:5px;
  width:44px;height:44px;padding:0;margin-right:-8px;
  background:none;border:0;cursor:pointer;
}

.menu-btn span{
  display:block;width:24px;height:2px;border-radius:2px;background:var(--text);
  transition:transform .3s var(--ease-out), opacity .2s var(--ease-out);
}

/* Telón detrás del panel. Vive fuera del header para poder cubrir la página
   entera sin quedar atrapado en su contexto de apilado. */
.menu-fondo{
  position:fixed;inset:0;z-index:65;
  background:rgba(20,24,28,.5);
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease-out);
}

.menu-fondo.visible{opacity:1;pointer-events:auto}

.nav{display:flex;align-items:center;gap:1.75rem}

.nav a{
  font-size:var(--t-menu);letter-spacing:.03em;color:var(--text-mut);text-decoration:none;
  transition:color .2s var(--ease-out);
}

.nav a:hover{color:var(--text)}

/* La página en la que se está se marcaba solo con negrita, y en Times la
   negrita a este cuerpo casi no se distingue. El filete de latón debajo lo
   resuelve sin subir el peso del color. */
.nav a.activo{
  color:var(--text);font-weight:700;
  padding-bottom:3px;border-bottom:1.5px solid var(--acento);
}

/* ==========================================================================
  10. FOOTER
   ========================================================================== */
/* El filete de latón separa el pie del cuerpo de la página. Va al 30% de
   opacidad: tiene que sentirse el corte, no verse la línea. */
.footer{padding:var(--space-7) 0;text-align:center}

.footer .contenedor{padding-top:var(--space-6);border-top:1px solid var(--acento-tenue)}

.footer img{width:150px;margin:0 auto var(--space-4);opacity:.7}

.footer p{margin:0;font-size:var(--t-pie);letter-spacing:.05em;color:var(--text-soft)}

/* Los cuatro enlaces legales no caben en un renglón de celular. Como lista
   flexible se parten solos, y el separador va DESPUÉS de cada enlace, no
   antes del siguiente: así al partirse el renglón nuevo empieza con una
   palabra y no con un "·" suelto. */
.pie-enlaces{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.15rem .55rem;margin:var(--space-2) 0 0;padding:0;list-style:none;
}

.pie-enlaces li{display:flex;align-items:center;gap:.55rem}

.pie-enlaces li:not(:last-child)::after{content:"·";color:var(--text-soft)}

.pie-enlaces a{display:inline-block;padding:.15rem 0}

/* El enlace del pie no se subraya de entrada: es un dato de servicio, no una
   invitación a hacer clic. */
.footer a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}

.footer a:hover{color:var(--text);border-bottom-color:var(--hair)}

/* ==========================================================================
  11. BOTÓN FLOTANTE
   ========================================================================== */
/* Relleno oscuro en vez de vidrio: es el único acceso directo a WhatsApp que
   hay en todas las páginas y, translúcido sobre fotos claras, desaparecía. */
.flotante{
  position:fixed;right:20px;bottom:20px;z-index:60;
  display:grid;place-items:center;width:60px;height:60px;border-radius:50%;
  background:var(--text);border:1px solid var(--text);
  box-shadow:var(--shadow-lg);
  transition:transform .25s var(--ease-out), background-color .25s var(--ease-out);
}

.flotante:hover{transform:translateY(-3px) scale(1.06);background:#000}

.flotante svg{
  width:27px;height:27px;stroke:#fff;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}

/* ==========================================================================
  12. RESPONSIVE
   ========================================================================== */
@media (max-width:880px){
  .nav{gap:1.15rem}
  .nav a{font-size:.95rem}
}

/* --------------------------------------------------------------------------
   Celular: el menú se vuelve un panel lateral que entra por la derecha.

   El header sube por encima del telón para que el botón de cerrar siga siendo
   tocable; el panel es hijo del header, así que sube con él y queda arriba de
   todo sin pelear por el z-index.
   -------------------------------------------------------------------------- */
@media (max-width:760px){
  /* OJO: el `backdrop-filter` del header lo convierte en bloque contenedor de
       sus hijos `position:fixed`. Con él puesto, el panel lateral se posiciona
       respecto al header y no respecto a la pantalla: si la página estaba
       desplazada hacia abajo, el panel aparecía allá arriba, fuera de vista.
       En celular el header va con fondo sólido y sin filtro, y el panel vuelve
       a anclarse a la ventana. */
  .header{
      z-index:75;background:var(--panel);
      -webkit-backdrop-filter:none;backdrop-filter:none;
    }
  /* El panel es hermano del botón dentro del header. Sin este z-index se
       pinta encima y la X para cerrar queda tapada por el propio panel. */
  .menu-btn{display:grid;position:relative;z-index:2}
  .nav{
      position:fixed;top:0;right:0;
      width:min(80vw,300px);height:100dvh;
      flex-direction:column;align-items:stretch;
      gap:0;padding:var(--space-8) var(--space-5) var(--space-5);
      background:var(--panel);
      border-left:1px solid var(--hair);box-shadow:var(--shadow-lg);
      z-index:1;
      transform:translateX(100%);visibility:hidden;
      transition:transform .35s var(--ease-out), visibility 0s linear .35s;
    }
  /* La visibilidad vuelve al instante al abrir, y espera a que termine la
       animación al cerrar: cerrado, el panel no debe recibir el tabulador. */
  .nav.abierto{
      transform:none;visibility:visible;
      transition:transform .35s var(--ease-out), visibility 0s;
    }
  .nav a{
      padding:var(--space-4) 0;font-size:var(--t-menu);letter-spacing:.14em;
      border-bottom:1px solid var(--hair);
    }
  .nav a.activo{padding-bottom:0;border-bottom-color:var(--acento)}
  .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* Con el panel abierto la página de atrás no se mueve. */
  body.menu-abierto{overflow:hidden}
  /* El botón flotante de WhatsApp se sienta en la esquina inferior derecha y
       se montaba sobre los enlaces del pie. Se los angosta para que se partan
       en dos renglones centrados y se les deja aire por debajo. */
  .pie-enlaces{max-width:17rem;margin-inline:auto;gap:.15rem 1.1rem}
  /* Partidos en dos renglones, los puntos separadores dejan de ayudar: el que
       cae al final de una línea queda colgando. El espacio ya los separa. */
  .pie-enlaces li:not(:last-child)::after{display:none}
  .footer{padding-bottom:var(--space-8)}
}

@media (max-width:560px){
  .logo span{font-size:.78rem}
}

@media (prefers-reduced-motion:reduce){
  .flotante{transition:none}
  .flotante:hover{transform:none}
}