/* ==========================================================================
   MP Travel Services — Portada
   --------------------------------------------------------------------------
   La pantalla de inicio: el logo suelto, el lema y el abanico de flyers.

   Son DOS tramos, no uno. Antes la portada estaba clavada a una pantalla con
   `overflow:hidden` y no había absolutamente nada que desplazar; el visitante
   que baja por reflejo —que es casi todo el mundo— se encontraba con una
   página muerta. Ahora debajo hay un segundo tramo corto con las tres
   especialidades, que además son la puerta a Paquetes. Es a propósito que sea
   corto: alcanza para que el gesto tenga respuesta, sin convertir la portada
   en una página larga.

   Ese tramo eran tres renglones de texto y nada más, y bajar no daba nada a
   cambio. Ahora cada renglón es una franja con foto, y la foto se abre de
   izquierda a derecha a medida que el renglón sube: el movimiento lo manda el
   desplazamiento, no un reloj, así que el visitante lo controla. Sin fotos
   grandes ni cajas de vidrio; el peso lo lleva la imagen y el resto es papel.

   Solo la carga `index.html`.

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

/* La portada mide exactamente una pantalla —descontando el header, que es
   sticky— y el resto de la página crece por debajo. */
body.inicio{min-height:100dvh;display:flex;flex-direction:column}

/* El hijo flex de body es <main>, no .landing: la altura se reparte acá. */
body.inicio main{flex:1 1 auto;display:flex;flex-direction:column}

/* Dos filas: el contenido se centra en lo que sobra y el aviso de bajar se
   queda pegado al borde inferior de la pantalla, que es donde se lo busca. */
.landing{
  flex:0 0 auto;
  min-height:calc(100dvh - var(--alto-header));
  display:grid;grid-template-rows:1fr auto;align-items:center;
  padding:var(--space-4) 0 var(--space-5);
}

.landing-grid{
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:var(--space-7);
}

/* El <h1> solo envuelve el logo: no aporta tamaño de letra ni márgenes
   propios, para que la portada se vea igual que antes de tenerlo. */
.landing-titulo{margin:0;font-size:inherit;line-height:0}

.landing-logo{width:min(100%,320px)}

.lema{
  margin:var(--space-5) 0 0;
  font-family:var(--font);
  font-size:clamp(1.6rem,3vw,2.35rem);font-weight:400;line-height:1.25;
  color:var(--text-mut);
}

/* Sin `display:flex` el `justify-content` de abajo no hacía nada y los dos
   botones solo estaban separados por el espacio en blanco del HTML. */
.hero-acciones{display:flex;flex-wrap:wrap;gap:var(--space-3)}

.landing .hero-acciones{justify-content:flex-start;margin-top:var(--space-6)}


/* --------------------------------------------------------------------------
   ABANICO DE FOTOS
   Tres cartas, pero los paquetes suelen ser más: `publico.js` va cambiando
   una carta cada tanto para que ninguno se quede sin salir nunca. De ahí que
   las imágenes se apilen —van absolutas dentro de la carta— en vez de ir una
   sola: durante el cambio conviven dos y la nueva se funde encima de la vieja.
   -------------------------------------------------------------------------- */
.abanico{display:block;position:relative;height:min(430px,54dvh);aspect-ratio:1;margin-inline:auto}

.carta{
  position:absolute;inset:0;margin:0;
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--glass-edge);box-shadow:var(--shadow-lg);
  transition:transform .45s var(--ease-out);
}

.carta img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .7s var(--ease-out);
}
/* Estado de partida de la foto que entra. El JS le saca la clase en cuanto la
   imagen está decodificada, y ahí se funde sobre la que estaba. */
.carta img.entrando{opacity:0}

.c1{transform:rotate(-10deg) translate(-30%,2%) scale(.82);z-index:1}

.c3{transform:rotate(10deg)  translate(30%,2%)  scale(.82);z-index:1}

.c2{z-index:2}

.abanico:hover .c1{transform:rotate(-14deg) translate(-38%,0) scale(.83)}

.abanico:hover .c3{transform:rotate(14deg)  translate(38%,0)  scale(.83)}


