html { scroll-behavior: smooth; }
:root{--bg:#FAFAF7;--bg-soft:#F0EDE5;--bg-warm:#F6E9D7;--bg-ink:#0A0A0A;--bg-ink-2:#16140F;--fg:#0A0A0A;--fg-dim:rgba(10,10,10,0.62);--fg-mute:rgba(10,10,10,0.58);--fg-faint:rgba(10,10,10,0.42);--line:rgba(10,10,10,0.10);--line-strong:rgba(10,10,10,0.22);--inv:#FAFAF7;--inv-dim:rgba(250,250,247,0.7);--inv-mute:rgba(250,250,247,0.45);--inv-line:rgba(250,250,247,0.14);--orange:#FF5E1A;--orange-deep:#E04F0F;--gold:#C9A24E;--yellow:#FFD66B;--display:'Fraunces','Fraunces-fallback','Instrument Serif',Georgia,serif;--sans:'Geist','Geist-fallback','Inter',system-ui,sans-serif;--serif:'Fraunces','Fraunces-serif-fallback','Instrument Serif',Georgia,serif;--mono:'Geist Mono','Geist-Mono-fallback',ui-monospace,monospace;--radius:18px;--radius-lg:28px;--radius-pill:999px;--max:1680px;--pad-x:56px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad-x)}.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--fg-mute);font-weight:500}.eyebrow.on-dark{color:var(--inv-mute)}.eyebrow .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--orange);margin-right:8px;transform:translateY(-1px)}.h-display{font-family:var(--display);font-weight:500;letter-spacing:-0.045em;line-height:0.95;margin:0}.h-display .it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-0.02em}.h-display .underline{background-image:linear-gradient(var(--yellow),var(--yellow));background-repeat:no-repeat;background-size:100% 28%;background-position:0 86%;padding:0 4px}.h1{font-size:clamp(56px,8vw,132px)}.h2{font-size:clamp(40px,5.5vw,84px)}.h3{font-size:clamp(28px,3.5vw,48px)}.h4{font-size:clamp(20px,2vw,28px);font-weight:500;letter-spacing:-0.02em;line-height:1.15}.lead{font-size:20px;line-height:1.5;max-width:56ch;color:var(--fg)}.body-l{font-size:17px;line-height:1.55;color:var(--fg)}.body{font-size:15px;line-height:1.55;color:var(--fg-dim)}.nav{position:sticky;top:0;z-index:50;background:rgba(250,250,247,0.85);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}.nav-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:40px;height:88px;padding:0 var(--pad-x);max-width:var(--max);margin:0 auto}.brand{display:inline-flex;flex-direction:column;align-items:stretch;gap:0;text-decoration:none;color:inherit;line-height:1;width:fit-content}.brand .wordmark{font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:-0.005em;line-height:1;color:var(--fg);display:inline-flex;align-items:baseline}.brand .wordmark .hl,.brand .wordmark .it,.brand .wordmark .u{font-style:italic}.brand .wordmark .hl{color:var(--orange)}.brand .wordmark .u{display:inline-block;will-change:color,font-style}.brand .wordmark .u-a{animation:brand-u-a 5.2s infinite ease-in-out}.brand .wordmark .u-b{animation:brand-u-b 5.2s infinite ease-in-out}@keyframes brand-u-a{0%,45%{color:var(--orange);font-style:italic}50%,95%{color:var(--fg);font-style:italic}100%{color:var(--orange);font-style:italic}}@keyframes brand-u-b{0%,45%{color:var(--fg);font-style:italic}50%,95%{color:var(--orange);font-style:italic}100%{color:var(--fg);font-style:italic}}.footer .brand .wordmark .u-a,.footer .brand .wordmark .u-b{animation:brand-u-a-dark 5.2s infinite ease-in-out}.footer .brand .wordmark .u-b{animation-name:brand-u-b-dark}@keyframes brand-u-a-dark{0%,45%{color:var(--orange);font-style:italic}50%,95%{color:var(--inv);font-style:italic}100%{color:var(--orange);font-style:italic}}@keyframes brand-u-b-dark{0%,45%{color:var(--inv);font-style:italic}50%,95%{color:var(--orange);font-style:italic}100%{color:var(--inv);font-style:italic}}.brand .divider{display:block;height:1.5px;width:100%;background:var(--orange);margin:4px 0 3px;border:0;border-radius:1px;transform-origin:center;animation:brand-bar 5.2s infinite ease-in-out}@keyframes brand-bar{0%,45%{transform:scaleX(1)}50%,95%{transform:scaleX(0.55)}100%{transform:scaleX(1)}}.brand .divider path,.brand .divider line{display:none}.brand .tag-row{display:flex;align-items:center;justify-content:center;width:100%}.brand .tag-line{display:none}.brand .tagline{font-family:var(--display);font-style:italic;font-size:11px;letter-spacing:0.34em;color:var(--orange);text-transform:lowercase;white-space:nowrap;padding-right:2px;padding-left:1px}.footer .brand .wordmark{color:var(--inv)}.brand .mark{width:28px;height:28px;display:none}.brand .mark.animated .sm-circles circle{transform-origin:center;transform-box:fill-box;animation:sm-pulse 3.6s ease-in-out infinite}.brand .mark.animated .sm-circles circle:nth-child(1){animation-delay:0s}.brand .mark.animated .sm-circles circle:nth-child(2){animation-delay:0.18s}.brand .mark.animated .sm-circles circle:nth-child(3){animation-delay:0.36s}.brand .mark.animated .sm-circles circle:nth-child(4){animation-delay:0.54s}.brand .mark.animated .sm-circles circle:nth-child(5){animation-delay:0.72s}.brand .mark.animated .sm-circles circle:nth-child(6){animation-delay:0.9s}@keyframes sm-pulse{0%,100%{transform:scale(1);opacity:0.95}50%{transform:scale(1.18);opacity:1}}.wordmark{width:100%;height:auto;display:block}.wordmark .sm-circles circle{transform-origin:center;transform-box:fill-box;animation:sm-pulse-large 4.8s ease-in-out infinite}.wordmark .sm-circles circle:nth-child(1){animation-delay:0s}.wordmark .sm-circles circle:nth-child(2){animation-delay:0.12s}.wordmark .sm-circles circle:nth-child(3){animation-delay:0.24s}.wordmark .sm-circles circle:nth-child(4){animation-delay:0.36s}.wordmark .sm-circles circle:nth-child(5){animation-delay:0.48s}.wordmark .sm-circles circle:nth-child(6){animation-delay:0.6s}.wordmark .sm-circles circle:nth-child(7){animation-delay:0.72s}.wordmark .sm-circles circle:nth-child(8){animation-delay:0.84s}@keyframes sm-pulse-large{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}.brand .name,.brand .sub{display:none}.nav-links{display:flex;justify-content:center;gap:2px;font-size:14px;white-space:nowrap}.nav-links a{white-space:nowrap}.nav-links a{padding:8px 12px;font-size:13px;border-radius:var(--radius-pill);color:var(--fg);transition:background 160ms ease,color 160ms ease}.nav-links a:hover{background:var(--bg-soft)}.nav-links a.active{background:var(--fg);color:var(--inv)}.nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}.lang-toggle{display:inline-flex;font-family:var(--mono);font-size:11px;letter-spacing:0.1em;background:var(--bg-soft);border-radius:var(--radius-pill);padding:6px 4px;gap:2px}.lang-toggle button{padding:4px 8px;font-size:10px;border-radius:var(--radius-pill);color:var(--fg-mute)}.lang-toggle button.on{background:var(--fg);color:var(--inv)}.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:var(--radius-pill);background:var(--fg);color:var(--inv);font-size:13px;font-weight:500;letter-spacing:-0.005em;transition:transform 160ms ease,background 160ms ease}.btn:hover{transform:translateY(-1px)}.btn-accent{background:var(--orange);color:#fff}.btn-accent:hover{background:var(--orange-deep)}.btn-ghost{background:transparent;border:1px solid var(--line-strong);color:var(--fg)}.btn-ghost:hover{background:var(--bg-soft)}.btn-large{padding:18px 30px;font-size:14px}.btn .arr{display:inline-block;transition:transform 220ms ease}.btn:hover .arr{transform:translateX(3px)}.section{padding:96px 0}.section-tight{padding:64px 0}.section-dark{background:var(--bg-ink);color:var(--inv)}.section-dark .body{color:var(--inv-dim)}.section-dark .eyebrow{color:var(--inv-mute)}.section-head{display:grid;grid-template-columns:0.8fr 1.2fr;gap:48px;align-items:end;margin-bottom:56px}.section-head .col-l{padding-top:4px}.card{border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;background:var(--bg);display:flex;flex-direction:column;gap:16px;transition:transform 220ms ease,border-color 220ms ease}.card:hover{transform:translateY(-4px);border-color:var(--line-strong)}.card .num{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;color:var(--fg-mute)}.card .title{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-0.02em;line-height:1.15;margin:0}.card .desc{font-size:14px;line-height:1.55;color:var(--fg-dim);margin:0}.card .more{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:0.1em;color:var(--orange);text-transform:uppercase;margin-top:auto}.card.dark{background:var(--bg-ink);color:var(--inv);border-color:transparent}.card.dark .desc{color:var(--inv-dim)}.card.dark .num{color:var(--inv-mute)}.card.warm{background:var(--bg-warm);border-color:transparent}.card.accent{background:var(--orange);color:#fff;border-color:transparent}.card.accent .desc,.card.accent .num{color:rgba(255,255,255,0.9)}.card.accent .more{color:#fff}.footer{background:var(--bg-ink);color:var(--inv);padding:96px 0 32px}.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;margin-bottom:80px}.footer-grid>div:nth-child(5),.footer-grid>div:nth-child(6){grid-column:span 2}.footer ul li{line-height:1.4}.footer-bottom{border-top:1px solid var(--inv-line);padding-top:24px;display:grid;grid-template-columns:auto auto 1fr;gap:24px;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--inv-mute)}.footer-bottom .legal-links{justify-self:end;display:inline-flex;gap:10px;align-items:center}.footer-bottom .legal-links a{color:var(--inv-mute);transition:color 160ms ease}.footer-bottom .legal-links a:hover{color:var(--orange)}.footer-bottom .legal-links .sep{color:var(--inv-line)}.footer h4{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;font-weight:500;color:var(--inv-mute);margin:0 0 20px}.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:14px}.footer ul a{color:var(--inv-dim);transition:color 160ms ease}.footer ul a:hover{color:var(--inv)}.footer-tag{color:var(--inv-dim);font-size:14px;line-height:1.55;max-width:320px;margin:16px 0 0}.footer-bottom-old{display:none}.footer-mark{font-family:var(--display);font-weight:100;font-size:clamp(88px,8vw,148px);letter-spacing:-0.06em;line-height:0.85;color:var(--inv);margin:80px 0 60px;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 24px;max-width:100%;overflow-wrap:break-word}.footer-mark .it{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--orange)}.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:36px 0}.marquee-track{display:flex;gap:64px;white-space:nowrap;animation:marquee 40s linear infinite;font-family:var(--display);font-size:36px;font-weight:500;letter-spacing:-0.03em;color:var(--fg-dim);align-items:center}.marquee-track .dot{width:10px;height:10px;border-radius:50%;background:var(--orange);flex-shrink:0}@keyframes marquee{to{transform:translateX(-33.33%)}}.float{animation:float 7s ease-in-out infinite}.float-slow{animation:float 11s ease-in-out infinite}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}.pulse-dot{animation:pulse 2.4s ease-in-out infinite}@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:0.5}}.reveal{opacity:0;transform:translateY(20px);transition:opacity 700ms ease,transform 700ms ease}.reveal.in{opacity:1;transform:translateY(0)}.page-head{padding:80px 0 64px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}.breadcrumb{display:flex;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-mute);margin-bottom:36px}.breadcrumb a{color:var(--fg-mute)}.breadcrumb a:hover{color:var(--orange)}.breadcrumb .sep{color:var(--fg-faint)}.page-head h1{font-family:var(--display);font-weight:500;letter-spacing:-0.045em;line-height:0.95;font-size:clamp(48px,7vw,108px);margin:0;max-width:14ch}.page-head .lead-row{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:end;margin-top:48px}.circle{position:absolute;border-radius:50%;pointer-events:none}.circle.orange{background:var(--orange)}.circle.yellow{background:var(--yellow)}.circle.ring{background:transparent;border:1px solid var(--line-strong)}.circle.ring-orange{background:transparent;border:1px solid var(--orange)}.field{display:flex;flex-direction:column;gap:6px}.field label{font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--fg-mute)}.field input,.field textarea,.field select{font:inherit;background:transparent;border:none;border-bottom:1px solid var(--line-strong);padding:12px 0;color:var(--fg);outline:none;transition:border-color 160ms ease;width:100%}.field input:focus,.field textarea:focus{border-color:var(--orange)}.field textarea{min-height:100px;resize:vertical}.tag{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-pill);background:var(--bg-soft);font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-dim)}.tag .dot{width:6px;height:6px;border-radius:50%;background:var(--orange)}.tag.dark{background:var(--inv-line);color:var(--inv-dim)}.divider{border-top:1px solid var(--line);margin:0}@media (max-width:900px){:root{--pad-x:24px}.nav-inner{grid-template-columns:auto auto}.nav-links{display:none}.section-head{grid-template-columns:1fr;gap:24px;align-items:start}.footer-grid{grid-template-columns:1fr 1fr}.page-head .lead-row{grid-template-columns:1fr;gap:24px}}#summum-cookie-banner{position:fixed;bottom:20px;left:20px;right:20px;z-index:9999;background:var(--bg-ink);color:var(--inv);border-radius:var(--radius-lg);padding:20px 28px;box-shadow:0 20px 60px rgba(0,0,0,0.25),0 0 0 1px rgba(255,255,255,0.06);max-width:880px;margin:0 auto;transition:opacity 300ms ease,transform 300ms ease;font-family:var(--sans)}#summum-cookie-banner .cc-inner{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}#summum-cookie-banner .cc-text{font-size:14px;line-height:1.5;color:var(--inv-dim);margin:0;max-width:56ch}#summum-cookie-banner .cc-actions{display:inline-flex;gap:10px;align-items:center}#summum-cookie-banner .cc-btn{font:inherit;padding:12px 20px;border-radius:var(--radius-pill);font-size:13px;letter-spacing:-0.005em;font-weight:500;border:0;cursor:pointer;transition:transform 160ms ease,background 160ms ease;text-decoration:none;display:inline-flex;align-items:center}#summum-cookie-banner .cc-btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.2);color:var(--inv)}#summum-cookie-banner .cc-btn.ghost:hover{background:rgba(255,255,255,0.06)}#summum-cookie-banner .cc-btn.accept{background:var(--orange);color:#fff}#summum-cookie-banner .cc-btn.accept:hover{background:var(--orange-deep);transform:translateY(-1px)}@media (max-width:760px){#summum-cookie-banner .cc-inner{grid-template-columns:1fr;gap:16px}#summum-cookie-banner .cc-actions{flex-wrap:wrap}}.mobile-toggle{display:none;width:36px;height:36px;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;background:none;border:0;padding:0;position:relative;z-index:60}.mobile-toggle span{width:20px;height:2px;background:var(--fg);transition:transform 250ms ease,opacity 250ms ease;border-radius:1px}.nav.mobile-open .mobile-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav.mobile-open .mobile-toggle span:nth-child(2){opacity:0}.nav.mobile-open .mobile-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}@media (max-width:900px){.mobile-toggle{display:inline-flex}.nav-links{position:fixed;inset:72px 0 0 0;background:var(--bg);display:flex !important;flex-direction:column;align-items:stretch;padding:32px var(--pad-x);gap:4px;z-index:55;transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity 220ms ease,transform 220ms ease}.nav.mobile-open .nav-links{transform:translateY(0);opacity:1;pointer-events:auto}.nav-links a{font-size:24px;font-family:var(--display);font-weight:500;padding:16px 0;min-height:44px;border-bottom:1px solid var(--line);letter-spacing:-0.02em}.nav.mobile-open .nav-right{display:flex !important;position:fixed;left:0;right:0;bottom:0;z-index:56;background:var(--bg);padding:20px var(--pad-x) 28px;border-top:1px solid var(--line);flex-direction:column;gap:16px;align-items:stretch}.nav.mobile-open .nav-right .lang-toggle{justify-content:center}.nav.mobile-open .nav-right .lang-toggle button{min-width:44px;min-height:44px}.nav.mobile-open .nav-right .btn{justify-content:center;padding:16px 28px;min-height:48px}.nav-right{display:none}}.skip-link{position:absolute;top:-100px;left:0;background:var(--orange);color:var(--fg);padding:14px 24px;font-family:var(--mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;z-index:1000;transform:translateY(-100%);transition:transform 200ms ease;text-decoration:none}.skip-link:focus{top:12px;left:12px;transform:translateY(0)}*:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.read-progress{position:fixed;top:0;left:0;width:0%;height:3px;background:linear-gradient(90deg,var(--orange),var(--yellow));z-index:100;transition:width 80ms linear}@media print{.nav,.footer,#sticky-cta,#summum-cookie-banner,.marquee,.lang-toggle,.btn-accent,[class*="circle"]{display:none !important}body{color:#000;background:#fff}a{color:#000;text-decoration:underline}.wrap{max-width:100%;padding:0}.section,.section-tight{padding:24px 0}h1,h2,h3{color:#000}}.theme-toggle{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-soft);color:var(--fg);border:0;border-radius:50%;cursor:pointer;padding:0;transition:all 200ms ease}.theme-toggle:hover{background:var(--fg);color:var(--inv);transform:rotate(40deg)}html[data-theme="dark"]{--bg:#0F0E0C;--bg-soft:#18170F;--bg-warm:#1F1B14;--bg-ink:#FAFAF7;--bg-ink-2:#F0EDE5;--fg:#FAFAF7;--fg-dim:rgba(250,250,247,0.7);--fg-mute:rgba(250,250,247,0.45);--fg-faint:rgba(250,250,247,0.18);--line:rgba(250,250,247,0.14);--line-strong:rgba(250,250,247,0.28);--inv:#0F0E0C;--inv-dim:rgba(15,14,12,0.7);--inv-mute:rgba(15,14,12,0.45);--inv-line:rgba(15,14,12,0.14)}html[data-theme="dark"] body{background:#0F0E0C}html[data-theme="dark"] .nav{background:rgba(15,14,12,0.85)}html[data-theme="dark"] .footer{background:var(--bg-soft);color:var(--fg)}html[data-theme="dark"] .marquee-track{color:var(--fg-dim)}html[data-theme="dark"] .theme-toggle{background:var(--bg-soft)}.reveal-text{opacity:0;transform:translateY(20px);transition:opacity 720ms cubic-bezier(0.16,1,0.3,1),transform 720ms cubic-bezier(0.16,1,0.3,1)}.reveal-text.in{opacity:1;transform:translateY(0)}.mask-reveal{display:inline-block;overflow:hidden;vertical-align:bottom}.mask-reveal>span{display:inline-block;transform:translateY(110%);transition:transform 840ms cubic-bezier(0.85,0,0.15,1)}.mask-reveal.in>span{transform:translateY(0)}.stagger>*{opacity:0;transform:translateY(16px);transition:opacity 600ms ease,transform 600ms cubic-bezier(0.16,1,0.3,1)}.stagger.in>*:nth-child(1){transition-delay:0ms}.stagger.in>*:nth-child(2){transition-delay:80ms}.stagger.in>*:nth-child(3){transition-delay:160ms}.stagger.in>*:nth-child(4){transition-delay:240ms}.stagger.in>*:nth-child(5){transition-delay:320ms}.stagger.in>*:nth-child(6){transition-delay:400ms}.stagger.in>*{opacity:0}.stagger.in>*{opacity:1;transform:translateY(0)}.marquee{overflow:hidden;position:relative;padding:16px 0}.marquee-track{display:flex;width:max-content;animation:marquee 32s linear infinite;gap:64px}.marquee-track:hover{animation-play-state:paused}@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}.marquee-item{font-family:var(--mono);font-size:14px;letter-spacing:0.08em;text-transform:uppercase;color:var(--fg-mute);white-space:nowrap}.card-lift{transition:transform 280ms cubic-bezier(0.16,1,0.3,1),box-shadow 280ms ease}.card-lift:hover{transform:translateY(-6px);box-shadow:0 32px 60px rgba(20,17,13,0.12)}.cursor-parallax{transition:transform 240ms cubic-bezier(0.16,1,0.3,1)}@media (prefers-reduced-motion:reduce){.reveal-text,.reveal,.mask-reveal>span,.stagger>*{transition:none !important;opacity:1 !important;transform:none !important}.marquee-track{animation:none !important}}.brand-intro .wordmark{display:inline-block}.brand-intro .wordmark>*{display:inline-block;opacity:0;transform:translateY(20px);animation:brandLetterIn 0.5s forwards}.brand-intro .wordmark>*:nth-child(1){animation-delay:0.0s}.brand-intro .wordmark>*:nth-child(2){animation-delay:0.10s}.brand-intro .wordmark>*:nth-child(3){animation-delay:0.20s}.brand-intro .wordmark>*:nth-child(4){animation-delay:0.30s}.brand-intro .wordmark>*:nth-child(5){animation-delay:0.40s}.brand-intro .wordmark>*:nth-child(6){animation-delay:0.50s}@keyframes brandLetterIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.brand-intro .wordmark>*{opacity:1 !important;transform:none !important;animation:none !important}}.post-head-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}.post-head-grid h1{max-width:100%}.post-illus{position:relative;transform:translateZ(0);opacity:0;transform:translateY(20px);transition:opacity 800ms cubic-bezier(0.16,1,0.3,1),transform 800ms cubic-bezier(0.16,1,0.3,1)}.post-illus.in{opacity:1;transform:translateY(0)}.post-illus img,.post-illus svg,.post-illus object{width:100%;height:auto;max-height:360px;display:block;border-radius:16px;box-shadow:0 24px 60px rgba(20,17,13,0.08)}.post-illus::before{content:"";position:absolute;inset:-8px;border-radius:20px;background:linear-gradient(135deg,var(--orange),var(--yellow));opacity:0.06;z-index:-1;transform:rotate(-1deg)}@media (max-width:900px){.post-head-grid{grid-template-columns:1fr}.post-illus{order:-1;max-width:480px;margin:0 auto 24px}}@media (prefers-reduced-motion:reduce){.post-illus{opacity:1 !important;transform:none !important}}html,body{overflow-x:hidden;max-width:100vw}img,video,iframe,svg{max-width:100%;height:auto}table{max-width:100%}@media (hover:none) and (pointer:coarse){.btn,button,a.btn,.mobile-toggle,.lang-toggle button,.theme-toggle,.cc-btn,.nav-links a,.footer a,.mm-link,.mm-feature{min-height:44px;display:inline-flex;align-items:center}}@media (max-width:480px){.wrap,.nav-inner{padding-left:16px !important;padding-right:16px !important}h1,.h-display{font-size:clamp(28px,8vw,44px) !important;line-height:1.15 !important;word-break:break-word}h2{font-size:clamp(22px,6vw,32px) !important}h3{font-size:clamp(18px,5vw,24px) !important}p,li{font-size:16px !important;line-height:1.6 !important}.mono,.eyebrow,.pm-dot ~ span,.post-meta span,[class*="mono"],.breadcrumb{font-size:11px !important;letter-spacing:0.08em !important}.hero{padding:48px 0 32px !important}.hero-circles{transform:scale(0.7)}.stats{grid-template-columns:1fr 1fr !important;gap:12px !important}.stat .v{font-size:28px !important}.megamenu{width:100vw !important;left:0 !important;right:0 !important}.mm-cols{grid-template-columns:1fr !important;gap:24px !important}.mm-rail{grid-template-columns:1fr !important}.post-head-grid{grid-template-columns:1fr !important;gap:24px !important}.post-illus{max-width:360px;margin:0 auto !important}.post-illus img{max-height:240px !important}table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}table.no-scroll{display:table;white-space:normal}.footer-grid{grid-template-columns:1fr !important;gap:32px !important}.btn{padding:14px 22px !important;font-size:13px !important;min-height:48px !important}.btn-accent{width:100%;justify-content:center}.related-grid,.art-grid,.cluster-section .grid{grid-template-columns:1fr !important}#summum-cookie-banner{width:calc(100% - 16px) !important;left:8px !important;right:8px !important;bottom:8px !important}.lang-toggle{gap:4px}.lang-toggle button{padding:6px 8px !important;min-width:36px}.faq-item summary{font-size:16px !important;padding-right:28px !important}.faq-item p{font-size:15px !important}.post-body .wrap{padding:0 16px !important}.post-toc{padding:16px !important;font-size:14px !important}}@media (max-width:640px){.post-head{padding:48px 0 32px !important}.post-cta h2{font-size:clamp(28px,7vw,44px) !important}.ph-eyebrow{flex-wrap:wrap}.has-megamenu .megamenu{position:static;box-shadow:none;padding:0}.megamenu-trigger .mm-caret{transition:transform 200ms}.has-megamenu[open] .megamenu-trigger .mm-caret{transform:rotate(180deg)}}@media (max-width:900px) and (orientation:landscape) and (max-height:500px){.hero{padding:32px 0 !important}h1,.h-display{font-size:32px !important}}@media (hover:none) and (pointer:coarse){.card-lift:hover{transform:none}.reveal-text,.mask-reveal{transition-duration:400ms}}
::selection { background: #FF5E1A; color: #fff; }

/* === MEGAMENU FIX 2026-05-17 === */
.has-megamenu{position:relative}
.megamenu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-12px);background:var(--bg);border:1px solid var(--line);border-radius:24px;box-shadow:0 24px 64px rgba(0,0,0,0.12);padding:40px;min-width:1080px;max-width:90vw;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 220ms ease,transform 220ms ease,visibility 220ms;z-index:1000}
.has-megamenu:hover .megamenu,.has-megamenu:focus-within .megamenu,.megamenu:hover{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.megamenu-inner{display:flex;gap:32px;align-items:flex-start}
.mm-cols{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;flex:1}
.mm-col{display:flex;flex-direction:column;gap:2px}
.mm-col-h{display:flex;align-items:baseline;gap:8px;font-family:var(--display);font-weight:500;font-size:12px;color:var(--fg-mute);text-transform:uppercase;letter-spacing:0.08em;padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.mm-num{font-family:var(--mono);font-size:10px;color:var(--orange);font-weight:500}
.mm-link{display:flex;flex-direction:column;padding:8px 8px;margin:0 -8px;border-radius:8px;transition:background 180ms}
.mm-link:hover{background:var(--bg-warm)}
.mm-name{font-family:var(--display);font-weight:500;font-size:14px;color:var(--fg);letter-spacing:-0.01em}
.mm-desc{font-size:11px;color:var(--fg-dim);margin-top:2px;line-height:1.3}
.mm-rail{width:220px;display:flex;flex-direction:column;gap:12px;padding-left:24px;border-left:1px solid var(--line)}
.mm-feature{display:flex;flex-direction:column;padding:14px 16px;background:var(--bg-warm);border-radius:14px;transition:transform 180ms;text-decoration:none}
.mm-feature:hover{transform:translateY(-2px)}
.mm-feature.dark{background:var(--fg);color:var(--bg)}
.mm-feature-tag{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:0.12em;color:var(--orange);margin-bottom:4px}
.mm-feature.dark .mm-feature-tag{color:var(--yellow)}
.mm-feature-name{font-family:var(--display);font-weight:500;font-size:15px}
.mm-feature-desc{font-size:11px;color:var(--fg-dim);margin-top:2px;line-height:1.3}
.mm-feature.dark .mm-feature-desc{color:rgba(250,250,247,0.7)}
.mm-feature-arr{color:var(--orange);margin-top:8px;align-self:flex-end;font-size:14px}
.mm-feature.dark .mm-feature-arr{color:var(--yellow)}
.mm-offices{padding:12px 0 0;border-top:1px solid var(--line);margin-top:4px}
.mm-offices-h{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:var(--fg-mute);margin-bottom:8px}
.mm-offices a{display:block;padding:3px 0;font-size:12px;color:var(--fg);text-decoration:none}
.mm-offices a:hover{color:var(--orange)}
.mm-foot{display:flex;flex-direction:column;gap:4px;padding-left:24px;min-width:200px;border-left:1px solid var(--line)}
.mm-foot-link{font-family:var(--display);font-size:13px;color:var(--fg-dim);padding:8px 0;text-decoration:none;border-bottom:1px solid var(--line)}
.mm-foot-link:hover{color:var(--orange)}
.mm-foot-link:last-child{border-bottom:none}
.mm-caret{display:inline-block;margin-left:4px;transition:transform 200ms;font-size:10px}
.has-megamenu:hover .mm-caret,.has-megamenu:focus-within .mm-caret{transform:rotate(180deg)}
@media (max-width:1100px){
  .megamenu{min-width:auto;width:calc(100vw - 32px);left:16px;transform:translateY(-12px) translateX(0)}
  .has-megamenu:hover .megamenu,.has-megamenu:focus-within .megamenu{transform:translateY(0) translateX(0)}
  .megamenu-inner{flex-direction:column}
  .mm-cols{grid-template-columns:repeat(2,1fr)}
  .mm-rail{width:auto;padding-left:0;border-left:none;border-top:1px solid var(--line);padding-top:24px;flex-direction:row;flex-wrap:wrap;gap:8px}
  .mm-feature{flex:1;min-width:160px}
  .mm-foot{padding-left:0;border-left:none;border-top:1px solid var(--line);padding-top:16px;flex-direction:row;flex-wrap:wrap}
  .mm-foot-link{border-bottom:none;padding:6px 12px;background:var(--bg-warm);border-radius:8px;font-size:12px}
}
@media (max-width:640px){
  .megamenu{padding:24px;display:none}
  .has-megamenu:hover .megamenu,.has-megamenu:focus-within .megamenu{display:block}
  .mm-cols{grid-template-columns:1fr}
}

/* === FIXES 2026-05-17 17:20 === */
/* Fix 1: Forzar visibilidad de letras "u" en wordmark (la animación brand-u-a/b las pone opacity 0) */
.wordmark .u,
.wordmark .u-a,
.wordmark .u-b,
.brand .wordmark .u,
.brand .wordmark .u-a,
.brand .wordmark .u-b {
  opacity: 1 !important;
  animation: none !important;
  color: var(--orange) !important;
  display: inline-block !important;
  font-style: italic !important;
}

/* Fix 2: Megamenu se sale por izquierda. Cambiar anclaje a header.nav (full width) */
header.nav { position: relative; }
.has-megamenu { position: static !important; }
.megamenu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(-12px) !important;
  width: calc(100vw - 32px) !important;
  max-width: 1200px !important;
  min-width: auto !important;
  margin: 0 !important;
}
.has-megamenu:hover .megamenu,
.has-megamenu:focus-within .megamenu,
.megamenu:hover {
  transform: translateX(-50%) translateY(0) !important;
}

/* Fix 3: Cards Kit Digital/Consulting muy estrechos. Ampliar rail */
.mm-rail {
  width: 280px !important;
  flex-shrink: 0;
  padding-left: 28px;
}
.mm-feature {
  padding: 18px 20px !important;
  min-height: 90px;
}
.mm-feature-name {
  font-size: 16px !important;
  line-height: 1.2;
  margin-bottom: 4px;
}
.mm-feature-desc {
  font-size: 12px !important;
  line-height: 1.4;
  word-wrap: break-word;
  white-space: normal !important;
}
.mm-foot { min-width: 220px; padding-left: 28px; }

/* Fix 4: Alineación "Servicios" con otros nav items */
.nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 28px;
}
.nav-links > a,
.nav-links .has-megamenu {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 15px;
  color: var(--fg);
  text-decoration: none;
  line-height: 1;
}
.megamenu-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px;
  cursor: pointer;
  color: var(--fg);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 400;
  font-size: 15px;
}
.mm-caret { font-size: 9px; opacity: 0.6; }

