/* My shared stylesheet for caudan.co. I build every block from the whale geometry: slanted edges, trapezoids and triangles.
   I only put large headlines on orange; anything people read sits on paper in navy, 18px or larger. */
:root{
  --band-a:#f37d24;      /* my logo orange, light side of the gradient */
  --band-b:#ef6c12;      /* my logo orange */
  --band-c:#dc5f0c;      /* my logo orange, shaded side */
  --on-band:#132438;
  --brillante:#fc4404;   /* my bright orange: buttons and a few large accent letters only, never a background */
  --ballena:#ef6c12;
  --quemado:#c14f08;
  --marino:#161c24;     /* my ink: the slate from the base of my logo, for deep blocks */
  --hull:#132438;
  --papel:#f6f6f3;
  --superficie:#ffffff;
  --linea:#dcdde0;
  --texto:#132438;
  --suave:#4a5568;
  --joint:#f6f6f3;       /* the light seam between whale pieces, same as the panel behind it */
  --n1:#162537;--n2:#1f3352;--n3:#0f1d2e;--nb:#253140; /* my whale hull facets: the blue of my logo, it always stays blue */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --sans:"Poppins",ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --papel:#0f1318;--superficie:#171c23;--linea:#2a313b;--texto:#eef0f2;--suave:#a7adb6;--joint:#0f1318;--hull:#2b4670;--n1:#2b4670;--n2:#34558a;--n3:#22395e;--nb:#3a557d;--quemado:#f3a066;color-scheme:dark}}
:root[data-theme="dark"]{--papel:#0f1318;--superficie:#171c23;--linea:#2a313b;--texto:#eef0f2;--suave:#a7adb6;--joint:#0f1318;--hull:#2b4670;--n1:#2b4670;--n2:#34558a;--n3:#22395e;--nb:#3a557d;--quemado:#f3a066;color-scheme:dark}

/* My language switch: I show only the spans for the active language */
:root[data-lang="es"] [data-l="en"],:root[data-lang="en"] [data-l="es"]{display:none}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:clip;background:var(--papel);color:var(--texto);font-family:var(--sans);font-size:18px;line-height:1.7}
@media (max-width:600px){body{font-size:17px}}
.wrap{max-width:1180px;margin:0 auto;padding-inline:32px}
@media (max-width:700px){.wrap{padding-inline:16px}}
h1,h2,h3{margin:0;line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:800}
h3{font-size:1.2rem;font-weight:700;letter-spacing:-.015em}
p{margin:0;max-width:62ch}
a{color:inherit}
.muted{color:var(--suave)}
.mono{font-family:var(--mono);font-size:.8rem;letter-spacing:.03em}
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:1rem;padding:14px 26px;border-radius:999px;text-decoration:none;border:2px solid transparent;transition:transform .2s cubic-bezier(.16,1,.3,1),background .2s}
.btn:active{transform:scale(.97)}
.btn:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--ballena);outline-offset:3px}
.btn-primary{background:var(--brillante);color:#132438;font-weight:700}
.btn-primary:hover{background:#ff5a1f}
.btn-navy{background:var(--marino);color:#fff}
.btn-navy:hover{background:#252e39}
.btn-line{border-color:var(--texto);color:var(--texto)}
.btn-line:hover{background:var(--texto);color:var(--papel)}

/* My orange bands: a soft gradient with a light that drifts very slowly. No grid. */
.band{position:relative;isolation:isolate;overflow:hidden;color:var(--on-band);background:linear-gradient(135deg,var(--band-a),var(--band-b) 48%,var(--band-c))}
.band::before{content:"";position:absolute;inset:-30%;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 46% at 32% 30%,rgb(255 255 255 / .20),transparent 70%),radial-gradient(34% 40% at 72% 78%,rgb(110 30 0 / .16),transparent 70%)}
@media (prefers-reduced-motion:no-preference){
  .band::before{animation:drift 22s ease-in-out infinite alternate}
  @keyframes drift{0%{transform:translate(-6%,-4%) rotate(0deg)}50%{transform:translate(5%,3%) rotate(6deg)}100%{transform:translate(-2%,6%) rotate(-4deg)}}
}

/* Nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--papel) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:600;letter-spacing:.28em;font-size:.95rem}
.logo .whale{width:46px}
.links{display:flex;align-items:center;gap:28px;font-weight:500;font-size:.95rem}
.links a{text-decoration:none}
.links a:hover{color:var(--quemado)}
.lang{display:flex;border:1.5px solid var(--linea);border-radius:999px;padding:2px}
.lang button{font:inherit;font-size:.8rem;font-weight:600;border:0;background:transparent;color:var(--suave);padding:4px 10px;border-radius:999px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--marino);color:#fff}
.nav .btn{padding:9px 20px;font-size:.92rem}
@media (max-width:900px){.links .hide-sm{display:none}}
@media (max-width:520px){.nav .btn{display:none}}

/* Hero: two blocks that fit together like whale pieces */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);min-height:min(78vh,720px);overflow:clip}
.hero .band{clip-path:polygon(0 0,100% 0,86% 100%,0 100%);display:flex;align-items:flex-end;padding:72px 18% 64px max(32px,calc((100vw - 1180px) / 2 + 32px))}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.6rem);font-weight:800;letter-spacing:-.045em;line-height:1}
.hero-side{display:grid;align-content:center;gap:32px;padding:56px max(32px,calc((100vw - 1180px) / 2 + 32px)) 56px 24px}
.hero-side .whale{max-width:340px}
.hero-side p{font-size:1.2rem;line-height:1.6;max-width:36ch}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero .band{clip-path:polygon(0 0,100% 0,100% 84%,0 100%);padding:48px 16px 72px}
  .hero-side{padding:8px 16px 48px;gap:24px}
  .hero-side .whale{max-width:220px}
}

