/* ==========================================================================
   MP Travel Services — Asistencia al viajero (assisto)
   --------------------------------------------------------------------------
   LA IDEA: no es otra web, es otra habitación.

   MP Travel es Representación Nacional de assisto en Costa Rica, así que este
   apartado tiene que leerse como un producto con marca propia y no como una
   página más del sitio. Pero el encabezado, el menú y el pie NO se tocan: si
   también cambiaran, el visitante creería que se fue a otro sitio en vez de
   haber entrado a un apartado.

   El cambio de registro pasa entero dentro de `.az` (assisto zone) y se apoya
   en tres cosas, en este orden de importancia:

     1. LA LETRA. El sitio es Times New Roman de punta a punta; acá se pasa a
        una sans de sistema. Es lo que más se nota y lo que menos cuesta:
        ninguna fuente externa que cargar, igual que en el resto del sitio.
     2. EL FONDO. Blanco puro, no el papel #F5F2ED. Ver la nota de contraste.
     3. EL COLOR. El fucsia de assisto, y va donde tiene que ir: rótulos,
        títulos y elementos gráficos. Nunca en un párrafo largo.

   CONTRASTE — POR QUÉ EL FONDO ES BLANCO Y NO PAPEL
   El fucsia de la marca es #DA0F62, medido sobre las zonas planas de cuatro
   flyers originales (la banda de "Nuestros productos", el globo de texto de
   "¿Sabes por qué necesitás asistencia?", y dos más).

     sobre blanco #FFFFFF   4.97:1   pasa AA
     sobre papel  #F5F2ED   4.45:1   NO pasa AA

   Son cinco centésimas, pero el mínimo es el mínimo. Por eso `.az` pinta su
   propio fondo blanco en vez de dejar ver el papel del sitio. Y aun así el
   fucsia no se usa para texto corrido: los párrafos van en `--a-tinta`.

   Si alguien cambia el fucsia, que vuelva a medir las dos cifras.

   ORDEN DE CARGA: base, estructura, paginas, y este al final. Necesita pisar
   a `paginas.css` en las secciones que comparten nombre.
   ========================================================================== */

/* ==========================================================================
   LA ZONA — tokens propios
   Se declaran acá adentro y no en :root a propósito: fuera de `.az` el sitio
   sigue siendo papel, tinta y latón, y nada de esto existe.
   ========================================================================== */
.az{
  --a-fucsia:  #DA0F62;   /* la marca — 4.97:1 sobre blanco */
  --a-honda:   #A50B4A;   /* fucsia hondo: enlaces y :hover — 8.1:1 */
  --a-rosa:    #FCE7F1;   /* rosa de fondo, el de los flyers */
  --a-rosa-t:  #FDF4F8;   /* rosa aún más lavado, para franjas enteras */
  --a-tinta:   #2A2A2E;   /* el gris casi negro del texto de assisto */
  --a-mut:     #56565E;   /* texto secundario — 7.2:1 sobre blanco */
  --a-gris:    #EFEFEF;   /* el gris de las tarjetas de los flyers */
  --a-borde:   rgba(42,42,46,.12);

  /* Sans de sistema. assisto usa una geométrica redondeada; no se puede
     cargar la suya, pero cualquier sans junto a la serif del sitio ya marca
     que esto es otra cosa. Cero peticiones externas, igual que el resto. */
  --a-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, sans-serif;

  background:#fff;
  color:var(--a-tinta);
  font-family:var(--a-font);
}

/* El sitio pone el cuerpo en serif; acá dentro manda la sans. */
.az p,.az li,.az dd,.az dt,.az h2,.az h3,.az h4,.az summary,.az .az-btn{
  font-family:var(--a-font);
}

.az h2,.az h3,.az h4{letter-spacing:-.01em;text-wrap:balance}

