/* ============================================================
   RPE · Capa de movimiento premium (todo el sitio)
   Aditiva y no destructiva: nada se oculta de forma permanente.
   Respeta prefers-reduced-motion.
   ============================================================ */

html { scroll-behavior: smooth; }

/* Barra de progreso de lectura (dorada) */
.rpe-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px; width: 0;
  z-index: 300;
  background: linear-gradient(90deg, #D4B578, #B8924A);
  box-shadow: 0 0 10px rgba(184, 146, 74, 0.55);
  pointer-events: none;
  will-change: width;
}

/* Hero: leve zoom de base + parallax suave por scroll (vía --rpe-par) */
.hero::before {
  transform: scale(1.06);
  background-position: center calc(50% + var(--rpe-par, 0px)) !important;
  transition: background-position 0.15s linear;
}

/* Entrada escalonada del hero, con desenfoque (forwards: siempre acaba visible) */
.hero__brand,
.hero__tag,
.hero__title,
.hero__tagline,
.hero__price-pill {
  opacity: 0;
  animation: rpeUp 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.hero__brand, .hero__tag { animation-delay: 0.05s; }
.hero__title             { animation-delay: 0.16s; }
.hero__tagline           { animation-delay: 0.30s; }
.hero__price-pill        { animation-delay: 0.44s; }
@keyframes rpeUp {
  from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* Destello dorado al pasar por botones (excluye .shimmer: la home ya lo tiene) */
.cta-btn, .btn:not(.shimmer), .pack-hero__cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cta-btn:not(.shimmer)::after, .btn:not(.shimmer)::after, .pack-hero__cta::after {
  content: '';
  position: absolute;
  top: 0; left: -140%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.38), transparent);
  transform: skewX(-18deg);
  z-index: 1;
  pointer-events: none;
}
.cta-btn:not(.shimmer):hover::after, .btn:not(.shimmer):hover::after, .pack-hero__cta:hover::after {
  animation: rpeSheen 0.9s ease;
}
@keyframes rpeSheen {
  from { left: -140%; }
  to   { left: 140%; }
}

/* 21st-style · Spotlight dorado que sigue al cursor en las tarjetas */
.service-card, .ritual-card, .pack-card, .related-card, .whoweare-card {
  position: relative;
}
.service-card::after,
.ritual-card::after,
.pack-card::after,
.related-card::after,
.whoweare-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              rgba(212, 181, 120, 0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.45s var(--ease, ease);
  mix-blend-mode: screen;
}
@media (hover: hover) and (pointer: fine) {
  .service-card:hover::after,
  .ritual-card:hover::after,
  .pack-card:hover::after,
  .related-card:hover::after,
  .whoweare-card:hover::after { opacity: 1; }
}

/* 21st-style · Degradado dorado animado en las palabras destacadas de los títulos.
   Protegido con @supports: si el navegador no soporta clip de texto, el oro queda sólido. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  @media (prefers-reduced-motion: no-preference) {
    .h-section em,
    .hero__title em,
    .hero h1 em {
      background-image: linear-gradient(100deg,
        var(--gold-deep, #8E6F35) 0%,
        var(--gold-soft, #D4B578) 50%,
        var(--gold-deep, #8E6F35) 100%);
      background-size: 200% auto;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: rpeGoldFlow 7s linear infinite;
    }
  }
}
@keyframes rpeGoldFlow {
  to { background-position: 200% center; }
}

/* Contraste · Los títulos de SECCIÓN van sobre fondo claro/crema, donde el oro
   claro del degradado se "lavaba". Se oscurece el degradado (ambos extremos AA)
   manteniendo el brillo. Los heros (fondo oscuro/imagen) NO se tocan. El tema
   oscuro de Oribe recupera el oro brillante. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  @media (prefers-reduced-motion: no-preference) {
    .h-section em {
      background-image: linear-gradient(100deg,
        var(--gold-text, #7C5E2A) 0%,
        var(--gold-deep, #8E6F35) 50%,
        var(--gold-text, #7C5E2A) 100%);
    }
    .theme-dark .h-section em {
      background-image: linear-gradient(100deg,
        var(--gold-deep, #8E6F35) 0%,
        var(--gold-soft, #D4B578) 50%,
        var(--gold-deep, #8E6F35) 100%);
    }
  }
}

/* Reserva: aparición suave opcional (solo si JS añade .rpe-ready + .rpe-fx) */
.rpe-fx { opacity: 1; }
.rpe-ready .rpe-fx {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease, ease), transform 0.7s var(--ease, ease);
  will-change: opacity, transform;
}
.rpe-ready .rpe-fx.rpe-on { opacity: 1; transform: translateY(0); }

/* ============================================================
   v2 · Mejoras premium (aditivas) — todo bajo reduced-motion abajo
   ============================================================ */

