/* Movimiento de la página. Reglas: solo transform y opacity, curvas de salida (nada de rebotes),
   150-600 ms, una sola entrada por elemento, y todo se apaga con prefers-reduced-motion. */

:root {
  --salida: cubic-bezier(0.16, 1, 0.3, 1);      /* ease-out-expo: arranca rápido y se posa */
  --suave: cubic-bezier(0.33, 1, 0.68, 1);
  --t-corto: 180ms;
  --t-medio: 320ms;
  --t-largo: 620ms;
}

/* ---- Entrada por scroll: sube 14 px y aparece, una vez ---- */
/* Sin JavaScript no se esconde nada: la clase la pone el script al arrancar. */
.js-motion [data-revelar] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity var(--t-largo) var(--salida), transform var(--t-largo) var(--salida);
  transition-delay: var(--retraso, 0ms);
  will-change: opacity, transform;
}
.js-motion [data-revelar].visible { opacity: 1; transform: none; will-change: auto; }

/* ---- Entrada de la portada al cargar: escalonada ---- */
.portada__lugar, .portada h1, .portada__frase, .portada__acciones, .portada__proxima {
  animation: entrar var(--t-largo) var(--salida) both;
}
.portada__lugar { animation-delay: 60ms; }
.portada h1 { animation-delay: 140ms; }
.portada__frase { animation-delay: 240ms; }
.portada__acciones { animation-delay: 340ms; }
.portada__proxima { animation-delay: 430ms; }
.portada__fondo img { animation: acercar 1200ms var(--suave) both; }
.portada__sello { animation: sello 1400ms var(--salida) both; }
@keyframes entrar { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
@keyframes acercar { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes sello { from { opacity: 0; transform: scale(0.94) rotate(-4deg); } }

/* ---- Fotos: se revelan sin salto y crecen un punto al pasar el ratón ---- */
.nosotros__retrato, .eventos__collage figure, .predicas__miniatura { overflow: hidden; }
.nosotros__retrato img, .eventos__collage img, .predicas__miniatura img {
  transition: transform 600ms var(--suave), filter 600ms var(--suave);
}
.eventos__collage figure:hover img, .predicas__lista a:hover .predicas__miniatura img { transform: scale(1.04); }
img { transition: opacity 400ms var(--suave); }
img[data-cargando] { opacity: 0; }

/* ---- Barra: se compacta y marca el borde al bajar ---- */
.barra { transition: box-shadow var(--t-medio) var(--suave), background-color var(--t-medio) var(--suave); }
.barra__interior { transition: padding var(--t-medio) var(--salida); }
.barra.compacta { box-shadow: 0 1px 0 var(--linea), 0 10px 24px -22px rgba(36, 29, 24, 0.5); }
.barra.compacta .barra__interior { padding-block: 0.35rem; }
.barra.compacta .barra__marca img { transform: scale(0.88); }
.barra__marca img { transition: transform var(--t-medio) var(--salida); }

/* ---- Botones y enlaces: respuesta al tacto ---- */
.btn { transition: background-color var(--t-corto) var(--suave), color var(--t-corto) var(--suave), transform var(--t-corto) var(--salida), box-shadow var(--t-corto) var(--suave); }
.btn--azul:hover, .btn--chocolate:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -10px rgba(28, 43, 87, 0.7); }
.btn:active { transform: translateY(0) scale(0.985); }
.enlace-fuerte { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; text-decoration: none; transition: background-size var(--t-medio) var(--salida); padding-bottom: 1px; }
.enlace-fuerte:hover { background-size: 100% 1px; }

/* ---- Filas y tarjetas: elevación mínima ---- */
.horarios__fila, .ofrece__lista li, .canal-gloria { transition: transform var(--t-medio) var(--salida), background-color var(--t-medio) var(--suave); }
.horarios__fila:hover { transform: translateX(2px); }
.contacto__lista li { transition: transform var(--t-medio) var(--salida); }
.contacto__lista li:hover { transform: translateX(2px); }
.predicas__lista a { transition: transform var(--t-medio) var(--salida); }
.predicas__lista a:hover { transform: translateY(-2px); }

/* ---- Panel de redes: se despliega desde el botón ---- */
.redes__panel { transform-origin: bottom right; animation: desplegar var(--t-medio) var(--salida) both; }
@keyframes desplegar { from { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.97); } }
.redes__boton { transition: transform var(--t-corto) var(--salida), background-color var(--t-corto) var(--suave); }
.redes__boton:hover { transform: scale(1.05); }
.redes__boton:active { transform: scale(0.96); }

/* ---- Detalle de papel: grano muy suave sobre el fondo, como una impresión ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23g)'/></svg>");
}
main, .pie { position: relative; z-index: 1; }  /* la barra ya es sticky con z-50 en demo.css: no se toca */
.redes { z-index: 60; }  /* fijo: su position vive en demo.css */

/* ---- Nada de esto si el sistema pide menos movimiento ---- */
@media (prefers-reduced-motion: reduce) {
  [data-revelar], .js-motion [data-revelar].visible { opacity: 1; transform: none; transition: none; }
  .portada__lugar, .portada h1, .portada__frase, .portada__acciones, .portada__proxima,
  .portada__fondo img, .portada__sello, .redes__panel { animation: none; }
  .btn:hover, .btn:active, .horarios__fila:hover, .contacto__lista li:hover,
  .predicas__lista a:hover, .redes__boton:hover, .redes__boton:active { transform: none; }
  .eventos__collage figure:hover img, .predicas__lista a:hover .predicas__miniatura img { transform: none; }
  img, .barra, .barra__interior, .barra__marca img { transition: none; }
}