/* ==========================================================================
   PORTADA DE LA ZONA
   El umbral: en cuanto se cruza, se ve el logo de assisto sobre una foto de
   sus propias piezas. Es lo que avisa que empieza otro producto.
   ========================================================================== */
.az-portada{
  position:relative;isolation:isolate;
  padding:var(--space-7) var(--space-4) var(--space-6);
  background:var(--a-fucsia);
  overflow:hidden;
  text-align:center;
}

/* La foto va de fondo, oscurecida lo justo para que el logo blanco y el
   claim se lean encima sin depender de dónde caiga el sujeto. */
.az-portada::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url("../assets/assisto/portada.jpg") center/cover no-repeat;
  opacity:.42;
}

/* Un velo de fucsia sobre la foto: es lo que ata la imagen al color de la
   marca en vez de dejarla como una foto cualquiera detrás de un texto. */
.az-portada::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(218,15,98,.55) 0%,
    rgba(218,15,98,.30) 45%,
    rgba(218,15,98,.80) 100%);
}

.az-logo{
  width:min(260px,64vw);height:auto;
  margin:0 auto var(--space-4);display:block;
}

.az-claim{
  margin:0 auto;max-width:22ch;
  color:#fff;font-size:clamp(1.5rem,6vw,2rem);font-weight:700;
  line-height:1.2;letter-spacing:-.02em;
  text-wrap:balance;
}

.az-claim-sub{
  margin:var(--space-3) auto 0;max-width:44ch;
  color:rgba(255,255,255,.92);font-size:var(--t-apoyo);line-height:1.55;
}

/* El sello de representación. Va en la portada porque es lo que separa a
   MP Travel de cualquiera que revenda la marca por su cuenta. */
.az-sello{
  display:inline-flex;align-items:center;gap:var(--space-2);
  margin-top:var(--space-5);padding:var(--space-2) var(--space-4);
  border:1px solid rgba(255,255,255,.55);border-radius:var(--r-pill);
  color:#fff;font-size:var(--t-rotulo);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
}

/* --- Las nubes -----------------------------------------------------------
   Los flyers de assisto llevan nubes rosadas y blancas. Acá se dibujan con
   CSS en vez de recortarlas de un JPEG: pesan cero, no se pixelan y no
   arrastran el texto que traían quemado encima.

   Van detrás de todo (`z-index:-1` dentro de la portada) y decorativas: el
   contenedor lleva aria-hidden. */
.az-nubes{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}

.az-nube{
  position:absolute;
  background:radial-gradient(circle at 50% 60%,
    rgba(255,255,255,.85) 0%, rgba(255,255,255,.5) 45%, rgba(255,255,255,0) 70%);
  border-radius:50%;
  filter:blur(2px);
}

.az-nube-1{width:220px;height:110px;top:8%;left:-6%}
.az-nube-2{width:300px;height:140px;bottom:6%;right:-10%;opacity:.7}
.az-nube-3{width:150px;height:80px;top:24%;right:12%;opacity:.55}

/* ==========================================================================
   SECCIONES DE LA ZONA
   ========================================================================== */
.az-seccion{padding:var(--space-7) 0}

.az-seccion + .az-seccion{border-top:1px solid var(--a-borde)}

/* Una franja en rosa lavado, para cortar el blanco cuando dos secciones
   seguidas empiezan a parecer la misma. */
.az-seccion.es-rosa{background:var(--a-rosa-t);border-top:0}

.az-rotulo{
  display:block;margin-bottom:var(--space-3);
  color:var(--a-fucsia);font-size:var(--t-rotulo);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
}

.az-seccion h2{
  margin:0 0 var(--space-4);
  font-size:clamp(1.5rem,5.5vw,2rem);font-weight:700;line-height:1.22;
}

.az-seccion p{margin:0 0 var(--space-3);color:var(--a-mut);line-height:1.6}

.az-seccion p:last-child{margin-bottom:0}

