/* ==========================================================================
   Lausof SRL — "Viajes de estudio"
   Complemento de styles.css, con el mismo criterio que css/personal.css y
   css/turismo.css: acá viven sólo las piezas que esta página agrega
   (encabezado propio, tarjetas de destino, preguntas frecuentes y cierre).
   Los colores, la tipografía, los bordes y las fichas se heredan tal cual.
   ========================================================================== */

/* ---- encabezado de página ----
   Mismo lenguaje que el hero de la home pero más bajo: esta es una página de
   servicio y no debe competir con la portada. La foto es una excursión real
   en la Quebrada de Humahuaca: el destino educativo por excelencia. */
.page-head{position:relative;color:var(--on-navy);overflow:hidden;background:var(--navy-deep)}
.page-head-photo{
  position:absolute;inset:0;
  background:#151e36 url('../assets/estudio/estudio-1-humahuaca.webp') center 62%/cover no-repeat;
}
.page-head-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,23,42,.8),rgba(16,23,42,.62));
}
.page-head-inner{position:relative;padding:56px 24px 60px;max-width:1120px}
.page-head h1{font-size:clamp(1.9rem,4.4vw,2.9rem);letter-spacing:-.015em;max-width:20ch}
.page-head .lead{max-width:56ch;font-size:1.08rem;color:var(--on-navy-soft);margin:16px 0 26px}
.page-head .ctas{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:720px){
  .page-head-inner{padding:48px 20px 52px}
  .page-head .ctas .btn{flex:1 0 100%;padding:11px 16px;font-size:.94rem}
}

/* ---- tarjetas de destino ----
   Mismo formato que las tarjetas de circuito de turismo.html: una foto fija
   por destino, sin rotación, porque cada tarjeta ES un lugar y la foto tiene
   que quedarse quieta para que se lo reconozca. */
.destinos{margin-top:36px}
@media(max-width:640px){.destinos{grid-template-columns:1fr}}
.destino .card-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}

/* ---- preguntas frecuentes ----
   Misma ficha que en transporte-de-personal.html, en una sola columna
   angosta: son pregunta y respuesta, se leen de corrido. */
.faq{margin-top:36px;display:flex;flex-direction:column;gap:14px;max-width:760px}
.faq-item{
  background:var(--card);border:1px solid var(--border);border-left:3px solid var(--gold);
  border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);
}
.faq-item h3{font-size:1.02rem;margin-bottom:8px}
.faq-item p{margin:0;color:var(--ink-mid);font-size:.94rem}

/* ---- cierre ---- */
.cta-estudio{background:var(--navy);color:var(--on-navy);text-align:center}
.cta-estudio h2{font-size:clamp(1.6rem,3.4vw,2.15rem)}
.cta-estudio p{color:var(--on-navy-soft);max-width:52ch;margin:14px auto 26px}
.cta-estudio .ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}