:root{
  --bg:#F6F7F9;--bg-elevated:#FFFFFF;--surface:#FFFFFF;--surface-2:#EDF1F5;--text:#0E1725;--muted:#56687E;
  --accent:#15577F;--accent-2:#0F3F5E;--accent-soft:rgba(21,87,127,.07);--accent-line:rgba(21,87,127,.22);
  --accent-on:#FFFFFF;--overlay:rgba(14,23,37,.02);--overlay-strong:rgba(14,23,37,.04);
  --bg-header:rgba(246,247,249,.86);--bg-footer:#0E1725;--backdrop:rgba(14,23,37,.42);--input-bg:#FFFFFF;
  --border:rgba(14,23,37,.13);--success:#0F7A5A;--warning:#8A5F12;--danger:#A32B34;
  --radius-sm:8px;--radius:12px;--radius-lg:20px;--max-width:1240px;--header-height:112px;
  --shadow:0 1px 2px rgba(14,23,37,.05), 0 12px 32px rgba(14,23,37,.06);
  --font-serif:Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif;
  --font-sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular","IBM Plex Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;font-family:var(--font-sans);background:radial-gradient(circle at 78% -10%,var(--accent-soft),transparent 34%),var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}body.modal-open{overflow:hidden}a{color:inherit}button,input,select,textarea{font:inherit}.container{width:min(calc(100% - 40px),var(--max-width));margin-inline:auto}.container.narrow,.narrow{max-width:860px}.skip-link{position:fixed;left:16px;top:-100px;z-index:9999;background:var(--text);color:var(--bg);padding:10px 14px;border-radius:8px}.skip-link:focus{top:16px}.noscript{margin:16px;padding:16px;border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-sm)}code{font-family:var(--font-mono);font-size:.93em}