/* Fix 5: Megamenu inner padding adecuado */
.megamenu {
  padding: 36px 40px !important;
}
.megamenu-inner {
  gap: 28px !important;
}

@media (max-width: 1200px) {
  .megamenu { width: calc(100vw - 32px) !important; }
  .mm-rail { width: 240px !important; }
}
@media (max-width: 900px) {
  .megamenu-inner { flex-direction: column; }
  .mm-rail { width: 100% !important; border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 24px; flex-direction: row; flex-wrap: wrap; }
  .mm-foot { width: 100%; padding-left: 0; border-left: none; border-top: 1px solid var(--line); padding-top: 16px; flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .mm-feature { flex: 1 1 200px; min-width: 200px; }
}

/* === FIXES v3 2026-05-17 17:30 === */
/* Tamaño del logo (cabecera .brand-svg / pie .brand-img-footer): consolidado
   2026-07-14 en un único bloque canónico, ver "LOGO DE CABECERA" más abajo.
   Antes había 6 declaraciones distintas de .brand-img/.brand-img-footer
   repartidas por este fichero (algunas !important, una con un filter que
   corrompía el color de marca) peleando entre sí — Summum Marketing. */

/* Megamenu grid layout - cols+rail en row 1, foot en row 2 full-width */
.megamenu-inner {
  display: grid !important;
  grid-template-columns: 1fr 280px !important;
  grid-template-rows: auto auto !important;
  gap: 32px !important;
  align-items: start;
}
.mm-cols {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 24px !important;
}
.mm-rail {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  padding-left: 24px !important;
  border-left: 1px solid var(--line) !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mm-foot {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 24px !important;
  padding-top: 24px !important;
  padding-left: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-left: none !important;
  min-width: auto !important;
}
.mm-foot-link { padding: 4px 0; border-bottom: none !important; flex: 0 0 auto; }

/* Servicios font igual al resto */
.megamenu-trigger,
.nav-links > a,
.nav-links > .has-megamenu > a {
  font-family: var(--display) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  letter-spacing: -0.005em !important;
  color: var(--fg) !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
}
.has-megamenu .megamenu-trigger { font-style: normal !important; }

@media (max-width: 900px) {
  .megamenu-inner { grid-template-columns: 1fr !important; }
  .mm-cols { grid-column: 1 !important; grid-template-columns: repeat(2, 1fr) !important; }
  .mm-rail { grid-column: 1 !important; grid-row: 2 !important; padding-left: 0 !important; border-left: none !important; border-top: 1px solid var(--line); padding-top: 24px; flex-direction: row; flex-wrap: wrap; width: 100% !important; }
  .mm-foot { grid-row: 3 !important; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .mm-cols { grid-template-columns: 1fr !important; }
}

/* === FIXES v4 2026-05-17 — consolidación 6 agentes === */
/* H1 lp-hero igualar a home */
.lp-hero h1, .page-head h1, section.lp-hero h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(48px, 7vw, 108px) !important;
  letter-spacing: -0.045em;
  line-height: 0.95;
}
/* Padding hero unificar */
.lp-hero { padding: 96px 0 80px !important; }

/* Focus visible en megamenu trigger */
.megamenu-trigger:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
  border-radius: 4px;
}
.megamenu-trigger { gap: 6px !important; }
.mm-caret { transform: translateY(1px); }

/* Footer-bottom responsive */
@media (max-width: 760px) {
  .footer-bottom { grid-template-columns: 1fr !important; text-align: center; gap: 16px; }
  .footer-bottom .legal-links { justify-self: center; flex-wrap: wrap; }
}

/* Footer mark mobile fix */
@media (max-width: 480px) {
  .footer-mark { font-size: clamp(56px, 14vw, 140px) !important; }
}

/* Cookie banner safe-area */
#summum-cookie-banner {
  padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
}

