/* ==========================================================
   Titan 4 Elementos — Home
   ========================================================== */

/* ── Header ───────────────────────────────────────────────── */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-6) var(--content-pad) 0;
}

.site-header .brand,
.site-header .site-nav a {
  color: var(--color-ink-950);
}

.site-header__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-white);
}

.brand__mark {
  height: 52px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.site-nav a {
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-fog-100);
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.site-nav a:hover {
  opacity: 1;
}

.site-nav__social {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.site-nav__social a {
  display: inline-flex;
  color: var(--color-ink-950);
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.site-nav__social a:hover {
  opacity: 1;
}

.site-nav__store {
  padding: 0.4em 0.9em;
  border: 1px solid var(--color-slate-500);
  border-radius: var(--radius-pill);
}

/* Es un <span>, no un <a>: sin href no recibe foco ni se anuncia
   como enlace. Volver a <a> cuando la tienda esté en línea. */
.site-nav__store--off {
  color: var(--color-fog-300);
  border-color: var(--color-fog-300);
  cursor: not-allowed;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: var(--space-2);
}

.nav-toggle__bar {
  width: 22px;
  height: 2px;
  background: var(--color-ink-950);
}

/* ── Hero ─────────────────────────────────────────────────── */
/* Foto integrada: se funde hacia el fondo claro de la página,
   contenido superpuesto en la zona de degradé, sin panel sólido separado. */

.hero {
  position: relative;
}

.hero__photo {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 12%,
    #000 58%,
    rgba(0, 0, 0, 0.85) 72%,
    rgba(0, 0, 0, 0.5) 84%,
    rgba(0, 0, 0, 0.2) 93%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 12%,
    #000 58%,
    rgba(0, 0, 0, 0.85) 72%,
    rgba(0, 0, 0, 0.5) 84%,
    rgba(0, 0, 0, 0.2) 93%,
    transparent 100%
  );
}

/* El <picture> que envuelve la foto (WebP con respaldo PNG) no debe
   cortar la cadena de alturas: en móvil la imagen se estira al alto de
   .hero__photo con height:100%, y sin esto mediría contra un contenedor
   sin alto definido. */
.hero__photo picture {
  display: contents;
}

.hero__img {
  display: block;
  width: 100%;
  height: auto;
}

.hero__panel {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 6%;
  width: min(52%, 46rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-6);
  padding: 0 var(--content-pad) 0 0;
}

.hero__panel .kicker {
  color: var(--color-ink-900);
  text-shadow: 0 1px 6px rgba(242, 244, 245, 0.9);
}

.hero__title {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: var(--weight-display);
  font-size: clamp(2.6rem, 4.8vw, 3.85rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-ink-950);
  margin: 0;
  text-shadow: 0 2px 12px rgba(242, 244, 245, 0.6);
}

.hero__lede {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  line-height: 1.6;
  color: var(--color-ink-900);
  max-width: 42ch;
  text-shadow: 0 1px 6px rgba(242, 244, 245, 0.85);
}

.hero__legend {
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
  color: var(--color-ink-950);
  text-shadow: 0 1px 6px rgba(242, 244, 245, 0.9);
}

.route-line--full {
  border-top: 2px dotted var(--color-fog-300);
  margin: 0 var(--content-pad);
  opacity: 0.6;
}

/* ── Cinta de aviso ───────────────────────────────────────── */
/* Banda de ancho completo entre el hero y las actividades. */

.notice-band {
  border-top: 1px solid var(--color-accent-amber);
  border-bottom: 1px solid var(--color-accent-amber);
  background: #fdf3e2;
  /* Va acá y no como padding del hero: en escritorio el panel es
     absolute y el alto lo da la foto. */
  margin-top: var(--space-16);
}

.notice-band__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-4) var(--content-pad);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
}

.notice-band__mark {
  flex: none;
  color: var(--color-accent-amber-text);
}

.notice-band__text {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-900);
}

.notice-band__text a {
  color: var(--color-accent-amber-text-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.notice-band__text a:hover {
  color: var(--color-accent-amber-text-hover);
}

@media (max-width: 560px) {
  .notice-band__inner {
    align-items: flex-start;
    text-align: left;
  }
}

/* ── Secciones genéricas ──────────────────────────────────── */

.section {
  padding: var(--space-24) 0;
}

.section__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-pad);
}

.section__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(1.75rem, 3vw, var(--text-3xl));
  letter-spacing: -0.015em;
  color: var(--color-ink-950);
  margin-top: var(--space-2);
  margin-bottom: var(--space-12);
  max-width: 24ch;
}

