/* =========================================================
   RENASIE — Capa de efectos
   Se carga DESPUÉS de style.css y solo desde index.html.

   REGLA DE ESTA HOJA: no toca la identidad de marca.
   Ni tipografías, ni colores de paleta, ni radios de borde. Todo lo
   que hay aquí es movimiento, profundidad y estados de interacción,
   escrito sobre los tokens que ya existen en style.css.

   Para desactivarla entera: quitar el <link> de index.html.
   Cada bloque se puede quitar por separado sin romper los demás.
   ========================================================= */

/* =========================================================
   1. Niebla del páramo (portada)
   Dos capas que derivan a distinta velocidad. Usan la crema de la
   paleta, no un gris nuevo.
   ========================================================= */

.hero__niebla {
  position: absolute;
  inset: -10% -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      60% 38% at 20% 78%,
      rgba(253, 249, 234, 0.34) 0%,
      transparent 70%
    ),
    radial-gradient(
      50% 30% at 78% 88%,
      rgba(253, 249, 234, 0.26) 0%,
      transparent 72%
    );
  animation: derivar-niebla 34s ease-in-out infinite alternate;
}

.hero__niebla--lenta {
  background: radial-gradient(
    70% 42% at 55% 95%,
    rgba(253, 249, 234, 0.3) 0%,
    transparent 68%
  );
  animation-duration: 53s;
  animation-direction: alternate-reverse;
}

@keyframes derivar-niebla {
  from {
    transform: translate3d(-3%, 1.5%, 0) scale(1);
  }
  to {
    transform: translate3d(4%, -2%, 0) scale(1.09);
  }
}

/* La niebla se recorta al hero: con inset negativo se derramaba sobre
   la sección siguiente. */
.hero--niebla {
  overflow: hidden;
}

/* =========================================================
   2. Portada: profundidad
   El velo sigue siendo el MISMO verde de marca (--verde-oscuro,
   #004A39). Lo único que cambia es el reparto: se concentra donde
   está el texto y se abre donde está la montaña, para que la foto
   se vea. Los colores no cambian.

   Para volver al velo plano original, borrar este bloque.
   ========================================================= */

.hero--niebla::before {
  background: linear-gradient(
      100deg,
      rgba(0, 74, 57, 0.92) 0%,
      rgba(0, 74, 57, 0.66) 42%,
      rgba(0, 74, 57, 0.28) 72%,
      rgba(0, 74, 57, 0.18) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0, 74, 57, 0.3) 0%,
      transparent 35%,
      transparent 65%,
      rgba(0, 74, 57, 0.55) 100%
    );
}

/* Con la foto más visible, el titular cae sobre la casa y el prado,
   que son las zonas claras. La sombra le devuelve el contraste sin
   volver a tapar la foto ni cambiar ningún color. */
.hero--niebla .hero__titulo,
.hero--niebla .hero__script,
.hero--niebla .dato__valor,
.hero--niebla .dato__etiqueta {
  text-shadow: 0 2px 18px rgba(0, 74, 57, 0.6), 0 1px 4px rgba(0, 74, 57, 0.4);
}

/* Paralaje: la foto se mueve más despacio que el texto. El
   desplazamiento lo escribe js/efectos.js en --paralaje. */
.hero__fondo {
  will-change: transform;
  transform: translate3d(0, var(--paralaje, 0px), 0) scale(1.12);
}

/* =========================================================
   3. Riel de altitud
   Cota vertical fija que se llena al bajar. Ámbar frailejón sobre
   crema: los dos colores que ya usa el sitio.
   ========================================================= */

.riel {
  position: fixed;
  left: clamp(1rem, 2.2vw, 2.25rem);
  top: 50%;
  z-index: 60;
  translate: 0 -50%;
  display: grid;
  gap: 0.85rem;
  justify-items: center;
  pointer-events: none;
  font-family: var(--fuente-texto);
}

.riel__cota {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--acento);
}

.riel__rotulo {
  display: block;
  max-width: 6rem;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
  text-align: center;
  color: var(--texto-suave);
}

.riel__linea {
  position: relative;
  width: 1px;
  height: min(42vh, 20rem);
  background: var(--borde);
}

.riel__avance {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 0;
  background: var(--acento);
  transition: height 0.15s linear;
}

.riel__marca {
  position: absolute;
  left: 50%;
  width: 9px;
  height: 1px;
  translate: -50% 0;
  background: var(--borde);
  transition: width var(--transicion), background-color var(--transicion);
}

