/* SALVIA BLANCA — capa de vida: textura, animaciones de entrada y micro-interacciones. Todo CSS/GPU (transform + opacity), sin librerías. Respeta prefers-reduced-motion: si el usuario lo pide, nada se mueve. */ /* ─── Grano: textura de papel sobre todo el sitio ─── SVG feTurbulence inline; fijo, no intercepta clics, casi imperceptible pero le quita el plano digital. */ body::after { content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: 0.05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ─── Reveal al hacer scroll ─── OJO: sólo escondemos si hay JS (, lo pone un script inline en el ). Si el JS falla o está bloqueado, el contenido se ve normal: nunca dejamos texto invisible por culpa de una animación. */ .js .rv { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0ms); will-change: opacity, transform; } .js .rv.in { opacity: 1; transform: none; } /* Variante: la imagen se descubre con una cortina */ .js .rv-img { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease); transition-delay: var(--d, 0ms); } .js .rv-img.in { clip-path: inset(0 0 0 0); } /* ─── Hero: la foto respira (Ken Burns lento) ─── */ .hero-bg { animation: breathe 26s ease-in-out infinite alternate; } @keyframes breathe { from { transform: scale(1.03); } to { transform: scale(1.14) translateY(-1.5%); } } /* Entrada del hero: cada línea sube con retraso. Va con animación (no transition), así que se auto-resuelve aunque no haya JS — forwards deja el estado final visible. */ .hero-inner > * { opacity: 0; transform: translateY(24px); animation: riseIn 1s var(--ease) forwards; } .hero-inner > *:nth-child(1) { animation-delay: 0.15s; } .hero-inner > *:nth-child(2) { animation-delay: 0.3s; } .hero-inner > *:nth-child(3) { animation-delay: 0.45s; } .hero-inner > *:nth-child(4) { animation-delay: 0.6s; } @keyframes riseIn { to { opacity: 1; transform: none; } } /* Indicador de scroll */ .scroll-cue { position: absolute; left: 50%; bottom: var(--sp-8); transform: translateX(-50%); z-index: 2; display: grid; justify-items: center; gap: var(--sp-2); /* Va sobre la foto (sin filtro oscuro), así que texto oscuro + pastilla crema translúcida: legible sobre cualquier parte de la imagen. */ color: var(--color-texto); background: rgba(248, 244, 236, 0.82); backdrop-filter: blur(4px); padding: var(--sp-3) var(--sp-4) var(--sp-2); border-radius: var(--radio-full); font-family: var(--font-cuerpo); font-size: var(--txt-xs); letter-spacing: 0.24em; text-transform: uppercase; opacity: 0; animation: riseIn 1s var(--ease) 1s forwards; } .scroll-cue i { display: block; width: 1px; height: 28px; background: linear-gradient(180deg, var(--color-realce), transparent); animation: drop 2.2s var(--ease) infinite; } @keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* ─── Marquee: cinta infinita de palabras de marca ─── */ .marquee { overflow: hidden; background: var(--sb-blanco); color: var(--color-texto); padding: var(--sp-4) 0; border-block: 1px solid var(--color-borde); } .marquee-track { display: flex; width: max-content; animation: slide 42s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee span { font-family: var(--font-titulo); font-size: var(--txt-lg); letter-spacing: 0.06em; padding: 0 var(--sp-8); white-space: nowrap; display: flex; align-items: center; gap: var(--sp-8); } .marquee span::after { content: '✦'; color: var(--color-realce); font-size: 0.6em; } @keyframes slide { to { transform: translateX(-50%); } } /* ─── Número editorial de sección (01 · 02 · 03) ─── */ .sec-num { font-family: var(--font-titulo); font-size: var(--txt-sm); color: var(--sb-ambar); letter-spacing: 0.2em; display: block; margin-bottom: var(--sp-2); } /* ─── Micro-interacciones ─── */ /* Botón: la flecha se desliza */ .btn-primario, .btn-secundario, .btn-claro { position: relative; overflow: hidden; } .btn-primario::after, .btn-secundario::after, .btn-claro::after { content: '→'; display: inline-block; width: 0; opacity: 0; transform: translateX(-6px); transition: width var(--dur-medio) var(--ease), opacity var(--dur-medio) var(--ease), transform var(--dur-medio) var(--ease); } .btn-primario:hover::after, .btn-secundario:hover::after, .btn-claro:hover::after { width: 1.1em; opacity: 1; transform: translateX(4px); } /* Enlaces del nav: subrayado que crece desde la izquierda */ .nav-links a { position: relative; } .nav-links a::after { content: ''; position: absolute; left: 0; bottom: -4px; height: 1px; width: 100%; background: var(--color-acento); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-medio) var(--ease); } .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; } /* Título con acento en cursiva (toque editorial) */ .ital { font-style: italic; color: var(--color-realce); } /* ─── Accesibilidad: si el usuario prefiere sin movimiento, todo quieto ─── */ @media (prefers-reduced-motion: reduce) { .rv, .rv-img, .hero-inner > *, .scroll-cue { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; transition: none !important; } .hero-bg, .marquee-track, .scroll-cue i { animation: none !important; } }