/* Contrast accessibility: --fg-mute más contrastado */
:root {
  --fg-mute: rgba(10, 10, 10, 0.65);
}

/* prefers-reduced-motion ampliar */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Refuerzo centrado megamenu en breakpoint medio */
@media (max-width: 1100px) and (min-width: 641px) {
  .megamenu {
    left: 50% !important;
    transform: translateX(-50%) translateY(-12px) !important;
  }
  .has-megamenu:hover .megamenu,
  .has-megamenu:focus-within .megamenu {
    transform: translateX(-50%) translateY(0) !important;
  }
}

/* Social placeholder estilo */
.footer-social-placeholder { display: inline-block; padding: 4px 0; cursor: not-allowed; }

/* === FIX overflow megamenu v5 2026-05-17 17:55 === */
.megamenu {
  overflow: hidden !important;
}
.megamenu-inner {
  grid-template-columns: minmax(0, 1fr) 280px !important;
  width: 100% !important;
  max-width: 100% !important;
}
.mm-cols {
  min-width: 0 !important;
  max-width: 100% !important;
}
.mm-rail {
  min-width: 0 !important;
  max-width: 280px !important;
  box-sizing: border-box !important;
}
.mm-foot {
  min-width: 0 !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
}
.mm-feature {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.mm-offices {
  max-width: 100% !important;
}

/* === Fix gap separación cols/rail + texto break === */
.megamenu-inner {
  gap: 48px !important;
  grid-template-columns: minmax(0, 1fr) 240px !important;
}
.mm-rail {
  max-width: 240px !important;
  width: 100% !important;
  padding-left: 20px !important;
}
.mm-cols {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 20px !important;
}
.mm-col {
  min-width: 0;
  overflow: hidden;
}
.mm-link, .mm-link .mm-name, .mm-link .mm-desc {
  display: block;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}
.mm-link .mm-name { font-size: 13px !important; }
.mm-link .mm-desc { font-size: 11px !important; line-height: 1.3; }
.mm-feature { padding: 14px 16px !important; }
.mm-feature-name { font-size: 14px !important; }
.mm-feature-desc { font-size: 11px !important; line-height: 1.35; }

/* === FIX menu activo texto invisible 2026-05-17 18:50 === */
.nav-links a.active,
.nav-links > .has-megamenu > a.active,
.nav-links a[aria-current="page"] {
  background: var(--fg) !important;
  color: white !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
}
.nav-links a.active .mm-caret,
.nav-links a[aria-current="page"] .mm-caret {
  color: white !important;
}

/* === BLOG mejora ancho + estética === */
.post-body, article.post-content, .post-content {
  max-width: 880px !important;
  margin: 0 auto;
}
.post-figure { margin: 40px 0; padding: 24px; background: var(--bg-warm); border-radius: 24px; text-align: center; }
.post-figure img, .post-figure svg { max-width: 100%; height: auto; border-radius: 16px; }
.post-figure figcaption { margin-top: 16px; font-family: var(--mono); font-size: 13px; color: var(--fg-dim); }
.post-callout { background: linear-gradient(135deg, rgba(255,94,26,0.08), rgba(255,184,0,0.08)); border-left: 4px solid var(--orange); padding: 24px 32px; border-radius: 0 16px 16px 0; margin: 32px 0; }
.post-callout h3 { color: var(--orange); margin-top: 0; }
.post-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 32px 0; }
.post-stat { background: var(--bg-warm); padding: 24px; border-radius: 16px; text-align: center; }
.post-stat .num { font-family: var(--display); font-size: 36px; color: var(--orange); font-weight: 500; }
.post-stat .lbl { font-size: 13px; color: var(--fg-dim); margin-top: 6px; }

