/* CROMAS — a quiet, white-first visual system. */
:root{--ink:#1d1d1f;--muted:#6c6c73;--surface:#f5f5f7;--line:#e5e5e9;--blue:#0066cc;--white:#fff;--container:1160px;--radius:28px;--ease:cubic-bezier(.22,1,.36,1);--section:clamp(72px,9vw,132px);--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}a{color:var(--blue);text-underline-offset:4px;text-decoration-thickness:1px}button{font:inherit}button,a,summary{touch-action:manipulation}a:hover{text-decoration:underline}button{cursor:pointer}img{max-width:100%;height:auto;display:block}h1,h2,h3,p{margin:0}h1,h2,h3{text-wrap:balance}h1{font-size:clamp(40px,5.15vw,74px);font-weight:600;line-height:1.055;letter-spacing:-.052em}h2{font-size:clamp(30px,3.2vw,46px);line-height:1.12;letter-spacing:-.045em;font-weight:600}h3{font-size:clamp(24px,2.25vw,30px);line-height:1.18;letter-spacing:-.035em;font-weight:600}p{font-size:17px;line-height:1.75;color:var(--muted)}p+p{margin-top:22px}::selection{background:#dce8f8;color:var(--ink)}:focus-visible{outline:3px solid #0071e3;outline-offset:5px;border-radius:4px}.container{width:min(var(--container),calc(100% - 80px));margin-inline:auto}.section-space{padding-block:var(--section)}.eyebrow{display:block;font-size:11px;letter-spacing:.17em;font-weight:600;line-height:1.5;color:var(--muted);margin-bottom:24px}.soft-text{color:#747479}.skip-link{position:fixed;top:10px;left:15px;padding:12px 18px;background:var(--white);z-index:100;transform:translateY(-150%)}.skip-link:focus{transform:none}
/* Navigation */
.site-header{height:77px;position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(225,225,229,.65);backdrop-filter:blur(18px)}.nav-container{height:100%;width:min(1320px,calc(100% - 80px));margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}.wordmark{display:inline-flex;align-items:center;color:var(--ink);text-decoration:none;font-size:29px;font-weight:650;letter-spacing:-1.5px;line-height:1}.wordmark:hover{text-decoration:none}.wordmark img{width:42px;height:42px;object-fit:contain;margin-right:8px}.brand-period{color:#727278}.site-header nav{display:flex;gap:34px;align-items:center}.site-header nav a{font-size:13px;color:#64646b;text-decoration:none;position:relative;padding-block:27px}.site-header nav a:hover,.site-header nav a[aria-current]{color:var(--ink)}.site-header nav a[aria-current]:after{content:"";height:3px;width:3px;border-radius:50%;background:var(--ink);position:absolute;bottom:15px;left:calc(50% - 1.5px)}.header-cta{border:1px solid #dedee3;border-radius:99px;min-height:37px;display:flex;align-items:center;gap:20px;padding:9px 16px;font-size:12px;color:var(--ink);text-decoration:none;transition:background .3s}.header-cta:hover{background:var(--surface);text-decoration:none}.reading-progress{height:1px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#43a5e3,#795de2,#e06b95);will-change:transform}.menu-toggle{display:none}
/* Hero */
.hero{text-align:center;padding-top:75px;padding-bottom:53px;max-width:1110px}.hero-eyebrow{display:flex;align-items:center;justify-content:center;gap:13px;margin-bottom:24px;letter-spacing:.2em}.spectrum-dots{display:inline-flex;gap:4px;align-items:center}.spectrum-dots i{display:block;width:5px;height:5px;border-radius:50%}.spectrum-dots i:nth-child(1){background:#73bb67}.spectrum-dots i:nth-child(2){background:#e9b531}.spectrum-dots i:nth-child(3){background:#e8824c}.spectrum-dots i:nth-child(4){background:#da618b}.spectrum-dots i:nth-child(5){background:#9061cc}.spectrum-dots i:nth-child(6){background:#4c9ed6}.hero-description{max-width:780px;margin:26px auto 0;font-size:17px;line-height:1.7}.hero-actions{display:flex;justify-content:center;align-items:center;gap:30px;margin-top:29px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;padding:16px 24px;min-height:52px;border:0;border-radius:99px;text-decoration:none;font-size:14px;font-weight:500;transition:transform .4s var(--ease),background .3s,box-shadow .4s;line-height:1.4}.button.primary{color:white;background:#1d1d1f}.button:hover{background:#343437;transform:translateY(-2px);text-decoration:none;box-shadow:0 6px 18px #00000012}.button:active{transform:translateY(0)}.button span,.text-link span{transition:transform .4s var(--ease)}.button:hover span{transform:translate(2px,-2px)}.text-link{font-size:14px;display:inline-flex;align-items:center;gap:12px;text-decoration:none;min-height:44px}.text-link:hover span{transform:translateX(4px)}.hero-visual{width:calc(100% - 48px);max-width:1800px;margin:0 auto;position:relative;border-radius:16px;overflow:hidden;isolation:isolate;background:#e0e5ec}.hero-visual picture{display:block}.hero-visual img{width:100%;aspect-ratio:1916/821;object-fit:cover;transform:scale(1.035);will-change:transform}.image-explore{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid #ffffff70;color:white;background:#00000010;font-size:19px;text-decoration:none}.image-explore:hover{background:#ffffff22;text-decoration:none}.breadcrumb{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--muted);padding-top:26px}.breadcrumb a{color:var(--muted);text-decoration:none}.page-como-funciona .hero,.page-diagnostico-gratis .hero{padding-top:55px;padding-bottom:75px}.page-como-funciona h1,.page-diagnostico-gratis h1{max-width:940px;margin:auto}.page-como-funciona h1 .soft-text,.page-diagnostico-gratis h1 .soft-text{display:block}.pending-note{font-size:12px;margin-top:17px;line-height:1.5;min-height:18px}.pending-note.is-highlighted{color:var(--ink)}
/* Editorial layouts */
.editorial{padding-block:var(--section);display:grid;grid-template-columns:.9fr 1fr;gap:clamp(40px,7vw,110px);border-bottom:1px solid var(--line)}.section-title h2{max-width:480px}.section-copy p{max-width:590px}.section-copy{align-self:center}.brand-story{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px;padding:40px 0 60px}.brand-object img{width:100%;max-width:480px;margin:auto;mix-blend-mode:multiply}.brand-story h2{margin-bottom:25px}.section-heading{max-width:760px;margin-bottom:53px}.section-heading p{margin-top:20px}.features{padding-top:45px}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.feature{padding:38px 40px 42px;border-radius:var(--radius);background:var(--surface)}.feature-index{display:flex;align-items:center;justify-content:space-between;font-size:12px;letter-spacing:.1em;color:#77777e;margin-bottom:38px}.feature-index span{width:7px;height:7px;border-radius:50%;background:#8794a7}.feature h3{margin-bottom:19px;max-width:380px}.feature p{font-size:16px;line-height:1.7}.feature-0 .feature-index span{background:#79a985}.feature-1 .feature-index span{background:#e4a458}.feature-2 .feature-index span{background:#a585c4}.feature-3 .feature-index span{background:#df8099}.feature-4{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 65px}.feature-4 .feature-index{grid-column:1/-1;margin-bottom:24px}.feature-4 h3{max-width:420px}.audience{padding-top:30px}.difference{border-bottom:0}.honest{padding:42px;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:15px;gap:60px}.honest h2{font-size:28px}.honest p{font-size:15px}.steps{padding-top:45px}.steps-list{position:relative}.step{display:grid;grid-template-columns:140px 1fr;gap:60px;padding:50px 0;border-top:1px solid var(--line)}.step-number{font-size:86px;color:#d0d0d6;letter-spacing:-.07em;font-weight:500;line-height:1}.step h3{margin-bottom:20px;max-width:660px}.step p{max-width:770px}.step h3[id]{scroll-margin-top:110px}.manifesto{text-align:center;padding:85px 90px;background:var(--surface);border-radius:var(--radius)}.spectrum-line{display:block;width:66px;height:4px;border-radius:8px;background:linear-gradient(90deg,#89ba6b,#e5ac47,#dd6a8b,#7e6ac7,#66a9cd);margin:0 auto 30px}.manifesto h2{max-width:760px;margin:auto}.manifesto p{max-width:710px;margin:26px auto 0}.areas{padding-top:85px}.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px}.area{padding:32px 0 42px;border-top:1px solid var(--line);--area-color:#5091bd}.area-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px;color:#74747b;font-size:11px}.area-dot{width:12px;height:12px;border-radius:50%;background:var(--area-color);box-shadow:0 0 0 6px color-mix(in srgb,var(--area-color) 10%,transparent)}.area-1{--area-color:#a379bc}.area-2{--area-color:#d3a235}.area-3{--area-color:#d57579}.area-4{--area-color:#55a5a0}.area-5{--area-color:#7c9b5a}.area h3{font-size:25px;margin-bottom:16px}.area p{font-size:16px}.results{padding:60px;background:var(--surface);border:0;border-radius:var(--radius)}.results-list{padding:0;margin:25px 0;list-style:none}.results-list li{padding:13px 0 13px 28px;border-bottom:1px solid #e0e0e5;font-size:16px;line-height:1.55;position:relative}.results-list li:before{content:"✓";position:absolute;left:0;color:#737c89}.results-list+p{font-size:15px}
/* Native disclosure keeps every FAQ usable without JavaScript. */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.faq .section-heading{margin:0}.faq h2{font-size:36px}.faq details{border-bottom:1px solid var(--line)}.faq details:first-child{border-top:1px solid var(--line)}.faq summary{padding:26px 38px 26px 0;font-weight:500;line-height:1.5;font-size:17px;cursor:pointer;position:relative;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq-plus{position:absolute;width:13px;height:13px;right:3px;top:33px}.faq-plus:before,.faq-plus:after{content:"";position:absolute;background:#77777e;top:6px;left:0;width:13px;height:1px;transition:transform .35s}.faq-plus:after{transform:rotate(90deg)}details[open] .faq-plus:after{transform:rotate(0)}.faq-answer{padding:0 25px 25px 0}.faq-answer p{font-size:15px;line-height:1.7}details[open] .faq-answer{animation:answer-in .4s var(--ease)}@keyframes answer-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
/* Closing and footer */
.closing{background:var(--surface);text-align:center;padding:90px 30px}.closing-inner{max-width:760px;margin:auto}.closing .spectrum-dots{margin-bottom:25px}.closing h2{font-size:clamp(36px,4.1vw,58px);margin-bottom:22px}.closing p{max-width:560px;margin:0 auto 27px}.closing .closing-link{font-size:13px;margin:22px auto 0}.site-footer{padding-top:42px;padding-bottom:25px}.footer-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:36px;border-bottom:1px solid var(--line)}.footer-top nav{display:flex;gap:30px}.footer-top nav a{font-size:12px;color:var(--muted);text-decoration:none}.footer-top nav a:hover{text-decoration:underline}.footer-bottom{display:flex;align-items:center;gap:30px;padding-top:23px;font-size:11px;color:var(--muted)}.footer-bottom>a{color:var(--muted);text-decoration:none}.motion-toggle{margin-left:auto;display:flex;align-items:center;gap:8px;min-height:36px;border:0;background:none;padding:7px 0 7px 10px;font-size:11px;color:var(--muted)}.motion-dot{width:5px;height:5px;border-radius:50%;background:#76977d}.motion-toggle[aria-pressed=false] .motion-dot{background:#999}
/* data-motion: progressively enhanced, never hides content if JS is unavailable. */
.motion-ready [data-motion]{transition:opacity 1s var(--ease),transform 1.2s var(--ease);transition-delay:var(--motion-delay,0ms)}.motion-ready [data-motion].motion-pending{opacity:0;transform:translate3d(0,27px,0)}.motion-ready [data-motion=scale].motion-pending{transform:scale(.94)}.motion-ready [data-motion=image].motion-pending{transform:translate3d(0,18px,0) scale(.985)}html[data-motion-enabled=false]{scroll-behavior:auto}html[data-motion-enabled=false] *,html[data-motion-enabled=false] *:before,html[data-motion-enabled=false] *:after{animation:none!important;transition:none!important}html[data-motion-enabled=false] [data-motion]{opacity:1!important;transform:none!important}html[data-motion-enabled=false] [data-parallax]{transform:none!important}
@media(min-width:1600px){.hero{padding-top:95px;padding-bottom:65px}.hero-description{max-width:820px}.hero-visual{max-width:1560px}.hero h1{font-size:76px}}
@media(max-width:1000px){.site-header nav{gap:23px}.header-cta{display:none}.hero{padding-top:60px}.hero-description{max-width:720px}.editorial{gap:45px}.brand-story{gap:35px}.feature{padding:30px}.faq{gap:40px}.faq h2{font-size:32px}.step{gap:35px;grid-template-columns:110px 1fr}.area-grid{gap:0 25px}.manifesto{padding:65px 45px}.results{padding:42px}.nav-container{width:calc(100% - 64px)}}
@media(max-width:700px){.container{width:calc(100% - 40px)}.nav-container{width:calc(100% - 40px)}.site-header{height:66px}.wordmark{font-size:26px}.wordmark img{width:36px;height:36px;margin-right:5px}.menu-toggle{display:flex;width:44px;height:44px;border:0;background:transparent;flex-direction:column;justify-content:center;align-items:center;gap:6px}.menu-toggle span{height:1px;width:20px;background:var(--ink);transition:transform .3s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}.site-header nav{position:absolute;top:65px;left:0;width:100%;padding:15px 25px 22px;background:rgba(255,255,255,.98);border-bottom:1px solid var(--line);display:none;align-items:stretch;gap:0}.site-header nav.is-open{display:flex;flex-direction:column}.site-header nav a{padding:15px 0;font-size:15px}.site-header nav a[aria-current]:after{left:auto;right:5px;bottom:24px}.hero{padding-top:48px;padding-bottom:38px}h1{font-size:clamp(36px,7.9vw,54px);line-height:1.08;letter-spacing:-.05em}.hero-eyebrow{font-size:10px;margin-bottom:20px}.hero-description{font-size:15px;line-height:1.75;margin-top:22px}.hero-actions{gap:7px;flex-direction:column;margin-top:25px}.button{font-size:13px;padding:15px 22px;min-height:49px;gap:18px}.text-link{font-size:13px}.hero-visual{width:calc(100% - 24px);border-radius:12px}.hero-visual img{aspect-ratio:1.45;object-position:61% center}.image-explore{width:34px;height:34px;bottom:16px}.editorial{grid-template-columns:1fr;gap:25px}.eyebrow{font-size:10px;margin-bottom:18px}p{font-size:16px;line-height:1.75}.brand-story{grid-template-columns:1fr;gap:12px;padding-top:20px}.brand-object img{max-width:310px}.brand-story h2{margin-bottom:20px}.features{padding-top:35px}.section-heading{margin-bottom:32px}.feature-grid{grid-template-columns:1fr;gap:15px}.feature{padding:29px;border-radius:22px}.feature-index{margin-bottom:27px}.feature-4{grid-column:auto;display:block}.feature p{font-size:15px}.audience{padding-top:0}.honest{padding:28px;gap:20px}.honest h2{font-size:26px}.faq{grid-template-columns:1fr;gap:30px}.faq h2{font-size:32px}.faq summary{font-size:16px}.closing{padding:68px 24px}.closing p{font-size:15px}.closing .closing-link{font-size:12px}.footer-top{align-items:flex-start;gap:35px}.footer-top nav{flex-direction:column;gap:20px}.footer-bottom{flex-wrap:wrap;gap:8px 20px;justify-content:space-between}.motion-toggle{margin-left:0;padding-left:0;flex-basis:100%}.breadcrumb{padding-top:22px;font-size:10px}.page-como-funciona .hero,.page-diagnostico-gratis .hero{padding-top:40px;padding-bottom:45px}.step{grid-template-columns:45px 1fr;gap:20px;padding:33px 0}.step-number{font-size:43px}.step h3{font-size:23px}.step p{font-size:15px}.manifesto{padding:45px 26px}.manifesto h2{font-size:30px}.manifesto p{font-size:15px}.area-grid{grid-template-columns:1fr 1fr;gap:0 22px}.area h3{font-size:21px}.area p{font-size:14px;line-height:1.7}.area-top{margin-bottom:23px}.results{padding:30px}.areas{padding-top:65px}.pending-note{font-size:11px}.steps{padding-top:30px}}
@media(max-width:370px){.area-grid{grid-template-columns:1fr}.step{grid-template-columns:1fr;gap:14px}.hero h1{font-size:35px}.footer-bottom{align-items:flex-start;flex-direction:column}.container{width:calc(100% - 32px)}}
/* No-JS navigation remains available. */
html:not(.js) .menu-toggle{display:none}@media(max-width:700px){html:not(.js) .site-header{height:auto;position:relative}html:not(.js) .nav-container{flex-wrap:wrap;padding-top:15px}html:not(.js) .site-header nav{position:static;display:flex;flex-wrap:wrap;gap:18px;padding:0;border:0}html:not(.js) .site-header nav a{font-size:12px}}