/* --------------------------------------------------------------------------
   AVISO DE BAJAR
   Una portada que ocupa la pantalla entera no da ninguna pista de que haya
   algo más. Esto es esa pista: una palabra y un punto que cae por un riel.
   Es un enlace de verdad al tramo de abajo, así que también sirve con el
   teclado y no es solo decoración.
   -------------------------------------------------------------------------- */
.baja{
  justify-self:center;
  display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-3);
  text-decoration:none;color:var(--text-soft);
  font-size:var(--t-rotulo);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  transition:color .3s var(--ease-out);
}
.baja:hover{color:var(--text)}

.baja-riel{
  position:relative;display:block;width:1px;height:38px;overflow:hidden;
  background:linear-gradient(var(--hair),transparent);
}
.baja-punto{
  position:absolute;top:0;left:-1px;
  width:3px;height:8px;border-radius:2px;background:var(--text-soft);
  animation:cae 1.9s var(--ease-out) infinite;
}
@keyframes cae{
   0%{transform:translateY(-9px);opacity:0}
  25%{opacity:1}
  100%{transform:translateY(38px);opacity:0}
}


/* --------------------------------------------------------------------------
   SEGUNDO TRAMO — LAS ESPECIALIDADES
   Son las mismas tres que están en Paquetes, y cada renglón lleva ahí, más la
   de turismo nacional, que lleva a su pestaña. No es relleno: es lo que hace
   que bajar sirva para algo.
   -------------------------------------------------------------------------- */
.especialidades{padding:var(--space-6) 0 var(--space-7)}

/* Rótulo del tramo. La lista sola, con sus numerales y sin nombre, se leía
   como un índice sin tapa: esto le pone título en un solo renglón, sin
   robarle alto a la portada. La línea que sigue al rótulo se estira hasta el
   borde y hace de moldura. */
.esp-cabecera{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}

.esp-rotulo{
  flex:none;
  font-size:var(--t-rotulo);font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--acento);
}

.esp-linea{flex:1;height:1px;background:var(--acento-tenue)}

.esp-lista{margin:0;padding:0;list-style:none}

.esp{border-top:1px solid var(--acento-tenue)}
.esp:last-child{border-bottom:1px solid var(--acento-tenue)}

/* El ancho de la foto vive en una variable porque el hover la ensancha y la
   maqueta de escritorio la agranda: así hay un solo número que tocar. */
.esp a{
  --esp-foto:96px;
  position:relative;
  display:flex;align-items:center;gap:var(--space-3);
  min-height:104px;padding:var(--space-3) 0;
  text-decoration:none;color:var(--text);
  transition:padding-left .45s var(--ease-out), color .3s var(--ease-out);
}
/* El renglón se corre al pasar por encima: en una lista sin recuadros ni
   fondos, el desplazamiento es lo que delata que la fila entera es un enlace. */
.esp a:hover{padding-left:var(--space-4)}

/* El rombo de latón que abre cada renglón: el mismo cuadrado girado del filete
   ornamental y de los pilares de Nosotros. No es una viñeta decorativa, es lo
   que le da un arranque firme a la izquierda a un renglón que, si no, empieza
   en el aire. */
.esp a::before{
  content:"";flex:none;align-self:center;
  width:7px;height:7px;transform:rotate(45deg);
  background:var(--acento);opacity:.75;
  transition:opacity .3s var(--ease-out), transform .45s var(--ease-out);
}
.esp a:hover::before{opacity:1;transform:rotate(45deg) scale(1.25)}

/* `min-width:0` no es adorno: un elemento flexible no se encoge por debajo de
   su contenido mínimo salvo que se le diga, y sin esto el renglón se pasaba
   del ancho de pantalla en celular y la foto quedaba cortada contra el borde. */
.esp-nombre{
  flex:1;min-width:0;
  font-size:clamp(1.25rem,4.6vw,1.9rem);line-height:1.2;
  letter-spacing:-.01em;text-wrap:balance;
}

/* --- La foto del renglón --------------------------------------------------
   Es un recorte apaisado, no una tarjeta: sin sombra y sin marco, apoyado
   contra el filete de arriba y el de abajo. El `clip-path` de base la deja
   entera —si el navegador no sabe animar con el desplazamiento, la foto tiene
   que verse igual—; el bloque de más abajo es el que la abre al asomar. */