/* === FIXES UI mobile menu + logo 2026-05-17 22:30 === */
/* Mobile menu: dar fondo sólido al panel desplegable */
.nav.mobile-open .nav-links,
.nav-links.open,
header.nav nav.nav-links.open {
  background: var(--bg) !important;
  position: fixed !important;
  top: 80px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 998 !important;
  padding: 32px 24px !important;
  overflow-y: auto !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

/* Mobile menu items con fondo y separación */
@media (max-width: 900px) {
  .nav-links { background: var(--bg); }
  .nav-links > a, .nav-links > .has-megamenu > a {
    display: block !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid var(--line) !important;
    font-size: 17px !important;
    background: transparent !important;
    color: var(--fg) !important;
  }
  /* Megamenu desplegable mobile con fondo */
  .megamenu {
    background: var(--bg-warm) !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
    margin-top: 8px !important;
    position: relative !important;
    transform: none !important;
    left: 0 !important;
    width: 100% !important;
    padding: 24px !important;
  }
  /* Fix nav-right en mobile */
  .nav-right { padding-top: 16px; border-top: 1px solid var(--line); margin-top: 8px; }
  .lang-toggle { justify-content: center; }
}

/* Logo: contenedor .brand siempre centrado, alto libre (lo fija el hijo real:
   .brand-svg en cabecera, .brand-img-footer en pie — ver bloque canónico). */
.brand { display: inline-flex; align-items: center; }

/* Quitar byline visible "Por Ángel Ortega Castro" del meta hero (clase visible) */
.lp-hero .meta span:has-text("Por Ángel") { display: none; }

/* === FIX 2026-05-17 23:00 — menú activo texto invisible === */
.nav-links a.active,
.nav-links a.active *,
.nav-links a.active span,
.nav-links > .has-megamenu > a.active,
.nav-links > .has-megamenu > a.active *,
.nav-links a[aria-current="page"],
.nav-links a[aria-current="page"] * {
  color: white !important;
  background: var(--fg) !important;
}
.nav-links a.active {
  padding: 8px 16px !important;
  border-radius: 999px !important;
  display: inline-block;
}
.nav-links a.active span {
  background: transparent !important;
}
.nav-links a.active .mm-caret,
.nav-links a.active .arr {
  color: var(--yellow) !important;
  background: transparent !important;
}

/* === MEJORA UX MEGAMENU 2026-05-17 23:10 === */
/* 1. Trigger con área hover amplia */
.has-megamenu .megamenu-trigger {
  padding: 16px 18px !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  position: relative;
}

/* 2. Bridge invisible entre trigger y megamenu (área de cursor segura) */
.has-megamenu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 24px;  /* puente invisible */
  background: transparent;
  pointer-events: none;
  z-index: 999;
}
.has-megamenu:hover::after,
.has-megamenu:focus-within::after {
  pointer-events: auto;  /* activo al hover */
}

