/* ==========================================================================
   MP Travel Services — Paquetes
   --------------------------------------------------------------------------
   La rejilla de flyers y el botón flotante de cotizar.

   Solo la carga `paquetes.html`. El visor que abre los flyers en grande vive
   aparte, en `visor.css`, porque la galería lo usa igual.

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

/* ==========================================================================
   PAQUETES
   ========================================================================== */
.paquetes{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-4)}

/* El flyer iba montado sobre una placa de vidrio: un marco blanco alrededor,
   con su borde y su sombra. Un flyer ya es un rectángulo lleno de color y de
   tipografía; encerrarlo en otro rectángulo lo empequeñece y llena la página
   de bordes. Ahora la imagen se apoya sola sobre el papel, como en la galería,
   y el título va debajo. */
.paquete{
  flex:1 1 290px;max-width:352px;
  transition:transform .3s var(--ease-out);
}

/* Lo de ser botón sin aspecto de botón ya lo resuelve `.abre-visor` en
   `visor.css`; acá solo se le da el recorte y la sombra. */
.paquete .abre-visor{
  border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .3s var(--ease-out);
}

.paquete:hover{transform:translateY(-4px)}

.paquete:hover .abre-visor{box-shadow:var(--shadow-lg)}

.paquete img{width:100%;aspect-ratio:1/1;object-fit:cover}

/* El nombre, debajo del flyer y sin nada encima: la foto ya separa un paquete
   del siguiente y una regla ahí era una raya de más.

   El cuerpo se achica en pantallas angostas en vez de salir del token: en
   versalitas y con interletraje, un nombre largo —"Día de Muertos, México"—
   llegaba justo al borde de la caja en un celular de 320px, y cualquier nombre
   un poco más largo que los de hoy se salía. `overflow-wrap` es el seguro para
   una palabra sola que no entre de ningún modo. */
.paquete h3{
  margin:var(--space-3) 0 0;
  font-size:clamp(.95rem,2.6vw,var(--t-titulo));
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  line-height:1.35;text-wrap:balance;overflow-wrap:anywhere;
}

/* --- Celular --------------------------------------------------------------
   Dos correcciones, las dos de aire y ninguna de alineación: el nombre sigue
   a la izquierda.

   La sangría lo despega del filo. Arrancaba clavado en el borde izquierdo de
   la imagen y, con las esquinas redondeadas del flyer, la letra se leía por
   fuera del cuadro; de paso le quita 32px de ancho, así que un nombre largo
   parte en dos renglones antes de llegar al borde derecho.

   Y sube: entre un flyer y el siguiente hay 24px, y con el nombre a la misma
   distancia de los dos quedaba flotando en el medio, sin pertenecer a ninguno.
   Con 12px arriba se apoya en su propia foto y respira del lado de abajo, que
   es lo que hace que se lea como el pie de ESE flyer y no como el título del
   que viene.

   En escritorio no va: ahí la tarjeta tiene su propio relleno y el nombre se
   alinea con el borde del flyer. */
@media (max-width:959px){
  .paquete h3{
    margin-top:calc(var(--space-3) - var(--space-1));
    padding-inline:var(--space-3);
  }
}

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

/* Botón de cotizar dentro de la tarjeta de paquete. Ancho completo y con
   relleno oscuro: es la acción de la tarjeta, tiene que ganarle a la foto. */
.paquete .cotizar{
  display:flex;
  margin:var(--space-3) 0 0;
  padding:.8rem 1rem;font-size:.85rem;letter-spacing:.08em;
}

/* Botón de cotizar de la sección de paquetes. La esquina la ocupa el flotante
   de WhatsApp (60px de ancho), así que este se corre a su izquierda y se
   alinea con su centro. */
.cotizar-flotante{
  position:fixed;right:92px;bottom:28px;z-index:60;
  padding:.8rem 1.6rem;border-radius:var(--r-pill);
  background:var(--text);color:#fff;border:1px solid var(--text);
  font-size:.84rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;box-shadow:var(--shadow-lg);
  transition:transform .25s var(--ease-out), background-color .25s var(--ease-out);
}

.cotizar-flotante:hover{transform:translateY(-2px);background:var(--tinta-honda)}

@media (max-width:560px){
  .cotizar-flotante{right:88px;padding:.7rem 1.2rem;font-size:.78rem}
}

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

/* --- Escritorio ---------------------------------------------------------
   Por qué el corte va en 960px de ancho y no por tipo de puntero: ver la
   cabecera de base.css. En resumen, es lo que hace que el "Sitio de
   escritorio" del celular reciba también esta maqueta.
   ----------------------------------------------------------------------- */
@media (min-width:960px){
  /* --- Paquetes ------------------------------------------------------------
       Las tarjetas crecen y la rejilla se muda al carril amplio: con el tamaño
       de celular, cinco paquetes en 1140px dejaban tres arriba y dos abajo con
       un hueco marcado a los lados.
       Sigue siendo flex y no un grid de columnas fijas porque la cantidad de
       paquetes la decide el panel: flex centra sola la última fila, sea de uno,
       de dos o de tres. Un grid dejaría el hueco siempre del mismo lado. */
  .paquete{flex-basis:360px;max-width:404px;padding:var(--space-3)}
  .paquete h3{
      margin:var(--space-4) var(--space-2) var(--space-3);
      font-size:1rem;letter-spacing:.14em;
    }
}