/* ==========================================================
   Titan 4 Elementos — Páginas internas
   Actividades y Nosotros. Hoja aparte de home.css: reusa los
   tokens de main.css y el mismo vocabulario de clases, pero
   ninguna regla de la home se toca desde acá.
   ========================================================== */

/* ── Hero de página interna ───────────────────────────────── */
/* El título va sobre la foto, así que acá la caja es de alto fijo. */

.page-hero {
  position: relative;
  overflow: hidden;
  /* Deja el papel detrás de la nav, que es absolute y se apoya sobre
     el hero. La nav ocupa ~76px; 5.6rem deja algo de aire. */
  padding-top: 5.6rem;
}

.page-hero__photo {
  position: relative;
  height: 62vh;
  min-height: 22rem;
  max-height: 44rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 82%, transparent 100%);
}

.page-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  filter: saturate(0.92) contrast(1.03);
}

.page-hero__panel {
  position: relative;
  z-index: 2;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-pad);
  /* El panel se apoya en el borde inferior de la foto, donde la
     máscara ya la desvaneció. */
  margin-top: -4vh;
}

.page-hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(2rem, 4.5vw, var(--text-4xl));
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-ink-950);
  margin: 0;
  max-width: 18ch;
  text-shadow:
    0 1px 2px rgba(242, 244, 245, 0.9),
    0 0 12px rgba(242, 244, 245, 0.75);
}

.page-hero__title em {
  font-style: normal;
  font-weight: 600;
  /* ink-800 y no slate-500: este título se lee sobre la foto, y
     slate-500 sobre montaña no separaba del fondo. */
  color: var(--color-ink-800);
}

.page-hero__lede {
  max-width: 54ch;
  margin-top: var(--space-6);
  color: var(--color-slate-700);
  /* Mismo velo de papel que el título: el lede arranca donde la
     foto todavía no terminó de desvanecerse. */
  text-shadow: 0 1px 2px rgba(242, 244, 245, 0.9);
}

/* ── Ficha técnica (datos como coordenadas de mapa) ───────── */

.spec-band {
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  margin-top: var(--space-16);
}

.spec-grid {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-8) var(--content-pad);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8) var(--space-6);
}

.spec-grid div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.spec-grid dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-slate-500);
}

.spec-grid dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--color-ink-950);
}

/* ── Cuerpo de la página ──────────────────────────────────── */

.prose {
  max-width: 68ch;
}

.prose p {
  color: var(--color-slate-700);
  margin-bottom: var(--space-4);
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  color: var(--color-ink-950);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}

.prose ul {
  list-style: none;
  margin-bottom: var(--space-4);
}

.prose ul li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-2);
  color: var(--color-slate-700);
}

/* Viñeta como punto de mapa, no como bullet genérico. */
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent-amber);
}

/* ── Itinerario (tabla de tiempos) ────────────────────────── */

.itinerary {
  border-top: 1px solid var(--color-line);
}

.itinerary__row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-line);
  align-items: baseline;
}

.itinerary__time {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent-amber-text);
}

.itinerary__step {
  color: var(--color-slate-700);
}

.itinerary__day {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--color-slate-500);
  padding: var(--space-6) 0 var(--space-2);
}

.itinerary__note {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  /* slate-500 y no fog-300: a este tamaño (xs) fog-300 da 3.02:1
     sobre el papel, que no llega al 4.5:1 que pide AA. */
  color: var(--color-slate-500);
}

/* ── Preguntas frecuentes ─────────────────────────────────── */

.faq__item {
  border-bottom: 1px solid var(--color-line);
  padding: var(--space-6) 0;
}

.faq__item:first-child {
  border-top: 1px solid var(--color-line);
}

.faq__q {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-ink-950);
  margin-bottom: var(--space-2);
}

.faq__a {
  color: var(--color-slate-700);
  max-width: 68ch;
}

/* ── Bloque de reserva ────────────────────────────────────── */

.booking {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: var(--space-8);
  background: var(--color-paper-dim);
}

.booking__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  color: var(--color-ink-950);
  margin-bottom: var(--space-3);
}

.booking p {
  color: var(--color-slate-700);
  margin-bottom: var(--space-6);
}

.booking__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ── Pie de figura ────────────────────────────────────────── */
/* No usa .map-legend: esa clase es para etiquetas cortas, y en
   mayúsculas + tracking una frase entera se vuelve difícil de leer. */

.figure-note {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-slate-700);
}

/* ── Layout de dos columnas: contenido + aside pegajoso ───── */

.detail-layout {
  display: grid;
  grid-template-columns: 1fr 22rem;
  gap: var(--space-16);
  align-items: start;
}

.detail-aside {
  position: sticky;
  top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* ── Galería ──────────────────────────────────────────────── */

/* Mosaico de miniaturas de ancho fijo: entran las que quepan por fila
   y el resto baja. auto-fill (no auto-fit) para que una galería de 3
   fotos no estire las celdas al ancho completo en pantallas grandes.
   El minmax con min() evita que 430px desborde en un teléfono. */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(430px, 100%), 430px));
  gap: var(--space-4);
}

