/* ============================================================ ACATHI — capa de movimiento (motion layer) Animaciones de entrada por scroll, micro-interacciones y fondos animados. CENTRAL: se carga en todas las pantallas, así que el refinamiento se propaga a todo el sitio. Reglas de seguridad / accesibilidad: · Los estados ocultos SOLO se aplican bajo `html.js` → sin JavaScript el contenido se muestra normal (no queda invisible). · Bajo `prefers-reduced-motion: reduce` los elementos aparecen sin desplazamiento ni animación de fondo (se complementa con la regla global de acathi.css que neutraliza duraciones). Prefijo: .ac- · hooks de JS: [data-reveal], [data-count], [data-parallax] ============================================================ */ /* ————————————————————————— TOKENS DE MOVIMIENTO ————————————————————————— */ :root { --reveal-distance: 28px; --reveal-dur: 700ms; --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1); --float-dur: 9s; } /* ————————————————————————— SCROLL REVEAL ————————————————————————— */ /* Estado oculto: solo con JS activo. El JS añade .js a al cargar. */ html.js [data-reveal] { opacity: 0; transform: translateY(var(--reveal-distance)); transition: opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease); will-change: opacity, transform; } html.js [data-reveal="left"] { transform: translateX(calc(var(--reveal-distance) * -1.4)); } html.js [data-reveal="right"] { transform: translateX(calc(var(--reveal-distance) * 1.4)); } html.js [data-reveal="scale"] { transform: scale(0.94); } html.js [data-reveal="fade"] { transform: none; } html.js [data-reveal].is-revealed { opacity: 1; transform: none; } /* Escalonado: el JS fija --reveal-delay; aquí lo aplicamos como retardo. */ html.js [data-reveal] { transition-delay: var(--reveal-delay, 0ms); } /* Contenedor con hijos escalonados automáticamente (sin tocar el JS). */ html.js [data-reveal-children] > * { opacity: 0; transform: translateY(var(--reveal-distance)); transition: opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease); } html.js [data-reveal-children].is-revealed > * { opacity: 1; transform: none; } html.js [data-reveal-children].is-revealed > *:nth-child(1) { transition-delay: 0ms; } html.js [data-reveal-children].is-revealed > *:nth-child(2) { transition-delay: 90ms; } html.js [data-reveal-children].is-revealed > *:nth-child(3) { transition-delay: 180ms; } html.js [data-reveal-children].is-revealed > *:nth-child(4) { transition-delay: 270ms; } html.js [data-reveal-children].is-revealed > *:nth-child(5) { transition-delay: 360ms; } html.js [data-reveal-children].is-revealed > *:nth-child(6) { transition-delay: 450ms; } /* Bajo reduced-motion: nunca ocultamos por transform; solo aparición suave. */ @media (prefers-reduced-motion: reduce) { html.js [data-reveal], html.js [data-reveal-children] > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ————————————————————————— TEXTO CON GRADIENTE ————————————————————————— */ .ac-text-gradient { background: linear-gradient(100deg, var(--primary) 0%, var(--secondary) 60%, var(--acathi-magenta-bright) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .ac-text-gradient-bright { background: linear-gradient(100deg, #ffb0cc 0%, var(--acathi-magenta-bright) 55%, #ffb957 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ————————————————————————— PRIMITIVAS EDITORIALES (globales) ————————————————————————— */ /* Reutilizables por todas las pantallas rediseñadas. */ .ac-h-xl { font-family: var(--font-display); font-weight: var(--weight-extra); font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--primary); margin: 0; } .ac-section-head { max-width: 720px; margin: 0 0 48px; } .ac-section-head .ac-h-xl { margin: 16px 0 0; } .ac-section-head .ac-lead { margin: 18px 0 0; } .ac-section-head--center { margin-left: auto; margin-right: auto; text-align: center; } .ac-section-head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } /* Subrayado animado del trazo del eyebrow (acompaña a .ac-eyebrow--tick). */ .ac-eyebrow--tick.ac-eyebrow--anim::before { width: 0; animation: ac-tick-grow 800ms var(--reveal-ease) 200ms forwards; } @keyframes ac-tick-grow { to { width: 28px; } } /* ————————————————————————— FONDOS ANIMADOS ————————————————————————— */ /* Manchas de color (blobs) que flotan suavemente; decorativas. */ .ac-blob { position: absolute; border-radius: 50%; filter: blur(48px); opacity: 0.5; pointer-events: none; z-index: 0; animation: ac-float var(--float-dur) ease-in-out infinite; } .ac-blob--primary { background: radial-gradient(circle at 30% 30%, rgba(115,69,182,0.55), transparent 70%); } .ac-blob--secondary { background: radial-gradient(circle at 30% 30%, rgba(223,14,132,0.45), transparent 70%); } .ac-blob--amber { background: radial-gradient(circle at 30% 30%, rgba(220,144,0,0.40), transparent 70%); } .ac-blob--delay-1 { animation-delay: -3s; } .ac-blob--delay-2 { animation-delay: -6s; } @keyframes ac-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(18px, -22px) scale(1.06); } 66% { transform: translate(-14px, 14px) scale(0.96); } } /* Malla de gradiente animada (hero). Cambia el punto focal lentamente. */ .ac-mesh { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 70% at 20% 20%, rgba(115,69,182,0.16), transparent 60%), radial-gradient(50% 60% at 85% 25%, rgba(223,14,132,0.14), transparent 60%), radial-gradient(60% 80% at 70% 90%, rgba(220,144,0,0.10), transparent 60%); background-size: 160% 160%; animation: ac-mesh-shift 18s ease-in-out infinite; } @keyframes ac-mesh-shift { 0%, 100% { background-position: 0% 0%, 100% 0%, 50% 100%; } 50% { background-position: 30% 20%, 70% 30%, 60% 70%; } } /* ————————————————————————— MICRO-INTERACCIONES ————————————————————————— */ /* Brillo diagonal al pasar el ratón por botones primarios. */ .ac-btn { position: relative; overflow: hidden; isolation: isolate; } .ac-btn::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-18deg); transition: left 600ms var(--reveal-ease); z-index: -1; } .ac-btn:hover::after { left: 140%; } .ac-btn--outline::after, .ac-btn--ghost::after { background: linear-gradient(100deg, transparent, rgba(49,0,101,0.10), transparent); } /* Zoom suave de la foto dentro de tarjetas-foto al hover. */ .ac-photo-card img { transition: transform 800ms var(--reveal-ease); } .ac-photo-card:hover img { transform: scale(1.06); } /* Elevación + borde teñido en tarjetas con clase utilitaria. */ .ac-lift { transition: transform var(--dur-base) var(--reveal-ease), box-shadow var(--dur-base) var(--reveal-ease); } .ac-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); } /* Icon tiles: el icono "respira" al hover de la tarjeta contenedora. */ .ac-icon-tile { transition: transform var(--dur-base) var(--reveal-ease); } .ac-pillar-card:hover .ac-icon-tile, .ac-stat-card:hover .ac-icon-tile { transform: scale(1.08) rotate(-3deg); } /* Contadores: tabular para que no "salte" el ancho al animar. */ [data-count] { font-variant-numeric: tabular-nums; } /* Indicador de scroll del hero. */ .ac-scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; color: var(--on-surface-variant); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-family: var(--font-display); font-weight: var(--weight-semibold); } .ac-scroll-cue .material-symbols-outlined { font-size: 22px; animation: ac-bob 1.8s ease-in-out infinite; } @keyframes ac-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* ————————————————————————— DEFINICIÓN Y FOCO DE BOTONES ————————————————————————— */ /* Refuerzo de nitidez: borde sutil que recorta el botón sobre cualquier fondo (sin cambiar el color de relleno de marca) + sombra de texto mínima en variantes sólidas para que la tipografía no se "funda" con el fondo. */ .ac-btn:not(.ac-btn--outline):not(.ac-btn--ghost):not(.ac-btn--glass) { box-shadow: var(--shadow-primary), inset 0 0 0 1px rgba(255,255,255,0.14); } .ac-btn--secondary { box-shadow: var(--shadow-secondary), inset 0 0 0 1px rgba(255,255,255,0.16); } .ac-btn--amber { box-shadow: 0 8px 20px rgba(220,144,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.18); } .ac-btn--outline { border-color: var(--primary); border-width: 1.5px; } /* Foco de teclado visible y de alto contraste en cualquier fondo (WCAG 2.4.7). */ .ac-btn:focus-visible { outline: 3px solid var(--secondary); outline-offset: 3px; } .ac-btn--secondary:focus-visible, .ac-btn--glass:focus-visible { outline-color: #fff; } /* ————————————————————————— BOTÓN GLASS (global: hero oscuro, 404, CTAs) ————————————————————————— */ .ac-btn--glass { background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.55); box-shadow: 0 6px 18px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.30); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); } .ac-btn--glass:hover { background: rgba(255,255,255,0.26); border-color: #fff; color: #fff; } /* ————————————————————————— SINGLES DE CPT (plantillas FSE) ————————————————————————— Clases usadas por templates/single-*.html que no estaban definidas: tira de meta (.ac-surface-container), items, CTA y enlace de vuelta. Sirve a evento, formación, actividad, publicación, campaña, historia y servicio. */ .ac-cpt-single > * + * { margin-top: 22px; } .ac-cpt-single .ac-lead { margin-top: 10px; } .ac-surface-container { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; background: var(--surface-container-low); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 18px 22px 18px 26px; } .ac-surface-container::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rainbow-gradient); } .ac-surface-container > .wp-block-group, .ac-surface-container > .ac-meta-item { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 14px; color: var(--on-surface); } .ac-surface-container .material-symbols-outlined { font-size: 20px; color: var(--primary); flex: none; } .ac-surface-container p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--on-surface-variant); font-family: var(--font-body); } /* CTA de cierre del single (descarga / inscripción / súmate). */ .ac-cpt-cta p { flex: 1; min-width: 180px; color: var(--on-surface); font-family: var(--font-display); font-weight: var(--weight-semibold); } .ac-cpt-cta__url, .ac-event-register-url, .ac-training-register-url, .ac-service-cta__url, .ac-event-register-cta, .ac-training-cta { font-family: var(--font-body); font-size: 13px; color: var(--secondary); word-break: break-word; } /* Botones enlazados a meta (Block Bindings → core/button). Aspecto .ac-btn. */ .ac-cpt-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; } .ac-cpt-buttons .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; background: var(--secondary); color: var(--on-secondary); font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--label-md-size); letter-spacing: 0.02em; line-height: 1; padding: 16px 32px; border-radius: var(--radius-md); border: 2px solid transparent; box-shadow: var(--shadow-secondary), inset 0 0 0 1px rgba(255,255,255,0.16); text-decoration: none; transition: transform var(--dur-fast) var(--ease-out); } .ac-cpt-buttons .wp-block-button__link:hover { transform: translateY(-2px); color: var(--on-secondary); text-decoration: none; } .ac-cpt-buttons .is-style-outline .wp-block-button__link { background: var(--surface-container-lowest); color: var(--primary); border-color: var(--primary); box-shadow: none; } .ac-cpt-buttons .is-style-outline .wp-block-button__link:hover { color: var(--primary); } .ac-cpt-buttons .wp-block-button__link:focus-visible { outline: 3px solid var(--secondary); outline-offset: 3px; } /* Enlace «← Volver». */ .ac-back-link { margin-top: 28px; } .ac-back-link a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-family: var(--font-display); font-weight: var(--weight-semibold); color: var(--secondary); text-decoration: none; } .ac-back-link a:hover { color: var(--primary); text-decoration: none; } /* Default de --tone para el hero de servicio cuando el single no lo fija. */ .ac-service-detail-hero { --tone: var(--primary); } /* ————————————————————————— FOOTER (acento arcoíris global) ————————————————————————— */ .ac-footer { position: relative; } .ac-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--rainbow-gradient); } /* ————————————————————————— ESTADOS BAJO REDUCED-MOTION ————————————————————————— */ @media (prefers-reduced-motion: reduce) { .ac-blob, .ac-mesh, .ac-scroll-cue .material-symbols-outlined { animation: none !important; } .ac-btn::after { display: none; } .ac-eyebrow--tick.ac-eyebrow--anim::before { width: 28px; animation: none; } }