/* ============================================================ HOME COHETE — home alternativa cinemática (/home-cohete/) Estilos de: hero de entrada, overlays de la secuencia scroll (ignición, trajectory, rank, vitals, tally) y pipeline. Tokens de marca desde hera.css (--ink, --green, --coral, --head, --text). NOTA: los elementos [data-from] del overlay reciben opacity/transform INLINE del runtime (sequence.js) → aquí NUNCA se les pone transform. NOTA v12: todos los selectores .page-home-cohete pasaron a :is(.page-home-cohete,.page-home-cohete-2) para cubrir TAMBIÉN la variante /home-cohete-2/ (frames 9:16 ligeros en móvil). :is() de dos clases conserva la especificidad original: la home-cohete 1 no cambia. ============================================================ */ /* ---- utilidades ---- */ :is(.page-home-cohete,.page-home-cohete-2) .chz-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} :is(.page-home-cohete,.page-home-cohete-2) .chz-kicker{display:flex;align-items:center;gap:8px;font-family:var(--text);font-size:11px;letter-spacing:.22em;color:var(--green);margin:0;text-transform:uppercase} :is(.page-home-cohete,.page-home-cohete-2) .chz-kicker--c{justify-content:center} :is(.page-home-cohete,.page-home-cohete-2) .chz-kicker .hc-ic{flex:none} :is(.page-home-cohete,.page-home-cohete-2) .chz-mono{font-family:var(--text);font-size:12px;letter-spacing:.18em;color:rgba(255,255,255,.66);margin:14px 0 0} :is(.page-home-cohete,.page-home-cohete-2) .chz-mono-strong{color:var(--green);font-weight:700;font-variant-numeric:tabular-nums} :is(.page-home-cohete,.page-home-cohete-2) .chz-foot{font-family:var(--text);font-size:10.5px;letter-spacing:.08em;color:rgba(255,255,255,.55);margin:12px 0 0} /* ============================================================ LAYOUT — el header (.hc-site-header, sticky top:0, 72px) NO debe tapar el canvas pineado. Empujamos la capa sticky de ESTA página bajo el header y le restamos su altura (solo aquí; sequence.css global no se toca). El fondo índigo de página hace que la franja tras el header translúcido lea coherente. ============================================================ */ :is(.page-home-cohete,.page-home-cohete-2){--hc-header-h:72px} body:is(.page-home-cohete,.page-home-cohete-2){background:#140c3d} :is(.page-home-cohete,.page-home-cohete-2) .scroll-seq__sticky{ top:var(--hc-header-h); height:calc(100vh - var(--hc-header-h)); height:calc(100svh - var(--hc-header-h)); } /* ============================================================ HERO = primer bloque del overlay (JS lo desvanece con el scroll) ============================================================ */ :is(.page-home-cohete,.page-home-cohete-2) .chz-herocap{position:absolute;inset:0;z-index:1;display:flex;align-items:center;color:#fff;will-change:opacity} :is(.page-home-cohete,.page-home-cohete-2) .chz-herocap .hc-container{width:100%} /* ============================================================ HERO estático de respaldo sin JS (frame 0001 de fondo) ============================================================ */ :is(.page-home-cohete,.page-home-cohete-2) .chz-hero{position:relative;min-height:calc(100vh - 72px);display:flex;align-items:center;overflow:hidden;background:#140c3d;color:#fff} :is(.page-home-cohete,.page-home-cohete-2) .chz-hero__bg{position:absolute;inset:0;z-index:0} :is(.page-home-cohete,.page-home-cohete-2) .chz-hero__bg img{width:100%;height:100%;object-fit:cover;display:block} :is(.page-home-cohete,.page-home-cohete-2) .chz-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,15,64,.88) 0%,rgba(32,21,84,.46) 46%,rgba(16,9,46,.92) 100%),radial-gradient(70% 55% at 22% 62%,rgba(45,34,112,.42),transparent 70%)} :is(.page-home-cohete,.page-home-cohete-2) .chz-hero__grid{position:relative;z-index:1;padding:72px 0 96px} :is(.page-home-cohete,.page-home-cohete-2) .chz-hero__copy{max-width:780px} /* 780: 'Vendemos clientes' (Kalam 1.2em + padding) cabe en 1 línea → la frase rompe en 2, no en 3 */ :is(.page-home-cohete,.page-home-cohete-2) :is(.chz-hero,.chz-herocap) .hc-h1-kw{color:var(--green)} :is(.page-home-cohete,.page-home-cohete-2) .chz-hero__big{font-family:var(--head);font-weight:800;font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.02em;color:#fff;margin:10px 0 0} /* ------------------------------------------------------------ "despega" — réplica EXACTA del tramo Kalam de los heros estándar (bloques HERO KALAM HIGHLIGHT + HERO KALAM NEON de hera.css). Los @keyframes hc-neon-g / hc-neon-g-hl son GLOBALES (viven en hera.css, cargado antes): aquí solo se referencian por nombre. cohete.js añade .hc-neon-on ~2 s tras load (igual que menu.js). ------------------------------------------------------------ */ :is(.page-home-cohete,.page-home-cohete-2) .chz-hl{ color:var(--green); font-family:'Kalam',var(--head); font-weight:700; font-size:1.3em; letter-spacing:normal; display:inline-block;max-width:100%; position:relative;z-index:0; padding:0 .16em;margin:0 -.16em; transition:color .2s ease,text-shadow .2s ease; } :is(.page-home-cohete,.page-home-cohete-2) .chz-hl::before{ content:"";position:absolute;z-index:-1; inset:.14em -.1em .04em -.1em; transform:rotate(-1.2deg) skewX(-8deg); border-radius:.35em .55em .4em .6em; background:rgba(0,234,140,.19); transition:background-color .2s ease; } :is(.page-home-cohete,.page-home-cohete-2) .chz-hl:hover{color:#33ffa8;text-shadow:0 2px 16px rgba(0,234,140,.45)} @media(max-width:600px){ :is(.page-home-cohete,.page-home-cohete-2) .chz-hl{font-size:1.2em} } /* Encendido neón (estado final estático idéntico al 100% del keyframe) */ :is(.page-home-cohete,.page-home-cohete-2) .chz-hl.hc-neon-on{ color:#33ffa8; text-shadow:0 0 4px rgba(51,255,168,.9),0 0 18px rgba(0,234,140,.55),0 2px 34px rgba(0,234,140,.35); animation:hc-neon-g 2s linear 1; } :is(.page-home-cohete,.page-home-cohete-2) .chz-hl.hc-neon-on::before{ background:rgba(0,234,140,.19); animation:hc-neon-g-hl 2s linear 1; } /* Hover tras el encendido: un punto más de brillo todavía */ :is(.page-home-cohete,.page-home-cohete-2) .chz-hl.hc-neon-on:hover{ color:#66ffc2; text-shadow:0 0 6px rgba(102,255,194,.95),0 0 24px rgba(0,234,140,.7),0 2px 44px rgba(0,234,140,.5); } /* Reduced motion: encendido directo al estado final, sin parpadeos */ @media(prefers-reduced-motion:reduce){ :is(.page-home-cohete,.page-home-cohete-2) .chz-hl, :is(.page-home-cohete,.page-home-cohete-2) .chz-hl::before{transition:none} :is(.page-home-cohete,.page-home-cohete-2) .chz-hl.hc-neon-on, :is(.page-home-cohete,.page-home-cohete-2) .chz-hl.hc-neon-on::before{animation:none} } html.chz-reduced body .chz-hl, html.chz-reduced body .chz-hl::before{transition:none} html.chz-reduced body .chz-hl.hc-neon-on, html.chz-reduced body .chz-hl.hc-neon-on::before{animation:none} :is(.page-home-cohete,.page-home-cohete-2) .chz-hero__lead{margin:20px 0 0;font-size:clamp(1rem,1.6vw,1.15rem);color:rgba(255,255,255,.82);max-width:56ch} :is(.page-home-cohete,.page-home-cohete-2) .chz-hero__lead strong{color:#fff} :is(.page-home-cohete,.page-home-cohete-2) :is(.chz-hero,.chz-herocap) .hc-hero-actions{margin-top:28px} :is(.page-home-cohete,.page-home-cohete-2) :is(.chz-hero,.chz-herocap) .hc-btn--outline{color:#fff;border-color:rgba(255,255,255,.55);background:transparent} :is(.page-home-cohete,.page-home-cohete-2) :is(.chz-hero,.chz-herocap) a.hc-btn--outline:hover, :is(.page-home-cohete,.page-home-cohete-2) :is(.chz-hero,.chz-herocap) a.hc-btn--outline:focus{background:#fff;color:var(--ink);border-color:#fff} :is(.page-home-cohete,.page-home-cohete-2) .chz-hero__mono{font-family:var(--text);font-size:12px;letter-spacing:.16em;color:rgba(255,255,255,.62);margin:26px 0 0} :is(.page-home-cohete,.page-home-cohete-2) .chz-cue{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;color:rgba(255,255,255,.72);text-decoration:none;pointer-events:none} :is(.page-home-cohete,.page-home-cohete-2) .chz-cue__txt{font-family:var(--text);font-size:10px;letter-spacing:.3em} :is(.page-home-cohete,.page-home-cohete-2) .chz-cue svg{width:18px;height:18px;animation:chz-bounce 1.8s ease-in-out infinite} @keyframes chz-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}} /* ============================================================ SECUENCIA — base de overlays ============================================================ */ :is(.page-home-cohete,.page-home-cohete-2) .chz-seq .scroll-seq__loader{background:#140c3d} :is(.page-home-cohete,.page-home-cohete-2) .chz-seq .scroll-seq__loader-bar{background:var(--green)} :is(.page-home-cohete,.page-home-cohete-2) .chz-cap, :is(.page-home-cohete,.page-home-cohete-2) .chz-panel{position:absolute;color:#fff} :is(.page-home-cohete,.page-home-cohete-2) .chz-panel{background:rgba(16,10,46,.88);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:24px 26px;box-shadow:0 30px 70px -30px rgba(0,0,0,.65);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} :is(.page-home-cohete,.page-home-cohete-2) .chz-panel__title{font-family:var(--head);font-weight:700;font-size:clamp(1.35rem,2.3vw,1.8rem);letter-spacing:-.01em;color:#fff;margin:10px 0 0} :is(.page-home-cohete,.page-home-cohete-2) .chz-t-center{text-align:center} /* Barra de progreso del despegue (siempre visible durante el pin) */ :is(.page-home-cohete,.page-home-cohete-2) .chz-progress{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;pointer-events:none} :is(.page-home-cohete,.page-home-cohete-2) .chz-progress__label, :is(.page-home-cohete,.page-home-cohete-2) .chz-progress__pct{font-family:var(--text);font-size:10px;letter-spacing:.3em;color:rgba(255,255,255,.65)} :is(.page-home-cohete,.page-home-cohete-2) .chz-progress__pct{width:44px;font-variant-numeric:tabular-nums;letter-spacing:.08em;color:var(--green)} :is(.page-home-cohete,.page-home-cohete-2) .chz-progress__track{width:180px;height:3px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden} :is(.page-home-cohete,.page-home-cohete-2) .chz-progress__fill{display:block;width:0%;height:100%;border-radius:999px;background:var(--green);box-shadow:0 0 12px rgba(0,234,140,.8)} /* ---- ESCENA 1 · Ignición ---- */ :is(.page-home-cohete,.page-home-cohete-2) .chz-ign{left:0;right:0;margin:0 auto;width:fit-content;text-align:center;bottom:16%;max-width:min(560px,60vw);background:rgba(16,9,46,.62);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:22px 26px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} :is(.page-home-cohete,.page-home-cohete-2) .chz-ign__big{font-family:var(--head);font-weight:800;font-size:clamp(2.4rem,5vw,4rem);letter-spacing:-.02em;line-height:1;color:#fff;margin:10px 0 0} :is(.page-home-cohete,.page-home-cohete-2) .chz-ign__sub{color:rgba(255,255,255,.8);max-width:38ch;margin:10px auto 0} /* ---- ESCENA 2 · Trajectory (curva de crecimiento) ---- */ :is(.page-home-cohete,.page-home-cohete-2) .chz-traj{left:4%;top:12%;width:min(520px,46vw)} :is(.page-home-cohete,.page-home-cohete-2) .chz-read{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:14px} :is(.page-home-cohete,.page-home-cohete-2) .chz-read__label{font-family:var(--text);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);flex-basis:100%} :is(.page-home-cohete,.page-home-cohete-2) .chz-read__big{font-family:var(--head);font-weight:800;font-size:clamp(2rem,3.6vw,3rem);line-height:1;color:var(--green);font-variant-numeric:tabular-nums} :is(.page-home-cohete,.page-home-cohete-2) .chz-read__delta{font-family:var(--text);font-size:11.5px;letter-spacing:.06em;color:rgba(255,255,255,.72)} :is(.page-home-cohete,.page-home-cohete-2) .chz-chart{position:relative;height:clamp(160px,24vh,230px);margin-top:14px} :is(.page-home-cohete,.page-home-cohete-2) .chz-chart svg{width:100%;height:100%;display:block;overflow:visible} :is(.page-home-cohete,.page-home-cohete-2) .chz-grid{stroke:rgba(255,255,255,.12)} :is(.page-home-cohete,.page-home-cohete-2) .chz-area{fill:url(#chz-grad);opacity:0} :is(.page-home-cohete,.page-home-cohete-2) .chz-line{fill:none;stroke:var(--green);stroke-width:3px;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px rgba(0,234,140,.55))} :is(.page-home-cohete,.page-home-cohete-2) .chz-headdot{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 14px rgba(0,234,140,.95);transform:translate(-50%,-50%);opacity:0;pointer-events:none} :is(.page-home-cohete,.page-home-cohete-2) .chz-ann{position:absolute;font-family:var(--text);font-size:10.5px;letter-spacing:.04em;white-space:nowrap;color:#eafff5;background:rgba(10,5,34,.72);border:1px solid rgba(0,234,140,.4);border-radius:8px;padding:5px 9px;opacity:0;transform:translate(-50%,calc(-100% - 10px)) translateY(6px);transition:opacity .35s ease,transform .35s ease;pointer-events:none} :is(.page-home-cohete,.page-home-cohete-2) .chz-ann.is-on{opacity:1;transform:translate(-50%,calc(-100% - 10px))} /* ---- ESCENA 3 · Rank (bar-chart race) ---- */ :is(.page-home-cohete,.page-home-cohete-2) .chz-rank{right:4%;top:12%;width:min(480px,44vw)} :is(.page-home-cohete,.page-home-cohete-2) .chz-rank__head{display:flex;justify-content:space-between;font-family:var(--text);font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.6);margin:14px 0 10px} :is(.page-home-cohete,.page-home-cohete-2) .chz-rank__head span:first-child{color:var(--green);font-variant-numeric:tabular-nums} :is(.page-home-cohete,.page-home-cohete-2) .chz-rank__rows{position:relative;height:300px} /* 6 slots: 5 posiciones + origen de "Tu web" */ :is(.page-home-cohete,.page-home-cohete-2) .chz-row{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;height:50px;transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform} :is(.page-home-cohete,.page-home-cohete-2) .chz-row__pos{font-family:var(--text);font-size:11px;width:24px;color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums} :is(.page-home-cohete,.page-home-cohete-2) .chz-row__nm{font-family:var(--text);font-size:12px;width:clamp(86px,9vw,120px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.55)} :is(.page-home-cohete,.page-home-cohete-2) .chz-row__track{flex:1;height:22px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden} :is(.page-home-cohete,.page-home-cohete-2) .chz-row__bar{display:block;height:100%;width:0;border-radius:6px;background:rgba(255,255,255,.28)} :is(.page-home-cohete,.page-home-cohete-2) .chz-row__vl{font-family:var(--text);font-size:13px;width:38px;text-align:right;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums} :is(.page-home-cohete,.page-home-cohete-2) .chz-row--you .chz-row__nm{color:#fff;font-weight:700} :is(.page-home-cohete,.page-home-cohete-2) .chz-row--you .chz-row__bar{background:linear-gradient(90deg,#00b46b,var(--green));box-shadow:0 0 16px rgba(0,234,140,.45)} :is(.page-home-cohete,.page-home-cohete-2) .chz-row--you .chz-row__vl{color:var(--green);font-weight:700} :is(.page-home-cohete,.page-home-cohete-2) .chz-row--you.chz-row--top .chz-row__pos{color:var(--green);font-weight:700} /* ---- ESCENA 4 · Vitals (gauges) ---- */ :is(.page-home-cohete,.page-home-cohete-2) .chz-panel--center{left:0;right:0;margin:0 auto;width:fit-content;max-width:92vw} :is(.page-home-cohete,.page-home-cohete-2) .chz-vitals{bottom:10%;text-align:center} :is(.page-home-cohete,.page-home-cohete-2) .chz-gauges{display:flex;justify-content:center;gap:clamp(14px,3vw,44px);margin-top:18px} :is(.page-home-cohete,.page-home-cohete-2) .chz-gauge{width:clamp(100px,12vw,158px);display:flex;flex-direction:column;align-items:center} :is(.page-home-cohete,.page-home-cohete-2) .chz-gauge svg{width:100%;display:block;overflow:visible} :is(.page-home-cohete,.page-home-cohete-2) .chz-gauge__track{fill:none;stroke:rgba(255,255,255,.12);stroke-width:14;stroke-linecap:round} :is(.page-home-cohete,.page-home-cohete-2) .chz-gauge__arc{fill:none;stroke:var(--green);stroke-width:14;stroke-linecap:round;stroke-dasharray:0 1;filter:drop-shadow(0 0 8px rgba(0,234,140,.5))} :is(.page-home-cohete,.page-home-cohete-2) .chz-gauge__needle{stroke:#fff;stroke-width:3;stroke-linecap:round} :is(.page-home-cohete,.page-home-cohete-2) .chz-gauge__pivot{fill:#fff} :is(.page-home-cohete,.page-home-cohete-2) .chz-gauge__num{font-family:var(--head);font-weight:800;font-size:clamp(1.5rem,2.4vw,2.1rem);color:var(--green);margin-top:4px;font-variant-numeric:tabular-nums} :is(.page-home-cohete,.page-home-cohete-2) .chz-gauge__lab{font-family:var(--text);font-size:10px;letter-spacing:.18em;color:rgba(255,255,255,.65);margin-top:4px} :is(.page-home-cohete,.page-home-cohete-2) .chz-badge{font-family:var(--text);font-size:11px;letter-spacing:.2em;color:var(--green);margin:16px 0 0;opacity:0;transition:opacity .4s ease} :is(.page-home-cohete,.page-home-cohete-2) .chz-badge.is-on{opacity:1} :is(.page-home-cohete,.page-home-cohete-2) .chz-badge__dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(0,234,140,.9);margin-right:6px;animation:chz-pulse 1.6s ease-in-out infinite} @keyframes chz-pulse{0%,100%{opacity:1}50%{opacity:.45}} /* ---- ESCENA 5 · Tally (cifras + CTA) ---- */ :is(.page-home-cohete,.page-home-cohete-2) .chz-tally{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;background:radial-gradient(90% 80% at 50% 50%,rgba(13,8,40,.35),rgba(13,8,40,.72))} :is(.page-home-cohete,.page-home-cohete-2) .chz-tally__inner{max-width:920px;width:100%} :is(.page-home-cohete,.page-home-cohete-2) .chz-tally__big{font-family:var(--head);font-weight:800;font-size:clamp(2.6rem,7vw,5.2rem);letter-spacing:-.02em;line-height:1;color:#fff;margin:12px 0 0;text-shadow:0 4px 40px rgba(0,0,0,.5)} :is(.page-home-cohete,.page-home-cohete-2) .chz-tally__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px} :is(.page-home-cohete,.page-home-cohete-2) .chz-stat{background:rgba(22,14,60,.72);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px 10px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} :is(.page-home-cohete,.page-home-cohete-2) .chz-stat__v{display:block;font-family:var(--head);font-weight:800;font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.05;color:var(--green);font-variant-numeric:tabular-nums} :is(.page-home-cohete,.page-home-cohete-2) .chz-stat__l{display:block;font-family:var(--text);font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.75);margin-top:6px} :is(.page-home-cohete,.page-home-cohete-2) .chz-tally__cta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:30px} :is(.page-home-cohete,.page-home-cohete-2) .chz-tally .hc-btn--outline-light{color:#fff;border-color:rgba(255,255,255,.55)} /* ============================================================ PLAN DE VUELO — el método como trayectoria de despegue (post-secuencia). Desktop: 4 estaciones escalonadas en ascenso; la ruta punteada (el plan) cruza los 4 nodos y sobre ella cohete.js dibuja la trayectoria verde y pasea el cabezal (getPointAtLength → left/top en %, patrón escena 2). Móvil (≤900px): timeline vertical con raíl que crece por tramos. TODO va SCRUBBEADO por el scroll (cohete.js): línea + cabezal (desktop) y raíl --fill (móvil) siguen el progreso; cada step se enciende con .is-lit al alcanzar su umbral. Estados: BASE = final (sin JS/reduced todo encendido, raíl lleno vía --fill:1) · .chz-armed = JS activo (parte de --fill:0 y apaga los steps no encendidos hasta que el scroll los alcanza). ============================================================ */ :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe{position:relative;overflow:hidden;background:var(--ink-2,#1f1850)} /* estándar sección azul: fondo --ink-2 (footer) + cards --ink */ :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe::before{content:"";position:absolute;inset:0;pointer-events:none;background: radial-gradient(52% 44% at 84% 0%,rgba(0,234,140,.09),transparent 70%), radial-gradient(46% 40% at 4% 100%,rgba(254,100,114,.10),transparent 70%), repeating-linear-gradient(to top,rgba(255,255,255,.03) 0 1px,transparent 1px 92px)} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe>.hc-container{position:relative;z-index:1} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__stage{position:relative;margin-top:46px} /* cielo: ruta punteada del plan + trayectoria real que se dibuja + cabezal */ :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__sky{position:absolute;top:0;left:0;right:0;height:200px;pointer-events:none} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__traj{width:100%;height:100%;display:block;overflow:visible} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__traj-plan{display:none} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__traj-line{fill:none;stroke:var(--green);stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(0,234,140,.55))} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__head-dot{position:absolute;line-height:0;transform:translate(-50%,-50%);opacity:0;transition:opacity .45s ease;pointer-events:none;will-change:transform,left,top} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe-rocket{display:block;color:#fff;filter:drop-shadow(0 0 7px rgba(0,234,140,.95)) drop-shadow(0 0 16px rgba(0,234,140,.5))} /* escalonado ascendente: cada fase más arriba que la anterior */ :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin:0;padding:0;position:relative;z-index:1} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__step{--d:0s;--fill:1;position:relative;display:flex;flex-direction:column;align-items:center} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__step:nth-child(1){--d:.75s;margin-top:132px} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__step:nth-child(2){--d:1.05s;margin-top:92px} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__step:nth-child(3){--d:1.3s;margin-top:48px} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__step:nth-child(4){--d:1.6s;margin-top:0} /* estación: nodo con icono clavado en la trayectoria */ :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__node{position:relative;z-index:1;flex:none;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#160e42;border:1px solid rgba(0,234,140,.6);color:var(--green);box-shadow:0 0 18px rgba(0,234,140,.35),inset 0 0 12px rgba(0,234,140,.12);transition:border-color .45s ease,color .45s ease,box-shadow .45s ease} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe.chz-armed .chz-pipe__step:not(.is-lit) .chz-pipe__node{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.5);box-shadow:none} /* ficha de fase: panel glass de la familia .chz-panel + tick al nodo */ :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__card{position:relative;width:100%;margin-top:14px;background:var(--ink,#2d2270);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:20px 20px 18px;box-shadow:0 24px 50px -30px rgba(0,0,0,.55);transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1),border-color .3s ease,box-shadow .3s ease} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__card::before{content:"";position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:2px;height:14px;background:linear-gradient(to bottom,rgba(0,234,140,.55),rgba(0,234,140,.06))} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe.chz-armed .chz-pipe__step:not(.is-lit) .chz-pipe__card{opacity:0;transform:translateY(18px)} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe.chz-armed .chz-pipe__step{--fill:0} @media(hover:hover){ :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__card:hover{border-color:rgba(0,234,140,.45);box-shadow:0 24px 54px -26px rgba(0,0,0,.7),0 0 24px rgba(0,234,140,.14)} } /* número fantasma con trazo + contenido */ :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__num{position:absolute;top:8px;right:14px;z-index:0;font-family:var(--head);font-weight:800;font-size:48px;line-height:1;color:var(--green);opacity:.9;pointer-events:none;user-select:none} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__card h3{position:relative;z-index:1;font-size:1.12rem;margin:0 0 8px;padding-right:44px} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__card>p{position:relative;z-index:1;color:rgba(255,255,255,.78);font-size:.95rem;margin:0} /* KPI: barra de estado tipo mission-control */ /* .chz-pipe__card delante: (0,3,0) para ganar a `.chz-pipe__card>p{margin:0}` (0,2,1) */ :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__card .chz-pipe__kpi{position:relative;z-index:1;display:flex;align-items:center;gap:9px;margin:22px 0 0;padding:0;font-family:var(--text);font-size:10.5px;letter-spacing:.12em;color:#8ef8cd} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__kpi-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(0,234,140,.9);animation:chz-pulse 2.2s ease-in-out infinite} /* ≤900px: timeline vertical — nodo a la izquierda, raíl por tramos */ @media (max-width:900px){ :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__sky{display:none} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__stage{margin-top:34px} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__grid{display:block;max-width:640px} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__step:nth-child(n){flex-direction:row;align-items:flex-start;gap:16px;margin-top:22px} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__step:nth-child(1){--d:.15s;margin-top:0} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__step:nth-child(2){--d:.55s} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__step:nth-child(3){--d:.95s} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__step:nth-child(4){--d:1.35s} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__step:not(:last-child)::before{content:"";position:absolute;left:25px;top:26px;bottom:-48px;width:2px;background:rgba(255,255,255,.15)} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__step:not(:last-child)::after{content:"";position:absolute;left:25px;top:26px;bottom:-48px;width:2px;background:linear-gradient(to bottom,var(--green),rgba(0,234,140,.35));box-shadow:0 0 10px rgba(0,234,140,.35);transform-origin:top;transform:scaleY(var(--fill,0))} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__card{margin-top:0} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__card::before{display:none} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__num{font-size:44px} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__card h3{padding-right:40px} /* pill de estado a UNA sola línea en móvil: menos cuerpo y tracking. Prefijo .chz-pipe__card para ganar a `.chz-pipe__card>p{font-size:.95rem}` (la pill es un

hijo directo del card → si no, hereda 15.2px). */ :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__card .chz-pipe__kpi{font-size:9px;letter-spacing:.02em;gap:7px;padding:0} } /* ============================================================ CASO REAL — adaptado al contexto OSCURO de la home cohete. La sección .hc-section hereda el índigo #140c3d del body y su copy venía en colores oscuros (pensados para fondo claro de la home real) → oscuro sobre oscuro = ilegible (H2/lead/lista ~2.1:1, eyebrow coral 3.4:1, enlace 1.4:1, figcaption 3.1:1). Aquí se reviste con panel glass (familia .chz-panel) + texto claro AA holgado y la captura de Search Console (imagen clara) va en un marco blanco para que respire. Alcance SOLO esta página (clase .chz-case): no toca hera.css ni la home real. ============================================================ */ :is(.page-home-cohete,.page-home-cohete-2) .chz-case{position:relative;overflow:hidden;background:var(--ink-2,#1f1850)} /* mismo azul que el footer */ :is(.page-home-cohete,.page-home-cohete-2) .chz-case::before{content:"";position:absolute;inset:0;pointer-events:none;background: radial-gradient(50% 46% at 88% 6%,rgba(0,234,140,.08),transparent 70%), radial-gradient(48% 44% at 6% 96%,rgba(254,100,114,.10),transparent 72%)} :is(.page-home-cohete,.page-home-cohete-2) .chz-case>.hc-container{position:relative;z-index:1} /* panel glass que envuelve texto + figura (un solo bloque cohesivo) */ :is(.page-home-cohete,.page-home-cohete-2) .chz-case .hc-split{ background:var(--ink,#2d2270); /* mismo azul que el dorso de las cards del portfolio */ border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:clamp(24px,3.6vw,44px); box-shadow:0 30px 70px -30px rgba(0,0,0,.6)} /* textos: colores claros con contraste AA sobre el índigo */ :is(.page-home-cohete,.page-home-cohete-2) .chz-case .hc-eyebrow--coral{color:var(--coral)} /* #fe6472 · 6.5:1 */ :is(.page-home-cohete,.page-home-cohete-2) .chz-case .hc-section-title{color:#fff} /* 15:1 */ :is(.page-home-cohete,.page-home-cohete-2) .chz-case .hc-lead{color:rgba(255,255,255,.82)} :is(.page-home-cohete,.page-home-cohete-2) .chz-case .hc-lead strong{color:#fff} :is(.page-home-cohete,.page-home-cohete-2) .chz-case .hc-ck li{color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.14)} :is(.page-home-cohete,.page-home-cohete-2) .chz-case .hc-ck .hc-ic path{stroke:var(--green)} /* check verde brillante · gana al attr inline */ :is(.page-home-cohete,.page-home-cohete-2) .chz-case .hc-ck a{color:var(--green);text-decoration-color:rgba(0,234,140,.5)} /* #00ea8c · ~11:1 */ :is(.page-home-cohete,.page-home-cohete-2) .chz-case .hc-ck a:hover, :is(.page-home-cohete,.page-home-cohete-2) .chz-case .hc-ck a:focus-visible{color:#5affb4;text-decoration-color:currentColor} /* figura: marco blanco para que la captura clara de Search Console respire; figcaption en índigo sobre blanco = alto contraste */ :is(.page-home-cohete,.page-home-cohete-2) .chz-case .hc-figure{background:#fff;border-radius:16px;padding:14px 14px 12px;box-shadow:0 30px 66px -30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)} :is(.page-home-cohete,.page-home-cohete-2) .chz-case .hc-shot{border-color:var(--line);box-shadow:0 1px 0 rgba(45,34,112,.06)} :is(.page-home-cohete,.page-home-cohete-2) .chz-case .hc-figure figcaption{color:var(--coral-text)} /* #c82f44 sobre blanco · 5.3:1 */ /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:760px){ :is(.page-home-cohete,.page-home-cohete-2) .chz-hero__grid{padding:56px 16px 110px} :is(.page-home-cohete,.page-home-cohete-2) .chz-panel{padding:16px 16px} :is(.page-home-cohete,.page-home-cohete-2) .chz-ign{left:4%;right:4%;bottom:12%;max-width:none;padding:16px 18px} :is(.page-home-cohete,.page-home-cohete-2) .chz-traj{left:4%;right:4%;top:auto;bottom:9%;width:auto} :is(.page-home-cohete,.page-home-cohete-2) .chz-chart{height:140px} :is(.page-home-cohete,.page-home-cohete-2) .chz-rank{left:4%;right:4%;top:auto;bottom:9%;width:auto} :is(.page-home-cohete,.page-home-cohete-2) .chz-rank__rows{height:264px} :is(.page-home-cohete,.page-home-cohete-2) .chz-row{height:44px} :is(.page-home-cohete,.page-home-cohete-2) .chz-row__nm{width:82px;font-size:11px} :is(.page-home-cohete,.page-home-cohete-2) .chz-vitals{bottom:7%;max-width:94vw} :is(.page-home-cohete,.page-home-cohete-2) .chz-gauge{width:88px} :is(.page-home-cohete,.page-home-cohete-2) .chz-gauge__num{font-size:1.3rem} :is(.page-home-cohete,.page-home-cohete-2) .chz-tally__grid{grid-template-columns:repeat(2,1fr);gap:10px} :is(.page-home-cohete,.page-home-cohete-2) .chz-progress{bottom:78px} /* por encima de la wabar móvil (62px) */ :is(.page-home-cohete,.page-home-cohete-2) .chz-progress__track{width:110px} :is(.page-home-cohete,.page-home-cohete-2) .chz-cue{display:none} /* espacio justo en móvil: basta la barra de progreso */ .page-home-cohete-2 .chz-hero__mono{display:none} /* móvil variante 2: la línea "100% clientes · carga <3s · sin permanencia" no encaja en el hero estrecho */ .page-home-cohete-2 .chz-progress{display:none} /* móvil variante 2: se quita la barra "DESPEGUE / %"; la propia secuencia del cohete ya indica el scroll */ } /* ============================================================ REDUCED MOTION — estados finales estáticos, sin parpadeos (cohete.js añade .chz-reduced en y fija los valores finales) ============================================================ */ @media (prefers-reduced-motion:reduce){ :is(.page-home-cohete,.page-home-cohete-2) .chz-cue svg{animation:none} :is(.page-home-cohete,.page-home-cohete-2) .chz-badge__dot{animation:none} :is(.page-home-cohete,.page-home-cohete-2) .chz-row{transition:none} :is(.page-home-cohete,.page-home-cohete-2) .chz-ann{transition:none} :is(.page-home-cohete,.page-home-cohete-2) .chz-badge{transition:none} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__node, :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__card, :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__step::after{transition:none} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__kpi-dot{animation:none} :is(.page-home-cohete,.page-home-cohete-2) .chz-pipe__head-dot{display:none} } .chz-reduced :is(.page-home-cohete,.page-home-cohete-2) .chz-cue svg, html.chz-reduced body .chz-cue svg{animation:none} html.chz-reduced body .chz-badge__dot{animation:none} html.chz-reduced body .chz-row{transition:none} html.chz-reduced body .chz-ann{transition:none} html.chz-reduced body .chz-pipe__node, html.chz-reduced body .chz-pipe__card, html.chz-reduced body .chz-pipe__step::after{transition:none} html.chz-reduced body .chz-pipe__kpi-dot{animation:none} html.chz-reduced body .chz-pipe__head-dot{display:none} /* ============================================================ PORTFOLIO (home) — la banda hc-soft clara se fundía con las cards blancas. En ESTA página la sección va sobre el índigo de página (patrón chz-case): las cards blancas saltan del fondo. Solo aquí — diseno-web-seo y home borrador conservan la banda clara. ============================================================ */ :is(.page-home-cohete,.page-home-cohete-2) .hc-marquee-section{background:var(--ink-2,#1f1850)} /* mismo azul que el footer */ :is(.page-home-cohete,.page-home-cohete-2) .hc-marquee-section .hc-section-title{color:#fff} :is(.page-home-cohete,.page-home-cohete-2) .hc-marquee-section .hc-lead{color:rgba(255,255,255,.82)} :is(.page-home-cohete,.page-home-cohete-2) .hc-marquee-section .hc-eyebrow{color:var(--green)} :is(.page-home-cohete,.page-home-cohete-2) .hc-marquee-section .hc-btn--outline{color:#fff;border-color:rgba(255,255,255,.55);background:transparent} :is(.page-home-cohete,.page-home-cohete-2) .hc-marquee-section a.hc-btn--outline:hover, :is(.page-home-cohete,.page-home-cohete-2) .hc-marquee-section a.hc-btn--outline:focus-visible{background:#fff;color:var(--ink);border-color:#fff} :is(.page-home-cohete,.page-home-cohete-2) .hc-marquee-section .hc-pf-card{box-shadow:0 28px 60px -28px rgba(0,0,0,.65)} /* banda lavanda estándar (mismo fondo que reseñas .hc-reviews): la usan las secciones Servicios y Preguntas frecuentes de la home */ :is(.page-home-cohete,.page-home-cohete-2) .chz-svc-sec{background:#f1eefb} /* ============================================================ PRECIOS (home) — encendido neón secuencial de los importes al entrar la sección en viewport (cohete.js, IntersectionObserver). Mismo lenguaje que el "despega" del hero. Progresivo: sin JS (.chz-precios-armed ausente) los importes se ven normales; reduced-motion = encendido directo sin parpadeo. ============================================================ */ :is(.page-home-cohete,.page-home-cohete-2) .chz-precios.chz-precios-armed .hc-amt{opacity:.22;transition:opacity .3s ease} :is(.page-home-cohete,.page-home-cohete-2) .chz-precios .hc-price-card.chz-lit .hc-amt{ opacity:1; animation:chz-price-ignite 1.5s linear 1 both; text-shadow:0 0 6px rgba(51,255,168,.85),0 0 22px rgba(0,234,140,.5),0 2px 30px rgba(0,234,140,.3); } @keyframes chz-price-ignite{ 0%{opacity:.22;text-shadow:none} 38%{opacity:.28;text-shadow:none} 46%{opacity:1;text-shadow:0 0 8px rgba(51,255,168,.95),0 0 28px rgba(0,234,140,.65)} 54%{opacity:.4;text-shadow:none} 62%{opacity:1;text-shadow:0 0 8px rgba(51,255,168,.95),0 0 28px rgba(0,234,140,.65)} 70%{opacity:.75;text-shadow:0 0 4px rgba(51,255,168,.5)} 100%{opacity:1;text-shadow:0 0 6px rgba(51,255,168,.85),0 0 22px rgba(0,234,140,.5),0 2px 30px rgba(0,234,140,.3)} } @media (prefers-reduced-motion:reduce){ :is(.page-home-cohete,.page-home-cohete-2) .chz-precios.chz-precios-armed .hc-amt{opacity:1} :is(.page-home-cohete,.page-home-cohete-2) .chz-precios .hc-price-card.chz-lit .hc-amt{animation:none} } html.chz-reduced body .chz-precios.chz-precios-armed .hc-amt{opacity:1} html.chz-reduced body .chz-precios .hc-price-card.chz-lit .hc-amt{animation:none} /* ============================================================ SERVICIOS (home) — cards con la imagen de hero de cada servicio. Toda la card es clicable (); la imagen hace un zoom suave al hover y la card se eleva con borde verde. ============================================================ */ :is(.page-home-cohete,.page-home-cohete-2) .chz-svc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;text-decoration:none;color:var(--body);transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s ease,box-shadow .3s ease} :is(.page-home-cohete,.page-home-cohete-2) .chz-svc:hover{transform:translateY(-5px);border-color:rgba(0,180,110,.55);box-shadow:0 28px 56px -26px rgba(45,34,112,.35)} :is(.page-home-cohete,.page-home-cohete-2) .chz-svc__media{display:block;overflow:hidden;aspect-ratio:16/9;position:relative} /* pátina CRT ligera (pariente del filtro del hero, versión estática solo-CSS: scanlines + fósforo RGB + viñeta en un ::after; sin grano/roll/flicker/JS) */ :is(.page-home-cohete,.page-home-cohete-2) .chz-svc__media::after{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(ellipse at center, transparent 55%, rgba(8,5,28,.34) 100%), repeating-linear-gradient(to bottom, rgba(4,2,16,.18) 0, rgba(4,2,16,.18) 1px, transparent 1px, transparent 3px), repeating-linear-gradient(to right, rgba(255,70,70,.03) 0, rgba(255,70,70,.03) 1px, rgba(70,255,140,.025) 1px, rgba(70,255,140,.025) 2px, rgba(80,140,255,.03) 2px, rgba(80,140,255,.03) 3px); } /* zoom "de acercamiento" anclado a la derecha: los heros tienen la izquierda en calma y el objeto a la derecha → el hover entra en la escena */ :is(.page-home-cohete,.page-home-cohete-2) .chz-svc__media img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:100% 50%;transition:transform .8s cubic-bezier(.22,1,.36,1)} /* numeral grande sobre la imagen (z-index:1 → por encima de la pátina CRT) */ :is(.page-home-cohete,.page-home-cohete-2) .chz-svc__num{position:absolute;top:8px;left:16px;z-index:1;font-family:var(--head);font-weight:800;font-size:52px;line-height:1;color:#fff;text-shadow:0 2px 14px rgba(8,5,28,.55);pointer-events:none;user-select:none} :is(.page-home-cohete,.page-home-cohete-2) .chz-svc:hover .chz-svc__media img{transform:scale(1.6)} :is(.page-home-cohete,.page-home-cohete-2) .chz-svc__body{display:flex;flex-direction:column;gap:12px;padding:20px 22px 20px;flex:1} :is(.page-home-cohete,.page-home-cohete-2) .chz-svc__body h3{margin:0;color:var(--ink);font-size:1.22rem} :is(.page-home-cohete,.page-home-cohete-2) .chz-svc__body p{margin:0;flex:1;font-size:.95rem} :is(.page-home-cohete,.page-home-cohete-2) .chz-svc__link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem;color:var(--green-text,#00794f)} :is(.page-home-cohete,.page-home-cohete-2) .chz-svc__link .hc-ar{width:18px;height:18px;flex:none;transition:transform .3s ease} :is(.page-home-cohete,.page-home-cohete-2) .chz-svc:hover .hc-ar{transform:translateX(4px)} /* banda CTA a ancho completo bajo el grid */ :is(.page-home-cohete,.page-home-cohete-2) .chz-svc-cta{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;margin-top:26px;padding:26px 30px;background:var(--ink);border-radius:var(--r);box-shadow:var(--shadow)} :is(.page-home-cohete,.page-home-cohete-2) .chz-svc-cta h3{margin:0 0 6px;color:#fff;font-size:1.25rem} :is(.page-home-cohete,.page-home-cohete-2) .chz-svc-cta p{margin:0;color:rgba(255,255,255,.82);font-size:.97rem} :is(.page-home-cohete,.page-home-cohete-2) .chz-svc-cta .hc-btn{flex:none} @media (prefers-reduced-motion:reduce){ :is(.page-home-cohete,.page-home-cohete-2) .chz-svc, :is(.page-home-cohete,.page-home-cohete-2) .chz-svc__media img, :is(.page-home-cohete,.page-home-cohete-2) .chz-svc__link .hc-ar{transition:none} } /* ============================================================ FILTRO CRT — monitor de tubo. ESTADO ACTUAL (2026-07-23): SUAVIZADO al nivel de las cards de servicios. Solo quedan ACTIVOS los ingredientes 1 (scanlines+fósforo) y 2 (viñeta), ambos ESTÁTICOS. Desactivados: 3 roll, 4 aberración RGB, 5 flicker, 6 grano (buscar "CRT MARCADO — desactivado" para reactivar cada uno). .chz-crt = PRIMER hijo del overlay (sin data-from: el runtime no lo toca; queda pineado con la sticky todo el recorrido). Sin z-index → pinta POR DEBAJO del copy y de las cifras (orden DOM): legibilidad intacta. Todas las capas pointer-events:none (los CTAs siguen vivos). Ingredientes y dónde vive cada uno: 1 scanlines → .chz-crt::before (repeating-linear-gradient horiz. + máscara de fósforo RGB vertical de 3px, estática) 2 vignette + → .chz-crt::after (radial oscuro en bordes + inset curvatura shadow) y border-radius en la "pantalla" real (.scroll-seq__sticky, ya recorta con overflow:hidden) 3 roll → .chz-crt__roll (banda de brillo, translateY en bucle) 4 aberración → filtro SVG #chz-crt-ab (en home-cohete.html) sobre RGB el canvas: feColorMatrix aísla R y GB, feOffset los separa ±dx, feBlend screen recompone. cohete.js copia --crt-rgb-shift a los dx una vez al cargar. 5 flicker → .chz-crt__flicker (opacity a saltos, amplitud baja) 6 grano → .chz-crt__grain (feTurbulence como data-URI que se reposiciona a saltos con transform) Solo transform/opacity animados (compositor GPU): el scrubbing del canvas no se ve afectado. Intensidades ajustables en las variables ↓ ============================================================ */ :is(.page-home-cohete,.page-home-cohete-2){ /* CRT SUAVIZADO (2026-07-23): mismo tratamiento que las cards de servicios — solo scanlines + fósforo RGB + viñeta ESTÁTICOS. Grano, flicker (el "parpadeo"), roll y la aberración cromática del canvas quedan DESACTIVADOS abajo. Para volver al CRT marcado: subir estos valores, reactivar .chz-crt__grain/__flicker y el filter del canvas (todo con marca "CRT MARCADO — desactivado"). */ --crt-scanline-opacity:.18; /* alpha de las líneas de barrido (nivel card) */ --crt-scanline-step:3px; /* período: 1px de línea + hueco */ --crt-vignette:.34; /* alpha máx. del oscurecido de bordes (nivel card) */ --crt-rgb-shift:2.2px; /* (sin uso: aberración desactivada) */ --crt-flicker:.055; /* (sin uso: flicker desactivado) */ --crt-grain:.14; /* (sin uso: grano desactivado) */ --crt-roll:.09; /* (sin uso: roll desactivado) */ --crt-curve:clamp(14px,2.4vw,32px) /* radio del "abombado" del tubo (se mantiene) */ } /* pantalla curvada: la sticky ES el tubo (overflow:hidden en sequence.css recorta el canvas contra el radio; las esquinas muestran el índigo de página a modo de bisel). Aberración RGB sobre el vídeo del cohete. */ :is(.page-home-cohete,.page-home-cohete-2) .scroll-seq__sticky{border-radius:var(--crt-curve)} /* CRT MARCADO — desactivado (2026-07-23): la aberración cromática RGB sobre el canvas se reejecutaba en cada frame del scrub (mayor coste GPU) y reforzaba el look "tubo". Las cards de servicios no la llevan. Reactivar: filter:url(#chz-crt-ab) */ :is(.page-home-cohete,.page-home-cohete-2) .scroll-seq__canvas{filter:none} :is(.page-home-cohete,.page-home-cohete-2) .chz-crt{position:absolute;inset:0;pointer-events:none} /* 1 · scanlines + fósforo RGB (estático, cero repaints) */ :is(.page-home-cohete,.page-home-cohete-2) .chz-crt::before{ content:"";position:absolute;inset:0;pointer-events:none; background: repeating-linear-gradient(to bottom, rgba(4,2,16,var(--crt-scanline-opacity)) 0, rgba(4,2,16,var(--crt-scanline-opacity)) 1px, transparent 1px,transparent var(--crt-scanline-step)), repeating-linear-gradient(to right, rgba(255,70,70,.03) 0,rgba(255,70,70,.03) 1px, rgba(70,255,140,.025) 1px,rgba(70,255,140,.025) 2px, rgba(80,140,255,.03) 2px,rgba(80,140,255,.03) 3px); } /* 2 · vignette SUAVE (nivel card, 2026-07-23): radial ligero en los bordes. Antes: viñeta fuerte + sombra interna del tubo + fringes rojo/cian (estos reforzaban la aberración, ya desactivada). Se conserva el border-radius. */ :is(.page-home-cohete,.page-home-cohete-2) .chz-crt::after{ content:"";position:absolute;inset:0;pointer-events:none; border-radius:var(--crt-curve); background:radial-gradient(ellipse at center, transparent 55%, rgba(8,5,28,var(--crt-vignette)) 100%); } /* 6 · grano: ruido feTurbulence en data-URI; desborda 32px para poder reposicionarse a saltos (steps) sin descubrir bordes. GPU: solo transform. CRT MARCADO — desactivado (2026-07-23): las cards no llevan grano. El grano animado (steps) creaba sensación de "hormigueo". Reactivar: quitar display:none. */ :is(.page-home-cohete,.page-home-cohete-2) .chz-crt__grain{ display:none; position:absolute;inset:-32px;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:260px 260px; opacity:var(--crt-grain); animation:chz-crt-grain .7s steps(1,end) infinite; will-change:transform; } @keyframes chz-crt-grain{ 0%,100%{transform:translate(0,0)} 10%{transform:translate(-14px,9px)} 20%{transform:translate(22px,-7px)} 30%{transform:translate(-9px,21px)} 40%{transform:translate(16px,14px)} 50%{transform:translate(-24px,-12px)} 60%{transform:translate(11px,-19px)} 70%{transform:translate(-17px,-6px)} 80%{transform:translate(20px,10px)} 90%{transform:translate(-6px,-16px)} } /* 3 · roll: banda de brillo que baja en bucle. Alto = 30% de la pantalla; 433% de su propio alto ≈ recorrido completo (30% arriba → 100% + 30% abajo). */ :is(.page-home-cohete,.page-home-cohete-2) .chz-crt__roll{ /* Banda de barrido (onda que recorría de arriba a abajo) desactivada a petición del usuario (2026-07-11). El resto del CRT se mantiene. */ display:none; position:absolute;left:0;right:0;top:-30%;height:30%;pointer-events:none; background:linear-gradient(to bottom, transparent,rgba(214,255,238,var(--crt-roll)) 52%,transparent); animation:chz-crt-roll 8s linear infinite; will-change:transform; } @keyframes chz-crt-roll{to{transform:translateY(433.4%)}} /* 5 · flicker: caídas breves e irregulares de brillo (capa oscura cuya opacity salta con steps). CRT MARCADO — desactivado (2026-07-23): ESTE era el "parpadeo de pantalla" que molestaba. Las cards no lo llevan. Reactivar: quitar display:none. */ :is(.page-home-cohete,.page-home-cohete-2) .chz-crt__flicker{ display:none; position:absolute;inset:0;pointer-events:none; background:#070313;opacity:0; animation:chz-crt-flicker 2.4s steps(1,end) infinite; } @keyframes chz-crt-flicker{ 0%{opacity:0} 6%{opacity:calc(var(--crt-flicker)*.55)} 9%{opacity:0} 14%{opacity:var(--crt-flicker)} 16%{opacity:calc(var(--crt-flicker)*.25)} 22%{opacity:0} 34%{opacity:calc(var(--crt-flicker)*.8)} 36%{opacity:0} 51%{opacity:calc(var(--crt-flicker)*.35)} 54%{opacity:0} 63%{opacity:var(--crt-flicker)} 66%{opacity:0} 78%{opacity:calc(var(--crt-flicker)*.5)} 81%{opacity:0} 92%{opacity:calc(var(--crt-flicker)*.9)} 95%{opacity:0} } /* CRT · reduced-motion: fuera roll/flicker/grano animado; quedan scanlines y vignette estáticos y suavizados (mismo patrón doble que el resto del archivo) */ @media (prefers-reduced-motion:reduce){ :is(.page-home-cohete,.page-home-cohete-2){--crt-scanline-opacity:.16;--crt-vignette:.42} :is(.page-home-cohete,.page-home-cohete-2) .chz-crt__roll, :is(.page-home-cohete,.page-home-cohete-2) .chz-crt__flicker{display:none} :is(.page-home-cohete,.page-home-cohete-2) .chz-crt__grain{animation:none;opacity:calc(var(--crt-grain)*.5)} } html.chz-reduced body:is(.page-home-cohete,.page-home-cohete-2){--crt-scanline-opacity:.16;--crt-vignette:.42} html.chz-reduced body .chz-crt__roll, html.chz-reduced body .chz-crt__flicker{display:none} html.chz-reduced body .chz-crt__grain{animation:none;opacity:calc(var(--crt-grain)*.5)} /* ============================================================ WABAR sobre el vídeo-scroll — mientras el .scroll-seq llena la pantalla (body.chz-seq-covering, lo pone cohete.js) deslizamos fuera la barra fija de WhatsApp para que no tape el cohete. En móvil .hc-wabar es la que se ve; en desktop ya es display:none, así que esto es efectivamente solo móvil. ============================================================ */ :is(.page-home-cohete,.page-home-cohete-2) .hc-wabar{transition:transform .3s ease,opacity .3s ease} body:is(.page-home-cohete,.page-home-cohete-2).chz-seq-covering .hc-wabar{transform:translateY(120%);opacity:0;pointer-events:none}