/* ════════════════════════════════════════════════════════════════ SOVERANTI — enhance.css Capa de mejora visual: animaciones, medallones de iconos, micro-interacciones y efectos premium. Es ADITIVA — no reemplaza nada del CSS existente y degrada con elegancia sin JS. Paleta: navy #0B1927 · gold #C4A760 · cream #F4EDE0 ════════════════════════════════════════════════════════════════ */ :root { --sv-gold: #C4A760; --sv-gold-l: #e0c78a; --sv-gold-d: #8A6820; --sv-navy: #0B1927; --sv-ease: cubic-bezier(.22,.61,.36,1); --sv-ease-out: cubic-bezier(.16,1,.3,1); } /* Respeto absoluto a quien prefiere menos movimiento */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ───────────────────────────────────────────────────────────── 1. REVEAL AL SCROLL (failsafe) Solo se oculta el contenido si tiene .fx-on, que añade enhance.js. Sin JS → todo visible siempre. ───────────────────────────────────────────────────────────── */ body.fx-on [data-fx] { opacity: 0; will-change: opacity, transform; transition: opacity .7s var(--sv-ease-out), transform .7s var(--sv-ease-out), filter .7s var(--sv-ease-out); } body.fx-on [data-fx="up"] { transform: translateY(34px); } body.fx-on [data-fx="down"] { transform: translateY(-34px); } body.fx-on [data-fx="left"] { transform: translateX(40px); } body.fx-on [data-fx="right"] { transform: translateX(-40px); } body.fx-on [data-fx="scale"] { transform: scale(.92); } body.fx-on [data-fx="blur"] { filter: blur(12px); opacity: 0; } body.fx-on [data-fx="rise"] { transform: translateY(46px) scale(.97); } body.fx-on [data-fx].fx-in { opacity: 1; transform: none; filter: none; } /* Escalonado para hijos de un mismo contenedor */ [data-fx-stagger] > * { transition-delay: calc(var(--i, 0) * 80ms); } /* ───────────────────────────────────────────────────────────── 2. KEYFRAMES ───────────────────────────────────────────────────────────── */ @keyframes sv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes sv-float-soft { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4px) rotate(-1.5deg); } } @keyframes sv-pulse-glow { 0%, 100% { box-shadow: 0 8px 28px rgba(196,167,96,.30), 0 0 0 0 rgba(196,167,96,.0); } 50% { box-shadow: 0 12px 36px rgba(196,167,96,.42), 0 0 0 10px rgba(196,167,96,.04); } } @keyframes sv-shimmer { 0% { background-position: -150% 0; } 100% { background-position: 250% 0; } } @keyframes sv-draw { to { stroke-dashoffset: 0; } } @keyframes sv-spin-slow { to { transform: rotate(360deg); } } @keyframes sv-rise-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ───────────────────────────────────────────────────────────── 3. MEDALLÓN DE ICONO REUTILIZABLE (.sv-medal) Mismo lenguaje que las portadas de cursos. Opt-in con clase. Color por defecto oro; modificadores .sv-blue, .sv-emerald, etc. ───────────────────────────────────────────────────────────── */ .sv-medal { --m: 196,167,96; --m-accent: #C4A760; --m-light: #e6cf91; --m-dark: #876818; position: relative; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 64px !important; height: 64px !important; font-size: 0 !important; /* anula font-size heredado de emojis */ border-radius: 16px !important; border: 0 !important; /* !important para ganar a contenedores como .serv-icon que fuerzan otro fondo */ background: linear-gradient(150deg, var(--m-light) 0%, var(--m-accent) 45%, var(--m-dark) 100%) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 0 0 5px rgba(var(--m),.10), 0 8px 24px rgba(var(--m),.34), 0 14px 38px rgba(0,0,0,.28), inset 0 1.5px 1px rgba(255,255,255,.42), inset 0 -2px 4px rgba(0,0,0,.22); transition: transform .3s var(--sv-ease-out), box-shadow .3s var(--sv-ease-out); } .sv-medal::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 46%); pointer-events: none; } .sv-medal svg { position: relative; z-index: 1; width: 32px !important; height: 32px !important; /* !important para ganar a .serv-icon svg { stroke:#C4A760 !important } */ stroke: #fff !important; color: #fff !important; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0,0,0,.28)); } .sv-medal.sv-lg svg { width: 40px !important; height: 40px !important; } .sv-medal.sv-sm svg { width: 25px !important; height: 25px !important; } .sv-medal.sv-lg { width: 78px; height: 78px; border-radius: 20px; } .sv-medal.sv-lg svg { width: 40px; height: 40px; } .sv-medal.sv-sm { width: 50px; height: 50px; border-radius: 13px; } .sv-medal.sv-sm svg { width: 25px; height: 25px; } /* Modificadores de color */ .sv-medal.sv-gold { --m:196,167,96; --m-accent:#C4A760; --m-light:#e6cf91; --m-dark:#876818; } .sv-medal.sv-blue { --m:59,130,246; --m-accent:#3b82f6; --m-light:#7cb0fb; --m-dark:#1d4ed8; } .sv-medal.sv-emerald { --m:16,185,129; --m-accent:#10b981; --m-light:#5eead4; --m-dark:#047857; } .sv-medal.sv-violet { --m:139,92,246; --m-accent:#8b5cf6; --m-light:#b69bfa; --m-dark:#6d28d9; } .sv-medal.sv-red { --m:239,68,68; --m-accent:#ef4444; --m-light:#f88a8a; --m-dark:#b91c1c; } .sv-medal.sv-orange { --m:245,158,11; --m-accent:#f59e0b; --m-light:#fcc24d; --m-dark:#b45309; } .sv-medal.sv-cyan { --m:6,182,212; --m-accent:#06b6d4; --m-light:#4fd9ec; --m-dark:#0e7490; } .sv-medal.sv-indigo { --m:99,102,241; --m-accent:#6366f1; --m-light:#9aa0fa; --m-dark:#4338ca; } /* Flotación suave si se marca .sv-floaty */ .sv-medal.sv-floaty { animation: sv-float 5s ease-in-out infinite; } /* Hover: el medallón cobra vida cuando se pasa por su tarjeta/enlace */ a:hover > .sv-medal, .area-card:hover .sv-medal, .card:hover .sv-medal, .sv-medal:hover { transform: translateY(-3px) scale(1.06) rotate(-2deg); box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 0 0 6px rgba(var(--m),.16), 0 14px 34px rgba(var(--m),.5), 0 20px 50px rgba(0,0,0,.34), inset 0 1.5px 1px rgba(255,255,255,.5), inset 0 -2px 4px rgba(0,0,0,.22); } /* ───────────────────────────────────────────────────────────── 4. ICONOS SVG EXISTENTES — vida sin cambiar el HTML Flotación sutil + glow al hover en los iconos ya presentes. ───────────────────────────────────────────────────────────── */ .area-icon svg, .porque-item .icon svg { transition: transform .4s var(--sv-ease-out), filter .4s var(--sv-ease-out); } .area-card:hover .area-icon svg, .porque-item:hover .icon svg { transform: translateY(-4px) scale(1.08); filter: drop-shadow(0 6px 14px rgba(196,167,96,.45)); } /* Iconos de las hero-pills: micro-reacción */ .hero-pill svg { transition: transform .3s var(--sv-ease-out); } .hero-pill:hover svg { transform: scale(1.18) rotate(-4deg); } /* Dibujado de trazo al entrar (opt-in: añadir clase .sv-draw al svg) */ body.fx-on .sv-draw path, body.fx-on .sv-draw line, body.fx-on .sv-draw polyline, body.fx-on .sv-draw polygon, body.fx-on .sv-draw circle, body.fx-on .sv-draw rect { stroke-dasharray: var(--len, 240); stroke-dashoffset: var(--len, 240); } body.fx-on .sv-draw.fx-in path, body.fx-on .sv-draw.fx-in line, body.fx-on .sv-draw.fx-in polyline, body.fx-on .sv-draw.fx-in polygon, body.fx-on .sv-draw.fx-in circle, body.fx-on .sv-draw.fx-in rect { animation: sv-draw 1.1s var(--sv-ease-out) forwards; } /* ───────────────────────────────────────────────────────────── 5. MICRO-INTERACCIONES EN TARJETAS Profundidad y brillo al pasar el ratón (clases existentes). ───────────────────────────────────────────────────────────── */ .curso-card, .area-card, .tool-item, .earn-card { transition: transform .35s var(--sv-ease-out), box-shadow .35s var(--sv-ease-out), border-color .3s ease !important; } /* Tilt 3D (lo gestiona enhance.js añadiendo .sv-tilt) */ .sv-tilt { transform-style: preserve-3d; transition: transform .18s var(--sv-ease-out), box-shadow .3s var(--sv-ease-out); } /* Barrido de luz dorada en botones primarios */ .btn-primary, .btn--primary, .curso-btn, .nav-cta { position: relative; overflow: hidden; } .btn-primary::after, .btn--primary::after, .curso-btn::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%); background-size: 200% 100%; transform: translateX(-100%); transition: transform .7s var(--sv-ease-out); pointer-events: none; } .btn-primary:hover::after, .btn--primary:hover::after, .curso-btn:hover::after { transform: translateX(100%); } /* ───────────────────────────────────────────────────────────── 6. TEXTO/ACENTOS DORADOS CON BRILLO ANIMADO (.sv-shimmer) ───────────────────────────────────────────────────────────── */ .sv-shimmer { background: linear-gradient(100deg, var(--sv-gold-d) 20%, #f3e2b0 45%, var(--sv-gold-d) 70%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: sv-shimmer 4.5s linear infinite; } /* Línea decorativa dorada que crece al entrar */ .sv-rule { height: 2px; width: 64px; background: linear-gradient(90deg, transparent, var(--sv-gold), transparent); border: none; margin: 18px auto; transform: scaleX(0); transform-origin: center; transition: transform .8s var(--sv-ease-out); } body.fx-on .sv-rule.fx-in { transform: scaleX(1); } /* ───────────────────────────────────────────────────────────── 7. HALO DECORATIVO suave para secciones oscuras (.sv-halo) ───────────────────────────────────────────────────────────── */ .sv-halo { position: relative; } .sv-halo::before { content: ''; position: absolute; inset: 0; background: radial-gradient(420px circle at 18% 12%, rgba(196,167,96,.10), transparent 60%), radial-gradient(520px circle at 88% 92%, rgba(196,167,96,.07), transparent 62%); pointer-events: none; z-index: 0; } .sv-halo > * { position: relative; z-index: 1; } /* ───────────────────────────────────────────────────────────── 8. PÁGINA DE MARKETING / SERVICIOS — pulido profesional Base limpia con emojis. Profundidad SUTIL + entrada 100% CSS. La animación de entrada NO depende de JS: corre sola al cargar y SIEMPRE termina visible. Nunca puede ocultar contenido. ───────────────────────────────────────────────────────────── */ /* IMPORTANTE: la sección de marketing usa el TEMA CLARO (theme-light.css): fondo crema, tarjetas BLANCAS, títulos oscuros. NO forzar fondos oscuros aquí — eso volvía los títulos invisibles. Solo añadimos pulido encima. */ .servicios { background: radial-gradient(1000px circle at 50% -8%, rgba(196,167,96,0.12), transparent 52%), #F8F4EE !important; } /* Sombra más rica al pasar el ratón (sobre tarjeta blanca) */ .servicio-card:hover { box-shadow: 0 18px 44px rgba(11,25,39,0.13) !important; } /* Entrada escalonada de las tarjetas — SOLO CSS (sin IntersectionObserver). Corre sola al cargar y SIEMPRE termina visible. */ @keyframes sv-svc-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .servicios-grid .servicio-card { animation: sv-svc-in .55s cubic-bezier(.16,1,.3,1) both; } .servicios-grid .servicio-card:nth-child(1) { animation-delay: .04s; } .servicios-grid .servicio-card:nth-child(2) { animation-delay: .10s; } .servicios-grid .servicio-card:nth-child(3) { animation-delay: .16s; } .servicios-grid .servicio-card:nth-child(4) { animation-delay: .22s; } .servicios-grid .servicio-card:nth-child(5) { animation-delay: .28s; } .servicios-grid .servicio-card:nth-child(6) { animation-delay: .34s; } .servicios-grid .servicio-card:nth-child(n+7){ animation-delay: .40s; } /* Banda de números — MISMO diseño que la de fitness: fondo gradiente dorado, números en tono dorado y etiquetas blancas. */ .serv-numeros { background: linear-gradient(135deg, #8A6820 0%, #C4A760 100%) !important; padding: 56px 5% !important; border-bottom: none !important; } .sn-num { font-family: 'Jost', sans-serif !important; /* tipografía Jost (no serif) — no cambiar */ font-weight: 900 !important; color: #ffffff !important; font-size: 2.8rem !important; line-height: 1 !important; text-shadow: 0 1px 4px rgba(90,68,18,0.28) !important; } .sn-label { color: rgba(255,255,255,0.82) !important; margin-top: 8px !important; } .sn-item { padding: 8px 4px; border-radius: 14px; transition: transform .25s ease; } .sn-item:hover { transform: translateY(-3px); } /* ───────────────────────────────────────────────────────────── 9. BOTÓN "VOLVER ARRIBA" (lo inyecta enhance.js) ───────────────────────────────────────────────────────────── */ .sv-to-top { position: fixed; bottom: 24px; right: 24px; z-index: 90; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(145deg, #d4ba78, #C4A760 55%, #8A6820); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(196,167,96,0.35); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s var(--sv-ease-out), visibility .3s, transform .3s var(--sv-ease-out), box-shadow .3s; } .sv-to-top.show { opacity: 1; visibility: visible; transform: none; } .sv-to-top:hover { transform: translateY(-3px); box-shadow: 0 11px 28px rgba(196,167,96,0.5); } .sv-to-top svg { width: 20px; height: 20px; stroke: #0B1927; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } /* ───────────────────────────────────────────────────────────── 10. ICONOS-EMOJI DE TARJETA (fitness, desarrollo personal) Los presenta en un contenedor premium dorado, legible sobre fondos claros y oscuros. NO se toca la clase genérica .icon. ───────────────────────────────────────────────────────────── */ .plan-icon, .extra-icon, .ref-icon, .dp-pilar-icon, .dp-serv-icon, .dp-curso-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 64px !important; height: 64px !important; border-radius: 17px !important; font-size: 1.9rem !important; line-height: 1 !important; background: linear-gradient(145deg, rgba(196,167,96,0.22) 0%, rgba(196,167,96,0.06) 100%) !important; border: 1px solid rgba(196,167,96,0.34) !important; box-shadow: 0 8px 20px rgba(196,167,96,0.12), inset 0 1px 0 rgba(255,255,255,0.16) !important; transition: transform .3s var(--sv-ease-out), box-shadow .3s ease !important; } .plan-icon:hover, .extra-icon:hover, .ref-icon:hover, .dp-pilar-icon:hover, .dp-serv-icon:hover, .dp-curso-icon:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 26px rgba(196,167,96,0.2), inset 0 1px 0 rgba(255,255,255,0.22) !important; } /* ───────────────────────────────────────────────────────────── 11. AJUSTES MÓVIL ───────────────────────────────────────────────────────────── */ @media (max-width: 560px) { /* Banda de números de marketing: 2×2 en vez de una columna larga */ .sn-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px 14px !important; } .serv-numeros { padding: 40px 5% 30px !important; } }