/* ==========================================================================
   MP Travel Services — Páginas interiores
   --------------------------------------------------------------------------
   Todo lo que compone una página que no es la portada: el encabezado con su
   rótulo, el ritmo de las secciones, la prosa, el filete, la declaración de
   marca, las tarjetas, los pilares de Nosotros y las listas de datos.

   La carga todo el sitio menos `index.html`.

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

/* Encabezado de las páginas interiores — versión corta del hero */
.pagina{padding:var(--space-8) 0 var(--space-4);text-align:center}

.pagina h1{
  margin:0;font-family:var(--font);
  font-size:clamp(2.2rem,5vw,3.2rem);font-weight:400;line-height:1.1;
  letter-spacing:-.01em;
}

/* Bajada del título, solo en las páginas legales: el título es una palabra
   suelta ("Impressum", "Renuncia") y sin esto la página abre sin contexto. */
.pagina-sub{
  max-width:56ch;margin:var(--space-3) auto 0;
  color:var(--text-mut);font-size:var(--t-apoyo);text-wrap:pretty;
}

/* ==========================================================================
   PÁGINAS INTERIORES
   ========================================================================== */
.seccion{padding:var(--space-8) 0}

/* El rótulo es el sitio donde el latón rinde más: es texto chico, en
   versalitas y muy espaciado, así que el color se lee como una tinta de
   imprenta y no como un elemento coloreado. Es, además, el único acento que
   aparece en TODAS las páginas: eso es lo que las hermana. */
.eyebrow{
  display:block;margin-bottom:var(--space-2);
  font-size:var(--t-rotulo);font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--acento);
}

/* Texto corrido de página (Quiénes somos). El ancho se limita en ch y no en
   px: lo que cansa la lectura es la cantidad de caracteres por renglón, no
   los píxeles. */
.prosa{max-width:70ch;margin-inline:auto}

.prosa p{margin:0 0 var(--space-4);color:var(--text-mut)}

.prosa p:last-child{margin-bottom:0}

/* Entradilla: el primer párrafo en cuerpo mayor y color pleno. Es lo que le
   da escalón al bloque; sin esto los cuatro párrafos pesan igual y la página
   se lee como un muro parejo. */
.prosa-lead{
  font-size:clamp(1.12rem,2.1vw,1.4rem);line-height:1.55;
  color:var(--text);text-wrap:pretty;
}

/* --- Filete ornamental ---------------------------------------------------- */
.ornamento{
  display:flex;align-items:center;gap:var(--space-4);
  max-width:340px;margin:0 auto var(--space-6);
}

.ornamento::before,.ornamento::after{content:"";flex:1;height:1px;background:var(--acento-tenue)}

/* Rombo dibujado con un cuadrado girado: la fuente no garantiza el glifo ◆. */
.ornamento span{
  width:6px;height:6px;transform:rotate(45deg);
  background:var(--acento);opacity:.75;
}

/* --- Declaración de marca -------------------------------------------------- */
.declaracion-intro{
  max-width:58ch;margin:0 auto var(--space-5);
  text-align:center;color:var(--text-mut);font-size:var(--t-apoyo);
}

.declaracion{
  margin:0;text-align:center;
  font-size:clamp(1.7rem,4.2vw,2.8rem);font-weight:400;line-height:1.25;
  letter-spacing:-.01em;text-wrap:balance;
}

/* Encabezado de una sección interior — el h1 lo pone .pagina, esto es el
   escalón de abajo. */
.cabecera-seccion{text-align:center;margin-bottom:var(--space-5)}

.cabecera-seccion h2{
  margin:0;font-size:clamp(1.5rem,3.2vw,2.1rem);font-weight:400;
  line-height:1.2;letter-spacing:-.01em;
}

.cabecera-seccion p{
  max-width:62ch;margin:var(--space-3) auto 0;
  color:var(--text-mut);font-size:var(--t-apoyo);
}

/* ==========================================================================
   TARJETAS
   --------------------------------------------------------------------------
   Eran cajas de vidrio: rectángulos con fondo, borde y sombra, todos del
   mismo tamaño y puestos en fila. Sobre un papel cálido eso se lee como una
   interfaz —fichas de un formulario— y no como una página impresa.

   Ahora no hay caja. Cada tarjeta se apoya en una regla de latón con un rombo
   encima, que es el mismo cuadrado girado del filete ornamental. Es el patrón
   de todo el sitio: los pilares de Nosotros, las franjas de la portada y los
   apartados de los documentos legales usan exactamente esta receta.
   ========================================================================== */
.rejilla{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--space-5) var(--space-4);
}

/* El relleno es solo arriba: los costados no llevan nada porque no hay caja
   que rellenar, y el texto tiene que alinearse con el resto de la página. */
.tarjeta{
  position:relative;padding:var(--space-4) 0 0;
  border-top:1px solid var(--acento-tenue);
}

/* El rombo se sienta sobre la regla y la corta. Va con el papel de fondo
   —de ahí el `box-shadow`, que no es una sombra sino un halo— para que la
   línea parezca abrirse a su paso. */
.tarjeta::before{
  content:"";position:absolute;top:0;left:0;
  width:7px;height:7px;
  transform:translate(0,-50%) rotate(45deg);
  background:var(--acento);opacity:.8;
  box-shadow:0 0 0 5px var(--bg);
}

.tarjeta h3{
  margin:0 0 var(--space-2);font-size:var(--t-titulo);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;line-height:1.4;
  text-wrap:balance;
}