/* The river: one line that runs through channel, flow and Caudan */
.river{position:relative;padding-left:76px}
.river::before{content:"";position:absolute;left:23px;top:96px;bottom:96px;width:3px;border-radius:3px;background:var(--linea)}
.river::after{content:"";position:absolute;left:23px;top:96px;bottom:96px;width:3px;border-radius:3px;background:linear-gradient(var(--quemado),var(--ballena) 55%,var(--hull));transform-origin:top;transform:scaleY(1)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .river::after{animation:fill linear both;animation-timeline:view();animation-range:entry 10% exit 60%}
    @keyframes fill{from{transform:scaleY(.04)}to{transform:scaleY(1)}}
  }
}
.station{position:relative;padding-block:96px}
.station + .station{border-top:1px solid var(--linea)}
.mark{position:absolute;left:-76px;top:96px;width:50px;height:50px}
.mark svg{width:50px;height:50px;display:block}
.stage{display:block;font-family:var(--mono);font-size:.82rem;color:var(--quemado);margin-bottom:12px;letter-spacing:.03em}
.head{display:grid;gap:14px;margin-bottom:44px}
@media (max-width:700px){
  .river{padding-left:36px}
  .river::before,.river::after{left:9px;top:72px;bottom:72px}
  .station{padding-block:72px}
  .mark{left:-36px;top:72px;width:22px;height:22px}
  .mark svg{width:22px;height:22px}
}

/* Channel: today vs with a system */
.cmp{display:grid;border:1px solid var(--linea);border-radius:16px;overflow:hidden;background:var(--superficie)}
.cmp-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:28px;padding:24px 28px}
.cmp-row + .cmp-row{border-top:1px solid var(--linea)}
.cmp-row.top{padding-block:14px;background:var(--papel)}
.cmp-row.top span{font-family:var(--mono);font-size:.78rem;color:var(--suave)}
.cmp-row h3{font-size:1.1rem}
.cmp-row .now{color:var(--suave)}
.cmp-row .then{font-weight:500}
@media (max-width:820px){
  .cmp-row{grid-template-columns:1fr;gap:6px;padding:22px}
  .cmp-row.top{display:none}
  .cmp-row .now::before{content:attr(data-k);display:block;font-family:var(--mono);font-size:.75rem;color:var(--suave)}
  .cmp-row .then::before{content:attr(data-k);display:block;font-family:var(--mono);font-size:.75rem;color:var(--quemado);margin-top:8px}
}

/* Flow: the five layers. On a phone each detail opens right under its own button. */
.layers{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:40px;row-gap:8px;grid-auto-flow:row dense}
.layer-btn{grid-column:1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;text-align:left;font:inherit;color:var(--texto);background:var(--superficie);border:1.5px solid var(--linea);border-radius:12px;padding:16px 18px;cursor:pointer;transition:border-color .2s,transform .2s cubic-bezier(.16,1,.3,1)}
.layer-btn:hover{border-color:var(--ballena)}
.layer-btn:active{transform:scale(.99)}
.layer-btn[aria-expanded="true"]{border-color:var(--ballena);background:color-mix(in srgb,var(--ballena) 10%,var(--superficie))}
.layer-btn b{font-size:1.05rem;font-weight:700}
.layer-btn small{display:block;color:var(--suave);font-size:.88rem;font-weight:400}
.layer-btn .chev{font-family:var(--mono);color:var(--quemado);transition:transform .25s}
.layer-btn[aria-expanded="true"] .chev{transform:rotate(90deg)}
.layer-btn:nth-of-type(1){margin-right:0}
.layer-btn:nth-of-type(2){margin-right:4%}
.layer-btn:nth-of-type(3){margin-right:8%}
.layer-btn:nth-of-type(4){margin-right:12%}
.layer-btn:nth-of-type(5){margin-right:16%}
.piece{width:30px;height:30px}
.layer-panel{grid-column:2;grid-row:1 / span 5;align-self:start;background:var(--superficie);border:1px solid var(--linea);border-radius:16px;padding:32px;display:grid;gap:16px}
.layer-panel h3{font-size:1.6rem;font-weight:800;letter-spacing:-.03em}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tools li{font-family:var(--mono);font-size:.8rem;border:1px solid var(--linea);border-radius:999px;padding:4px 12px}
@media (max-width:860px){
  .layers{grid-template-columns:1fr}
  .layer-btn{margin-right:0 !important}
  .layer-panel{grid-column:1;grid-row:auto;padding:22px;margin-bottom:8px}
}

