/* ============================================================ JVO MUSICAL — styles.css Sitio artesanal de güiras y peines, Santiago de Chile. ============================================================ */ :root{ --bg:#0b0906; --bg-1:#15100a; --ink:#f4ecdd; --ink-dim:#c9bfae; --ink-faint:#8a8071; --line:rgba(244,236,221,.1); --line-strong:rgba(244,236,221,.18); --brass:#c8863f; --brass-light:#eab765; --wine:#8a2f3a; --radius:10px; --radius-sm:6px; --radius-lg:18px; --shadow:0 30px 60px -20px rgba(0,0,0,.55); --font-display:"Playfair Display",Georgia,"Times New Roman",serif; --font-body:"Inter","Segoe UI",Arial,sans-serif; --ease:cubic-bezier(.22,.61,.36,1); /* deceleración suave y gradual: uso general en todo el sitio (equivalente a power3.out) */ --ease-soft:cubic-bezier(.45,0,.15,1); /* ease-in-out equilibrado: transiciones bidireccionales (menú, modales, acordeón) */ --ease-out-back:cubic-bezier(.34,1.4,.64,1); /* leve "pop", solo para micro-confirmaciones puntuales */ /* sistema de motion, 4 niveles — de menor a mayor protagonismo */ --dur-micro:.2s; /* nivel 1: hover, focus, press, íconos */ --dur-s:.35s; /* nivel 2: botones primarios, chips, controles */ --dur-m:.5s; /* nivel 3: tarjetas, paneles pequeños, imágenes */ --dur-l:.8s; /* nivel 4: revelado de secciones, modales grandes */ --dur-stagger:.7s; /* nivel 4b: grupos escalonados — un poco más rápido que un revelado solo, para que la secuencia completa no se sienta lenta */ } *,*::before,*::after{box-sizing:border-box;} @media (prefers-reduced-motion:reduce){ /* "Reducir movimiento" no debe significar "sin transición": las animaciones grandes/continuas (parallax, marquee, cursor, zoom del hero) se apagan por JS vía prefersReducedMotion(); acá solo acortamos el resto para que los fades y cambios de estado se sigan viendo suaves, pero rápidos — un salto seco (duración casi cero) se percibe como que "no hay animación". */ *,*::before,*::after{ animation-duration:.15s !important; animation-iteration-count:1 !important; transition-duration:.15s !important; scroll-behavior:auto !important; } } html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} /* ============================================================ Rendimiento en celular — no cambia cómo se ve nada. ============================================================ */ /* El navegador se salta el trabajo de maquetar y pintar las secciones que están fuera de la pantalla, y las arma recién cuando te acercas desplazándote. contain-intrinsic-size le adelanta el alto aproximado para que la barra de scroll no salte. Es lo que más se nota en gama media. */ @media (max-width:900px){ main > section{ content-visibility:auto; contain-intrinsic-size:auto 600px; } /* el hero y la primera sección quedan fuera: son lo primero que se ve */ main > section:first-of-type, main > .hero, main > section.hero{ content-visibility:visible; } } /* es un contenedor en línea; sin esto altera la caja de las fotos que estaban sueltas dentro de sus contenedores. */ picture{display:contents;} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} /* El navegador le pone a