.tarjeta p{margin:0;color:var(--text-mut);font-size:var(--t-apoyo)}

/* Tres columnas para bloques cortos de datos (aviso legal) */
.rejilla.tres{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

.rejilla.tres .tarjeta p + p{margin-top:var(--space-3)}

/* ==========================================================================
   PILARES — Misión y Visión (Nosotros)
   --------------------------------------------------------------------------
   Antes eran dos tarjetas de vidrio. El problema no era el vidrio: era que
   dos rectángulos iguales, uno al lado del otro, con un párrafo largo cada
   uno, se leen como un formulario. Acá no hay caja. Lo que ordena el bloque
   es una regla de latón arriba de cada columna, un numeral romano y el
   título en cuerpo grande y redonda —no en versalitas apretadas—, que es
   como titula una revista y no una interfaz.
   ========================================================================== */
.pilares{display:grid;gap:var(--space-7)}

.pilar{position:relative;padding-top:var(--space-4);border-top:1px solid var(--acento-tenue)}

/* El rombo se sienta sobre la regla, en el arranque de la columna, y la corta:
   es el mismo cuadrado girado del filete ornamental de más arriba, así que el
   bloque se hermana con el resto de la página sin necesidad de una viñeta ni
   de un número. Va con el papel de fondo para que la línea parezca abrirse
   para dejarlo pasar. */
.pilar::before{
  content:"";position:absolute;top:0;left:0;
  width:7px;height:7px;
  transform:translate(0,-50%) rotate(45deg);
  background:var(--acento);opacity:.8;
  box-shadow:0 0 0 5px var(--bg);
}

.pilar h3{
  margin:0 0 var(--space-3);
  font-size:clamp(1.6rem,4.4vw,2rem);font-weight:400;line-height:1.15;
  letter-spacing:-.01em;text-transform:none;
}

.pilar p{margin:0;color:var(--text-mut);text-wrap:pretty}

.datos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--space-5);margin:var(--space-7) 0 0;text-align:center;
}

.dato dt{
  font-size:var(--t-rotulo);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-soft);margin-bottom:var(--space-1);
}

.dato dd{margin:0;font-size:var(--t-apoyo)}

.dato dd a{text-decoration:none;border-bottom:1px solid var(--hair)}

.dato dd a:hover{border-bottom-color:var(--text)}

@media (max-width:560px){
  .seccion{padding:var(--space-7) 0}
  .pagina{padding:var(--space-7) 0 var(--space-3)}
}

/* --- 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){
  /* Más aire entre secciones, pero proporcional: en un monitor de 1080 el
       salto de 96px fijos se leía como hueco, no como respiro. */
  .seccion{padding:clamp(64px,6vw,104px) 0}
  /* --- Encabezado de página ------------------------------------------------
       En celular es un rótulo y un título centrados. Acá el rótulo se corre a la
       izquierda del título, sobre la misma línea de base, y una regla cruza el
       ancho entero: el encabezado deja de flotar en medio de la pantalla y pasa
       a marcar el borde superior de la página.
       Las páginas legales no llevan `pagina-ancha` a propósito: un documento se
       lee mejor en una columna angosta y centrada. */
  .pagina-ancha{padding:clamp(72px,7vw,120px) 0 0;text-align:left}
  .pagina-ancha .contenedor{
      display:grid;grid-template-columns:auto minmax(0,1fr);
      align-items:baseline;column-gap:var(--space-5);
      padding-bottom:var(--space-5);
      border-bottom:1px solid var(--hair);
    }
  .pagina-ancha .eyebrow{margin:0}
  .pagina-ancha h1{font-size:clamp(3rem,5vw,4.4rem);letter-spacing:-.025em}
  /* --- Nosotros: la prosa en dos carriles -----------------------------------
       Tres párrafos centrados en 70ch son, en un monitor, una tira angosta con
       medio metro de aire a cada lado. Acá la entradilla se queda sola en la
       columna izquierda, en cuerpo grande, y los otros dos párrafos corren por
       la derecha. Es la misma copia: cambia la composición, no el texto. */
  .prosa{
      max-width:none;
      display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
      column-gap:clamp(40px,5vw,88px);align-items:start;
    }
  .prosa-lead{margin:0;font-size:clamp(1.35rem,1.95vw,1.8rem);line-height:1.34}
  /* Los dos párrafos van envueltos en `.prosa-cuerpo` y no sueltos: sueltos,
       cada uno era una celda del grid, la primera fila crecía hasta el alto de
       la entradilla y entre el primer párrafo y el segundo quedaba un hueco de
       trescientos píxeles. Envueltos, corren seguidos como un solo bloque.
       El ancho se topa igual: la columna da ~68 caracteres por renglón y a
       partir de ~65 el ojo empieza a perder el salto de línea. */
  .prosa-cuerpo{max-width:62ch}
  .declaracion{font-size:clamp(2.4rem,4.2vw,3.5rem)}
  /* --- Tarjetas ------------------------------------------------------------ */
  .rejilla{gap:var(--space-6) var(--space-5)}
  .tarjeta{padding-top:var(--space-5)}
  /* --- Pilares --------------------------------------------------------------
       Dos columnas parejas y bastante aire en medio. La regla de latón de cada
       una corre por su propio ancho: son dos comienzos, no una tabla. */
  .pilares{grid-template-columns:1fr 1fr;column-gap:clamp(48px,6vw,96px)}
  .pilar{padding-top:var(--space-5)}
  .pilar h3{margin-bottom:var(--space-4)}
}