.section__inner--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

/* ── Actividades ──────────────────────────────────────────── */

.section--activities {
  background: transparent;
}

.activity-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-16) var(--space-6);
  counter-reset: none;
}

.activity-card {
  position: relative;
}

.activity-card__point {
  position: absolute;
  top: calc(var(--space-6) * -1 - 0.875rem);
  left: 0;
}

.activity-card::before {
  content: "";
  position: absolute;
  top: calc(var(--space-6) * -1 - 0.5px);
  left: 1.75rem;
  right: 0;
  border-top: 2px dotted var(--color-fog-300);
}

.activity-grid {
  margin-top: var(--space-16);
}

.activity-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

.activity-card__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

/* Igual que en el hero: el <picture> (WebP con respaldo JPG) no debe
   quedarse en medio, o la imagen mediría su altura contra él en vez de
   contra la caja 4:3 de la tarjeta. */
.activity-card__photo picture {
  display: contents;
}

.activity-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

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

.activity-card__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-ink-950);
}

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

.activity-card__stats {
  display: flex;
  gap: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
}

.activity-card__stats div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.activity-card__stats dt {
  opacity: 0.7;
}

.activity-card__stats dd {
  margin: 0;
  color: var(--color-ink-900);
}

.activity-card__type {
  font-size: var(--text-sm);
  color: var(--color-slate-500);
}

/* ── Refugio (foto integrada a ancho completo, una columna) ── */

.section--refuge {
  background: transparent;
  padding-top: 0;
}

.refuge__photo {
  position: relative;
  height: 84vh;
  min-height: 28rem;
  max-height: 68rem;
  overflow: hidden;
  margin-bottom: var(--space-16);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 78%, transparent 99%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 78%, transparent 99%);
}

.refuge__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  filter: saturate(0.9) contrast(1.05);
}

.refuge__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--color-paper) 0%,
    rgba(242, 244, 245, 0) 14%,
    rgba(242, 244, 245, 0) 80%,
    var(--color-paper) 100%
  );
}

.refuge__content {
  max-width: 62ch;
  margin: 0 auto;
  text-align: center;
}

.refuge__content .section__title {
  max-width: none;
}

.refuge__content p {
  color: var(--color-slate-700);
  margin-bottom: var(--space-4);
  text-align: left;
}

.refuge__more {
  margin-top: var(--space-6);
  text-align: left;
}

.refuge__more .link-arrow {
  margin-top: 0;
}

/* ── Reseñas (carrusel horizontal con fade en los bordes) ──── */

.section--reviews {
  background: transparent;
}

.section--reviews .section__inner {
  max-width: calc(var(--content-max) - 2 * var(--content-pad));
  padding: 0;
}

.google-rating {
  margin: 0 auto var(--space-8);
  padding: var(--space-12) var(--space-16);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
  mask-composite: intersect;
}

.google-rating__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.google-rating__label {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink-950);
}

.google-rating__score {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-base);
}

.google-rating__score strong {
  font-size: var(--text-xl);
  color: var(--color-ink-950);
}

.google-rating__stars {
  color: #fbbc05;
  letter-spacing: 0.05em;
}

/* Enlace al panel de reseñas de Google. El subrayado aparece recién al
   pasar el puntero: en reposo tiene que leerse como parte del dato,
   junto al 4.9 y las estrellas, no como un enlace suelto. */
.google-rating__count {
  color: var(--color-slate-500);
  font-size: var(--text-sm);
  text-decoration: none;
}

.google-rating__count:hover {
  text-decoration: underline;
}

.google-rating__count:focus-visible {
  outline: 2px solid var(--color-accent-amber);
  outline-offset: 2px;
}

.google-rating__cta {
  margin-left: auto;
  padding: 0.6em 1.4em;
}

/* ── Puntaje de Tripadvisor ───────────────────────────────── */
/* Mismo formato que el bloque de Google, debajo del carrusel. Solo el
   puntaje agregado y el enlace: Tripadvisor no permite reproducir el
   texto de sus reseñas fuera de su sitio. */

.ta-rating {
  margin: var(--space-8) auto 0;
  padding: var(--space-12) var(--space-16);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
  mask-composite: intersect;
}

.ta-rating__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Recorte circular del logo oficial. Se sirve al triple del tamaño en
   que se muestra, para que no se vea blando en pantallas densas. */
.tripadvisor-logo {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.ta-rating__label {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink-950);
}

.ta-rating__score {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-base);
  flex-wrap: wrap;
}

