.site{--ink:#12304A;--ink2:#1C4666;--mist:#EAF2F5;--sky:#CFE3EC;--sage:#5E9C94;--sage-d:#2E6B64;--white:#FBFDFD;--mute:#4A5F6E;--line:#D5E2E8;font-family:'Figtree',system-ui,sans-serif;color:var(--ink);background:var(--white);line-height:1.65;font-size:1.0625rem;overflow-x:clip;scroll-behavior:smooth}
.site *{box-sizing:border-box}
.site section[id]{scroll-margin-top:76px}
.site h1,.site h2,.site h3{font-family:'Newsreader',Georgia,serif;font-weight:500;margin:0;line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
.site p{margin:0}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding-inline:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:14px;font-weight:600;text-decoration:none;font-size:1rem;transition:transform .25s,box-shadow .25s,background .25s}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn-main{background:var(--ink);color:#fff;box-shadow:0 12px 24px -16px rgba(18,48,74,.7)}
.btn-main:hover{background:var(--ink2)}
.btn-soft{background:var(--mist);color:var(--ink)}
.btn-soft:hover{background:var(--sky)}
.btn-light{background:#fff;color:var(--ink)}
.site a:focus-visible{outline:3px solid var(--sage);outline-offset:3px}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--sage-d)}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor}
.pill{background:var(--mist);color:var(--ink);padding:8px 16px;border-radius:999px;font-weight:600;font-size:.9rem}
/* header */
.hd{position:sticky;top:0;z-index:20;background:rgba(251,253,253,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:12px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:'Newsreader',serif;font-size:1.25rem;font-weight:600;line-height:1.1}
.brand img{display:block;width:34px;height:auto;flex:none}
.brand-n{font-family:'Montserrat',sans-serif;font-weight:500;font-size:.76rem;line-height:1.2;color:#232E50}
.brand-n b{display:block;font-weight:inherit;white-space:nowrap}
@media (min-width:380px){.brand img{width:40px}.brand-n{font-size:.84rem}}
@media (min-width:640px){.brand img{width:48px}.brand-n{font-size:1.2rem}.brand-n b{display:inline}}
.brand small{display:block;font-family:'Figtree',sans-serif;font-weight:500;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-d)}
.nav{display:none;gap:32px}
.nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:.95rem}
.nav a:hover{color:var(--sage-d)}
.hd-r{display:flex;align-items:center;gap:10px}
.hd .btn{min-height:44px;padding:0 18px;font-size:.92rem;border-radius:12px}
.back{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;background:var(--mist);color:var(--ink);font-weight:600;font-size:.92rem;text-decoration:none}
/* service hero */
.shero{background:linear-gradient(180deg,var(--mist),var(--white));padding:34px 0 60px;position:relative;overflow:hidden}
.shero::before,.shero::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(94,156,148,.28);pointer-events:none}
.shero::before{width:620px;height:620px;right:-220px;top:-200px}
.shero::after{width:380px;height:380px;right:-90px;top:-80px}
.shero .wrap{position:relative;display:grid;gap:36px;align-items:center}
.crumbs{font-size:.88rem;color:var(--mute);margin-bottom:20px}
.crumbs a{color:var(--sage-d);text-decoration:none;font-weight:600}
.shero h1{font-size:clamp(2.4rem,9.5vw,4.4rem);margin:14px 0 16px}
.shero .tg{font-family:'Newsreader',serif;font-style:italic;font-size:1.35rem;color:var(--sage-d);margin-bottom:16px}
.lead{color:var(--mute);font-size:1.12rem;max-width:34rem}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.cta-row .btn-soft::after{content:"\2192";transition:transform .25s}
.cta-row .btn-soft:hover::after{transform:translateX(4px)}
.vbox{position:relative;width:min(84vw,460px);margin:0 auto}
.ph{aspect-ratio:4/5;border-radius:200px 200px 24px 24px;overflow:hidden;background:var(--sky);box-shadow:0 34px 56px -34px rgba(18,48,74,.55)}.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph-band{padding:8px 0 0}.ph-band figure{margin:0;aspect-ratio:4/3;border-radius:24px;overflow:hidden;background:var(--sky);box-shadow:0 34px 56px -34px rgba(18,48,74,.45)}.ph-band img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:760px){.ph-band figure{aspect-ratio:21/9}}
.chipf{position:absolute;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:12px;padding:7px 12px;max-width:68%;font-size:.7rem;line-height:1.35;color:var(--mute);box-shadow:0 20px 34px -20px rgba(18,48,74,.45);animation:drift 10s ease-in-out infinite}
.chipf b{display:block;font-family:'Newsreader',serif;font-size:.92rem;font-weight:600;color:var(--ink)}
.cf1{left:-4%;bottom:6%}
.cf2{right:-4%;top:6%;animation-delay:-5s}
/* sections */
.sec{padding:72px 0}
.sec h2,.cta-band h2{font-size:clamp(2rem,7vw,3.2rem);margin:12px 0 14px}
.sub{color:var(--mute);max-width:38rem}
.two{display:grid;gap:36px;align-items:start}
.two p+p{margin-top:16px}
.two p{color:var(--mute);max-width:38rem}
.bcard{background:var(--mist);border-radius:26px;padding:30px}
.bcard h3{font-size:1.5rem;margin-bottom:16px}
.bcard ul,.sym ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.bcard li{position:relative;padding-left:32px}
.bcard li::before{content:"";position:absolute;left:3px;top:.5em;width:14px;height:8px;border-left:2px solid var(--sage-d);border-bottom:2px solid var(--sage-d);transform:rotate(-45deg)}
.sym{background:var(--mist);padding:72px 0}
.sym h2{font-size:clamp(2rem,7vw,3.2rem);margin:12px 0 30px}
.sym ul{grid-template-columns:1fr;gap:14px}
.sym li{background:#fff;border-radius:20px;padding:22px 24px;display:flex;align-items:center;gap:16px;font-weight:500}
.sym li::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--sage)}
.grid{display:grid;gap:14px;margin-top:34px}
.mc{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;transition:transform .3s,box-shadow .3s,border-color .3s}
.mc:hover{transform:translateY(-4px);box-shadow:0 24px 44px -30px rgba(18,48,74,.45);border-color:var(--sage)}
.mc h3{font-size:1.45rem;margin-bottom:8px}
.mc p{color:var(--mute);font-size:.98rem}
.mc .ico{margin-bottom:16px}
.ico{flex:none;width:52px;height:52px;border-radius:50%;background:var(--mist);color:var(--ink);display:grid;place-items:center}
.ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.panel{background:#fff;border:1px solid var(--line);border-radius:26px;padding:22px}
.panel svg{width:100%;height:auto;display:block}
.panel figcaption{margin-top:12px;font-size:.82rem;color:var(--mute);text-align:center}
.oc{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px 22px;text-decoration:none;color:var(--ink);transition:transform .3s,box-shadow .3s,border-color .3s}
.oc:hover{transform:translateY(-4px);box-shadow:0 24px 44px -30px rgba(18,48,74,.45);border-color:var(--sage)}
.oc .t{flex:1;min-width:0}
.oc h3{font-size:1.3rem}
.oc small{display:block;color:var(--mute);font-size:.88rem;margin-top:2px}
.oc::after{content:"\2192";color:var(--sage-d);font-size:1.3rem}
.oc .ico{background:var(--mist)}
.cta-band{margin:0 0 76px}
.cta-card{background:var(--ink);color:#fff;border-radius:32px;padding:38px 26px;position:relative;overflow:hidden;display:grid;gap:26px}
.cta-card::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;border:1px solid rgba(155,208,199,.22);right:-140px;top:-170px}
.cta-card>*{position:relative}
.cta-card .eyebrow{color:#9BD0C7}
.cta-card p{color:#C9DCE3;max-width:34rem}
.hrs{display:flex;flex-wrap:wrap;gap:10px}
.hrs span{background:rgba(255,255,255,.1);border-radius:14px;padding:10px 16px;font-size:.95rem;font-variant-numeric:tabular-nums}
.hrs b{font-weight:600;margin-right:6px}
.cta-card .ct{display:grid;gap:4px;font-size:.98rem;color:#C9DCE3}
.cta-card .btn{justify-self:start}
/* footer */
.ft{background:var(--mist);color:var(--mute);padding:52px 0 110px;font-size:.95rem}
.ft .wrap{display:grid;gap:30px}
.ft h3{font-size:1.25rem;color:var(--ink);margin-bottom:10px}
.ft a{color:var(--ink);text-decoration:none;display:block;padding:5px 0}
.ft a:hover{color:var(--sage-d)}
.ft small{display:block;margin-top:14px;line-height:1.5}
.ft-brand{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:14px}
.ft-brand img{width:64px}
.ft-brand .brand-n{font-size:1.15rem}
.ft-brand .brand-n b{display:inline}
.ft::after{content:"© 2026 Dr. Andrés Suarez Trujillo · Médico oftalmólogo · Matrícula Nacional 139.387";display:block;width:calc(100% - 40px);max-width:1096px;margin:40px auto 0;padding-top:22px;border-top:1px solid var(--line);font-size:.82rem;color:var(--mute)}
.fab{position:fixed;z-index:30;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));min-height:56px;padding:0 22px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:10px;box-shadow:0 16px 34px -12px rgba(18,48,74,.6)}
.fab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* motion */
@keyframes soft{from{filter:blur(8px);opacity:0;transform:translateY(10px)}to{filter:blur(0);opacity:1;transform:none}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes pupil{0%,100%{transform:scale(1)}50%{transform:scale(.82)}}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(8px,-12px)}}
@keyframes rise{from{opacity:.35;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes clear{0%,12%{opacity:.92}55%,88%{opacity:0}100%{opacity:.92}}
@keyframes draw{0%{stroke-dashoffset:520}60%,100%{stroke-dashoffset:0}}
@keyframes glow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes showA{0%,40%{opacity:1}50%,90%{opacity:0}100%{opacity:1}}
@keyframes showB{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
@keyframes sharpen{0%,40%{filter:blur(7px)}50%,90%{filter:blur(0)}100%{filter:blur(7px)}}
@keyframes kA{0%,30%{opacity:1}34%,96%{opacity:0}100%{opacity:1}}
@keyframes kB{0%,31%{opacity:0}35%,62%{opacity:1}66%,100%{opacity:0}}
@keyframes kC{0%,64%{opacity:0}68%,94%{opacity:1}98%,100%{opacity:0}}
@keyframes kD{0%,64%{opacity:1}68%,96%{opacity:0}100%{opacity:1}}
@keyframes stroG{0%,40%{transform:translateY(42px)}50%,90%{transform:translateY(38px)}100%{transform:translateY(42px)}}
@keyframes stroW{0%,40%{stroke-width:70}50%,90%{stroke-width:58}100%{stroke-width:70}}
@keyframes endoG{0%,40%{transform:translateY(87px)}50%,90%{transform:translateY(78px)}100%{transform:translateY(87px)}}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
@keyframes flow{to{stroke-dashoffset:-26}}
.rA,.stA,.haze,.drp{opacity:0;animation:showA 10s ease-in-out infinite}
.rB,.stB{opacity:1;animation:showB 10s ease-in-out infinite}
.rays line{stroke-dasharray:7 6;animation:flow 1.3s linear infinite}
.states{position:relative;height:5rem;margin-top:12px;text-align:center}
.st{position:absolute;inset:0;font-size:.92rem;line-height:1.45;color:var(--mute)}
.st b{display:block;font-family:'Newsreader',serif;font-weight:500;font-size:1.3rem;color:var(--ink)}
.chart{display:flex;justify-content:center;gap:22px;margin-top:10px;font-family:'Newsreader',serif;font-size:2.4rem;line-height:1;color:var(--ink);animation:sharpen 10s ease-in-out infinite}
.mini{margin-bottom:14px}
.mini svg{width:100%;max-width:220px;height:auto;display:block}
.fd{animation:glow 2.4s ease-in-out infinite}
.stro{transform:translateY(38px);animation:stroG 10s ease-in-out infinite}
.stro path{stroke-width:58;animation:stroW 10s ease-in-out infinite}
.endo{transform:translateY(78px);animation:endoG 10s ease-in-out infinite}
.sk1,.sk2,.sk3{opacity:0}
.sk1{animation:kA 12s ease-in-out infinite}
.sk2{animation:kB 12s ease-in-out infinite}
.sk3{opacity:1;animation:kC 12s ease-in-out infinite}
.kc1{opacity:0;animation:kD 12s ease-in-out infinite}
.kc3,.kr{opacity:1;animation:kC 12s ease-in-out infinite}
.kg{opacity:0;animation:kB 12s ease-in-out infinite}
.ba{display:grid;gap:14px;margin-top:36px}
.ba-c{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--line);background:#fff}
.ba-c svg{display:block;width:100%;height:auto}
.ba-l svg{filter:blur(3.5px) saturate(.5) sepia(.35) contrast(.82)}
.ba-l::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 26%,rgba(255,255,255,.95),transparent 40%),rgba(238,233,220,.38);animation:glow 4s ease-in-out infinite}
.ba-tag{position:absolute;left:14px;top:14px;z-index:2;background:rgba(255,255,255,.94);border-radius:999px;padding:7px 14px;font-size:.82rem;font-weight:600;color:var(--ink)}
.ba-note{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;background:rgba(18,48,74,.88);color:#fff;border-radius:14px;padding:10px 14px;font-size:.85rem;line-height:1.4}
.ba-arrow{display:grid;place-items:center;color:var(--sage-d);padding:2px 0}
.ba-arrow svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg);animation:none}
@media (min-width:860px){.ba{grid-template-columns:1fr 64px 1fr;align-items:center}.ba-arrow svg{transform:none;animation:nudge 2s ease-in-out infinite}}
.shero h1 .w{display:inline-block;animation:soft 1.1s ease-out both;animation-delay:calc(var(--i)*.1s + .1s)}
.l1,.l2,.l3{transform-origin:200px 200px;animation:breathe 7s ease-in-out infinite}
.l2{animation-delay:-2s}.l3{animation-delay:-4s}
.pupil{transform-box:fill-box;transform-origin:center;animation:pupil 8s ease-in-out infinite}
.spin{transform-origin:200px 200px;animation:spin 70s linear infinite}
.cloud{opacity:0;animation:clear 10s ease-in-out infinite}
.cone{stroke-dasharray:520;animation:draw 6s ease-in-out infinite alternate}
.pulse{animation:glow 3.2s ease-in-out infinite}
.bk1{animation:drift 9s ease-in-out infinite}
.bk2{animation:drift 11s ease-in-out infinite reverse}
@supports (animation-timeline:view()){.rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 28%}}
@media (prefers-reduced-motion:reduce){.site *,.site *::before,.site *::after{animation:none!important;transition:none!important}}
@media (min-width:640px){.chipf{border-radius:16px;padding:10px 16px;max-width:none;font-size:.8rem}.chipf b{font-size:1.05rem}.cf1{left:-2%}.cf2{right:-1%}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sym ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:760px){.wrap{padding-inline:32px}.cta-card{padding:52px}.ft::after{width:calc(100% - 64px)}}
@media (min-width:960px){
.nav{display:flex}.back{display:none}
.shero{padding:48px 0 96px}.shero .wrap{grid-template-columns:1.05fr .95fr}
.two{grid-template-columns:1.1fr .9fr;gap:80px}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sym ul.s3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ft .wrap{grid-template-columns:1.4fr 1fr 1fr}
.sec{padding:100px 0}.sym{padding:100px 0}.cta-band{margin-bottom:104px}
.cta-card{grid-template-columns:1.2fr .8fr;align-items:center}
}
@keyframes tk0{0%,8%{opacity:.25}12%,92%{opacity:1}100%{opacity:.25}}
@keyframes tk1{0%,26%{opacity:.25}30%,92%{opacity:1}100%{opacity:.25}}
@keyframes tk2{0%,44%{opacity:.25}48%,92%{opacity:1}100%{opacity:.25}}
@keyframes tk3{0%,62%{opacity:.25}66%,92%{opacity:1}100%{opacity:.25}}

