/* =====================================================================
   Huemul en Ruta — capa de marca y movimiento
   Se carga DESPUÉS de huemul.css. No depende de Tailwind (no hay que
   recompilar nada). Fuente de las animaciones JS: /src/animaciones.js
   ===================================================================== */

/* Tipografía de titulares: Archivo condensado (SIL Open Font License, ver /fonts/archivo-OFL.txt).
   Instancia estática ancho 75 / peso 750, solo Latin-1 + comillas y guiones (~10 KB). */
@font-face {
  font-family: "Archivo Huemul";
  src: url("/fonts/archivo-condensado.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}
/* Respaldo con métricas parecidas para que el cambio de fuente no mueva el diseño */
@font-face {
  font-family: "Archivo Huemul Fallback";
  src: local("Arial Narrow"), local("Roboto Condensed"), local("Arial");
  size-adjust: 92%;
  ascent-override: 92%;
  descent-override: 22%;
}

:root {
  /* Paleta "Cerro Castillo" */
  --basalto: #1f2c36;   /* roca oscura del macizo: textos fuertes y velos */
  --glaciar: #5f8f94;   /* color principal de la marca (botones) */
  --laguna: #8fd3cc;    /* turquesa de la laguna: detalles sobre fotos */
  --nieve: #f7f9fb;     /* fondo claro */
  --liquen: #d4b35a;    /* liquen dorado de las rocas: acento puntual */
  --neblina: #aeb4be;   /* gris secundario */
  --ease-sierra: cubic-bezier(.22, 1, .36, 1);
}

.font-display,
.route-card h4 {
  font-family: "Archivo Huemul", "Archivo Huemul Fallback", Inter, sans-serif;
  letter-spacing: -0.005em;
}
.route-card h4 { font-weight: 700; }

/* ---------- Barra de avance de lectura (liquen) ---------- */
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--liquen);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

/* ---------- Portada ---------- */
.hero-title {
  font-size: clamp(3rem, 11.5vw, 6.75rem);
  line-height: .95;
  letter-spacing: -0.01em;
  text-wrap: balance;
  filter: drop-shadow(0 2px 22px rgba(15, 25, 32, .45));
}
.hero-veil {
  background:
    radial-gradient(ellipse 70% 55% at 50% 55%, rgba(31,44,54,.42) 0%, rgba(31,44,54,0) 100%),
    linear-gradient(180deg, rgba(31,44,54,.62) 0%, rgba(31,44,54,.25) 35%, rgba(31,44,54,.40) 65%, rgba(31,44,54,.85) 100%);
}
.hero-topo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: var(--laguna);
  opacity: .4;
  pointer-events: none;
}
.hero-tag { color: var(--liquen); }
.hero-parallax { position: absolute; inset: 0; will-change: transform; }

/* Palabras del titular: cada una sube desde una ranura */
.hero-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .1em; margin-bottom: -.1em; }
.hero-title .w > span { display: inline-block; }

/* ---------- Catálogo de rutas ---------- */
.ridge { display: block; margin: 0 auto; width: 132px; height: 30px; color: var(--glaciar); overflow: visible; }
.ridge .ridge-peak { fill: var(--liquen); }
.route-media { position: relative; }
/* La foto completa de la tarjeta también lleva a la ruta */
.route-media-link { position: absolute; inset: 0; z-index: 5; cursor: pointer; }
.route-media .absolute.top-6 { z-index: 6; pointer-events: none; }

/* Botón "Ver más detalles" con flecha en círculo */
.btn-ruta { gap: .75rem; }
.btn-arrow {
  width: 1.9rem; height: 1.9rem; padding: .4rem; flex: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
  transition: transform .45s var(--ease-sierra), background-color .3s;
}
.btn-ruta:hover .btn-arrow,
.btn-ruta:focus-visible .btn-arrow,
.route-card:hover .btn-ruta .btn-arrow,
.route-card:focus-visible .btn-ruta .btn-arrow { transform: translateX(5px); background: rgba(255, 255, 255, .32); }

