/* ============================================================ CLICK DIGITAL AGENCY — Sistema de diseño web Línea gráfica heredada del funnel. Paleta oficial de marca. ============================================================ */ :root{ /* Marca */ --am:#ffc200; --am-2:#ffdb66; --ci:#02adf5; --ci-2:#4dc9ff; --verde:#51be54; --morado:#a16afe; /* Superficies */ --bg:#05070c; --bg-2:#080b12; --sur:#0e1420; --sur-2:#131b29; /* Bordes y texto */ --brd:rgba(255,255,255,.09); --brd-2:rgba(255,255,255,.16); --tx:#f2f5f9; --tx-2:#9aa7b8; --tx-3:#6b7a8f; --rojo:#e0554a; /* Medidas */ --max:1180px; --nav-h:74px; --r-sm:12px; --r-md:18px; --r-lg:24px; } *{box-sizing:border-box;margin:0;padding:0} /* overflow-x va en , NUNCA en . Si se pone en body, el navegador calcula overflow-y:auto sobre body y este pasa a ser un contenedor con scroll propio. ScrollTrigger lo toma entonces como el elemento observado y lee siempre posicion 0, mientras el scroll real ocurre en : todas las animaciones por scroll se quedan congeladas. Verificado el 2026-08-01. */ html{scroll-behavior:smooth;background:var(--bg);-webkit-text-size-adjust:100%;overflow-x:hidden} body{ font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; background:var(--bg);color:var(--tx);line-height:1.62; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit} .wrap{max-width:var(--max);margin:0 auto;padding:0 24px} .narrow{max-width:860px;margin:0 auto;padding:0 24px} section{padding:clamp(58px,8vw,116px) 0;position:relative} /* ---------- TIPOGRAFÍA ---------- */ h1{font-size:clamp(2.1rem,6vw,4.5rem);line-height:1.02;letter-spacing:-.045em;font-weight:800} h2{font-size:clamp(1.7rem,4.2vw,3rem);line-height:1.08;letter-spacing:-.035em;font-weight:800} h3{font-size:1.16rem;font-weight:700;line-height:1.3;letter-spacing:-.015em} h4{font-size:1rem;font-weight:700;letter-spacing:-.01em} p{color:var(--tx-2);font-size:clamp(1rem,1.35vw,1.09rem)} .lead{font-size:clamp(1.05rem,1.75vw,1.3rem);color:#c2cddc;font-weight:300;line-height:1.6} /* El titular de cada página pasó a decir lo que la gente busca, y el titular creativo que había antes baja aquí. Un titular descriptivo es mucho más largo que uno creativo: al tamaño original ocupaba cinco líneas y se comía el encabezado. Donde hay subtítulo, el titular baja un escalón y el creativo sube, de modo que los dos juntos ocupan lo que antes ocupaba el creativo solo. Uno informa, el otro es el que se recuerda. */ h1:has(+ .sub-h1){font-size:clamp(1.85rem,4vw,3.05rem);line-height:1.06} .sub-h1{font-size:clamp(1.4rem,3vw,2.35rem);line-height:1.16;font-weight:200; letter-spacing:-.03em;color:var(--tx-1);margin-top:16px;max-width:20ch} .ctr .sub-h1{margin-left:auto;margin-right:auto;max-width:24ch} /* El hero interior ya centra el texto, pero .sub-h1 lleva max-width y sin margenes automaticos quedaba pegado a la izquierda dentro de un bloque centrado. Misma correccion que ya tenia .hero-int .lead. */ .hero-int .sub-h1{margin-left:auto;margin-right:auto;max-width:24ch} .hero-int.izq .sub-h1{margin-left:0;margin-right:0} .thin{font-weight:200} .small{font-size:.9rem;color:var(--tx-3)} .ctr{text-align:center} .am{color:var(--am)} .ci{color:var(--ci)} .eb{ display:inline-flex;align-items:center;font-size:.72rem;font-weight:700; letter-spacing:.2em;color:var(--ci);text-transform:uppercase;margin-bottom:20px; position:relative; } /* La línea se dibuja fuera del elemento, hacia su izquierda. Dentro del flujo empujaba el texto 38px y el rótulo quedaba descuadrado respecto al titular que va justo debajo. */ .eb::before{ content:"";position:absolute;right:100%;margin-right:10px;top:50%; width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--ci)); } /* Cuando va centrado o suelto, la línea estorba más de lo que aporta */ .ctr .eb::before,.cta-final .eb::before,.eb.solo::before{display:none} .eb.solo::before{display:none} /* gradient-text-sweep — gradiente a través de las letras */ .hl{ background:linear-gradient(105deg,var(--am) 0%,var(--am-2) 55%,var(--am) 100%); background-size:220% 100%; -webkit-background-clip:text;background-clip:text;color:transparent; /* background-clip:text recorta el degradado a la caja del span. Con line-height ajustado, la parte baja de g/y/p/j queda fuera de esa caja y la letra se ve cortada. El padding devuelve el area que falta; al ser inline no empuja el layout, solo amplia la zona pintada. */ padding-bottom:.16em; -webkit-box-decoration-break:clone; box-decoration-break:clone; } .hl-ci{ background:linear-gradient(105deg,var(--ci) 0%,var(--ci-2) 55%,var(--ci) 100%); background-size:220% 100%; -webkit-background-clip:text;background-clip:text;color:transparent; } /* ---------- FONDO AMBIENTAL ---------- */ .aura{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden} .orb{position:absolute;border-radius:50%;filter:blur(96px);opacity:.15;will-change:transform} .orb.a{width:560px;height:560px;background:var(--ci);top:-170px;left:-150px} .orb.b{width:470px;height:470px;background:var(--am);top:48%;right:-170px} .orb.c{width:410px;height:410px;background:var(--ci);bottom:-150px;left:30%} .grid-bg{ position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5; 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% 60% at 50% 0%,#000 22%,transparent 80%); -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 22%,transparent 80%); } main,header,footer{position:relative;z-index:1} /* ---------- GLASS ---------- */ .glass{ background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); border:1px solid var(--brd);border-radius:var(--r-lg); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); transition:border-color .45s ease,transform .45s cubic-bezier(.16,1,.3,1),background .45s ease; } .glass:hover{border-color:var(--brd-2);transform:translateY(-4px)} /* ---------- BOTONES (press-release-spring) ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:11px; background:linear-gradient(135deg,var(--ci),#0086d1);color:#fff;text-decoration:none; /* Los