.site-header{position:sticky;top:0;z-index:70;height:var(--header-height);backdrop-filter:blur(18px);background:var(--bg-header);border-bottom:1px solid var(--border)}.header-inner{height:100%;display:flex;align-items:center;gap:26px}.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:760;letter-spacing:-.02em;min-width:max-content}.brand img{width:42px;height:28px;object-fit:contain;object-position:center}.brand-name{font-size:1.03rem}.nav{display:flex;align-items:center;gap:4px;margin-left:auto}.nav>a,.nav-parent{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--muted);padding:10px 11px;border-radius:10px;text-decoration:none;cursor:pointer;font-size:.91rem;font-weight:580}.nav>a:hover,.nav-parent:hover,.nav-group.open>.nav-parent{background:var(--accent-soft);color:var(--text)}.nav-group{position:relative}.nav-dropdown{position:absolute;display:none;top:calc(100% + 8px);left:0;min-width:220px;padding:8px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}.nav-group.open .nav-dropdown{display:grid}.nav-dropdown a{padding:9px 10px;text-decoration:none;color:var(--muted);border-radius:8px}.nav-dropdown a:hover{color:var(--text);background:var(--accent-soft)}.header-cta{margin-left:2px}.mobile-toggle{display:none;margin-left:auto;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:9px 12px;cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:12px;border:1px solid transparent;text-decoration:none;font-weight:700;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease}.btn:hover{transform:translateY(-1px)}.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-on);box-shadow:0 10px 30px var(--accent-line)}.btn-secondary{background:var(--overlay-strong);border-color:var(--border);color:var(--text)}.btn-secondary:hover,.btn-ghost:hover{background:var(--accent-soft);border-color:var(--accent-line)}.btn-ghost{background:transparent;color:var(--accent-2);border-color:transparent;padding-inline:0}.link-button{border:0;background:none;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px}.eyebrow,.micro{display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;font-weight:800;color:var(--accent-2)}.eyebrow:before{content:"";width:16px;height:1px;background:currentColor}.micro{font-size:.68rem}.micro:before{display:none}
.hero{padding:96px 0 82px;overflow:hidden}.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);gap:70px;align-items:center}.hero h1{font-size:clamp(2.9rem,6vw,5.8rem);line-height:.96;letter-spacing:-.055em;margin:18px 0 22px;max-width:890px}.hero-copy>p{font-size:clamp(1.05rem,1.9vw,1.25rem);color:var(--muted);max-width:720px}.hero-actions,.section-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.hero-note{display:block;color:var(--muted);margin-top:15px}.hero-panel{min-height:390px;background:linear-gradient(145deg,var(--accent-soft),var(--overlay-strong));border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px;position:relative;box-shadow:var(--shadow);overflow:hidden}.hero-panel:before{content:"";position:absolute;width:330px;height:330px;border-radius:50%;border:1px solid var(--accent-line);right:-70px;top:-70px;box-shadow:0 0 0 46px var(--accent-soft),0 0 0 92px var(--accent-soft)}.signal{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.82rem}.signal i{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 18px var(--success)}.hero-stack{position:absolute;left:26px;right:26px;bottom:26px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.hero-stack>div{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px}.hero-stack strong{display:block;font-size:1.4rem}.hero-stack span{display:block;color:var(--muted);font-size:.78rem;margin-top:3px}.hero-media{min-width:0}.cloud-visual{height:390px;position:relative;border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(150deg,var(--accent-soft),var(--overlay));overflow:hidden;box-shadow:var(--shadow);display:grid;place-items:center}.cloud-visual span{position:absolute;border:1px solid var(--accent-line);border-radius:50%}.cloud-visual span:nth-child(1){width:320px;height:320px}.cloud-visual span:nth-child(2){width:220px;height:220px}.cloud-visual span:nth-child(3){width:120px;height:120px;background:var(--accent-soft)}.cloud-visual div{z-index:2;font-size:.75rem;letter-spacing:.2em;font-weight:800;color:var(--accent-2)}
.section{padding:82px 0}.density-compact{padding:50px 0}.density-large{padding:112px 0}.surface-band{background:var(--overlay);border-block:1px solid var(--border)}.surface-accent{background:linear-gradient(135deg,var(--accent-soft),var(--overlay));border-block:1px solid var(--accent-soft)}.surface-gradient{background:radial-gradient(circle at 20% 20%,var(--accent-soft),transparent 36%)}.section-head{max-width:760px;margin-bottom:36px}.align-center .section-head,.section-head.center{margin-inline:auto;text-align:center}.section-head h2,.split h2,.cta-box h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.05;letter-spacing:-.045em;margin:13px 0}.section-intro,.split-copy>p,.cta-box p{color:var(--muted);font-size:1.06rem}.center-text{text-align:center}.muted{color:var(--muted)}
.grid{display:grid;gap:16px}.cols-1{grid-template-columns:1fr}.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.card{position:relative;background:linear-gradient(155deg,var(--overlay-strong),var(--overlay-strong));border:1px solid var(--border);border-radius:var(--radius);padding:25px;min-width:0}.card.highlight{border-color:var(--accent-line);box-shadow:0 12px 50px var(--accent-soft)}.card h3{font-size:1.18rem;line-height:1.3;margin:13px 0 9px}.card p,.card li{color:var(--muted)}.card ul,.check-list{padding:0;margin:18px 0 0;list-style:none}.card li,.check-list li{position:relative;padding-left:23px;margin:8px 0}.card li:before,.check-list li:before{content:"✓";position:absolute;left:0;color:var(--accent)}.card-icon{width:42px;height:42px;display:grid;place-items:center;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:12px;font-size:1.2rem}.card-actions{margin-top:16px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{padding:24px;border:1px solid var(--border);border-radius:var(--radius);background:var(--overlay)}.stat strong{font-size:2.1rem;line-height:1;letter-spacing:-.04em}.stat span{display:block;margin-top:10px}.stat small{display:block;color:var(--muted);margin-top:4px}.split{display:grid;grid-template-columns:1fr 1fr;gap:68px;align-items:center}.split.reverse .split-copy{order:2}.split.reverse .split-media{order:1}.media-frame{margin:0;border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}.media-frame img,.media-frame video{display:block;width:100%;height:auto}.media-frame figcaption{padding:10px 14px;color:var(--muted);font-size:.84rem}.media-icon{height:340px;display:grid;place-items:center;font-size:7rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--accent-soft)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:steps}.step{position:relative;padding:25px 22px;border-left:1px solid var(--border)}.step-no{font-family:var(--font-mono);font-size:.74rem;color:var(--accent)}.step h3{margin:13px 0 8px}.step p{color:var(--muted);margin:0}.table-scroll{overflow:auto;border:1px solid var(--border);border-radius:var(--radius)}table{width:100%;border-collapse:collapse;min-width:680px}th,td{text-align:left;padding:15px 17px;border-bottom:1px solid var(--border)}th{background:var(--overlay-strong);font-size:.82rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}tr:last-child td{border-bottom:0}.compare td:not(:first-child),.compare th:not(:first-child){text-align:center}.yes{color:var(--success);font-weight:750}.no{color:var(--muted)}.partial{color:var(--warning)}.arch{display:flex;align-items:stretch;gap:10px;overflow:auto;padding-bottom:6px}.arch-node{min-width:190px;flex:1;border:1px solid var(--border);border-radius:var(--radius);padding:20px;background:var(--overlay-strong);position:relative}.arch-node:not(:last-child):after{content:"→";position:absolute;right:-10px;top:50%;transform:translate(50%,-50%);z-index:2;color:var(--accent)}.arch-node>span{font-family:var(--font-mono);color:var(--accent);font-size:.7rem}.arch-node strong,.arch-node small{display:block}.arch-node strong{margin:8px 0 4px}.arch-node small,.architecture-note{color:var(--muted)}.architecture-note{margin-top:16px}.pricing-card{display:flex;flex-direction:column}.pricing-card.featured{border-color:var(--accent-line);transform:translateY(-8px)}.pricing-badge{position:absolute;right:16px;top:16px;background:var(--accent);color:var(--accent-on);border-radius:999px;padding:4px 9px;font-size:.7rem;font-weight:800}.price{font-size:2.1rem;font-weight:800;letter-spacing:-.04em;margin:8px 0 16px}.price small{font-size:.78rem;color:var(--muted);font-weight:600;letter-spacing:0}.pricing-card .btn{margin-top:auto}.faq-list{border-top:1px solid var(--border)}.faq-item{border-bottom:1px solid var(--border)}.faq-q{width:100%;display:flex;justify-content:space-between;gap:16px;text-align:left;padding:18px 0;background:none;border:0;color:var(--text);font-weight:720;cursor:pointer}.faq-q b{color:var(--accent);font-size:1.25rem;font-weight:400;transition:transform .2s}.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s}.faq-a>p{overflow:hidden;margin:0;color:var(--muted)}.faq-item.open .faq-a{grid-template-rows:1fr}.faq-item.open .faq-a>p{padding-bottom:18px}.faq-item.open .faq-q b{transform:rotate(45deg)}.cta-box{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:34px;border:1px solid var(--accent-line);background:linear-gradient(135deg,var(--accent-soft),var(--overlay));border-radius:var(--radius-lg)}.cta-box h2{font-size:clamp(1.7rem,3vw,2.7rem)}.cta-box p{margin-bottom:0}.callout{display:flex;align-items:center;gap:18px;padding:24px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}.callout-icon{font-size:1.5rem}.callout h3{margin:0 0 4px}.callout p{margin:0;color:var(--muted);flex:1}.callout .btn{margin-left:auto}.quote{margin:0;padding:38px;border-left:2px solid var(--accent);background:var(--overlay);border-radius:0 var(--radius) var(--radius) 0}.quote>p{font-size:clamp(1.35rem,2.8vw,2rem);line-height:1.35;letter-spacing:-.025em;margin:0}.quote footer{display:flex;flex-direction:column;margin-top:20px;color:var(--muted)}
.tabs{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.tab-list{display:flex;gap:0;overflow:auto;border-bottom:1px solid var(--border);background:var(--overlay)}.tab-list button{border:0;background:none;color:var(--muted);padding:14px 18px;white-space:nowrap;cursor:pointer}.tab-list button[aria-selected="true"]{color:var(--text);background:var(--accent-soft);box-shadow:inset 0 -2px var(--accent)}.tab-panel{padding:25px}.tab-panel h3{margin-top:0}
.form-layout{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);gap:60px;align-items:start}.form-card,.result-card{padding:25px;border:1px solid var(--border);background:var(--overlay-strong);border-radius:var(--radius)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.field{display:grid;gap:6px}.field:has(textarea),.field.checkbox-field{grid-column:1/-1}.field label{font-weight:650;font-size:.9rem}.field label span[aria-hidden]{color:var(--accent)}.field small,.form-privacy,.form-status{color:var(--muted);font-size:.8rem}.field input,.field textarea,.field select{width:100%;border:1px solid var(--border);background:var(--input-bg);color:var(--text);border-radius:10px;padding:11px 12px;outline:none}.field textarea{resize:vertical}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.checkbox-field label{display:flex;align-items:flex-start;gap:9px;font-weight:500}.checkbox-field input{width:auto;margin-top:5px}.form-actions{display:flex;align-items:center;gap:14px;margin-top:18px}.side-copy{color:var(--muted)}.configurator{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px}.configurator .form-card{display:grid;gap:14px}.result-card{min-height:360px}.result-card h3{font-size:1.6rem}.rec{display:grid;gap:0;margin-top:22px;border-top:1px solid var(--border)}.rec-row{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--border)}.rec-row span{color:var(--muted)}.result-actions{display:flex;gap:10px;margin-top:20px}.result-actions[hidden]{display:none}
.legal{display:grid;grid-template-columns:230px minmax(0,1fr);gap:60px;align-items:start}.legal-nav{position:sticky;top:calc(var(--header-height) + 24px);display:grid;gap:4px}.legal-nav a{color:var(--muted);text-decoration:none;padding:6px 8px;border-radius:8px;font-size:.88rem}.legal-nav a:hover{color:var(--text);background:var(--accent-soft)}.legal article{max-width:840px}.legal article>h1{font-size:clamp(2.3rem,5vw,4.5rem);line-height:1;letter-spacing:-.05em;margin:16px 0 22px}.legal-intro{font-size:1.1rem;color:var(--muted)}.legal article section{padding-top:26px;margin-top:10px;border-top:1px solid var(--border)}.legal article h2{font-size:1.25rem;margin:0 0 10px}.legal article p,.legal article li{color:var(--muted)}.placeholder{display:inline-block;background:var(--accent-soft);color:var(--warning);border:1px dashed var(--warning);border-radius:6px;padding:0 5px}.engine-warning{padding:18px;border:1px solid var(--danger);background:var(--accent-soft);border-radius:10px;color:var(--danger)}
.footer{border-top:1px solid var(--border);padding:58px 0 25px;background:var(--bg-footer)}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px}.footer-brand p,.footer-brand small{color:var(--footer-muted,var(--muted));max-width:330px}.footer-grid h2{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--footer-muted,var(--muted));margin:0 0 12px}.footer-grid>div:not(:first-child){display:flex;flex-direction:column;align-items:flex-start}.footer-grid a:not(.brand){text-decoration:none;color:var(--footer-muted,var(--muted));padding:4px 0}.footer-grid a:hover{color:var(--footer-text,var(--text))}.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--border);padding-top:20px;margin-top:42px;color:var(--footer-muted,var(--muted));font-size:.78rem}.footer-bottom>div{display:flex;gap:14px;align-items:center}.version{font-family:var(--font-mono)}
.cookie-banner{position:fixed;z-index:100;left:20px;right:20px;bottom:20px;max-width:1100px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 20px;background:var(--bg-elevated);border:1px solid var(--accent-line);border-radius:18px;box-shadow:var(--shadow);backdrop-filter:blur(16px)}.cookie-banner p{margin:3px 0 0;color:var(--muted);font-size:.88rem;max-width:650px}.cookie-actions{display:flex;gap:8px;flex-wrap:wrap}.modal-backdrop{position:fixed;z-index:120;inset:0;background:var(--backdrop);display:grid;place-items:center;padding:20px;backdrop-filter:blur(8px)}.modal{position:relative;width:min(620px,100%);max-height:min(760px,90vh);overflow:auto;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow)}.modal-x{position:absolute;right:16px;top:12px;border:0;background:none;color:var(--muted);font-size:1.8rem;cursor:pointer}.modal h2{font-size:2rem;line-height:1.1;margin:12px 0}.modal p,.modal li{color:var(--muted)}.cookie-categories{display:grid;gap:10px;margin:22px 0}.cookie-category{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px;border:1px solid var(--border);border-radius:12px}.cookie-category span{display:grid}.cookie-category small{color:var(--muted)}.cookie-category input{width:20px;height:20px;accent-color:var(--accent)}.fatal{min-height:100vh;display:grid;place-items:center;padding:30px}.fatal>div{max-width:760px}.fatal h1{font-size:3rem;line-height:1}.fatal code{color:var(--accent)}
@media (max-width:1050px){.header-cta{display:none}.nav{gap:0}.nav>a,.nav-parent{padding-inline:8px;font-size:.86rem}.hero-grid{gap:38px}.cols-4{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(2,1fr)}.stats-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1.4fr repeat(2,1fr)}}
@media (max-width:820px){:root{--header-height:68px}.container{width:min(calc(100% - 28px),var(--max-width))}.mobile-toggle{display:block}.nav{position:fixed;left:14px;right:14px;top:76px;display:none;flex-direction:column;align-items:stretch;padding:10px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}.nav.open{display:flex}.nav>a,.nav-parent{width:100%;justify-content:space-between;padding:11px}.nav-group{width:100%}.nav-dropdown{position:static;box-shadow:none;border:0;border-left:1px solid var(--border);border-radius:0;margin-left:12px;background:transparent}.hero{padding:72px 0 58px}.hero-grid,.split,.form-layout,.configurator{grid-template-columns:1fr}.hero h1{font-size:clamp(2.7rem,13vw,4.8rem)}.hero-panel,.cloud-visual{min-height:310px;height:310px}.split.reverse .split-copy,.split.reverse .split-media{order:initial}.cols-3,.cols-2{grid-template-columns:1fr 1fr}.legal{grid-template-columns:1fr;gap:28px}.legal-nav{position:static;display:flex;overflow:auto;border-bottom:1px solid var(--border);padding-bottom:8px}.legal-nav a{white-space:nowrap}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.cookie-banner{flex-direction:column;align-items:stretch}.cookie-actions .btn{flex:1}.cta-box{flex-direction:column;align-items:flex-start}}
@media (max-width:560px){.section{padding:62px 0}.density-compact{padding:40px 0}.cols-2,.cols-3,.cols-4,.stats-grid,.steps,.form-grid{grid-template-columns:1fr}.hero-stack{grid-template-columns:1fr 1fr}.arch-node{min-width:165px}.cta-box{padding:24px}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.footer-bottom{align-items:flex-start;flex-direction:column}.cookie-banner{left:10px;right:10px;bottom:10px}.cookie-actions{display:grid;grid-template-columns:1fr}.modal{padding:24px 18px}.result-actions{flex-direction:column}.rec-row{align-items:flex-start}.pricing-card.featured{transform:none}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.btn:hover{transform:none}}
.media-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.media-gallery figure{margin:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface)}.media-gallery img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}.media-gallery figcaption{padding:8px 10px;color:var(--muted);font-size:.8rem}.media-diagram{display:flex;gap:10px;align-items:stretch;overflow:auto;padding:18px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--overlay)}.diagram-node{min-width:160px;flex:1;padding:18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-elevated)}.diagram-node span,.diagram-node small,.diagram-node strong{display:block}.diagram-node span{font-family:var(--font-mono);color:var(--accent);font-size:.7rem}.diagram-node strong{margin-top:8px}.diagram-node small{color:var(--muted);margin-top:4px}.media-background{min-height:360px;border:1px solid var(--border);border-radius:var(--radius-lg);background-position:center;background-size:cover;display:flex;align-items:flex-end;padding:22px;overflow:hidden}.media-background span{background:var(--surface);padding:8px 11px;border-radius:9px}.safe-animation{height:360px;display:grid;place-items:center;position:relative;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:radial-gradient(circle,var(--accent-soft),transparent 58%)}.safe-animation i{position:absolute;width:90px;height:90px;border:1px solid var(--accent-line);border-radius:50%;animation:loop-orbit 7s linear infinite}.safe-animation i:nth-child(2){width:180px;height:180px;animation-duration:11s;animation-direction:reverse}.safe-animation i:nth-child(3){width:280px;height:280px;animation-duration:16s}.safe-animation strong{z-index:2;font-size:.72rem;letter-spacing:.18em;color:var(--accent-2)}@keyframes loop-orbit{from{transform:rotate(0deg) scale(.98)}50%{transform:rotate(180deg) scale(1.04)}to{transform:rotate(360deg) scale(.98)}}@media(max-width:560px){.media-gallery{grid-template-columns:1fr}}

