/* Capa de movimiento. Todo lo que oculta contenido depende de html.js-anim, que solo se pone si el navegador no pide menos movimiento; si GSAP no carga, el guion del la quita. */ :root { interpolate-size: allow-keywords; } /* ---------- Transiciones entre páginas (View Transitions entre documentos) ---------- */ @view-transition { navigation: auto; } .cabecera { view-transition-name: cabecera; } .flotante { view-transition-name: flotante; } ::view-transition-old(root) { animation: vt-salida .28s cubic-bezier(.4, 0, 1, 1) both; } ::view-transition-new(root) { animation: vt-entrada .5s cubic-bezier(.16, 1, .3, 1) both; } @keyframes vt-salida { to { opacity: 0; transform: translateY(-14px) scale(.99); } } @keyframes vt-entrada { from { opacity: 0; transform: translateY(24px); } } html.lenis, html.lenis body { height: auto; } html.lenis { scroll-behavior: auto; } .lenis.lenis-stopped { overflow: clip; } .lenis.lenis-smooth iframe { pointer-events: none; } /* ---------- Estados iniciales (solo con js-anim) ---------- */ .js-anim .portada h1, .js-anim .portada .grande, .js-anim .portada .botones > *, .js-anim .portada__nota, .js-anim .disco__foto, .js-anim .disco__cielo, .js-anim .disco__sello, .js-anim .cabeza h1, .js-anim .cabeza .grande, .js-anim .cabeza .migas, .js-anim .cabeza .botones, .js-anim .cabeza__foto { opacity: 0; } /* ---------- Barra de avance de lectura ---------- */ .progreso { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, var(--hoja-vivo), var(--ciruela) 60%, var(--cielo)); transform-origin: left; transform: scaleX(0); pointer-events: none; } /* ---------- Cabecera que se compacta y se esconde ---------- */ .cabecera { transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .3s, background-color .3s; } .cabecera .cabecera__fila { transition: min-height .3s; } .cabecera--compacta { box-shadow: 0 10px 30px rgba(59, 11, 35, .09); } .cabecera--compacta .cabecera__fila { min-height: 64px; } .cabecera--oculta { transform: translateY(-100%); } @media (max-width: 960px) { .cabecera--compacta .navegacion { top: 64px; max-height: calc(100vh - 64px); } } /* ---------- Auroras: manchas de color que flotan detrás de la portada y los encabezados ---------- */ .portada, .cabeza { isolation: isolate; } .aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .aurora span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: flotar 18s ease-in-out infinite alternate; } .aurora span:nth-child(1) { width: 46vw; height: 46vw; left: -12vw; top: -18vw; background: #fbe0ec; } .aurora span:nth-child(2) { width: 34vw; height: 34vw; right: -8vw; top: 10%; background: #dfe7fd; animation-duration: 22s; animation-delay: -6s; } .aurora span:nth-child(3) { width: 26vw; height: 26vw; left: 30%; bottom: -14vw; background: #e3f3e6; animation-duration: 26s; animation-delay: -12s; } @keyframes flotar { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4vw, 3vw) scale(1.08); } 100% { transform: translate(-3vw, 5vw) scale(.95); } } .cabeza::before { content: ""; position: absolute; z-index: -1; right: -120px; top: -140px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(180, 198, 244, .55), transparent 70%); animation: flotar 20s ease-in-out infinite alternate; } .cabeza::after { content: ""; position: absolute; z-index: -1; left: -80px; bottom: -160px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(122, 25, 70, .12), transparent 70%); animation: flotar 24s ease-in-out infinite alternate-reverse; } .cabeza--ciruela::before { background: radial-gradient(circle, rgba(180, 198, 244, .22), transparent 70%); } .cabeza--ciruela::after { background: radial-gradient(circle, rgba(42, 154, 69, .22), transparent 70%); } /* Hojas que se mecen junto al disco de la portada */ .disco__hojas { transform-origin: 20% 90%; animation: mecer 7s ease-in-out infinite alternate; } @keyframes mecer { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } } /* ---------- Cinta en movimiento ---------- */ .cinta { background: var(--ciruela-900); color: #fff; overflow: hidden; padding: 22px 0; transform: rotate(-1.6deg); margin: 8px -2vw 0; width: calc(100% + 4vw); box-shadow: 0 18px 40px rgba(59, 11, 35, .18); } .cinta__pista { display: flex; width: max-content; will-change: transform; animation: cinta 38s linear infinite; } .cinta ul { display: flex; align-items: center; gap: 34px; padding: 0 17px; margin: 0; list-style: none; } .cinta li { display: inline-flex; align-items: center; gap: 34px; white-space: nowrap; font-family: var(--titulos); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 2rem); letter-spacing: -.01em; } .cinta li svg { width: 26px; height: 26px; color: var(--cielo); flex: none; } .cinta li:nth-child(even) svg { color: var(--hoja-vivo); } @keyframes cinta { to { transform: translateX(-50%); } } .cinta-envoltura { overflow: hidden; padding: 28px 0 36px; } /* ---------- Franjas decorativas del bloque de donativo ---------- */ .donar-bloque__franjas { position: absolute; right: -10%; top: 12%; width: 55%; height: 240px; z-index: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .07) 0 14px, transparent 14px 26px); border-radius: 0 0 0 120px; } .donar-bloque .contenedor { position: relative; z-index: 1; } /* ---------- Botones: brillo al pasar y corazón que late ---------- */ .btn { position: relative; overflow: hidden; isolation: isolate; will-change: transform; } .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s cubic-bezier(.16, 1, .3, 1); } .btn:hover::after { transform: translateX(120%); } .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(59, 11, 35, .18); } .btn--contorno:hover, .btn--claro:hover { box-shadow: 0 12px 26px rgba(59, 11, 35, .12); } .btn:hover svg[aria-hidden] { animation: latido .9s ease-in-out; } .cabecera .btn--principal svg { animation: latido 1.1s ease-in-out 2.5s 2; } @keyframes latido { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.25); } 40% { transform: scale(.95); } 60% { transform: scale(1.18); } } /* ---------- WhatsApp flotante: entra y llama la atención ---------- */ .flotante { animation: entra-flotante .9s cubic-bezier(.34, 1.56, .64, 1) 1.4s backwards; } .flotante::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; box-shadow: 0 0 0 0 rgba(28, 143, 74, .55); animation: onda 3.2s ease-out 3s infinite; } .flotante:hover { transform: translateY(-3px) scale(1.03); } @keyframes entra-flotante { from { opacity: 0; transform: translateY(40px) scale(.6); } } @keyframes onda { 0% { box-shadow: 0 0 0 0 rgba(28, 143, 74, .5); } 70%, 100% { box-shadow: 0 0 0 18px rgba(28, 143, 74, 0); } } /* ---------- Tarjetas e imágenes con respuesta al puntero ---------- */ .tarjeta, .camino, .formulario { transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s; } .tarjeta:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(59, 11, 35, .10); } .camino:hover { transform: translateY(-4px); } .banco { transform-style: preserve-3d; will-change: transform; } .fila__foto { overflow: hidden; border-radius: 24px; } .apoyos__fotos { overflow-x: clip; } .fila__foto img, .cuadricula img, .mosaico img { transition: transform .8s cubic-bezier(.16, 1, .3, 1); } .fila__foto:hover img { transform: scale(1.03); } .cuadricula a { position: relative; } .cuadricula a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(59, 11, 35, .45), transparent 55%); opacity: 0; transition: opacity .4s; } .cuadricula a:hover::after, .mosaico a:hover::after { opacity: 1; } .cuadricula a:hover img { transform: scale(1.05); } .mosaico a { position: relative; } .mosaico a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(59, 11, 35, .45), transparent 55%); opacity: 0; transition: opacity .4s; } .apoyos__lista li { transition: background-color .3s, padding .3s; border-radius: 12px; } .apoyos__lista li:hover { background: rgba(255, 255, 255, .6); padding-left: 10px; } .apoyos__lista li:hover svg { animation: mecer-hoja .8s ease-in-out; } @keyframes mecer-hoja { 30% { transform: rotate(-18deg) scale(1.15); } 70% { transform: rotate(10deg); } } .menu a { position: relative; transition: color .2s, background-color .2s; } /* Copiar: el botón confirma con un pequeño salto */ .copiar { transition: background-color .25s, border-color .25s, color .25s, transform .25s; } .copiar.copiado { animation: salto .5s cubic-bezier(.34, 1.56, .64, 1); } @keyframes salto { 40% { transform: scale(1.12); } } /* ---------- Preguntas: se abren con animación ---------- */ .preguntas details::details-content { block-size: 0; overflow: hidden; transition: block-size .4s cubic-bezier(.16, 1, .3, 1), content-visibility .4s allow-discrete; } .preguntas details[open]::details-content { block-size: auto; } .preguntas summary { transition: color .2s, padding-left .3s; } .preguntas summary:hover { color: var(--ciruela); padding-left: 6px; } /* Visor de fotos: aparece con fundido */ .visor { opacity: 0; transition: opacity .3s; } .visor.abierto { opacity: 1; } .visor.abierto img { animation: foto-entra .45s cubic-bezier(.16, 1, .3, 1); } @keyframes foto-entra { from { opacity: 0; transform: scale(.94); } } /* Menú móvil: se desliza */ @media (max-width: 960px) { .navegacion.abierta { animation: menu-baja .35s cubic-bezier(.16, 1, .3, 1); } .navegacion.abierta .menu li { animation: menu-item .45s cubic-bezier(.16, 1, .3, 1) both; } .navegacion.abierta .menu li:nth-child(2) { animation-delay: .04s; } .navegacion.abierta .menu li:nth-child(3) { animation-delay: .08s; } .navegacion.abierta .menu li:nth-child(4) { animation-delay: .12s; } .navegacion.abierta .menu li:nth-child(5) { animation-delay: .16s; } .navegacion.abierta .menu li:nth-child(6) { animation-delay: .20s; } } @keyframes menu-baja { from { opacity: 0; transform: translateY(-12px); } } @keyframes menu-item { from { opacity: 0; transform: translateX(-16px); } } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } .cinta__pista { animation: none; } .btn:hover, .tarjeta:hover, .camino:hover { transform: none; } } /* El contador del sello conserva el tamaño del número */ .disco__sello strong span { font-size: inherit; font-weight: inherit; }