.az-lead{
  font-size:clamp(1.1rem,3.4vw,1.3rem)!important;
  color:var(--a-tinta)!important;line-height:1.5!important;
  max-width:52ch;
}

.az-seccion strong{color:var(--a-tinta);font-weight:700}

/* ==========================================================================
   LOS CASOS MÁS COMUNES — barras
   --------------------------------------------------------------------------
   El dato viene de la pieza "Casos de asistencia más comunes" de assisto.
   Ahí es un gráfico de torta; acá son barras, que es lo correcto: la torta
   obliga a comparar ángulos y con cinco porciones —dos de ellas de 10% y
   8%— no se distingue cuál es mayor. En barras ordenadas de mayor a menor
   se lee de un golpe y además entra en una columna de celular.

   Una sola serie, así que un solo color y ninguna leyenda: el número va
   escrito al lado de cada barra. El texto va en tinta, nunca en fucsia —el
   color lo lleva la barra, que es lo que identifica al dato.
   ========================================================================== */
.az-casos{margin:0;padding:0;list-style:none;max-width:60ch}

.az-caso{
  display:grid;gap:var(--space-1);
  padding:var(--space-3) 0;
  border-bottom:1px solid var(--a-borde);
}

.az-caso:last-child{border-bottom:0}

.az-caso-fila{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}

.az-caso-nombre{font-weight:700;font-size:var(--t-apoyo)}

.az-caso-cifra{
  flex:none;color:var(--a-tinta);font-weight:700;
  font-size:1.15rem;font-variant-numeric:tabular-nums;
}

/* El riel es el 100%; la barra, la parte. Punta redondeada de 4px y anclada
   a la izquierda, para que el largo se lea desde un origen común. */
.az-caso-riel{height:8px;border-radius:var(--r-pill);background:var(--a-gris)}

.az-caso-barra{
  height:100%;border-radius:var(--r-pill);
  background:var(--a-fucsia);
  min-width:4px;
}

.az-caso-nota{color:var(--a-mut);font-size:var(--t-pie);line-height:1.5}

/* ==========================================================================
   SELLOS — los cuatro datos duros de la cobertura
   ========================================================================== */
.az-sellos{
  display:grid;gap:var(--space-3);
  margin:var(--space-5) 0 0;padding:0;list-style:none;
}

.az-sello-item{
  padding:var(--space-4);
  background:var(--a-gris);border-radius:var(--r-md);
}

.az-sello-item b{display:block;margin-bottom:2px;font-size:var(--t-apoyo)}

.az-sello-item span{color:var(--a-mut);font-size:var(--t-pie);line-height:1.5}

/* ==========================================================================
   LOS PLANES
   Nombres en fucsia, sobre gris. No hay precios en ninguna pieza de assisto
   —todas mandan a consultar con el asesor—, así que acá tampoco: el llamado
   es a cotizar.
   ========================================================================== */
.az-familia + .az-familia{margin-top:var(--space-6)}

.az-familia h3{
  margin:0 0 var(--space-2);font-size:1.15rem;font-weight:700;
}

.az-familia > p{margin:0 0 var(--space-4);color:var(--a-mut);font-size:var(--t-apoyo)}

.az-planes{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;list-style:none}

.az-plan{
  padding:var(--space-2) var(--space-4);
  background:var(--a-rosa);border-radius:var(--r-pill);
  color:var(--a-honda);font-weight:700;font-size:var(--t-apoyo);
  white-space:nowrap;
}

/* ==========================================================================
   FICHAS — los agregados con foto (prótesis, mascotas, electrónicos)
   ========================================================================== */
.az-fichas{display:grid;gap:var(--space-5);margin:var(--space-5) 0 0;padding:0;list-style:none}

.az-ficha{
  overflow:hidden;
  background:#fff;border:1px solid var(--a-borde);border-radius:var(--r-lg);
}

.az-ficha img{display:block;width:100%;height:180px;object-fit:cover}