.riel__marca[data-activa="true"] {
  width: 17px;
  background: var(--acento);
}

.riel__tramo {
  position: absolute;
  left: 1.4rem;
  white-space: nowrap;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento);
  opacity: 0;
  translate: -6px 0;
  transition: opacity var(--transicion), translate var(--transicion);
}

.riel__marca[data-activa="true"] .riel__tramo {
  opacity: 1;
  translate: 0 0;
}

/* Sobre la portada (fondo verde) el riel se aclara para no perderse */
.riel[data-sobre-hero="true"] .riel__rotulo {
  color: rgba(253, 249, 234, 0.55);
}

.riel[data-sobre-hero="true"] .riel__linea,
.riel[data-sobre-hero="true"] .riel__marca {
  background: rgba(253, 249, 234, 0.25);
}

.riel[data-sobre-hero="true"] .riel__marca[data-activa="true"] {
  background: var(--acento);
}

/* Por debajo de 1250px el contenedor ya no deja canal libre a la
   izquierda: el riel pasa a ser una cota de 2px en el borde superior. */
@media (max-width: 1250px) {
  .riel {
    left: 0;
    top: 0;
    width: 100%;
    translate: 0 0;
    display: block;
  }

  .riel__cota,
  .riel__base,
  .riel__cima .riel__rotulo {
    display: none;
  }

  .riel__linea {
    width: 100%;
    height: 2px;
    background: transparent;
  }

  .riel__avance {
    width: var(--avance, 0%);
    height: 2px;
    inset: 0 auto 0 0;
    transition: width 0.15s linear;
  }

  .riel__marca {
    display: none;
  }
}

/* =========================================================
   4. Entrada escalonada
   Las grillas ya no aparecen de golpe: cada ficha entra 90 ms
   después de la anterior. El retraso lo pone js/efectos.js.
   ========================================================= */

.revelar--hijo {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease var(--retraso, 0s),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--retraso, 0s);
}

.revelar--hijo.es-visible {
  opacity: 1;
  transform: none;
}

/* =========================================================
   5. Estados de interacción
   Mismos colores, mismos radios: solo más respuesta al cursor.
   ========================================================= */

/* La foto de la ficha crece dentro de su marco redondeado */
.experiencia .media img,
.galeria .media img {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.experiencia:hover .media img,
.galeria .media:hover img {
  transform: scale(1.05);
}

.galeria .media {
  cursor: zoom-in;
}

/* El botón ámbar gana relieve al pasar el cursor, con la sombra
   cálida que ya estaba definida en --sombra-glow. */
.boton--primario {
  box-shadow: 0 6px 18px rgba(0, 50, 38, 0.14);
}

.boton--primario:hover {
  box-shadow: var(--sombra-glow), 0 10px 26px rgba(0, 50, 38, 0.18);
}

/* El pilar levanta también su icono: el conjunto se siente vivo en
   vez de una caja que se desplaza. */
.pilar__icono {
  transition: transform var(--transicion), background-color var(--transicion);
}

.pilar:hover .pilar__icono {
  transform: translateY(-3px) scale(1.06);
  background: rgba(251, 176, 52, 0.16);
}

/* =========================================================
   6. Cabecera que se aparta
   Al bajar se retira; al subir vuelve. Da pantalla completa a la
   lectura sin perder el acceso al menú.
   ========================================================= */

.cabecera {
  transition: background-color var(--transicion), padding var(--transicion),
    box-shadow var(--transicion), translate var(--transicion);
}

.cabecera[data-oculta="true"] {
  translate: 0 -110%;
}

/* Con el menú móvil abierto la cabecera nunca se esconde */
.menu-abierto .cabecera[data-oculta="true"] {
  translate: 0 0;
}

.cabecera__utiles {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* El enlace de salto vivía aquí; se movió a style.css, que cargan
   todas las páginas. Ver «Saltar al contenido» en esa hoja. */

/* =========================================================
   8. Menos movimiento
   Quien lo pide en su sistema no recibe niebla, ni paralaje, ni
   cabecera deslizante. El contenido queda intacto.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .hero__niebla {
    animation: none;
  }

  .hero__fondo {
    transform: none;
  }

  .riel__avance {
    transition: none;
  }

  .cabecera[data-oculta="true"] {
    translate: 0 0;
  }

  .revelar--hijo {
    opacity: 1;
    transform: none;
  }
}