.gallery img {
  width: 100%;
  /* height:auto — si no, el width/height del HTML (puesto
     para reservar el hueco) le gana al aspect-ratio y deforma. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* Mismo acercamiento que las fichas de actividad (.activity-card__photo
   en home.css): el contenedor recorta y la foto crece un 4%. */
.gallery a img,
.domo-shots .more-card__photo a img,
.booking > a img {
  transition: transform 0.4s ease;
}

.gallery a:hover img,
.domo-shots .more-card__photo a:hover img,
.booking > a:hover img {
  transform: scale(1.04);
}

/* ── Ampliar una foto de la galería (sin JavaScript) ──────── */
/* El enlace lleva a #foto-N y la capa se muestra con :target; un
   segundo clic sobre la capa la cierra. Sin JavaScript. */

.gallery a,
.domo-shots .more-card__photo a,
.booking > a {
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: zoom-in;
}

/* height:auto — las fotos llevan width/height en el HTML (para
   reservar el hueco) y sin esto esos atributos las deforman. */
.booking > a img {
  width: 100%;
  height: auto;
}

/* Al cerrar, el salto aterriza en este bloque. Un poco de aire arriba
   para que el título no quede pegado al borde superior de la ventana. */
#domo,
#valor {
  scroll-margin-top: var(--space-8);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  background: rgba(18, 22, 28, 0.94);
  cursor: zoom-out;
}

.lightbox:target {
  display: flex;
}

.lightbox img {
  max-width: min(100%, 100vw);
  max-height: 92vh;
  width: auto;
  height: auto;
  /* contain y no cover: en la ampliación se ve la foto entera, a su
     resolución original mientras entre en la ventana. */
  object-fit: contain;
  border-radius: var(--radius-sm);
}

/* ── Otras actividades (pie de página interna) ────────────── */

.more-activities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8) var(--space-4);
}

.more-card__link {
  text-decoration: none;
  display: block;
}

.more-card__photo {
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.more-card__photo img {
  width: 100%;
  /* height:auto — si no, el width/height del HTML (puesto
     para reservar el hueco) le gana al aspect-ratio y deforma. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.more-card__link:hover .more-card__photo img {
  transform: scale(1.04);
}

.more-card__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  color: var(--color-ink-950);
  margin-top: var(--space-3);
}

.more-card__name em {
  font-style: normal;
  font-weight: 600;
  color: var(--color-slate-500);
}

.more-card__meta {
  margin-top: var(--space-1);
}

/* ── Otras actividades: mismas fichas que la home, en carrusel ─ */
/* Reusa .activity-card de home.css tal cual; acá solo se define el
   riel horizontal, con el mismo hover que galerías y reseñas. */

.activities-carousel {
  position: relative;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 4rem,
    #000 calc(100% - 4rem),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 4rem,
    #000 calc(100% - 4rem),
    transparent 100%
  );
}

.activity-track {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  /* El número de ruta se posiciona 2.375rem por encima del borde de la
     ficha; con menos padding que eso, overflow-x lo recorta. */
  padding: var(--space-12) 3rem var(--space-4);
  margin: 0;
  list-style: none;
  scrollbar-width: none;
}

.activity-track::-webkit-scrollbar {
  display: none;
}

/* Mismo ancho que una columna de la grilla de la home (4 por fila). */
.activity-track .activity-card {
  flex: 0 0 clamp(15rem, 22vw, 19rem);
}

/* La línea punteada al lado del número, igual que en la home: arranca
   donde termina el círculo (1.75rem) y llega al borde de la ficha. */
.activity-track .activity-card::before {
  content: "";
}

/* ── Nosotros: pilares de servicio ────────────────────────── */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.pillar {
  border-top: 2px solid var(--color-accent-amber);
  padding-top: var(--space-4);
}

.pillar__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  color: var(--color-ink-950);
  margin-bottom: var(--space-2);
}

.pillar p {
  color: var(--color-slate-700);
}

/* ── Banda blanca a todo el ancho ─────────────────────────── */
/* Banda blanca que se desvanece arriba y abajo, sin cortes duros
   contra las secciones vecinas. */

.section--band {
  position: relative;
}

.section--band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-white);
  pointer-events: none;
  /* Degradado en los dos extremos: entra y sale sin borde visible. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 12%,
    #000 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 12%,
    #000 88%,
    transparent 100%
  );
}

/* El contenido va por encima del fondo de la banda. */
.section--band > * {
  position: relative;
  z-index: 1;
}

/* ── Nosotros: bloque de compromiso, sobre fondo oscuro ───── */

.section--dark {
  position: relative;
  background: var(--color-ink-950);
  color: var(--color-fog-100);
}

.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-ink-950);
  background-image: url("../img/contours-tile-dark.jpg");
  background-repeat: repeat;
  background-size: 1600px auto;
  background-blend-mode: screen;
  opacity: 0.7;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 80%, transparent 100%);
}

.section--dark > * {
  position: relative;
  z-index: 1;
}

.section--dark .section__title {
  color: var(--color-white);
}

.section--dark .prose p {
  color: var(--color-fog-100);
}

.section--dark .prose h3 {
  color: var(--color-white);
}

.section--dark .prose ul li {
  color: var(--color-fog-100);
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 1024px) {
  .detail-layout {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .detail-aside {
    position: static;
  }

  .spec-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .more-activities {
    grid-template-columns: repeat(2, 1fr);
  }

  .pillars {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .page-hero__photo {
    height: 52vh;
  }

  /* relative, no static: el z-index solo cuenta si está posicionado,
     y la foto crea stacking context por su mask-image. */
  
  .page-hero__panel {
    margin-top: -5vh;
  }

}

@media (max-width: 560px) {
  .spec-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .more-activities {
    grid-template-columns: 1fr;
  }

  .itinerary__row {
    grid-template-columns: 5rem 1fr;
  }
}

/* ── Nosotros: fotos del domo (exterior + interior) ───────── */
/* Dos tomas apiladas en la columna lateral: la general del
   exterior y una del interior, que es lo que no se veía. */

.domo-shots {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.domo-shots .more-card__photo img {
  width: 100%;
  /* height:auto — si no, el width/height del HTML (puesto
     para reservar el hueco) le gana al aspect-ratio y deforma. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}