/* ---- bloques creativos ---- */
.day-g{display:grid;gap:14px;margin-top:34px}
.day{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px 18px 20px}
.day h3{font-size:1.2rem;margin-bottom:10px}
.day svg{width:100%;height:auto;display:block;background:var(--mist);border-radius:14px}
.day .states{height:6.2rem;text-align:left;margin-top:12px}
.day .st b{font-size:1.05rem}
.blurs{animation:sharpen 10s ease-in-out infinite}
.day:nth-child(2) *{animation-delay:-2.5s}
.day:nth-child(3) *{animation-delay:-5s}
.day:nth-child(4) *{animation-delay:-7.5s}
.wipe{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--line);background:#fff;margin:34px auto 0;max-width:860px}
.wipe svg{display:block;width:100%;height:auto}
.wipe-b{position:absolute;inset:0;clip-path:inset(0 0 0 100%);animation:wipeC 10s ease-in-out infinite}
.wipe-b svg{filter:blur(6px) saturate(.7) contrast(.85)}
.wipe-l{position:absolute;top:0;bottom:0;left:0;width:3px;background:#fff;box-shadow:0 0 0 1px rgba(18,48,74,.15),0 0 18px rgba(255,255,255,.9);opacity:0;animation:wipeL 10s ease-in-out infinite}
@keyframes wipeC{0%,40%{clip-path:inset(0 0 0 0)}50%,90%{clip-path:inset(0 0 0 100%)}100%{clip-path:inset(0 0 0 0)}}
@keyframes wipeL{0%,40%{left:0;opacity:0}42%{opacity:1}50%{left:calc(100% - 3px);opacity:1}52%,90%{left:calc(100% - 3px);opacity:0}91%{left:calc(100% - 3px);opacity:1}100%{left:0;opacity:1}}
.wipe-s{max-width:860px;margin:0 auto}
.wipe-s .states{height:4.4rem}
@keyframes scan{from{transform:translateY(0)}to{transform:translateY(150px)}}
.scanl{animation:scan 3.2s ease-in-out infinite alternate}
.exam{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.exam li{display:flex;align-items:center;gap:12px;font-weight:500}
.exam i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--sage);display:grid;place-items:center}
.exam i::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.exam li:nth-child(1){animation:tk0 10s ease-in-out infinite}.exam li:nth-child(2){animation:tk1 10s ease-in-out infinite}.exam li:nth-child(3){animation:tk2 10s ease-in-out infinite}.exam li:nth-child(4){animation:tk3 10s ease-in-out infinite}
.legal{max-width:760px;margin:0 auto}
.legal h2{font-size:1.6rem;margin:38px 0 12px}
.legal p,.legal li{color:var(--mute)}
.legal ul{margin:0;padding-left:22px;display:grid;gap:6px}
.legal a{color:var(--sage-d);font-weight:600}
@media (min-width:640px){.day-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.day-g{grid-template-columns:repeat(4,minmax(0,1fr))}}
@keyframes dull{0%,40%{filter:saturate(.25) sepia(.55) contrast(.8) brightness(.95)}50%,90%{filter:none}100%{filter:saturate(.25) sepia(.55) contrast(.8) brightness(.95)}}
.dull{animation:dull 10s ease-in-out infinite}
/* comparador antes/después */
.sb-on{opacity:1}
.sb-hide{display:none}
.sb-blur{filter:blur(3.2px)}
.sb-dull{filter:saturate(.25) sepia(.55) contrast(.8) brightness(.95)}
.cmp{position:relative;border-radius:14px;overflow:hidden;background:var(--mist)}
.cmp svg{display:block;width:100%;height:auto;border-radius:0;background:none}
.cmp-b{position:absolute;inset:0;clip-path:inset(0 50% 0 0);animation:cmpC 8s ease-in-out infinite}
.cmp-l{position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(18,48,74,.18),0 0 12px rgba(255,255,255,.8);animation:cmpL 8s ease-in-out infinite}
.cmp-l::after{content:"\2039\203A";position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-size:18px;line-height:1;letter-spacing:2px;box-shadow:0 3px 10px rgba(18,48,74,.3)}
.cmp-t{position:absolute;top:8px;z-index:2;background:rgba(18,48,74,.88);color:#fff;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.cmp-t.l{left:8px}.cmp-t.r{right:8px;background:var(--sage-d)}
.cmp-c{margin-top:12px;font-size:.92rem;line-height:1.45;color:var(--mute)}
.cmp-c b{color:var(--ink);font-weight:600}
@keyframes cmpC{0%,100%{clip-path:inset(0 72% 0 0)}50%{clip-path:inset(0 28% 0 0)}}
@keyframes cmpL{0%,100%{left:28%}50%{left:72%}}