/* Content Engine v3 */
.header-tools{display:flex;align-items:center;gap:10px}.header-search{width:38px;height:38px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:10px;font-size:22px;line-height:1;cursor:pointer}.locale-select select{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:9px;padding:8px}.breadcrumbs{display:flex;gap:9px;align-items:center;padding-top:24px;color:var(--muted);font-size:.86rem}.breadcrumbs a{color:var(--muted);text-decoration:none}.breadcrumbs span{color:var(--text)}.breadcrumbs b{font-weight:400;opacity:.45}.nested-stack,.nested-container{display:flex;flex-direction:column;gap:18px}.nested-grid{display:grid;gap:18px}.nested-grid.cols-1{grid-template-columns:1fr}.nested-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.nested-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.nested-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.nested-grid>.section,.nested-stack>.section,.nested-container>.section{padding:0}.nested-grid>.section>.container,.nested-stack>.section>.container,.nested-container>.section>.container{width:100%;max-width:none;padding:0}.search-shell{max-width:920px}.search-form{display:grid;grid-template-columns:1fr auto;gap:10px}.search-form input{width:100%;min-height:48px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);padding:0 15px}.search-results{display:grid;gap:10px;margin-top:18px}.search-result{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:0}.search-result a{display:block;padding:18px;text-decoration:none;color:inherit}.search-result h3{margin:0 0 6px}.search-result p{margin:0 0 8px;color:var(--muted)}.search-result small{color:var(--accent)}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@media(max-width:900px){.header-tools .locale-select,.header-tools .header-search{display:none}.nested-grid.cols-2,.nested-grid.cols-3,.nested-grid.cols-4{grid-template-columns:1fr}.breadcrumbs{padding-top:15px}.search-form{grid-template-columns:1fr}}