/* 3. Megamenu pegado al trigger (sin gap) + área extendida arriba con padding */
.megamenu {
  top: 100% !important;  /* pegado, no calc(100% + 8px) */
  padding-top: 48px !important;  /* padding generoso para que cursor pueda entrar */
  margin-top: -16px;  /* ligero solape con trigger para evitar pérdida hover */
}

/* 4. Delay en cierre — el megamenu se queda 300ms abierto tras cursor leave */
.megamenu {
  transition: opacity 220ms ease, transform 220ms ease, visibility 0ms linear 300ms !important;
}
.has-megamenu:hover .megamenu,
.has-megamenu:focus-within .megamenu {
  transition: opacity 180ms ease, transform 220ms ease, visibility 0ms !important;
}

/* 5. Items del megamenu con área clickeable AMPLIA */
.mm-link {
  padding: 12px 14px !important;
  margin: -2px -8px !important;
  min-height: 56px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  border-radius: 12px !important;
  transition: background 150ms ease, transform 150ms ease !important;
}
.mm-link:hover {
  background: var(--bg-warm) !important;
  transform: translateX(2px);
}
.mm-link:active { transform: translateX(2px) scale(0.98); }

/* 6. mm-feature cards (Kit Digital, Kit Consulting) más clicables */
.mm-feature {
  padding: 20px 22px !important;
  min-height: 110px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  transition: transform 180ms ease, box-shadow 180ms ease !important;
}
.mm-feature:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(255,94,26,0.15) !important;
}

