de esta página: el header y el banner de cookies mantienen los botones del resto del sitio) Rectos, sin bordes laterales: solo dos filetes finos arriba y abajo que se desvanecen hacia los costados (mask). En el hover los filetes se extienden de lado a lado y los recorre el barrido azul → teal del sitio (mismo gradiente que porqueLineSweep en styles.css). ===================================================================== */ .ct-page main .btn{ --ct-line:linear-gradient(90deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.5) 32%, var(--wave-teal) 46%, #eafffb 50%, var(--wave-teal) 54%, rgba(255,255,255,.5) 68%, rgba(255,255,255,.5) 100%); position:relative; padding:17px 34px; border:0; border-radius:0; font-weight:600; letter-spacing:.015em; box-shadow:none; isolation:isolate; } .ct-page main .btn::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background-image:var(--ct-line), var(--ct-line); background-size:300% 1px, 300% 1px; background-repeat:repeat-x; background-position:200% 0, 200% 100%; -webkit-mask-image:linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image:linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); opacity:.75; transform:scaleX(.86); transition:transform .8s var(--ease-out-expo), opacity .4s ease; } .ct-page main .btn:hover::before, .ct-page main .btn:focus-visible::before{ opacity:1; transform:none; animation:ctBtnSweep 2.8s cubic-bezier(.83,0,.17,1) infinite; } @keyframes ctBtnSweep{ from{background-position:200% 0, 200% 100%;} to{background-position:-100% 0, -100% 100%;} } .ct-page main .btn:focus-visible{outline:1px solid var(--accent-hot);outline-offset:6px;} /* Primario: bloque sólido; los filetes flotan 6px por fuera, arriba y abajo. Se cambia overflow:hidden (styles.css, para el reflejo ::after) por un clip-path que recorta solo los costados. */ .ct-page main .btn-primary{ --ct-line:linear-gradient(90deg, rgba(91,141,255,.8) 0%, rgba(91,141,255,.8) 32%, var(--wave-teal) 46%, #eafffb 50%, var(--wave-teal) 54%, rgba(91,141,255,.8) 68%, rgba(91,141,255,.8) 100%); background:var(--accent); overflow:visible; clip-path:inset(-7px 0); } .ct-page main .btn-primary::before{inset:-6px 0;} .ct-page main .btn-primary:hover{background:#3a7af5;box-shadow:none;} .ct-page main .btn-outline{background:transparent;color:var(--white);} .ct-page main .btn-outline:hover{background:rgba(255,255,255,.035);color:var(--white);box-shadow:none;} /* ===================================================================== 3. HERO ===================================================================== */ .ct-hero{ position:relative; padding:118px 0 40px; } .ct-hero-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; } /* Entrada en cascada al cargar (--d) */ .ct-in{ opacity:0; animation:ctUp 1s var(--ease-out-expo) both; animation-delay:calc(var(--d,0) * 90ms + 120ms); } @keyframes ctUp{ from{opacity:0;transform:translateY(22px);} to{opacity:1;transform:none;} } .ct-title{ font-size:clamp(2.35rem,9.6vw,4.2rem); line-height:1.02; letter-spacing:-.035em; margin:6px 0 22px; } /* Cada línea sube desde detrás de una máscara. Se anima la línea entera (no palabra por palabra) para que Google Translate traduzca la frase. */ .ct-line{display:block;overflow:hidden;padding:.06em .04em .1em;margin:-.06em -.04em -.1em;} .ct-line > span{ display:inline-block; transform:translateY(105%); animation:ctLine 1.15s var(--ease-out-expo) both; animation-delay:calc(var(--d,0) * 110ms + 200ms); } @keyframes ctLine{to{transform:none;}} .ct-title .text-accent{ background:linear-gradient(100deg,var(--accent-hot) 0%,var(--wave-teal) 60%,var(--accent-hot) 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:ctLine 1.15s var(--ease-out-expo) both, ctShimmer 7s ease-in-out 1.6s infinite; animation-delay:calc(var(--d,0) * 110ms + 200ms), 1.6s; } @keyframes ctShimmer{ 0%,100%{background-position:0% 0;} 50%{background-position:100% 0;} } .ct-lead{font-size:1.04rem;max-width:560px;} .ct-hero-cta{ display:flex; flex-direction:column; gap:14px; margin-top:32px; } .ct-hero-cta .btn{width:100%;} /* Nota bajo los botones: un filete corto en vez de un punto luminoso */ .ct-free{ display:flex; align-items:center; gap:12px; margin-top:22px; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2px; color:var(--gray-soft); } .ct-free::before{ content:''; width:22px;height:1px;flex-shrink:0; background:var(--gray-mid); } /* ---------- Escalera isométrica ---------- */ .ct-climb{ position:relative; width:100%; max-width:430px; margin:0 auto; } .ct-climb svg{display:block;width:100%;height:auto;overflow:visible;} .ct-climb-floor{stroke:rgba(255,255,255,.12);stroke-width:1;stroke-dasharray:2 5;} /* Cada peldaño sube desde abajo, en orden (--s) */ .ct-st{ transform-box:fill-box; animation:ctRise 1s var(--ease-out-expo) both; animation-delay:calc(var(--s,0) * 130ms + 450ms); } @keyframes ctRise{ from{opacity:0;transform:translateY(26px);} to{opacity:1;transform:none;} } .ct-st-side{fill:#0b0b10;stroke:rgba(255,255,255,.07);stroke-width:.8;} .ct-st-riser{fill:#111118;stroke:rgba(255,255,255,.1);stroke-width:.8;} /* Las huellas ganan intensidad a medida que se sube */ .ct-st-top{ fill:url(#ctTopGrad); fill-opacity:calc(.16 + var(--s,0) * .13); stroke:rgba(234,255,251,.45); stroke-width:.8; stroke-linejoin:round; } .ct-st-labels path{stroke:rgba(255,255,255,.22);stroke-width:1;} .ct-st-labels text{ font-family:var(--font-sans); font-size:10.5px; font-weight:500; letter-spacing:.2px; text-anchor:end; fill:var(--gray-mid); } .ct-st-labels g{ animation:ctFade .8s ease both; animation-delay:calc(var(--s,0) * 130ms + 750ms); } .ct-st-labels g:last-child text{fill:var(--wave-teal);} @keyframes ctFade{from{opacity:0;}to{opacity:1;}} .ct-climb-draw{ stroke-dasharray:1; stroke-dashoffset:1; animation:ctDraw 1.7s var(--ease-out-expo) 1.35s both; } @keyframes ctDraw{to{stroke-dashoffset:0;}} .ct-summit{ transform-box:fill-box; transform-origin:50% 100%; animation:ctSummit .9s var(--ease-out-expo) 2.4s both; } @keyframes ctSummit{ from{opacity:0;transform:scaleY(0);} to{opacity:1;transform:none;} } .ct-summit-mark{fill:#0a0a0c;stroke:#eafffb;stroke-width:1.2;} /* Al bajar, la escalera se aleja con el scroll (sin JS) */ @supports (animation-timeline: scroll()){ .ct-climb-scroll{ animation:ctClimbScroll linear both; animation-timeline:scroll(root); animation-range:0 70svh; } @keyframes ctClimbScroll{ to{transform:translateY(-36px) scale(.94);opacity:.25;} } } /* ===================================================================== 4. COMPROMISOS (bento asimétrico) ===================================================================== */ .ct-promises{position:relative;padding:40px 0 30px;} .ct-promises .section-header{margin-bottom:30px;} .ct-bento{display:grid;grid-template-columns:1fr;gap:14px;} .ct-card{ position:relative; padding:26px 24px; border-radius:8px; border:1px solid var(--border-soft); background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)); overflow:hidden; transition:border-color .4s ease, background .4s ease; } .ct-card::after{ content:''; position:absolute; left:24px;right:24px;top:0; height:1px; background:linear-gradient(90deg,transparent,var(--accent-hot),var(--wave-teal),transparent); transform:scaleX(0); transition:transform .9s var(--ease-out-expo); } .ct-card:hover{border-color:var(--border-soft-hover);} .ct-card:hover::after, .ct-card.reveal-done::after{transform:scaleX(1);} .ct-card h3{font-size:1.12rem;letter-spacing:-.015em;margin-bottom:8px;} .ct-card p{font-size:.9rem;line-height:1.7;} .ct-card-own{ border-color:rgba(91,141,255,.24); background: radial-gradient(90% 80% at 100% 100%, rgba(31,201,195,.1), transparent 60%), radial-gradient(100% 90% at 0% 0%, rgba(47,111,237,.16), transparent 60%), var(--bg-card); } .ct-card-own h3{font-size:clamp(1.35rem,5vw,1.75rem);letter-spacing:-.025em;margin-bottom:12px;} .ct-card-ico{ width:48px;height:48px; border-radius:4px; display:grid;place-items:center; margin-bottom:22px; color:var(--accent-hot); background:rgba(47,111,237,.12); border:1px solid rgba(91,141,255,.25); transition:transform .6s var(--ease-smooth); } .ct-card-ico svg{width:24px;height:24px;} .ct-card-own:hover .ct-card-ico{transform:rotate(-12deg) scale(1.05);} /* Filas tipo "título de propiedad": qué es tuyo y en qué condición */ .ct-own-list{ list-style:none; margin-top:24px; border-top:1px solid var(--border-soft); } .ct-own-list li{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 2px; border-bottom:1px dashed var(--border-soft-hover); } .ct-own-list span{font-size:.92rem;font-weight:600;color:var(--white);} .ct-own-list em{ display:inline-flex; align-items:center; gap:8px; font-style:normal; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.6px; text-transform:uppercase; color:var(--wave-teal); text-align:right; } .ct-own-list em::before{ content:''; flex-shrink:0; width:4px;height:8px; border-right:1.6px solid var(--wave-teal); border-bottom:1.6px solid var(--wave-teal); transform:rotate(45deg) translateY(-2px); } /* Cada fila se "firma" en cascada cuando la tarjeta termina de entrar */ .ct-js .ct-own-list li{opacity:0;transform:translateX(-10px);transition:opacity .6s ease, transform .8s var(--ease-out-expo);} .ct-js .ct-card-own.show .ct-own-list li{opacity:1;transform:none;} .ct-card-own.show .ct-own-list li:nth-child(1){transition-delay:.35s;} .ct-card-own.show .ct-own-list li:nth-child(2){transition-delay:.45s;} .ct-card-own.show .ct-own-list li:nth-child(3){transition-delay:.55s;} .ct-card-own.show .ct-own-list li:nth-child(4){transition-delay:.65s;} .ct-card-fig{ display:flex; align-items:baseline; gap:8px; margin-bottom:14px; } .ct-big{ font-size:3.2rem; font-weight:800; line-height:.9; letter-spacing:-.05em; background:linear-gradient(135deg,var(--white) 30%,var(--accent-hot)); -webkit-background-clip:text; background-clip:text; color:transparent; } .ct-card-fig small{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:1.2px; text-transform:uppercase; color:var(--gray-mid); } /* ===================================================================== 5. EL RECORRIDO ===================================================================== */ .ct-journey{position:relative;z-index:2;padding:50px 0 70px;} .ct-journey .section-header{margin-bottom:34px;} .ct-journey-grid{position:relative;} /* Columna izquierda (medidor + índice + torre): sólo desktop */ .ct-index{display:none;} /* ---------- Medidor de ascenso ---------- */ .ct-alt{ display:flex; align-items:stretch; gap:18px; margin-bottom:28px; } /* Seis niveles apilados: el primero abajo (column-reverse) */ .ct-alt-gauge{ display:flex; flex-direction:column-reverse; justify-content:space-between; width:28px; height:84px; flex-shrink:0; padding:2px 0; } .ct-alt-gauge i{ display:block; width:12px;height:2px; background:var(--border-soft-hover); transition:width .6s var(--ease-out-expo), background .5s ease; } .ct-alt-gauge i.is-on{width:18px;background:linear-gradient(90deg,var(--accent-hot),var(--wave-teal));} .ct-alt-gauge i.is-now{width:28px;background:#eafffb;} .ct-alt-read{display:flex;flex-direction:column;justify-content:flex-end;min-width:0;} .ct-alt-count{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gray-mid); } .ct-alt-count b{color:var(--accent-hot);font-weight:600;} .ct-alt-name{ display:block; margin-top:8px; font-size:1.6rem; font-weight:700; line-height:1.1; letter-spacing:-.03em; color:var(--white); } /* Al cambiar de etapa, el nombre entra desde abajo (como-trabajo.js re-dispara la animación con .is-flip) */ .ct-alt-name.is-flip{animation:ctFlip .6s var(--ease-out-expo) both;} @keyframes ctFlip{ from{transform:translateY(40%);opacity:0;} to{transform:none;opacity:1;} } /* ---------- Índice ---------- */ .ct-index-list{list-style:none;display:grid;gap:2px;} .ct-index-list a{ position:relative; display:flex; align-items:center; gap:14px; padding:8px 0; font-size:.9rem; line-height:1.35; color:var(--gray-mid); transition:color .35s ease; } .ct-index-list a::before{ content:''; flex-shrink:0; width:8px;height:1px; background:currentColor; transition:width .5s var(--ease-out-expo), background .35s ease; } .ct-index-list a:hover{color:var(--white);} .ct-index-list a.is-past{color:var(--gray-soft);} .ct-index-list a.is-past::before{background:var(--wave-teal);} .ct-index-list a.is-active{color:var(--white);} .ct-index-list a.is-active::before{width:22px;background:var(--accent-hot);} /* ---------- Torre (póster SVG + WebGL) ---------- */ .ct-tower{ position:relative; margin-top:auto; width:100%; max-width:230px; aspect-ratio:254 / 290; min-height:0; flex-shrink:1; } .ct-tower-poster{ display:block; width:100%;height:100%; transition:opacity .9s ease; } .ct-lv{ transform-box:fill-box; transform-origin:50% 100%; opacity:.5; transform:translateY(-6px); transition:opacity .7s ease, transform .9s var(--ease-out-expo); } .ct-lv-top{fill:rgba(255,255,255,.015);stroke:rgba(255,255,255,.16);stroke-width:1;stroke-linejoin:round;} .ct-lv-side{fill:rgba(255,255,255,.01);stroke:rgba(255,255,255,.08);stroke-width:1;} .ct-lv.is-on{opacity:1;transform:none;} .ct-lv.is-on .ct-lv-top{fill:url(#ctLvGrad);fill-opacity:.4;stroke:rgba(234,255,251,.6);} .ct-lv.is-on .ct-lv-side{fill:rgba(47,111,237,.3);stroke:rgba(91,141,255,.4);} .ct-tower canvas{ position:absolute; inset:0; width:100%;height:100%; opacity:0; transition:opacity 1.1s ease; } .ct-tower.is-3d canvas{opacity:1;} .ct-tower.is-3d .ct-tower-poster{opacity:0;} /* ---------- Barra compacta mobile/tablet ---------- */ .ct-mbar{ position:sticky; top:78px; z-index:6; display:flex; align-items:center; gap:14px; width:fit-content; max-width:100%; margin:0 0 22px; padding:10px 16px; border-radius:3px; border:1px solid var(--border-soft-hover); background:rgba(12,12,16,.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 10px 30px -12px rgba(0,0,0,.7); overflow:hidden; } .ct-mbar::after{ content:''; position:absolute; left:0;right:0;bottom:0; height:1px; background:linear-gradient(90deg,var(--accent-hot),var(--wave-teal)); transform-origin:left; transform:scaleX(var(--p,0)); } .ct-mbar-num{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-mid); white-space:nowrap; padding-right:14px; border-right:1px solid var(--border-soft-hover); } .ct-mbar-num b{color:var(--accent-hot);font-weight:600;} .ct-mbar-name{ font-size:.86rem; font-weight:600; color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ct-mbar-name.is-flip{animation:ctFlip .5s var(--ease-out-expo) both;} /* ===================================================================== 6. RIEL, NODOS Y ETAPAS ===================================================================== */ .ct-steps{ --gut:34px; position:relative; padding-left:var(--gut); } /* El riel va del centro del primer nodo al del último (top/height los calcula como-trabajo.js; sin JS, cubre toda la columna). */ .ct-rail{ position:absolute; left:9px; top:38.5px; bottom:40px; width:1px; background:var(--border-soft-hover); } .ct-rail-fill{ position:absolute; inset:0 -.5px; background:linear-gradient(180deg,var(--accent-hot),var(--wave-teal) 70%,var(--accent)); transform-origin:top; transform:scaleY(var(--p,0)); } .ct-js .ct-rail-fill{will-change:transform;} .ct-step{ position:relative; padding:26px 22px 28px; margin-bottom:18px; border-radius:8px; border:1px solid var(--border-soft); background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008)); scroll-margin-top:150px; transition:border-color .6s ease, background .6s ease; } .ct-step:last-child{margin-bottom:0;} /* Filete superior que se enciende en la etapa activa */ .ct-step::before{ content:''; position:absolute; left:22px;right:22px;top:-1px; height:1px; background:linear-gradient(90deg,transparent,var(--accent-hot),var(--wave-teal),transparent); transform:scaleX(0); transition:transform .9s var(--ease-out-expo); } .ct-step.is-active{ border-color:rgba(91,141,255,.3); background: radial-gradient(120% 90% at 0% 0%, rgba(47,111,237,.09), transparent 60%), linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)); } .ct-step.is-active::before{transform:scaleX(1);} /* Nodo sobre el riel: un rombo, alineado con la línea "Etapa N" */ .ct-node{ position:absolute; left:calc(9.5px - 5px - var(--gut)); top:33.5px; width:10px;height:10px; background:var(--bg-black); border:1px solid rgba(255,255,255,.3); transform:rotate(45deg); transition:border-color .5s ease, background .5s ease, transform .5s var(--ease-smooth); } .ct-step.is-past .ct-node{border-color:var(--wave-teal);background:var(--wave-teal);} .ct-step.is-active .ct-node{ border-color:var(--accent-hot); background:var(--accent-hot); transform:rotate(45deg) scale(1.3); } .ct-step-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; } /* "Etapa N": versalitas mono con un filete que se alarga al activarse. En la etapa activa el texto toma el brillo del link "Portfolio Animado" del navbar (@keyframes navShine en styles.css). */ .ct-step-kicker{ display:inline-flex; align-items:center; gap:12px; font-family:var(--font-mono); font-size:.7rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--gray-mid); transition:color .5s ease; } .ct-step-kicker::before{ content:''; width:18px;height:1px; background:var(--gray-mid); transition:width .7s var(--ease-out-expo), background .5s ease; } .ct-step.is-past .ct-step-kicker{color:var(--wave-teal);} .ct-step.is-past .ct-step-kicker::before{background:var(--wave-teal);} .ct-step.is-active .ct-step-kicker::before{width:34px;background:var(--accent-hot);} .ct-step.is-active .ct-step-kicker{color:var(--accent-hot);} @supports ((background-clip:text) or (-webkit-background-clip:text)){ .ct-step.is-active .ct-step-kicker{ background-image:linear-gradient(100deg, var(--accent-hot) 0%, var(--accent-hot) 40%, #fff 48%, var(--wave-teal) 52%, #fff 56%, var(--accent-hot) 64%, var(--accent-hot) 100%); background-size:220% 100%; background-position:200% 0; -webkit-background-clip:text; background-clip:text; color:transparent; animation:navShine 6s ease-in-out infinite; } } .ct-tag{ display:inline-flex; align-items:center; padding:6px 11px; border-radius:2px; border:1px solid var(--border-soft-hover); background:rgba(255,255,255,.025); font-family:var(--font-mono); font-size:.62rem; letter-spacing:.6px; text-transform:uppercase; color:var(--gray-soft); white-space:nowrap; } .ct-tag-opt{border-color:rgba(31,201,195,.4);color:var(--wave-teal);background:rgba(31,201,195,.07);} .ct-step h3{ font-size:clamp(1.3rem,4.6vw,1.6rem); letter-spacing:-.02em; margin-bottom:10px; } .ct-step > p{font-size:.95rem;line-height:1.72;} /* Lo que se obtiene en cada etapa */ .ct-gets{list-style:none;display:grid;gap:9px;margin-top:18px;padding-top:16px;border-top:1px dashed var(--border-soft);} .ct-gets li{ position:relative; padding-left:26px; font-size:.9rem; line-height:1.55; color:var(--gray-soft); } .ct-gets li::before{ content:''; position:absolute; left:1px;top:.28em; width:16px;height:16px; border-radius:3px; background:rgba(31,201,195,.12); border:1px solid rgba(31,201,195,.35); } .ct-gets li::after{ content:''; position:absolute; left:7px;top:.5em; width:4px;height:7px; border-right:1.6px solid var(--wave-teal); border-bottom:1.6px solid var(--wave-teal); transform:rotate(45deg); } /* ===================================================================== 7. BLOQUES INTERNOS DE LAS ETAPAS ===================================================================== */ /* ---------- Pago 50 / 50 ---------- */ .ct-pay{margin-top:20px;} .ct-pay-bar{ display:grid; grid-template-columns:1fr 1fr; gap:4px; height:34px; } .ct-pay-seg{ position:relative; display:flex; align-items:center; padding:0 12px; border-radius:2px; overflow:hidden; background:rgba(255,255,255,.04); } .ct-pay-seg::before{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,var(--accent),var(--accent-hot)); transform-origin:left; transform:scaleX(0); transition:transform 1.1s var(--ease-out-expo) .35s; } .ct-pay-seg + .ct-pay-seg::before{ background:linear-gradient(90deg,#1aa9b8,var(--wave-teal)); transition-delay:.75s; } .ct-step.show .ct-pay-seg::before{transform:scaleX(1);} .ct-pay-seg b{position:relative;font-family:var(--font-mono);font-size:.74rem;font-weight:600;color:#fff;} .ct-pay-legend{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:12px; font-size:.84rem; color:var(--gray-soft); } .ct-pay-legend span{display:inline-flex;align-items:center;gap:8px;} .ct-pay-legend i{width:8px;height:8px;border-radius:1px;background:var(--accent-hot);} .ct-pay-legend span + span i{background:var(--wave-teal);} .ct-pay-alt{ margin-top:12px; font-size:.78rem; color:var(--gray-mid); font-style:italic; } /* ---------- Rondas de revisión ---------- */ .ct-round{ display:inline-flex; align-items:center; gap:12px; margin-top:18px; padding:8px 14px 8px 10px; border-radius:2px; border:1px solid var(--border-soft); background:rgba(255,255,255,.02); font-family:var(--font-mono); font-size:.7rem; letter-spacing:.3px; color:var(--gray-soft); } .ct-round-dots{display:inline-flex;gap:4px;} .ct-round-dots i{ width:18px;height:4px; background:rgba(255,255,255,.12); } .ct-round-dots i.is-on{background:linear-gradient(90deg,var(--accent-hot),var(--wave-teal));} /* ---------- Entrega (etapa 5) ---------- */ .ct-handoff{ list-style:none; display:grid; grid-template-columns:1fr; gap:10px; margin-top:20px; } .ct-handoff li{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:14px; row-gap:2px; align-items:center; padding:14px 16px; border-radius:6px; border:1px solid var(--border-soft); background:rgba(255,255,255,.02); transition:border-color .4s ease, background .4s ease; } .ct-handoff li:hover{border-color:rgba(91,141,255,.3);background:rgba(47,111,237,.05);} .ct-handoff-ico{ grid-row:1 / 3; width:40px;height:40px; border-radius:4px; display:grid;place-items:center; color:var(--accent-hot); background:rgba(47,111,237,.1); border:1px solid rgba(91,141,255,.22); } .ct-handoff-ico svg{width:20px;height:20px;} .ct-handoff strong{font-size:.92rem;color:var(--white);font-weight:600;} .ct-handoff li > span:last-child{font-size:.8rem;line-height:1.5;color:var(--gray-mid);} /* ---------- Mantenimiento (etapa 6) ---------- */ .ct-step-opt{ border-style:dashed; border-color:rgba(31,201,195,.28); } .ct-step-opt.is-active{border-style:solid;border-color:rgba(31,201,195,.4);} /* Frase destacada: el subrayado brillante del link "Portfolio Animado" del navbar (mismo gradiente que porqueLineSweep), en versión de texto corrido. box-decoration-break:clone hace que cada renglón tenga su propio subrayado. Se "enciende" (de 0 a 2px) cuando la etapa entra en pantalla y se engrosa un poco al pasar el mouse. */ .ct-hl{ color:var(--white); font-weight:500; padding-bottom:3px; background-image:linear-gradient(90deg, var(--accent) 0%, var(--accent) 32%, var(--wave-teal) 46%, #eafffb 50%, var(--wave-teal) 54%, var(--accent) 68%, var(--accent) 100%); background-size:300% 0px; background-repeat:repeat-x; background-position:200% 100%; -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:background-size 1s var(--ease-out-expo); animation:ctHlSweep 5.5s cubic-bezier(.83,0,.17,1) infinite; } .ct-step.show .ct-hl{background-size:300% 2px;} .ct-step.show .ct-hl:hover{background-size:300% 3px;transition-duration:.35s;} @keyframes ctHlSweep{ from{background-position:200% 100%;} to{background-position:-100% 100%;} } .ct-plan{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:20px; padding:20px; border-radius:6px; border:1px solid rgba(31,201,195,.22); background: radial-gradient(120% 140% at 100% 0%, rgba(31,201,195,.1), transparent 60%), rgba(12,12,16,.6); } .ct-plan-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;} .ct-plan-price small{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:1.2px; text-transform:uppercase; color:var(--gray-mid); width:100%; } .ct-plan-price strong{ font-size:2.4rem; line-height:1; letter-spacing:-.04em; font-weight:800; color:var(--white); } .ct-plan-price em{font-style:normal;font-size:.9rem;color:var(--gray-soft);} .ct-plan-list{list-style:none;display:grid;gap:8px;} .ct-plan-list li{ position:relative; padding-left:20px; font-size:.88rem; line-height:1.5; color:var(--gray-soft); } .ct-plan-list li::before{ content:''; position:absolute; left:1px;top:.5em; width:7px;height:7px; border-radius:1px; background:linear-gradient(135deg,var(--accent-hot),var(--wave-teal)); transform:rotate(45deg); } .ct-fine{margin-top:14px;font-size:.76rem;line-height:1.65;color:var(--gray-mid);} /* ===================================================================== 8. CIERRE ===================================================================== */ .ct-final{padding:40px 0 100px;position:relative;} .ct-final-card{ position:relative; display:grid; gap:28px; padding:34px 24px; border-radius:10px; border:1px solid rgba(91,141,255,.26); background: radial-gradient(90% 120% at 0% 100%, rgba(31,201,195,.12), transparent 60%), radial-gradient(90% 120% at 100% 0%, rgba(47,111,237,.2), transparent 60%), var(--bg-card); overflow:hidden; isolation:isolate; } /* Malla triangular que se revela alrededor del cursor: el mismo recurso que el fondo de "Por qué elegirme" en index.html (script.js), portado a esta tarjeta en como-trabajo.js. */ .ct-final-grid{ position:absolute; inset:0; z-index:-1; width:100%;height:100%; pointer-events:none; } .ct-final-copy h2{ font-size:clamp(1.8rem,7vw,2.9rem); line-height:1.08; letter-spacing:-.03em; margin:4px 0 14px; } .ct-final-copy p{font-size:.98rem;max-width:520px;} .ct-final-actions{display:flex;flex-direction:column;gap:14px;} .ct-final-actions .btn{width:100%;} .ct-final-alt{font-size:.82rem;color:var(--gray-mid);margin-top:6px;} .ct-final-alt a{ color:var(--white); text-decoration:underline; text-decoration-color:rgba(91,141,255,.55); text-underline-offset:3px; transition:color .3s ease; } .ct-final-alt a:hover{color:var(--accent-hot);} /* ===================================================================== 9. ENTRADAS Y SALIDAS ATADAS AL SCROLL Tarjetas de etapa y de compromisos (.ct-sd): entran levantándose desde abajo con un leve giro 3D que se endereza mientras una máscara las descubre; al salir por arriba se hunden y se apagan. Todo sigue al scroll (view()), así que responde en ambos sentidos. como-trabajo.js les quita .reveal en estos navegadores para que no se sumen las dos entradas; sin soporte (Safari, Firefox) queda el reveal de siempre. El clip-path deja margen a los costados para no cortar el rombo del riel, que vive por fuera de la tarjeta. ===================================================================== */ @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .ct-sd{ transform-origin:50% 100%; animation:ctSdIn linear both, ctSdOut linear both; animation-timeline:view(), view(); animation-range:entry 0% entry 90%, exit 20% exit 100%; } @keyframes ctSdIn{ from{ opacity:0; transform:perspective(1400px) translateY(80px) rotateX(14deg) scale(.95); clip-path:inset(-40% -120px 55% -120px); } to{ opacity:1; transform:none; clip-path:inset(-40% -120px -40% -120px); } } @keyframes ctSdOut{ to{opacity:.15;transform:translateY(-36px) scale(.96);} } } } /* ===================================================================== 10. BREAKPOINTS ===================================================================== */ @media (min-width:560px){ .ct-hero-cta{flex-direction:row;flex-wrap:wrap;} .ct-hero-cta .btn{width:auto;} .ct-handoff{grid-template-columns:repeat(3,1fr);} .ct-handoff li{grid-template-columns:1fr;grid-template-rows:auto;row-gap:4px;align-content:start;} .ct-handoff-ico{grid-row:auto;margin-bottom:10px;} .ct-plan{grid-template-columns:auto 1fr;gap:28px;align-items:center;} .ct-plan-price{flex-direction:column;align-items:flex-start;gap:4px;padding-right:28px;border-right:1px solid var(--border-soft);} .ct-final-actions{flex-direction:row;flex-wrap:wrap;align-items:center;} .ct-final-actions .btn{width:auto;} .ct-final-alt{width:100%;} } @media (min-width:768px){ .ct-hero{padding:150px 0 60px;} .ct-promises{padding:50px 0 40px;} .ct-journey{padding:70px 0 90px;} .ct-steps{--gut:56px;} .ct-step{padding:30px 32px 32px;} .ct-step::before{left:32px;right:32px;} .ct-node{top:37.5px;} .ct-rail{top:42.5px;} .ct-mbar{top:88px;} .ct-bento{grid-template-columns:1.2fr 1fr;} .ct-card-own{grid-row:span 2;padding:34px 32px;display:flex;flex-direction:column;} .ct-card-own p{margin-bottom:28px;} .ct-card-own .ct-own-list{margin-top:auto;} .ct-final-card{padding:52px 48px;} } @media (min-width:1024px){ /* La escalera pasa a la izquierda y el texto a la derecha */ .ct-hero-grid{grid-template-columns:1fr 1fr;gap:56px;} .ct-climb{order:-1;width:100%;max-width:520px;margin:0;} .ct-journey-grid{ display:grid; grid-template-columns:260px 1fr; gap:72px; align-items:start; } /* La columna fija ocupa todo el alto disponible: medidor e índice arriba, la torre abajo, en la esquina inferior izquierda */ .ct-index{ display:flex; flex-direction:column; position:sticky; top:112px; height:calc(100vh - 140px); height:calc(100dvh - 140px); } .ct-mbar{display:none;} .ct-steps{max-width:760px;} .ct-promises{padding:80px 0 40px;} .ct-final-card{grid-template-columns:1.25fr .75fr;align-items:end;gap:48px;padding:64px 60px;} .ct-final-actions{flex-direction:column;align-items:stretch;} .ct-final-actions .btn{width:100%;} .ct-final-alt{text-align:center;} } /* En pantallas bajas no hay lugar para la torre sin pisar el índice */ @media (min-width:1024px) and (max-height:720px){ .ct-tower{display:none;} } /* ===================================================================== 11. REDUCED MOTION ===================================================================== */ @media (prefers-reduced-motion: reduce){ .ct-in, .ct-line > span, .ct-title .text-accent{animation:none !important;opacity:1;transform:none;} .ct-st, .ct-st-labels g, .ct-summit{animation:none;} .ct-climb-draw{animation:none;stroke-dashoffset:0;} .ct-climb-scroll{animation:none !important;} .ct-traveller{display:none;} .ct-alt-name.is-flip, .ct-mbar-name.is-flip{animation:none;} .ct-page main .btn:hover::before{animation:none;} .ct-step.is-active .ct-step-kicker{animation:none;} .ct-hl{animation:none;background-position:50% 100%;background-size:300% 2px;transition:none;} .ct-step, .ct-step::before, .ct-node, .ct-card::after, .ct-pay-seg::before, .ct-lv, .ct-alt-gauge i{transition:none;} .ct-js .ct-own-list li{opacity:1;transform:none;transition:none;} .ct-pay-seg::before{transform:scaleX(1);} }