/* ============================================================ Diaz Marketing - hoja de estilos principal Paleta: negro #060608 / ámbar #F9B233 · naranja #F39200 / blanco #F3F0EA ============================================================ */ /* ============ TOKENS ============ */ :root{ --bg:#060608; --bg-2:#0d0d12; --bg-3:#14161d; --surface:rgba(255,255,255,.03); --surface-2:rgba(255,255,255,.06); --surface-3:rgba(249,178,51,.08); --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --txt:#F3F0EA; --txt-2:#BEB5A3; --txt-3:#8E8779; --cy:#F9B233; --bl:#F9C665; --vi:#C97300; --grad:linear-gradient(112deg,#FBD08A 0%,#F9C665 22%,#F9B233 52%,#F39200 78%,#C97300 100%); --grad-soft:linear-gradient(135deg,rgba(249,178,51,.18),rgba(251,208,138,.06)); --panel-grad:linear-gradient(135deg,rgba(18,20,28,.95),rgba(10,11,17,.92)); --r:16px; --r-lg:24px; --maxw:1200px; --ease:cubic-bezier(.22,1,.36,1); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* overflow-x en html Y body. Se usa "clip" en vez de "hidden" a propósito: "hidden" convierte el elemento en un contenedor de scroll, y eso interfiere con las secciones fijadas de GSAP. "clip" solo recorta, sin crear scroll. Se deja "hidden" delante como respaldo para navegadores viejos. */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%; overflow-x:hidden;overflow-x:clip} body{ background: radial-gradient(1200px 700px at 15% -10%, rgba(249,178,51,.12), transparent 38%), radial-gradient(900px 600px at 85% 10%, rgba(201,115,0,.08), transparent 45%), var(--bg); color:var(--txt); font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:16px;line-height:1.65;overflow-x:hidden;overflow-x:clip; width:100%; -webkit-font-smoothing:antialiased; } body.nav-open{overflow:hidden} h1,h2,h3,h4{font-family:'Sora',sans-serif;line-height:1.12;letter-spacing:-.025em;font-weight:700} /* Poppins 900 italic se carga desde Google Fonts en index.html. Antes apuntaba a /Users/santiago/Library/Fonts/, que no existe en el servidor. */ a{color:inherit;text-decoration:none} img,canvas{display:block;max-width:100%} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} ::selection{background:rgba(249,178,51,.3);color:#fff} :focus-visible{outline:2px solid var(--cy);outline-offset:3px;border-radius:6px} /* scrollbar */ ::-webkit-scrollbar{width:10px} ::-webkit-scrollbar-track{background:var(--bg)} ::-webkit-scrollbar-thumb{background:#2a2519;border-radius:10px;border:2px solid var(--bg)} ::-webkit-scrollbar-thumb:hover{background:#3d3524} /* ============ LAYOUT ============ */ .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px} /* Contenedor ANCHO. Solo lo usan la barra superior y el hero: el resto de la web sigue con .wrap a 1200px, que es el ancho cómodo de lectura. Aquí no se lee texto largo, se ocupa espacio, así que se aprovecha todo el lateral. El padding crece con la pantalla en vez de ser fijo: así el logo queda "pegado" al borde en pantallas pequeñas y con aire en monitores grandes, sin llegar a tocar el filo nunca. */ .wrap-ancho{width:100%;max-width:none;margin:0; padding:0 clamp(20px,2.9vw,68px)} /* Los resplandores decorativos se colocan con left/right negativos (por ejemplo -180px) para que se salgan por los lados. Sin recorte ensanchaban la página y dejaban una franja muerta a la derecha. Cada sección recorta lo suyo y el problema desaparece. */ section{position:relative;overflow-x:hidden;overflow-x:clip} .sec{padding:96px 0} .sec-sm{padding:68px 0} @media(max-width:768px){.sec{padding:76px 0}.sec-sm{padding:56px 0}.wrap{padding:0 20px}} /* ============ SCROLL PROGRESS ============ */ #progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%; background:var(--grad);z-index:120;box-shadow:0 0 14px rgba(249,178,51,.7)} /* ============ NAV ============ */ header{position:fixed;top:0;left:0;right:0;z-index:110;transition:.4s var(--ease)} header.scrolled{background:rgba(4,6,12,.82);backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);border-bottom:1px solid var(--line)} /* Tres columnas en vez de space-between. Con space-between el menú central se descentra en cuanto el logo y el bloque derecho no miden lo mismo. Con las laterales al mismo tamaño (1fr), el menú queda centrado de verdad respecto a la pantalla. */ .nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:82px;gap:20px} .nav > .logo{justify-self:start} .nav > .nav-right{justify-self:end} .logo{display:inline-flex;align-items:center;justify-content:center;min-height:42px} .brand-logo{display:block;width:min(300px,42vw);height:auto;max-height:60px;object-fit:contain;filter:drop-shadow(0 8px 30px rgba(249,178,51,.12));} /* El nombre de la marca en la barra, sin isotipo. Misma familia que el titular del hero (Poppins 900 cursiva) y el mismo dorado, para que se lea como la misma marca y no como un texto de menú. */ .brand-word{display:inline-block;font-family:'Poppins','Sora',sans-serif;font-weight:900;font-style:italic; font-size:clamp(1.12rem,1.5vw,1.42rem);letter-spacing:-.05em;line-height:1.2;padding:.06em .12em .12em 0; white-space:nowrap;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 6px 22px rgba(249,178,51,.16))} /* ── La barra espera a que acabe el efecto del hero ── Al abrir la web no se ve: ni el nombre, ni el menú, ni ES/EN, ni el botón. Entra cuando el plano del hero llega al final (clase .hdr-visible, la pone js/hero-video.js) y vuelve a esconderse si se sube del todo. visibility:hidden saca sus enlaces del tabulador mientras no se ve. Solo con el acto animado en escritorio: en móvil y con movimiento reducido (hero-plano) la barra está desde el principio. */ html.hdr-espera #hdr{opacity:0;visibility:hidden;pointer-events:none} body.hero-anim:not(.hero-plano) #hdr{opacity:0;transform:translate3d(0,-14px,0);visibility:hidden;pointer-events:none; transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),visibility 0s .7s,background .4s} body.hero-anim:not(.hero-plano) #hdr.hdr-visible{opacity:1;transform:none;visibility:visible;pointer-events:auto; transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),visibility 0s,background .4s} .footer-logo{width:min(290px,52vw)} .nav-links{display:flex;align-items:center;gap:clamp(14px,1.9vw,34px);justify-content:center} .nav-links a{font-size:.875rem;color:var(--txt-2);font-weight:500;position:relative;transition:color .25s;padding:4px 0;white-space:nowrap} .nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--grad);transition:width .3s var(--ease)} .nav-links a:hover{color:var(--txt)} .nav-links a:hover::after{width:100%} .nav-right{display:flex;align-items:center;gap:14px} .lang{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:9px;background:var(--surface)} .lang button{font-size:.72rem;font-weight:700;letter-spacing:.06em;padding:4px 9px;border-radius:6px;color:var(--txt-3);transition:.25s} .lang button.on{background:var(--surface-2);color:var(--txt)} .burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:11px;place-items:center;background:var(--surface)} .burger i{display:block;width:17px;height:1.6px;background:var(--txt);border-radius:2px;transition:.35s var(--ease);position:relative} .burger i::before,.burger i::after{content:"";position:absolute;left:0;width:17px;height:1.6px;background:var(--txt);border-radius:2px;transition:.35s var(--ease)} .burger i::before{top:-6px}.burger i::after{top:6px} .burger.on i{background:transparent} .burger.on i::before{top:0;transform:rotate(45deg)} .burger.on i::after{top:0;transform:rotate(-45deg)} .mobile{position:fixed;inset:76px 0 0;background:rgba(4,6,12,.97);backdrop-filter:blur(20px);z-index:105; padding:32px 24px;display:flex;flex-direction:column;gap:6px;transform:translateY(-12px);opacity:0; pointer-events:none;transition:.35s var(--ease);overflow-y:auto} .mobile.on{opacity:1;transform:none;pointer-events:auto} .mobile a{font-family:'Sora';font-size:1.28rem;font-weight:600;padding:14px 0;border-bottom:1px solid var(--line);color:var(--txt-2)} .mobile .btn{margin-top:22px;justify-content:center;border-bottom:none} @media(max-width:960px){.nav-links,.nav-right .btn,.lang{display:none}.burger{display:grid}.brand-logo{width:min(260px,55vw)}.brand-word{font-size:1.18rem}} @media(max-width:520px){.brand-logo{width:min(220px,70vw)}} /* ============ BUTTONS ============ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;border-radius:12px; font-weight:600;font-size:.925rem;letter-spacing:-.01em;transition:.3s var(--ease);position:relative; overflow:hidden;white-space:nowrap;cursor:pointer;border:1px solid transparent} .btn-p{background:var(--grad);color:#060608;font-weight:700;box-shadow:0 10px 34px -10px rgba(249,178,51,.75)} .btn-p::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,#FBD08A,#F9C665,#F39200); opacity:0;transition:.35s} .btn-p:hover::before{opacity:1} .btn-p:hover{transform:translateY(-2px);box-shadow:0 16px 44px -10px rgba(249,178,51,.9)} .btn-p span,.btn-p svg{position:relative;z-index:1} .btn-g{border-color:var(--line-2);background:var(--surface);color:var(--txt);backdrop-filter:blur(10px)} .btn-g:hover{border-color:rgba(249,178,51,.55);background:rgba(249,178,51,.08);transform:translateY(-2px)} .btn-sm{padding:10px 19px;font-size:.85rem;border-radius:10px} .btn svg{width:17px;height:17px;transition:transform .3s var(--ease)} .btn:hover svg{transform:translateX(3px)} /* ============ SHARED BITS ============ */ .eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border:1px solid var(--line); border-radius:100px;background:var(--surface);font-size:.755rem;font-weight:600;letter-spacing:.13em; text-transform:uppercase;color:var(--cy);margin-bottom:22px;backdrop-filter:blur(10px)} .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--cy);box-shadow:0 0 10px var(--cy); animation:pulse 2.2s infinite} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}} .h2{font-size:clamp(2rem,4.4vw,3.35rem);margin-bottom:20px} .lede{font-size:clamp(1rem,1.5vw,1.115rem);color:var(--txt-2);max-width:660px;line-height:1.75} .center{text-align:center} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 20px;background:var(--grad);color:#060608;font-weight:700;border-radius:0 0 10px 0} .skip:focus{left:0} .center .lede{margin-inline:auto} .grad-txt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* ámbar-naranja con barrido de brillo */ /* inline-block + padding: con background-clip:text la caja del elemento es la que recorta. Sin holgura abajo se come la cola de la "g". */ .gold-metal{display:inline-block;white-space:nowrap;padding:.06em .12em .2em 0; background:linear-gradient(100deg,#C97300 0%,#F9B233 18%,#FDE9C7 34%,#F9C665 44%,#F9B233 58%,#FBD08A 72%,#F39200 88%,#C97300 100%); background-size:280% 100%; -webkit-background-clip:text;background-clip:text;color:transparent; animation:sheen 7s ease-in-out infinite; filter:drop-shadow(0 2px 22px rgba(249,178,51,.28))} @keyframes sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} .rule-gold{display:block;width:74px;height:2px;border-radius:2px;background:var(--grad); margin:0 0 22px;box-shadow:0 0 16px rgba(249,178,51,.55)} .center .rule-gold{margin-inline:auto} .sec-head{margin-bottom:64px} @media(max-width:768px){.sec-head{margin-bottom:44px}} .sec-head .h2{position:relative;padding-bottom:26px;margin-bottom:24px} .sec-head .h2::after{content:"";position:absolute;bottom:0;left:0;width:74px;height:2px;border-radius:2px; background:var(--grad);box-shadow:0 0 16px rgba(249,178,51,.5)} .sec-head.center .h2::after{left:50%;transform:translateX(-50%)} /* glow blobs */ /* Halos de color del fondo. * * Antes eran circulos de color solido con filter:blur(120px). Un desenfoque de * ese radio obliga al navegador a procesar un area enorme alrededor de cada * circulo, y son tres. Lo llamativo es donde estan: dos quedan fuera del borde * de la pantalla y uno esta entero fuera por la derecha, asi que ese trabajo * se hacia para algo que no llega a verse. * * Un degradado radial da el mismo halo difuso y lo pinta la tarjeta grafica * sin filtro ninguno. Comprobado lado a lado en la web: no se distingue. */ .glow{position:absolute;border-radius:50%;pointer-events:none;z-index:0} .glow-cy{background:radial-gradient(circle closest-side,rgba(249,178,51,.20),rgba(249,178,51,.08) 45%,rgba(249,178,51,0) 78%)} .glow-vi{background:radial-gradient(circle closest-side,rgba(201,115,0,.20),rgba(201,115,0,.08) 45%,rgba(201,115,0,0) 78%)} .glow-bl{background:radial-gradient(circle closest-side,rgba(249,178,51,.20),rgba(249,178,51,.08) 45%,rgba(249,178,51,0) 78%)} /* grid backdrop */ .gridbg{position:absolute;inset:0;pointer-events:none;z-index:0; 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:64px 64px; mask-image:radial-gradient(ellipse 90% 65% at 50% 40%,#000 25%,transparent 78%); -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 40%,#000 25%,transparent 78%)} /* reveal * * Estas cuatro clases las llevan 54 elementos de la portada, y antes animaban * tres cosas a la vez: opacity, transform y filter:blur(2px). * * Las dos primeras las hace la tarjeta grafica sin despeinarse: mover y * desvanecer una capa ya pintada es gratis. La tercera no. Un desenfoque hay * que RECALCULARLO en cada fotograma de la animacion, y como estos elementos * aparecen justo mientras haces scroll, el navegador acababa desenfocando * varias cosas a la vez precisamente en el momento de mas trabajo. Eso es lo * que se notaba como tirones al bajar por la pagina. * * Se quita el blur y se quedan opacity y transform. El efecto sigue siendo el * mismo movimiento con fundido; lo unico que falta son dos pixeles de * desenfoque durante medio segundo, que en la practica no se ven. */ .rv{opacity:0;transform:translate3d(0,20px,0) scale(.98);transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .62s cubic-bezier(.16,1,.3,1);will-change:transform,opacity} .rv.in{opacity:1;transform:translate3d(0,0,0) scale(1)} .rv-l{opacity:0;transform:translate3d(-18px,12px,0);transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .62s cubic-bezier(.16,1,.3,1)} .rv-l.in{opacity:1;transform:none} .rv-r{opacity:0;transform:translate3d(18px,12px,0);transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .62s cubic-bezier(.16,1,.3,1)} .rv-r.in{opacity:1;transform:none} .rv-s{opacity:0;transform:scale(.94) rotateX(8deg);transition:opacity .58s cubic-bezier(.16,1,.3,1),transform .58s cubic-bezier(.16,1,.3,1)} .rv-s.in{opacity:1;transform:scale(1) rotateX(0)} /* card base */ .card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(17,18,23,.85)); border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:30px;overflow:hidden; box-shadow:0 20px 50px -32px rgba(0,0,0,.8); transition:transform .45s var(--ease),border-color .45s,box-shadow .45s} .card::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .45s; background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(249,178,51,.12),transparent 40%)} .card:hover::before{opacity:1} .card:hover{transform:translateY(-6px) scale(1.01);border-color:rgba(249,178,51,.34);box-shadow:0 28px 72px -36px rgba(0,0,0,.96)} .card > *{position:relative;z-index:1} /* icon chip */ .ico{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;flex:none; background:var(--grad-soft);border:1px solid var(--line);color:var(--cy);margin-bottom:20px} .ico svg{width:22px;height:22px;stroke-width:1.7} /* ============ HERO ============ */ /* EL HERO ES UN ACTO. #hero mide varias alturas de ventana; .hero-esc solo una y va sticky. Ese sobrante de altura es el recorrido de scroll que mueve el vídeo. Cambiar --hero-actos cambia lo largo que se siente: 3.4 son unos tres golpes de rueda de principio a fin. */ :root{ --hero-actos:3.6; } /* 3.6 para una película de 10 s: 2,6 pantallas de pista, unas 3 golpes de rueda de principio a fin. Con 20 s eran 5,2; con más pista el plano corto se arrastraría. */ /* El alto ya NO se fija aquí: lo definen los hijos. Dentro del hero viven ahora dos actos seguidos, la pista del vídeo y el isotipo, y .hero-esc va sticky por encima de LOS DOS. Eso es lo que hace que al acabar el vídeo el hero no se vaya: se queda de fondo mientras el isotipo crece encima. */ #hero{position:relative} /* la pista: el recorrido que consume el vídeo, menos la pantalla que ya ocupa .hero-esc en el flujo */ .hero-pista{height:calc((var(--hero-actos) - 1) * 100svh)} .hero-esc{position:sticky;top:0;height:100svh;min-height:560px; display:flex;align-items:center;overflow:hidden; background:radial-gradient(980px 560px at 18% 34%, rgba(249,178,51,.10), transparent 40%), linear-gradient(180deg, rgba(9,10,15,.6), rgba(6,6,8,0) 40%)} /* ---- el plano ---- */ .hero-video{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none; background:var(--bg)} /* El póster ES el fotograma 1 del clip codificado, no una imagen parecida. Se queda encima hasta que el vídeo pinta de verdad: iOS deja en blanco un vídeo muted que se ha buscado pero nunca se ha reproducido, y ocultar el póster al cargar los metadatos deja un hueco negro. */ .hero-video img,.hero-video video{position:absolute;inset:0; width:100%;height:100%;object-fit:cover;object-position:68% 50%} .hero-video video{opacity:0;transition:opacity .45s ease} .hero-video.pintando video{opacity:1} .hero-video.pintando .hero-poster{opacity:0} .hero-poster{transition:opacity .45s ease} /* Velo. NO es una capa oscura a pantalla completa: eso aplanaría el plano entero. Es una cuña que pesa en la izquierda, que es donde se apoya el texto, y suelta el centro-derecha, que es donde está el chico y la puerta. */ .hero-velo{position:absolute;inset:0; background: linear-gradient(90deg, rgba(6,6,8,.93) 0%, rgba(6,6,8,.88) 26%, rgba(6,6,8,.62) 44%, rgba(6,6,8,.16) 62%, rgba(6,6,8,.04) 78%, rgba(6,6,8,.30) 100%), linear-gradient(180deg,rgba(6,6,8,.72) 0%,transparent 22%,transparent 66%,rgba(6,6,8,.95) 100%)} /* La red neuronal se apaga casi del todo con vídeo: dos texturas compitiendo en el mismo sitio es ruido, no profundidad. */ #neural{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.55; transition:opacity .8s ease;pointer-events:none} body.hero-con-video #neural{opacity:.10} body.hero-con-video .gridbg{opacity:.22} body.hero-con-video .hero-glow-1{opacity:.5} #hero .gridbg{opacity:.8;z-index:1} .hero-glow-1{width:640px;height:640px;top:-190px;right:-160px;background:rgba(249,178,51,.16);z-index:1} /* ---- la columna ---- */ /* Una sola columna: el panel ya no está. El texto ocupa la mitad izquierda y la derecha se deja libre para el plano. */ .hero-in{position:relative;z-index:3;display:block;width:100%} .hero-center{display:flex;flex-direction:column;align-items:flex-start;text-align:left; max-width:min(640px,52%)} .hero-center .eyebrow{margin-bottom:26px} .hero-brand{display:flex;flex-direction:column;align-items:center;align-self:flex-start} .hero-mark{display:block;flex:none; width:clamp(61px,5.9vw,84px);height:clamp(64px,6.2vw,88px);margin-bottom:20px; background:linear-gradient(100deg,#C97300 0%,#F9B233 18%,#FDE9C7 34%,#F9C665 44%,#F9B233 58%,#FBD08A 72%,#F39200 88%,#C97300 100%); background-size:280% 100%; animation:sheen 7s ease-in-out infinite; filter:drop-shadow(0 8px 26px rgba(249,178,51,.4)); -webkit-mask-image:url("data:image/png;base64,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"); mask-image:url("data:image/png;base64,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"); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:contain;mask-size:contain} .hero-center .rule-gold{margin:2px 0 22px} /* --txt-3 se queda en 4,4:1 medido sobre el fotograma compuesto, y el mínimo AA es 4,5. No es un color de marca, es un gris de apoyo, así que se sube un peldaño SOLO aquí: sobre un vídeo hay más luz detrás que sobre el fondo plano del resto de la web. Medido con herramientas/scrollcraft/contraste.mjs. */ .hero-center .hero-claims, .hero-center .hero-trust{color:#9A9284} .hero-claims{display:flex;flex-wrap:wrap;align-items:center;gap:12px; font-size:clamp(.86rem,1.3vw,.96rem);color:var(--txt-3);font-weight:500;margin-bottom:24px} .hero-claims i{font-style:normal;color:var(--cy);opacity:.7} .hero-center .hero-p{max-width:560px} /* ---- las señales de aparición ---- */ /* Cada pieza entra cuando el vídeo llega a su marca (data-cue). Sube poco y sin desenfoque: son seis elementos a la vez y el blur en seis capas a 60fps no lo aguanta un portátil normal. */ /* Por defecto TODO se ve. Ocultar es lo que hay que activar, no lo que hay que desactivar: si el JS no llega, si falla, o si el navegador es viejo, el hero se lee entero. Nunca al revés. */ body.hero-anim .hero-cue{opacity:0;transform:translate3d(0,22px,0); transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .62s cubic-bezier(.16,1,.3,1); will-change:opacity,transform} body.hero-anim .hero-cue.visible{opacity:1;transform:none} /* ── Plano final: el texto se aparta ── Al 80 % del vídeo todo el titular se retira y el clímax se queda solo. visibility con retardo: una vez apagado, el botón invisible deja de poder pulsarse o recibir foco con el tabulador. */ #hero .hero-center{transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),visibility 0s} body.hero-anim #hero.hero-final .hero-center{opacity:0;transform:translate3d(0,-18px,0); visibility:hidden;transition:opacity .55s ease,transform .55s ease,visibility 0s .55s} /* ── El logo del punto de convergencia ── El contenedor es un punto de tamaño cero colocado en --conv-x / --conv-y: así cualquier escala que le aplique GSAP ocurre alrededor del punto exacto. El centro del isotipo cae encima del punto, y el nombre queda debajo. Solo existe con el acto animado en escritorio: con movimiento reducido o en móvil no hay estallido que acompañe. */ .hero-logo-final{display:none} /* APAGADO para el plano de la mesa: el logo ya va dentro del vídeo (en el móvil y en la tablet) y sobreimprimirlo sería verlo dos veces. El punto de convergencia (--conv-x/--conv-y) sigue en uso: desde ahí crece el isotipo del acto siguiente. Para reactivarlo, quita ":not(.sin-logo-html)". */ @media(min-width:1001px){ body.hero-anim:not(.hero-plano):not(.sin-logo-html) .hero-logo-final{display:block;position:absolute;z-index:2; left:var(--conv-x,50%);top:var(--conv-y,50%);width:0;height:0;transform-origin:0 0; pointer-events:none} } .hero-logo-final__in{--lf:clamp(84px,8vw,132px);position:absolute;left:0;top:0; display:flex;flex-direction:column;align-items:center;white-space:nowrap} body.hero-anim .hero-logo-final__in{opacity:0; transform:translate(-50%,calc(var(--lf) * -.525)) scale(.55); transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)} body.hero-anim .hero-logo-final__in.visible{opacity:1; transform:translate(-50%,calc(var(--lf) * -.525)) scale(1)} .hero-logo-final__marca{width:var(--lf);height:calc(var(--lf) * 758 / 722);display:block; filter:drop-shadow(0 14px 34px rgba(0,0,0,.55))} .hero-logo-final__nombre{margin-top:calc(var(--lf) * .2); font-family:'Poppins','Sora',sans-serif;font-weight:900;font-style:italic; font-size:calc(var(--lf) * .42);letter-spacing:-.05em;line-height:1.2;padding:.06em .12em .14em 0; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 8px 22px rgba(0,0,0,.6))} /* Hero plano: sin recorrido de scroll extra, sin sticky. Es lo que se usa con movimiento reducido y si el vídeo no llega a cargar. */ body.hero-plano #hero{height:auto} body.hero-plano .hero-pista{display:none} body.hero-plano .hero-esc{position:relative;height:auto;min-height:100svh;padding:130px 0 80px} @media(prefers-reduced-motion:reduce){ #hero{height:auto} .hero-esc{position:relative;height:auto;min-height:100svh;padding:130px 0 80px} .hero-video video{display:none} } /* ---- móvil ---- */ /* Aquí no se fija nada ni se scrubea. La barra del navegador entra y sale, cambia el alto del viewport, y un sticky de tres pantallas se vuelve un salto. El vídeo se reproduce solo una vez al entrar y el texto aparece con el scroll normal. Y el plano NO va a sangre. Un vídeo 16:9 metido a la fuerza en una pantalla vertical se recorta a una quinta parte de su ancho: deja de verse una habitación y se ve un borrón. Así que va en franja, con su proporción entera, y el texto debajo sobre negro. Se ve el plano completo y se lee todo. */ @media(max-width:1000px){ #hero{height:auto} /* sin acto fijado no hay pista que recorrer */ .hero-pista{display:none} /* La regla de .hero-plano de arriba tiene más especificidad, así que hay que igualarla o se pierde el padding. Y 82px es lo que mide la cabecera fija de verdad, medido, no estimado. */ .hero-esc, body.hero-plano .hero-esc{position:relative;height:auto;min-height:100svh; display:block;padding:calc(82px + 56.25vw + 32px) 0 76px} .hero-center{align-items:center;text-align:center;max-width:700px;margin:0 auto} .hero-brand{align-self:center} .hero-center .rule-gold{margin:2px auto 22px} .hero-claims{justify-content:center} .hero-center .hero-p{margin-left:auto;margin-right:auto} .hero-center .hero-cta,.hero-center .hero-trust{justify-content:center} /* la franja: 56.25vw es exactamente 16:9 a ancho completo, así que cover no recorta nada y se ve el plano entero */ .hero-video{inset:82px 0 auto 0;height:56.25vw} .hero-video img,.hero-video video{object-fit:cover;object-position:50% 50%} /* el velo ya solo tiene que fundir el bajo de la franja con la página; por los lados no hay texto que proteger */ .hero-velo{background:linear-gradient(180deg, rgba(6,6,8,.34) 0%,rgba(6,6,8,.04) 38%,rgba(6,6,8,.10) 62%, rgba(6,6,8,.80) 90%,var(--bg) 100%)} body.hero-con-video #neural{opacity:.18} } .hero-kicker{font-size:.98rem;color:var(--txt-2);font-weight:500;margin-bottom:10px;letter-spacing:.01em} /* line-height holgado + padding: Poppins Black Italic tiene un descendente largo en la "g" y la cursiva se inclina a la derecha. Sin esto se recorta. */ /* nowrap: "Diaz Marketing" SIEMPRE en una linea. El tope de 4.3rem esta calculado para que quepa en la columna izquierda (567px). */ h1.hero-h1{font-family:'Poppins','Sora',sans-serif;font-size:clamp(2.05rem,5vw,4.9rem);font-weight:900; font-style:italic;letter-spacing:-.06em;line-height:1.22;margin-bottom:14px; white-space:nowrap;padding:.08em 0 .1em 0;overflow:visible} /* min-height fija a 2 lineas: evita que el hero salte al cambiar de frase */ .type-line{display:block;width:100%;min-height:2.5em;font-size:clamp(1.3rem,3vw,2.05rem);font-weight:600;color:#fff; letter-spacing:-.03em;font-family:'Sora';margin-bottom:26px;line-height:1.25} @media(max-width:560px){.type-line{min-height:3.75em}} .caret{display:inline-block;width:3px;height:.92em;background:var(--cy);margin-left:4px;vertical-align:-.09em; box-shadow:0 0 12px var(--cy);animation:blink 1.05s steps(2) infinite} @keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}} .hero-p{font-size:1.075rem;color:var(--txt-2);max-width:560px;line-height:1.78;margin-bottom:34px} .hero-p strong{color:var(--txt);font-weight:600} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:30px} .hero-trust{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.845rem;color:var(--txt-3)} .hero-trust span{display:inline-flex;align-items:center;gap:7px} .hero-trust svg{width:15px;height:15px;color:var(--cy);flex:none} /* hero panel */ .panel-wrap{max-width:none} .panel{position:relative;background:var(--panel-grad);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:22px;backdrop-filter:blur(22px); box-shadow:0 40px 90px -34px rgba(0,0,0,.85)} .panel::before{content:"";position:absolute;inset:-1px;border-radius:25px;padding:1px; background:linear-gradient(140deg,rgba(249,178,51,.56),transparent 28%,transparent 68%,rgba(201,115,0,.42)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .panel-top{display:flex;align-items:center;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px} .panel-top .d{width:9px;height:9px;border-radius:50%;background:#2a2620} .panel-top .d:first-child{background:#ff5f57}.panel-top .d:nth-child(2){background:#febc2e}.panel-top .d:nth-child(3){background:#28c840} .panel-title{margin-left:8px;font-family:'JetBrains Mono',monospace;font-size:.735rem;color:var(--txt-3);letter-spacing:.02em} .live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:700; letter-spacing:.1em;color:#22c55e;text-transform:uppercase} .live i{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 9px #22c55e;animation:pulse 1.7s infinite} .kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:18px} .kpi{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:13px;padding:15px} .kpi .lab{font-size:.685rem;text-transform:uppercase;letter-spacing:.1em;color:var(--txt-3);margin-bottom:7px;font-weight:600} .kpi .val{font-family:'Sora';font-size:1.72rem;font-weight:700;letter-spacing:-.03em;line-height:1} .kpi .val em{font-style:normal;font-size:1rem;color:var(--txt-2);margin-left:1px} .bars{display:flex;align-items:flex-end;gap:6px;height:74px;padding:14px 15px 0;background:rgba(255,255,255,.025); border:1px solid var(--line);border-radius:13px;margin-bottom:14px} .bars i{flex:1;border-radius:3px 3px 0 0;background:var(--grad);opacity:.85;height:8%; transition:height 1.1s var(--ease);animation:barGlow 3s ease-in-out infinite} @keyframes barGlow{0%,100%{opacity:.72}50%{opacity:1}} .feed{display:flex;flex-direction:column;gap:9px} .feed-row{display:flex;align-items:center;gap:11px;padding:11px 13px;background:rgba(255,255,255,.025); border:1px solid var(--line);border-radius:11px;font-size:.815rem;opacity:0;transform:translateX(14px); animation:feedIn .6s var(--ease) forwards} .feed-row:nth-child(1){animation-delay:1.5s}.feed-row:nth-child(2){animation-delay:1.8s}.feed-row:nth-child(3){animation-delay:2.1s} @keyframes feedIn{to{opacity:1;transform:none}} .feed-row .tag{margin-left:auto;font-size:.665rem;font-weight:700;letter-spacing:.07em;padding:3px 8px;border-radius:6px;text-transform:uppercase} .tag-hot{background:rgba(34,197,94,.14);color:#4ade80;border:1px solid rgba(34,197,94,.3)} .tag-mid{background:rgba(214,178,102,.13);color:#D6B266;border:1px solid rgba(214,178,102,.28)} .tag-out{background:rgba(163,155,140,.12);color:#A39B8C;border:1px solid rgba(163,155,140,.25)} .feed-row .av{width:26px;height:26px;border-radius:8px;background:var(--grad-soft);border:1px solid var(--line); display:grid;place-items:center;font-size:.66rem;font-weight:700;color:var(--cy);flex:none} .float-badge{position:absolute;display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:13px; background:rgba(11,13,18,.9);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(16px);font-size:.79rem; font-weight:600;box-shadow:0 16px 40px -14px rgba(0,0,0,.9);z-index:3;animation:float 5.5s ease-in-out infinite} .float-badge svg{width:16px;height:16px;color:var(--cy)} .fb-1{top:-20px;left:-26px;transform:translateY(0)} .fb-2{bottom:-20px;right:-22px;animation-delay:1.6s;transform:translateY(0)} @keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-11px) scale(1.02)}} @media(max-width:1000px){.fb-1{left:-8px}.fb-2{right:-8px}} @media(max-width:520px){.float-badge{display:none}} /* ============ MARQUEE ============ */ .marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:linear-gradient(90deg,rgba(249,178,51,.035),rgba(201,115,0,.035));padding:20px 0;overflow:hidden;position:relative} .marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:130px;z-index:2;pointer-events:none} .marquee::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)} .marquee::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)} .mq-track{display:flex;gap:56px;width:max-content;animation:mq 34s linear infinite} .marquee:hover .mq-track{animation-play-state:paused} @keyframes mq{to{transform:translateX(-50%)}} .mq-item{display:inline-flex;align-items:center;gap:11px;font-family:'Sora';font-size:.94rem;font-weight:600; color:var(--txt-3);letter-spacing:-.01em;white-space:nowrap} .mq-item i{width:5px;height:5px;border-radius:50%;background:var(--cy);opacity:.65;flex:none} /* ============ LEAD MAGNETS ============ */ .lm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:880px){.lm-grid{grid-template-columns:1fr}} .lm{display:flex;flex-direction:column;gap:14px} .lm-num{font-family:'JetBrains Mono';font-size:.7rem;color:var(--txt-3);letter-spacing:.14em} .lm h3{font-size:1.16rem;letter-spacing:-.02em} .lm p{font-size:.895rem;color:var(--txt-2);flex:1;line-height:1.7} .lm-meta{font-family:'JetBrains Mono',monospace;font-size:.685rem;letter-spacing:.09em; text-transform:uppercase;color:var(--txt-3);border-top:1px solid var(--line);padding-top:12px;margin-top:2px} .lm-link{display:inline-flex;align-items:center;gap:8px;font-size:.87rem;font-weight:600;color:var(--cy);margin-top:4px} .lm-link svg{width:16px;height:16px;transition:transform .3s var(--ease)} .lm:hover .lm-link svg{transform:translateY(2px)} /* ============ PROBLEM ============ */ #problema{background: radial-gradient(80% 70% at 50% 0%, rgba(212,121,106,.08), transparent 55%), linear-gradient(180deg, rgba(12,13,18,.85), rgba(10,10,14,.98)); } .prob-head{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;margin-bottom:60px} @media(max-width:880px){.prob-head{grid-template-columns:1fr;gap:26px;align-items:start}} .prob-h{font-size:clamp(1.85rem,4vw,3rem);letter-spacing:-.035em} .prob-h .strike{color:var(--txt-3);text-decoration:line-through;text-decoration-color:rgba(212,121,106,.65);text-decoration-thickness:2px} .prob-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} @media(max-width:880px){.prob-list{grid-template-columns:1fr}} .prob-item{display:flex;align-items:center;gap:14px;padding:19px 22px;border:1px solid var(--line); border-radius:14px;background:var(--surface);font-size:.925rem;font-weight:500;transition:.35s var(--ease)} .prob-item:hover{border-color:rgba(212,121,106,.38);background:rgba(212,121,106,.055);transform:translateX(5px)} .prob-item .x{width:24px;height:24px;border-radius:7px;background:rgba(212,121,106,.13);color:#D4796A; display:grid;place-items:center;flex:none;font-size:.85rem;font-weight:700} /* ============ MAP CARDS ============ */ .map-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:980px){.map-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:660px){.map-grid{grid-template-columns:1fr}} .map-card h3{font-size:1.1rem;margin-bottom:10px;letter-spacing:-.02em} .map-card p{font-size:.9rem;color:var(--txt-2);line-height:1.7} .map-card .ico{background:rgba(212,121,106,.1);border-color:rgba(212,121,106,.2);color:#D4796A} .map-card:hover::before{background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(212,121,106,.1),transparent 42%)} /* ============ PILLARS ============ */ #solucion{background:linear-gradient(180deg, rgba(11,12,18,.95), rgba(16,17,24,.98));} .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} @media(max-width:980px){.pillars{grid-template-columns:1fr}} .pillar{padding:34px 30px} .pillar-n{position:absolute;top:20px;right:26px;font-family:'Sora';font-size:3.6rem;font-weight:800; line-height:1;color:rgba(255,255,255,.045);letter-spacing:-.05em} .pillar h3{font-size:1.3rem;margin-bottom:12px;letter-spacing:-.025em} .pillar > p{font-size:.925rem;color:var(--txt-2);margin-bottom:22px;line-height:1.72} .pillar ul{list-style:none;display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1px solid var(--line)} .pillar li{display:flex;align-items:center;gap:11px;font-size:.885rem;color:var(--txt-2)} .pillar li svg{width:16px;height:16px;color:var(--cy);flex:none} /* ============ SERVICES ============ */ .serv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} @media(max-width:880px){.serv-grid{grid-template-columns:1fr}} .serv{display:flex;gap:22px;align-items:flex-start;padding:32px} @media(max-width:520px){.serv{flex-direction:column;gap:16px;padding:26px}} .serv .ico{margin-bottom:0} .serv h3{font-size:1.16rem;margin-bottom:9px;letter-spacing:-.02em;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .serv p{font-size:.905rem;color:var(--txt-2);line-height:1.72;margin-bottom:14px} .chip{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:3px 9px; border-radius:6px;background:var(--grad-soft);border:1px solid var(--line);color:var(--cy)} .serv-tags{display:flex;flex-wrap:wrap;gap:7px} .serv-tags span{font-size:.735rem;color:var(--txt-3);padding:4px 10px;border:1px solid var(--line);border-radius:100px} /* ============ RESULTS ============ */ #resultados{background:radial-gradient(80% 60% at 50% 100%, rgba(249,178,51,.09), transparent 55%), linear-gradient(180deg, rgba(10,11,16,.9), rgba(9,10,14,.98));} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:56px} @media(max-width:880px){.stats{grid-template-columns:repeat(2,1fr)}} .stat{text-align:center;padding:30px 18px;border:1px solid var(--line);border-radius:var(--r-lg); background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));transition:.4s var(--ease)} .stat:hover{border-color:rgba(249,178,51,.35);transform:translateY(-5px)} .stat .n{font-family:'Sora';font-size:clamp(2.1rem,4.6vw,3rem);font-weight:800;letter-spacing:-.045em; line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:9px} .stat .l{font-size:.835rem;color:var(--txt-2);line-height:1.5} .res-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} @media(max-width:768px){.res-grid{grid-template-columns:1fr}} .res{display:flex;align-items:center;gap:14px;padding:17px 21px;border:1px solid var(--line);border-radius:13px; background:var(--surface);font-size:.925rem;font-weight:500;transition:.35s var(--ease)} .res:hover{border-color:rgba(249,178,51,.4);background:rgba(249,178,51,.055);transform:translateX(5px)} .res .k{width:24px;height:24px;border-radius:7px;background:rgba(249,178,51,.14);color:var(--cy); display:grid;place-items:center;flex:none} .res .k svg{width:14px;height:14px;stroke-width:2.6} /* ============ PROCESS ============ */ .steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px} @media(max-width:980px){.steps{grid-template-columns:repeat(2,1fr);gap:20px}} @media(max-width:560px){.steps{grid-template-columns:1fr}} .steps::before{content:"";position:absolute;top:26px;left:6%;right:6%;height:1px; background:linear-gradient(90deg,transparent,var(--line-2) 12%,var(--line-2) 88%,transparent);z-index:0} @media(max-width:980px){.steps::before{display:none}} .step{position:relative;z-index:1;text-align:center} .step-n{width:52px;height:52px;margin:0 auto 20px;border-radius:15px;display:grid;place-items:center; font-family:'Sora';font-weight:800;font-size:1rem;background:var(--bg-3);border:1px solid var(--line-2); color:var(--cy);transition:.4s var(--ease);position:relative} .step:hover .step-n{background:var(--grad);color:#060608;border-color:transparent; box-shadow:0 10px 32px -8px rgba(249,178,51,.75);transform:scale(1.09)} .step h3{font-size:1.06rem;margin-bottom:9px;letter-spacing:-.02em} .step p{font-size:.875rem;color:var(--txt-2);line-height:1.68;max-width:250px;margin-inline:auto} /* ============ VS ============ */ #diferencia{background:linear-gradient(180deg, rgba(12,13,18,.95), rgba(9,10,15,.98));} /* ---- línea de tiempo NO / SÍ ---- */ /* Tres columnas: el "no" a la izquierda, la vía en medio, el "sí" a la derecha. Sin JS se ve completo y estático; con JS la vía se rellena al bajar y cada fila entra desde su lado cuando le toca. */ .tl{position:relative;max-width:1080px;margin:0 auto} .tl-cabecera,.tl-fila{display:grid;grid-template-columns:1fr 68px 1fr;align-items:center} .tl-cabecera{margin-bottom:30px} .tl-tit{font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:.24em; text-transform:uppercase} .tl-tit-no{text-align:right;color:#D4796A} .tl-tit-si{text-align:left;color:var(--cy)} /* La vía: raíl gris de fondo y encima el relleno dorado que crece. */ .tl-via{position:absolute;left:50%;transform:translateX(-50%); top:52px;bottom:14px;width:2px;background:rgba(255,255,255,.09);border-radius:2px} .tl-via i{display:block;width:100%;height:100%;background:var(--grad);border-radius:2px; box-shadow:0 0 18px rgba(249,178,51,.5);transform-origin:50% 0} .tl-filas{display:flex;flex-direction:column;gap:clamp(22px,3vw,40px)} .tl-fila{position:relative} /* El nodo de cada fila, sobre la vía */ .tl-nodo{justify-self:center;width:15px;height:15px;border-radius:50%; background:var(--bg);border:2px solid rgba(255,255,255,.16);position:relative;z-index:2; transition:border-color .4s var(--ease),box-shadow .4s var(--ease)} .tl-nodo::after{content:"";position:absolute;inset:3px;border-radius:50%; background:var(--grad);transform:scale(0);transition:transform .4s var(--ease)} /* Los dos lados */ .tl-lado{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:16px; border:1px solid var(--line);font-size:clamp(.92rem,1.15vw,1.06rem);line-height:1.45} .tl-no{flex-direction:row-reverse;text-align:right; background:linear-gradient(200deg,rgba(212,121,106,.06),rgba(255,255,255,.01)); border-color:rgba(212,121,106,.16);color:var(--txt-3)} .tl-si{text-align:left; background:linear-gradient(160deg,rgba(249,178,51,.08),rgba(201,115,0,.03)); border-color:rgba(249,178,51,.24);color:var(--txt)} .tl-ico{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center} .tl-no .tl-ico{background:rgba(212,121,106,.14);color:#D4796A} .tl-si .tl-ico{background:rgba(249,178,51,.15);color:var(--cy)} .tl-lado svg{width:16px;height:16px} .tl-lado p{margin:0} @media(min-width:901px){ /* con JS: la vía arranca vacía y las filas esperan apagadas */ body.js-on .tl-via i{transform:scaleY(0)} body.js-on .tl-lado{opacity:0} body.js-on .tl-no{transform:translateX(-46px)} body.js-on .tl-si{transform:translateX(46px)} body.js-on .tl-lado{transition:opacity .55s var(--ease),transform .55s var(--ease)} body.js-on .tl-fila.on .tl-lado{opacity:1;transform:translateX(0)} body.js-on .tl-fila.on .tl-nodo{border-color:var(--cy); box-shadow:0 0 0 6px rgba(249,178,51,.10),0 0 20px rgba(249,178,51,.4)} body.js-on .tl-fila.on .tl-nodo::after{transform:scale(1)} } /* Móvil: una sola columna, la vía a la izquierda, todo alineado. */ @media(max-width:900px){ .tl-cabecera{display:none} .tl-via{left:15px;transform:none;top:8px} .tl-fila{grid-template-columns:32px 1fr;gap:0 14px;row-gap:10px} .tl-nodo{grid-column:1;grid-row:1 / span 2;align-self:start;margin-top:18px} .tl-lado{grid-column:2} .tl-no{flex-direction:row;text-align:left} .tl-filas{gap:26px} } /* ============ SECTORS ============ */ .sect-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media(max-width:980px){.sect-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.sect-grid{grid-template-columns:1fr}} .sect{padding:26px 22px;text-align:center;border:1px solid var(--line);border-radius:var(--r); background:var(--surface);transition:.4s var(--ease)} .sect:hover{border-color:rgba(249,178,51,.42);background:rgba(249,178,51,.06);transform:translateY(-5px)} .sect svg{width:26px;height:26px;color:var(--cy);margin:0 auto 13px;stroke-width:1.6} .sect h3{font-size:.955rem;margin-bottom:6px;letter-spacing:-.015em} .sect p{font-size:.795rem;color:var(--txt-3);line-height:1.55} /* ============ FAQ ============ */ #faq{background:linear-gradient(180deg, rgba(10,11,16,.92), rgba(13,13,18,.98));} .faq-wrap{max-width:820px;margin:0 auto} .faq-item{border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;overflow:hidden; background:var(--surface);transition:border-color .35s,background .35s} .faq-item.on{border-color:rgba(249,178,51,.34);background:rgba(249,178,51,.045)} .faq-q{width:100%;display:flex;align-items:center;gap:18px;padding:22px 26px;text-align:left; font-family:'Sora';font-size:1rem;font-weight:600;letter-spacing:-.015em;transition:color .3s} .faq-q:hover{color:var(--cy)} .faq-ic{margin-left:auto;width:26px;height:26px;border-radius:8px;border:1px solid var(--line-2); display:grid;place-items:center;flex:none;transition:.4s var(--ease);position:relative} .faq-ic::before,.faq-ic::after{content:"";position:absolute;background:var(--txt-2);border-radius:2px;transition:.4s var(--ease)} .faq-ic::before{width:11px;height:1.6px} .faq-ic::after{width:1.6px;height:11px} .faq-item.on .faq-ic{background:var(--grad);border-color:transparent;transform:rotate(180deg)} .faq-item.on .faq-ic::before{background:#060608} .faq-item.on .faq-ic::after{opacity:0} .faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)} .faq-a p{padding:0 26px 24px;font-size:.925rem;color:var(--txt-2);line-height:1.78} /* ============ PATRÓN DE MARCA ============ */ /* Extraído del Brand Identity Guidelines, no redibujado: se sacó de la portada del PDF calculando su periodo real (567 px) y tomando la mediana de todas las repeticiones, lo que borra el logo y los textos que solo salen una vez. Es el mosaico exacto del manual. El PNG ya viene en dorado con transparencia, así que basta con bajarle la opacidad. Se pinta en un ::before para no pisar los fondos (degradados, glows) que ya tienen las secciones. */ .pat{position:relative;isolation:isolate} .pat::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:url('../assets/patron-marca.png'); background-repeat:repeat; background-size:440px 440px; /* La posición sale de una variable para poder animarla con el scroll (parallax). Un ::before no es un nodo del DOM, así que no se puede animar directamente: se anima la variable en el elemento padre. */ background-position:center var(--pat-y, 0px); opacity:.04; } /* El contenedor se hace un poco más alto que la sección y se recorta. Así el patrón puede desplazarse sin dejar el borde al descubierto. */ .pat{overflow:hidden} body.js-on #proceso::before{ /* margen arriba y abajo para que el desplazamiento no descubra nada */ inset:-14% 0; will-change:background-position; } /* El contenido, siempre por encima del patrón */ .pat > .wrap{position:relative;z-index:1} @media(max-width:768px){.pat::before{background-size:300px 300px}} /* ============ ANIMACIONES DE SCROLL ============ */ /* Regla de oro de todo este bloque: SIN JavaScript la web tiene que verse bien igual. Por eso nada empieza oculto en el CSS base; los efectos solo se activan cuando GSAP ha cargado y añade .js-on. */ /* ---- transición de marca con el isotipo ---- */ /* TRES capas, y el reparto importa: A · lo que se ve antes (no lleva recorte) B · SOLO color, recortada con la forma del logo C · el contenido de marca, SIN recorte, entra al final El contenido nunca va dentro de la capa recortada. El isotipo tiene huecos entre los corchetes y las llamas, y esos huecos cortaban el texto por la mitad por muy grande que se hiciera. */ .iso-defs{position:absolute;width:0;height:0;overflow:hidden} #isoWrap{display:none} /* z-index por encima del escenario del hero: el hero es el fondo, el isotipo va delante. Sin esto el sticky del hero, que crea contexto de apilado, se comería el isotipo. */ body.js-on #isoWrap{display:block;height:800vh;position:relative;z-index:5} /* sticky, no pin de GSAP: el pin de GSAP inserta un espaciador y dentro de otro sticky se pelean al recalcular. Y fondo TRANSPARENTE, que es la clave de todo esto: lo que se ve detrás es el hero. */ .iso-pin{height:100vh;position:sticky;top:0;overflow:hidden;background:transparent} .iso-capa{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:34px} .iso-in{max-width:900px} /* A · EL FONDO DEL ACTO. Antes esta capa pintaba la marca sobre negro. Ya no hace falta: detrás está el hero de verdad, con su plano. Así que en escritorio la capa se queda transparente y su contenido se oculta, porque repetiría el isotipo y el nombre que ya están en el hero. En móvil NO se toca: allí no hay hero fijado detrás, y esta capa sigue siendo la portada de la sección. */ .iso-a{background:radial-gradient(80% 65% at 50% 42%,rgba(249,178,51,.16),transparent 64%),var(--bg)} @media(min-width:901px){ body.js-on .iso-a{background:none} body.js-on .iso-a .iso-in{display:none} } .iso-fantasma{width:clamp(74px,8vw,116px);height:auto;display:block;margin:0 auto 30px; opacity:.16;filter:grayscale(.2)} .iso-claim{font-family:'Sora',sans-serif;font-weight:700;letter-spacing:-.025em; font-size:clamp(1.35rem,3.1vw,2.35rem);line-height:1.3;color:var(--txt)} .iso-claim em{font-style:normal;background:var(--grad); -webkit-background-clip:text;background-clip:text;color:transparent} /* B · solo color. Es la que abre con la forma del logo. */ /* Ámbar más marcado que antes (.20 → .38) y un fondo un punto más claro. Motivo: esta capa ya no se abre sobre negro liso, se abre sobre el plano del hero atenuado, y con el ámbar flojo la forma del logo quedaba turbia: se intuía, no se leía. Con esto el isotipo entra como luz cálida abriéndose sobre la habitación oscura, que es lo que la marca hace de todas formas. */ .iso-b{background:radial-gradient(78% 62% at 50% 45%,rgba(249,178,51,.38),rgba(201,115,0,.10) 52%,transparent 72%),var(--bg-3); -webkit-clip-path:url(#isoClip);clip-path:url(#isoClip)} /* C · las frases que llegan por delante. Sin recorte, limpias. */ .iso-c{opacity:0;background:radial-gradient(70% 55% at 50% 40%,rgba(249,178,51,.06),transparent 60%),var(--bg-2)} .iso-c .iso-in{max-width:1280px;position:relative;width:100%;min-height:46vh} /* LAS DOS frases se apilan en el mismo sitio, no solo la segunda. Así pueden solaparse y mezclarse durante el cambio, en vez de turnarse una detrás de otra. */ .iso-frase{position:absolute;inset:0;margin:0; display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 .26em; font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.042em; font-size:clamp(2.3rem,7.4vw,7rem);line-height:1.02;color:var(--txt); text-wrap:balance; /* el navegador reserva capa propia: el desenfoque por velocidad se aplica en cada fotograma y sin esto va a tirones */ will-change:filter,transform; transform-origin:50% 50%} .iso-frase .w{display:inline-block} .iso-frase .oro{background:var(--grad);-webkit-background-clip:text;background-clip:text; color:transparent} /* Con JS las palabras arrancan ocultas y van entrando de una en una. OJO: solo en escritorio. En móvil no hay animación que las muestre, así que si se ocultaran aquí se quedarían invisibles para siempre. */ @media(min-width:901px){ body.js-on .iso-frase .w{opacity:0} } /* ---- móvil: sin fijar, sin recortes, sin desenfoques ---- */ @media(max-width:900px){ body.js-on #isoWrap{height:auto;z-index:auto} /* relative, no sticky: aquí no hay acto fijado detrás que sostener, esto es contenido normal que pasa de largo */ .iso-pin{height:auto;position:relative;overflow:visible} .iso-capa{position:relative;inset:auto;padding:64px 24px} /* la capa del recorte no pinta nada sin la animación */ .iso-b{display:none} .iso-a,.iso-c{opacity:1} .iso-c .iso-in{min-height:auto} .iso-frase{position:relative;inset:auto;display:block; font-size:clamp(1.7rem,7.6vw,2.7rem);will-change:auto;filter:none !important; transform:none !important} .iso-frase + .iso-frase{margin-top:38px} .iso-word{font-size:clamp(1.7rem,8.5vw,2.6rem)} } .iso-marca{width:clamp(62px,6.6vw,98px);height:auto;display:block;margin:0 auto 26px; filter:drop-shadow(0 12px 38px rgba(249,178,51,.4))} .iso-word{font-family:'Poppins',sans-serif;font-weight:900;font-style:italic; font-size:clamp(1.8rem,5.2vw,3.7rem);letter-spacing:-.03em;line-height:1.16; padding:.06em .14em .18em 0; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .iso-rule{width:110px;height:3px;border-radius:3px;background:var(--grad);margin:22px auto} .iso-tag{color:var(--txt-2);font-size:clamp(.95rem,1.7vw,1.2rem)} /* ---- proceso: línea de avance + fichas ---- */ /* Sin JS es una lista normal: la línea sale llena y se ven las cuatro fichas una detrás de otra. Con JS la sección se fija, la línea se va rellenando y abajo cambia la ficha de la fase activa. */ .proc-rail{max-width:980px;margin:0 auto;position:relative} .proc-via{position:absolute;left:0;right:0;top:11px;height:2px; background:rgba(255,255,255,.10);border-radius:2px;overflow:hidden} .proc-via i{display:block;height:100%;width:100%;background:var(--grad);border-radius:2px; box-shadow:0 0 16px rgba(249,178,51,.55)} .proc-nodos{display:grid;grid-template-columns:repeat(4,1fr);position:relative} .pnodo{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px} .pnodo-pt{width:24px;height:24px;border-radius:50%;background:var(--bg); border:2px solid var(--cy);display:grid;place-items:center;position:relative;z-index:1; transition:.35s var(--ease)} .pnodo-pt::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--grad); transform:scale(1);transition:.35s var(--ease)} .pnodo-n{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.2em;color:var(--cy)} .pnodo-t{font-family:'Sora',sans-serif;font-weight:600;font-size:.94rem;color:var(--txt); letter-spacing:-.015em;padding:0 8px} .proc-fichas{max-width:980px;margin:54px auto 0;position:relative} .pficha{padding:38px 40px;border-radius:24px; background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(17,18,23,.92)); border:1px solid rgba(255,255,255,.09);box-shadow:0 30px 70px -42px #000} .pficha + .pficha{margin-top:18px} .pficha-n{font-family:'Sora',sans-serif;font-weight:800;font-size:3.4rem;line-height:1; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent; margin-bottom:16px} .pficha h3{font-size:1.65rem;margin-bottom:12px;letter-spacing:-.025em} .pficha p{color:var(--txt-2);line-height:1.75;font-size:1.02rem} .pficha-t{margin-top:20px;font-family:'JetBrains Mono',monospace;font-size:.74rem; color:var(--cy);letter-spacing:.16em;text-transform:uppercase} @media(min-width:901px){ /* con JS: la línea arranca vacía y los puntos apagados */ body.js-on .proc-via i{width:0} body.js-on .pnodo-pt{border-color:rgba(255,255,255,.18)} body.js-on .pnodo-pt::after{transform:scale(0)} body.js-on .pnodo-n,body.js-on .pnodo-t{opacity:.4;transition:opacity .35s} /* punto alcanzado */ body.js-on .pnodo.on .pnodo-pt{border-color:var(--cy);box-shadow:0 0 0 6px rgba(249,178,51,.10)} body.js-on .pnodo.on .pnodo-pt::after{transform:scale(1)} body.js-on .pnodo.on .pnodo-n,body.js-on .pnodo.on .pnodo-t{opacity:1} /* fase actual: un poco más marcada */ body.js-on .pnodo.act .pnodo-pt{box-shadow:0 0 0 8px rgba(249,178,51,.16),0 0 22px rgba(249,178,51,.5)} /* Las cuatro fichas en fila, una bajo cada punto de la línea. Ya no se fija la sección ni se turnan: entran de izquierda a derecha con el scroll (lo mueve GSAP en scroll-anim.js) y se quedan. */ body.js-on .proc-fichas{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px} body.js-on .pficha{margin:0;padding:30px 26px;opacity:0;transform:translate3d(-36px,0,0)} body.js-on .pficha + .pficha{margin-top:0} body.js-on .pficha-n{font-size:2.6rem;margin-bottom:12px} body.js-on .pficha h3{font-size:1.22rem} body.js-on .pficha p{font-size:.94rem;line-height:1.65} } @media(max-width:900px){ .proc-nodos{grid-template-columns:1fr;gap:26px} .proc-via{display:none} .pnodo{flex-direction:row;text-align:left;gap:14px} } /* Accesibilidad: si el usuario pide menos movimiento, nada se fija */ @media(prefers-reduced-motion:reduce){ body.js-on #isoWrap{display:none} body.js-on .proc-via i{width:100%} body.js-on .pnodo-pt{border-color:var(--cy)} body.js-on .pnodo-pt::after{transform:scale(1)} body.js-on .pnodo-n,body.js-on .pnodo-t{opacity:1} body.js-on .proc-fichas{height:auto} body.js-on .pficha{position:relative;opacity:1} body.js-on .pficha + .pficha{margin-top:18px} } /* ============ FINAL CTA ============ */ #contacto{padding:120px 0} /* Aquí el patrón va POR FUERA del recuadro, sobre el fondo oscuro. Un pelín más marcado que en el resto porque la caja central, al ser más clara, le resta presencia visual alrededor. */ #contacto.pat::before{opacity:.055} .cta-box{position:relative;border-radius:32px;padding:70px 56px;overflow:hidden;text-align:center; border:1px solid rgba(249,178,51,.2);background:linear-gradient(135deg,rgba(249,178,51,.1),rgba(26,29,35,.9) 42%,rgba(201,115,0,.12)); box-shadow:0 35px 80px -40px rgba(249,178,51,.38)} @media(max-width:768px){.cta-box{padding:48px 26px;border-radius:24px}} .cta-box .gridbg{background-size:44px 44px;opacity:.7} .cta-box > *{position:relative;z-index:2} .cta-box h2{font-size:clamp(1.85rem,4.2vw,3rem);margin-bottom:20px;letter-spacing:-.035em} .cta-box p{font-size:1.045rem;color:var(--txt-2);max-width:620px;margin:0 auto 34px;line-height:1.75} .cta-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:28px} .cta-meta{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;font-size:.85rem;color:var(--txt-3)} .cta-meta span{display:inline-flex;align-items:center;gap:7px} .cta-meta svg{width:15px;height:15px;color:var(--cy)} /* ============ FOOTER ============ */ footer{border-top:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(12,13,18,.9), rgba(7,8,12,.98));padding:64px 0 30px} .f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;margin-bottom:48px} @media(max-width:880px){.f-grid{grid-template-columns:1fr;gap:36px}} .f-brand p{font-size:.9rem;color:var(--txt-2);max-width:340px;margin:16px 0 22px;line-height:1.72} .f-col h4{font-family:'Sora';font-size:.735rem;text-transform:uppercase;letter-spacing:.14em; color:var(--txt-3);margin-bottom:18px;font-weight:700} .f-col ul{list-style:none;display:flex;flex-direction:column;gap:11px} .f-col a{font-size:.895rem;color:var(--txt-2);transition:color .25s} .f-col a:hover{color:var(--cy)} .f-contact{display:flex;flex-direction:column;gap:14px} .f-contact a{display:flex;align-items:center;gap:12px;font-size:.9rem;color:var(--txt-2);transition:color .25s} .f-contact a:hover{color:var(--cy)} .f-contact .ic{width:36px;height:36px;border-radius:11px;background:var(--surface);border:1px solid var(--line); display:grid;place-items:center;flex:none;color:var(--cy)} .f-contact .ic svg{width:16px;height:16px} .f-contact small{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--txt-3);font-weight:600} .f-bot{padding-top:26px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px; justify-content:space-between;align-items:center;font-size:.82rem;color:var(--txt-3)} /* WhatsApp float */ .wa{position:fixed;bottom:26px;right:26px;width:56px;height:56px;border-radius:50%;background:#25D366; display:grid;place-items:center;z-index:100;box-shadow:0 12px 34px -8px rgba(37,211,102,.65); transition:.35s var(--ease);opacity:0;transform:scale(.5) translateY(16px);pointer-events:none} .wa.on{opacity:1;transform:none;pointer-events:auto} .wa:hover{transform:scale(1.09)} .wa svg{width:29px;height:29px;fill:#fff} @media(max-width:520px){.wa{bottom:18px;right:18px;width:50px;height:50px}.wa svg{width:26px;height:26px}} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} .rv,.rv-l,.rv-r,.rv-s{opacity:1!important;transform:none!important} } /* ============ SEGURIDAD DE ANCHO (móvil) ============ */ /* Nada puede ser más ancho que la pantalla. */ img,svg,video,canvas,iframe{max-width:100%;height:auto} /* Palabras largas (correos, URLs) parten en vez de desbordar. */ p,li,h1,h2,h3,h4,.lede{overflow-wrap:break-word} @media(max-width:420px){ /* En pantallas muy estrechas el titular deja de ir en una sola línea: con nowrap se salía por la derecha. */ h1.hero-h1,.gold-metal{white-space:normal} .iso-word{font-size:clamp(1.5rem,8vw,2.4rem)} .wrap{padding:0 18px} } /* ═══════════════════════════════════════════════════════════════ Formulario de contacto en ventana modal (js/formulario.js) Se abre encima de la página: el visitante no pierde el hilo. ═══════════════════════════════════════════════════════════════ */ .fcrm-capa{ position:fixed; inset:0; z-index:9000; display:grid; place-items:center; padding:24px 16px; opacity:0; transition:opacity .22s var(--ease); } .fcrm-capa[hidden]{display:none} .fcrm-capa.abierta{opacity:1} .fcrm-fondo{ position:absolute; inset:0; background:rgba(3,3,5,.78); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .fcrm-panel{ position:relative; width:100%; max-width:560px; max-height:calc(100dvh - 48px); overflow-y:auto; overscroll-behavior:contain; padding:32px clamp(20px,4vw,36px) 28px; background:var(--panel-grad,linear-gradient(135deg,rgba(18,20,28,.98),rgba(10,11,17,.96))); border:1px solid var(--line-2); border-radius:var(--r-lg,24px); box-shadow:0 30px 80px rgba(0,0,0,.6); transform:translateY(14px) scale(.985); transition:transform .28s var(--ease); } .fcrm-capa.abierta .fcrm-panel{transform:none} .fcrm-x{ position:absolute; top:14px; right:14px; display:grid; place-items:center; width:34px; height:34px; color:var(--txt-2); background:var(--surface); border:1px solid var(--line); border-radius:10px; cursor:pointer; transition:color .2s,border-color .2s; } .fcrm-x:hover{color:var(--txt); border-color:var(--line-2)} .fcrm-titulo{ font-family:'Sora',sans-serif; font-weight:700; font-size:clamp(1.4rem,3.4vw,1.75rem); line-height:1.2; margin:0 0 8px; padding-right:40px; color:var(--txt); } .fcrm-lede{ margin:0 0 22px; color:var(--txt-2); font-size:.94rem; line-height:1.6; } .fcrm-lede a{color:var(--cy); text-decoration:underline; text-underline-offset:2px} .fcrm-fila{display:grid; grid-template-columns:1fr 1fr; gap:14px} @media (max-width:520px){ .fcrm-fila{grid-template-columns:1fr} } .fcrm-campo{margin-bottom:14px; min-width:0} .fcrm-campo label{ display:block; margin-bottom:6px; font-size:.78rem; letter-spacing:.02em; color:var(--txt-3); text-transform:uppercase; } .fcrm-campo input, .fcrm-campo textarea{ width:100%; padding:11px 13px; font-family:inherit; font-size:.95rem; color:var(--txt); background:rgba(0,0,0,.28); border:1px solid var(--line); border-radius:12px; outline:none; transition:border-color .2s,background .2s; } .fcrm-campo textarea{resize:vertical; min-height:96px; line-height:1.55} .fcrm-campo input::placeholder, .fcrm-campo textarea::placeholder{color:var(--txt-3)} .fcrm-campo input:focus, .fcrm-campo textarea:focus{border-color:var(--cy); background:rgba(0,0,0,.4)} .fcrm-campo input.mal, .fcrm-campo textarea.mal{border-color:#E0574A} /* El honeypot: invisible para una persona, irresistible para un bot. Fuera de pantalla en vez de display:none, que algunos bots detectan. */ .fcrm-oculto{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden} .fcrm-consent{ display:flex; gap:10px; align-items:flex-start; margin:4px 0 18px; font-size:.85rem; line-height:1.5; color:var(--txt-2); } .fcrm-consent input{ flex:0 0 auto; width:16px; height:16px; margin-top:2px; accent-color:var(--cy); cursor:pointer; } .fcrm-consent a{color:var(--cy); text-decoration:underline; text-underline-offset:2px} .fcrm-consent.mal span{color:#E0574A} .fcrm-enviar{width:100%; justify-content:center; cursor:pointer} .fcrm-enviar:disabled{opacity:.6; cursor:default} .fcrm-aviso{margin:12px 0 0; font-size:.86rem; line-height:1.5; color:var(--txt-2)} .fcrm-aviso.mal-texto{color:#E0574A} .fcrm-aviso a{color:var(--cy); text-decoration:underline} .fcrm-ok{text-align:center; padding:14px 0 8px} .fcrm-ok-icono{ display:grid; place-items:center; width:56px; height:56px; margin:0 auto 16px; color:#0b0b0f; background:var(--grad); border-radius:50%; } .fcrm-ok .fcrm-titulo{padding-right:0} .fcrm-ok .fcrm-lede{margin-bottom:0} /* Con la ventana abierta, el fondo no se mueve. */ body.fcrm-bloqueado{overflow:hidden} @media (prefers-reduced-motion:reduce){ .fcrm-capa,.fcrm-panel{transition:none} } /* ── Páginas legales (política de privacidad) ─────────────── */ .legal{max-width:780px} .legal h1{ font-family:'Sora',sans-serif; font-weight:800; font-size:clamp(1.9rem,5vw,2.6rem); line-height:1.15; margin:0 0 10px; } .legal h2{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.12rem; margin:36px 0 10px; color:var(--txt); } .legal p,.legal li{color:var(--txt-2); line-height:1.75; font-size:.97rem} .legal p{margin:0 0 14px} .legal ul{margin:0 0 16px; padding-left:20px} .legal li{margin-bottom:7px} .legal a{color:var(--cy); text-decoration:underline; text-underline-offset:2px} .legal strong{color:var(--txt)} /* ── Botón de descarga de informes ────────────────────────── */ /* Ahora es un