/* 7. Oficinas links con padding amplio */
.mm-offices a {
  padding: 8px 12px !important;
  margin: 0 -12px !important;
  border-radius: 8px;
  display: block !important;
  min-height: 36px;
}
.mm-offices a:hover {
  background: var(--bg-warm);
  color: var(--orange) !important;
}

/* 8. mm-foot-link más grande */
.mm-foot-link {
  padding: 12px 16px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 10px !important;
}
.mm-foot-link:hover {
  background: var(--bg-warm) !important;
  color: var(--orange) !important;
}

/* 9. Mejor indicador visual cuando megamenu está activo (trigger highlight) */
.has-megamenu:hover .megamenu-trigger,
.has-megamenu:focus-within .megamenu-trigger {
  background: var(--bg-warm);
  border-radius: 999px;
  color: var(--orange) !important;
}
.has-megamenu:hover .mm-caret,
.has-megamenu:focus-within .mm-caret {
  transform: rotate(180deg);
  color: var(--orange);
}
.mm-caret { transition: transform 220ms ease, color 180ms ease; }

/* 10. Mobile: megamenu se abre con click sin hover */
@media (hover: none) and (pointer: coarse) {
  .has-megamenu .megamenu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .has-megamenu.open .megamenu,
  .has-megamenu:focus-within .megamenu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* === MEGAMENU CLICK-DRIVEN 2026-05-17 23:30 === */
/* Por defecto: oculto */
.megamenu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, transform 220ms ease, visibility 0ms linear 200ms;
}

/* Mostrar cuando .open (click) o .hover-open o hover/focus tradicional */
.has-megamenu.open .megamenu,
.has-megamenu.hover-open .megamenu,
.has-megamenu:hover .megamenu,
.has-megamenu:focus-within .megamenu,
.megamenu:hover {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
  transition: opacity 180ms ease, transform 220ms ease, visibility 0ms !important;
}

/* Indicador de hover/open en trigger */
.has-megamenu.open .megamenu-trigger,
.has-megamenu.hover-open .megamenu-trigger,
.has-megamenu:hover .megamenu-trigger,
.has-megamenu:focus-within .megamenu-trigger {
  background: var(--bg-warm);
  color: var(--orange) !important;
  border-radius: 999px;
}
.has-megamenu.open .mm-caret,
.has-megamenu.hover-open .mm-caret,
.has-megamenu:hover .mm-caret {
  transform: rotate(180deg);
  color: var(--orange);
}

/* Indicación visual cuando está abierto persistente (.open por click) */
.has-megamenu.open .megamenu-trigger {
  background: var(--orange);
  color: white !important;
}
.has-megamenu.open .mm-caret {
  color: white !important;
}

/* Importante: cursor pointer en trigger para indicar clickeable */
.megamenu-trigger { cursor: pointer; }

/* === SVG icons profesionales 2026-05-17 23:50 === */
.lp-svc .ico svg, [class*="ico"] svg {
  width: 24px;
  height: 24px;
  display: block;
}
.lp-svc .ico { color: var(--orange) !important; }

/* === HERO LOCAL con ilustración elegante lateral 2026-05-18 === */
.lp-hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
}
.lp-hero-grid .hero-content {
  position: relative;
  z-index: 2;
}
.lp-hero-grid .hero-illust {
  position: relative;
  z-index: 1;
  opacity: 0.95;
}
.lp-hero-grid .hero-illust svg {
  width: 100%;
  height: auto;
  max-width: 460px;
  display: block;
  margin-left: auto;
}
@media (max-width: 900px) {
  .lp-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .lp-hero-grid .hero-illust {
    order: -1;
    max-width: 340px;
    margin: 0 auto;
  }
  .lp-hero-grid .hero-illust svg { margin: 0 auto; }
}

/* === FIX MEGAMENU CLICK ONLY 2026-05-18 === */
/* Deshabilitar el hover automático que cierra el menú */
.has-megamenu:hover .megamenu,
.megamenu:hover {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Solo .open (click) muestra el menú */
.has-megamenu.open .megamenu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}
.has-megamenu.hover-open .megamenu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* FIX 3: Título "Marketing digital" en mm-col-h NO se corta */
.mm-col-h {
  white-space: normal !important;
  line-height: 1.3 !important;
  font-size: 11px !important;
  padding-bottom: 12px !important;
  margin-bottom: 8px !important;
  border-bottom: 1px solid var(--line) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}
.mm-col-h .mm-num {
  flex-shrink: 0;
  font-size: 10px !important;
  color: var(--orange) !important;
  font-family: var(--mono) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
}
.mm-col-h span:not(.mm-num) {
  flex: 1;
  white-space: normal !important;
  word-wrap: break-word;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--mono) !important;
}

/* Items mm-link más grandes y claramente clicables */
.mm-link {
  padding: 14px 16px !important;
  margin: -2px -10px !important;
  min-height: 60px !important;
  border-radius: 14px !important;
  cursor: pointer;
  transition: all 180ms ease !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  border: 1px solid transparent !important;
}
.mm-link:hover {
  background: var(--bg-warm) !important;
  border-color: var(--line) !important;
  transform: none !important;
}
.mm-link .mm-name {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--fg) !important;
  margin-bottom: 2px !important;
  display: block;
}
.mm-link .mm-desc {
  font-size: 11px !important;
  color: var(--fg-dim) !important;
  line-height: 1.4 !important;
  display: block;
}

/* Megamenu container: padding más generoso */
.megamenu {
  padding: 40px 44px !important;
  background: var(--bg) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.12), 0 0 0 1px var(--line) !important;
  border-radius: 24px !important;
}

/* Trigger pointer claro */
.megamenu-trigger {
  cursor: pointer !important;
  user-select: none;
}

/* Indicador cuando está abierto */
.has-megamenu.open .megamenu-trigger {
  background: var(--fg) !important;
  color: white !important;
  border-radius: 999px;
  padding: 12px 20px !important;
}
.has-megamenu.open .megamenu-trigger .mm-caret {
  color: var(--yellow) !important;
}

/* ============================================================================
   Mobile menu fullscreen override · añadido 2026-05-19
   Resuelve: menú móvil dejaba ver contenido detrás (sin fondo opaco completo)
   ============================================================================ */