/* ============================================================
   Capa institucional — "registro europeo"
   ------------------------------------------------------------
   Direccion: la infraestructura como asunto de registro. Sobrio,
   documental, verificable. Se apoya en tres decisiones:

   1. Serif para los titulos. Es lo que mas separa a Loop Cloud del
      sans-serif que usa todo el sector cloud.
   2. Superficies planas con filete de 1px en vez de degradados y
      tintes. Un degradado no sobrevive al cambio de tema; un filete si.
   3. Bloques de datos tratados como ficha tecnica: valores en
      monoespaciada, separadores de un pixel, etiquetas en versalitas.
      Es el elemento firma y se reutiliza en metricas, arquitectura y
      el resultado del configurador.

   Va despues de la base a proposito: misma especificidad, orden
   posterior. Cualquier reajuste de esta direccion se hace aqui.
   ============================================================ */

/* --- Tipografia ------------------------------------------------ */
.hero h1, .section-head h2, .split h2, .cta-box h2, .legal article > h1,
.modal h2, .fatal h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -.021em;
}
.hero h1 { font-size: clamp(2.6rem, 5.1vw, 4.5rem); line-height: 1.03; margin: 20px 0 24px; max-width: 20ch; }
.section-head h2, .split h2 { font-size: clamp(1.75rem, 3.1vw, 2.7rem); line-height: 1.12; }
.cta-box h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.15; }
.legal article > h1 { font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.06; }
.hero-copy > p, .section-intro, .split-copy > p { max-width: 62ch; font-size: 1.05rem; }
.card h3, .step h3, .callout h3, .search-result h3 {
  font-family: var(--font-sans); font-weight: 500; letter-spacing: -.008em;
}

/* Etiqueta de registro: monoespaciada, versalitas, filete corto. */
.eyebrow, .micro {
  font-family: var(--font-mono);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .17em;
  color: var(--muted);
}
.eyebrow:before { width: 22px; background: var(--accent); opacity: .85; }

/* --- Cabecera -------------------------------------------------- */
.site-header { background: var(--bg-header); border-bottom: 1px solid var(--border); }
.header-inner { gap: 32px; }

/* El logo es un lockup: ya contiene el wordmark, asi que no se
   acompaña de texto. Antes se renderizaba a 42x28px con un
   "Loop Cloud" al lado, de modo que la marca salia dos veces y
   el lockup quedaba ilegible. */
.brand img.brand-lockup { height: var(--logo-height, 56px); width: auto; max-width: calc(var(--logo-height, 56px) * 5); object-fit: contain; object-position: left center; }
.brand img.brand-mark { width: 34px; height: 34px; object-fit: contain; }
.brand { gap: 10px; }

.nav > a, .nav-parent { font-weight: 500; font-size: .9rem; border-radius: var(--radius-sm); }
.nav > a:hover, .nav-parent:hover, .nav-group.open > .nav-parent { background: var(--accent-soft); color: var(--accent); }