/* 1 · Ken Burns: los heroes con foto cobran vida con un zoom lento */
@media (prefers-reduced-motion: no-preference) {
  .hero-slide.is-active {
    animation: rpeKenBurns 20s ease-out both;
  }
  .hero::before {
    animation: rpeKenBurnsBg 24s ease-out both;
  }
}
@keyframes rpeKenBurns {
  from { transform: scale(1.0);  }
  to   { transform: scale(1.08); }
}
@keyframes rpeKenBurnsBg {
  from { transform: scale(1.06); }
  to   { transform: scale(1.14); }
}

/* 2 · Líneas doradas que se dibujan al entrar la sección en pantalla */
@media (prefers-reduced-motion: no-preference) {
  .reveal .divider-gold,
  .reveal-up .divider-gold {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.85s var(--ease, cubic-bezier(0.22,0.61,0.36,1)) 0.15s;
  }
  .reveal.is-visible .divider-gold,
  .reveal-up.is-visible .divider-gold {
    transform: scaleX(1);
  }
}

/* 3 · Botones: elevación al pasar y "press" al pulsar (tacto premium) */
@media (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-2px); }
  .btn:active,
  .cta-btn:active { transform: translateY(1px) scale(0.99); }
}

/* 4 · Tarjetas: profundidad.
   Sombra de REPOSO en todos los dispositivos — una sombra estática no es
   movimiento, así que no va bajo prefers-reduced-motion ni bajo (hover:hover).
   Antes solo existía la de :hover, y en móvil las tarjetas no tenían sombra nunca.
   Dos capas: contacto (define el borde) + difusa (levanta la tarjeta del papel). */
.service-card, .ritual-card, .pack-card, .related-card, .whoweare-card {
  --rpe-card-shadow:
    0 1px 2px -1px rgba(24, 22, 20, 0.10),
    0 12px 28px -18px rgba(24, 22, 20, 0.30);
  box-shadow: var(--rpe-card-shadow);
}

/* 4-b · Elevación extra al pasar el cursor (sobre la de reposo) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .service-card, .ritual-card, .pack-card, .related-card, .whoweare-card {
    transition: box-shadow 0.45s var(--ease, ease), transform 0.2s var(--ease, ease);
    transform-style: preserve-3d;
  }
  .service-card:hover, .ritual-card:hover, .pack-card:hover,
  .related-card:hover, .whoweare-card:hover {
    box-shadow: 0 24px 50px -26px rgba(24, 22, 20, 0.45);
  }
}

/* 4-bis · MÓVIL/TÁCTIL — los efectos de cursor (spotlight, tilt, hover) no
   existen sin ratón. Se sustituyen por motion al tocar y al entrar en pantalla. */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  /* Feedback al tocar: la tarjeta se hunde un poco */
  .service-card, .ritual-card, .pack-card, .related-card, .whoweare-card {
    transition: transform 0.2s var(--ease, ease);
  }
  .service-card:active, .ritual-card:active, .pack-card:active,
  .related-card:active, .whoweare-card:active {
    transform: scale(0.985);
  }
  /* Barrido de luz dorado al entrar la tarjeta en pantalla (sustituye al
     spotlight de cursor). Lo activa rpe-motion.js con la clase .rpe-insweep,
     reutilizando el ::after que ya tienen las tarjetas. */
  .rpe-insweep::after {
    opacity: 1;
    background: linear-gradient(115deg,
      transparent 35%, rgba(212, 181, 120, 0.20) 50%, transparent 65%);
    background-size: 250% 100%;
    animation: rpeInSweep 1.4s var(--ease, ease) both;
  }
}
@keyframes rpeInSweep {
  from { background-position: 200% 0; opacity: 0; }
  20%  { opacity: 1; }
  to   { background-position: -130% 0; opacity: 0; }
}

/* 4-ter · MÓVIL — brillo AUTOMÁTICO en los botones principales (el sheen de
   :hover no existe en táctil). Un barrido breve cada ~5,5s; el resto del ciclo
   está en reposo (fuera de pantalla). Reutiliza los dos sistemas de brillo. */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .shimmer::before {
    animation: rpeBtnShimmer 5.5s ease-in-out 1.6s infinite;
  }
  .btn--filled:not(.shimmer)::after,
  .btn--gold:not(.shimmer)::after,
  .cta-btn:not(.cta-btn--ghost)::after,
  .pack-hero__cta::after {
    animation: rpeBtnSheen 5.5s ease-in-out 3s infinite;
  }
}
@keyframes rpeBtnShimmer {
  0%   { transform: translateX(-120%); }
  16%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}
@keyframes rpeBtnSheen {
  0%   { left: -140%; }
  16%  { left: 140%; }
  100% { left: 140%; }
}

/* Parallax · zoom sutil de las imágenes editoriales al hacer scroll.
   Progresivo: solo donde el navegador soporta scroll-driven animations
   (Chromium/Android); en iOS sin soporte simplemente no se aplica (sin riesgo).
   Limitado a wrappers con overflow:hidden → la imagen no desborda. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .inspiration-img img,
    .intro-img img {
      animation: rpeScrollZoom linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }
  }
}
@keyframes rpeScrollZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* 6 · Aurora — resplandor dorado que "respira" tras los títulos de sección.
   Contenido (no desborda) y detrás del texto vía isolation+z-index. */
