/* ==========================================================================
   MP Travel Services — Franja de assisto
   --------------------------------------------------------------------------
   La puerta de entrada a `asistencia.html` desde el resto del sitio. Hoy la
   cargan la portada y Paquetes; sirve para cualquier página donde haga falta
   ofrecer la asistencia.

   POR QUÉ ES UN ARCHIVO APARTE Y NO ESTÁ EN `asistencia.css`
   Ese otro archivo son 14 KB con la zona entera —portada, barras, fichas,
   plegables—, y acá no se usa nada de eso. Cada página carga solo lo que usa,
   que es la regla del sitio; esta franja es un kilobyte.

   POR QUÉ YA NO ES UN BLOQUE FUCSIA
   Antes era una banda de #DA0F62 a todo lo ancho, con texto blanco, nubes y
   un botón blanco. Se veía, sí: se veía DEMASIADO. En una página de papel
   tibio, tinta y latón, un bloque de fucsia saturado no se lee como "otra
   marca", se lee como un banner de publicidad pegado encima —de esos que uno
   aprende a saltarse—. Y encima aterrizaba justo debajo de las
   especialidades, que son tres filetes finos: el salto de una cosa a la otra
   partía la página en dos.

   Así que se invirtió el peso. La franja adopta el idioma del sitio —filetes
   de latón arriba y abajo, la misma serif, el mismo cheurón que las
   especialidades— y el fucsia no aparece en ninguna parte: hasta el logo va
   monocromo, del color de la tinta (ver más abajo el porqué).

   La marca se sigue reconociendo, porque un logotipo se reconoce por su forma
   antes que por su color, y porque el texto la nombra. Lo que se pierde es la
   pelea con la página que la aloja.

   El color de assisto empieza al cruzar a `asistencia.html`. Que aparezca ahí
   y no antes es lo que lo convierte en un umbral —se entra a otra marca— en
   vez de en una interrupción.
   ========================================================================== */

/* Sin fondo y sin ancho completo: es un renglón de la página, no una banda
   encima de ella. Los filetes son los mismos de `.esp` en la portada, así que
   la franja se lee como el último elemento de esa misma lista y no como algo
   que empieza después. */
.az-franja{
  padding:var(--space-5) 0;
  border-top:1px solid var(--acento-tenue);
  border-bottom:1px solid var(--acento-tenue);
}

.az-franja-caja{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--space-3);
}

/* EL LOGO VA EN TINTA, NO EN FUCSIA.
   Reducir la franja a un solo punto de color no alcanzó: sobre papel tibio,
   un logotipo fucsia de 150px sigue siendo lo primero —y a veces lo único—
   que se ve de la página, y el resto del diseño se acomoda alrededor de esa
   mancha. Un acento deja de ser un acento cuando es lo más fuerte que hay.

   Así que en la portada y en Paquetes el logo va monocromo, del color de la
   tinta del sitio. El fucsia de assisto aparece al cruzar a
   `asistencia.html`, que es donde empieza su zona: ahí el cambio de paleta
   se lee como un umbral —otra marca, otro producto— y no como un choque.

   POR QUÉ SE FILTRA EL LOGO FUCSIA Y NO SE USA EL BLANCO
   El blanco invertido daría un negro más limpio, pero si el filtro no se
   aplica —CSS que no carga, un navegador raro— quedaría un logo blanco
   invisible sobre papel blanco. Filtrando el fucsia, el peor caso es el logo
   en su color original: exactamente lo que había antes, que se ve. Se falla
   hacia el lado que no rompe nada.

   La cuenta: #DA0F62 en escala de grises da ~#404040, y el brillo al 50% lo
   deja en ~#202020 —a un pelo de la tinta #17282D del sitio—. */
.az-franja-logo{
  width:132px;height:auto;display:block;
  filter:grayscale(1) brightness(.5);
}

/* La serif del sitio, no la de assisto. Acá la que habla es MP Travel
   ofreciendo un servicio; la voz de assisto empieza en `asistencia.html`, que
   es donde se cruza el umbral. */
.az-franja-texto{
  margin:0;max-width:56ch;
  font-size:var(--t-apoyo);line-height:1.6;
  color:var(--text-mut);
  text-wrap:pretty;
}

.az-franja-texto b{color:var(--text);font-weight:700}

/* Ya no es un botón: es un enlace con cheurón, el mismo de las
   especialidades. Un botón relleno acá volvería a pedir el turno que la
   franja justamente no tiene que pedir —la página sigue siendo la portada, y
   sus botones son "Ver paquetes" y "Contactar"—. */
.az-franja-btn{
  flex:none;
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) 0;
  color:var(--text);text-decoration:none;
  font-size:var(--t-rotulo);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid var(--acento-tenue);
  transition:border-color .3s var(--ease-out);
}

.az-franja-btn:hover{border-bottom-color:var(--acento)}

/* Cheurón hecho con dos bordes de un cuadrado girado, igual que en el resto
   del sitio: no se carga una fuente de iconos por una flechita. */
.az-franja-btn::after{
  content:"";flex:none;
  width:7px;height:7px;
  border-right:1.5px solid var(--acento);
  border-top:1.5px solid var(--acento);
  transform:rotate(45deg);
  transition:transform .3s var(--ease-out);
}

.az-franja-btn:hover::after{transform:rotate(45deg) translate(3px,-3px)}

.az-franja-btn:focus-visible{outline:2px solid var(--acento);outline-offset:4px}

/* ==========================================================================
   ESCRITORIO — el logo y el texto en línea, el enlace contra el borde
   ========================================================================== */
@media (min-width:960px){
  .az-franja{padding:var(--space-6) 0}

  .az-franja-caja{
    flex-direction:row;align-items:center;
    gap:clamp(24px,4vw,56px);
  }

  .az-franja-logo{width:148px}

  .az-franja-texto{flex:1}
}

@media (prefers-reduced-motion:reduce){
  .az-franja-btn,.az-franja-btn::after{transition:none}
  .az-franja-btn:hover::after{transform:rotate(45deg)}
}