.ta-rating__score strong {
  font-size: var(--text-xl);
  color: var(--color-ink-950);
}

.ta-rating__word {
  font-weight: 600;
  color: var(--color-ink-800);
}

/* Las burbujas son la escala de Tripadvisor, como las estrellas son la
   de Google. El verde es el que usa Tripadvisor para la puntuación
   (#00852F), más oscuro que el verde de su logo: sobre fondo blanco el
   claro casi no se lee. */
.ta-rating__bubbles {
  color: #00852f;
  letter-spacing: 0.08em;
  font-size: 0.85em;
}

.ta-rating__count {
  color: var(--color-slate-500);
  font-size: var(--text-sm);
  text-decoration: none;
}

.ta-rating__count:hover {
  text-decoration: underline;
}

.ta-rating__count:focus-visible {
  outline: 2px solid var(--color-accent-amber);
  outline-offset: 2px;
}

.ta-rating__cta {
  margin-left: auto;
  padding: 0.6em 1.4em;
}

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

.review-grid {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  padding: 0 5.5rem var(--space-4);
  scrollbar-width: none;
}

.review-grid::-webkit-scrollbar {
  display: none;
}

/* La tarjeta entera es un enlace a la reseña en Google. El <a> toma el
   lugar que antes ocupaba el <blockquote> en la fila flex, y no aporta
   nada visual: ni color de enlace ni subrayado. */
.review-card-link {
  flex: 0 0 clamp(16rem, 30vw, 22rem);
  display: flex;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-sm);
}

/* Al pasar el puntero, la tarjeta se levanta apenas: alcanza para que se
   entienda que lleva a algún lado, sin competir con el carrusel. */
.review-card-link .review-card {
  transition: transform 0.2s ease;
}

.review-card-link:hover .review-card {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .review-card-link .review-card {
    transition: none;
  }
  .review-card-link:hover .review-card {
    transform: none;
  }
}

/* El foco del teclado va en el enlace, que es lo que se activa. */
.review-card-link:focus-visible {
  outline: 2px solid var(--color-accent-amber);
  outline-offset: 3px;
}

.review-card {
  margin: 0;
  padding: var(--space-8) var(--space-8) var(--space-6);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  justify-content: space-between;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
  mask-composite: intersect;
}

.review-card__stars {
  color: #fbbc05;
  font-size: var(--text-base);
  letter-spacing: 0.05em;
}

.review-card p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-ink-900);
}

.review-card footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.review-card__avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-paper-dim);
  color: var(--color-slate-700);
  font-family: var(--font-display);
  font-weight: 800;
}

.review-card__who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.review-card cite {
  font-style: normal;
  color: var(--color-ink-950);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-card .coord {
  color: var(--color-slate-500);
}

.google-g {
  flex: none;
  margin-left: auto;
}

.link-arrow {
  display: inline-block;
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent-amber-text);
  text-decoration: none;
}

/* ── Contacto ─────────────────────────────────────────────── */

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

.section--contact::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: 2000px 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--contact > * {
  position: relative;
  z-index: 1;
}

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

.section--contact .contact__info > p {
  color: var(--color-fog-100);
}

.contact__details {
  margin: var(--space-8) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact__details dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-fog-300);
}

.contact__details dd {
  margin: 0;
  font-size: var(--text-lg);
}

.contact__details a {
  text-decoration: none;
  color: var(--color-white);
  border-bottom: 1px solid var(--color-slate-500);
}

.location-link {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  border-bottom: none;
}

.location-link__pin {
  flex: none;
  margin-top: 0.2em;
  color: var(--color-accent-amber);
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-field label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-fog-300);
}

.form-field input,
.form-field textarea {
  background: var(--color-ink-900);
  border: 1px solid var(--color-slate-700);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-base);
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--color-accent-amber);
}

.contact__form .btn {
  align-self: flex-start;
  border: none;
}

/* Mientras se envía: el botón se apaga y no admite otro clic. */
.contact__form .btn[disabled] {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

/* Trampa para bots.
   No se usa display:none ni hidden: algunos bots saltean justamente lo
   que está oculto de la forma obvia. Así queda fuera de la vista y del
   flujo, pero presente en el DOM como cualquier otro campo. */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* El widget del captcha solo ocupa lugar cuando de verdad cargó:
   sin clave de sitio el div queda vacío y no debe dejar un hueco. */
.cf-turnstile:empty {
  display: none;
}

.form-aviso {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.form-aviso--exito {
  color: var(--color-exito);
}

.form-aviso--error {
  color: var(--color-error);
}

/* ── Footer ───────────────────────────────────────────────── */

.site-footer {
  position: relative;
  background: var(--color-ink-950);
  padding: 8rem 0 var(--space-8);
  overflow: hidden;
}

.site-footer__scene {
  position: absolute;
  /* Sin height: inset:0 ya da el alto del footer entero. */
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 55%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 55%);
}

.site-footer__scene picture {
  display: contents;
}

.site-footer__scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(0.8) brightness(0.75);
}

