/* =========================================================
   Efectos y animaciones compartidos por las tres propuestas
   (usa las variables --teal / --turquoise que definen los temas)
   ========================================================= */

/* Barra de progreso de lectura */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--turquoise, #4fb9ce), var(--teal, #287f91)); z-index: 200; pointer-events: none; transition: width .12s linear; }

/* Revelado escalonado al hacer scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.reveal.reveal-scale { transform: translateY(12px) scale(.97); }
.reveal.is-visible, .reveal.no-observer { opacity: 1; transform: none; }

/* Zoom lento en las fotos de portada */
@keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
.pebble-hero img, .hero-photo img, .hero-photo > img { animation: kenburns 9s cubic-bezier(.2,.6,.2,1) both; transform-origin: 50% 40%; }

/* Paralaje suave (lo mueve el JS) */
[data-parallax] { backface-visibility: hidden; }

/* Inclinación 3D en tarjetas */
.tilt { transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.tilt.is-tilting { transition: transform .08s linear, box-shadow .35s; }

/* Botones con elevación */
.btn { transition: background-color .2s, color .2s, box-shadow .25s, transform .25s cubic-bezier(.2,.7,.2,1) !important; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }

/* Pie de foto deslizante en galerías */
.gallery-item { position: relative; }
.gallery-item[data-caption]::after {
  content: attr(data-caption); position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.2rem .9rem .8rem; color: #fff; font-size: .9rem; font-weight: 600; line-height: 1.3;
  background: linear-gradient(180deg, rgba(31,49,54,0), rgba(31,49,54,.75));
  opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .35s; pointer-events: none;
}
.gallery-item:hover::after, .gallery-item:focus-visible::after { opacity: 1; transform: none; }

/* Pestañas y paneles: cambio con deslizamiento */
.ages-panel { transition: opacity .3s ease, transform .3s ease; }
.ages-panel.is-fading { opacity: 0; transform: translateY(8px); }
.ages-tab { transition: background .25s, color .25s, transform .25s; }
.ages-tab.is-active { transform: scale(1.03); }

/* Número activo de los pasos */
@keyframes pop { 0% { transform: scale(.9); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.route-step.is-active .route-num { animation: pop .4s cubic-bezier(.2,.7,.2,1); }

/* Contador */
.count-up { font-variant-numeric: tabular-nums; }

/* Acordeones: contenido con entrada suave */
@keyframes fadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
details[open] > :not(summary) { animation: fadeDown .35s ease both; }

/* Enlaces del menú: subrayado que crece desde el centro */
.nav a:not(.btn) { transition: color .2s; }

/* Foco de teclado consistente */
.carousel-btn:focus-visible, .ages-tab:focus-visible, .route-btn:focus-visible, .filter:focus-visible, .gallery-item:focus-visible, summary:focus-visible { outline: 3px solid var(--turquoise, #4fb9ce); outline-offset: 3px; }

/* Reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .pebble-hero img, .hero-photo img, .hero-photo > img { animation: none; }
  .tilt { transform: none !important; }
  details[open] > :not(summary) { animation: none; }
  .scroll-progress { display: none; }
}