/* ============================================================ NIUXER — Hoja de estilos principal Tema oscuro premium · degradados de marca · animaciones ============================================================ */ :root{ --bg:#07050e; --bg-2:#0d0919; --bg-3:#130d24; --card:rgba(255,255,255,.045); --card-hover:rgba(255,255,255,.08); --border:rgba(255,255,255,.1); --text:#f5f2fc; --muted:#b3a9cd; --faint:#8d82ad; --purple:#8b5cf6; --violet:#7c3aed; --magenta:#d926a9; --pink:#ec4899; --blue:#38bdf8; --grad:linear-gradient(100deg,#8b5cf6,#d926a9 55%,#ec4899); --grad-soft:linear-gradient(100deg,rgba(139,92,246,.16),rgba(217,38,169,.16)); /* Superficies y estados. Están aquí como variables (y no escritas a mano en cada regla) porque el panel las repinta en modo claro. */ --nav-bg:rgba(7,5,14,.82); --campo:rgba(7,5,14,.5); --campo-foco:rgba(7,5,14,.78); --linea:rgba(255,255,255,.05); --sutil:rgba(255,255,255,.025); --sutil-2:rgba(255,255,255,.07); --pista:rgba(255,255,255,.06); --boton:rgba(255,255,255,.04); --velo:rgba(4,2,10,.78); --sombra:0 24px 70px rgba(0,0,0,.6); --ok:#4ade80; --aviso:#fbbf24; --mal:#f87171; --info:#38bdf8; --lila:#a78bfa; --gris:#94a3b8; --radius:18px; --nav-h:72px; --font-display:"Space Grotesk",sans-serif; --font-body:"Inter",sans-serif; } *{margin:0;padding:0;box-sizing:border-box} /* El color de fondo vive en y no en : así el ambiente de color (body::before) se dibuja por encima del negro y por debajo del contenido, sin depender de cómo propague el navegador el fondo. */ html{scroll-behavior:smooth;background:var(--bg)} body{ background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:16px; line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img,video{max-width:100%;display:block} a{color:inherit;text-decoration:none} ul{list-style:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} ::selection{background:var(--magenta);color:#fff} /* ============================================================ AMBIENTE DE PÁGINA ------------------------------------------------------------ Antes las manchas de color y la rejilla vivían SOLO dentro del hero: pasada la primera pantalla, las cinco páginas eran la misma plancha negra. En móvil se notaba más porque el hero se acaba antes. Esto pone una luz de fondo que acompaña toda la página. Cada página tiene su pareja de colores del logo (--ac-1 y --ac-2), así se distingue una de otra sin cambiar de identidad. Son degradados, NO divs con blur: un `filter: blur(90px)` sobre una capa a pantalla completa hace sudar a cualquier móvil. Solo se anima `transform`, que va por GPU y no repinta nada. ============================================================ */ :root{ --ac-1:#7c3aed; --ac-2:#d926a9; } body[data-pag]{background:transparent} body[data-pag="video"] { --ac-1:#d926a9; --ac-2:#ec4899; } body[data-pag="web"] { --ac-1:#38bdf8; --ac-2:#7c3aed; } body[data-pag="ads"] { --ac-1:#ec4899; --ac-2:#8b5cf6; } body[data-pag="datos"] { --ac-1:#22d3ee; --ac-2:#3b82f6; } body[data-pag="legal"] { --ac-1:#8b5cf6; --ac-2:#6366f1; } /* Ojo: el panel carga esta misma hoja. El ambiente se engancha a [data-pag], que solo llevan las páginas públicas, así que el CRM se queda exactamente como está. */ body[data-pag]::before{ content:""; position:fixed; /* Se sale de la pantalla a propósito: al desplazarse no asoma nunca un borde duro del degradado. */ inset:-25vh -25vw; z-index:-2; pointer-events:none; background: radial-gradient(38vw 38vw at 18% 12%, color-mix(in srgb, var(--ac-1) 26%, transparent), transparent 68%), radial-gradient(34vw 34vw at 85% 32%, color-mix(in srgb, var(--ac-2) 22%, transparent), transparent 66%), radial-gradient(42vw 42vw at 62% 88%, color-mix(in srgb, var(--ac-1) 16%, transparent), transparent 70%); animation:ambiente 34s ease-in-out infinite alternate; will-change:transform; } @keyframes ambiente{ from{transform:translate3d(0,0,0) scale(1)} to {transform:translate3d(-4vw,3vh,0) scale(1.12)} } /* La rejilla, también en toda la página y no solo en el hero. Muy tenue: da textura y quita la sensación de plancha lisa. */ body[data-pag]::after{ content:""; position:fixed;inset:0;z-index:-1;pointer-events:none; background-image: linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(ellipse 70% 55% at 50% 45%,#000 20%,transparent 78%); -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 45%,#000 20%,transparent 78%); } /* Las secciones dejan de tapar el ambiente: en vez de un color opaco, un velo que deja pasar la luz de detrás. */ body[data-pag] .section--tint{background:rgba(13,9,25,.72)} /* La rejilla del hero sobra: ahora la pone el body para toda la página. Si se dejan las dos, la del hero se desplaza al hacer scroll y la nueva no, y las líneas se cruzan formando muaré. (En el panel no hay [data-pag], así que su pantalla de acceso conserva la suya.) */ body[data-pag] .grid-bg{display:none} @media (max-width:720px){ /* En móvil la luz se nota más porque hay menos ancho: se baja un punto para que el texto siga mandando. */ body[data-pag]::before{opacity:.72;animation-duration:44s} body[data-pag]::after{background-size:44px 44px} /* Las manchas del hero son divs con blur(90px): en un móvil eso se repinta en cada fotograma y es justo donde peor va. El ambiente del fondo ya da el color, así que aquí sobran. */ body[data-pag] .orbs{display:none} } /* ---------- utilidades ---------- */ .container{width:min(1180px,92%);margin-inline:auto} .section{padding:clamp(64px,9vw,110px) 0;position:relative} .section--tint{background:var(--bg-2)} .kicker{ display:inline-flex;align-items:center;gap:10px; font-family:var(--font-display); font-size:.8rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:var(--muted); margin-bottom:18px; } .kicker::before{content:"";width:34px;height:2px;background:var(--grad);border-radius:2px} h1,h2,h3,h4{font-family:var(--font-display);line-height:1.12;font-weight:700} .h-xl{font-size:clamp(2.5rem,6.4vw,4.4rem);letter-spacing:-.02em} .h-lg{font-size:clamp(1.9rem,4.4vw,3rem);letter-spacing:-.015em} .h-md{font-size:clamp(1.3rem,2.6vw,1.7rem)} .lead{font-size:clamp(1.02rem,1.6vw,1.2rem);color:var(--muted);max-width:640px} .center{text-align:center} .center .lead,.hero__content--center .lead{margin-inline:auto} .grad-text{ background:var(--grad); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; background-size:200% auto; animation:gradShift 6s linear infinite; } @keyframes gradShift{to{background-position:200% center}} /* ---------- intro de marca (solo primera visita de la sesión) ---------- */ html.intro-lock{overflow:hidden} .intro{ position:fixed;inset:0;z-index:3000; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px; background:rgba(7,5,14,.55); backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px); perspective:900px; animation:introOut .9s cubic-bezier(.65,0,.35,1) 2.6s forwards; } .intro__logo{ width:clamp(120px,20vw,180px);height:auto;border-radius:50%; box-shadow:0 0 60px rgba(217,38,169,.55),0 0 150px rgba(139,92,246,.35); animation:introSpin 1.7s cubic-bezier(.68,-.12,.27,1.12) .15s both; } .intro__name{ font-family:var(--font-display);font-weight:700;letter-spacing:.42em; font-size:clamp(1.1rem,2.6vw,1.5rem);text-indent:.42em; animation:introName .7s cubic-bezier(.2,.65,.3,1) 1.5s both; } @keyframes introSpin{ 0%{transform:scale(.35) rotateY(0deg);opacity:0} 30%{opacity:1} 100%{transform:scale(1) rotateY(720deg);opacity:1} } @keyframes introName{ from{opacity:0;transform:translateY(16px);filter:blur(6px)} to{opacity:1;transform:none;filter:blur(0)} } @keyframes introOut{ to{opacity:0;transform:scale(1.18);visibility:hidden} } @media (prefers-reduced-motion:reduce){.intro{display:none}} /* ---------- barra de progreso scroll ---------- */ .progress{ position:fixed;top:0;left:0;height:3px;width:0%; background:var(--grad);z-index:1002;border-radius:0 3px 3px 0; transition:width .12s linear; } /* ---------- navegación ---------- */ .nav{ position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:1000; display:flex;align-items:center; transition:background .35s,box-shadow .35s,backdrop-filter .35s; } .nav.is-scrolled{ background:var(--nav-bg); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:0 8px 30px rgba(0,0,0,.35); } .nav__inner{ width:min(1240px,94%);margin-inline:auto; display:flex;align-items:center;justify-content:space-between;gap:20px; } .nav__brand{display:flex;align-items:center;gap:11px;z-index:1001} .nav__brand img{width:40px;height:40px;border-radius:50%;box-shadow:0 0 18px rgba(217,38,169,.45)} .nav__brand span{ font-family:var(--font-display);font-weight:700;font-size:1.25rem;letter-spacing:.12em; } .nav__links{display:flex;align-items:center;gap:6px} .nav__links a{ position:relative;padding:9px 14px;font-size:.92rem;font-weight:500;color:var(--muted); border-radius:10px;transition:color .25s; } .nav__links a::after{ content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px; background:var(--grad);border-radius:2px; transform:scaleX(0);transform-origin:left;transition:transform .3s; } .nav__links a:hover,.nav__links a.is-active{color:var(--text)} .nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1)} .nav__cta{margin-left:8px} /* acceso al panel */ .nav__login{ display:inline-flex !important;align-items:center;gap:7px; padding:8px 15px !important;border-radius:999px; border:1px solid var(--border);background:rgba(255,255,255,.04); font-size:.88rem;font-weight:500;color:var(--muted); transition:border-color .25s,color .25s,background .25s; } .nav__login::after{display:none !important} .nav__login:hover{border-color:var(--purple);color:var(--text);background:rgba(139,92,246,.12)} .nav__login svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .mobile-menu .m-login{ font-size:1.05rem !important;letter-spacing:.04em;margin-top:18px; padding:12px 30px !important;border-radius:999px; border:1px solid rgba(139,92,246,.45);background:rgba(139,92,246,.12); color:var(--text) !important; } /* botón hamburguesa */ .burger{ display:none;z-index:1001;width:44px;height:44px;border-radius:12px; border:1px solid var(--border);background:var(--card); flex-direction:column;align-items:center;justify-content:center;gap:5px; } .burger span{ width:20px;height:2px;background:var(--text);border-radius:2px; transition:transform .3s,opacity .3s; } .burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.is-open span:nth-child(2){opacity:0} .burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* menú móvil */ .mobile-menu{ position:fixed;inset:0;z-index:999; background:rgba(7,5,14,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px; opacity:0;pointer-events:none;transition:opacity .35s; } .mobile-menu.is-open{opacity:1;pointer-events:auto} .mobile-menu a{ font-family:var(--font-display);font-size:clamp(1.6rem,7vw,2.2rem);font-weight:700; padding:10px 26px;color:var(--muted); opacity:0;transform:translateY(24px); transition:opacity .4s,transform .4s,color .25s; } .mobile-menu.is-open a{opacity:1;transform:translateY(0)} .mobile-menu a:hover,.mobile-menu a.is-active{color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text} .mobile-menu a:nth-child(1){transition-delay:.05s} .mobile-menu a:nth-child(2){transition-delay:.1s} .mobile-menu a:nth-child(3){transition-delay:.15s} .mobile-menu a:nth-child(4){transition-delay:.2s} .mobile-menu a:nth-child(5){transition-delay:.25s} .mobile-menu a:nth-child(6){transition-delay:.3s} /* ---------- botones ---------- */ .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:14px 28px;border-radius:999px; font-family:var(--font-display);font-weight:600;font-size:.97rem;letter-spacing:.02em; transition:transform .25s,box-shadow .25s; overflow:hidden;white-space:nowrap; } .btn--solid{ background:var(--grad);background-size:150% auto;color:#fff; box-shadow:0 8px 26px rgba(217,38,169,.35); } .btn--solid::before{ content:"";position:absolute;top:0;left:-80%;width:50%;height:100%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg); } .btn--solid:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(217,38,169,.5)} .btn--solid:hover::before{animation:shine .8s forwards} @keyframes shine{to{left:130%}} .btn--ghost{ border:1px solid var(--border);background:var(--card);color:var(--text); backdrop-filter:blur(6px); } .btn--ghost:hover{transform:translateY(-3px);border-color:var(--purple);box-shadow:0 10px 26px rgba(124,58,237,.25)} .btn--sm{padding:10px 20px;font-size:.88rem} .btn--wa{background:#1fbe5f;color:#fff;box-shadow:0 8px 26px rgba(31,190,95,.35)} .btn--wa:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(31,190,95,.5)} /* ---------- fondos animados ---------- */ .orbs{position:absolute;inset:0;overflow:hidden;pointer-events:none} .orb{ position:absolute;border-radius:50%;filter:blur(90px);opacity:.5; animation:float 16s ease-in-out infinite alternate; } .orb--1{width:480px;height:480px;background:#7c3aed;top:-140px;left:-120px} .orb--2{width:420px;height:420px;background:#d926a9;bottom:-160px;right:-100px;animation-delay:-5s;animation-duration:20s} .orb--3{width:300px;height:300px;background:#2563eb;top:40%;left:55%;opacity:.35;animation-delay:-10s;animation-duration:24s} @keyframes float{ from{transform:translate(0,0) scale(1)} to{transform:translate(60px,-50px) scale(1.15)} } .grid-bg{ position:absolute;inset:0;pointer-events:none; background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 75%); -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 75%); } /* ---------- hero ---------- */ .hero{ position:relative;min-height:100svh; display:flex;align-items:center; padding:calc(var(--nav-h) + 48px) 0 70px; overflow:hidden; } .hero--sub{min-height:72svh} .hero__video{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:.5; } .hero__veil{ position:absolute;inset:0; background: radial-gradient(ellipse 90% 70% at 50% 30%,rgba(124,58,237,.16),transparent 60%), linear-gradient(180deg,rgba(7,5,14,.55),rgba(7,5,14,.75) 60%,var(--bg)); } .hero__content{position:relative;z-index:2;max-width:820px} .hero__content--center{margin-inline:auto;text-align:center} .badge{ display:inline-flex;align-items:center;gap:9px; padding:8px 18px;border-radius:999px; border:1px solid var(--border);background:rgba(255,255,255,.05); backdrop-filter:blur(8px); font-size:.83rem;font-weight:500;color:var(--muted); margin-bottom:26px; } .badge i{ width:8px;height:8px;border-radius:50%;background:var(--grad); animation:pulse 2s infinite; } @keyframes pulse{ 0%,100%{box-shadow:0 0 0 0 rgba(217,38,169,.6)} 60%{box-shadow:0 0 0 9px rgba(217,38,169,0)} } .hero .lead{margin-top:22px} .hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px} .hero__content--center .hero__actions{justify-content:center} /* palabra rotatoria */ .rotator{ display:inline-block;position:relative;vertical-align:bottom; min-width:5.2ch;text-align:left; } .rotator span{ position:absolute;left:0;top:0;opacity:0;transform:translateY(60%); transition:opacity .45s,transform .45s;white-space:nowrap; background:var(--grad);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .rotator span.is-in{position:relative;opacity:1;transform:translateY(0)} .rotator span.is-out{opacity:0;transform:translateY(-60%)} /* indicador scroll */ .scroll-hint{ position:absolute;bottom:26px;left:50%;transform:translateX(-50%); width:26px;height:42px;border:2px solid var(--faint);border-radius:14px; z-index:2;opacity:.7; } .scroll-hint::before{ content:"";position:absolute;left:50%;top:8px;width:4px;height:8px; background:var(--grad);border-radius:3px;transform:translateX(-50%); animation:wheel 1.8s ease-in-out infinite; } @keyframes wheel{ 0%{opacity:1;top:8px} 70%{opacity:0;top:22px} 100%{opacity:0;top:8px} } /* ---------- garantía destacada ---------- */ .guarantee{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px; margin:34px auto 0;padding:18px 26px;border-radius:20px;max-width:720px; border:1px solid rgba(217,38,169,.5); background:linear-gradient(100deg,rgba(139,92,246,.16),rgba(217,38,169,.16)); backdrop-filter:blur(8px); box-shadow:0 12px 34px rgba(217,38,169,.18); text-align:left; } .guarantee i{ font-style:normal;font-size:1.7rem;flex-shrink:0; width:52px;height:52px;border-radius:14px; background:var(--grad);display:flex;align-items:center;justify-content:center; box-shadow:0 8px 22px rgba(217,38,169,.4); animation:pulse 2.6s infinite; } .guarantee p{font-size:.98rem;color:var(--text);margin:0;flex:1;min-width:240px;line-height:1.5} .guarantee p b{ background:var(--grad);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;font-weight:700; } /* ---------- mapa ---------- */ .map{ margin-top:48px;border-radius:22px;overflow:hidden;position:relative; border:1px solid var(--border); box-shadow:0 18px 44px rgba(0,0,0,.4); } .map iframe{width:100%;height:380px;border:0;display:block;filter:grayscale(.15) contrast(1.02)} .map__tag{ position:absolute;left:16px;top:16px;z-index:2; display:flex;align-items:center;gap:9px; padding:10px 18px;border-radius:999px; background:rgba(7,5,14,.85);border:1px solid var(--border);backdrop-filter:blur(8px); font-family:var(--font-display);font-weight:600;font-size:.88rem; } .map__tag i{font-style:normal} /* ---------- estadísticas ---------- */ .stats{ display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px;margin-top:54px; } .stat{ padding:22px 18px;border-radius:var(--radius); border:1px solid var(--border);background:var(--card); backdrop-filter:blur(8px);text-align:center; transition:transform .3s,border-color .3s; } .stat:hover{transform:translateY(-5px);border-color:rgba(139,92,246,.5)} .stat b{ display:block;font-family:var(--font-display);font-size:1.7rem;font-weight:700; background:var(--grad);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; } .stat small{color:var(--muted);font-size:.84rem} /* ---------- marquee ---------- */ .marquee{ overflow:hidden;padding:26px 0; border-block:1px solid var(--border); background:var(--bg-2); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .marquee__track{ display:flex;gap:56px;width:max-content; animation:marquee 26s linear infinite; } .marquee:hover .marquee__track{animation-play-state:paused} .marquee__track span{ font-family:var(--font-display);font-size:1.25rem;font-weight:700;letter-spacing:.14em; color:var(--faint);display:flex;align-items:center;gap:56px;white-space:nowrap; } .marquee__track span::after{content:"✦";color:var(--magenta);font-size:1rem} @keyframes marquee{to{transform:translateX(-50%)}} /* marquesina doble de clientes */ .clients-marquee{ padding:34px 0 10px;overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .clients-marquee + .clients-marquee{padding-top:10px;padding-bottom:34px} .clients-marquee .marquee__track{animation-duration:80s} .clients-marquee--reverse .marquee__track{animation-direction:reverse} .clients-marquee .marquee__track span{ font-size:clamp(1.35rem,3.2vw,2rem); color:var(--muted); transition:color .3s; cursor:default; } .clients-marquee .marquee__track span:hover{ background:var(--grad);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } /* ============================================================ CAPAS: CLIENTES POR ENCIMA, RESEÑAS POR DEBAJO ------------------------------------------------------------ Antes las dos secciones iban pegadas (la de clientes tenía el margen inferior a cero) y se leían como una sola cosa. Ahora los clientes son la capa de arriba: se quedan por encima y suben DESPACIO mientras las reseñas pasan por debajo a la velocidad normal. Al llegar al final de las reseñas, los clientes ya han salido por el borde superior. El recorrido lo calcula main.js sobre .capas y lo escribe en --capa-y. Si no hay JavaScript, todo queda como una página normal con las dos secciones separadas: no se rompe nada. ============================================================ */ .capas{position:relative} .capas__encima{ position:sticky; top:0; z-index:3; /* El desplazamiento lento lo pone el JS. Sin él vale 0 y la sección se comporta como cualquier otra. */ transform:translateY(var(--capa-y,0px)); will-change:transform; } /* Cristal esmerilado: se ve lo que pasa por debajo, pero desenfocado. El velo oscuro es flojo a propósito (lo justo para que los nombres se sigan leyendo); quien hace el trabajo es el desenfoque. La saturación de más evita que lo de detrás se vea apagado y gris al difuminarse. */ .capas__encima::before{ content:"";position:absolute;inset:-2px 0;z-index:-1; background:linear-gradient(180deg, rgba(7,5,14,.30) 0%, rgba(7,5,14,.46) 26%, rgba(7,5,14,.46) 74%, rgba(7,5,14,.30) 100%); backdrop-filter:blur(26px) saturate(150%); -webkit-backdrop-filter:blur(26px) saturate(150%); } /* Un canto tenue arriba y abajo: sin él no se nota dónde empieza y acaba el cristal, y el efecto de capa se pierde. */ .capas__encima::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;z-index:-1; background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 22%, rgba(217,38,169,.30) 50%,rgba(255,255,255,.16) 78%,transparent); } /* Si el navegador no sabe desenfocar el fondo, lo de detrás se vería nítido a través del velo flojo y sería ilegible: ahí se tapa. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .capas__encima::before{background:rgba(7,5,14,.94)} } /* Aire por arriba para el titular de las reseñas. Sin esto arrancaba a 151px justos por debajo del canto del cristal: el "Clientes reales, proyectos reales" nacía pegado a la capa y se pasaba de largo sin que diera tiempo a leerlo. Con este margen entra despejado y sube un buen rato antes de acercarse al cristal. */ .capas__debajo{position:relative;z-index:1;padding-top:clamp(160px,22vw,250px)} /* En pantallas bajas el efecto no tiene recorrido y solo estorba: sin sticky, las dos secciones se leen una detrás de otra. */ @media (max-height:560px){ .capas__encima{position:relative;transform:none} .capas__encima::before{display:none} } @media (prefers-reduced-motion:reduce){ .capas__encima{position:relative;transform:none} .capas__encima::before{display:none} } /* ---------- tarjetas de servicio ---------- */ .cards{display:grid;gap:20px;margin-top:52px} .cards--4{grid-template-columns:repeat(4,1fr)} .cards--3{grid-template-columns:repeat(3,1fr)} .cards--2{grid-template-columns:repeat(2,1fr)} .card{ position:relative;padding:32px 28px;border-radius:var(--radius); border:1px solid var(--border);background:var(--card); transition:transform .35s,border-color .35s,background .35s,box-shadow .35s; overflow:hidden; } .card::before{ content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s; background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(139,92,246,.14),transparent 65%); pointer-events:none; } .card:hover{transform:translateY(-7px);border-color:rgba(217,38,169,.45);box-shadow:0 22px 46px rgba(0,0,0,.45)} .card:hover::before{opacity:1} .card__icon{ width:54px;height:54px;border-radius:14px;margin-bottom:20px; display:flex;align-items:center;justify-content:center; background:var(--grad-soft);border:1px solid rgba(139,92,246,.35); font-size:1.45rem; transition:transform .35s; } .card:hover .card__icon{transform:scale(1.12) rotate(-6deg)} /* --- iconos SVG dibujados a medida --- */ .card__icon--svg{width:64px;height:64px} .card__icon--svg svg{width:38px;height:38px;overflow:visible} .card:hover .card__icon--svg{transform:scale(1.08)} .ic-draw{ fill:none;stroke:url(#iconGrad);stroke-width:2.3; stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:60;stroke-dashoffset:60; transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1); } .card.is-visible .ic-draw{stroke-dashoffset:0} .card.is-visible svg .ic-draw:nth-of-type(2){transition-delay:.25s} .ic-fill{ fill:url(#iconGrad);stroke:none;opacity:0; transition:opacity .6s ease 1s; } .card.is-visible .ic-fill{opacity:.9} /* punto REC (cámara) */ .ic-rec{fill:#f43f5e} .card:hover .ic-rec,.card.is-hover .ic-rec{animation:recBlink 1s ease-in-out infinite} @keyframes recBlink{0%,100%{opacity:.95}50%{opacity:.1}} /* cursor (webs) hace clic */ .card:hover .ic-cursor,.card.is-hover .ic-cursor{ transform-box:fill-box;transform-origin:top left; animation:cursorClick 1.5s ease-in-out infinite; } @keyframes cursorClick{ 0%,100%{transform:translate(0,0) scale(1)} 45%{transform:translate(1.6px,1.6px) scale(.85)} 60%{transform:translate(0,0) scale(1.02)} } /* barras (ADS) crecen */ .ic-bar{transform-box:fill-box;transform-origin:bottom;transform:scaleY(.68);transition:transform .5s cubic-bezier(.34,1.56,.64,1) var(--bd,0s),opacity .6s ease 1s} .card:hover .ic-bar,.card.is-hover .ic-bar{transform:scaleY(1)} .card:hover .ic-arrow,.card.is-hover .ic-arrow{animation:arrowRedraw 1.1s cubic-bezier(.4,0,.2,1)} @keyframes arrowRedraw{from{stroke-dashoffset:60}to{stroke-dashoffset:0}} /* red neuronal (data) pulsa */ .ic-node{transform-box:fill-box;transform-origin:center} .card:hover .ic-node,.card.is-hover .ic-node{animation:nodePulse 1.4s ease-in-out infinite;animation-delay:var(--nd,0s)} @keyframes nodePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.28)}} .ic-syn .ic-draw{stroke-width:1.2;opacity:.45} .card:hover .ic-syn .ic-draw,.card.is-hover .ic-syn .ic-draw{animation:synShimmer 1.6s linear infinite} @keyframes synShimmer{0%{opacity:.25}50%{opacity:.75}100%{opacity:.25}} .card h3{font-size:1.16rem;margin-bottom:10px} .card p{color:var(--muted);font-size:.94rem} .card .link{ display:inline-flex;align-items:center;gap:7px;margin-top:18px; font-weight:600;font-size:.9rem; background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .card .link i{transition:transform .3s;font-style:normal;-webkit-text-fill-color:var(--pink)} .card:hover .link i{transform:translateX(5px)} /* ---------- pasos / proceso ---------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px;counter-reset:step} .step{ position:relative;padding:30px 24px;border-radius:var(--radius); border:1px solid var(--border);background:var(--card); transition:transform .3s,border-color .3s; } .step:hover{transform:translateY(-6px);border-color:rgba(139,92,246,.5)} .step::before{ counter-increment:step;content:"0" counter(step); font-family:var(--font-display);font-weight:700;font-size:2.4rem; background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; display:block;margin-bottom:10px;opacity:.9; } .step h3{font-size:1.05rem;margin-bottom:8px} .step p{color:var(--muted);font-size:.9rem} /* ---------- línea de tiempo (método, portada) ---------- */ .timeline{position:relative;max-width:920px;margin:56px auto 0;padding:6px 0 20px} .timeline__rail{ position:absolute;left:50%;top:0;bottom:0;width:3px; transform:translateX(-50%); background:rgba(255,255,255,.07);border-radius:3px; } .timeline__fill{ width:100%;height:0%;border-radius:3px; background:var(--grad); box-shadow:0 0 16px rgba(217,38,169,.55); transition:height .18s linear; } .timeline__spark{ position:absolute;left:50%;top:0;width:13px;height:13px;border-radius:50%; transform:translate(-50%,-50%); background:#fff; box-shadow:0 0 20px 7px rgba(217,38,169,.75),0 0 44px 16px rgba(139,92,246,.35); opacity:0;transition:opacity .3s,top .18s linear; pointer-events:none; } .tl-step{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0 76px;padding:36px 0} .tl-step__node{ position:absolute;left:50%;top:34px;z-index:2; transform:translateX(-50%) scale(.82); width:60px;height:60px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-weight:700;font-size:1.15rem; background:var(--bg-3);border:2px solid var(--border);color:var(--faint); transition:transform .5s cubic-bezier(.2,.65,.3,1),background .5s,color .5s,border-color .5s,box-shadow .5s; } .tl-step.is-on .tl-step__node{ transform:translateX(-50%) scale(1); background:var(--grad);color:#fff;border-color:transparent; box-shadow:0 0 28px rgba(217,38,169,.55); } .tl-step__card{ opacity:0;transition:opacity .7s cubic-bezier(.2,.65,.3,1),transform .7s cubic-bezier(.2,.65,.3,1); padding:24px 26px;border-radius:var(--radius); border:1px solid var(--border);background:var(--card); } .tl-step--l .tl-step__card{grid-column:1;text-align:right;transform:translateX(-46px)} .tl-step--r .tl-step__card{grid-column:2;text-align:left;transform:translateX(46px)} .tl-step.is-on .tl-step__card{opacity:1;transform:none;border-color:rgba(139,92,246,.4)} .tl-step__card h3{font-size:1.12rem;margin-bottom:8px} .tl-step__card p{color:var(--muted);font-size:.93rem} @media (max-width:720px){ .timeline__rail{left:24px;transform:none} .tl-step{grid-template-columns:1fr;padding:26px 0 26px 0} .tl-step__node{left:24px;transform:translateX(-50%) scale(.82);width:48px;height:48px;font-size:.95rem;top:26px} .tl-step.is-on .tl-step__node{transform:translateX(-50%) scale(1)} .tl-step--l .tl-step__card,.tl-step--r .tl-step__card{ grid-column:1;text-align:left;margin-left:64px;transform:translateX(30px); } .tl-step.is-on .tl-step__card{transform:none} .timeline__spark{left:24px} } /* ---------- portfolio webs ---------- */ .works{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px} .work{ position:relative;border-radius:var(--radius);overflow:hidden; border:1px solid var(--border);background:var(--card); display:flex;flex-direction:column; transition:transform .35s,border-color .35s,box-shadow .35s; } .work:hover{transform:translateY(-8px);border-color:rgba(217,38,169,.5);box-shadow:0 24px 50px rgba(0,0,0,.5)} .work--hot{border-color:rgba(217,38,169,.55);box-shadow:0 0 0 1px rgba(217,38,169,.3),0 18px 40px rgba(124,58,237,.18)} .work__mock{ position:relative;aspect-ratio:16/10.5;overflow:hidden; background:var(--bg-3); border-bottom:1px solid var(--border); } .work__bar{ position:absolute;top:0;left:0;right:0;height:30px;z-index:2; background:rgba(10,7,20,.85);display:flex;align-items:center;gap:6px;padding:0 12px; border-bottom:1px solid var(--border); } .work__bar i{width:9px;height:9px;border-radius:50%;background:var(--faint);opacity:.5} .work__bar i:nth-child(1){background:#ff5f57;opacity:.9} .work__bar i:nth-child(2){background:#febc2e;opacity:.9} .work__bar i:nth-child(3){background:#28c840;opacity:.9} .work__bar small{margin-left:8px;color:var(--faint);font-size:.7rem;letter-spacing:.04em} .work__frame{ position:absolute;inset:30px 0 0 0;width:100%;height:calc(400% - 30px);border:0; transform:scale(.25);transform-origin:top left;width:400%; pointer-events:none;background:#fff; } .work__img{ position:absolute;inset:30px 0 0 0;width:100%;height:calc(100% - 30px); object-fit:cover;object-position:center; transition:transform .6s cubic-bezier(.2,.7,.2,1); } .work:hover .work__img{transform:scale(1.05)} .work__logo{ position:absolute;inset:30px 0 0 0; display:flex;align-items:center;justify-content:center; background: radial-gradient(340px circle at 30% 20%,rgba(124,58,237,.35),transparent 60%), radial-gradient(340px circle at 75% 85%,rgba(56,189,248,.28),transparent 60%), #eef4fb; } .work__logo img{width:42%;max-width:170px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.25));transition:transform .5s} .work:hover .work__logo img{transform:scale(1.1)} .work__body{padding:26px 26px 28px;display:flex;flex-direction:column;gap:12px;flex:1} .work__price{ align-self:flex-start; font-family:var(--font-display);font-weight:700;font-size:.95rem; padding:6px 16px;border-radius:999px;background:var(--grad);color:#fff; box-shadow:0 6px 18px rgba(217,38,169,.35); } .work h3{font-size:1.22rem} .work p{color:var(--muted);font-size:.92rem;flex:1} .work ul{display:flex;flex-direction:column;gap:8px;margin:4px 0 8px} .work ul li{ display:flex;gap:10px;align-items:flex-start; color:var(--muted);font-size:.88rem; } .work ul li::before{content:"✓";color:var(--pink);font-weight:700;flex-shrink:0} /* ---------- testimonios ---------- */ .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px} .quote{ position:relative;padding:34px 28px 28px;border-radius:var(--radius); border:1px solid var(--border);background:var(--card); display:flex;flex-direction:column;gap:16px; transition:transform .3s,border-color .3s; } .quote:hover{transform:translateY(-6px);border-color:rgba(139,92,246,.5)} .quote::before{ content:"“";position:absolute;top:2px;left:20px;font-family:var(--font-display); font-size:4.6rem;line-height:1; background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; opacity:.65; } .quote p{color:var(--text);font-size:.98rem;margin-top:18px} .quote footer{display:flex;align-items:center;gap:13px} .quote footer .avatar{ width:44px;height:44px;border-radius:50%; background:var(--grad);display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-weight:700;color:#fff; } .quote footer b{display:block;font-size:.93rem} .quote footer small{color:var(--faint);font-size:.8rem} .quote .stars{color:var(--aviso);letter-spacing:2px;font-size:.85rem} /* ---------- vídeos ---------- */ .reels{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px} .reel{ position:relative;aspect-ratio:9/16;border-radius:var(--radius);overflow:hidden; border:1px solid var(--border);cursor:pointer;background:var(--bg-3); transition:transform .35s,box-shadow .35s,border-color .35s; } .reel:hover{transform:translateY(-7px) scale(1.015);border-color:rgba(217,38,169,.5);box-shadow:0 24px 48px rgba(0,0,0,.5)} .reel video{width:100%;height:100%;object-fit:cover} .vids{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:52px} .vid{ position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden; border:1px solid var(--border);cursor:pointer;background:var(--bg-3); transition:transform .35s,box-shadow .35s,border-color .35s; } .vid:hover{transform:translateY(-7px);border-color:rgba(139,92,246,.5);box-shadow:0 24px 48px rgba(0,0,0,.5)} .vid video{width:100%;height:100%;object-fit:cover} .play-tag{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:linear-gradient(180deg,transparent 40%,rgba(7,5,14,.72)); transition:opacity .3s;z-index:2;pointer-events:none; } .play-tag::before{ content:"";width:62px;height:62px;border-radius:50%; background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.55); backdrop-filter:blur(6px); clip-path:none; display:block; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:55% center;background-size:26px; animation:pulse 2.4s infinite; } .is-playing .play-tag{opacity:0} .media-label{ position:absolute;left:14px;bottom:12px;z-index:3; font-family:var(--font-display);font-weight:600;font-size:.85rem;letter-spacing:.05em; padding:6px 14px;border-radius:999px; background:rgba(7,5,14,.65);border:1px solid var(--border);backdrop-filter:blur(8px); pointer-events:none; } /* ---------- galería fotos ---------- */ .photos{columns:3;column-gap:20px;margin-top:52px} .photo{ position:relative;border-radius:var(--radius);overflow:hidden;margin-bottom:20px; border:1px solid var(--border);break-inside:avoid; } .photo img{ width:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1); } .photo:hover img{transform:scale(1.06)} .photo::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 55%,rgba(7,5,14,.65)); opacity:0;transition:opacity .35s; } .photo:hover::after{opacity:1} /* ---------- métricas ADS ---------- */ .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px} .metric{ padding:30px 24px;border-radius:var(--radius);text-align:center; border:1px solid var(--border);background:var(--card); position:relative;overflow:hidden; transition:transform .3s,border-color .3s; } .metric:hover{transform:translateY(-6px);border-color:rgba(217,38,169,.5)} .metric::before{ content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad); } .metric b{ display:block;font-family:var(--font-display);font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:700; } .metric small{color:var(--muted);font-size:.88rem;display:block;margin-top:4px} .metric .delta{ display:inline-block;margin-top:12px;padding:4px 12px;border-radius:999px; background:rgba(31,190,95,.14);color:var(--ok);font-size:.8rem;font-weight:600; } .note{color:var(--faint);font-size:.82rem;margin-top:18px;text-align:center} /* ---------- caso real anónimo (ADS) ---------- Tres hitos en el tiempo y, debajo, lo que multiplicó cada cosa. Los importes NO aparecen: solo multiplicadores. */ .caso{margin-top:52px} .caso__hitos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative} .caso__hito{ padding:26px 24px;border-radius:var(--radius); border:1px solid var(--border);background:var(--card); transition:transform .3s,border-color .3s; } .caso__hito:hover{transform:translateY(-5px);border-color:rgba(139,92,246,.45)} /* El último es el que remata la historia: se destaca */ .caso__hito--fin{ border-color:rgba(217,38,169,.45); background: radial-gradient(500px circle at 50% 0%,rgba(217,38,169,.14),transparent 65%), var(--card); } .caso__mes{display:block;font-family:var(--font-display);font-weight:700;font-size:1.05rem} .caso__eti{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase; color:var(--faint);margin-top:4px} .caso__datos{display:flex;flex-direction:column;gap:12px;margin-top:20px} .caso__datos li{display:flex;align-items:baseline;justify-content:space-between;gap:12px; padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.06)} .caso__datos li:last-child{border-bottom:0;padding-bottom:0} .caso__datos b{font-family:var(--font-display);font-size:1.5rem;line-height:1; font-variant-numeric:tabular-nums} .caso__datos small{color:var(--muted);font-size:.84rem} .caso__multis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px; padding:26px 22px;border-radius:var(--radius); background:var(--grad-soft);border:1px solid rgba(139,92,246,.3)} .caso__multi{text-align:center} .caso__multi b{display:block;font-family:var(--font-display);font-size:clamp(1.9rem,4.4vw,2.7rem); line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent} .caso__multi small{display:block;margin-top:8px;color:var(--muted);font-size:.82rem;line-height:1.35} /* El dato que más pesa, un punto más grande */ .caso__multi--top b{font-size:clamp(2.2rem,5.4vw,3.2rem)} @media (max-width:900px){ .caso__hitos{grid-template-columns:1fr;gap:14px} .caso__multis{grid-template-columns:1fr 1fr;gap:22px 16px} } /* anillo circular de las métricas */ .ring{position:relative;width:126px;height:126px;margin:4px auto 16px} .ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible} .ring circle{fill:none;stroke-width:7} .ring__bg{stroke:rgba(255,255,255,.08)} .ring__fill{ stroke:url(#ringGrad);stroke-linecap:round; stroke-dasharray:326.7;stroke-dashoffset:326.7; filter:drop-shadow(0 0 6px rgba(217,38,169,.45)); } .metric .ring b{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:1.5rem;line-height:1; } /* ---------- precio destacado ---------- */ .offer{ margin-top:52px;padding:44px 40px;border-radius:26px;position:relative;overflow:hidden; border:1px solid rgba(217,38,169,.4); background: radial-gradient(600px circle at 15% 0%,rgba(124,58,237,.22),transparent 60%), radial-gradient(600px circle at 90% 100%,rgba(217,38,169,.18),transparent 60%), var(--bg-3); display:grid;grid-template-columns:1.3fr 1fr;gap:36px;align-items:center; } .offer h3{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:14px} .offer p{color:var(--muted)} .offer ul{display:flex;flex-direction:column;gap:12px;margin-top:20px} .offer ul li{display:flex;gap:12px;color:var(--muted);font-size:.95rem} .offer ul li::before{content:"✓";color:var(--pink);font-weight:700} .offer__price{text-align:center} .offer__price .big{ font-family:var(--font-display);font-size:clamp(2.6rem,5vw,3.6rem);font-weight:700; background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; display:block;line-height:1; } .offer__price small{color:var(--muted);display:block;margin-top:10px} .offer__price .btn{margin-top:24px} /* ---------- dashboard de campaña (ADS) ---------- */ .dash{ margin-top:52px;border-radius:24px;overflow:hidden; border:1px solid rgba(139,92,246,.35); background:linear-gradient(180deg,rgba(19,13,36,.92),rgba(10,7,20,.96)); box-shadow:0 30px 80px rgba(0,0,0,.5); } .dash__head{ display:flex;align-items:center;gap:16px;padding:15px 22px;flex-wrap:wrap; border-bottom:1px solid var(--border); } .dash__brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:.95rem} .dash__brand img{width:26px;height:26px;border-radius:50%} .dash__months{display:flex;gap:3px;flex:1;justify-content:center;flex-wrap:wrap} .dash__months span{font-size:.63rem;letter-spacing:.08em;padding:5px 8px;border-radius:8px;color:var(--faint);font-weight:600} .dash__months span.is-act{background:var(--grad);color:#fff;box-shadow:0 4px 12px rgba(217,38,169,.4)} .dash__live{display:inline-flex;align-items:center;gap:7px;font-size:.68rem;font-weight:700;letter-spacing:.14em;color:var(--ok)} .dash__live i{width:8px;height:8px;border-radius:50%;background:#4ade80;animation:pulse 1.6s infinite} .dash__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;padding:18px} .dash__card{ border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.03); padding:16px 18px; opacity:0;transform:translateY(18px) scale(.97); transition:opacity .6s cubic-bezier(.2,.65,.3,1),transform .6s cubic-bezier(.2,.65,.3,1); transition-delay:calc(var(--i,0)*.15s); } .dash.is-live .dash__card{opacity:1;transform:none} .dash__card h4{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:14px;font-weight:600} .dash__kpi small{display:block;font-size:.7rem;color:var(--faint);letter-spacing:.06em;text-transform:uppercase} .dash__kpi b{ display:block;font-family:var(--font-display);font-weight:700; font-size:clamp(1.35rem,2.3vw,1.85rem);margin:7px 0 9px; background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .dash__kpi .delta{font-size:.7rem;padding:3px 9px} .dash__chart{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column} .dash__bars{position:relative;display:flex;align-items:flex-end;gap:6px;flex:1;min-height:220px;padding-top:8px} .dash__barcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end} .dash__barcol i{ width:100%;max-width:24px;border-radius:6px 6px 2px 2px; height:calc(var(--h)*1%); background:linear-gradient(180deg,#8b5cf6,#d926a9); box-shadow:0 0 14px rgba(139,92,246,.25); transform:scaleY(0);transform-origin:bottom; transition:transform .8s cubic-bezier(.2,.65,.3,1) calc(.35s + var(--bi)*.07s); } .dash.is-live .dash__barcol i{transform:scaleY(1)} .dash__barcol span{font-size:.56rem;color:var(--faint);letter-spacing:.04em} .dash__lineSvg{position:absolute;left:0;right:0;top:8px;bottom:22px;width:100%;height:calc(100% - 30px);overflow:visible;pointer-events:none} .dash__lineSvg polyline{ fill:none;stroke:#ec4899;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; filter:drop-shadow(0 0 6px rgba(236,72,153,.55)); } .dash__legend{display:flex;gap:16px;font-size:.66rem;color:var(--faint);margin-top:10px} .dash__legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px} .dash__ringWrap{display:flex;align-items:center;gap:8px;flex-direction:column} .dash .ring{width:118px;height:118px;margin:0 auto} .dash .ring b{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-weight:700;font-size:1.2rem; } .dash__ringLabel{font-size:.72rem;color:var(--muted);text-align:center;line-height:1.4} .fn{display:flex;align-items:center;gap:10px;margin-bottom:11px} .fn span{width:82px;font-size:.68rem;color:var(--muted)} .fn-bar{flex:1;height:13px;border-radius:7px;background:rgba(255,255,255,.05);overflow:hidden} .fn-bar i{ display:block;height:100%;width:calc(var(--w)*1%);border-radius:7px;background:var(--grad); transform:scaleX(0);transform-origin:left; transition:transform .9s cubic-bezier(.2,.65,.3,1) calc(.55s + var(--fi)*.2s); } .dash.is-live .fn-bar i{transform:scaleX(1)} .fn b{width:52px;text-align:right;font-size:.68rem;font-family:var(--font-display)} .dash__feed{grid-row:span 2;display:flex;flex-direction:column;min-height:0} .dash__feed ul{flex:1;display:flex;flex-direction:column;gap:8px;overflow:hidden} .dash__feed li{ display:flex;gap:9px;align-items:flex-start;font-size:.72rem;color:var(--muted); padding:8px 11px;border-radius:10px;line-height:1.35; background:rgba(255,255,255,.04);border:1px solid var(--border); animation:feedIn .5s cubic-bezier(.2,.65,.3,1); } .dash__feed li i{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px} .dash__feed li b{color:var(--text);font-weight:600;display:block} @keyframes feedIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}} .dash__split{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .sp small{display:flex;justify-content:space-between;font-size:.7rem;color:var(--muted);margin-bottom:7px} .sp small b{font-family:var(--font-display);color:var(--text)} .sp-track{height:8px;border-radius:5px;background:rgba(255,255,255,.05);overflow:hidden} .sp-track i{ display:block;height:100%;width:calc(var(--w)*1%);border-radius:5px;background:var(--c,#8b5cf6); transform:scaleX(0);transform-origin:left; transition:transform 1s ease calc(.7s + var(--si)*.15s); } .dash.is-live .sp-track i{transform:scaleX(1)} .dash__note{padding:13px 22px 18px;font-size:.72rem;color:var(--faint);text-align:center;border-top:1px solid var(--border)} @media (max-width:1024px){ .dash__grid{grid-template-columns:repeat(2,1fr)} .dash__chart{grid-column:span 2} .dash__feed{grid-column:span 2;grid-row:auto} .dash__split{grid-template-columns:repeat(2,1fr)} } @media (max-width:720px){ .dash__months{display:none} .dash__grid{grid-template-columns:1fr 1fr;padding:12px;gap:10px} .dash__chart{grid-column:span 2} .dash__ring,.dash__funnel,.dash__feed,.dash__card--funnel{grid-column:span 2} .dash__split{grid-template-columns:1fr 1fr} .dash__bars{min-height:160px} } /* ---------- FAQ ---------- */ .faqs{max-width:760px;margin:52px auto 0;display:flex;flex-direction:column;gap:14px} .faq{ border:1px solid var(--border);border-radius:16px;background:var(--card); overflow:hidden;transition:border-color .3s; } .faq.is-open{border-color:rgba(139,92,246,.5)} .faq button{ width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px; padding:20px 24px;text-align:left; font-family:var(--font-display);font-weight:600;font-size:1rem; } .faq button i{ font-style:normal;flex-shrink:0;width:26px;height:26px;border-radius:50%; border:1px solid var(--border);display:flex;align-items:center;justify-content:center; font-size:.9rem;transition:transform .35s,background .35s; } .faq.is-open button i{transform:rotate(45deg);background:var(--grad);border-color:transparent} .faq__body{max-height:0;overflow:hidden;transition:max-height .4s ease} .faq__body p{padding:0 24px 22px;color:var(--muted);font-size:.94rem} /* ---------- mapa de automatizaciones (webs-apps) ---------- */ .autoflow{padding-top:clamp(64px,9vw,110px);position:relative} .autoflow__stage{ position:relative;height:660px;margin-top:48px;overflow:hidden; border-block:1px solid var(--border); background: radial-gradient(900px circle at 28% 42%,rgba(124,58,237,.09),transparent 60%), radial-gradient(700px circle at 78% 70%,rgba(217,38,169,.07),transparent 60%), var(--bg-2); } .autoflow__stage canvas{position:absolute;inset:0;width:100%;height:100%} .af-node{ position:absolute;z-index:2;width:118px; display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center; transform:translate(-50%,-50%) scale(0); transition:transform .55s cubic-bezier(.34,1.56,.64,1); } .af-node.is-on{transform:translate(-50%,-50%) scale(1)} .af-node__tile{ width:56px;height:56px;border-radius:16px; display:flex;align-items:center;justify-content:center; background:rgba(10,7,20,.92);border:1.5px solid var(--border); transition:box-shadow .3s,transform .3s; } .af-node:hover .af-node__tile{transform:scale(1.12)} .af-node__tile svg{width:26px;height:26px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .af-node--hub .af-node__tile{width:76px;height:76px;border-radius:20px} .af-node--hub .af-node__tile svg{width:36px;height:36px} .af-node b{font-family:var(--font-display);font-size:.73rem;letter-spacing:.04em;line-height:1.2} .af-node small{ font-size:.63rem;color:var(--muted);line-height:1.3;max-width:126px; opacity:0;transform:translateY(-3px);transition:opacity .3s,transform .3s; } .af-node:hover small{opacity:1;transform:none} .autoflow__twist{ position:absolute;inset:0;z-index:4; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px; text-align:center;padding:20px; background:rgba(7,5,14,.6);backdrop-filter:blur(5px); opacity:0;pointer-events:none;transition:opacity .7s; } .autoflow__twist.is-on{opacity:1} .autoflow__twist h3{font-family:var(--font-display);font-size:clamp(1.7rem,4.6vw,2.8rem);letter-spacing:-.01em} .autoflow__twist p{font-size:clamp(1.05rem,2.4vw,1.5rem);color:var(--muted)} .autoflow__twist p b{ background:var(--grad);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;font-weight:700; } .autoflow__counter{ position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:3; padding:10px 20px;border-radius:999px;white-space:nowrap; border:1px solid var(--border);background:rgba(7,5,14,.75);backdrop-filter:blur(8px); font-size:.82rem;color:var(--muted); } .autoflow__counter b{ font-family:var(--font-display); background:var(--grad);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; } .autoflow__closing{ font-family:var(--font-display);font-size:clamp(1.15rem,2.6vw,1.6rem); max-width:640px;margin:52px auto 26px;font-style:italic;color:var(--text); } .autoflow__cta{padding-bottom:20px} @media (max-width:1024px) and (min-width:721px){ .af-node{width:96px} .af-node__tile{width:46px;height:46px;border-radius:13px} .af-node__tile svg{width:22px;height:22px} .af-node--hub .af-node__tile{width:60px;height:60px} .af-node b{font-size:.66rem} .af-node small{display:none} } @media (max-width:720px){ .autoflow__stage{height:960px} .af-node{width:104px} .af-node__tile{width:50px;height:50px;border-radius:14px} .af-node--hub .af-node__tile{width:64px;height:64px} .af-node small{display:none} .autoflow__counter{font-size:.7rem;padding:8px 14px} } /* ---------- río de datos (canvas DATA SCIENCE) ---------- */ .dataflow{ position:relative;height:clamp(300px,44vw,460px); background:var(--bg-2);border-block:1px solid var(--border); overflow:hidden; } .dataflow canvas{width:100%;height:100%;display:block} .dataflow__label{ position:absolute;bottom:18px;z-index:2; font-family:var(--font-display);font-size:.75rem;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--muted); padding:8px 16px;border:1px solid var(--border);border-radius:999px; background:rgba(7,5,14,.6);backdrop-filter:blur(6px); } .dataflow__label--l{left:18px} .dataflow__label--r{ right:18px;color:var(--text);border-color:rgba(217,38,169,.55); box-shadow:0 0 18px rgba(217,38,169,.25); } @media (max-width:720px){ .dataflow__label{font-size:.62rem;padding:6px 11px} .dataflow__label--l{left:10px;top:12px;bottom:auto} .dataflow__label--r{right:10px;bottom:12px} } /* ---------- palancas DATA ---------- */ .palancas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px} .palanca{ position:relative;padding:32px 26px;border-radius:var(--radius); border:1px solid var(--border);background:var(--card);overflow:hidden; transition:transform .3s,border-color .3s; } .palanca:hover{transform:translateY(-7px);border-color:rgba(217,38,169,.5)} .palanca__num{ font-family:var(--font-display);font-weight:700;font-size:3.2rem;line-height:1; position:absolute;top:16px;right:20px;opacity:.12; } .palanca h3{font-size:1.1rem;margin-bottom:10px;padding-right:40px} .palanca p{color:var(--muted);font-size:.92rem} .palanca .tagline{ display:inline-block;margin-bottom:14px;padding:5px 13px;border-radius:999px; background:var(--grad-soft);border:1px solid rgba(139,92,246,.3); font-size:.78rem;font-weight:600;letter-spacing:.03em; } /* ---------- sectores ---------- */ .sectors{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:52px} .sector{ padding:26px 22px;border-radius:var(--radius); border:1px solid var(--border);background:var(--card); transition:transform .3s,border-color .3s,background .3s; } .sector:hover{transform:translateY(-5px);border-color:rgba(139,92,246,.5);background:var(--card-hover)} .sector b{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:1rem;margin-bottom:8px} .sector p{color:var(--muted);font-size:.86rem;font-style:italic} /* ---------- banner grande hacia la calculadora (ADS) ---------- */ .calc-banner{ display:grid;grid-template-columns:1.5fr auto;gap:30px;align-items:center; margin-top:38px;padding:32px 38px;border-radius:24px;position:relative; border:2px solid transparent; background: linear-gradient(var(--bg-3),var(--bg-3)) padding-box, linear-gradient(115deg,#8b5cf6,#d926a9,#ec4899,#38bdf8,#8b5cf6) border-box; background-size:100% 100%,300% 300%; animation:calcBorder 6s linear infinite; box-shadow:0 16px 44px rgba(217,38,169,.22); transition:transform .3s,box-shadow .3s; } .calc-banner:hover{transform:translateY(-5px);box-shadow:0 28px 64px rgba(217,38,169,.42)} @keyframes calcBorder{to{background-position:0 0,300% 0}} .calc-banner__kicker{ font-family:var(--font-display);font-size:.72rem;font-weight:600; letter-spacing:.22em;text-transform:uppercase; background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .calc-banner h3{font-size:clamp(1.3rem,2.8vw,1.9rem);margin:10px 0 8px;line-height:1.25} .calc-banner > div:first-child p{color:var(--muted);font-size:.96rem} .calc-banner__cta{text-align:center;min-width:230px} .calc-banner__num{ display:block;font-family:var(--font-display);font-weight:700;line-height:1; font-size:clamp(2rem,4.2vw,3rem);color:var(--mal); text-shadow:0 0 26px rgba(248,113,113,.4); } .calc-banner__ex{display:block;font-size:.68rem;color:var(--faint);margin:8px 0 16px} @media (max-width:860px){ .calc-banner{grid-template-columns:1fr;text-align:center;padding:26px 22px} .calc-banner__cta{min-width:0} } /* ---------- calculadora de leads perdidos ---------- */ .calc{display:grid;grid-template-columns:1fr 1.1fr;gap:26px;margin-top:52px;align-items:stretch} .calc__form{padding:30px;border-radius:22px;border:1px solid var(--border);background:var(--card)} .calc__form label{display:block;font-size:.82rem;font-weight:600;color:var(--muted);margin:20px 0 8px;letter-spacing:.02em} .calc__form label:first-of-type{margin-top:0} /* selector de modo */ .calc__mode{ display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px; border-radius:14px;background:rgba(7,5,14,.55);border:1px solid var(--border); margin-bottom:26px; } .calc__mode button{ padding:11px 10px;border-radius:10px;font-size:.85rem;font-weight:600;color:var(--muted); transition:background .3s,color .3s,box-shadow .3s;line-height:1.3; } .calc__mode button.is-sel{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(217,38,169,.3)} .calc__hidden{display:none} .calc__auto{ font-size:.76rem;color:var(--faint);line-height:1.5; padding:12px 14px;border-radius:12px;border:1px dashed var(--border);margin-top:18px; } .calc__auto b{color:var(--muted)} .calc__auto button{ display:block;margin-top:6px;font-size:.76rem;text-decoration:underline; color:var(--pink); } /* bloque de potencial (modo sin ads) */ .calc__extra{ margin-top:24px;padding:20px 22px;border-radius:16px; border:1px solid rgba(74,222,128,.3);background:rgba(74,222,128,.07); } .calc__extra .calc__pre{color:var(--ok);margin-bottom:8px} .calc__extra .big2{ font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,3.6vw,2.3rem); color:var(--ok);line-height:1;display:block; } .calc__extra p{color:var(--muted);font-size:.85rem;margin-top:9px;line-height:1.5} .calc__form input,.calc__form select{ width:100%;padding:13px 16px;border-radius:12px;border:1px solid var(--border); background:rgba(7,5,14,.5);color:var(--text);font:inherit;font-size:.95rem; } .calc__form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b3a9cd'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:20px} .calc__form input:focus,.calc__form select:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(139,92,246,.18)} .calc__speeds{display:flex;flex-wrap:wrap;gap:8px} .calc__speeds button{ padding:10px 15px;border-radius:999px;border:1px solid var(--border); background:rgba(255,255,255,.04);color:var(--muted);font-size:.83rem; transition:background .25s,color .25s,border-color .25s,box-shadow .25s; } .calc__speeds button.is-sel{ background:var(--grad);color:#fff;border-color:transparent; box-shadow:0 6px 16px rgba(217,38,169,.35);font-weight:600; } .calc__form .btn{width:100%;justify-content:center;margin-top:26px} .calc__result{ padding:36px 30px;border-radius:22px;position:relative;overflow:hidden; border:1px solid rgba(217,38,169,.4); background: radial-gradient(500px circle at 80% 0%,rgba(217,38,169,.12),transparent 60%), radial-gradient(500px circle at 10% 100%,rgba(139,92,246,.12),transparent 60%), var(--bg-3); display:flex;flex-direction:column;justify-content:center;text-align:center; } .calc__placeholder{color:var(--faint);font-size:.95rem;line-height:1.6} .calc__out{display:none} .calc__result.has-result .calc__placeholder{display:none} .calc__result.has-result .calc__out{display:block} .calc__pre{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .calc__big{ font-family:var(--font-display);font-weight:700;line-height:1; font-size:clamp(2.6rem,6.5vw,4.2rem); background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .calc__sub{color:var(--muted);margin-top:10px;font-size:.92rem} .calc__year{margin-top:14px;font-family:var(--font-display);font-size:1.15rem} .calc__year b{color:var(--mal)} .calc__bars{margin:26px auto 4px;max-width:400px;display:flex;flex-direction:column;gap:13px;text-align:left} .calc__bar small{display:flex;justify-content:space-between;font-size:.74rem;color:var(--muted);margin-bottom:5px} .calc__bar small b{font-family:var(--font-display);color:var(--text)} .calc__bar .track{height:12px;border-radius:7px;background:rgba(255,255,255,.06);overflow:hidden} .calc__bar .track i{ display:block;height:100%;border-radius:7px;width:calc(var(--w)*1%); transform:scaleX(0);transform-origin:left; transition:transform 1s cubic-bezier(.2,.65,.3,1) .35s; } .calc__bar--ideal .track i{background:#4ade80} .calc__bar--you .track i{background:var(--grad)} .calc__result.has-result .track i{transform:scaleX(1)} .calc__hope{margin-top:22px;font-family:var(--font-display);font-size:1.08rem} .calc__cta{margin-top:16px;display:flex;flex-direction:column;gap:10px;align-items:center} .calc__note{margin-top:24px;font-size:.68rem;color:var(--faint);line-height:1.55} @media (max-width:900px){.calc{grid-template-columns:1fr}} /* ---------- desglose de palancas (calculadora Data Science) ---------- */ .levers{display:flex;flex-direction:column;gap:10px;margin:26px 0 4px;text-align:left} .lever{ position:relative;display:flex;align-items:center;gap:13px; padding:13px 16px;border-radius:14px;overflow:hidden; border:1px solid var(--border);background:rgba(255,255,255,.04); opacity:0;transform:translateX(-16px); transition:opacity .55s cubic-bezier(.2,.65,.3,1),transform .55s cubic-bezier(.2,.65,.3,1); transition-delay:calc(var(--li,0)*.13s); } .calc__result.has-result .lever{opacity:1;transform:none} .lever::before{ content:"";position:absolute;left:0;top:0;bottom:0; width:calc(var(--pct,0)*1%); background:linear-gradient(90deg,rgba(139,92,246,.28),rgba(217,38,169,.12)); transform:scaleX(0);transform-origin:left; transition:transform .9s cubic-bezier(.2,.65,.3,1) calc(.3s + var(--li,0)*.13s); } .calc__result.has-result .lever::before{transform:scaleX(1)} .lever__ic{ position:relative;z-index:1;width:38px;height:38px;border-radius:11px;flex-shrink:0; display:flex;align-items:center;justify-content:center;font-size:1.05rem; background:var(--grad-soft);border:1px solid rgba(139,92,246,.3); } .lever__txt{position:relative;z-index:1;flex:1;min-width:0} .lever__txt b{display:block;font-family:var(--font-display);font-size:.92rem;line-height:1.25} .lever__txt small{display:block;color:var(--muted);font-size:.75rem;line-height:1.35;margin-top:2px} .lever__eur{ position:relative;z-index:1;flex-shrink:0;font-family:var(--font-display); font-weight:700;font-size:1rem; background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .dtotal{ margin-top:22px;padding:22px;border-radius:18px; border:1px solid rgba(217,38,169,.45); background:radial-gradient(600px circle at 50% 0%,rgba(217,38,169,.14),transparent 70%),rgba(255,255,255,.03); } .dtotal__pct{ display:inline-block;margin-top:12px;padding:7px 18px;border-radius:999px; background:var(--grad);color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.05rem; box-shadow:0 8px 22px rgba(217,38,169,.38); } .dtotal__foot{margin-top:14px;font-size:.83rem;color:var(--muted);line-height:1.5} .calc__range{display:flex;align-items:center;gap:14px} .calc__range input[type=range]{flex:1;accent-color:#d926a9;padding:0} .calc__range b{ font-family:var(--font-display);font-size:1.05rem;min-width:56px;text-align:right; background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } /* ---------- banner CTA ---------- */ .cta-banner{ position:relative;border-radius:28px;padding:clamp(44px,7vw,76px) clamp(28px,6vw,70px); overflow:hidden;text-align:center; border:1px solid rgba(217,38,169,.4); background: radial-gradient(700px circle at 20% 20%,rgba(124,58,237,.3),transparent 55%), radial-gradient(700px circle at 85% 80%,rgba(217,38,169,.28),transparent 55%), var(--bg-3); } /* ---------- entrada lateral del bloque de contacto ---------- Llega desde fuera del borde derecho y recorre hasta centrarse. El avance va atado al scroll (--lat, de 1 a 0, lo escribe main.js), no es una animación que se dispare una vez: si subes, retrocede. El padre lleva overflow oculto para que al asomar por la derecha no aparezca barra horizontal en móvil. */ .cta-banner--lateral{ transform:translateX(calc(var(--lat,0) * 62%)) scale(calc(1 - var(--lat,0) * .04)); opacity:calc(1 - var(--lat,0) * .85); will-change:transform,opacity; } .seccion-lateral{overflow:hidden} @media (prefers-reduced-motion:reduce){ .cta-banner--lateral{transform:none;opacity:1} } .cta-banner h2{font-size:clamp(1.8rem,4.4vw,3rem);margin-bottom:16px} .cta-banner p{color:var(--muted);max-width:560px;margin:0 auto 32px} .cta-banner .hero__actions{justify-content:center;margin-top:0} /* ---------- formulario contacto ---------- */ .contact{display:grid;grid-template-columns:1fr 1.2fr;gap:44px;margin-top:52px;align-items:start} .contact__info{display:flex;flex-direction:column;gap:14px} .contact__info .item{ display:flex;align-items:center;gap:16px;padding:20px 22px; border:1px solid var(--border);border-radius:16px;background:var(--card); transition:transform .3s,border-color .3s; } .contact__info .item:hover{transform:translateX(6px);border-color:rgba(139,92,246,.5)} .contact__info .item i{ font-style:normal;width:46px;height:46px;border-radius:13px;flex-shrink:0; background:var(--grad-soft);border:1px solid rgba(139,92,246,.35); display:flex;align-items:center;justify-content:center;font-size:1.2rem; } .contact__info .item b{display:block;font-size:.95rem} .contact__info .item small{color:var(--muted);font-size:.85rem} .form{ padding:34px 30px;border-radius:22px; border:1px solid var(--border);background:var(--card);backdrop-filter:blur(8px); display:grid;grid-template-columns:1fr 1fr;gap:16px; } .form .full{grid-column:1/-1} .form label{display:block;font-size:.82rem;font-weight:600;color:var(--muted);margin-bottom:7px;letter-spacing:.03em} .form input,.form select,.form textarea{ width:100%;padding:13px 16px;border-radius:12px; border:1px solid var(--border);background:rgba(7,5,14,.5); color:var(--text);font:inherit;font-size:.94rem; transition:border-color .25s,box-shadow .25s; } .form input:focus,.form select:focus,.form textarea:focus{ outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(139,92,246,.18); } .form textarea{resize:vertical;min-height:120px} .form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b3a9cd'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:20px} .form .btn{width:100%;justify-content:center} /* ---------- footer ---------- */ .footer{ border-top:1px solid var(--border);background:var(--bg-2); padding:60px 0 34px;position:relative;overflow:hidden; } .footer__grid{ display:grid;grid-template-columns:1.3fr .9fr 1fr 1.2fr;gap:40px; } .footer__brand{display:flex;align-items:center;gap:11px;margin-bottom:16px} .footer__brand img{width:38px;height:38px;border-radius:50%} .footer__brand span{font-family:var(--font-display);font-weight:700;font-size:1.2rem;letter-spacing:.12em} .footer p{color:var(--muted);font-size:.9rem;max-width:340px} .footer h4{font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:18px} .footer ul{display:flex;flex-direction:column;gap:11px} .footer ul a{color:var(--muted);font-size:.92rem;transition:color .25s;display:inline-flex;gap:8px;align-items:center} .footer ul a:hover{color:var(--text)} .footer__bottom{ margin-top:48px;padding-top:26px;border-top:1px solid var(--border); display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px; color:var(--faint);font-size:.82rem; } .footer__bottom nav{display:flex;gap:20px} .footer__bottom a:hover{color:var(--text)} /* ---------- WhatsApp flotante ---------- */ .wa-float{ position:fixed;right:22px;bottom:22px;z-index:998; width:58px;height:58px;border-radius:50%; background:#1fbe5f;display:flex;align-items:center;justify-content:center; box-shadow:0 10px 30px rgba(31,190,95,.45); transition:transform .3s; animation:pulse 2.6s infinite; } .wa-float:hover{transform:scale(1.12)} .wa-float svg{width:30px;height:30px;fill:#fff} /* ---------- chatbot: burbuja flotante encima del botón de WhatsApp ---------- */ .chatbot-fab{ position:fixed;right:22px;bottom:94px;z-index:1001; width:58px;height:58px;border-radius:50%;padding:0; background:var(--grad);border:none;cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 24px rgba(217,38,169,.35); display:flex;align-items:center;justify-content:center; opacity:0;transform:translateY(20px) scale(.8); transition:opacity .45s,transform .45s cubic-bezier(.2,.65,.3,1),box-shadow .25s; } .chatbot-fab.is-in{opacity:1;transform:none} .chatbot-fab:hover{box-shadow:0 14px 34px rgba(0,0,0,.55),0 0 32px rgba(217,38,169,.5)} .chatbot-fab img{width:42px;height:42px;border-radius:50%;transition:opacity .25s,transform .25s} .chatbot-fab__x{position:absolute;color:#fff;font-size:1.3rem;line-height:1;opacity:0;transform:rotate(-90deg);transition:opacity .25s,transform .25s} .chatbot-fab.is-open img{opacity:0;transform:scale(.6)} .chatbot-fab.is-open .chatbot-fab__x{opacity:1;transform:none} .chatbot-teaser{ position:fixed;right:92px;bottom:96px;z-index:1001; display:flex;align-items:center;gap:10px; max-width:min(300px,calc(100vw - 120px)); padding:12px 14px 12px 16px;border-radius:16px 16px 4px 16px; background:var(--bg-3);border:1px solid rgba(217,38,169,.5); color:var(--text);font-size:.95rem;line-height:1.4;cursor:pointer; box-shadow:0 12px 34px rgba(0,0,0,.55); opacity:0;transform:translateY(10px);pointer-events:none; transition:opacity .4s,transform .4s cubic-bezier(.2,.65,.3,1); } .chatbot-teaser.is-in{opacity:1;transform:none;pointer-events:auto} .chatbot-teaser__x{ flex-shrink:0;width:26px;height:26px;border-radius:8px;border:1px solid var(--border); background:rgba(7,5,14,.4);color:var(--muted);font-size:.85rem;line-height:1; display:flex;align-items:center;justify-content:center;transition:background .25s; } .chatbot-teaser__x:hover{background:rgba(255,255,255,.14);color:var(--text)} .chatbot{ position:fixed;right:22px;bottom:166px;z-index:1001; width:min(400px,calc(100vw - 44px)); border-radius:20px;overflow:hidden; border:1px solid rgba(217,38,169,.5); background:var(--bg-3); box-shadow:0 24px 70px rgba(0,0,0,.65),0 0 50px rgba(139,92,246,.18); opacity:0;transform:translateY(16px) scale(.96);transform-origin:bottom right; pointer-events:none; transition:opacity .4s cubic-bezier(.2,.65,.3,1),transform .4s cubic-bezier(.2,.65,.3,1); font-size:.95rem; } .chatbot.is-in{opacity:1;transform:none;pointer-events:auto} .chatbot.is-wide{ right:22px;bottom:22px;width:min(880px,calc(100vw - 44px)); display:flex;flex-direction:column;height:min(760px,calc(100vh - 110px)); font-size:1.03rem; } .chatbot.is-wide .chatbot__body{flex:1;max-height:none;padding:26px} .chatbot.is-wide .chatbot__msg{font-size:1.05rem;padding:14px 20px} .chatbot.is-wide .chatbot__opts > button{font-size:1rem;padding:15px 20px} .chatbot-fab.is-hidden{opacity:0;pointer-events:none;transform:translateY(20px) scale(.8)} .chatbot__expand{ margin-left:auto;width:36px;height:36px;border-radius:10px;flex-shrink:0; border:1px solid var(--border);background:rgba(7,5,14,.4);color:var(--text); display:flex;align-items:center;justify-content:center;transition:background .25s; } .chatbot__expand:hover{background:rgba(255,255,255,.14)} .chatbot__expand svg{width:17px;height:17px} .chatbot__expand .ic-min{display:none} .chatbot.is-wide .chatbot__expand .ic-max{display:none} .chatbot.is-wide .chatbot__expand .ic-min{display:block} .chatbot__expand + .chatbot__close{margin-left:8px} .chatbot__head{ display:flex;align-items:center;gap:12px;padding:14px 18px; background:linear-gradient(100deg,rgba(139,92,246,.3),rgba(217,38,169,.3)); border-bottom:1px solid var(--border); } .chatbot__head img{width:40px;height:40px;border-radius:50%;box-shadow:0 0 16px rgba(217,38,169,.55)} .chatbot__head b{font-family:var(--font-display);letter-spacing:.08em;display:block;line-height:1.15;font-size:1.05rem} .chatbot__head small{color:var(--ok);font-size:.82rem;display:flex;align-items:center;gap:5px} .chatbot__head small::before{content:"";width:7px;height:7px;border-radius:50%;background:#4ade80;animation:pulse 2s infinite} .chatbot__close{ width:36px;height:36px;border-radius:10px;flex-shrink:0; border:1px solid var(--border);background:rgba(7,5,14,.4); font-size:1.05rem;line-height:1;display:flex;align-items:center;justify-content:center; transition:background .25s; } .chatbot__close:hover{background:rgba(255,255,255,.14)} .chatbot__body{max-height:min(420px,calc(100vh - 340px));min-height:160px;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:11px} .chatbot__msg{ max-width:88%;padding:11px 15px;border-radius:14px 14px 14px 4px; background:rgba(255,255,255,.07);border:1px solid var(--border); color:var(--text);line-height:1.5;width:fit-content;font-size:.95rem; animation:msgIn .35s cubic-bezier(.2,.65,.3,1); } .chatbot__msg--user{ align-self:flex-end;border-radius:16px 16px 5px 16px; background:var(--grad);color:#fff;border:none; } @keyframes msgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .chatbot__typing{ display:flex;gap:5px;padding:13px 14px;width:max-content; border-radius:14px 14px 14px 4px; background:rgba(255,255,255,.07);border:1px solid var(--border); } .chatbot__typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blinkDot 1s infinite} .chatbot__typing i:nth-child(2){animation-delay:.18s} .chatbot__typing i:nth-child(3){animation-delay:.36s} @keyframes blinkDot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}} .chatbot__opts{display:flex;flex-direction:column;gap:10px;animation:msgIn .35s} .chatbot__opts > button{ text-align:left;padding:12px 15px;border-radius:12px; border:1px solid rgba(139,92,246,.45);background:rgba(139,92,246,.1); color:var(--text);font-size:.92rem;line-height:1.4; transition:background .25s,border-color .25s,transform .2s; } .chatbot__opts > button:hover{background:rgba(217,38,169,.18);border-color:var(--magenta);transform:translateX(4px)} .chatbot__otro{display:flex;gap:10px} .chatbot__otro input{ flex:1;min-width:0;padding:11px 14px;border-radius:12px;border:1px solid var(--border); background:rgba(7,5,14,.5);color:var(--text);font:inherit;font-size:.95rem; } .chatbot__otro input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(139,92,246,.18)} .chatbot__otro button{ padding:11px 18px;border-radius:12px;background:var(--grad);color:#fff; font-weight:600;font-size:.95rem;flex-shrink:0; transition:transform .2s,box-shadow .25s; } .chatbot__otro button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(217,38,169,.4)} .chatbot__note{ padding:10px 16px;border-top:1px solid var(--border); font-size:.78rem;color:var(--faint);line-height:1.45;text-align:center; background:rgba(7,5,14,.45); } @media (max-width:720px){ .chatbot{right:12px;bottom:150px;width:calc(100vw - 24px)} .chatbot__body{max-height:calc(100vh - 320px);padding:14px} .chatbot-fab{right:14px;bottom:84px;width:54px;height:54px} .chatbot-fab img{width:40px;height:40px} .chatbot-teaser{right:78px;bottom:88px;font-size:.9rem} .chatbot.is-wide{inset:0;width:auto;height:auto;border-radius:0;border:none} .chatbot.is-wide .chatbot__head{padding-top:max(14px,env(safe-area-inset-top))} .chatbot.is-wide .chatbot__body{padding:16px} .chatbot.is-wide .chatbot__note{padding-bottom:max(10px,env(safe-area-inset-bottom))} } /* ---------- titulares palabra a palabra ---------- */ .w-split .w{ display:inline-block; opacity:0;transform:translateY(.55em);filter:blur(7px); transition:opacity .6s cubic-bezier(.2,.65,.3,1),transform .6s cubic-bezier(.2,.65,.3,1),filter .6s; transition-delay:calc(var(--wi,0)*80ms); } .w-split.is-visible .w{opacity:1;transform:none;filter:blur(0)} /* el degradado de texto no atraviesa los spans de palabra: cada palabra dentro de .grad-text lleva su propio degradado */ .grad-text .w{ background:var(--grad);background-size:200% auto; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; animation:gradShift 6s linear infinite; } /* ---------- aro de cursor (solo escritorio) ---------- */ .cursor-ring{ position:fixed;left:0;top:0;z-index:2000;pointer-events:none; width:34px;height:34px;border-radius:50%; border:1.5px solid rgba(217,38,169,.65); box-shadow:0 0 12px rgba(139,92,246,.35); transform:translate(-50%,-50%); transition:width .25s,height .25s,border-color .25s,opacity .3s; opacity:0; } .cursor-ring.is-on{opacity:1} .cursor-ring.is-big{ width:52px;height:52px; border-color:rgba(139,92,246,.85); } @media (hover:none){.cursor-ring{display:none}} /* ============================================================ TRANSICIÓN ENTRE PÁGINAS ------------------------------------------------------------ Al pulsar un enlace, la página que se va se desplaza a la izquierda y la nueva entra desde la derecha, con un barrido de color de la marca por encima. Antes el salto era en seco y todas las páginas parecían la misma. Lo hace el propio navegador (View Transitions). En los que aún no lo soportan, como Firefox, simplemente no pasa nada: la web funciona igual que hasta ahora. No hay JavaScript de por medio. ============================================================ */ @view-transition{ navigation:auto } ::view-transition-old(root){ animation:pagSale .34s cubic-bezier(.4,0,.2,1) forwards; } ::view-transition-new(root){ animation:pagEntra .42s cubic-bezier(.2,.65,.3,1); } @keyframes pagSale{ to{ transform:translateX(-4%); opacity:0 } } @keyframes pagEntra{ from{ transform:translateX(6%); opacity:0 } to { transform:none; opacity:1 } } /* La barra superior no debe viajar con la página: se queda quieta mientras el resto se mueve, si no el logo da un salto raro. */ .nav{ view-transition-name:barra } ::view-transition-old(barra), ::view-transition-new(barra){ animation:none; mix-blend-mode:normal } @media (prefers-reduced-motion:reduce){ ::view-transition-old(root), ::view-transition-new(root){ animation:none } } /* ---------- animaciones scroll (reveal) ---------- */ .reveal{ opacity:0;transform:translateY(34px); transition:opacity .8s cubic-bezier(.2,.65,.3,1),transform .8s cubic-bezier(.2,.65,.3,1); transition-delay:var(--d,0s); will-change:opacity,transform; } .reveal--left{transform:translateX(-44px)} .reveal--right{transform:translateX(44px)} .reveal--zoom{transform:scale(.9)} .reveal.is-visible{opacity:1;transform:none} /* ---------- páginas legales ---------- */ .legal{max-width:780px;margin-inline:auto} .legal h1{margin-bottom:8px} .legal .updated{color:var(--faint);font-size:.85rem;margin-bottom:40px;display:block} .legal h2{font-size:1.25rem;margin:38px 0 14px} .legal p,.legal li{color:var(--muted);font-size:.95rem} .legal ul{list-style:disc;padding-left:22px;display:flex;flex-direction:column;gap:8px;margin:12px 0} .legal a{color:var(--pink)} .legal table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.88rem} .legal th,.legal td{border:1px solid var(--border);padding:10px 14px;text-align:left;color:var(--muted)} .legal th{color:var(--text);background:var(--card)} /* ============================================================ PANEL DE USUARIOS (niuxer.com/panel) ============================================================ */ .auth{ min-height:100svh;display:flex;align-items:center;justify-content:center; padding:90px 16px 40px;position:relative; } .auth__card{ width:min(460px,100%);padding:38px 34px;border-radius:24px;position:relative; border:1px solid rgba(139,92,246,.35); background:linear-gradient(180deg,rgba(19,13,36,.95),rgba(10,7,20,.98)); box-shadow:0 30px 80px rgba(0,0,0,.55); } .auth__card h1{font-size:1.5rem;margin-bottom:6px} .auth__card > p{color:var(--muted);font-size:.9rem;margin-bottom:24px} .auth__tabs{ display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;margin-bottom:24px; border-radius:14px;background:var(--campo);border:1px solid var(--border); } .auth__tabs button{ padding:11px;border-radius:10px;font-size:.88rem;font-weight:600;color:var(--muted); transition:background .3s,color .3s; } .auth__tabs button.is-sel{background:var(--grad);color:#fff} .auth label{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin:16px 0 7px} .auth input,.auth select{ width:100%;padding:12px 15px;border-radius:12px;border:1px solid var(--border); background:var(--campo);color:var(--text);font:inherit;font-size:.93rem; } .auth input:focus,.auth select:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(139,92,246,.18)} .auth select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b3a9cd'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:20px} .auth .btn{width:100%;justify-content:center;margin-top:22px} .auth__warn{ margin-top:14px;padding:11px 14px;border-radius:12px;font-size:.76rem;line-height:1.5; border:1px solid rgba(251,191,36,.35);background:rgba(251,191,36,.07);color:var(--aviso); } .auth__check{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:.8rem;color:var(--muted);line-height:1.45} .auth__check input{width:auto;margin-top:2px;accent-color:#d926a9} .auth__msg{margin-top:14px;font-size:.84rem;text-align:center;min-height:1.2em} .auth__msg.err{color:var(--mal)} .auth__msg.ok{color:var(--ok)} .auth__foot{margin-top:18px;text-align:center;font-size:.8rem;color:var(--faint)} .auth__foot a{color:var(--pink);text-decoration:underline} /* --- estructura del panel --- */ .papp{display:none;min-height:100svh;padding-top:calc(var(--nav-h) + 26px)} .papp.is-in{display:block} .papp__head{ display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between; margin-bottom:26px; } .papp__head h1{font-size:clamp(1.3rem,3vw,1.8rem)} .papp__head small{display:block;color:var(--muted);font-size:.85rem;margin-top:3px} .papp__rol{ display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px; font-family:var(--font-display);font-weight:600;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; border:1px solid rgba(139,92,246,.4);background:var(--grad-soft); } .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:26px} .pcard{ padding:22px;border-radius:18px;border:1px solid var(--border);background:var(--card); transition:transform .3s,border-color .3s; } .pcard:hover{transform:translateY(-4px);border-color:rgba(139,92,246,.45)} .pcard h3{font-size:1rem;margin-bottom:6px;display:flex;align-items:center;gap:9px} .pcard p{color:var(--muted);font-size:.86rem} .pcard .estado{ display:inline-block;margin-top:12px;padding:4px 12px;border-radius:999px; font-size:.72rem;font-weight:600; } .estado--activo{background:rgba(74,222,128,.14);color:var(--ok)} .estado--curso{background:rgba(251,191,36,.14);color:var(--aviso)} .estado--fin{background:rgba(148,163,184,.14);color:var(--gris)} /* Faltaba el rojo. Lo usan «bloqueada» y «descartada», y sobre todo el semáforo de coste de los platos: sin esta línea, el plato que se come la mitad de su precio salía escrito igual que uno sano. Justo el aviso que más importa era el único invisible. */ .estado--mal{background:rgba(248,113,113,.15);color:var(--mal)} .pbar{height:9px;border-radius:6px;background:var(--pista);overflow:hidden;margin-top:12px} .pbar i{display:block;height:100%;border-radius:6px;background:var(--grad);width:calc(var(--w)*1%);transition:width 1s cubic-bezier(.2,.65,.3,1)} .ptable{width:100%;border-collapse:collapse;font-size:.86rem} .ptable th{ text-align:left;padding:11px 14px;color:var(--faint);font-size:.7rem; letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--border); } .ptable td{padding:12px 14px;border-bottom:1px solid var(--linea);color:var(--muted)} .ptable td b{color:var(--text);font-weight:600} .ptable tr:hover td{background:var(--sutil)} .pchip{display:inline-block;padding:3px 11px;border-radius:999px;font-size:.72rem;font-weight:600} .pchip--lead{background:rgba(56,189,248,.14);color:var(--info)} .pchip--cliente{background:rgba(74,222,128,.14);color:var(--ok)} .pchip--equipo{background:rgba(139,92,246,.18);color:var(--lila)} .pchip--admin{background:var(--grad);color:#fff} .pbtn{ padding:7px 14px;border-radius:9px;font-size:.78rem;font-weight:600; border:1px solid var(--border);background:var(--boton);color:var(--muted); transition:all .25s;cursor:pointer; } .pbtn:hover{border-color:var(--purple);color:var(--text)} /* Un botón que destruye tiene que verse peligroso ANTES de pulsarlo, no solo al pasar el ratón por encima. */ .pbtn--danger{border-color:rgba(248,113,113,.38);color:var(--mal);background:rgba(248,113,113,.07)} .pbtn--danger:hover{border-color:var(--mal);color:#fff;background:rgba(248,113,113,.24)} .pbtn--ok{border-color:rgba(74,222,128,.4);color:var(--ok)} .psection{margin-bottom:34px} .psection > h2{font-size:1.05rem;margin-bottom:14px;display:flex;align-items:center;gap:10px} .psection > h2 small{color:var(--faint);font-weight:400;font-size:.78rem} .pwrap{border:1px solid var(--border);border-radius:18px;background:var(--card);overflow-x:auto} .pempty{padding:34px;text-align:center;color:var(--faint);font-size:.88rem} @media (max-width:900px){.pgrid{grid-template-columns:1fr 1fr}} @media (max-width:640px){ .pgrid{grid-template-columns:1fr} .ptable{font-size:.78rem} .ptable th,.ptable td{padding:9px 10px} } /* ---------- responsive ---------- */ @media (max-width:1080px){ .nav__links{display:none} .burger{display:flex} } @media (max-width:1024px){ .cards--4{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:repeat(2,1fr)} .metrics{grid-template-columns:repeat(2,1fr)} .reels{grid-template-columns:repeat(2,1fr)} .works{grid-template-columns:1fr;max-width:560px;margin-inline:auto} .sectors{grid-template-columns:repeat(2,1fr)} .palancas{grid-template-columns:repeat(2,1fr)} .quotes{grid-template-columns:1fr;max-width:560px;margin-inline:auto} .photos{columns:2} .offer{grid-template-columns:1fr;text-align:left} .offer__price{text-align:left} .footer__grid{grid-template-columns:1fr 1fr} } @media (max-width:720px){ :root{--nav-h:64px} .nav__links{display:none} .nav__cta{display:none} .burger{display:flex} .cards--4,.cards--3,.cards--2{grid-template-columns:1fr} .steps{grid-template-columns:1fr} .metrics{grid-template-columns:1fr 1fr;gap:14px} .vids{grid-template-columns:1fr} .reels{grid-template-columns:1fr 1fr;gap:14px} .palancas{grid-template-columns:1fr} .sectors{grid-template-columns:1fr} .contact{grid-template-columns:1fr} .form{grid-template-columns:1fr;padding:26px 20px} .footer__grid{grid-template-columns:1fr;gap:32px} .photos{columns:2;column-gap:12px} .photo{margin-bottom:12px} .hero__actions .btn{flex:1 1 230px;justify-content:center} .stats{grid-template-columns:1fr 1fr} .wa-float{right:16px;bottom:16px;width:54px;height:54px} .offer{padding:32px 24px} } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} html{scroll-behavior:auto} .reveal{opacity:1;transform:none} } /* ---------- Captura opcional tras el resultado de las calculadoras ---------- Va DESPUÉS del resultado a propósito: la página promete que el cálculo se ve sin dar el email, y esa promesa se cumple. */ .nxcap{margin:22px 0 0;padding:20px;border-radius:var(--radius); background:var(--grad-soft);border:1px solid rgba(139,92,246,.28)} .nxcap__t{font-family:var(--font-display);font-size:1.02rem;margin:0 0 4px} .nxcap__s{font-size:.85rem;color:var(--muted);margin:0 0 14px;line-height:1.55} .nxcap form{display:grid;grid-template-columns:1fr 1fr;gap:10px} .nxcap input{width:100%;padding:11px 14px;border-radius:11px;border:1px solid var(--border); background:rgba(7,5,14,.55);color:var(--text);font-family:inherit;font-size:.88rem;transition:.2s} .nxcap input:focus{outline:0;border-color:var(--purple);background:rgba(7,5,14,.8)} .nxcap input::placeholder{color:var(--faint)} .nxcap form > button{grid-column:1/-1;justify-self:start} .nxcap__leg{font-size:.74rem;color:var(--faint);margin:12px 0 0} .nxcap__leg a{color:var(--muted)} .nxcap__ok{font-size:.92rem;color:var(--text);line-height:1.6} .nxcap__ok b{color:var(--ok)} @media (max-width:560px){ .nxcap form{grid-template-columns:1fr} } /* ============================================================ ICONOS EN LÍNEA ------------------------------------------------------------ Los que van dentro de un texto, un botón o un recuadro, en vez de en una tarjeta de servicio (esos son .card__icon--svg). Todos con stroke:currentColor, así que cogen el color de lo que los rodea: en un botón morado salen blancos, en un enlace gris salen grises. Un emoji no puede hacer eso, y además lo dibuja el sistema operativo: distinto en Windows, en Android y en el iPhone. Por eso ya no queda ninguno haciendo de icono. ============================================================ */ .ico{ fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round; width:24px;height:24px;flex:0 0 auto; } /* Dentro de una línea de texto se mide en relación a la letra, no en píxeles, para que crezca y encoja con ella. */ .ico--in{width:1.05em;height:1.05em;vertical-align:-.17em} /* El grande del hueco de las calculadoras, antes de calcular */ .ico--xl{width:46px;height:46px;stroke-width:1.4;display:block;margin:0 auto 2px} /* Los que son silueta rellena y no trazo: WhatsApp y las estrellas. Va DESPUÉS de .ico a propósito, para poder anular su fill. */ .ico--solido{fill:currentColor;stroke:none} .ico--estrella{width:.95em;height:.95em;vertical-align:-.13em;margin-right:1px; fill:currentColor;stroke:none} /* Los recuadros que antes llevaban un emoji dentro. El recuadro ya tenía su tamaño y su fondo; solo hay que decirle al dibujo cuánto mide, porque un SVG sin medida se estira hasta romper la caja. */ .guarantee i .ico{width:26px;height:26px;color:#fff} .contact__info .item i .ico{width:22px;height:22px;color:var(--purple)} .lever__ic .ico{width:19px;height:19px;color:var(--purple)} .map__tag i .ico{width:14px;height:14px;vertical-align:-.15em} .m-login .ico{margin-right:2px} /* Un solo reel, centrado. La rejilla normal es de cuatro columnas y un video suelto se iba a la esquina izquierda con tres huecos al lado. */ .reels--uno{grid-template-columns:minmax(0,330px);justify-content:center; place-content:center;margin-left:auto;margin-right:auto;max-width:330px} @media (max-width:640px){.reels--uno{grid-template-columns:minmax(0,1fr)}} /* Cinco en fila. La rejilla normal es de cuatro, y con cinco videos el quinto se caia solo a una segunda linea con tres huecos al lado. */ .reels--cinco{grid-template-columns:repeat(5,1fr);gap:14px} @media (max-width:1100px){.reels--cinco{grid-template-columns:repeat(3,1fr)}} @media (max-width:700px){.reels--cinco{grid-template-columns:repeat(2,1fr)}} /* ------------------------------------------------------------ LA VENTANA DE MÁS VÍDEOS CON IA ------------------------------------------------------------ Se queda en el HTML desde el principio, escondida con `hidden`. Los vídeos llevan preload="none", así que no se descarga ni un byte hasta que alguien pulsa uno: la página pesa lo mismo esté la ventana abierta o cerrada. ------------------------------------------------------------ */ .iamodal{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;padding:24px} .iamodal[hidden]{display:none} .iamodal__velo{position:absolute;inset:0;background:rgba(6,4,16,.82);backdrop-filter:blur(6px)} .iamodal__caja{ position:relative;width:min(1040px,100%);max-height:90vh;overflow:auto; background:var(--bg-2);border:1px solid var(--border);border-radius:22px; padding:22px 24px 28px;box-shadow:0 40px 90px rgba(0,0,0,.6); animation:iaSube .28s cubic-bezier(.2,.7,.3,1) both; } @keyframes iaSube{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .iamodal__cab{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px} .iamodal__cab h3{font-family:var(--font-display);font-size:1.15rem;margin:0} .iamodal__x{ width:38px;height:38px;border-radius:12px;flex:0 0 auto;cursor:pointer; background:var(--sutil,rgba(255,255,255,.06));border:1px solid var(--border); color:inherit;display:flex;align-items:center;justify-content:center; transition:background .2s,transform .2s} .iamodal__x:hover{background:rgba(255,255,255,.12);transform:rotate(90deg)} .reels--cuatro{grid-template-columns:repeat(4,1fr);gap:14px;margin-top:0} @media (max-width:900px){.reels--cuatro{grid-template-columns:repeat(2,1fr)}} /* ------------------------------------------------------------ LAS RESEÑAS, PASANDO DE LADO A LADO ------------------------------------------------------------ Antes eran tres tarjetas fijas en fila. Ahora desfilan solas, y así caben todas las que haya sin que la sección crezca. Se para al pasar el ratón por encima: si no, intentar leer una reseña que se está moviendo es imposible. Las tarjetas se duplican desde main.js, no en el HTML, para que el texto de cada reseña aparezca UNA sola vez en la página. La copia va marcada como decorativa para que no la lean dos veces ni Google ni un lector de pantalla. ------------------------------------------------------------ */ .quotes-carrusel{ margin-top:52px;overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); } .quotes__track{ display:flex;gap:22px;width:max-content; animation:marquee 34s linear infinite; } .quotes-carrusel:hover .quotes__track{animation-play-state:paused} .quotes__track .quote{width:min(380px,80vw);flex:0 0 auto;margin:0} @media (prefers-reduced-motion:reduce){ .quotes__track{animation:none;overflow-x:auto;width:auto} } /* La nota de Google, encima del carrusel */ .gnota{ display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap; margin:26px auto 0;padding:12px 22px;width:max-content;max-width:100%; border:1px solid var(--border);border-radius:999px;background:var(--card); text-decoration:none;color:inherit; transition:border-color .3s,transform .3s; } .gnota:hover{border-color:rgba(139,92,246,.55);transform:translateY(-2px)} .gnota b{font-family:var(--font-display);font-size:1.5rem;line-height:1} .gnota .stars{color:var(--aviso);display:inline-flex;gap:1px} .gnota small{color:var(--muted);font-size:.85rem} /* ------------------------------------------------------------ EL MAPA 3D DE CONTACTO ------------------------------------------------------------ Sustituye al iframe de Google, que solo sabe mirar en plano. Este va inclinado y con los edificios levantados, y además es libre: sin clave, sin tarjeta y sin cookies de Google metidas en la página. ------------------------------------------------------------ */ .map3d{width:100%;height:420px;display:block;background:var(--bg-3)} .map3d canvas{outline:none} .map3d .maplibregl-ctrl-group{background:rgba(7,5,14,.85);border:1px solid var(--border);border-radius:10px} .map3d .maplibregl-ctrl-group button+button{border-top-color:var(--border)} .map3d .maplibregl-ctrl-icon{filter:invert(1) opacity(.85)} .map3d .maplibregl-ctrl-attrib{background:rgba(7,5,14,.8);color:var(--faint);font-size:.65rem} .map3d .maplibregl-ctrl-attrib a{color:var(--muted)} .map3d .nxpin__c{ width:44px;height:44px;border-radius:50%;overflow:hidden; background:var(--bg-2);border:3px solid var(--magenta,#d926a9); box-shadow:0 10px 22px rgba(0,0,0,.55); display:flex;align-items:center;justify-content:center} .map3d .nxpin__c img{width:78%;height:78%;object-fit:contain} .map3d .nxpin__palo{display:block;width:3px;height:15px;margin:-2px auto 0; background:linear-gradient(var(--magenta,#d926a9),rgba(0,0,0,0));border-radius:2px} @media (max-width:640px){.map3d{height:320px}} /* La segunda fila va al reves, como en la marquesina de clientes: dos filas en el mismo sentido parecen una sola cosa moviendose. */ .quotes-carrusel--reverse .quotes__track{animation-direction:reverse;animation-duration:40s} .quotes-carrusel + .quotes-carrusel{margin-top:18px} /* En movil, UNA sola fila. Dos filas de tarjetas con parrafo largo se comen media pantalla de alto y hay que hacer scroll a ciegas. */ @media (max-width:760px){ .quotes-carrusel--reverse{display:none} .quotes__track .quote{width:min(300px,86vw);padding:26px 22px 22px} .quotes__track{gap:14px;animation-duration:28s} } /* La ventana de IA en pantalla pequeña: menos margen y etiquetas más pequeñas, que a dos columnas "Detalle de producto" se partía en dos líneas y se comía el bajo del vídeo. */ @media (max-width:760px){ .iamodal{padding:14px} .iamodal__caja{padding:18px 16px 22px;border-radius:18px} .iamodal__cab h3{font-size:1rem} .reels--cuatro{gap:10px} .reels--cuatro .media-label{font-size:.66rem;padding:4px 9px;left:8px;bottom:8px} } /* El crédito del mapa, plegado: una "i" discreta en vez de una barra blanca. No se quita —es la licencia de OpenStreetMap y es lo que hace que el mapa sea gratis—, solo se aparta. */ .map3d .maplibregl-ctrl-attrib.maplibregl-compact{ background:rgba(7,5,14,.7);border-radius:999px;min-height:24px} .map3d .maplibregl-ctrl-attrib-button{ background-color:rgba(255,255,255,.12);border-radius:50%} .map3d .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-inner{display:none}