/* Variante sobre fondo claro (tarjetas "Sigue explorando") */
.btn-arrow--soft {
  width: 1.75rem; height: 1.75rem;
  color: var(--glaciar);
  background: rgba(95, 143, 148, .12);
  box-shadow: inset 0 0 0 1px rgba(95, 143, 148, .3);
}
.route-card:hover .btn-arrow--soft,
.route-card:focus-visible .btn-arrow--soft { transform: translateX(5px); color: #fff; background: var(--glaciar); }

/* Estado oculto antes de que el script los revele (solo si JS + movimiento permitido) */
.js-anim [data-reveal]:not(.is-revealed) { opacity: 0; }

/* ---------- Movimiento (solo si el usuario no pidió reducirlo) ---------- */
@media (prefers-reduced-motion: no-preference) {

  /* Foto de portada: entra un poco ampliada y se asienta */
  .hero-bg { animation: hero-asienta 2.6s var(--ease-sierra) both; }
  @keyframes hero-asienta { from { transform: scale(1.12); } to { transform: scale(1.0); } }

  /* Curvas de nivel que se dibujan */
  .hero-topo path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: topo-dibuja 2.4s var(--ease-sierra) forwards;
    animation-delay: calc(.35s + var(--i) * .09s);
  }
  @keyframes topo-dibuja { to { stroke-dashoffset: 0; } }

  .hero-title .w > span {
    transform: translateY(105%);
    animation: palabra-sube 1s var(--ease-sierra) forwards;
    animation-delay: calc(.15s + var(--i) * .065s);
  }
  @keyframes palabra-sube { to { transform: none; } }

  .hero-in { animation: hero-in .9s var(--ease-sierra) both; }
  .hero-in-1 { animation-delay: .75s; }
  .hero-in-2 { animation-delay: .9s; }
  .hero-in-3 { animation-delay: 1.1s; }
  @keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

  /* Línea de cumbres del Castillo bajo "Catálogo de Rutas" */
  .js-anim .ridge path.ridge-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js-anim .ridge .ridge-peak { opacity: 0; transform: scale(0); transform-origin: center; transform-box: fill-box; }
  .is-revealed .ridge path.ridge-line { animation: topo-dibuja 1.4s var(--ease-sierra) forwards; }
  .is-revealed .ridge .ridge-peak { animation: cumbre .5s var(--ease-sierra) 1.05s forwards; }
  @keyframes cumbre { to { opacity: 1; transform: none; } }

  /* Barras de color de cada categoría crecen al aparecer */
  .js-anim [data-reveal] > .cat-bar { transform: scaleX(0); transform-origin: 0 50%; }
  [data-reveal].is-revealed > .cat-bar { animation: barra .8s var(--ease-sierra) .15s forwards; }
  @keyframes barra { to { transform: scaleX(1); } }

  /* Efectos ligados al scroll: solo navegadores que los soportan nativamente (sin JS) */
  @supports (animation-timeline: scroll()) {
    .scroll-progress { animation: progreso linear both; animation-timeline: scroll(root); }
    @keyframes progreso { to { transform: scaleX(1); } }

    .hero-parallax { animation: parallax linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes parallax { to { transform: translateY(22%); } }

    .hero-content { animation: hero-sale linear both; animation-timeline: scroll(root); animation-range: 5vh 75vh; }
    @keyframes hero-sale { to { opacity: 0; transform: translateY(-8vh); } }
  }
}

/* Sin scroll-driven animations la barra de avance no se muestra */
@supports not (animation-timeline: scroll()) { .scroll-progress { display: none; } }
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }

/* Ajustes de legibilidad */
.hero-content .hero-in-1 { font-weight: 400; }
@media (max-width: 767px) { .hero-topo { opacity: .22; } }

/* Foto de portada de la home: WebP liviano; en celular, recorte central (los mismos píxeles
   que se ven en pantalla vertical, ~150 KB en vez de 260 KB). JPEG original como respaldo. */
.hero-bg--castillo {
  background-image: url("/mpj50dea-Cerro-castillo-portada.jpeg");
  background-image: image-set(url("/hero-castillo.webp") type("image/webp"), url("/mpj50dea-Cerro-castillo-portada.jpeg") type("image/jpeg"));
}
@media (max-width: 767px) {
  .hero-bg--castillo {
    background-image: image-set(url("/hero-castillo-movil.webp") type("image/webp"), url("/mpj50dea-Cerro-castillo-portada.jpeg") type("image/jpeg"));
  }
}

/* Portadas de las páginas de ruta: en celular, recorte central en WebP (lo que se ve en vertical); en escritorio, la foto original */
.hero-ruta--duff { background-image: url("/duff-portada-hq.jpg"); }
.hero-ruta--castillo { background-image: url("/castillo-portada-hq.jpg"); }
.hero-ruta--horquetas { background-image: url("/horquetas-portada.jpg"); }
.hero-ruta--avellano { background-image: url("/avellano-portada.jpg"); }
@media (max-width: 767px) {
  .hero-ruta--duff { background-image: image-set(url("/duff-portada-hq-movil.webp") type("image/webp"), url("/duff-portada-hq.jpg") type("image/jpeg")); }
  .hero-ruta--castillo { background-image: image-set(url("/castillo-portada-hq-movil.webp") type("image/webp"), url("/castillo-portada-hq.jpg") type("image/jpeg")); }
  .hero-ruta--horquetas { background-image: image-set(url("/horquetas-portada-movil.webp") type("image/webp"), url("/horquetas-portada.jpg") type("image/jpeg")); }
  .hero-ruta--avellano { background-image: image-set(url("/avellano-portada-movil.webp") type("image/webp"), url("/avellano-portada.jpg") type("image/jpeg")); }
}

/* Utilidad que no está en huemul.css compilado (botón del banner 360°) */
.self-start { align-self: flex-start; }

/* WhatsApp: verde oficial de la marca (#25D366) en el botón flotante y en "Consultar por WhatsApp" */
.wa-oficial { background-color: #25d366 !important; }
.wa-oficial:hover { background-color: #1ebe5b !important; }

/* "Volver al inicio": misma flecha en círculo de las tarjetas, apuntando hacia atrás */
.btn-volver .btn-arrow { width: 1.6rem; height: 1.6rem; padding: .35rem; }
.btn-volver:hover .btn-arrow--back,
.btn-volver:focus-visible .btn-arrow--back { transform: translateX(-4px); }
.btn-volver:hover .btn-arrow--soft,
.btn-volver:focus-visible .btn-arrow--soft { color: #fff; background: var(--glaciar); }
.btn-volver--pie .btn-arrow { width: 1.4rem; height: 1.4rem; padding: .3rem; }
.btn-volver--pie:hover .btn-arrow { background: rgba(255, 255, 255, .32); }
/* Utilidad que no está en huemul.css compilado (enlace "volver" de privacidad) */
@media (min-width: 768px) { .md\:inline-flex { display: inline-flex; } }