.theme-toggle, .header-search {
  width: 38px; height: 38px; display: inline-grid; place-items: center;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  border-radius: var(--radius-sm); cursor: pointer; padding: 0;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.theme-toggle:hover, .header-search:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.header-search { font-size: 19px; line-height: 1; }

/* --- Botones --------------------------------------------------- */
.btn { border-radius: var(--radius-sm); font-weight: 500; letter-spacing: -.005em; }
.btn:hover { transform: none; }
.btn-primary { background: var(--accent); color: var(--accent-on); box-shadow: none; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn-secondary { background: transparent; border-color: var(--border); color: var(--text); }
.btn-secondary:hover { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.btn-ghost { color: var(--accent); }

/* --- Ritmo de seccion ------------------------------------------ */
.section { padding: 96px 0; }
.density-compact { padding: 56px 0; }
.density-large { padding: 124px 0; }
.section-head { margin-bottom: 44px; }

/* Bandas por filete, no por tinte: un tinte translucido cambia de
   caracter al invertir el tema; un filete se comporta igual. */
.surface-band { background: var(--overlay); border-block: 1px solid var(--border); }
.surface-accent { background: var(--accent-soft); border-block: 1px solid var(--accent-line); }
.surface-gradient { background: none; border-top: 1px solid var(--border); }

/* --- Superficies planas ---------------------------------------- */
.card, .stat, .arch-node, .form-card, .result-card, .callout, .media-frame,
.hero-panel, .cloud-visual, .tabs, .search-result, .diagram-node, .media-diagram {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: none;
}
.card { border-radius: var(--radius); padding: 26px; }
.card.highlight { border-color: var(--accent); }
.card-icon {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
}
.card li:before, .check-list li:before { color: var(--success); }

/* --- Ficha tecnica: el elemento firma -------------------------- */
/* Metricas, nodos de arquitectura y resultado del configurador
   comparten el mismo tratamiento de registro. */
.stats-grid { gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.stat {
  border: 0; border-right: 1px solid var(--border); border-radius: 0;
  padding: 26px 24px; background: transparent;
}
.stat:last-child { border-right: 0; }
.stat strong {
  font-family: var(--font-mono); font-size: 1.55rem; font-weight: 500;
  letter-spacing: -.02em; color: var(--accent);
}
.stat span { font-weight: 500; font-size: .92rem; margin-top: 12px; }
.stat small { font-size: .8rem; }

.hero-stack > div { background: var(--overlay); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.hero-stack strong { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 500; color: var(--accent); }

.arch-node > span, .diagram-node span, .step-no { font-family: var(--font-mono); letter-spacing: .06em; color: var(--accent); }
.arch-node:not(:last-child):after { color: var(--muted); }
.step { border-left: 1px solid var(--border); padding: 4px 24px 4px 22px; }

.rec { border-top: 1px solid var(--border); }
.rec-row { padding: 13px 0; }
.rec-row strong { font-family: var(--font-mono); font-weight: 500; color: var(--accent); }

/* --- Panel del hero ------------------------------------------- */
/* Sin degradado: un panel de registro con filete y una senal de estado. */
.hero-panel:before { display: none; }
.hero-panel { border-radius: var(--radius); padding: 28px; }
.cloud-visual { border-radius: var(--radius); background: var(--overlay); }
.cloud-visual span { border-color: var(--accent-line); }
.cloud-visual span:nth-child(3) { background: var(--accent-soft); }
.cloud-visual div { font-family: var(--font-mono); color: var(--accent); letter-spacing: .18em; }

/* --- Tablas y datos ------------------------------------------- */
table { min-width: 640px; }
th { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; background: var(--overlay); }
td { font-size: .95rem; }
.yes { color: var(--success); font-weight: 500; }
.partial { color: var(--warning); }

/* --- Formularios --------------------------------------------- */
.field input, .field textarea, .field select {
  background: var(--input-bg); border-radius: var(--radius-sm); padding: 12px 13px;
}
.field label { font-weight: 500; font-size: .88rem; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

/* --- Pie ----------------------------------------------------- */
.footer { background: var(--bg-footer); border-top: 1px solid var(--border); }
.footer, .footer a, .footer p, .footer small, .footer .footer-grid h2 { color: var(--footer-muted, #A9B8C9); }
.footer .brand img.brand-lockup { height: calc(var(--logo-height, 56px) * .92); max-width: calc(var(--logo-height, 56px) * 4.6); }
.footer-grid h2 { font-family: var(--font-mono); letter-spacing: .12em; font-size: .7rem; }
.footer-grid a:hover { color: var(--footer-text, #FFFFFF); }
.footer-bottom { color: var(--footer-dim, var(--footer-muted, #7C8CA0)); }
/* Enlaces legales del pie inferior. Sin esto salen con el azul subrayado del
   navegador: .footer-grid a solo cubre la rejilla de arriba, no esta franja. */
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: var(--footer-text, var(--text)); text-decoration: underline; }
.version { font-family: var(--font-mono); }

/* --- Legal --------------------------------------------------- */
.legal article section { padding-top: 30px; }
.legal article h2 { font-family: var(--font-sans); font-weight: 500; font-size: 1.15rem; }
.legal-nav a { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; }
/* Los datos legales pendientes deben cantar, no disimularse. */
.placeholder {
  background: var(--accent-soft); color: var(--warning);
  border: 1px dashed var(--warning); border-radius: 4px;
  font-family: var(--font-mono); font-size: .85em;
}

/* --- Cookies y modales --------------------------------------- */
.cookie-banner { border-radius: var(--radius); border-color: var(--border); box-shadow: var(--shadow); }
.modal { border-radius: var(--radius); }

/* --- Ajustes responsive de la capa --------------------------- */
@media (max-width: 1050px) {
  .stats-grid { border: 0; border-radius: 0; gap: 12px; }
  .stat { border: 1px solid var(--border); border-radius: var(--radius); }
}
@media (max-width: 820px) {
  .brand img.brand-lockup { height: min(calc(var(--logo-height, 56px) * .84), 54px); max-width: calc(var(--logo-height, 56px) * 4.4); }
  .section { padding: 68px 0; }
  .hero h1 { max-width: none; }
  .step { border-left: 0; border-top: 1px solid var(--border); padding: 22px 0 0; }
}

/* --- Variante clara del lockup --------------------------------- */
/* El lockup original es cyan claro sobre oscuro: sobre el fondo claro
   daba 1.73:1 de contraste, muy por debajo de lo exigible. Se sirven las
   dos tintas y se conmuta por atributo, asi el cambio de tema es
   instantaneo y no depende de JS.
   Pendiente: un lockup en SVG con currentColor resolveria esto con un
   unico fichero y sin peso extra. */
.brand .brand-lockup-light { display: none; }
:root[data-theme="light"] .brand .brand-lockup-dark { display: none; }
:root[data-theme="light"] .brand .brand-lockup-light { display: block; }

/* --- Navegacion: sin partir etiquetas ------------------------- */
.nav > a, .nav-parent { white-space: nowrap; }

/* --- Panel del hero: contenido en flujo ----------------------- */
/* .hero-stack estaba posicionado en absoluto contra el borde inferior y
   dejaba un vacio grande bajo la senal de estado. Pasa a flujo normal. */
.hero-panel { display: flex; flex-direction: column; gap: 22px; min-height: 0; }
.hero-stack { position: static; left: auto; right: auto; bottom: auto; margin-top: auto; }
.hero-panel .signal { flex: 0 0 auto; }

/* --- Pie: el lockup claro no aplica sobre fondo oscuro -------- */
.footer .brand .brand-lockup-light { display: none; }
:root[data-theme="light"] .footer .brand .brand-lockup-light { display: none; }
:root[data-theme="light"] .footer .brand .brand-lockup-dark { display: block; }

/* --- Pictogramas y comparativas (capa institucional, continuacion) ----- */
/* Los iconos heredan currentColor: acento en tarjetas, tono del contexto
   en callouts y pasos. Un solo dibujo sirve para ambos temas. */
.card-icon svg { width: 21px; height: 21px; display: block; }
.callout-icon svg { width: 24px; height: 24px; display: block; color: var(--accent); }
.media-icon svg { width: 34px; height: 34px; color: var(--accent); }
.step-icon { width: 34px; height: 34px; color: var(--accent); margin-bottom: 10px; }
.step-icon svg { width: 100%; height: 100%; }
.step .step-no { display: inline-block; margin-top: 2px; }

/* Comparativa de modelo operativo: la columna destacada se lee como la
   propuesta, sin ocultar los matices de las demas. */
.compare th.col-hi { color: var(--accent); background: var(--accent-soft); border-bottom: 2px solid var(--accent); }
.compare td.col-hi { background: var(--accent-soft); }
.compare .marca { font-family: var(--font-mono); margin-right: 7px; font-weight: 700; }
.compare td.yes .marca { color: var(--success); }
.compare td.no { color: var(--muted); }
.compare td:first-child { font-weight: 500; }

/* Ilustracion dentro de una seccion de pasos */
.section .media-frame + .steps { margin-top: 34px; }

/* visibilidad por dispositivo (editable desde el panel) */
@media (max-width: 820px){.oculta-movil{display:none !important}}
@media (min-width: 821px){.oculta-escritorio{display:none !important}}

/* CTA fijo en movil (site.mobileCta) */
.mobile-cta{display:none}
@media (max-width:820px){
  .mobile-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--bg-header,rgba(10,20,32,.92));backdrop-filter:blur(8px);border-top:1px solid var(--border)}
  .mobile-cta .btn{width:100%;justify-content:center}
  body:has(.mobile-cta) main{padding-bottom:76px}
}

.footer .link-button{color:var(--footer-muted,var(--muted))}.footer .link-button:hover{color:var(--footer-text,var(--text))}

/* Hero cover: foto a sangre con velo, para sectores con imagen potente */
.hero-cover{position:relative;overflow:hidden;padding:0;min-height:min(78vh,760px);display:flex;align-items:center}
.hero-cover-bg{position:absolute;inset:0}
.hero-cover-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-cover-velo{position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,14,26,.82) 0%,rgba(7,14,26,.55) 52%,rgba(7,14,26,.28) 100%)}
.hero-cover-inner{position:relative;z-index:2;padding:96px 0 84px;display:grid;gap:44px}
.hero-cover .hero-copy{max-width:640px}
.hero-cover .eyebrow{color:#cfe0f2}
.hero-cover h1{color:#ffffff}
.hero-cover .hero-copy p{color:rgba(255,255,255,.88)}
.hero-cover .hero-note{color:rgba(255,255,255,.72)}
.hero-cover .btn-secondary{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.4)}
.hero-cover .btn-secondary:hover{background:rgba(255,255,255,.22)}
.hero-cover-metrics{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:12px;max-width:860px}
.hero-cover-metrics>div{background:rgba(9,17,30,.55);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:14px 16px;backdrop-filter:blur(6px)}
.hero-cover-metrics strong{display:block;font-size:1.5rem;color:#fff;font-family:var(--font-mono)}
.hero-cover-metrics span{color:rgba(255,255,255,.75);font-size:.8rem}
@media (max-width:820px){.hero-cover{min-height:0}.hero-cover-inner{padding:76px 0 60px}.hero-cover-metrics{grid-template-columns:repeat(2,1fr)}}
/* Hero sin panel: una sola columna a lo ancho */
.hero-solo .hero-grid{grid-template-columns:1fr}
.hero-solo .hero-copy{max-width:760px}


/* --- Acabados del sitio (theme.finish) --------------------------------
   flat: cero sombra, superficie plana. soft: el acabado historico (nada
   que declarar). elevated: profundidad marcada con lift al pasar. glass:
   tarjetas translucidas con blur, pensado para fondos con fotografia.
   sharp: borde 2px y sombra dura desplazada (neo-brutalismo templado). */
[data-finish="flat"] { --shadow: none; }
[data-finish="flat"] .card, [data-finish="flat"] .media-frame, [data-finish="flat"] .stat { box-shadow: none; background: var(--overlay); }
[data-finish="elevated"] { --shadow: 0 2px 6px rgba(10,15,30,.07), 0 26px 60px rgba(10,15,30,.16); }
[data-finish="elevated"] .card, [data-finish="elevated"] .media-frame, [data-finish="elevated"] .stat { box-shadow: var(--shadow); transition: transform .22s ease, box-shadow .22s ease; }
[data-finish="elevated"] .card:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(10,15,30,.09), 0 34px 80px rgba(10,15,30,.2); }
[data-finish="glass"] .card, [data-finish="glass"] .stat, [data-finish="glass"] .hero-cover-metrics > div { background: color-mix(in srgb, var(--bg-elevated) 58%, transparent); backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15); }
[data-finish="glass"] .media-frame { box-shadow: 0 18px 60px rgba(8,12,26,.22); }
[data-finish="sharp"] .card, [data-finish="sharp"] .media-frame, [data-finish="sharp"] .stat, [data-finish="sharp"] .btn-primary { border-width: 2px; border-color: var(--text); border-style: solid; box-shadow: 6px 6px 0 var(--accent-line); }
[data-finish="sharp"] .card:hover { box-shadow: 3px 3px 0 var(--accent-line); transform: translate(2px,2px); }


/* Hero cover en movil: velo vertical mas ligero (el gradiente lateral de
   escritorio dejaba la foto invisible a 390px) y encuadre hacia el sujeto. */
@media (max-width:560px){.hero-cover-bg img{object-position:66% center}.hero-cover-velo{background:linear-gradient(180deg,rgba(7,14,26,.72) 0%,rgba(7,14,26,.5) 48%,rgba(7,14,26,.74) 100%)}.hero-cover-metrics{grid-template-columns:1fr 1fr}}


/* --- Movimiento (theme.motion) ----------------------------------------
   Todo cuelga de [data-motion], que solo pone el JS en visitas reales:
   sin JS, con prefers-reduced-motion o en prerender no existe y el
   contenido es plenamente visible y estatico. */
[data-motion] .anim { opacity: 0; transform: translateY(18px); }
[data-motion] .anim.en-vista { opacity: 1; transform: none; transition: opacity .65s cubic-bezier(.22,.61,.21,1) var(--anim-delay, 0ms), transform .65s cubic-bezier(.22,.61,.21,1) var(--anim-delay, 0ms); }
[data-motion] .split-media.anim { transform: translateY(26px) scale(.985); }
[data-motion] .hero-cover-inner .hero-copy { animation: heroEntra .9s cubic-bezier(.22,.61,.21,1) both; }
[data-motion] .hero-cover-metrics > div.anim { transform: translateY(24px); }
[data-motion="full"] .hero-cover-bg img { transform: scale(1.18); }
[data-motion="full"] .hero-cover { clip-path: inset(0); }
@keyframes heroEntra { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
[data-motion] .card, [data-motion] .btn { transition-property: transform, box-shadow, background, border-color, color, opacity; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; }
@media (prefers-reduced-motion: reduce) {
  .anim, [data-motion] .anim { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
}


/* --- Cinta continua (seccion ticker) ---------------------------------- */
.ticker-band { padding: 16px 0; border-block: 1px solid var(--border); background: var(--overlay); overflow: hidden; }
.ticker { display: flex; overflow: hidden; }
.ticker-track { display: flex; align-items: center; gap: 44px; padding-right: 44px; flex-shrink: 0; min-width: 100%; justify-content: space-around; animation: ticker-mueve var(--ticker-dur, 36s) linear infinite; }
.ticker-item { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 680; letter-spacing: .07em; font-size: .9rem; text-transform: uppercase; }
.ticker-item img { display: block; height: 32px; width: auto; }
.ticker-sep { color: var(--accent-2); font-weight: 800; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker-mueve { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } .ticker { flex-wrap: wrap; justify-content: center; } .ticker-track[aria-hidden] { display: none; } }

/* --- Split con media fija (variant sticky) ----------------------------- */
.split-sticky { align-items: start; }
.split-sticky .split-media { position: sticky; top: calc(var(--header-height) + 26px); }
@media (max-width: 820px) { .split-sticky .split-media { position: static; } }

/* --- Titulares cineticos (motion) -------------------------------------- */
[data-motion] .anim-kin .kin-w { display: inline-block; overflow: hidden; vertical-align: bottom; }
[data-motion] .anim-kin .kin-w > span { display: inline-block; transform: translateY(112%); transition: transform .72s cubic-bezier(.22,.61,.21,1) calc(var(--kw) * 60ms); }
[data-motion] .anim-kin.en-vista .kin-w > span { transform: none; }

/* --- Cabecera compacta al hacer scroll (motion) ------------------------ */
.site-header { transition: height .28s ease, box-shadow .28s ease; }
@media (min-width: 821px) {
  [data-scrolled][data-motion] .site-header { height: calc(var(--header-height) * .82); box-shadow: 0 10px 34px rgba(8, 12, 26, .14); }
  [data-scrolled][data-motion] .site-header .brand img.brand-lockup { height: calc(var(--logo-height, 56px) * .84); transition: height .28s ease; }
}

/* --- Foco luminoso + inclinacion de tarjetas (motion full) -------------- */
[data-motion="full"] .card.luz { transform: perspective(950px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .2s ease, box-shadow .25s ease; }
[data-motion="full"] .card.luz::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(430px circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 58%); transition: opacity .3s ease; }
[data-motion="full"] .card.luz:hover::after { opacity: 1; }

/* --- Zoom de medios al revelarse (motion) ------------------------------- */
[data-motion] .media-frame img { transition: transform 1s cubic-bezier(.22,.61,.21,1); }
[data-motion] .media-frame.anim:not(.en-vista) img { transform: scale(1.06); }

/* --- Iconos que se dibujan al aparecer (motion) ------------------------- */
[data-motion] .card.anim .card-icon svg * { stroke-dasharray: 72; stroke-dashoffset: 72; }
[data-motion] .card.anim.en-vista .card-icon svg *, [data-motion] .card:not(.anim) .card-icon svg * { stroke-dashoffset: 0; transition: stroke-dashoffset .95s ease .12s; }


/* --- Barra de progreso de lectura (page.readingBar + motion) ------------ */
.lectura-progreso { position: fixed; top: 0; left: 0; height: 3px; width: var(--leido, 0%); z-index: 95; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .12s linear; pointer-events: none; }

/* --- Aurora: blobs animados sobre surface-gradient (motion) ------------- */
[data-motion] .surface-gradient, [data-motion] .hero.surface-gradient { position: relative; overflow: hidden; }
[data-motion] .surface-gradient::before, [data-motion] .surface-gradient::after { content: ""; position: absolute; width: 560px; height: 560px; border-radius: 50%; filter: blur(95px); pointer-events: none; z-index: 0; }
[data-motion] .surface-gradient::before { background: radial-gradient(circle, var(--accent-soft), transparent 62%); top: -180px; left: -140px; animation: aurora-a 17s ease-in-out infinite alternate; }
[data-motion] .surface-gradient::after { background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 60%); bottom: -220px; right: -160px; animation: aurora-b 21s ease-in-out infinite alternate; }
[data-motion] .surface-gradient > .container { position: relative; z-index: 1; }
@keyframes aurora-a { to { transform: translate(190px, 130px) scale(1.22); } }
@keyframes aurora-b { to { transform: translate(-170px, -110px) scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .surface-gradient::before, .surface-gradient::after { animation: none; } .lectura-progreso { transition: none; } }

/* --- Pulido premium global (estatico, AA-safe) --------------------------- */
::selection { background: var(--accent-soft); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
p a:not(.btn), li a:not(.btn), .footer-grid a:not(.brand) { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; }
@media (prefers-reduced-motion: no-preference) { p a:not(.btn), li a:not(.btn), .footer-grid a:not(.brand) { transition: background-size .28s ease; } }
p a:not(.btn):hover, li a:not(.btn):hover, .footer-grid a:not(.brand):hover { background-size: 100% 1px; }


/* --- Card con imagen superior (fichas de equipo, proyectos…) ------------ */
.card-media { margin: -25px -25px 18px; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; aspect-ratio: 4 / 3.4; background: var(--overlay); }
.card-con-media { display: flex; flex-direction: column; }
.card-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
[data-motion] .card-media img { transition: transform .8s cubic-bezier(.22,.61,.21,1); }
[data-motion] .card.luz:hover .card-media img { transform: scale(1.045); }

/* --- Variantes de cabecera (site.headerVariant) ------------------------- */
/* center: marca centrada con la navegacion debajo, para identidades
   editoriales o de servicios (clinicas, estudios). Solo en escritorio
   ancho; por debajo se mantiene el layout clasico. */
@media (min-width: 1080px) {
  [data-header="center"] .site-header { height: auto; }
  [data-header="center"] .header-inner { height: auto; flex-wrap: wrap; justify-content: center; row-gap: 0; padding-top: 14px; padding-bottom: 10px; position: relative; }
  [data-header="center"] .brand { flex-basis: 100%; justify-content: center; }
  [data-header="center"] .brand img.brand-lockup { object-position: center; }
  [data-header="center"] .nav { margin-left: 0; }
  [data-header="center"] .header-tools { position: absolute; right: 0; top: 16px; }
  [data-header="center"][data-scrolled][data-motion] .site-header { height: auto; }
}
/* pill: barra flotante en capsula, para identidades premium/glass. */
@media (min-width: 821px) {
  [data-header="pill"] .site-header { top: 12px; margin: 0 clamp(12px, 2.4vw, 34px); border-radius: 999px; border: 1px solid var(--border); box-shadow: 0 16px 44px rgba(8, 12, 26, .16); }
  [data-header="pill"] .header-inner { padding-left: 12px; }
  [data-header="pill"] .header-cta .btn { border-radius: 999px; }
}

/* --- Titulares con degradado (theme.headline: gradient) ----------------- */
/* Degradado accent→accent2 solo en heros sin foto de fondo; el texto
   sobre imagen sigue siendo solido por legibilidad. */
[data-headline="gradient"] .hero:not(.hero-cover) h1 {
  background: linear-gradient(94deg, var(--accent) 8%, var(--accent-2, var(--accent)) 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--accent);
  width: fit-content; padding-bottom: .04em;
}
/* Los titulares cineticos trocean el texto en spans con overflow oculto:
   el clip del padre no los atraviesa, asi que cada palabra pinta su
   propio degradado. */
[data-headline="gradient"] .hero:not(.hero-cover) h1 .kin-w > span {
  background: linear-gradient(94deg, var(--accent) 8%, var(--accent-2, var(--accent)) 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  [data-headline="gradient"] .hero:not(.hero-cover) h1 { color: var(--text); -webkit-text-fill-color: currentColor; }
}

/* --- Galeria con lightbox ----------------------------------------------- */
.galeria { display: grid; gap: 18px; margin-top: 34px; }
.galeria.cols-2 { grid-template-columns: repeat(2, 1fr); }
.galeria.cols-3 { grid-template-columns: repeat(3, 1fr); }
.galeria.cols-4 { grid-template-columns: repeat(4, 1fr); }
.galeria-item { margin: 0; display: grid; gap: 8px; }
.galeria-abre { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius); overflow: hidden; display: block; }
.galeria-abre img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--radius); }
.galeria-abre:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.galeria-item figcaption { color: var(--muted); font-size: .86rem; }
[data-motion] .galeria-abre img { transition: transform .7s cubic-bezier(.22,.61,.21,1); }
[data-motion] .galeria-abre:hover img { transform: scale(1.05); }
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 1180px); max-height: 92vh; overflow: visible; }
.lightbox::backdrop { background: rgba(6, 10, 18, .82); backdrop-filter: blur(6px); }
.lightbox figure { margin: 0; display: grid; gap: 10px; justify-items: center; }
.lightbox img { max-width: min(88vw, 1100px); max-height: 80vh; border-radius: var(--radius-lg); box-shadow: 0 40px 120px rgba(0,0,0,.5); }
.lightbox figcaption { color: #E9EFF6; font-size: .95rem; text-align: center; }
.lightbox-cerrar { position: fixed; top: 18px; right: 22px; }
.lightbox-nav.prev { position: fixed; left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-nav.next { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-cerrar, .lightbox-nav { width: 46px; height: 46px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(12,18,28,.62); color: #F2F6FA; font-size: 1.25rem; cursor: pointer; display: grid; place-items: center; }
.lightbox-nav[disabled] { opacity: .3; cursor: default; }
.lightbox-cerrar:hover, .lightbox-nav:not([disabled]):hover { background: rgba(28,40,58,.85); }

/* --- Carrusel scroll-snap ----------------------------------------------- */
.carrusel { position: relative; margin-top: 34px; }
.carrusel-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 660px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; }
.carrusel-slide { margin: 0; scroll-snap-align: center; display: grid; gap: 8px; }
.carrusel-slide img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-lg); display: block; }
.carrusel-slide figcaption { color: var(--muted); font-size: .86rem; }
.carrusel-flecha { position: absolute; top: 50%; transform: translateY(-70%); z-index: 3; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); font-size: 1.2rem; cursor: pointer; box-shadow: var(--shadow); display: grid; place-items: center; }
.carrusel-flecha.prev { left: -10px; }
.carrusel-flecha.next { right: -10px; }
.carrusel-flecha:hover { color: var(--accent); border-color: var(--accent-line); }
@media (max-width: 820px) { .carrusel-flecha { display: none; } .carrusel-track { grid-auto-columns: 86%; } }

/* --- Productos ----------------------------------------------------------- */
.productos { display: grid; gap: 22px; margin-top: 34px; }
.productos.cols-2 { grid-template-columns: repeat(2, 1fr); }
.productos.cols-3 { grid-template-columns: repeat(3, 1fr); }
.productos.cols-4 { grid-template-columns: repeat(4, 1fr); }
.producto { position: relative; display: flex; flex-direction: column; }
.producto .card-media { position: relative; }
.producto-badge { position: absolute; top: 12px; left: 12px; background: var(--accent); color: var(--accent-on); font-size: .72rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.producto-pie { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.producto-precio { margin: 0; display: flex; align-items: baseline; gap: 5px; }
.producto-precio strong { font-size: 1.28rem; letter-spacing: -.02em; }
.producto-precio span { color: var(--muted); font-size: .84rem; }
@media (max-width: 1050px) { .productos.cols-3, .productos.cols-4, .galeria.cols-3, .galeria.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .productos, .galeria { grid-template-columns: 1fr !important; } }


/* ============================================================================
   TANDA DE ARTESANIA v10
   Origen: emil-design-eng (Emil Kowalski) + ui-ux-pro-max. Reglas aplicadas:
   - Curvas propias fuertes: las de serie de CSS son flojas y se notan.
   - Feedback de pulsacion en todo lo pulsable (no habia ninguno).
   - Los hover no se disparan al tocar en movil (falsos positivos).
   - Popovers que escalan desde su disparador, nunca desde scale(0).
   - Salidas mas rapidas que entradas.
   - Titulares equilibrados, cifras alineadas, textos largos que no desbordan.
   - Solo se animan transform y opacity donde se puede.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);      /* entradas: arranca rapido */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);  /* movimiento en pantalla */
  --ease-soft: cubic-bezier(.22, .61, .21, 1);   /* reveals largos de scroll */
  --dur-press: 150ms;
  --dur-ui: 190ms;
  --dur-salida: 130ms;
}

/* --- 1. Feedback de pulsacion -------------------------------------------
   "Los botones tienen que sentirse escuchados". Escala sutil (.97) en :active
   sobre cualquier cosa pulsable; el navegador la aplica antes de que termine
   el click, asi que la interfaz responde aunque la accion tarde. */
.btn, .link-button, .faq-q, .galeria-abre, .carrusel-flecha, .mobile-toggle,
.theme-toggle, .lightbox-cerrar, .cookie-actions .btn, .tabs-nav button {
  transition: transform var(--dur-press) var(--ease-out),
              background var(--dur-ui) var(--ease-out),
              border-color var(--dur-ui) var(--ease-out),
              color var(--dur-ui) var(--ease-out),
              box-shadow var(--dur-ui) var(--ease-out);
}
.btn:active, .link-button:active, .faq-q:active, .galeria-abre:active,
.carrusel-flecha:active, .mobile-toggle:active, .theme-toggle:active,
.lightbox-cerrar:active { transform: scale(.97); }
/* El disparador del acordeon es ancho: una escala plana se ve raro, mejor
   hundirlo un pelo. */
.faq-q:active { transform: scale(.995) translateY(1px); }

/* --- 2. Hover solo con puntero fino -------------------------------------
   En tactil, :hover se queda pegado tras el toque: la tarjeta se levanta y no
   vuelve. Se neutraliza el movimiento por hover en punteros gruesos. */
@media (hover: none), (pointer: coarse) {
  .btn:hover, .card:hover, .producto:hover, .galeria-abre:hover img,
  .carrusel-slide:hover img, .card-media:hover img { transform: none; }
  [data-motion="full"] .card.luz { transform: none; }
  [data-motion="full"] .card.luz::after,
  [data-motion="full"] .card.luz:hover::after { opacity: 0; }
  .ticker:hover .ticker-track { animation-play-state: running; }
}

/* --- 3. Desplegables del menu: escalan desde su disparador ---------------
   Nada aparece de la nada: entra desde scale(.97) con el origen arriba, que es
   donde esta el enlace que lo abrio. Si el navegador no soporta
   allow-discrete, aparece de golpe como antes (degradado limpio). */
@media (prefers-reduced-motion: no-preference) {
  .nav-dropdown {
    transform-origin: top left;
    transition: opacity var(--dur-ui) var(--ease-out),
                transform var(--dur-ui) var(--ease-out),
                display var(--dur-ui) allow-discrete;
  }
  .nav-group.open .nav-dropdown { opacity: 1; transform: none; }
  @starting-style {
    .nav-group.open .nav-dropdown { opacity: 0; transform: scale(.97) translateY(-4px); }
  }
}

/* --- 4. Lightbox: entra desde el 96%, sale mas rapido --------------------- */
@media (prefers-reduced-motion: no-preference) {
  .lightbox {
    transition: opacity var(--dur-ui) var(--ease-out),
                transform var(--dur-ui) var(--ease-out),
                overlay var(--dur-ui) allow-discrete,
                display var(--dur-ui) allow-discrete;
  }
  .lightbox[open] { opacity: 1; transform: none; }
  @starting-style { .lightbox[open] { opacity: 0; transform: scale(.96); } }
  .lightbox:not([open]) { opacity: 0; transform: scale(.98); transition-duration: var(--dur-salida); }
  .lightbox::backdrop { transition: opacity var(--dur-ui) var(--ease-out), display var(--dur-ui) allow-discrete; }
  .lightbox[open]::backdrop { opacity: 1; }
  @starting-style { .lightbox[open]::backdrop { opacity: 0; } }
}

/* --- 5. Menu movil: salida mas rapida que la entrada --------------------- */
@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  .nav {
    transform-origin: top center;
    transition: opacity var(--dur-salida) var(--ease-out),
                transform var(--dur-salida) var(--ease-out),
                display var(--dur-salida) allow-discrete;
  }
  .nav.open { opacity: 1; transform: none; transition-duration: var(--dur-ui); }
  @starting-style { .nav.open { opacity: 0; transform: scale(.98) translateY(-8px); } }
}

/* --- 6. Curvas fuertes en las interacciones cortas -----------------------
   Los reveals de scroll siguen con --ease-soft (son largos y explicativos);
   lo que responde al dedo pasa a la curva fuerte. */
[data-motion="full"] .card.luz { transition: transform var(--dur-ui) var(--ease-out), box-shadow 250ms var(--ease-out); }
[data-motion="full"] .card.luz::after { transition: opacity 260ms var(--ease-out); }
.nav > a, .nav-parent, .nav-dropdown a, .footer-grid a { transition: color var(--dur-ui) var(--ease-out), background var(--dur-ui) var(--ease-out); }

/* --- 7. Barra de lectura con transform, no con width ---------------------
   Animar width recalcula layout en cada scroll; scaleX va en GPU. */
.lectura-progreso {
  width: 100%;
  transform: scaleX(var(--leido-x, 0));
  transform-origin: left center;
  transition: transform .12s linear;
}

/* --- 8. Tipografia: titulares equilibrados y textos que no desbordan -----
   text-wrap es mejora progresiva: si el navegador no lo soporta, el texto
   fluye como siempre. overflow-wrap salva emails y URLs largos en movil. */
h1, h2, h3, .hero h1, .cta-box h2, .quote > p { text-wrap: balance; }
p, li, figcaption, .card p, .step p, .callout p { text-wrap: pretty; }
.footer-grid a, .card p, .legal p, .legal li, .form-privacy, .callout p,
.producto p, .stat span { overflow-wrap: anywhere; }
.legal p, .legal li { hyphens: auto; }

/* --- 9. Cifras alineadas (tabular-nums) ---------------------------------
   Sin esto, un contador que sube de 199 a 200 baila de ancho. */
.stat strong, .price, .producto-precio strong, .hero-metrics strong,
.hero-cover-metrics strong, td, th, .version, .step-no, .data-table {
  font-variant-numeric: tabular-nums;
}

/* --- 10. Radios concentricos --------------------------------------------
   Un borde interior con el mismo radio que el exterior se ve mas grueso por
   dentro: se resta el grosor del hueco. */
.card-media { border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.galeria-item img, .carrusel-slide img { border-radius: calc(var(--radius-lg) - 2px); }
.nav-dropdown a { border-radius: calc(14px - 6px); }

/* --- 11. Reserva de espacio en la galeria (evita saltos de layout) ------- */
.galeria-item img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; display: block; }
.galeria-abre { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: inherit; }

/* --- 12. Foco visible homogeneo -----------------------------------------
   El anillo tiene que verse tambien sobre el pie oscuro y sobre el acento. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.footer :focus-visible { outline-color: var(--footer-text, #FFF); }
.btn-primary:focus-visible { outline-color: var(--text); outline-offset: 3px; }

/* --- 13. Movimiento reducido: se conservan los fundidos ------------------
   Reducir no es eliminar: quitamos desplazamiento y escala, dejamos la
   opacidad, que ayuda a entender que algo ha cambiado. */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .link-button:active, .faq-q:active, .galeria-abre:active,
  .carrusel-flecha:active, .mobile-toggle:active { transform: none; }
  .lectura-progreso { transition: none; }
  .nav-dropdown, .lightbox, .nav { transition: opacity 120ms linear !important; transform: none !important; }
}