.esp-foto{
  position:relative;flex:none;align-self:stretch;
  width:var(--esp-foto);margin:var(--space-2) 0;
  overflow:hidden;border-radius:var(--r-md);
  background:var(--glass-2);
  transition:width .5s var(--ease-out);
}

/* La imagen va en posición absoluta y NO en el flujo. Suelta, un flyer es
   vertical: con `height:100%` sobre un alto automático, el navegador le hacía
   caso a su alto natural —cuatrocientos y pico de píxeles— y era la foto la
   que decidía cuánto medía el renglón. Sacada del flujo, el alto lo manda el
   renglón y la foto se recorta dentro.

   El `scale` no es un detalle: es el margen que le deja sitio al
   desplazamiento en paralaje sin que asome el fondo por un borde. */
.esp-foto img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;transform:scale(1.12);
}

.esp a:hover .esp-foto{width:calc(var(--esp-foto) + 28px)}

/* Mosaico de cuatro fotos (la especialidad de turismo nacional). Va en
   posición absoluta por la misma razón que la imagen suelta de arriba: en el
   flujo, las cuatro fotos le imponían su alto natural al renglón. Adentro se
   anula lo de `.esp-foto img` —la posición absoluta, la escala y el paralaje—
   porque cada foto ocupa su celda y, corrida, dejaría ver el fondo por el
   borde. El hueco entre celdas es el fondo de la caja. */
.esp-mosaico{
  position:absolute;inset:0;
  display:grid;gap:3px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
}

.esp-foto .esp-mosaico img{
  position:static;
  width:100%;height:100%;min-height:0;
  object-fit:cover;transform:none;animation:none;
}

/* 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. */
.esp a::after{
  content:"";flex:none;align-self:center;margin-left:var(--space-2);
  width:9px;height:9px;
  border-right:1.5px solid var(--acento);
  border-top:1.5px solid var(--acento);
  transform:rotate(45deg);
  opacity:.35;
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.esp a:hover::after{opacity:1;transform:rotate(45deg) translate(4px,-4px)}


.pie-mini{
  flex:0 0 auto;margin:0;padding:0 0 var(--space-4);
  text-align:center;font-size:var(--t-pie);letter-spacing:.05em;color:var(--text-soft);
}

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

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


@media (max-width:959px){
  .landing-grid{grid-template-columns:1fr;gap:var(--space-5);text-align:center}
  .landing-logo{margin-inline:auto}
  .landing .hero-acciones{justify-content:center}
  .lema{margin-top:var(--space-4);font-size:clamp(1.3rem,4.5vw,1.7rem)}
  /* Abanico más chico y menos abierto: en vertical la rotación se sale
     del ancho de pantalla y se monta sobre el aviso de bajar. */
  .abanico{height:min(260px,30dvh)}
  .c1{transform:rotate(-9deg) translate(-23%,2%) scale(.8)}
  .c3{transform:rotate(9deg)  translate(23%,2%)  scale(.8)}
  /* En celular el contenido de la portada ya llega justo de alto. Se suelta el
     mínimo para que, si no cabe, la pantalla crezca en vez de recortarse. */
  .landing{min-height:0;padding-bottom:var(--space-4)}
  .especialidades{padding:var(--space-5) 0 var(--space-6)}
  .esp a{--esp-foto:132px;padding:var(--space-4) 0;gap:var(--space-3)}
  .esp-foto{min-height:112px}
  /* El cheurón se retira: sin puntero no anuncia nada, y esos 17px son ancho
     de título. La foto ya dice que el renglón lleva a alguna parte. */
  .esp a::after{display:none}
}

/* El botón flotante de WhatsApp se sienta en la esquina inferior derecha y se
   montaba sobre los enlaces del pie. */
@media (max-width:760px){
  .pie-mini{padding-bottom:var(--space-6)}
}

/* Por debajo de ~420px los dos botones no entran en un renglón: sumados miden
   335px y el ancho útil son 343, que el hueco entre ambos se come. En vez de
   seguir achicándolos hasta que no se lean, se apilan a propósito y del mismo
   ancho: dos pastillas centradas de distinto largo parecen un error de
   maquetación, dos iguales parecen una decisión. */
@media (max-width:420px){
  .landing .hero-acciones{flex-direction:column;align-items:center}
  .landing .hero-acciones .btn{width:min(100%,15rem)}
}


/* --- 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){
  .landing{gap:clamp(24px,3vh,44px)}
  .landing .contenedor{width:min(100% - 4rem, var(--ancho-amplio))}
  .landing-grid{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:clamp(40px,5vw,88px);
  }
  .landing-logo{width:min(100%,clamp(320px,26vw,430px))}
  .lema{margin-top:var(--space-4);font-size:clamp(2rem,3.1vw,2.9rem)}
  .landing .hero-acciones{margin-top:var(--space-5)}
  /* El abanico crece, pero sin sacarlo del carril. La carta de la derecha ya
     sale un 30% de su propio ancho por la rotación del abanico; empujando
     además el bloque hacia afuera, esa tercera carta terminaba cortada contra
     el borde de la pantalla y el abanico se leía como dos fotos, no tres.
     El tope en dvh es el que deja sitio al aviso de bajar en monitores bajos
     (1366×768), donde la portada tiene que seguir cabiendo en una pantalla. */
  .abanico{height:min(clamp(360px,34vw,510px), 50dvh)}

  .especialidades{padding:clamp(56px,6vw,96px) 0}
  .esp-cabecera{margin-bottom:var(--space-5)}
  /* El renglón crece hasta ser una franja: es el alto que necesita la foto
     para leerse como una foto y no como un botón con dibujo. */
  .esp a{--esp-foto:clamp(200px,20vw,300px);min-height:clamp(150px,14vw,200px);gap:var(--space-5)}
  .esp-nombre{font-size:clamp(1.7rem,3.2vw,2.7rem)}
  .esp a:hover .esp-foto{width:calc(var(--esp-foto) + 56px)}
}


