/* ════════════════════════════════════════════════════════════
   Estudio Demo Secchi — estilos compartidos
   (extraído del <style> del diseño original para edición en un solo lugar)
   ════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }
body { font-feature-settings: "ss01"; -webkit-font-smoothing: antialiased; }

.font-display { font-optical-sizing: auto; }

/* eyebrow / labels mono */
.eyebrow { font-family: "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: 0.18em; }

/* underline animado en links de nav + estado de página activa */
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; left: 0; bottom: -4px; height: 1.5px; width: 0; background: #C8A04A; transition: width .3s ease; }
.nav-link:hover::after, .nav-link:focus-visible::after { width: 100%; }
.nav-link[aria-current="page"] { color: #14211F; }
.nav-link[aria-current="page"]::after { width: 100%; }

/* reveal al scrollear */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* hover de cards bento */
.lift { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.lift:hover { transform: translateY(-4px); border-color: #C8A04A; }

/* textura sutil para placeholders de imagen */
.ph-texture { background-image: repeating-linear-gradient(135deg, rgba(20,33,31,.05) 0 2px, transparent 2px 9px); }
.ph-texture-dark { background-image: repeating-linear-gradient(135deg, rgba(245,241,232,.06) 0 2px, transparent 2px 9px); }

/* pulso del FAB whatsapp */
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
.fab-pulse { animation: pulse-ring 2.6s infinite; }

/* slider en modo oscuro */
input[type=range].rng { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 9999px; background: #18564F; outline: none; }
input[type=range].rng::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 9999px; background: #C8A04A; cursor: pointer; border: 3px solid #0C3B3C; }
input[type=range].rng::-moz-range-thumb { width: 22px; height: 22px; border-radius: 9999px; background: #C8A04A; cursor: pointer; border: 3px solid #0C3B3C; }

*:focus-visible { outline: 2px solid #C8A04A; outline-offset: 2px; border-radius: 2px; }
[x-cloak] { display: none !important; }

/* ════════════════════════════════════════════════════════════
   Pulido de movimiento: transición ENTRE páginas (View Transitions
   API, multi-página) + aparición escalonada del texto al cargar.
   ════════════════════════════════════════════════════════════ */

/* Transición al navegar de una página a otra (cross-document).
   Soportado en Chromium y Safari; en otros navega normal. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .25s ease both; }
::view-transition-new(root) { animation: vt-in .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Aparición del contenido al cargar (rise). Solo si el usuario no
   pidió menos movimiento; si no, el contenido queda visible normal. */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-intro > *,
  .hero-aside,
  .page-intro .max-w-6xl > * { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
  /* stagger del hero (home) */
  .hero-intro > :nth-child(1) { animation-delay: .05s; }
  .hero-intro > :nth-child(2) { animation-delay: .13s; }
  .hero-intro > :nth-child(3) { animation-delay: .21s; }
  .hero-intro > :nth-child(4) { animation-delay: .29s; }
  .hero-intro > :nth-child(5) { animation-delay: .37s; }
  .hero-aside { animation-delay: .30s; }
  /* stagger del encabezado de páginas internas */
  .page-intro .max-w-6xl > :nth-child(2) { animation-delay: .10s; }
  .page-intro .max-w-6xl > :nth-child(3) { animation-delay: .18s; }
  .page-intro .max-w-6xl > :nth-child(4) { animation-delay: .26s; }
}

/* respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .fab-pulse { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}