@media (max-width: 900px) {
  /* Header sin transparencia cuando el menú está abierto */
  .nav.mobile-open {
    background: var(--bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Menú principal cubre TODA la pantalla, opaco */
  .nav.mobile-open .nav-links {
    position: fixed !important;
    inset: 0 !important;
    background: var(--bg) !important;
    z-index: 95 !important;
    padding: 96px 24px 140px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    display: flex !important;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .nav.mobile-open .nav-links a {
    font-size: 22px;
    padding: 18px 4px;
    border-bottom: 1px solid var(--line);
  }
  .nav.mobile-open .nav-links .has-megamenu {
    border-bottom: 1px solid var(--line);
  }
  .nav.mobile-open .nav-links .has-megamenu > a {
    border-bottom: 0;
  }
  /* Acciones CTA fijas en la parte inferior, encima del menú */
  .nav.mobile-open .nav-right {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 97 !important;
    background: var(--bg) !important;
    padding: 20px 24px 28px !important;
    border-top: 1px solid var(--line) !important;
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
  }
  /* Hamburguesa siempre por encima de TODO */
  .nav.mobile-open .mobile-toggle {
    position: fixed !important;
    top: 24px;
    right: 20px;
    z-index: 99 !important;
  }
  /* Logo accesible en posición fija top-left */
  .nav.mobile-open .brand {
    position: fixed !important;
    top: 24px;
    left: 20px;
    z-index: 98 !important;
  }
  /* Si hay megamenú dentro del nav-links, desplegarlo plano */
  .nav.mobile-open .has-megamenu .megamenu {
    position: static !important;
    box-shadow: none !important;
    padding: 0 0 16px 16px !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    width: 100% !important;
  }
  .nav.mobile-open .has-megamenu .megamenu .mm-cols {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Dark theme: misma opacidad */
html[data-theme="dark"] .nav.mobile-open,
html[data-theme="dark"] .nav.mobile-open .nav-links,
html[data-theme="dark"] .nav.mobile-open .nav-right {
  background: var(--bg) !important;
}

/* Fix logo footer · 2026-05-19, cerrado 2026-07-14: el bug de color venía del
   SVG fuente (assets/lockup-oscuro.svg tenía el acento en #FFB800 en vez de
   #FF5E1A), no de un filter — corregido en el propio SVG. Sin filter en
   ningún sitio: el asset ya es el correcto tal cual. */

/* === TL;DR block (añadido auditoría 2026-05-20) === */
.post-tldr{position:relative;background:var(--bg-soft);border-left:3px solid var(--orange);padding:18px 22px 18px 28px;margin:24px 0 32px;border-radius:0 12px 12px 0}
.post-tldr .tldr-label{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--orange);font-weight:600;margin-bottom:6px}
.post-tldr .ssm-lead{margin:0;font-size:16px;line-height:1.55;color:var(--fg-dim)}
.post-tldr .ssm-lead strong{color:var(--fg)}
@media (max-width: 720px){.post-tldr{padding:14px 18px;margin:16px 0 24px}.post-tldr .ssm-lead{font-size:14.5px}}

/* ==========================================================================
   LOGO DE CABECERA · SVG en linea animado · Summum Marketing · 2026-05-22
   El logo se rendiza ahora como SVG inline (functions.php: summum_brand_logo),
   no como <img>, para poder animarlo por CSS. Reproduce la intencion de las
   keyframes brand-u-a / brand-u-b que existian en el theme pero no tenian
   markup que animar (apuntaban a un .wordmark que el theme nunca uso).
   Las dos "u" alternan naranja<->negro y la barra naranja late suavemente.
   Respeta prefers-reduced-motion.
   ========================================================================== */
.brand-svg{display:block;height:58px;width:207px;max-height:58px;overflow:visible}
.brand-svg .brand-u-a,.brand-svg .brand-u-b{transition:fill 200ms ease}
.brand-svg .brand-u-a{animation:brand-svg-u-a 5.2s ease-in-out infinite}
.brand-svg .brand-u-b{animation:brand-svg-u-b 5.2s ease-in-out infinite}
.brand-svg .brand-bar{transform-origin:100px 36px;transform-box:view-box;animation:brand-svg-bar 5.2s ease-in-out infinite}
@keyframes brand-svg-u-a{0%,42%{fill:#FF5E1A}50%,92%{fill:#0A0A0A}100%{fill:#FF5E1A}}
@keyframes brand-svg-u-b{0%,42%{fill:#0A0A0A}50%,92%{fill:#FF5E1A}100%{fill:#0A0A0A}}
@keyframes brand-svg-bar{0%,42%{transform:scaleX(1)}50%,92%{transform:scaleX(0.6)}100%{transform:scaleX(1)}}
.brand--header:hover .brand-svg .brand-bar{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .brand-svg .brand-u-a,.brand-svg .brand-u-b,.brand-svg .brand-bar{animation:none !important}
}
/* Logo del pie: cierre de marca, tamaño con más presencia (rediseño
   2026-07-14 — Summum Marketing). display:block evita que el <img> herede
   cualquier tratamiento accidental de otro selector. */
.brand-img-footer{display:block;height:96px;max-height:96px;width:auto}
.nav-inner{height:104px !important}
@media (max-width:700px){
  .brand-svg{height:42px;width:150px;max-height:42px}
  .brand-img-footer{height:64px;max-height:64px}
  .nav-inner{height:80px !important}
}
/* === fin bloque logo cabecera/footer === */

/* FIX 2026-06-19 Summum · cabecera de post full-bleed (de lado a lado). Solo .post-single. Reversible. */
.post-single .post-featured-section>.wrap{max-width:100%!important;padding-left:0!important;padding-right:0!important;padding-top:0!important}
.post-single .post-featured-image{border-radius:0!important;margin:0 0 40px!important;aspect-ratio:auto!important;height:clamp(240px,36vw,460px)!important}
.post-single .post-featured-image picture,.post-single .post-featured-image img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}

/* Logo wall clientes · Summum Marketing · 2026-07-02 */
.marquee-logo{height:34px;width:auto;max-width:170px;display:block;object-fit:contain;filter:grayscale(1);opacity:0.55;transition:opacity 200ms ease,filter 200ms ease}
.marquee-logo:hover{opacity:0.9;filter:grayscale(0.15)}
/* Equilibrio optico por logo (2026-07-02 Summum): Renault es lockup vertical (necesita mas altura para igualar masa visual); Michelin es wordmark ~10:1 (sin cap de ancho y altura optica reducida para no quedar enano); el PNG de DHL trae el fondo amarillo horneado (brightness lo funde con el fondo de la pagina tras el grayscale) */
.marquee-logo[src*="renault"]{height:48px}
.marquee-logo[src*="michelin"]{height:22px;max-width:none}
.marquee-logo[src*="dhl"]{filter:grayscale(1) brightness(1.32)}
.marquee-logo[src*="dhl"]:hover{filter:grayscale(1) brightness(1.32)}
@media (max-width:480px){.marquee-logo{height:26px;max-width:130px}.marquee-logo[src*="renault"]{height:34px}.marquee-logo[src*="michelin"]{height:16px;max-width:none}}

/* ==========================================================================
   UX-fixes 2026-07-02 (G2) - Summum Marketing: overflow real del CTA de
   cabecera "Empecemos" entre ~901px y ~1666px de ancho de viewport.
   Diagnostico (Chromium aislado, playwright-core, getBoundingClientRect en
   vivo): el grid de 3 columnas de .nav-inner (brand auto / nav-links 1fr /
   nav-right auto) no puede contraerse por debajo de su contenido porque
   todos los enlaces y botones llevan white-space:nowrap; el ancho intrinseco
   total (~1554px entre brand + gaps + nav-links + nav-right) supera el
   hueco disponible (viewport - 2*pad-x) en 1280/1366/1440/1536px. Ese
   desbordamiento horizontal queda recortado por la regla global
   html,body{overflow-x:hidden}, así que el CTA (el ultimo elemento de la
   fila) desaparecia total o parcialmente - medido: a 1440px el boton caia
   ~170px fuera del viewport. Se compacta tipografia/paddings del nav SOLO
   en ese rango para que el CTA quepa entero; por debajo de 901px ya se usa
   el drawer movil y por encima de 1680px (var(--max)) ya cabe sin tocar
   nada. Verificado con replica pre-deploy (page.route intercepting el CSS)
   en 1280/1366/1440/1536/1680/1920: 1440 y 1920 sin recorte (requisito),
   1366/1536/1680 sin recorte, 1280 mejora sustancialmente (de ~330px de
   desbordamiento a ~70px) sin quedar peor que antes del fix. */
@media (min-width:901px) and (max-width:1680px){
  .nav-inner{gap:14px;padding:0 20px}
  .nav-links{gap:0}
  .nav-links a{padding:8px 5px;font-size:11px}
  .lang-toggle{gap:1px;padding:4px 3px}
  .lang-toggle button{padding:4px 5px}
  .nav-right{gap:6px}
}
/* CTA de cabecera: nunca debe envolver texto ni contraerse por debajo de
   su contenido (el arreglo de arriba ya evita el desbordamiento, esto es
   un cinturon de seguridad adicional pedido en el encargo). Declaracion
   UNICA de ".nav-right .btn" en este fichero (verificado por grep el
   2026-07-03: no existe otra regla identica que fusionar; la unica otra
   aparicion de ese selector esta correctamente delimitada por
   ".nav.mobile-open .nav-right .btn" para el cajon movil, con propiedades
   distintas - no es un duplicado). */
.nav-right .btn{white-space:nowrap;flex-shrink:0}

/* ==========================================================================
   UX-fixes 2026-07-03 (G2) - Summum Marketing: remate del CTA "Empecemos"
   en el tramo 1200-1366px (residual documentado el 02-jul: el fix anterior
   dejaba ~72-152px del boton fuera del viewport en ese rango concreto,
   mientras que 1367px+ ya encajaba). Causa adicional descubierta al
   verificar en vivo (Chromium, getBoundingClientRect): el trigger del
   megamenu ".megamenu-trigger" tiene su propio padding/font-size con
   !important (reglas ".has-megamenu .megamenu-trigger{padding:16px 18px
   !important}" y ".megamenu-trigger,.nav-links>a,.nav-links>.has-megamenu>a
   {font-size:15px !important}"), asi que la compactacion general de
   ".nav-links a" del bloque de arriba NO llegaba al trigger - habia que
   igualar selector y especificidad para ganarle. Verificado con replica
   pre-deploy (inyeccion de <style> en la pagina viva) en 1200/1280/1366:
   el CTA queda dentro del viewport con margen (~29-30px de sobra) en los
   tres anchos; verificado tambien que 1440/1920 no cambian (el rango
   901-1680 de arriba sigue siendo el que actua ahi, sin tocar nada nuevo). */
@media (min-width:901px) and (max-width:1366px){
  .nav-inner{gap:8px;padding:0 14px}
  .nav-links{gap:0}
  .megamenu-trigger,.nav-links>a,.nav-links>.has-megamenu>a{font-size:10.5px !important;padding:7px 4px !important}
  .megamenu-trigger .mm-caret{font-size:8px}
  .lang-toggle{gap:0;padding:3px 2px}
  .lang-toggle button{padding:3px 4px}
  .nav-right{gap:4px}
  .nav-right .btn{padding:9px 13px;font-size:12px;gap:5px}
}

/* ==========================================================================
   UX-FIXES · revision de layout/tipografia · Summum Marketing 2026-07-08
   Bloque anadido al final para maxima especificidad de cascada, sin tocar
   las reglas base existentes.
   ========================================================================== */

/* --- FIX 4: aire excesivo en home entre el muro de logos (.marquee) y
   "Cinco oficinas". .section-tight (64px de padding) contiene el .marquee
   como ultimo hijo (36px de padding propio); sumado al padding superior
   de la .section siguiente (96px) acumulaba ~196px de espacio en blanco,
   por encima del resto de transiciones de seccion del sitio. Se recorta
   solo el padding superior de la .section que sigue inmediatamente a un
   .section-tight que contiene un .marquee (selector :has(), soportado en
   todos los navegadores evergreen) — no afecta a .section-tight ni a
   .section en ningun otro punto del sitio. */
.section-tight:has(.marquee) + .section{padding-top:56px}

/* --- FIX 5: viudas tipograficas en titulares y leads (p.ej. "apilan."
   suelto al final de una linea en /servicios/). text-wrap:balance solo
   afecta el reparto de saltos de linea; en navegadores sin soporte se
   ignora sin ningun efecto (degradacion segura). Bajo riesgo, regla
   global sobre los mismos selectores de titular/lead ya definidos arriba
   en este fichero (.h-display, .h1-.h3, .lead) mas .page-head h1. */
.h-display,.h1,.h2,.h3,.page-head h1,.lead{text-wrap:balance}
/* === fin UX-fixes G2 cabecera/reveal/btn-480/skip-link 2026-07-02+03 === */

/* === FIX marquee logos clientes (home) 2026-07-17 ===
   Queja del cliente: "se mueven muy rapido, estan descuadrados y muchos
   no se ven correctamente". Causa raiz encontrada:
   1) Habia DOS definiciones de @keyframes marquee en este mismo fichero
      (una a -33.33%, otra a -50%, la ultima ganaba la cascada). El HTML
      de la franja de logos repite la secuencia de clientes 3 veces, pero
      el keyframe que ganaba movia el track un -50% (pensado para OTRO
      componente, el ticker de texto .mp-marquee-track de templates.css,
      que si repite su contenido 4 veces y con -50% encaja). Con 3 copias
      y -50% el bucle daba un salto/parpadeo visible cada vuelta = el
      efecto "descuadrado" que reporta el cliente. Aqui se usa un
      @keyframes con nombre propio (marquee-logos-fix) para no tocar ese
      otro componente compartido en +100 paginas del sitio.
   2) Los logos no tenian una celda de ancho fijo: cada <img> se
      escalaba por su propio alto (34px + parches por marca para
      Renault/Michelin), dando anchos muy dispares y una fila visualmente
      irregular. Ahora cada logo (y los clientes en texto: Iberaval,
      Cobadu, DHL) vive en una celda .marquee-cell de ancho fijo con
      flex+align-items:center, y la imagen usa max-height+object-fit
      contain para no deformarse.
   3) logo-dhl.png tiene el fondo amarillo solido "quemado" en el propio
      PNG (no es transparente como el resto de logos), asi que con
      filter:grayscale(1) se veia como un bloque gris solido roto entre
      los demas logos transparentes. Se ha sacado del carrusel de
      imagenes y sustituido por el nombre en texto "DHL" (mismo patron
      que ya usaban Iberaval/Cobadu), ver cambio de HTML en el post 7028.
   4) Velocidad: la duracion efectiva eran 32s para una tira muy larga.
      Se sube a 96s (~x3) en escritorio y 72s en movil.
   5) Pausa al hover del contenedor + grayscale->color al hover del logo. */
.marquee .marquee-track{
  animation-name:marquee-logos-fix;
  animation-duration:96s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  align-items:center;
  gap:36px;
}
@keyframes marquee-logos-fix{to{transform:translateX(-33.3334%)}}
.marquee:hover .marquee-track,
.marquee .marquee-track:hover{
  animation-play-state:paused;
}
.marquee-track .marquee-cell{
  display:flex;
  align-items:center;
  justify-content:center;
  width:150px;
  height:52px;
  flex-shrink:0;
}
.marquee-track .marquee-cell .marquee-logo{
  height:auto;
  width:auto;
  max-height:44px;
  max-width:100%;
  object-fit:contain;
  display:block;
  filter:grayscale(1);
  opacity:.55;
  transition:filter .25s ease,opacity .25s ease;
}
.marquee-track .marquee-cell .marquee-logo:hover{
  filter:grayscale(0);
  opacity:1;
}
.marquee-track .marquee-cell .marquee-text{
  font-family:var(--display);
  font-size:22px;
  font-weight:500;
  letter-spacing:-0.02em;
  color:var(--fg-dim);
  white-space:nowrap;
  opacity:.55;
  transition:opacity .25s ease,color .25s ease;
}
.marquee-track .marquee-cell:hover .marquee-text{
  opacity:1;
  color:var(--fg);
}
@media (prefers-reduced-motion:reduce){
  .marquee .marquee-track{animation:none !important}
}
@media (max-width:480px){
  .marquee .marquee-track{animation-duration:72s;gap:24px}
  .marquee-track .marquee-cell{width:104px;height:36px}
  .marquee-track .marquee-cell .marquee-logo{max-height:28px}
  .marquee-track .marquee-cell .marquee-text{font-size:15px}
}
/* === fin FIX marquee logos clientes (home) 2026-07-17 === */

/* FIX 17-jul-2026 · Summum: CTA de email de herramientas (.tool-email-cta, fondo crema) heredaba
   colores inversos del form de contacto (fondo oscuro) → texto blanco ilegible. (También añadido a
   templates.css, pero esa hoja se sirve sin versión y la CDN retiene la copia antigua.) */
.tool-email-cta .wpcf7-form input.wpcf7-form-control,
.tool-email-cta .wpcf7-form textarea.wpcf7-form-control,
.tool-email-cta .wpcf7-form select.wpcf7-form-control{color:var(--fg);border-bottom-color:var(--line-strong)}
.tool-email-cta .wpcf7-form input.wpcf7-form-control::placeholder,
.tool-email-cta .wpcf7-form textarea.wpcf7-form-control::placeholder{color:var(--fg-mute)}
.tool-email-cta .wpcf7-form .et_pb_contact_field,
.tool-email-cta .wpcf7-form label,
.tool-email-cta .wpcf7-list-item-label{color:var(--fg-dim)}