/* Catálogo DIYFOMO — base compartida (reset, utilidades, animaciones).
   Cada web define sus tokens en styles.css: --bg --ink --accent --serif --sans */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; overflow-x: clip; }
body { font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; list-style: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; font-weight: 400; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 3px; border-radius: 4px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 9999; padding: .6rem 1rem; border-radius: 8px; background: var(--ink); color: var(--bg); font-weight: 600; }
.skip-link:focus { top: 1rem; }

/* Aparición al hacer scroll */
.is-armed .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0s); }
.is-armed .reveal.is-in { opacity: 1; transform: none; }
.is-armed .reveal-img { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s cubic-bezier(.77,0,.18,1); transition-delay: var(--d, 0s); }
.is-armed .reveal-img.is-in { clip-path: inset(0 0 0 0); }

/* Titulares palabra por palabra */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
[data-split] .wi { display: inline-block; transform: translateY(105%); transition: transform 1.1s cubic-bezier(.16,1,.3,1); }
[data-split].is-split .wi { transform: none; }

/* Imagen con parallax: el contenedor recorta */
.px-wrap { overflow: hidden; }
.px-wrap > img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); will-change: transform; }

/* Barra de progreso */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 200; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }

/* Firma del catálogo */
.studio-credit { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding: 14px 16px; font: 500 12px/1.4 system-ui, -apple-system, Segoe UI, sans-serif; letter-spacing: .02em; background: #0b0a0f; color: #cfcdd5; text-align: center; }
.studio-credit b { color: #d4ff3a; font-weight: 700; }
.studio-credit a { color: #0b0a0f; background: #d4ff3a; padding: 5px 12px; border-radius: 999px; font-weight: 700; }
.photo-credits { font-size: 11px; opacity: .6; line-height: 1.5; }
.photo-credits a { text-decoration: underline; }

/* Botón flotante de WhatsApp */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 12px 30px -8px rgba(37,211,102,.6); transition: transform .4s cubic-bezier(.16,1,.3,1); }
.wa-float:hover { transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .marquee-track, [data-loop] { animation-duration: 120s !important; }
}