.az-ficha-texto{padding:var(--space-4)}

.az-ficha h3{margin:0 0 var(--space-2);font-size:1.05rem;font-weight:700}

.az-ficha p{margin:0;color:var(--a-mut);font-size:var(--t-apoyo);line-height:1.55}

.az-ficha .az-tope{
  display:inline-block;margin-top:var(--space-3);
  color:var(--a-honda);font-weight:700;font-size:var(--t-pie);
}

/* ==========================================================================
   PLEGABLES
   El sitio ya tiene este patrón en `documento.css` para las páginas legales.
   Acá se repite la mecánica —un <details> por renglón, separados por un
   filete— pero con la ropa de assisto: sin el rombo de latón, con el
   cheurón en fucsia y la letra en sans.

   Van DEBAJO de la información principal: arriba queda lo que hay que leer
   sí o sí, y acá se guarda el detalle de quien quiere más.
   ========================================================================== */
.az-plegables{max-width:78ch}

.az-articulo{
  border-top:1px solid var(--a-borde);
  scroll-margin-top:calc(var(--alto-header) + var(--space-4));
}

.az-articulo:last-of-type{border-bottom:1px solid var(--a-borde)}

.az-articulo > summary{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) 0;
  list-style:none;cursor:pointer;
  font-weight:700;font-size:1.05rem;
  transition:color .25s var(--ease-out);
}

.az-articulo > summary::-webkit-details-marker{display:none}

.az-articulo > summary:hover{color:var(--a-fucsia)}

.az-articulo > summary:focus-visible{outline:2px solid var(--a-fucsia);outline-offset:3px}

.az-articulo > summary span{flex:1}

/* Cheurón: dos bordes de un cuadrado girado, como en el resto del sitio. */
.az-articulo > summary::after{
  content:"";flex:none;width:9px;height:9px;
  border-right:2px solid var(--a-fucsia);
  border-bottom:2px solid var(--a-fucsia);
  transform:translateY(-3px) rotate(45deg);
  transition:transform .3s var(--ease-out);
}

.az-articulo[open] > summary::after{transform:translateY(2px) rotate(-135deg)}

.az-cuerpo{padding:0 0 var(--space-5)}

.az-cuerpo > :last-child{margin-bottom:0}

.az-cuerpo p{margin:0 0 var(--space-3);color:var(--a-mut);line-height:1.6;font-size:var(--t-apoyo)}

.az-cuerpo h4{margin:var(--space-4) 0 var(--space-2);font-size:1rem;font-weight:700;color:var(--a-tinta)}

.az-cuerpo > h4:first-child{margin-top:0}

.az-cuerpo ul{margin:0 0 var(--space-3);padding-left:1.15rem;color:var(--a-mut);font-size:var(--t-apoyo)}

.az-cuerpo li{margin-bottom:var(--space-2);line-height:1.55}

.az-cuerpo li:last-child{margin-bottom:0}

.az-cuerpo a{color:var(--a-honda);text-decoration:none;border-bottom:1px solid rgba(165,11,74,.35)}

.az-cuerpo a:hover{border-bottom-color:var(--a-honda)}

/* Pasos numerados de "cómo pedir asistencia" */
.az-pasos{margin:0;padding-left:1.3rem;color:var(--a-mut);font-size:var(--t-apoyo)}

.az-pasos li{margin-bottom:var(--space-3);line-height:1.55}

.az-pasos li::marker{color:var(--a-fucsia);font-weight:700}

/* ==========================================================================
   CONTACTO DE LA REPRESENTACIÓN
   ========================================================================== */
.az-contacto{
  padding:var(--space-6) var(--space-4);
  background:var(--a-rosa);border-radius:var(--r-lg);
  text-align:center;
}

.az-contacto .az-rotulo{margin-bottom:var(--space-2)}

.az-contacto h2{margin:0 0 var(--space-2);font-size:1.3rem}

