/* ═══════════════════════════════════════════════════════════════════ Lagunbot Presupuestos · Hoja de MARCA para las páginas públicas (landing, cluster SEO y login). Se carga DESPUÉS de app.css y solo cuando . El panel no la ve: sigue con su sistema propio y esta hoja no puede romperlo. Replica lo que hay en lagunbot.com (inspeccionado por CSS computado, 3-sep-2026): fondo negro (#000 / #0D0D0D), Anton en mayúsculas para titulares, DM Sans 16px/1.6 para el cuerpo, gris #B0ABA5, naranja #FF751F, botones naranja con texto NEGRO (7,8:1 de contraste; el blanco sobre naranja se queda en 2,7:1 y no pasa AA), radio 12px. Curvas de movimiento (documentadas aquí, se usan por nombre): --ease-out cubic-bezier(.23, 1, .32, 1) posarse (quint out) --ease-peso cubic-bezier(.16, .84, .28, 1) con inercia, sin rebote --ease-rebote cubic-bezier(.34, 1.56, .64, 1) sobrepasa y vuelve (letras, pops) --ease-elevar cubic-bezier(.2, .9, .3, 1.25) hover que levanta con un toque de rebote --ease-cajon cubic-bezier(.32, .72, 0, 1) cajón del menú móvil Nunca ease-in ni lineal en nada que vea el usuario. ═══════════════════════════════════════════════════════════════════ */ /* ── Fuentes de marca, autoalojadas (OFL). latin primero; latin-ext solo se descarga si un texto lo necesita (unicode-range). ─────────────── */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Anton.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Anton-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/DMSans.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/DMSans-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Respaldo con métricas ajustadas: si Anton tarda, Impact ocupa casi el mismo sitio y el titular no pega un salto al llegar la fuente (CLS). */ @font-face { font-family: 'Anton-respaldo'; src: local('Impact'), local('Arial Narrow Bold'), local('HelveticaNeue-CondensedBold'); size-adjust: 94%; ascent-override: 108%; descent-override: 24%; line-gap-override: 0%; } /* ── Tokens: la paleta de lagunbot.com sobre los nombres que ya usa toda la hoja base. Remapear aquí es lo que vuelve oscura la landing entera sin reescribir cada regla. ──────────────────────────────────────────── */ body.publica { --bg: #0D0D0D; --surface: #141414; --surface-2: #101010; --surface-3: #1C1C1C; --ink: #FFFFFF; --ink-2: #B0ABA5; /* 8,6:1 sobre #0D0D0D */ --ink-3: #8F8A84; /* 5,6:1 sobre #0D0D0D — vale para letra pequeña */ --line: rgba(255, 255, 255, .10); --line-2: rgba(255, 255, 255, .06); --dark: #000000; --dark-2: #141414; --dark-3: #1C1C1C; --dark-line: rgba(255, 255, 255, .12); --dark-ink: #B0ABA5; --dark-ink-2: #8F8A84; --dark-ink-strong: #FFFFFF; --accent: #FF751F; --accent-700: #FF751F; /* sobre negro el naranja ya contrasta (7,2:1): no hay que oscurecerlo */ --accent-800: #FFB27A; --accent-soft: rgba(255, 117, 31, .12); --accent-line: rgba(255, 117, 31, .32); --font-display: 'Anton', 'Anton-respaldo', Impact, 'Arial Narrow', sans-serif; --font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --r-card: 16px; --r-ctrl: 12px; --shadow-1: 0 1px 2px rgba(0, 0, 0, .5); --shadow-2: 0 14px 34px -14px rgba(0, 0, 0, .75); --shadow-3: 0 30px 64px -22px rgba(0, 0, 0, .85); --ease-peso: cubic-bezier(.16, .84, .28, 1); --ease-rebote: cubic-bezier(.34, 1.56, .64, 1); --ease-elevar: cubic-bezier(.2, .9, .3, 1.25); --ease-cajon: cubic-bezier(.32, .72, 0, 1); --focus-ring: 0 0 0 3px rgba(255, 117, 31, .45); background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 17px; line-height: 1.6; } /* ── Tipografía de marca ───────────────────────────────────────────── */ body.publica h1, body.publica h2, body.publica h3, body.publica h4 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.02; color: var(--ink); text-wrap: balance; } body.publica h1 { font-size: clamp(40px, 5.6vw, 76px); letter-spacing: -.02em; line-height: .98; } body.publica h2 { font-size: clamp(28px, 3.6vw, 46px); margin-bottom: .45em; } body.publica h3 { font-size: 19px; line-height: 1.12; letter-spacing: .005em; } body.publica h4 { font-size: 17px; line-height: 1.15; } body.publica p { color: var(--ink-2); } body.publica p strong, body.publica p b { color: var(--ink); } body.publica .muted { color: var(--ink-2); } body.publica .hint { color: var(--ink-3); } body.publica ::selection { background: rgba(255, 117, 31, .35); color: #fff; } body.publica .hero-eyebrow { font-family: var(--font-display); font-weight: 400; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } body.publica .hero-eyebrow::before { width: 18px; background: var(--accent); vertical-align: 3px; } /* ── Botones: Anton en mayúsculas, naranja con texto negro (lagunbot.com) ── */ body.publica .btn { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .035em; font-size: 14px; line-height: 1; min-height: 48px; padding: 0 26px; border-radius: 12px; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .16); box-shadow: none; transition: transform .42s var(--ease-elevar), background .16s var(--ease-out), border-color .16s var(--ease-out), box-shadow .32s var(--ease-out), color .16s var(--ease-out); } body.publica .btn:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .3); transform: translateY(-2px); } body.publica .btn:active { transform: translateY(0) scale(.97); transition-duration: .1s; } body.publica .btn:focus-visible { box-shadow: var(--focus-ring); } body.publica .btn-primary { background: var(--accent); border-color: var(--accent); color: #0B0B0B; } body.publica .btn-primary:hover { background: #FF8A3D; border-color: #FF8A3D; color: #0B0B0B; transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 34px -14px rgba(255, 117, 31, .6); } body.publica .btn-sm { min-height: 38px; padding: 0 16px; font-size: 12px; border-radius: 8px; letter-spacing: .04em; } body.publica .btn-ghost { background: transparent; } /* Ondulación hacia dentro: un brillo que se contrae al centro al pasar. Solo en el CTA de la tarjeta del plan, que es donde se pide. */ .btn-onda { position: relative; overflow: hidden; isolation: isolate; } .btn-onda::after { content: ''; position: absolute; inset: -40%; z-index: -1; pointer-events: none; background: radial-gradient(circle at center, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 58%); opacity: 0; transform: scale(2.2); transition: transform .7s var(--ease-peso), opacity .5s var(--ease-out); } .btn-onda:hover::after { opacity: 1; transform: scale(.9); } /* El CTA del hero flota un poco, muy poco: 3px en 4 s. Va en un envoltorio para no pisar el transform del hover del propio botón. */ .flota { display: inline-block; animation: flotar 4.2s ease-in-out 2.6s infinite; } @keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } /* ── Formularios y tarjetas sobre fondo oscuro (login, alertas) ──────── */ body.publica .card { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-2); } body.publica input[type="text"], body.publica input[type="email"], body.publica input[type="password"], body.publica input[type="number"], body.publica input[type="tel"], body.publica select, body.publica textarea { background: #0D0D0D; color: var(--ink); border-color: var(--line); font-family: var(--font-ui); } body.publica input:hover, body.publica select:hover { border-color: rgba(255, 255, 255, .28); } body.publica .form-row label { color: var(--ink); } body.publica input::placeholder { color: var(--ink-3); } /* ── Cabecera pública ────────────────────────────────────────────────── Rejilla de tres columnas: marca | navegación centrada | acciones. Todo centrado en vertical sobre 68px; el espacio entre enlaces es fijo (4px) y el CTA lleva su margen propio. Nada se coloca "a ojo" con estilos en línea. En móvil los enlaces se van a un cajón bajo la barra. */ body.publica .topbar { position: sticky; top: 0; z-index: 500; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; min-height: 68px; padding: 0 clamp(18px, 4vw, 52px); flex-wrap: nowrap; row-gap: 0; background: rgba(13, 13, 13, .74); color: var(--ink); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid rgba(255, 255, 255, .08); transition: min-height .28s var(--ease-out), background .28s var(--ease-out), box-shadow .28s var(--ease-out); } body.publica .topbar.compacta { min-height: 58px; background: rgba(13, 13, 13, .9); box-shadow: 0 14px 34px -22px rgba(0, 0, 0, .95); } .topbar .logo { display: inline-flex; align-items: baseline; gap: 9px; padding: 8px 0; font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: #fff; text-decoration: none; white-space: nowrap; } .topbar .logo b { color: var(--accent); font-weight: 400; } .topbar .logo small { font-family: var(--font-display); font-size: 11px; letter-spacing: .14em; color: var(--ink-2); } .nav-principal { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; } body.publica .navlink { font-family: var(--font-ui); font-size: 14px; font-weight: 500; color: var(--ink-2); padding: 0 14px; min-height: 40px; border-radius: 10px; border: 0; text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; transition: color .16s var(--ease-out), background .16s var(--ease-out), transform .13s var(--ease-out); } body.publica .navlink:hover { color: #fff; background: rgba(255, 255, 255, .06); } body.publica .navlink:active { transform: scale(.97); } body.publica .navlink:focus-visible { box-shadow: var(--focus-ring); color: #fff; } .nav-acciones { display: flex; align-items: center; gap: 8px; } /* Píldoras (idioma, Entrar): las mismas de lagunbot.com. */ .pildora, .lang-pildora { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; border-radius: 999px; background: #141414; border: 1px solid rgba(255, 255, 255, .1); color: var(--ink-2); font-family: var(--font-display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color .16s var(--ease-out), border-color .16s var(--ease-out), background .16s var(--ease-out); } .pildora:hover, .lang-pildora:hover { color: #fff; border-color: rgba(255, 255, 255, .26); background: #1C1C1C; } .pildora:focus-visible, .lang-pildora:focus-visible { outline: none; box-shadow: var(--focus-ring); color: #fff; } /* El selector de idioma es un repintaba cada fotograma. */ .calc-campo output { position: relative; } .calc-campo.invita output::after { content: ''; position: absolute; inset: -6px -10px; border-radius: 999px; pointer-events: none; border: 1.5px solid rgba(255, 117, 31, .75); animation: invita 1.8s ease-out infinite; } @keyframes invita { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } } .calc-grande { position: relative; isolation: isolate; } .calc-grande::before { content: ''; position: absolute; z-index: -1; inset: -30% -12%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 117, 31, .3), rgba(255, 117, 31, 0)); animation: latir-op 3.2s ease-in-out infinite; } @keyframes latir-op { 0%, 100% { opacity: .35; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } } /* ── Vídeo: el marco respira en naranja. Demo: el punto verde late. ────── */ .video-marco::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 117, 31, .6), 0 0 48px rgba(255, 117, 31, .28); animation: latir-op 4s ease-in-out infinite; } .chat-frame-head .dot { animation: pulso 2.4s ease-in-out infinite; } /* ── Onda de letras (02UI text shimmer wave): opacidad a 0,35, 60 ms entre letras, ida y vuelta en seno. En una frase corta, y una por vista. ── */ .onda-letra { display: inline-block; } /* 27 capas animadas a la vez: solo donde sobra GPU (escritorio). */ @media (pointer: fine) and (min-width: 900px) { .onda-letra { animation: onda 1.3s ease-in-out infinite alternate; animation-delay: calc(var(--k, 0) * 60ms); } } /* Mínimo .65: naranja sobre negro a .65 da 3,67:1, por encima del 3:1 que pide WCAG para texto grande (a .35 bajaba a 1,75:1 en cada ola). */ @keyframes onda { to { opacity: .65; } } /* ── Señal de scroll bajo el hero, barra de progreso y cabecera que se esconde al bajar y vuelve al subir. ─────────────────────────────── */ .hero-cue { position: absolute; left: 50%; bottom: 16px; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink-2); text-decoration: none; transform: translateX(-50%); animation: cue 2.2s ease-in-out infinite; transition: opacity .4s var(--ease-out); } .hero-cue svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .hero-cue.ido { opacity: 0; pointer-events: none; } @keyframes cue { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 9px); } } @media (max-width: 900px) { .hero-cue { display: none; } } .progreso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 600; background: var(--accent); pointer-events: none; transform-origin: left center; transform: scaleX(0); box-shadow: 0 0 10px rgba(255, 117, 31, .7); } body.publica .topbar { transition: min-height .28s var(--ease-out), background .28s var(--ease-out), box-shadow .28s var(--ease-out), transform .34s var(--ease-peso); } body.publica .topbar.oculta { transform: translateY(-100%); } /* ── Píldora que viaja entre los enlaces (escritorio) y anillo del cursor que llega tarde a propósito. El puntero del sistema se queda. ────── */ .nav-principal { position: relative; isolation: isolate; } .nav-pildora { position: absolute; z-index: -1; top: 50%; left: 0; height: 40px; width: 0; border-radius: 10px; pointer-events: none; background: rgba(255, 255, 255, .08); opacity: 0; transform: translate3d(0, -50%, 0); transition: transform .4s cubic-bezier(.45, 0, .55, 1), width .4s cubic-bezier(.45, 0, .55, 1), opacity .22s var(--ease-out); } .nav-pildora.viva { opacity: 1; } @media (pointer: fine) and (min-width: 900px) { body.publica .navlink:hover { background: transparent; } } .cursor-anillo { position: fixed; top: 0; left: 0; z-index: 9999; width: 30px; height: 30px; border-radius: 50%; pointer-events: none; border: 1.5px solid rgba(255, 117, 31, .9); opacity: 0; transform: translate3d(-100px, -100px, 0); transition: width .25s var(--ease-out), height .25s var(--ease-out), opacity .3s var(--ease-out), background .25s var(--ease-out); } .cursor-anillo.visible { opacity: 1; } .cursor-anillo.activo { width: 52px; height: 52px; background: rgba(255, 117, 31, .12); } /* ── Pie: una luz recorre el filo superior. Plan: el resplandor orbita. ── */ body.publica .pie { position: relative; overflow: hidden; } /* La barra fija del móvil tapa el final: el pie deja hueco. */ @media (max-width: 860px) { body.publica .pie { padding-bottom: 74px; } } body.publica .pie::before { content: ''; position: absolute; top: 0; left: 0; width: 28%; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: barrido-pie 7s linear infinite; } @keyframes barrido-pie { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(460%, 0, 0); } } .plan::before { animation: orbita 18s ease-in-out infinite; } @keyframes orbita { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 33% { transform: translate3d(38%, 12%, 0) scale(1.15); } 66% { transform: translate3d(12%, 40%, 0) scale(.95); } } /* ── Sin movimiento: nada de esto existe. ───────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .vivo, .vivo::after, .btn-vivo::after, .marquee-track, .sec-vivo::before, .flotante, .regla-card::after, .cometa, .paso-disco::after, .calc-campo.invita output::after, .calc-grande::before, .video-marco::after, .chat-frame-head .dot, .onda-letra, .hero-cue, body.publica .pie::before, .plan::before { animation: none !important; } .cometa { display: none; } .cursor-anillo, .nav-pildora { display: none; } body.publica .topbar.oculta { transform: none; } } /* ═══ Banda "En resumen" y conversación reproducida (sep-2026) ══════════ */ .tldr-banda { background: #0D0D0D; padding: 34px 0 30px; border-bottom: 1px solid rgba(255, 255, 255, .06); } .tldr-banda .hero-eyebrow { margin-bottom: 14px; } .tldr-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 26px; } .tldr-grid li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 11px; align-items: start; font-size: 15px; line-height: 1.5; color: var(--ink-2); } .tldr-grid li .chk { margin-top: 1px; } @media (max-width: 900px) { .tldr-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .tldr-grid { grid-template-columns: 1fr; gap: 12px; } } .demo-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 64px); align-items: center; } @media (max-width: 900px) { .demo-grid { grid-template-columns: 1fr; } } .chat-replay { background: #141414; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-3); } body.publica .chat-frame-head { background: #101010; border-bottom-color: rgba(255, 255, 255, .08); color: var(--ink-2); } .chat-replay-cuerpo { padding: 18px; min-height: 400px; display: flex; flex-direction: column; gap: 10px; } .burb { max-width: 84%; padding: 11px 14px; border-radius: 14px; font-size: 15px; line-height: 1.45; } .burb.cli { align-self: flex-end; background: rgba(255, 117, 31, .18); border: 1px solid rgba(255, 117, 31, .38); color: #fff; border-bottom-right-radius: 4px; } .burb.asi { align-self: flex-start; background: #1F1F1F; border: 1px solid rgba(255, 255, 255, .08); color: #E8E4DE; border-bottom-left-radius: 4px; } .burb.escribe { display: none; gap: 5px; padding: 13px 16px; } .burb.escribe.dicho { display: flex; } .burb.escribe i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2); animation: tecleo 1.1s ease-in-out infinite; animation-delay: calc(var(--k, 0) * .15s); } @keyframes tecleo { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-4px); opacity: 1; } } .lead-card { align-self: stretch; margin-top: 6px; padding: 12px 14px; border-radius: 12px; display: grid; gap: 3px; background: #0D0D0D; border: 1px solid rgba(255, 255, 255, .1); border-left: 3px solid var(--accent); font-size: 13.5px; color: var(--ink-2); } .lead-card b { color: #fff; font-size: 14px; } .lead-card small { color: var(--ink-3); font-size: 12.5px; } .chip-vivo { display: inline-flex; width: max-content; padding: 4px 10px; border-radius: 999px; background: rgba(255, 117, 31, .16); color: var(--accent); font-family: var(--font-display); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; } /* Con el motor activo, las burbujas entran por turnos (las pone el guion). */ .motion .chat-replay [data-paso] { opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .35s var(--ease-out), transform .55s var(--ease-peso); } .motion .chat-replay [data-paso].dicho { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .motion .chat-replay [data-paso] { opacity: 1; transform: none; transition: none; } .burb.escribe i { animation: none; } } /* ═══ El maestro 3D y "el presupuesto en firme" (sep-2026) ═══════════════ */ .av-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; } .av-escena { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; isolation: isolate; background: radial-gradient(120% 90% at 18% 18%, #3d2b1e, #14100d 62%); border: 1px solid rgba(255, 255, 255, .1); box-shadow: var(--shadow-3); } #avatar-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; outline: none; opacity: 0; transition: opacity 1.4s var(--ease-out); } .av-sec.listo #avatar-canvas { opacity: 1; } #avatar-canvas:focus-visible { box-shadow: inset 0 0 0 3px rgba(255, 117, 31, .65); } .av-carga { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; transition: opacity .6s var(--ease-out); } .av-carga span { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255, 117, 31, .22); border-top-color: var(--accent); animation: girar 1s linear infinite; } .av-sec.listo .av-carga, .av-sec.sin-webgl .av-carga { opacity: 0; } @keyframes girar { to { transform: rotate(360deg); } } .av-controles { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; z-index: 2; } .av-btn { width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(13, 13, 13, .72); color: #fff; cursor: pointer; display: grid; place-items: center; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 0; transition: background .16s var(--ease-out), border-color .16s var(--ease-out), transform .3s var(--ease-elevar); } .av-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .av-btn:hover { background: rgba(255, 117, 31, .28); border-color: rgba(255, 117, 31, .5); } .av-btn:active { transform: scale(.94); } .av-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .av-pista { position: absolute; left: 14px; bottom: 16px; margin: 0; z-index: 2; pointer-events: none; font-family: var(--font-display); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .av-pista-mov { display: none; } .av-poster { display: none; position: absolute; inset: 0; place-items: center; gap: 10px; grid-auto-flow: row; align-content: center; color: var(--ink-3); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; } .av-sec.sin-webgl .av-poster { display: grid; } .av-sec.sin-webgl #avatar-canvas, .av-sec.sin-webgl .av-controles, .av-sec.sin-webgl .av-pista { display: none; } .av-lista { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 10px; } .av-lista li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .02); transition: border-color .2s var(--ease-out), background .2s var(--ease-out), transform .35s var(--ease-elevar); } .av-lista li:hover { border-color: rgba(255, 117, 31, .45); background: rgba(255, 117, 31, .06); transform: translateX(4px); } .av-num { font-family: var(--font-display); color: var(--accent); font-size: 13px; letter-spacing: .1em; padding-top: 3px; } .av-lista b { display: block; font-family: var(--font-display); text-transform: uppercase; font-weight: 400; font-size: 17px; color: #fff; margin-bottom: 3px; } .av-lista li > div > span { display: block; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; } @media (max-width: 1023px) { .av-grid { grid-template-columns: 1fr; } .av-escena { aspect-ratio: 16 / 10; } } @media (max-width: 767px) { .av-escena { aspect-ratio: auto; height: 60vh; min-height: 360px; border-radius: 14px; } .av-pista-esc { display: none; } .av-pista-mov { display: inline; } .av-controles { bottom: 10px; right: 10px; } } @media (prefers-reduced-motion: reduce) { .av-carga span { animation: none; } .av-lista li:hover { transform: none; } } .firme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; } .firme-grid .regla-card .av-num { display: block; margin-bottom: 10px; } .firme-grid .regla-card::before { display: none; } @media (max-width: 900px) { .firme-grid { grid-template-columns: 1fr; } } /* ═══ ACCESIBILIDAD, LEGAL Y PRIVACIDAD (10-sep-2026) ════════════════════ · Saltar al contenido: invisible hasta que llega el foco del teclado. · Pausar animaciones (WCAG 2.2.2): todo lo que se mueve solo más de 5 s se puede parar desde el pie, y se recuerda (localStorage lgp-sin-anim). Apaga los mismos bucles que prefers-reduced-motion; el script de tampoco pone .motion, así que no hay entradas animadas. · Páginas legales, aviso de la demo y aviso de cookies (este último solo aparece si hay GA_ID en el entorno). */ .salto { position: fixed; left: 12px; top: 12px; z-index: 1000; padding: 10px 16px; border-radius: 8px; background: var(--accent); color: #000; font-weight: 600; text-decoration: none; transform: translateY(-180%); transition: transform .16s var(--ease-out); } .salto:focus, .salto:focus-visible { transform: none; outline: 3px solid #fff; outline-offset: 2px; } #contenido { scroll-margin-top: 96px; } #contenido:focus { outline: none; } html.sin-anim .vivo, html.sin-anim .vivo::after, html.sin-anim .btn-vivo::after, html.sin-anim .marquee-track, html.sin-anim .sec-vivo::before, html.sin-anim .flotante, html.sin-anim .regla-card::after, html.sin-anim .cometa, html.sin-anim .paso-disco::after, html.sin-anim .calc-campo.invita output::after, html.sin-anim .calc-grande::before, html.sin-anim .video-marco::after, html.sin-anim .chat-frame-head .dot, html.sin-anim .onda-letra, html.sin-anim .hero-cue, html.sin-anim body.publica .pie::before, html.sin-anim .plan::before, html.sin-anim .flota, html.sin-anim .late, html.sin-anim .burb.escribe i, html.sin-anim .av-carga span { animation: none !important; } html.sin-anim .cometa, html.sin-anim .cursor-anillo, html.sin-anim .nav-pildora { display: none; } body.publica .anim-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; width: max-content; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; cursor: pointer; } body.publica .anim-toggle svg { width: 14px; height: 14px; fill: currentColor; } body.publica .anim-toggle:hover { color: #fff; border-color: rgba(255, 255, 255, .4); } body.publica .anim-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* El pie pasa a cuatro columnas: marca y datos, contacto, producto, legal. */ body.publica .pie-grid { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); } body.publica .pie-col .pie-datos { color: var(--ink-3); font-size: 13px; line-height: 1.55; } @media (max-width: 1024px) { body.publica .pie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { body.publica .pie-grid { grid-template-columns: 1fr; } } body.publica .legal-art { padding: clamp(24px, 4vw, 48px) 0 clamp(48px, 7vw, 84px); } body.publica .legal-art .container { max-width: 880px; } body.publica .legal-art h1 { font-size: clamp(34px, 5vw, 58px); margin: 10px 0 10px; } body.publica .legal-meta { color: var(--ink-3); font-size: 14px; margin: 0 0 6px; } body.publica .legal-idioma { margin: 14px 0 0; padding: 12px 16px; border-left: 3px solid var(--accent); background: rgba(255, 255, 255, .04); border-radius: 8px; color: var(--ink-2); font-size: 14.5px; } body.publica .legal-art h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 44px 0 12px; } body.publica .legal-art p, body.publica .legal-art li { color: var(--ink-2); max-width: 72ch; } body.publica .legal-art ul, body.publica .legal-art ol { padding-left: 1.2em; } body.publica .legal-art li { margin: 4px 0; } body.publica .legal-art strong { color: #fff; font-weight: 600; } body.publica .legal-art p a, body.publica .legal-art li a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } body.publica .legal-indice { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 56px 0 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); } body.publica .legal-indice a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); color: var(--ink-2); text-decoration: none; font-size: 14px; } body.publica .legal-indice a:hover { color: #fff; border-color: rgba(255, 255, 255, .36); } body.publica .legal-indice a[aria-current="page"] { color: #000; background: var(--accent); border-color: var(--accent); } body.publica .legal-indice a:focus-visible { outline: none; box-shadow: var(--focus-ring); } body.publica .demo-aviso { margin: 16px 0 0; padding: 12px 16px; max-width: 72ch; border-left: 3px solid var(--accent); background: rgba(255, 255, 255, .04); border-radius: 8px; color: var(--ink-2); font-size: 14.5px; } body.publica .demo-aviso a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } /* Aviso de cookies: los dos botones pesan lo mismo (criterio de la AEPD). */ .consentimiento { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 950; max-width: 560px; margin-inline: auto; padding: 16px 18px; border-radius: 12px; background: #141414; border: 1px solid rgba(255, 255, 255, .16); color: var(--ink-2); box-shadow: 0 18px 48px rgba(0, 0, 0, .55); } .consentimiento p { margin: 0 0 12px; font-size: 14.5px; } .consentimiento p a { color: var(--accent); text-decoration: underline; } .consentimiento .consent-botones { display: flex; gap: 10px; flex-wrap: wrap; } .consentimiento button { flex: 1 1 140px; min-height: 44px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .3); background: #fff; color: #000; font: inherit; font-weight: 600; cursor: pointer; } .consentimiento button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } body.publica .pie-col button.enlace-cookies { background: none; border: 0; padding: 0; min-height: 32px; color: var(--ink-2); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; } body.publica .pie-col button.enlace-cookies:hover { color: var(--accent); } @media (max-width: 860px) { .consentimiento { bottom: 84px; } }