/* Caudan: what stays */
.deep{background:var(--marino);color:#eef1f5;border-radius:20px;padding:44px;display:grid;gap:32px;clip-path:polygon(0 0,calc(100% - 44px) 0,100% 44px,100% 100%,0 100%)}
.deep p{color:#c9ccd1}
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.nums div{display:grid;gap:6px;border-top:3px solid var(--brillante);padding-top:14px}
.nums b{font-size:clamp(2.4rem,5vw,3.8rem);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;color:var(--brillante)}
.nums span{color:#c9ccd1;font-size:1rem;line-height:1.45}
@media (max-width:700px){.deep{padding:28px 22px;clip-path:none}.nums{grid-template-columns:1fr}}

/* My free assessment: questions, contact, email code, then the diagnosis, all on this page */
.ev{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:start}
@media (max-width:900px){.ev{grid-template-columns:1fr;gap:32px}}
.ev-intro{display:grid;gap:20px;position:sticky;top:96px}
@media (max-width:900px){.ev-intro{position:static}}
.ev-steps{display:grid;gap:10px;margin:8px 0 0;padding:0;list-style:none;counter-reset:ev}
.ev-steps li{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:center;color:var(--suave);font-weight:500}
.ev-steps li::before{counter-increment:ev;content:counter(ev);display:grid;place-items:center;width:32px;height:32px;border-radius:999px;border:1.5px solid var(--linea);font-family:var(--mono);font-size:.85rem}
.ev-steps li.on{color:var(--texto)}
.ev-steps li.on::before{background:var(--marino);border-color:var(--marino);color:#fff}
.ev-steps li.done::before{background:var(--ballena);border-color:var(--ballena);color:#132438}
.ev-card{background:var(--superficie);border:1px solid var(--linea);border-radius:20px;padding:32px;display:grid;gap:22px;clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%)}
@media (max-width:600px){.ev-card{padding:22px}}
.ev-card h3{font-size:1.4rem;font-weight:800;letter-spacing:-.03em}
.field{display:grid;gap:8px}
.field label,.field legend{font-weight:600;font-size:1rem}
.field small{color:var(--suave);font-size:.88rem}
fieldset.field{border:0;margin:0;padding:0;min-width:0}
.ev input[type=text],.ev input[type=email],.ev input[type=tel],.ev select,.ev textarea{font:inherit;font-size:1rem;color:var(--texto);background:var(--papel);border:1.5px solid var(--linea);border-radius:10px;padding:12px 14px;width:100%}
.ev textarea{min-height:110px;resize:vertical}
.ev input:focus-visible,.ev select:focus-visible,.ev textarea:focus-visible{outline:3px solid var(--ballena);outline-offset:1px;border-color:var(--ballena)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--linea);border-radius:999px;padding:8px 14px;font-weight:500;font-size:.95rem;cursor:pointer;background:var(--papel)}
.chips input{accent-color:#ef6c12;width:16px;height:16px;margin:0}
.chips label:has(input:checked){border-color:var(--ballena);background:color-mix(in srgb,var(--ballena) 12%,var(--superficie))}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:600px){.two{grid-template-columns:1fr}}
.consent{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-size:.95rem}
.consent input{accent-color:#ef6c12;width:18px;height:18px;margin-top:4px}
.captcha{min-height:0}
.captcha:not(:empty){min-height:65px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ev-err{color:#b3261e;font-weight:500;font-size:.95rem;min-height:1.2em}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ev-err{color:#ff8a80}}
:root[data-theme="dark"] .ev-err{color:#ff8a80}
.ev-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn[disabled]{opacity:.6;cursor:progress}
.linkbtn{font:inherit;background:none;border:0;color:var(--suave);text-decoration:underline;cursor:pointer;padding:4px}
.code-in{font-family:var(--mono) !important;font-size:1.8rem !important;letter-spacing:.5em;text-align:center;max-width:280px}
.ev-wait{display:grid;justify-items:center;gap:18px;padding:24px 0;text-align:center}
.ev-wait .whale{width:100%;max-width:260px}
.demo-note{font-size:.9rem;color:var(--suave);border:1.5px dashed var(--linea);border-radius:10px;padding:10px 14px}
.score{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.score b{font-size:clamp(3rem,7vw,4.6rem);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--brillante)}
.score span{font-family:var(--mono);font-size:.85rem;color:var(--suave)}
.lvl{display:inline-block;font-weight:700;font-size:.9rem;border-radius:999px;padding:4px 14px;background:var(--marino);color:#fff}
.res-layers{display:grid;margin:0;padding:0;list-style:none}
.res-layers li{display:grid;grid-template-columns:110px 100px 1fr;gap:14px;align-items:start;padding:12px 0;border-top:1px solid var(--linea)}
@media (max-width:600px){.res-layers li{grid-template-columns:1fr auto}.res-layers li p{grid-column:1 / -1}}
.st{font-family:var(--mono);font-size:.78rem;font-weight:500;border-radius:999px;padding:3px 10px;justify-self:start}
.st-fluye{background:var(--marino);color:#fff}
.st-lento{background:var(--ballena);color:#132438}
.st-estancado{background:var(--quemado);color:#fff}
.res-list{margin:0;padding-left:22px;display:grid;gap:10px}
/* Plain sections */
.sec{padding-block:96px;border-top:1px solid var(--linea)}
@media (max-width:700px){.sec{padding-block:72px}}

/* How I work with you */
.plans{display:grid;grid-template-columns:1fr 1fr 1.12fr;gap:16px;align-items:start}
.plan{background:var(--superficie);border:1px solid var(--linea);border-radius:16px;padding:28px;display:grid;gap:14px}
.plan.feat{border:2px solid var(--ballena)}
.plan .price{font-size:1.7rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.plan ul{margin:0;padding-left:20px;display:grid;gap:6px;font-size:1rem}
.plan .plus{font-weight:600}
@media (max-width:900px){.plans{grid-template-columns:1fr}}

/* Me */
.me{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
.crit{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.crit li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start}
.crit svg{width:18px;height:18px;margin-top:6px}
@media (max-width:860px){.me{grid-template-columns:1fr;gap:32px}}

/* FAQ */
.faq{display:grid;gap:10px;max-width:820px}
.faq details{background:var(--superficie);border:1px solid var(--linea);border-radius:12px;padding:0 22px}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--quemado);font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{padding-bottom:20px}

/* Closing band */
.close{padding-block:96px 104px;clip-path:polygon(0 8%,100% 0,100% 100%,0 100%)}
.close .wrap{display:grid;gap:40px}
.close h2{font-size:clamp(2.3rem,5.4vw,4.4rem);letter-spacing:-.045em;line-height:1}
.close .ctas{justify-content:flex-start}
@media (max-width:860px){.close{padding-block:80px 72px}}
.btn-mail{background:#fff;color:#132438}

footer{padding-block:36px;color:var(--suave);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
footer .whale{width:40px}

/* ───────── My whale, traced from my logo ─────────
   Each facet is a full-size plane clipped to its polygon. JavaScript folds and unfolds them with the Web Animations API. */
.whale{position:relative;display:block;aspect-ratio:414/216;width:100%;perspective:700px;transform-style:preserve-3d}
.whale i{position:absolute;inset:0;display:block}
.whale.live i{will-change:transform,opacity}
.whale-stage{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;background:none;padding:0;font:inherit;color:inherit;text-align:left;width:100%}
.whale-stage .whale{transition:transform .6s var(--ease-out)}
.whale-hint{display:flex;align-items:center;gap:8px;margin-top:12px;font-family:var(--mono);font-size:.78rem;color:var(--suave)}
.whale-hint::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--ballena)}
.band .whale-hint{color:var(--on-band)}
.band .whale-hint::before{background:var(--on-band)}

/* My headlines unfold word by word, like a sheet opening from its crease. */
.fold .w{display:inline-block;transform-origin:50% 0;backface-visibility:hidden}
@media (prefers-reduced-motion:no-preference){
  .fold.ready .w{transform:perspective(600px) rotateX(-88deg);opacity:0}
  .fold.open .w{animation:unfold .55s var(--ease-out) both;animation-delay:calc(var(--wi) * 40ms)}
  @keyframes unfold{0%{transform:perspective(600px) rotateX(-88deg);opacity:0;filter:brightness(.7)}55%{transform:perspective(600px) rotateX(8deg);opacity:1;filter:brightness(1.06)}100%{transform:none;opacity:1;filter:none}}
}

/* Nav: I mark the page you are on */
.links a.navlink{position:relative}
.links a.navlink::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--ballena);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-out)}
.links a.navlink:hover::after,.links a[aria-current="page"]::after{transform:scaleX(1)}
.links a[aria-current="page"]{font-weight:600}
.menu-btn{display:none}
@media (max-width:900px){
  .menu-btn{display:inline-grid;place-items:center;width:44px;height:44px;border:1.5px solid var(--linea);border-radius:12px;background:transparent;color:var(--texto);cursor:pointer}
  .menu-btn svg{width:20px;height:20px}
  .mobile-menu{position:fixed;top:68px;left:0;right:0;z-index:19;background:var(--papel);border-bottom:1px solid var(--linea);padding:8px 16px 20px;display:grid;animation:menuIn .22s var(--ease-out)}
  .mobile-menu a{display:block;padding:14px 4px;font-size:1.15rem;font-weight:600;text-decoration:none;border-bottom:1px solid var(--linea)}
  .mobile-menu a[aria-current="page"]{color:var(--quemado)}
  @keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
}
@media (min-width:901px){.mobile-menu{display:none !important}}
.btn,.layer-btn,.menu-btn{transition:transform .16s var(--ease-out),background .2s,border-color .2s,color .2s}
.btn:active,.menu-btn:active{transform:scale(.97)}

/* Reveal: blocks rise a little when they reach the screen */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(18px)}
  .js .rv.in{opacity:1;transform:none;transition:opacity .5s var(--ease-out),transform .6s var(--ease-out);transition-delay:calc(var(--d,0) * 60ms)}
}

/* My photo, cut like a whale piece */
.photo-real{margin:0;position:relative;isolation:isolate;max-width:420px}
.photo-real img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:18px;clip-path:polygon(0 0,100% 0,100% 86%,80% 100%,0 100%)}
.photo-real::after{content:"";position:absolute;right:-14px;bottom:-14px;width:34%;aspect-ratio:1;background:linear-gradient(135deg,var(--band-a),var(--band-c));clip-path:polygon(100% 0,100% 100%,0 100%);z-index:-1}
@media (max-width:860px){.photo-real{max-width:300px}}

/* Page hero for Systems and Cases: a shorter orange band with the whale folding on the side */
.phero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:end;gap:40px;padding:80px max(32px,calc((100vw - 1180px) / 2 + 32px)) 96px;clip-path:polygon(0 0,100% 0,100% 84%,0 100%)}
.phero h1{font-size:clamp(2.4rem,5vw,4.2rem);font-weight:800;letter-spacing:-.045em;line-height:1}
.phero .eyebrow{display:block;font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;margin-bottom:18px}
.phero .whale-stage{max-width:300px;justify-self:end}
.phero .lead{margin-top:22px;font-size:1.25rem;line-height:1.55;max-width:46ch;font-weight:500}
.lead{font-size:1.2rem;line-height:1.6;max-width:58ch}
@media (max-width:860px){.phero{grid-template-columns:1fr;padding:48px 16px 88px;gap:24px}.phero .whale-stage{max-width:200px;justify-self:start}}

/* Systems: one row per layer, the piece on the left, the detail and real examples on the right */
.sys{display:grid;border-top:1px solid var(--linea)}
.sys-row{display:grid;grid-template-columns:110px minmax(0,1fr) minmax(0,1.1fr);gap:40px;padding:56px 0;border-bottom:1px solid var(--linea);align-items:start}
.sys-num{display:grid;gap:12px}
.sys-num svg{width:80px;height:80px}
.sys-num span{font-family:var(--mono);font-size:.82rem;color:var(--quemado)}
.sys-row h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.sys-row .what{display:grid;gap:16px;align-content:start}
.ex{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.ex li{background:var(--superficie);border:1px solid var(--linea);border-radius:14px;padding:18px 20px;display:grid;gap:6px;clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
.ex li b{font-size:1.02rem}
.ex li p{color:var(--suave);font-size:1rem;line-height:1.55}
.tag{justify-self:start;font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;border-radius:999px;padding:2px 10px;background:color-mix(in srgb,var(--ballena) 14%,var(--superficie));border:1px solid color-mix(in srgb,var(--ballena) 40%,var(--linea))}
@media (max-width:900px){.sys-row{grid-template-columns:1fr;gap:20px;padding:44px 0}.sys-num{grid-template-columns:auto 1fr;align-items:center}.sys-num svg{width:52px;height:52px}}

/* Capabilities bento */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.cell{background:var(--superficie);border:1px solid var(--linea);border-radius:18px;padding:30px;display:grid;gap:14px;align-content:start}
.cell h3{font-size:1.35rem;font-weight:800;letter-spacing:-.025em}
.cell p{color:var(--suave)}
.cell.c4{grid-column:span 4}.cell.c2{grid-column:span 2}.cell.c3{grid-column:span 3}
.cell.navy{background:var(--marino);border-color:var(--marino);color:#eef1f5;clip-path:polygon(0 0,calc(100% - 44px) 0,100% 44px,100% 100%,0 100%)}
.cell.navy p{color:#c9ccd1}
.cell svg.ic{width:44px;height:44px}
@media (max-width:900px){.bento{grid-template-columns:1fr}.cell.c4,.cell.c2,.cell.c3{grid-column:auto}.cell.navy{clip-path:none}}

/* Partners: a small reference, never the headline */
.partners{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;font-size:.95rem;color:var(--suave)}
.partners b{font-weight:600;color:var(--texto)}

/* Cases */
.cases{display:grid;gap:24px}
.case{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);background:var(--superficie);border:1px solid var(--linea);border-radius:22px;overflow:hidden}
.case-id{padding:40px;display:grid;gap:16px;align-content:start;background:var(--papel);border-right:1px solid var(--linea)}
.case-id h2{font-size:clamp(1.9rem,3.4vw,2.6rem)}
.case-id .sector{font-family:var(--mono);font-size:.82rem;color:var(--quemado)}
.case-id .now{justify-self:start;font-weight:600;font-size:.85rem;border-radius:999px;padding:4px 12px;background:var(--marino);color:#fff}
.case-id svg{width:60px;height:60px}
.case-body{padding:40px;display:grid;gap:20px;align-content:start}
.case-body h3{font-size:.85rem;font-family:var(--mono);font-weight:500;color:var(--suave);letter-spacing:.03em;text-transform:uppercase}
.case-body ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.case-body li{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start}
.case-body li::before{content:"";width:12px;height:12px;margin-top:9px;background:var(--ballena);clip-path:polygon(0 0,100% 0,70% 100%,0 100%)}
.case.gtc{background:var(--marino);border-color:var(--marino);color:#eef1f5}
.case.gtc .case-id{background:#141a21;border-color:#2c3540}
.case.gtc .case-id .sector{color:#f3a066}
.case.gtc .case-id .now{background:#eef1f5;color:#132438}
.case.gtc .case-body h3,.case.gtc .muted{color:#a7adb6}
@media (max-width:900px){.case{grid-template-columns:1fr}.case-id{border-right:0;border-bottom:1px solid var(--linea);padding:28px 22px}.case-body{padding:28px 22px}.case.gtc .case-id{border-color:#2c3540}}

/* A quiet strip that links the pages */
.next{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.next a{display:grid;gap:8px;text-decoration:none;background:var(--superficie);border:1px solid var(--linea);border-radius:18px;padding:28px;transition:border-color .2s,transform .16s var(--ease-out)}
.next a:hover{border-color:var(--ballena)}
.next a:active{transform:scale(.99)}
.next a b{font-size:1.4rem;font-weight:800;letter-spacing:-.03em}
.next a span{color:var(--suave)}
@media (max-width:700px){.next{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}

/* The tilt needs depth from the stage */
.whale-stage{perspective:900px}
.whale-stage:focus-visible{outline:3px solid var(--ballena);outline-offset:6px;border-radius:12px}

/* Skip link, the cases strip on my home and footer links */
.skip{position:absolute;left:12px;top:-60px;z-index:30;background:var(--marino);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none}
.skip:focus{top:12px}
.more-cases{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:28px;padding:22px 26px;border:1px solid var(--linea);border-radius:16px;background:var(--superficie)}
.more-cases .names{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:1.1rem;flex:1}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--quemado)}
footer .wrap{border-top:1px solid var(--linea);padding-top:28px}
footer [data-whale]{width:40px}
.logo [data-whale]{width:46px}

/* Shorter hero for the inner pages */
.hero-sm{min-height:min(62vh,580px)}
.hero-sm .hero-side{gap:22px}
.hero-sm .hero-side .whale-stage{max-width:280px}
.hero-sm .stage{margin:0}
@media (max-width:860px){.hero-sm .hero-side .whale-stage{max-width:200px}}
.case-body ul.tools{display:flex;flex-wrap:wrap;gap:8px}
.case-body ul.tools li{display:block}
.case-body ul.tools li::before{content:none}
.case.gtc .tools li{border-color:#3a4552}

/* ───────── My client dashboards ─────────
   Always navy, like a control panel. Big numbers in bright orange; everything people read stays light on navy. */
.dash{grid-column:1 / -1;background:#141a21;color:#eef1f5;padding:36px 40px 32px;display:grid;gap:24px;border-top:1px solid #2c3540}
.dash-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px}
.dash-eyebrow{display:block;font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:#f3a066;margin-bottom:8px}
.dash-title{font-size:clamp(1.35rem,2.4vw,1.75rem);font-weight:800;letter-spacing:-.03em;max-width:28ch}
.rate{display:grid;gap:8px;font-size:.92rem;color:#c9ccd1;min-width:260px}
.rate-row{display:flex;align-items:center;gap:14px}
.rate input{flex:1;accent-color:#fc4404;height:28px}
.rate output{font-family:var(--mono);font-size:1.1rem;font-weight:500;color:#fff;min-width:3.4em;text-align:right;font-variant-numeric:tabular-nums}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi{background:#1b222b;border:1px solid #2c3540;border-radius:14px;padding:18px 20px;display:grid;gap:4px;align-content:start}
.kpi small{font-size:.86rem;color:#a7adb6;font-weight:500;line-height:1.35}
.kpi b{font-size:clamp(1.9rem,3.2vw,2.6rem);font-weight:800;letter-spacing:-.04em;line-height:1.05;color:#fc4404;font-variant-numeric:tabular-nums}
.kpi > span{font-family:var(--mono);font-size:.74rem;color:#a7adb6}
@media (max-width:900px){.kpis{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.kpi{padding:14px 14px}.kpi b{font-size:1.7rem}}

.dtable{display:grid;border:1px solid #2c3540;border-radius:14px;overflow:hidden}
.drow{display:grid;grid-template-columns:minmax(0,1.5fr) 120px minmax(0,1.3fr);gap:20px;align-items:center;padding:12px 18px;border-top:1px solid #232b35}
.dtable > .drow:first-child,.dtable [data-rows] > .drow:first-child{border-top:0}
.dtable [data-rows]{display:contents}
.dhead{background:#1b222b;padding-block:10px}
.dhead span{font-family:var(--mono);font-size:.74rem;color:#a7adb6;letter-spacing:.03em}
.drow.d3{grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr) 160px}
.drow .task{font-weight:500;font-size:.98rem;line-height:1.4}
.drow .d3 span,.drow.d3 > span{font-size:.98rem;line-height:1.45}
.drow.d3 > span:nth-child(1){color:#a7adb6}
.min{width:100%;max-width:96px;font:inherit;font-family:var(--mono);font-size:1rem;text-align:right;color:#fff;background:#0f1318;border:1.5px solid #3a4552;border-radius:10px;padding:8px 12px}
.min:focus-visible{outline:3px solid #ef6c12;outline-offset:1px;border-color:#ef6c12}
.share{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px}
.bar{height:10px;border-radius:99px;background:#232b35;overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#c85409,#fc4404);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .7s var(--ease-out)}
.dash:not(.seen) .bar i{transform:scaleX(0)}
.share output{font-family:var(--mono);font-size:.86rem;color:#eef1f5;min-width:8.5em;text-align:right;font-variant-numeric:tabular-nums}
.share output small{color:#a7adb6;font-size:.8rem}
.dash-note{font-size:.92rem;color:#a7adb6;max-width:80ch;line-height:1.55}
.chip{display:inline-block;font-family:var(--mono);font-size:.74rem;border-radius:999px;padding:3px 10px;white-space:nowrap}
.chip.live{background:#fc4404;color:#132438;font-weight:500}
.chip.next{border:1px solid #3a4552;color:#c9ccd1}
@media (max-width:760px){
  .dash{padding:26px 18px}
  .drow,.drow.d3{grid-template-columns:1fr auto;gap:8px 14px;padding:14px}
  .dhead{display:none}
  .drow .share{grid-column:1 / -1}
  .drow.d3 > span:nth-child(2){grid-column:1 / -1;order:3}
  .rate{min-width:0;width:100%}
}

/* Alrise: from contract to invoice, pieces that fit like the whale */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.flow li{display:grid;gap:2px;padding:16px 14px 16px 26px;color:#eef1f5;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%)}
.flow li:first-child{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);padding-left:16px}
.flow li:nth-child(1){background:#162537}.flow li:nth-child(2){background:#1f3352}.flow li:nth-child(3){background:#3a4552}.flow li:nth-child(4){background:#4a5666}
.flow b{font-size:1rem}
.flow span{font-size:.82rem;color:#c9ccd1;line-height:1.35}
@media (max-width:620px){.flow{grid-template-columns:1fr 1fr}.flow li,.flow li:first-child{clip-path:none;border-radius:10px;padding:14px}}
.ba{display:grid;gap:10px}
.ba-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);gap:10px 14px;align-items:baseline;padding:12px 0;border-top:1px solid var(--linea)}
.ba-row p{font-size:1rem;line-height:1.5}
.ba-row p:nth-of-type(1){color:var(--suave)}
.ba-k{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--suave)}
.ba-k.on{color:var(--quemado)}
@media (max-width:700px){.ba-row{grid-template-columns:auto minmax(0,1fr)}}
.mini-kpis{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mini-kpis div{display:grid;gap:4px;border-top:3px solid var(--brillante);padding-top:12px}
.mini-kpis b{font-size:clamp(2.2rem,4vw,3rem);font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--brillante);font-variant-numeric:tabular-nums}
.mini-kpis span{color:var(--suave);font-size:.95rem}

/* Home: proof strip under the Torres Corzo block */
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.proof div{background:var(--superficie);border:1px solid var(--linea);border-radius:16px;padding:22px 24px;display:grid;gap:6px;clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)}
.proof b{font-size:clamp(2rem,3.6vw,2.8rem);font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--brillante);font-variant-numeric:tabular-nums}
.proof span{color:var(--suave);font-size:.98rem;line-height:1.45}
.proof em{font-style:normal;font-family:var(--mono);font-size:.76rem;color:var(--quemado)}
@media (max-width:820px){.proof{grid-template-columns:1fr}}

/* Systems: the operations already running, each lighting the layers it covers */
.ops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.op{display:grid;gap:14px;align-content:start;text-decoration:none;background:var(--superficie);border:1px solid var(--linea);border-radius:18px;padding:28px;transition:border-color .2s,transform .16s var(--ease-out)}
.op:hover{border-color:var(--ballena)}
.op:active{transform:scale(.99)}
.op .sector{font-family:var(--mono);font-size:.78rem;color:var(--quemado)}
.op h3{font-size:1.45rem;font-weight:800;letter-spacing:-.03em}
.op p{color:var(--suave);font-size:1rem;line-height:1.55}
.op ul{margin:0;padding-left:20px;display:grid;gap:4px;font-size:.98rem}
.lyr{display:flex;gap:6px;flex-wrap:wrap}
.lyr span{font-family:var(--mono);font-size:.7rem;border-radius:6px;padding:3px 8px;border:1px solid var(--linea);color:var(--suave)}
.lyr span.on{background:var(--texto);border-color:var(--texto);color:var(--papel)}
.op .go{font-weight:600;color:var(--texto)}
@media (max-width:900px){.ops{grid-template-columns:1fr}}



/* Client figures: the whale that folds into each client's shape */
.morph{max-width:220px}
.case-id .morph{margin-bottom:6px}
.op .morph{max-width:170px;margin-bottom:4px}

/* Layer icons: my whale in outline with the facet that does the job lit up */
.lw{display:block;width:100%;height:auto;overflow:visible}
.lw .dim{fill:var(--linea)}
.lw .hi{transform-box:fill-box;transform-origin:center;transition:transform .45s var(--ease-out)}
.layer-btn[aria-expanded="true"] .lw .hi,.sys-row:hover .lw .hi,.layer-btn:hover .lw .hi{transform:translateY(-10px)}
.layer-btn .piece-w{width:58px}
.sys-num [data-layer]{width:110px}
@media (max-width:900px){.sys-num [data-layer]{width:72px}}

/* Rhombus icons that assemble */
.mosaic{display:block;width:72px;height:auto;overflow:visible}
.mosaic polygon{transform-box:fill-box;transform-origin:center;transition:transform .9s var(--ease-out),opacity .6s var(--ease-out);transition-delay:calc(var(--i) * 70ms)}
.mosaic:not(.in) polygon{transform:translate(var(--tx),var(--ty)) rotate(var(--r)) scale(.4);opacity:0;transition-duration:0s;transition-delay:0s}
.cell [data-mosaic]{display:block;width:72px}

/* My headlines: they unfold slower now, then a wave of color runs through the words */
@media (prefers-reduced-motion:no-preference){
  .fold.open .w{animation:unfold .9s var(--ease-out) both,wave 1.1s ease-in-out;animation-delay:calc(var(--wi) * 70ms),calc(900ms + var(--wi) * 110ms)}
  @keyframes wave{50%{color:var(--wave,var(--brillante))}}
  .band .fold{--wave:#ffffff}
  .js .rv.in{transition:opacity .8s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--d,0) * 90ms)}
}

/* Paper cut: cards are never perfect boxes, each one loses a corner like a sheet torn from a notebook */
.cut{clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.cut-b{clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
.cut-l{clip-path:polygon(18px 0,100% 0,100% 100%,0 100%,0 18px)}
.plan,.cell:not(.navy),.op,.layer-panel,.faq details,.next a,.more-cases{clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.plan:nth-child(2),.cell:nth-child(even):not(.navy),.op:nth-child(2),.next a:nth-child(2){clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
.case{clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,30px 100%,0 calc(100% - 30px))}
.kpi{clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.faq details{border-radius:6px}

/* Layer chips on the cases cards: readable, never grey on white */
.lyr span{font-size:.8rem;font-weight:500;padding:4px 10px;color:var(--texto);border:1.5px solid var(--linea);background:var(--papel)}
.lyr span:not(.on){opacity:.7}

/* Alrise flow: full width under the case so every step has room */
.case .flow-wide{grid-column:1 / -1;padding:0 40px 36px}
@media (max-width:900px){.case .flow-wide{padding:0 22px 28px}}
.flow li{min-height:86px;align-content:center}

/* No-AI note on my home */
.noai{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.noai h2 em{font-style:normal;color:var(--brillante)}
.noai-card{background:var(--marino);color:#eef0f2;padding:32px;display:grid;gap:14px;clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%)}
.noai-card p{color:#c9ccd1}
.noai-card ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.noai-card li{display:grid;grid-template-columns:18px 1fr;gap:12px}
.noai-card li::before{content:"";width:12px;height:12px;margin-top:9px;background:var(--ballena);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
@media (max-width:860px){.noai{grid-template-columns:1fr;gap:28px}}

/* The assessment, one sheet at a time */
.sheets{position:relative;perspective:1200px}
.sheet{display:grid;gap:18px;transform-origin:left center}
.sheet[hidden]{display:none}
.sheet.enter{animation:sheetIn .5s var(--ease-out) both}
.sheet.back{animation:sheetBack .45s var(--ease-out) both}
@keyframes sheetIn{from{opacity:0;transform:rotateY(-14deg) translateX(24px)}to{opacity:1;transform:none}}
@keyframes sheetBack{from{opacity:0;transform:rotateY(14deg) translateX(-24px)}to{opacity:1;transform:none}}
.sheet-q{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.prog{display:grid;gap:8px}
.prog-bar{height:6px;border-radius:99px;background:var(--linea);overflow:hidden}
.prog-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--band-a),var(--brillante));transform-origin:left;transform:scaleX(var(--p,0));transition:transform .5s var(--ease-out)}
.prog span{font-family:var(--mono);font-size:.8rem;color:var(--suave)}
.otro-in{display:none}
.chips:has(input[value="Otro"]:checked) + .otro-in{display:block}

/* Grouped dashboard rows: what the system does, then its share of the time */
.drow.dgroup{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);padding-block:16px}
.drow.dgroup .task b{display:block;font-size:1.02rem}
.drow.dgroup .task small{display:block;margin-top:2px;color:#a7adb6;font-size:.92rem;line-height:1.45;font-weight:400}
.drow.dgroup .share output{min-width:3.2em}
@media (max-width:760px){.drow.dgroup{grid-template-columns:1fr}}

/* Small launch card for a client still rolling out */
.case-sm .case-body{align-content:center}
.case-id .now.launch{background:transparent;color:var(--texto);border:1.5px solid var(--ballena)}
.op .fig-mosaic{display:block;width:150px;margin-bottom:4px}
.op .fig-mosaic .mosaic{width:150px}

/* Alrise: five steps and four real percentages */
.flow.flow-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.flow.flow-5 li:nth-child(5){background:#525f71}
@media (max-width:760px){.flow.flow-5{grid-template-columns:1fr 1fr}}
.mini-kpis.kpi4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.mini-kpis.kpi4{grid-template-columns:1fr 1fr}}

/* Layer icons: the unlit facets are only an outline, so the lit piece always reads, light or dark */
.lw .dim{fill:none;stroke:var(--suave);stroke-width:3;stroke-linejoin:round;opacity:.45}
.lw .hi{stroke:var(--papel);stroke-width:2}

/* Ink bands: some sections go almost black, like a night page between the orange ones */
.sec.ink{--ink-a:#161b22;--ink-b:#0d1116;background:radial-gradient(120% 90% at 85% 0%,#232a33 0%,transparent 55%),linear-gradient(160deg,var(--ink-a),var(--ink-b));color:#eef0f2;border-top:0;
  --texto:#eef0f2;--suave:#a7adb6;--linea:#2a313b;--superficie:#1a2028;--papel:#11161c;--quemado:#f3a066;--n1:#2b4670;--n2:#34558a;--n3:#22395e;--nb:#3a557d}
.sec.ink .muted,.sec.ink .lead{color:#c9ccd1}
.sec.ink .noai-card{background:#1d242d}
.sec.ink .cell.navy{background:#0a0d11;border-color:#2a313b}

/* Systems hero: the five layers are the whale's own pieces; my whale only shows up for a moment */
.stack-wrap{position:relative;max-width:420px}
.stack-wrap .morph{max-width:none}
.stack-labels{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none;transition:opacity .35s var(--ease-out)}
.stack-labels li{position:absolute;left:64%;transform:translateY(-50%);display:flex;gap:8px;align-items:baseline;font-weight:600;font-size:clamp(.82rem,1.4vw,1rem);white-space:nowrap}
.stack-labels .n{font-family:var(--mono);font-size:.72rem;color:var(--quemado);font-weight:500}
.stack-wrap .morph.is-whale + .stack-labels{opacity:0}
@media (max-width:860px){.stack-wrap{max-width:340px}}

/* Cases hero: what every system ships with */
.deliver-h{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;margin-top:6px}
.deliver{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.deliver li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:1.05rem;line-height:1.5}
.deliver li::before{content:"";width:14px;height:14px;margin-top:6px;background:linear-gradient(135deg,var(--band-a),var(--brillante));clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.kpis.kpis2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:520px){.kpis.kpis2{grid-template-columns:1fr}}

/* My CAUDAN letterforms next to the whale in the nav, drawn like the logo */
.logo .wordmark{height:13px;width:auto;color:var(--texto);display:block}
@media (max-width:420px){.logo .wordmark{height:11px}}