/* --------------------------------------------------------------------------
   MOVIMIENTO LIGADO AL DESPLAZAMIENTO

   Todo esto va dentro de un `@supports`: donde no haya `animation-timeline`
   —hoy, Firefox— no se aplica ninguna regla y la página se ve completa y
   quieta. Es la razón de no hacerlo con JavaScript: acá lo peor que puede
   pasar es que no haya animación, nunca que quede contenido invisible.

   Se anima el CONTENEDOR del abanico y no las cartas, porque el `transform`
   de las cartas ya lo usa el hover del abanico y una animación le gana a una
   declaración normal: animándolas, el abanico dejaría de abrirse al pasar por
   encima.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){

    /* El abanico se despide al subir: se aleja y se apaga. */
    .abanico{
      animation:abanico-sale linear both;
      animation-timeline:scroll(root block);
      animation-range:0 70vh;
    }
    @keyframes abanico-sale{to{transform:translateY(-5vh) scale(.93);opacity:.25}}

    /* Cumplida su función, el aviso de bajar se va. */
    .baja{
      animation:baja-sale linear both;
      animation-timeline:scroll(root block);
      animation-range:0 25vh;
    }
    @keyframes baja-sale{to{opacity:0}}

    /* Cada especialidad entra por abajo al asomar. El tramo termina bastante
       antes del centro de la pantalla: así, si alguien frena el
       desplazamiento a media altura, no se queda ningún renglón a medio
       aparecer. */
    .esp{
      animation:esp-entra linear both;
      animation-timeline:view();
      animation-range:entry 5% cover 30%;
    }
    @keyframes esp-entra{from{opacity:0;transform:translateY(26px)}}

    /* La foto se abre como un telón, de izquierda a derecha, mientras el
       renglón sube. Es el premio por bajar: el tramo no se limita a aparecer,
       se descubre. Se anima `clip-path` y no el ancho porque el ancho lo usa
       el hover y una animación le gana a una declaración normal: animándolo,
       la foto dejaría de ensancharse al pasar por encima. */
    .esp-foto{
      animation:esp-telon linear both;
      animation-timeline:view();
      animation-range:entry 12% cover 34%;
    }
    @keyframes esp-telon{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

    /* Paralaje: la foto corre dentro de su recorte a lo largo de todo el paso
       por pantalla. El recorrido es corto —un 6% para cada lado— porque de eso
       se trata: se nota que algo se mueve, no se ve moverse. */
    .esp-foto img{
      animation:esp-paralaje linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes esp-paralaje{
      from{transform:scale(1.12) translateY(6%)}
      to{transform:scale(1.12) translateY(-6%)}
    }
  }
}