.site-footer__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(18, 22, 28, 0.15) 0%, var(--color-ink-950) 92%);
}

.site-footer__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-pad);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--space-8);
}

.site-footer__logo {
  display: inline-block;
  transition: opacity 0.2s ease;
}

.site-footer__logo:hover {
  opacity: 0.8;
}

.site-footer__brand img {
  height: 64px;
  /* width:auto — el logo lleva width/height en el HTML (para reservar
     el hueco); sin esto el atributo manda el ancho y lo estira. */
  width: auto;
  margin-bottom: var(--space-4);
}

.site-footer__social {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-fog-300);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer__social a:hover {
  color: var(--color-white);
}

.site-footer__tagline {
  font-size: var(--text-sm);
  color: var(--color-fog-300);
  max-width: 28ch;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__heading {
  font-size: var(--text-sm);
  /* Negrita: son los encabezados de columna del pie y tienen que
     separarse de los enlaces que los siguen. */
  font-weight: 700;
  color: var(--color-fog-100);
  margin: 0;
}

.site-footer__col a {
  font-size: var(--text-sm);
  color: var(--color-fog-100);
  text-decoration: none;
}

.site-footer__col a:hover {
  color: var(--color-white);
}

.site-footer__legal {
  grid-column: 1 / -1;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-slate-700);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fog-300);
  line-height: 1.8;
}

/* ── WhatsApp FAB ─────────────────────────────────────────── */

.whatsapp-fab {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  color: var(--color-white);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.whatsapp-fab:hover {
  background: var(--color-whatsapp-hover);
  transform: scale(1.05);
}

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

@media (max-width: 1024px) {
  .activity-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(80%, 320px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-8);
    padding: var(--space-8);
    /* Panel claro: los enlaces ya son ink-950 por
       .site-header .site-nav a, que gana por especificidad. */
    background: var(--color-paper);
    border-left: 1px solid var(--color-line);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 200;
  }

  .site-nav.is-open {
    transform: translateX(0);
  }

  .site-nav__social a {
    /* El drawer es claro: los iconos van oscuros como el resto
       de los enlaces. */
    color: var(--color-ink-950);
  }

  .nav-toggle {
    display: flex;
    /* Por encima del panel (z-index 200): si no, el drawer abierto tapa
       el botón y no hay forma de volver a plegarlo. */
    position: relative;
    z-index: 210;
  }

  .hero__panel {
    /* relative, no static: el z-index solo cuenta si está posicionado,
       y .hero__photo crea stacking context por su mask-image. */
    position: relative;
    z-index: 2;
    width: auto;
    align-items: flex-start;
    padding: var(--space-8) var(--content-pad) var(--space-12);
    /* El panel monta sobre el 30% inferior de la foto, para que el
       texto y la montaña se integren en vez de quedar apilados. */
    margin-top: -30vh;
  }

  /* Solo en móvil la foto se recorta para llenar una caja de alto
     fijo, que es lo que permite que el texto monte sobre ella. El
     desvanecido se corre por debajo de donde arranca el texto. */
  .hero__img {
    /* Anclada al 30%: entra el pico de la izquierda y sigue
       asomando el hielo de la derecha. */
    height: 100%;
    object-fit: cover;
    object-position: 30% 40%;
  }

  .hero__photo {
    height: 84vh;
    min-height: 26rem;
    max-height: 60rem;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 10%,
      #000 88%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 10%,
      #000 88%,
      transparent 100%
    );
  }

  /* Sobre la foto el texto va sólido y con sombra propia: el halo
     claro del escritorio asume papel debajo, no montaña. */
  .hero__panel .kicker,
  .hero__title,
  .hero__lede,
  .hero__legend {
    color: var(--color-ink-950);
    text-shadow:
      0 1px 2px rgba(242, 244, 245, 0.95),
      0 0 10px rgba(242, 244, 245, 0.8);
  }

  .section__inner--split {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }


  .activity-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16) var(--space-4);
  }
}

@media (max-width: 560px) {
  .activity-grid {
    grid-template-columns: 1fr;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
  }
}