.az-contacto-nombre{margin:0 0 var(--space-4)!important;color:var(--a-tinta)!important;font-weight:700}

.az-datos{display:grid;gap:var(--space-3);margin:0;text-align:left;max-width:34ch;margin-inline:auto}

.az-datos dt{
  color:var(--a-fucsia);font-size:var(--t-rotulo);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
}

.az-datos dd{margin:2px 0 0;font-size:var(--t-apoyo)}

.az-datos dd a{color:var(--a-tinta);text-decoration:none;border-bottom:1px solid var(--a-borde);word-break:break-word}

.az-datos dd a:hover{border-bottom-color:var(--a-honda);color:var(--a-honda)}

/* ==========================================================================
   BOTÓN
   El del sitio es de tinta; este es de assisto, y solo vive acá adentro.
   ========================================================================== */
.az-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:var(--space-3) var(--space-6);
  border:0;border-radius:var(--r-pill);
  background:var(--a-fucsia);color:#fff;
  font-weight:700;font-size:var(--t-apoyo);text-decoration:none;
  cursor:pointer;
  transition:background .25s var(--ease-out),transform .25s var(--ease-out);
}

.az-btn:hover{background:var(--a-honda);transform:translateY(-1px)}

.az-btn:focus-visible{outline:2px solid var(--a-tinta);outline-offset:3px}

.az-btn-2{background:transparent;color:var(--a-honda);border:1.5px solid var(--a-fucsia)}

.az-btn-2:hover{background:var(--a-rosa);color:var(--a-honda)}

.az-acciones{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)}

/* Aclaración corta debajo de los botones: por qué los planes no llevan precio
   y qué hace falta para cotizarlos. No es letra chica —eso es `az-legal`, y
   tiene otro peso—: es una instrucción, y se lee.

   Lleva el mismo aire que hay sobre los botones (`az-acciones` abre con
   `space-5`). Con la mitad quedaba pegada al botón y se leía como su pie, no
   como lo que es: una aclaración que vale por sí sola. */
.az-nota{
  max-width:60ch;margin:var(--space-5) 0 0;
  color:var(--a-mut);font-size:var(--t-apoyo);line-height:1.6;
}

/* La letra chica de assisto: es la que aclara que no es una empresa de
   seguros. No se esconde ni se achica hasta lo ilegible. */
.az-legal{
  margin-top:var(--space-6);padding-top:var(--space-4);
  border-top:1px solid var(--a-borde);
  color:var(--a-mut);font-size:var(--t-pie);line-height:1.6;
}

/* ==========================================================================
   MAQUETA DE ESCRITORIO
   No es la de celular estirada: acá el ancho se reparte en dos carriles.
   ========================================================================== */
@media (min-width:960px){
  .az-portada{padding:clamp(72px,7vw,120px) var(--space-4)}

  .az-logo{width:320px}

  .az-nube-1{width:340px;height:170px}
  .az-nube-2{width:460px;height:210px}
  .az-nube-3{width:240px;height:120px}

  .az-seccion{padding:clamp(64px,6vw,104px) 0}

  /* Título a la izquierda, contenido a la derecha: el mismo gesto de romper
     el eje que usan Nosotros y Paquetes en pantalla ancha. */
  .az-doble{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
            column-gap:clamp(48px,6vw,96px);align-items:start}

  .az-doble > h2{margin-top:0}

  .az-sellos{grid-template-columns:1fr 1fr}

  .az-fichas{grid-template-columns:repeat(3,1fr)}

  .az-ficha img{height:200px}

  .az-contacto{padding:var(--space-7)}

  .az-datos{grid-template-columns:1fr 1fr;max-width:none;gap:var(--space-4)}
}

/* ==========================================================================
   MOVIMIENTO
   Quien pidió menos movimiento en el sistema no quiere que el botón salte.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .az-btn,.az-articulo > summary::after{transition:none}
  .az-btn:hover{transform:none}
}