/* ==========================================================
   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%
  );
}

.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);
}

.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;
}

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

.google-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;
}

.review-card {
  flex: 0 0 clamp(16rem, 30vw, 22rem);
  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;
}

/* ── 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 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;
  }
}