/* sc-scroll-life-v3 Fondo verde que viaja con el scroll (claro y oscuro) + revelado de bloques. v3: se elimino el subrayado verde de los titulos (.sc-life-title::after). Todo cuelga de html.sc-life (la agrega scroll-life.js): sin JS, el sitio queda exactamente como antes. --sc-progress (0 -> 1) lo setea scroll-life.js en . */ html.sc-life{--sc-progress:0} /* ---------- 1. Lavado verde de fondo, fijo, detras de todo el contenido ---------- */ html.sc-life body::before{ content:""; position:fixed; top:-12vh;right:-12vw;bottom:-12vh;left:-12vw; z-index:-1; pointer-events:none; background: radial-gradient(46vw 40vh at 82% calc(-8% + var(--sc-progress) * 56%), rgba(22,122,91,.105), transparent 68%), radial-gradient(54vw 46vh at 8% calc(106% - var(--sc-progress) * 60%), rgba(22,122,91,.07), transparent 72%); } /* Tinte general que se va profundizando al bajar */ html.sc-life body{ background-image:linear-gradient(180deg, rgba(22,122,91,calc(.010 + var(--sc-progress) * .016)) 0%, rgba(22,122,91,calc(.006 + var(--sc-progress) * .022)) 100%)!important; background-attachment:fixed!important; background-repeat:no-repeat!important; } /* ---------- 2. Destapar las secciones que pintaban un color plano encima ---------- */ html.sc-life .seo-guide, html.sc-life .liquidacion-guide, html.sc-life .faq-home, html.sc-life .seo-faq, html.sc-life .why-section, html.sc-life .sources-section, html.sc-life .about-section, html.sc-life .feature-section, html.sc-life .info-minimal, html.sc-life .privacy-minimal, html.sc-life .guide-page .page-hero, html.sc-life .guide-page .seo-guide{ background:transparent!important; } /* ---------- 3. Modo oscuro: mismo verde, mas presente sobre el negro ---------- */ html.sc-life[data-theme="dark"] body::before{ background: radial-gradient(46vw 40vh at 82% calc(-8% + var(--sc-progress) * 56%), rgba(69,201,156,.15), transparent 66%), radial-gradient(54vw 46vh at 8% calc(106% - var(--sc-progress) * 60%), rgba(31,138,100,.17), transparent 70%); } html.sc-life[data-theme="dark"] body{ background-color:#0d0f0e!important; background-image:linear-gradient(180deg, rgba(69,201,156,calc(.022 + var(--sc-progress) * .03)) 0%, rgba(22,122,91,calc(.014 + var(--sc-progress) * .05)) 100%)!important; } /* El hero oscuro se funde con el fondo general en vez de cortar */ html.sc-life[data-theme="dark"] .home-hero{ background:radial-gradient(circle at 78% 38%,rgba(69,201,156,.10),transparent 38%), transparent!important; } html.sc-life .home-hero{ background-color:transparent!important; } /* ---------- 4. Revelado de bloques al entrar en pantalla ---------- */ html.sc-life .sc-life-reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.22,.61,.36,1) var(--sc-delay,0s), transform .7s cubic-bezier(.22,.61,.36,1) var(--sc-delay,0s); } html.sc-life .sc-life-reveal.sc-life-in{opacity:1;transform:none} html.sc-life .breakdown>div{transition:background-color .25s ease} html.sc-life .breakdown>div:hover{background-color:rgba(22,122,91,.05)} /* ---------- 5. Accesibilidad: el fondo queda, el movimiento no ---------- */ @media (prefers-reduced-motion: reduce){ html.sc-life .sc-life-reveal{opacity:1;transform:none;transition:none} } /* ---------- 6. Impresion: nada de esto debe llegar al PDF ---------- */ @media print{ html.sc-life body::before{display:none!important} html.sc-life body{background:#fff!important;background-image:none!important} html.sc-life .sc-life-reveal{opacity:1!important;transform:none!important} } /* sc-mobile-guard-v1: nada debe generar scroll horizontal en mobile, y el globito "Preguntale a Sueldo Claro" del boton flotante se oculta en pantallas chicas (en pages-core.css solo se ocultaba por debajo de 600px, asi que entre 601 y 760 podia asomar). */ @media(max-width:760px){ html,body{max-width:100%;overflow-x:hidden} .chat-launch:after{display:none!important} } /* sc-accent-titles-v1 Verde de marca en los titulos de seccion y arreglo del punto del kicker. Usa var(--accent), asi el claro toma #167a5b y el oscuro #45c99c solo. */ html.sc-life .faq-home .center-head h2, html.sc-life .seo-guide h2{ color:var(--accent)!important; } /* Las guias y calculadoras dejan de sentirse planas: borde y apertura en verde */ html.sc-life .seo-guide{ border-top-color:rgba(22,122,91,.20)!important; } html.sc-life[data-theme="dark"] .seo-guide{ border-top-color:rgba(69,201,156,.22)!important; } html.sc-life .seo-faq summary:hover, html.sc-life .seo-faq details[open]>summary{ color:var(--accent)!important; } /* Punto del kicker: un solo circulo, sin halos absolutos que se descoloquen */ html.sc-life .source-kicker>span::before, html.sc-life .source-kicker>span::after{ content:none!important; display:none!important; } html.sc-life .source-kicker{ flex-wrap:nowrap!important; align-items:center!important; min-width:0; } html.sc-life .source-kicker>span{ position:relative!important; flex:0 0 6px!important; width:6px!important;height:6px!important; min-width:6px!important; border-radius:99px!important; background:var(--accent)!important; box-shadow:0 0 0 4px var(--accent2)!important; } @media(max-width:760px){ html.sc-life .source-kicker{ gap:11px!important; line-height:1.35!important; } html.sc-life .source-kicker>span{ flex:0 0 5px!important; width:5px!important;height:5px!important; min-width:5px!important; box-shadow:0 0 0 3px var(--accent2)!important; } } /* sc-perf-mobile-v1: en celular, fondo quieto y secciones que no se maquetan hasta que se acercan a la pantalla. */ @media(max-width:760px){ html.sc-life body::before{ background:radial-gradient(78vw 44vh at 78% 10%, rgba(22,122,91,.085), transparent 70%)!important; } html.sc-life[data-theme="dark"] body::before{ background:radial-gradient(78vw 44vh at 78% 10%, rgba(69,201,156,.13), transparent 68%)!important; } html.sc-life body{ background-image:none!important; background-attachment:scroll!important; } html.sc-life .faq-home, html.sc-life .sources-section, html.sc-life .seo-guide, html.sc-life .seo-faq, html.sc-life .home-feature, html.sc-life .cv-seo-section{ content-visibility:auto; contain-intrinsic-size:auto 620px; } } /* sc-title-motion-v1: las palabras de "Lo esencial, explicado claro" suben al entrar en pantalla. Las envuelve scroll-life.js. */ html.sc-life .sc-tw{display:inline-block;overflow:hidden;vertical-align:bottom} html.sc-life .sc-tw>i{ display:inline-block; font-style:inherit; transform:translateY(110%); opacity:0; transition:transform .72s cubic-bezier(.22,.61,.36,1) var(--sc-tw-d,0s), opacity .72s cubic-bezier(.22,.61,.36,1) var(--sc-tw-d,0s); } html.sc-life .sc-title-in .sc-tw>i{transform:none;opacity:1} @media (prefers-reduced-motion: reduce){ html.sc-life .sc-tw>i{transform:none;opacity:1;transition:none} } @media print{ html.sc-life .sc-tw>i{transform:none!important;opacity:1!important} } /* sc-faq-kicker-v1: "PREGUNTAS FRECUENTES" deja de competir con el titulo verde. */ html.sc-life .faq-home .center-head small{ color:var(--ink)!important; } html.sc-life[data-theme="dark"] .faq-home .center-head small{ color:#ffffff!important; } /* sc-soft-compose-v1: one neutral focus boundary, never stacked rings. */ html .chat-form .chat-input,html .chat-form .chat-input:focus,html .chat-form .chat-input:focus-visible{border:0!important;outline:none!important;box-shadow:none!important;background:transparent!important;border-radius:0;padding:0 10px;font-size:16px;line-height:1.4;caret-color:var(--ink)} html .chat-compose .chat-form{gap:8px;padding:7px;border-radius:18px;border-color:#d8ded9!important;background:#fff!important;box-shadow:0 4px 16px rgba(20,30,25,.045)!important;transition:border-color .18s ease,background-color .18s ease} html .chat-compose .chat-form:focus-within{border-color:#7c8780!important;outline:none!important;box-shadow:0 4px 16px rgba(20,30,25,.045)!important} html[data-theme="dark"] .chat-compose .chat-form{background:#141816!important;border-color:#343c37!important;box-shadow:0 4px 18px rgba(0,0,0,.14)!important} html[data-theme="dark"] .chat-compose .chat-form:focus-within{border-color:#78877e!important;box-shadow:0 4px 18px rgba(0,0,0,.14)!important} html .chat-compose .chat-input::placeholder{color:var(--muted);opacity:1} html .chat-compose .chat-send{width:40px;height:40px;flex-basis:40px;border-radius:12px;background:#167a5b!important;color:#fff!important;font-weight:600;transition:background-color .16s ease,transform .16s ease} html .chat-compose .chat-send:hover{background:#12654b!important;transform:none} html[data-theme="dark"] .chat-compose .chat-send{background:#245c47!important;color:#f1f7f4!important} html[data-theme="dark"] .chat-compose .chat-send:hover{background:#2b7056!important} html .chat-compose .chat-send:active{transform:scale(.96)} html .chat-compose .chat-send:focus-visible{outline:2px solid var(--ink)!important;outline-offset:3px} @media(prefers-reduced-motion:reduce){html .chat-compose .chat-form,html .chat-compose .chat-send{transition:none!important}html .chat-compose .chat-send:active{transform:none}}