@media (prefers-reduced-motion: no-preference) {
  .h-section { position: relative; isolation: isolate; }
  .h-section::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%; top: 50%;
    width: min(420px, 86vw); height: 70%;
    min-height: 150px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center,
      rgba(212, 181, 120, 0.22) 0%,
      rgba(212, 181, 120, 0.06) 45%,
      transparent 70%);
    filter: blur(26px);
    pointer-events: none;
    animation: rpeAurora 7.5s ease-in-out infinite;
  }
}
@keyframes rpeAurora {
  0%, 100% { opacity: 0.35; transform: translate(-51%, -50%) scale(1); }
  50%      { opacity: 0.7;  transform: translate(-49%, -50%) scale(1.07); }
}

/* 7 · Curtain reveal — wipe izquierda→derecha al entrar en pantalla.
   Seguro por diseño: la clase .rpe-wipe la añade el JS SOLO al revelar; la
   animación arranca clipada y TERMINA abierta (fill both). Sin JS o si el
   observer no salta, la imagen se ve normal (no hay clip por defecto).
   Cancela el fade/translate del .reveal para dejar un único efecto limpio. */
@media (prefers-reduced-motion: no-preference) {
  .rpe-wipe:has(> picture) {
    opacity: 1 !important;
    transform: none !important;
    animation: rpeWipe 1.1s var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1)) both;
    will-change: clip-path;
  }
}
@keyframes rpeWipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* 5 · Barras superiores fijas: elevación sutil al hacer scroll
   (.rpe-scrolled lo añade rpe-motion.js sobre <html>) */
.top, .legal-top {
  transition: box-shadow 0.4s var(--ease, ease), background-color 0.4s var(--ease, ease);
}
.rpe-scrolled .top,
.rpe-scrolled .legal-top {
  box-shadow: 0 8px 28px -18px rgba(24, 22, 20, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rpe-progress { display: none; }
  .hero::before { transform: none; background-position: center !important; transition: none; }
  .hero__brand, .hero__tag, .hero__title, .hero__tagline, .hero__price-pill { opacity: 1; animation: none; }
  .cta-btn::after, .btn::after { display: none; }
  .service-card::after, .ritual-card::after, .pack-card::after,
  .related-card::after, .whoweare-card::after { display: none; }
  .rpe-ready .rpe-fx { opacity: 1; transform: none; transition: none; }
  /* v2 */
  .hero-slide.is-active, .hero::before { animation: none; }
  .reveal .divider-gold, .reveal-up .divider-gold { transform: none; transition: none; }
  .btn:hover, .btn:active, .cta-btn:active { transform: none; }
  /* Sin movimiento: el hover no eleva, pero la sombra de reposo se mantiene
     (es estática, no es motion — antes aquí ponía `none` y la habría borrado). */
  .service-card:hover, .ritual-card:hover, .pack-card:hover,
  .related-card:hover, .whoweare-card:hover { box-shadow: var(--rpe-card-shadow); }
  .rpe-scrolled .top, .rpe-scrolled .legal-top { box-shadow: none; }
  .h-section::before { display: none; }
}

/* ============================================================
   Instagram en el pie (rpe-ig)
   ------------------------------------------------------------
   El pie solo llevaba Instagram en la home; en las otras 44 páginas
   no había ni rastro. Se inyecta desde rpe-motion.js (que ya está en
   todas) en vez de tocar 44 pies con 3 estructuras distintas.
   Los estilos replican los de `.socials` de la home a propósito:
   mismo círculo, mismo borde tenue, mismo dorado al pasar por encima.
   ============================================================ */
.rpe-ig {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.25rem;
}
.rpe-ig__icon {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border: 1px solid rgba(247, 243, 236, 0.25);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(247, 243, 236, 0.7);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.rpe-ig__icon svg { width: 16px; height: 16px; }
.rpe-ig__handle {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: rgba(247, 243, 236, 0.55);
  transition: color 0.3s ease;
  word-break: break-all;   /* el arroba es largo: que no desborde en móvil */
}
.rpe-ig:hover .rpe-ig__icon { border-color: #B8924A; color: #D8B77A; }
.rpe-ig:hover .rpe-ig__handle { color: #D8B77A; }

/* Los pies de los packs van centrados: el bloque también. Con `fit-content`
   el área clicable se ajusta al icono + arroba; sin él, el <a> ocupaba todo
   el ancho del pie (1144px) y se podía pulsar desde cualquier parte. */
.rpe-ig--centrado {
  justify-content: center;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

@media (prefers-reduced-motion: reduce) {
  .rpe-ig__icon, .rpe-ig__handle { transition: none; }
}