/* ================================================================
   EIDOS — Design System v5 · Urbanist + Poppins · Editorial
   ================================================================
   Headers  → Urbanist (700–900)
   Body     → Poppins (300–400)
   Accent   → #4E44FF (used sparingly)
================================================================ */

:root {
  /* Palette */
  --bg:       #ffffff;          /* pure white */
  --bg-2:     #f3f3f3;          /* neutral light grey for alternating sections */
  --ink:      #0a0a0a;
  --ink-2:    #565049;
  --ink-3:    #8d8880;
  --line:     rgba(10,10,10,0.13);
  --line-2:   rgba(10,10,10,0.07);

  --dk-bg:    #0a0a0a;
  --dk-ink:   #f4f1ec;
  --dk-ink-2: rgba(244,241,236,0.62);
  --dk-ink-3: rgba(244,241,236,0.40);
  --dk-line:  rgba(244,241,236,0.14);

  --accent:   #4E44FF;
  --accent-2: #6a61ff;
  --glow-violet: rgba(78,68,255,0.18);
  --glow-green:  rgba(86,150,110,0.16);
  --glow-amber:  rgba(214,138,70,0.16);
  --glow-rose:   rgba(214,90,130,0.16);
  --glow-blue:   rgba(96,130,230,0.18);

  /* Type */
  --head: 'Urbanist', -apple-system, 'Helvetica Neue', sans-serif;
  --body: 'Poppins', -apple-system, 'Helvetica Neue', sans-serif;

  --tx:    0.72rem;
  --tsm:   0.84rem;
  --tb:    0.97rem;
  --tlg:   clamp(1.05rem, 2.2vw, 1.3rem);
  --txl:   clamp(1.2rem, 2.6vw, 1.55rem);
  --t2xl:  clamp(1.6rem, 3.4vw, 2.3rem);
  --display-sm: clamp(1.7rem, 3.6vw, 2.8rem);
  --display:    clamp(2.3rem, 6vw, 5rem);
  --hero:       clamp(3.6rem, 13vw, 12rem);

  /* Spacing */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:2.5rem;
  --s6:3rem; --s7:3.5rem; --s8:4rem; --s10:5rem; --s12:6rem; --s16:8rem; --s20:10rem; --s24:12rem;

  --max: 1400px;
  --pad: 1.25rem;
  --nav: 70px;

  --expo: cubic-bezier(0.16,1,0.3,1);
  --ease: cubic-bezier(0.45,0,0.55,1);
  --fast:150ms; --mid:380ms; --slow:800ms;
}

@media (min-width:640px)  { :root { --pad:2.5rem; } }
@media (min-width:1024px) { :root { --pad:4rem; --nav:78px; } }
@media (min-width:1440px) { :root { --pad:5.5rem; } }

/* ─── RESET ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family:var(--body);
  font-weight:300;
  font-size:var(--tb);
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
  min-height:100dvh;
}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
em{font-style:normal;color:var(--accent)}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ─── TYPE PRIMITIVES ───────────────────────────────────────── */
.display{
  font-family:var(--head);
  font-weight:700;
  font-size:var(--display);
  letter-spacing:-0.035em;
  line-height:1.0;
}
.display-sm{
  font-family:var(--head);
  font-weight:700;
  font-size:var(--display-sm);
  letter-spacing:-0.03em;
  line-height:1.06;
}
.label{
  display:block;
  font-family:var(--body);
  font-weight:500;
  font-size:var(--tx);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:var(--s4);
}

/* ─── LAYOUT ────────────────────────────────────────────────── */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
section{padding-block:clamp(var(--s16),13vw,var(--s24))}
.section--dark{background:var(--dk-bg);color:var(--dk-ink)}
.section--dark .label{color:var(--dk-ink-3)}
.section--dark em{color:var(--accent-2)}

/* ─── REVEAL ────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity var(--slow) var(--expo),transform var(--slow) var(--expo)}
.reveal.is-visible{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:70ms}.reveal[data-d="2"]{transition-delay:140ms}
.reveal[data-d="3"]{transition-delay:210ms}.reveal[data-d="4"]{transition-delay:280ms}
.reveal[data-d="5"]{transition-delay:350ms}.reveal[data-d="6"]{transition-delay:420ms}

/* ─── BUTTONS ───────────────────────────────────────────────── */
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1rem 2.1rem;min-height:52px;
  border:1px solid var(--accent);border-radius:100px;
  font-family:var(--body);font-weight:500;font-size:var(--tsm);
  color:var(--accent);
  transition:background var(--fast),color var(--fast),transform var(--fast);
  -webkit-tap-highlight-color:transparent;
}
.pill:hover{background:var(--accent);color:#fff}
.pill:active{transform:scale(.985)}
.pill--solid{background:var(--accent);color:#fff}
.pill--solid:hover{background:#3b32e0}
.text-link{
  font-weight:400;font-size:var(--tsm);color:var(--ink-2);
  display:inline-flex;align-items:center;min-height:44px;
  border-bottom:1px solid var(--line);transition:color var(--fast),border-color var(--fast);
}
.text-link:hover{color:var(--accent);border-color:var(--accent)}

/* ─── NAV ───────────────────────────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto;z-index:200;height:var(--nav);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--pad);
  transition:background var(--mid) var(--ease),border-color var(--mid) var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(255,255,255,0.82);
  border-color:var(--line-2);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
}
.nav__logo-img{height:22px;width:auto}
.nav__tools{display:flex;align-items:center;gap:var(--s4)}
.lang{position:relative;display:flex;align-items:center;font-family:var(--body);font-size:var(--tx);font-weight:500;letter-spacing:.05em}
.lang__toggle{display:inline-flex;align-items:center;gap:.35rem;color:var(--ink);padding:6px 4px;min-height:34px;transition:color var(--fast)}
.lang__toggle:hover{color:var(--accent)}
.lang__caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;transition:transform var(--fast)}
.lang.open .lang__caret{transform:rotate(180deg)}
.lang__list{position:absolute;top:calc(100% + 10px);right:0;z-index:210;display:flex;flex-direction:column;min-width:76px;padding:5px;background:var(--bg);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(10,10,10,.12);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--fast),transform var(--fast),visibility var(--fast)}
.lang.open .lang__list{opacity:1;visibility:visible;transform:none}
.lang__btn{text-align:left;color:var(--ink-3);padding:7px 10px;border-radius:8px;transition:color var(--fast),background var(--fast)}
.lang__btn:hover{color:var(--accent);background:var(--bg-2)}
.lang__btn.is-active{color:var(--ink);background:var(--bg-2)}
.nav__burger{display:flex;flex-direction:column;gap:6px;padding:10px;margin-right:-10px;-webkit-tap-highlight-color:transparent;position:relative;z-index:201}
.nav__burger span{display:block;width:26px;height:1.5px;background:var(--ink);transition:transform var(--mid) var(--expo),opacity var(--mid),background var(--fast)}
/* Menu overlay behind it is dark — switch the X to light so it stays visible */
.nav__burger.open span{background:var(--dk-ink)}
.nav__burger.open span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.nav__burger.open span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}

/* ─── OVERLAY MENU (right-aligned) ──────────────────────────── */
.menu{
  position:fixed;inset:0;z-index:190;background:var(--ink);color:var(--dk-ink);
  display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  padding:var(--nav) var(--pad) var(--s8);
  clip-path:inset(0 0 100% 0);transition:clip-path var(--slow) var(--expo);
  pointer-events:none;
}
.menu.open{clip-path:inset(0 0 0 0);pointer-events:all}
.menu__list{text-align:right;width:100%;max-width:var(--max);margin-inline:auto}
.menu__list li{opacity:0;transform:translateY(24px)}
.menu.open .menu__list li{opacity:1;transform:none;transition:opacity .55s var(--expo),transform .55s var(--expo)}
.menu.open .menu__list li:nth-child(1){transition-delay:.08s}
.menu.open .menu__list li:nth-child(2){transition-delay:.14s}
.menu.open .menu__list li:nth-child(3){transition-delay:.20s}
.menu.open .menu__list li:nth-child(4){transition-delay:.26s}
.menu.open .menu__list li:nth-child(5){transition-delay:.32s}
.menu.open .menu__list li:nth-child(6){transition-delay:.38s}
.menu__list a{
  display:block;
  font-family:var(--head);font-weight:700;
  font-size:clamp(2.4rem,9vw,6rem);letter-spacing:-.04em;line-height:1.04;
  padding:clamp(.1rem,.6vw,.4rem) 0;
  transition:color var(--fast),padding-right var(--mid) var(--expo);
}
.menu__list a:hover{color:var(--accent-2);padding-right:.5rem}
.menu__foot{
  display:flex;gap:var(--s4);flex-wrap:wrap;justify-content:flex-end;
  width:100%;max-width:var(--max);margin:var(--s10) auto 0;
  font-size:var(--tsm);color:var(--dk-ink-2);
}
.menu__foot a{transition:color var(--fast)}
.menu__foot a:hover{color:var(--dk-ink)}

/* ─── HERO (raised; reel video peeks below the fold) ────────── */
.hero{
  min-height:80svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:var(--nav);padding-inline:var(--pad);padding-bottom:var(--s6);
}
.hero__inner{max-width:var(--max);margin-inline:auto;width:100%}
.hero__status{
  display:flex;align-items:center;gap:.4em;flex-wrap:wrap;
  font-family:var(--body);font-weight:500;font-size:var(--tx);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:var(--s6);
  opacity:0;animation:up .9s var(--expo) .1s forwards;
}
.word-rotate{
  display:inline-block;color:var(--accent);font-weight:600;
  transition:opacity .26s var(--ease),transform .26s var(--ease);
}
.word-rotate.is-out{opacity:0;transform:translateY(4px)}
.hero__h1{
  font-family:var(--head);font-weight:800;
  font-size:var(--hero);letter-spacing:-.055em;line-height:.9;
  margin-bottom:var(--s8);
  opacity:0;animation:up 1.2s var(--expo) .2s forwards;
}
.hero__row{
  display:flex;flex-direction:column;gap:var(--s6);
  align-items:flex-start;
  opacity:0;animation:up 1.2s var(--expo) .45s forwards;
}
@media(min-width:760px){
  .hero__row{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:var(--s8)}
}
.hero__lead{font-family:var(--body);font-weight:400;font-size:var(--tlg);max-width:50ch;line-height:1.45;text-wrap:pretty}
.hero__cta{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
@media(min-width:480px){.hero__cta{flex-direction:row;align-items:center}}
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ─── REEL (full-bleed header video) ────────────────────────── */
.reel{
  position:relative;width:100%;
  height:clamp(380px,82vh,880px);
  padding:0;                 /* override global section padding → no black bands */
  overflow:hidden;background:#000;
}
.reel__video{width:100%;height:100%;object-fit:cover}
.reel::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,8,8,.45) 0%,transparent 40%);
  pointer-events:none;
}
.reel__cap{
  position:absolute;left:var(--pad);bottom:var(--s4);z-index:2;
  font-family:var(--body);font-weight:500;font-size:var(--tx);
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);
}

/* ─── WHAT (intro statement) ────────────────────────────────── */
.what .display{max-width:20ch}
.what__cols{
  display:grid;grid-template-columns:1fr;gap:var(--s6);align-items:start;
  margin-top:var(--s10);padding-top:var(--s8);border-top:1px solid var(--line);
}
@media(min-width:860px){.what__cols{grid-template-columns:1.4fr 1fr;gap:var(--s12)}}
/* Two body paragraphs live in one wrapper so the grid keeps exactly
   2 columns (was 3 loose items auto-placing into the wrong cells) */
.what__col-left{display:flex;flex-direction:column;gap:var(--s4)}
.what__body{font-size:var(--tlg);color:var(--ink-2);line-height:1.55;max-width:48ch}
/* Inline FORMA trigger — a button styled as a text link (opens the modal) */
.what__forma-link{display:inline;padding:0;font:inherit;line-height:inherit;cursor:pointer;border-bottom:1px solid var(--accent);transition:opacity var(--fast)}
.what__forma-link:hover{opacity:.7}
/* Discrete "Ver modelo FORMA" link under the body copy */
.link-forma{display:inline-flex;align-items:center;gap:.4rem;margin-top:var(--s2);font-family:var(--body);font-weight:500;font-size:var(--tsm);color:var(--ink-2);cursor:pointer;transition:color var(--fast),gap var(--fast)}
.link-forma:hover{color:var(--ink);gap:.6rem}
.link-forma__arrow{transition:transform var(--fast)}
.link-forma:hover .link-forma__arrow{transform:translateX(2px)}
.what__etym{font-size:var(--tlg);color:var(--ink-3);line-height:1.5;padding-left:var(--s3);border-left:2px solid var(--accent);align-self:start}
/* Greek term set in an editorial serif, distinct from the site's grotesk */
.what__greek{font-size:1.5em;font-style:italic;font-family:'Playfair Display',Georgia,serif;font-weight:500}

/* ─── FORMA  (deck diagram: Input → core → Output) ──────────── */
.forma-sec{background:var(--bg)}
.forma__head{margin-bottom:var(--s8);max-width:48ch}
.forma__title{font-family:var(--head);font-weight:800;font-size:var(--display);letter-spacing:-.04em;line-height:1}
.forma__title span{color:var(--accent);font-weight:600;letter-spacing:-.02em}
.forma__sub{font-size:var(--tlg);color:var(--ink-2);max-width:46ch;margin-top:var(--s4)}

/* Full-bleed: break out of .wrap so the diagram has room to breathe */
.forma__graphic{position:relative;margin-inline:calc(50% - 50vw);padding-inline:var(--pad)}
.forma__scroll{width:100%;display:flex;justify-content:center}
.forma__img{width:100%;max-width:1400px;height:auto;display:block;pointer-events:none}
@media(max-width:760px){
  /* keep the diagram legible on phones: horizontal scroll instead of shrinking */
  .forma__scroll{overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none;border:1px solid var(--line);border-radius:14px}
  .forma__scroll::-webkit-scrollbar{display:none}
  .forma__img{min-width:680px;max-width:none}
}

/* ── FORMA diagram: inline SVG, animated with CSS ──────────────────
   Rest state (no JS / reduced-motion) = fully drawn & visible, so the
   diagram always reads correctly. On a WHITE section, so no dark stage.
   The intro is gated on .forma__graphic.is-visible (added by the reveal
   observer) so it plays when the section scrolls into view — not on page
   load, far above the fold. Loops run continuously once the intro fires. */
/* The halo ring touches the viewBox edge at rest, and the breathing loops
   scale a few px beyond it — SVG clips to its viewport by default, which
   was shaving the top/bottom of the circles. Let it paint outside. */
.forma__diagram{overflow:visible}
.forma__diagram .circle-left,
.forma__diagram .circle-right{stroke-dasharray:100;stroke-dashoffset:0}
.forma__diagram g[class]{transform-box:fill-box;transform-origin:center}

/* ── Hover interaction: each circle swells individually under the cursor.
   The circle GROUPS animate transform in the idle loop (breathing), and CSS
   animations beat normal declarations — so the hover scale lives on the
   INNER shape (circle/path), which is animation-free and composes with the
   group's motion. The SVG root keeps pointer-events:none (from .forma__img);
   only the circle shapes opt back in, with pointer-events:all so the whole
   disc — not just the thin stroke — is hoverable. Labels stay transparent
   to the pointer and ride along via sibling selectors (their groups only
   animate opacity/filter, so a transform on them is conflict-free). */
.forma__diagram .circle-left > *,
.forma__diagram .circle-right > *,
.forma__diagram .circle-claridad > *,
.forma__diagram .circle-impacto > *,
.forma__diagram .circle-sistema > *{
  pointer-events:all;
  transform-box:fill-box;transform-origin:center;
  transition:transform .5s var(--expo);
}
.forma__diagram .circle-claridad:hover > *,
.forma__diagram .circle-impacto:hover > *,
.forma__diagram .circle-sistema:hover > *{transform:scale(1.05)}
.forma__diagram .circle-left:hover > *,
.forma__diagram .circle-right:hover > *{transform:scale(1.03)}
/* The circle's own labels lift with it. (Input/Output text blocks can't
   join in: their intro animation fills `transform` forwards, which would
   override any hover transform — the outer circles scale alone.) */
.forma__diagram .label-claridad,
.forma__diagram .label-impacto,
.forma__diagram .label-sistema{transition:transform .5s var(--expo)}
.forma__diagram .circle-claridad:hover ~ .label-claridad,
.forma__diagram .circle-impacto:hover ~ .label-impacto,
.forma__diagram .circle-sistema:hover ~ .label-sistema{transform:scale(1.05)}

@media(prefers-reduced-motion:no-preference){
  /* Hidden initial states + animations apply only once in view. */

  /* 1 · the two big outer circles draw themselves (stroke-dashoffset) */
  .forma__graphic.is-visible .forma__diagram .circle-left,
  .forma__graphic.is-visible .forma__diagram .circle-right{
    stroke-dashoffset:100;
    animation:forma-draw 1.3s var(--expo) 0s forwards,
              forma-pulse-outer 6s ease-in-out 3s infinite;
  }
  .forma__graphic.is-visible .forma__diagram .circle-right{animation-delay:0s,6s}
  /* Input / Output blocks: fade + tiny rise, early and discreet */
  .forma__graphic.is-visible .forma__diagram .text-input,
  .forma__graphic.is-visible .forma__diagram .text-output{
    opacity:0;transform:translateY(6px);
    animation:forma-rise .9s var(--expo) .15s forwards;
  }
  /* Venn trio + halo: appear while the outer circles are still drawing.
     Loop: each circle breathes on its own phase so the cluster feels organic. */
  .forma__graphic.is-visible .forma__diagram .circle-claridad,
  .forma__graphic.is-visible .forma__diagram .circle-impacto,
  .forma__graphic.is-visible .forma__diagram .circle-sistema{
    opacity:0;transform:scale(.97);
    animation:forma-scale-soft .9s var(--expo) .55s forwards,
              forma-venn-breathe 5s ease-in-out 3s infinite;
  }
  .forma__graphic.is-visible .forma__diagram .circle-impacto{animation-delay:.55s,4.6s}
  .forma__graphic.is-visible .forma__diagram .circle-sistema{animation-delay:.55s,6.2s}
  .forma__graphic.is-visible .forma__diagram .halo-ring{
    opacity:0;transform:scale(.97);
    animation:forma-scale-soft .9s var(--expo) .55s forwards,
              forma-halo 6s ease-in-out 3s infinite;
  }
  /* 2 · arrows: fade in, then a continuous directional flow — the piece
     that most reads as "information circulating" through the system. */
  .forma__graphic.is-visible .forma__diagram .arrow-left,
  .forma__graphic.is-visible .forma__diagram .arrow-right-top,
  .forma__graphic.is-visible .forma__diagram .arrow-right-bottom{
    opacity:0;
    animation:forma-arrow-in .7s var(--expo) .95s forwards,
              forma-arrow-flow 2.8s ease-in-out 3s infinite;
  }
  .forma__graphic.is-visible .forma__diagram .arrow-right-top{animation-delay:.95s,3.9s}
  .forma__graphic.is-visible .forma__diagram .arrow-right-bottom{animation-delay:.95s,4.8s}
  /* 3 · centre text "AI Agents + Humans": fade + slight scale, then a
     clear heartbeat — this is the core of the system, it should feel alive */
  .forma__graphic.is-visible .forma__diagram .center-text{
    opacity:0;transform:scale(.94);
    animation:forma-center-in .8s var(--expo) 1.35s forwards,
              forma-breathe 4.5s ease-in-out 3s infinite;
  }
  /* 4 · the three keywords, one after another, each with a discreet glow */
  .forma__graphic.is-visible .forma__diagram .label-claridad{opacity:0;animation:forma-label-in .55s var(--expo) 1.75s forwards,forma-glow 4.5s ease-in-out 3s infinite}
  .forma__graphic.is-visible .forma__diagram .label-impacto{opacity:0;animation:forma-label-in .55s var(--expo) 2s forwards,forma-glow 4.5s ease-in-out 4.5s infinite}
  .forma__graphic.is-visible .forma__diagram .label-sistema{opacity:0;animation:forma-label-in .55s var(--expo) 2.25s forwards,forma-glow 4.5s ease-in-out 6s infinite}
}

/* Intro keyframes */
@keyframes forma-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes forma-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes forma-scale-soft{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
@keyframes forma-arrow-in{from{opacity:0}to{opacity:1}}
@keyframes forma-center-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes forma-label-in{from{opacity:0}to{opacity:1}}
/* Idle loops — alive, but sober: max travel 8px, everything ease-in-out */
@keyframes forma-pulse-outer{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.85;transform:scale(1.006)}}
/* Arrows travel forward and hand off: drift ahead while dissolving, then
   re-enter from behind. Starts at the intro's exact final state (opacity 1,
   x 0) so the handover from intro to loop is seamless; the position reset
   happens while fully transparent, so it's never seen. */
@keyframes forma-arrow-flow{
  0%{opacity:1;transform:translateX(0)}
  42%{opacity:0;transform:translateX(8px)}
  42.01%{opacity:0;transform:translateX(-8px)}
  75%,100%{opacity:1;transform:translateX(0)}
}
@keyframes forma-venn-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.014)}}
@keyframes forma-halo{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.008)}}
@keyframes forma-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes forma-glow{0%,100%{opacity:1;filter:drop-shadow(0 0 0 rgba(78,68,255,0))}50%{opacity:.88;filter:drop-shadow(0 0 8px rgba(78,68,255,.7))}}

/* Magnifying-glass zoom button, bottom-right of the diagram */
.forma__zoom{
  position:absolute;right:calc(var(--pad) + 1rem);bottom:1rem;z-index:2;
  display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:var(--bg);border:1px solid var(--line);box-shadow:0 8px 24px -12px rgba(10,10,10,.3);
  transition:border-color var(--fast),transform var(--fast);
}
.forma__zoom:hover{border-color:var(--accent);transform:scale(1.06)}
/* The magnifying glass itself is an inline SVG (see index.html) —
   currentColor lets it follow the button's text colour on hover. */
.forma__zoom-icon{display:block;color:var(--ink)}
.forma__zoom:hover .forma__zoom-icon{color:var(--accent)}

/* Zoom lightbox: bigger dialog, the SVG scrolls if it's still wider than the viewport */
.modal--zoom .modal__dialog--zoom{width:min(1600px,96vw);height:min(90vh,900px);background:#fff;padding:var(--s6)}
.modal__zoom-scroll{width:100%;height:100%;overflow:auto;display:flex;align-items:center;justify-content:center}
.modal__zoom-svg{width:100%;max-width:1500px;height:auto;display:block}

/* ─── SERVICES — four service cards (light, minimal) ────────────
   Soft-grey band, white bordered cards. English names, Spanish
   one-liner, detail behind "Ver qué incluye" (opens a modal). */
.services{background:var(--bg-2)}
.services .display{max-width:22ch}
.svc-intro{margin-top:var(--s4);font-size:var(--tlg);color:var(--ink-2);line-height:1.5;max-width:58ch}
.svc-cards{display:grid;grid-template-columns:1fr;gap:var(--s4);margin-top:var(--s12)}
@media(min-width:600px){.svc-cards{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.svc-cards{grid-template-columns:repeat(4,1fr)}}
/* Whole card is a clickable button (role=button); one corner arrow is the
   only affordance — no repeated "Ver qué incluye" label across the four. */
.svc-card{position:relative;display:flex;flex-direction:column;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:var(--s6);cursor:pointer;transition:border-color var(--fast),transform var(--fast),box-shadow var(--fast)}
.svc-card:hover{border-color:var(--ink-3);transform:translateY(-3px);box-shadow:0 20px 40px -30px rgba(10,10,10,.35)}
.svc-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Pictogram — thin line-art on a soft, per-service colour glow */
.svc-card__pic{position:relative;width:52px;height:52px;margin-bottom:var(--s6);color:var(--ink)}
.svc-card__pic svg{position:relative;z-index:1;display:block;width:100%;height:100%;overflow:visible}
/* Soft colour glow via radial-gradient (renders reliably on mobile Safari/Chrome,
   unlike filter:blur() on a pseudo-element, which some mobile browsers drop). */
.svc-card__pic::before{content:'';position:absolute;inset:-60% -50% -50% -60%;z-index:0;border-radius:50%;background:radial-gradient(circle at 45% 45%,var(--pic-glow,transparent) 0%,transparent 68%)}
.svc-card[data-service="launch"] .svc-card__pic{--pic-glow:var(--glow-blue)}
.svc-card[data-service="brand"] .svc-card__pic{--pic-glow:var(--glow-violet)}
.svc-card[data-service="campaign"] .svc-card__pic{--pic-glow:var(--glow-amber)}
.svc-card[data-service="pitch"] .svc-card__pic{--pic-glow:var(--glow-green)}
.svc-card__t{font-family:var(--head);font-weight:700;font-size:var(--txl);letter-spacing:-.02em;color:var(--ink)}
.svc-card__re{color:var(--ink-3);font-weight:600}
.svc-card__sub{margin-top:.55rem;font-family:var(--body);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.svc-card__d{margin-top:var(--s3);font-size:var(--tsm);color:var(--ink-2);line-height:1.55;flex:1}

.svc-help{margin-top:var(--s12);padding-top:var(--s8);border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2)}
.svc-help__q{font-family:var(--head);font-weight:700;font-size:var(--txl);letter-spacing:-.02em;color:var(--ink)}
.svc-help__s{font-size:var(--tsm);color:var(--ink-2);line-height:1.55;max-width:54ch}
.svc-help .btn-sphere{margin-top:var(--s4)}

/* ─── SPRINT BUILDER MODAL — compact two-column estimate ─────────
   Left: the three choices. Right: sticky summary + CTAs. ~80vh with
   internal scroll. Calm — accent reserved for the CTA and the
   "Recomendado" badge; selected pills use ink, not purple. */
.modal--builder .modal__dialog--builder{width:min(880px,96vw);height:auto;max-height:85vh;overflow-y:auto;background:var(--bg);padding:clamp(var(--s6),4vw,var(--s8))}
.builder__msg{font-family:var(--head);font-weight:700;font-size:var(--tlg);letter-spacing:-.02em;line-height:1.2;color:var(--ink);max-width:34ch;text-wrap:balance;padding-right:var(--s8)}

.builder__grid{display:grid;grid-template-columns:1fr;gap:var(--s6);margin-top:var(--s6)}
@media(min-width:760px){.builder__grid{grid-template-columns:1fr 300px;gap:var(--s8);margin-top:var(--s8)}}

.builder__field + .builder__field{margin-top:var(--s6)}
.builder__label{display:block;font-family:var(--body);font-weight:500;font-size:var(--tx);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.builder__help{display:block;margin-top:.25rem;font-size:var(--tsm);color:var(--ink-3);line-height:1.4}
.builder__opts{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:var(--s3)}
.builder__opt{
  font-family:var(--head);font-weight:600;font-size:var(--tsm);letter-spacing:-.01em;color:var(--ink-2);
  padding:.5rem 1.1rem;border:1px solid var(--line);border-radius:100px;background:var(--bg);min-width:2.7rem;
  transition:color var(--fast),border-color var(--fast),background var(--fast),transform var(--fast);
}
.builder__opt:hover{color:var(--ink);border-color:var(--ink-3);transform:translateY(-1px)}
.builder__opt.is-active{color:#fff;background:var(--ink);border-color:var(--ink)}
.builder__opt.is-active:hover{transform:none}
.builder__unit{font-size:var(--tsm);color:var(--ink-3);margin-left:.25rem}

/* Services accordion — closed by default */
.builder__acc{margin-top:var(--s2);border-top:1px solid var(--line);padding-top:var(--s2)}
.builder__acc-sum{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;font-family:var(--body);font-weight:500;font-size:var(--tsm);color:var(--ink-2);list-style:none;transition:color var(--fast)}
.builder__acc-sum::-webkit-details-marker{display:none}
.builder__acc-sum::after{content:'';width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--fast)}
.builder__acc[open] .builder__acc-sum::after{transform:rotate(-135deg) translateY(-1px)}
.builder__acc-sum:hover{color:var(--ink)}
.builder__services{margin-top:var(--s3);display:flex;flex-direction:column;gap:.5rem}
.builder__services li{font-size:var(--tsm);color:var(--ink-2);line-height:1.4;display:flex;gap:.7rem;align-items:baseline}
.builder__services li::before{content:'';flex:0 0 auto;width:12px;height:1px;background:var(--ink-3);transform:translateY(-4px)}

/* Intensity — selectable cards that carry price + meaning */
.builder__cards{display:flex;flex-direction:column;gap:.6rem;margin-top:var(--s3)}
.builder__card{
  display:grid;grid-template-columns:1fr auto;column-gap:1rem;row-gap:.2rem;align-items:center;text-align:left;
  padding:.8rem 1.05rem;border:1px solid var(--line);border-radius:14px;background:var(--bg);
  transition:border-color var(--fast),background var(--fast);
}
.builder__card:hover{border-color:var(--ink-3)}
.builder__card.is-active{border-color:var(--ink);background:var(--bg-2)}
.builder__card-head{grid-column:1;grid-row:1;display:flex;align-items:center;gap:.5rem}
.builder__card-t{font-family:var(--head);font-weight:700;font-size:var(--tb);letter-spacing:-.01em;color:var(--ink)}
.builder__card-badge{font-family:var(--body);font-weight:500;font-size:calc(var(--tx) - 1px);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--accent);padding:.15rem .5rem;border-radius:100px}
.builder__card-p{grid-column:2;grid-row:1 / span 2;align-self:center;justify-self:end;white-space:nowrap;font-family:var(--head);font-weight:700;font-size:var(--tb);color:var(--ink)}
.builder__card-p span{font-family:var(--body);font-weight:400;font-size:var(--tx);color:var(--ink-3);margin-left:.1rem}
.builder__card-d{grid-column:1;grid-row:2;font-size:var(--tsm);color:var(--ink-2);line-height:1.35}

/* Right column — sticky summary panel */
.builder__summary{background:var(--bg-2);border-radius:16px;padding:var(--s6)}
@media(min-width:760px){.builder__summary{position:sticky;top:0}}
.builder__estimate{display:flex;flex-direction:column;gap:.35rem}
.builder__est-k{font-family:var(--body);font-weight:500;font-size:var(--tx);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.builder__est-v{font-family:var(--head);font-weight:800;font-size:var(--display-sm);letter-spacing:-.03em;line-height:1;color:var(--ink)}
.builder__est-detail{font-size:var(--tsm);color:var(--ink-3)}
.builder__note{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line);font-size:var(--tx);color:var(--ink-3);line-height:1.55}
.builder__cta{margin-top:var(--s6);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.builder__budget{font-family:var(--body);font-size:var(--tsm);color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);line-height:1.4;transition:color var(--fast),text-decoration-color var(--fast)}
.builder__budget:hover{color:var(--ink);text-decoration-color:var(--accent)}

/* ─── FORMA MODAL — methodology + diagram ───────────────────── */
.modal--forma .modal__dialog--forma{width:min(900px,96vw);height:auto;max-height:85vh;overflow-y:auto;background:var(--bg);padding:clamp(var(--s6),4vw,var(--s8))}
.forma-m{display:flex;flex-direction:column}
.forma-m__k{font-family:var(--body);font-weight:500;font-size:var(--tx);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.forma-m__h{margin-top:.25rem;font-family:var(--head);font-weight:800;font-size:var(--display-sm);letter-spacing:-.03em;line-height:1;color:var(--ink)}
.forma-m__sub{margin-top:var(--s3);font-size:var(--tlg);color:var(--ink);line-height:1.45;max-width:56ch}
.forma-m__intro{margin-top:var(--s2);font-size:var(--tsm);color:var(--ink-2);line-height:1.6;max-width:60ch}

/* ── FORMA methodology diagram ─────────────────────────────────── */
.forma-flow{margin-top:var(--s6);padding:clamp(var(--s4),3vw,var(--s6)) 0 0;background:var(--bg);display:flex;flex-direction:column;align-items:center;gap:var(--s2)}
.forma-flow__in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem}
.forma-flow__eyebrow{font-family:var(--body);font-weight:600;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.forma-flow__tags{font-family:var(--head);font-weight:600;font-size:var(--tb);letter-spacing:-.01em;color:var(--ink)}
.forma-flow__link{width:2px;height:30px;background:linear-gradient(180deg,var(--line),var(--accent));position:relative}
.forma-flow__link::after{content:'';position:absolute;left:50%;bottom:0;width:8px;height:8px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translate(-50%,1px) rotate(45deg)}
.forma-flow__core{display:inline-flex;align-items:center;justify-content:center;min-width:160px;padding:.7rem 2.2rem;border-radius:100px;border:1.5px solid var(--accent);background:rgba(78,68,255,.06);font-family:var(--head);font-weight:800;font-size:var(--tl);letter-spacing:.02em;color:var(--accent)}
.forma-flow__out{position:relative;width:100%;margin-top:var(--s3);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
/* Static rail + travelling highlight connecting the three step nodes */
.forma-flow__out::before{content:'';position:absolute;top:23px;left:17%;right:17%;height:2px;background:var(--line);z-index:0}
.forma-flow__out::after{content:'';position:absolute;top:21px;left:17%;right:17%;height:4px;border-radius:4px;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:38% 100%;background-repeat:no-repeat;background-position:-40% 0;opacity:0;z-index:0}
.modal--forma.open .forma-flow__out::after{opacity:.85;animation:formaFlow 3.6s linear .9s infinite}
.forma-flow__block{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.2rem}
.forma-flow__num{display:grid;place-items:center;width:46px;height:46px;margin-bottom:var(--s3);border-radius:50%;background:var(--bg);border:1.5px solid var(--accent);color:var(--accent);font-family:var(--head);font-weight:700;font-size:var(--tsm)}
.forma-flow__k{font-family:var(--head);font-weight:700;font-size:var(--tl);letter-spacing:-.02em;color:var(--ink);line-height:1.05}
.forma-flow__v{font-family:var(--body);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.forma-flow__d{margin-top:.35rem;font-size:var(--tsm);color:var(--ink-2);line-height:1.5;max-width:32ch}
.forma-flow__day{margin-top:.5rem;font-size:var(--tx);color:var(--ink-3);line-height:1.5;max-width:32ch}
.forma-flow__day-l{color:var(--ink-2);font-weight:600}
.forma-m__footer{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);font-family:var(--head);font-weight:600;font-size:var(--tb);color:var(--ink);line-height:1.5;max-width:64ch}
.forma-m .btn-line{margin-top:var(--s6)}

@keyframes formaFlow{from{background-position:-40% 0}to{background-position:140% 0}}
@keyframes formaRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes formaPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.modal--forma.open .forma-flow__in{animation:formaRise .5s ease both}
.modal--forma.open .forma-flow__core{animation:formaPop .5s ease .15s both}
.modal--forma.open .forma-flow__block{animation:formaRise .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * .14s + .45s)}

/* Mobile: stack the three steps and switch the rail to a vertical spine */
@media(max-width:560px){
  .forma-flow__out{grid-template-columns:1fr;gap:var(--s6)}
  .forma-flow__out::before,.forma-flow__out::after{display:none}
  .forma-flow__block:not(:last-child)::after{content:'';position:absolute;left:50%;bottom:calc(-1 * var(--s6));transform:translateX(-50%);width:2px;height:var(--s6);background:linear-gradient(180deg,var(--accent),var(--line))}
}
@media(prefers-reduced-motion:reduce){
  .modal--forma.open .forma-flow__in,
  .modal--forma.open .forma-flow__core,
  .modal--forma.open .forma-flow__block{animation:none}
  .modal--forma.open .forma-flow__out::after{animation:none;opacity:.55;background-position:50% 0}
}

/* ─── SERVICE DETAIL MODAL ──────────────────────────────────── */
.modal--service .modal__dialog--service{width:min(520px,96vw);height:auto;max-height:85vh;overflow-y:auto;background:var(--bg);padding:clamp(var(--s6),4vw,var(--s8))}
.svc-detail{display:flex;flex-direction:column}
.svc-detail__t{font-family:var(--head);font-weight:800;font-size:var(--t2xl);letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
.svc-detail__d{margin-top:var(--s3);font-size:var(--tb);color:var(--ink-2);line-height:1.55}
.svc-detail__k{margin-top:var(--s6);font-family:var(--body);font-weight:500;font-size:var(--tx);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.svc-detail__list{margin-top:var(--s3);display:grid;grid-template-columns:1fr;gap:.55rem}
@media(min-width:440px){.svc-detail__list{grid-template-columns:1fr 1fr;gap:.55rem var(--s6)}}
.svc-detail__list li{font-size:var(--tsm);color:var(--ink-2);line-height:1.4;display:flex;gap:.6rem;align-items:baseline}
.svc-detail__list li::before{content:'';flex:0 0 auto;width:12px;height:1px;background:var(--accent);transform:translateY(-4px)}
.svc-detail__cta{margin-top:var(--s8)}

/* Outline "Cerrar" button, used in the FORMA modal */
.btn-line{align-self:flex-start;font-family:var(--body);font-weight:500;font-size:var(--tsm);color:var(--ink-2);border:1px solid var(--line);border-radius:100px;padding:.5rem 1.4rem;transition:border-color var(--fast),color var(--fast)}
.btn-line:hover{border-color:var(--ink);color:var(--ink)}

/* ─── Bottom-sheet behaviour on mobile (shared) ─────────────────
   FORMA / service / packs modals slide up from the bottom, full-width,
   with a rounded top and fluid internal scroll — never a tiny centred box. */
@media(max-width:600px){
  /* .modal.modal--sheet keeps specificity above the base .modal rules
     that are defined later in the file (equal-specificity source order). */
  .modal.modal--sheet{place-items:end stretch;padding:0}
  .modal.modal--sheet .modal__dialog{width:100%;max-width:none;max-height:92vh;height:auto;border-radius:20px 20px 0 0;transform:translateY(100%);opacity:1;transition:transform var(--mid) var(--expo)}
  .modal.modal--sheet.open .modal__dialog{transform:translateY(0)}
}

/* ─── WORK (large tiles) ────────────────────────────────────── */
/* Heading left, slider arrows right — clearly a carousel control,
   and close to the cards below (they were floating far above). */
.work__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--s4) var(--s6);margin-bottom:var(--s6)}
.work__top .display-sm{margin-top:var(--s4)}
.work__note{font-size:var(--tsm);color:var(--ink-3);margin-top:var(--s3)}
.work__grid{display:grid;grid-template-columns:1fr;gap:var(--s10) var(--s8)}
@media(min-width:640px){.work__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.work__grid{grid-template-columns:repeat(3,1fr)}}
.proj{cursor:pointer}
/* EDIT: to use a real thumbnail, add inline style:
   <div class="proj__media" style="background-image:url('assets/images/work-mantu.jpg')"> */
.proj__media{
  aspect-ratio:4/3;border-radius:16px;overflow:hidden;
  display:grid;place-items:center;margin-bottom:var(--s4);
  background-size:cover;background-position:center;
  /* Opaque light grey — var(--line) is translucent black, which darkened
     over dark video frames and made the card strokes look mismatched. */
  border:1px solid #e1e1e1;
  transition:transform var(--mid) var(--expo);
}
.proj:hover .proj__media{transform:translateY(-5px)}
.proj[data-tone="violet"] .proj__media{background-color:var(--bg-2);background-image:radial-gradient(130% 130% at 25% 20%,var(--glow-violet),transparent)}
.proj[data-tone="green"] .proj__media{background-color:var(--bg-2);background-image:radial-gradient(130% 130% at 25% 20%,var(--glow-green),transparent)}
.proj[data-tone="amber"] .proj__media{background-color:var(--bg-2);background-image:radial-gradient(130% 130% at 25% 20%,var(--glow-amber),transparent)}
.proj[data-tone="dark"] .proj__media{background-color:var(--ink)}
.proj__soon{font-size:var(--tx);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);border-radius:100px;padding:.35rem .9rem;background:rgba(255,255,255,.7)}
.proj__video{width:100%;height:100%;object-fit:cover}
.proj[data-tone="dark"] .proj__soon{color:var(--dk-ink-3);border-color:var(--dk-line);background:rgba(255,255,255,.05)}
.proj__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s1);padding-bottom:var(--s2);border-bottom:1px solid var(--line)}
.proj__row h3{font-family:var(--head);font-weight:700;font-size:var(--tlg);letter-spacing:-.02em;transition:color var(--fast)}
.proj:hover .proj__row h3{color:var(--accent)}
.proj__row span{font-size:var(--tx);letter-spacing:.06em;color:var(--ink-3)}
.proj__logo{width:40px;height:40px;border-radius:10px;flex:0 0 auto;object-fit:contain;box-sizing:border-box}
/* A few client logos are white/near-white — an outline keeps them from
   disappearing against the page background. */
.logo--outline{border:1px solid var(--line)}
.proj__v{font-size:var(--tsm);color:var(--ink-2);line-height:1.55;margin-top:var(--s2)}
.proj__cta{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:var(--s3);
  font-size:var(--tsm);font-weight:500;color:var(--accent);
  opacity:0;transform:translateY(6px);
  transition:opacity var(--mid) var(--expo),transform var(--mid) var(--expo);
}
.proj__cta::after{content:'→';transition:transform var(--fast)}
.proj:hover .proj__cta{opacity:1;transform:none}
.proj:hover .proj__cta::after{transform:translateX(3px)}
@media(hover:none){.proj__cta{opacity:1;transform:none}}

/* ─── CRITERIO ──────────────────────────────────────────────── */
.criterio .display{max-width:22ch}
.criterio__body{font-size:var(--tlg);color:var(--dk-ink-2);max-width:48ch;margin-top:var(--s6)}

/* ─── CONTACT ───────────────────────────────────────────────── */
.contact__inner{display:grid;grid-template-columns:1fr;gap:var(--s12);align-items:start}
@media(min-width:900px){.contact__inner{grid-template-columns:1.1fr 1fr;gap:var(--s16)}}
.contact__left .display{margin:var(--s2) 0 var(--s4);max-width:16ch}
.contact__tagline{font-size:var(--tlg);color:var(--ink-2);line-height:1.5;max-width:34ch}
.contact__tagline em{color:var(--accent);font-style:normal}
.contact__sub{font-size:var(--tlg);color:var(--ink-2);max-width:40ch;margin-bottom:var(--s6)}
.contact__direct{display:flex;flex-direction:column;gap:var(--s1);font-size:var(--tsm)}
.contact__direct a{color:var(--ink-2);transition:color var(--fast);width:max-content;border-bottom:1px solid transparent;padding-bottom:1px}
.contact__direct a:hover{color:var(--accent)}
.contact__form{display:flex;flex-direction:column;gap:var(--s4)}
.frow{display:grid;grid-template-columns:1fr;gap:var(--s4)}
@media(min-width:480px){.frow{grid-template-columns:1fr 1fr}}
.f-group{display:flex;flex-direction:column;gap:.5rem}
.f-group label{font-weight:500;font-size:var(--tx);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.f-group input,.f-group textarea{
  font-family:var(--body);font-size:var(--tb);font-weight:300;color:var(--ink);
  background:transparent;border:none;border-bottom:1px solid var(--line);
  padding:.85rem 0;outline:none;resize:none;width:100%;min-height:48px;border-radius:0;-webkit-appearance:none;
  transition:border-color var(--fast);
}
.f-group textarea{min-height:120px}
.f-group input::placeholder,.f-group textarea::placeholder{color:var(--ink-3)}
.f-group input:focus,.f-group textarea:focus{border-color:var(--accent)}
.f-group .err{border-color:#d4484d}
.f-submit{align-self:stretch;margin-top:var(--s2)}
@media(min-width:480px){.f-submit{align-self:flex-start}}
.btn__loading{display:none}
.f-submit.loading .btn__text{display:none}
.f-submit.loading .btn__loading{display:block}
.f-note{font-size:var(--tx);letter-spacing:.04em;color:var(--ink-3)}

/* ─── FOOTER (columns + giant wordmark) ─────────────────────── */
.footer{padding-block:var(--s16) var(--s6);border-top:1px solid var(--line)}
.footer__cols{display:grid;grid-template-columns:1fr;gap:var(--s8);margin-bottom:var(--s16)}
@media(min-width:560px){.footer__cols{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.footer__cols{grid-template-columns:2fr 1fr 1fr 1fr}}
.footer__col{display:flex;flex-direction:column;gap:var(--s2)}
.footer__col .footer__h{font-family:var(--head);font-weight:800;font-size:clamp(2.8rem,7.5vw,5.6rem);letter-spacing:-.04em;line-height:.95;color:var(--ink)}
.footer__col p{font-size:var(--tsm);color:var(--ink-2);max-width:34ch;text-wrap:pretty}
.footer__lbl{font-weight:500;font-size:var(--tx);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s1)}
.footer__col a,.footer__col>span{font-size:var(--tsm);color:var(--ink-2);transition:color var(--fast)}
.footer__col a:hover{color:var(--accent)}
.footer__giant{width:100%;height:auto;margin-top:var(--s4);opacity:.96}
.footer__copy{margin-top:var(--s6);font-size:var(--tx);letter-spacing:.04em;color:var(--ink-3);white-space:nowrap}

/* ─── WHAT video button ─────────────────────────────────────── */
.what__actions{margin-top:var(--s8);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4)}

/* ── En la práctica × Servicios (interactive question → service) ── */
.practice{background:var(--bg-2)}
.practice__title{margin:var(--s2) 0 var(--s3);max-width:20ch}
.practice__intro{font-size:var(--tlg);color:var(--ink-2);line-height:1.45;max-width:42ch;margin-bottom:var(--s10)}
.practice__grid{display:grid;grid-template-columns:1fr;gap:var(--s6)}
@media(min-width:900px){.practice__grid{grid-template-columns:1.05fr .95fr;gap:var(--s12);align-items:start}}
.practice__questions{display:flex;flex-direction:column;gap:clamp(var(--s2),1.6vw,var(--s4))}
.practice__q{display:flex;align-items:baseline;width:100%;text-align:left;margin:0;padding:.15em 0;
  font-family:var(--head);font-weight:600;font-size:clamp(1.45rem,3.2vw,2.35rem);
  letter-spacing:-.025em;line-height:1.15;color:var(--ink-3);cursor:pointer;
  transition:color var(--mid) var(--expo)}
.practice__q.is-active{color:var(--ink)}
@media(hover:hover){.practice__q:hover{color:var(--ink-2)}}
.practice__q:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:2px}
.practice__q-arrow{flex:0 0 auto;display:inline-block;width:1.05em;margin-right:.4em;color:var(--accent);
  opacity:0;transform:translateX(-.35em);
  transition:opacity var(--mid) var(--expo),transform var(--mid) var(--expo)}
.practice__q.is-active .practice__q-arrow{opacity:1;transform:none}
/* First-visit nudge: pulse the first question + bob its arrow so the user
   learns the text is interactive (no card is shown until hover / tap). */
@keyframes practiceQHint{0%,100%{color:var(--ink-3)}50%{color:var(--ink)}}
@keyframes practiceArrowHint{0%,100%{opacity:.3;transform:translateX(-.35em)}50%{opacity:.95;transform:translateX(0)}}
.practice__q--hint{animation:practiceQHint 1.7s ease-in-out infinite}
.practice__q--hint .practice__q-arrow{animation:practiceArrowHint 1.7s ease-in-out infinite}

/* Service = white card with its icon; cross-fade stack (one grid cell → no height jump) */
.practice__service{display:grid;background:var(--bg);border-radius:20px;padding:clamp(var(--s6),3vw,var(--s8));opacity:0;visibility:hidden;transition:opacity var(--mid) var(--expo),visibility var(--mid)}
.practice__service.is-on{opacity:1;visibility:visible}
.practice__svc{grid-area:1/1;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--mid) var(--expo),transform var(--mid) var(--expo),visibility var(--mid)}
.practice__svc.is-active{opacity:1;visibility:visible;transform:none}
.practice__svc-pic{position:relative;display:block;width:52px;height:52px;margin-bottom:var(--s6);color:var(--ink)}
.practice__svc-pic svg{position:relative;z-index:1;display:block;width:100%;height:100%;overflow:visible}
.practice__svc-pic::before{content:'';position:absolute;inset:-60% -50% -50% -60%;z-index:0;border-radius:50%;background:radial-gradient(circle at 45% 45%,var(--pic-glow,transparent) 0%,transparent 68%)}
.practice__svc[data-service="launch"] .practice__svc-pic{--pic-glow:var(--glow-blue)}
.practice__svc[data-service="brand"] .practice__svc-pic{--pic-glow:var(--glow-violet)}
.practice__svc[data-service="campaign"] .practice__svc-pic{--pic-glow:var(--glow-amber)}
.practice__svc[data-service="pitch"] .practice__svc-pic{--pic-glow:var(--glow-green)}
.practice__svc-name{font-family:var(--head);font-weight:700;font-size:var(--txl);letter-spacing:-.02em;color:var(--ink);line-height:1.05}
.practice__svc-name .svc-card__re{color:var(--ink-3);font-weight:600}
.practice__svc-cat{margin-top:.6rem;font-family:var(--body);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.practice__svc-desc{margin-top:var(--s4);font-size:var(--tlg);color:var(--ink-2);line-height:1.5;max-width:34ch}
.practice__svc-result{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line);font-size:var(--tsm);color:var(--ink);line-height:1.5;max-width:36ch}
.practice__svc-result-l{display:block;font-family:var(--body);font-weight:600;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.4rem}
.practice__cta{margin-top:var(--s12);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4)}
.practice__cta-q{font-size:var(--tlg);color:var(--ink-2)}
/* Desktop: the card fills the questions' height; result anchors to the bottom */
@media(min-width:900px){
  .practice__grid{align-items:stretch}
  .practice__service{height:100%}
  .practice__svc-result{margin-top:auto}
}
@media(max-width:899px){.practice__service{margin-top:var(--s3)}}
@media(prefers-reduced-motion:reduce){.practice__q,.practice__q-arrow,.practice__svc{transition:none}.practice__q--hint{animation:none;color:var(--ink)}.practice__q--hint .practice__q-arrow{animation:none;opacity:.7;transform:none}}

/* ── Page-position indicator (right side, vertically centred) ──── */
.scroll-dots{position:fixed;top:50%;right:14px;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:11px;pointer-events:none}
.scroll-dots__tick{width:13px;height:2px;border-radius:2px;background:rgba(10,10,10,.11);transition:width .3s var(--expo),background .3s var(--expo)}
.scroll-dots__tick.is-active{width:19px;background:rgba(10,10,10,.55)}
/* Even quieter on phones */
@media(max-width:600px){
  .scroll-dots{right:9px;gap:9px}
  .scroll-dots__tick{width:8px;background:rgba(10,10,10,.09)}
  .scroll-dots__tick.is-active{width:14px;background:rgba(10,10,10,.4)}
}
@media(prefers-reduced-motion:reduce){.scroll-dots__tick{transition:none}}
.btn-video{display:inline-flex;align-items:center;gap:.85rem;font-family:var(--body);font-weight:500;font-size:var(--tsm);color:var(--ink);padding:.55rem 1.5rem .55rem .55rem;border:1px solid var(--line);border-radius:100px;transition:border-color var(--fast),background var(--fast)}
.btn-video:hover{border-color:var(--accent);background:var(--bg-2)}
.btn-video__play{width:36px;height:36px;border-radius:50%;background:var(--accent);position:relative;flex:0 0 auto}
.btn-video__play::before{content:'';position:absolute;top:50%;left:53%;transform:translate(-50%,-50%);border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff}

/* ─── Footer WhatsApp + socials ─────────────────────────────── */
.wa-btn{display:inline-flex;align-items:center;gap:.5rem;width:max-content;padding:.5rem 1.2rem;border:1px solid var(--line);border-radius:100px;color:var(--ink);transition:color var(--fast),border-color var(--fast)}
.wa-btn svg{width:18px;height:18px}
.wa-btn:hover{color:#25D366;border-color:#25D366}
.socials{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.3rem}
.soc{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;color:var(--ink-2);transition:color var(--fast),border-color var(--fast),transform var(--fast)}
.soc svg{width:17px;height:17px}
.soc:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}

/* ─── Contact CTA card ──────────────────────────────────────── */
.contact__card{border:1px solid var(--line);border-radius:18px;padding:clamp(1.6rem,4vw,2.6rem);background:var(--bg);display:flex;flex-direction:column;gap:var(--s6);box-shadow:0 30px 70px -50px rgba(10,10,10,.4)}
.contact__start{align-self:flex-start;gap:.6rem}
.contact__start-arrow{transition:transform var(--fast)}
.contact__start:hover .contact__start-arrow{transform:translateX(4px)}

/* ─── Case-study side panel ─────────────────────────────────── */
.panel{position:fixed;inset:0;z-index:300;visibility:hidden}
.panel.open{visibility:visible}
.panel__backdrop{position:absolute;inset:0;background:rgba(10,10,10,.5);opacity:0;transition:opacity var(--mid);pointer-events:none}
.panel.open .panel__backdrop{opacity:1;pointer-events:auto}
.panel__sheet{position:absolute;top:0;right:0;height:100%;width:min(1040px,94%);background:var(--bg);transform:translateX(100%);transition:transform var(--slow) var(--expo);display:flex;flex-direction:column;box-shadow:-30px 0 80px -40px rgba(0,0,0,.5)}
.panel.open .panel__sheet{transform:none}
.panel__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:2}
.panel__back{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--body);font-weight:500;font-size:var(--tsm);color:var(--ink);transition:color var(--fast)}
.panel__back:hover{color:var(--accent)}
.panel__nav{display:flex;align-items:center;gap:.5rem}
.panel__share-wrap{position:relative}
.panel__share{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:border-color var(--fast),color var(--fast)}
.panel__share:hover,.panel__share[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.panel__share svg{width:17px;height:17px}
.panel__share-menu{position:absolute;top:calc(100% + .5rem);right:0;z-index:5;min-width:186px;padding:.35rem;background:var(--bg);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -18px rgba(10,10,10,.35);display:flex;flex-direction:column;gap:.15rem}
.panel__share-menu[hidden]{display:none}
.panel__share-opt{display:flex;align-items:center;gap:.6rem;width:100%;padding:.6rem .7rem;border-radius:9px;font-family:var(--body);font-weight:500;font-size:var(--tsm);color:var(--ink);text-align:left;transition:background var(--fast),color var(--fast)}
.panel__share-opt:hover{background:var(--bg-2);color:var(--accent)}
.panel__share-opt svg{width:18px;height:18px;flex:0 0 auto}
.panel__arrow{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:border-color var(--fast),color var(--fast)}
.panel__arrow:hover{border-color:var(--accent);color:var(--accent)}
.panel__scroll{overflow-y:auto;padding:var(--s6) var(--s4) var(--s10);flex:1}
.panel__media{aspect-ratio:4/3;border-radius:14px;margin-bottom:var(--s6);background-color:var(--bg-2);background-size:cover;background-position:center}
.panel__media[data-tone="violet"]{background-image:radial-gradient(130% 130% at 25% 20%,var(--glow-violet),var(--bg-2))}
.panel__media[data-tone="green"]{background-image:radial-gradient(130% 130% at 25% 20%,var(--glow-green),var(--bg-2))}
.panel__media[data-tone="amber"]{background-image:radial-gradient(130% 130% at 25% 20%,var(--glow-amber),var(--bg-2))}
.panel__media[data-tone="dark"]{background-color:var(--ink)}
/* Case-film hero: the video (moved here by JS from the case body) replaces
   the gradient cover — its own aspect ratio rules, no tone background. */
.panel__media--video{aspect-ratio:auto;background:none !important;background-image:none !important;overflow:hidden;border:1px solid var(--line)}
.panel__media--video .cs-video{margin:0;border-radius:0}
.panel__media--video .cs-iframe{width:100%;aspect-ratio:16/9;display:block;border:0}
.panel__year{font-size:var(--tx);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
/* was var(--t3xl) — an undefined token, silently falling back to the
   inherited (tiny) font-size. Fixed to a real display size. */
/* Margins live on the row so the title and the logo centre against each other */
.panel__titlerow{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin:var(--s2) 0 var(--s4)}
.panel__title{font-family:var(--head);font-weight:800;font-size:var(--display);letter-spacing:-.03em;line-height:1;margin:0}
.panel__logo{width:70px;height:70px;border-radius:14px;flex:0 0 auto;object-fit:contain;box-sizing:border-box}
.panel__row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.panel__readtime{font-size:var(--tx);letter-spacing:.06em;color:var(--ink-3)}
.panel__readtime::before{content:'·';margin-right:.5rem}
.panel__desc{font-size:var(--tlg);color:var(--ink-2);line-height:1.5;margin-bottom:var(--s4)}
.panel__soon{font-size:var(--tsm);color:var(--ink-3);border-top:1px solid var(--line);padding-top:var(--s4)}
@media(max-width:560px){.panel__sheet{width:100%}}

/* ─── Modal (Formless + video) ──────────────────────────────── */
.modal{position:fixed;inset:0;z-index:320;visibility:hidden;display:grid;place-items:center;padding:var(--pad)}
.modal.open{visibility:visible}
.modal__backdrop{position:absolute;inset:0;background:rgba(10,10,10,.6);opacity:0;transition:opacity var(--mid);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none}
.modal.open .modal__backdrop{opacity:1;pointer-events:auto}
.modal__dialog{position:relative;width:min(560px,100%);height:min(82vh,780px);background:var(--bg);border-radius:18px;overflow:hidden;transform:scale(.96);opacity:0;transition:transform var(--mid) var(--expo),opacity var(--mid)}
.modal.open .modal__dialog{transform:none;opacity:1}
.modal__frame{width:100%;height:100%;border:0;display:block}
.modal__close{position:absolute;top:10px;right:10px;z-index:3;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;font-size:1.5rem;line-height:1;color:var(--ink);box-shadow:0 4px 20px rgba(0,0,0,.18)}
.modal__close:hover{background:#fff}
.modal--video .modal__dialog--video{width:min(1240px,96%);height:auto;aspect-ratio:16/9;background:#000}
.modal__video{width:100%;height:100%;object-fit:contain;background:#000}
.modal__loader{position:absolute;inset:0;z-index:1;display:grid;place-items:center;background:var(--bg);transition:opacity var(--mid)}
.modal__loader.hide{opacity:0;pointer-events:none}
.spinner{width:30px;height:30px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ─── Nav CTA + menu CTA (open Formless) ────────────────────── */
.nav__cta{display:inline-flex;align-items:center;padding:.6rem 1.3rem;background:var(--accent);color:#fff;border-radius:100px;font-family:var(--body);font-weight:500;font-size:var(--tsm);transition:background var(--fast),transform var(--fast)}
.nav__cta:hover{background:#3b32e0;transform:translateY(-1px)}
.menu__cta{display:inline-flex;align-items:center;gap:.6rem;align-self:flex-end;width:max-content;margin-top:var(--s6);padding:.85rem 1.8rem;background:var(--accent);color:#fff;border-radius:100px;font-family:var(--head);font-weight:700;font-size:var(--tlg);letter-spacing:-.01em;transition:background var(--fast)}
.menu__cta:hover{background:#3b32e0}

/* ─── Secondary sphere button (CTA → Formless) ──────────────── */
.btn-sphere{display:inline-flex;align-items:center;gap:.75rem;padding:.55rem 1.75rem .55rem .55rem;min-height:52px;border:1px solid var(--line);border-radius:100px;font-family:var(--body);font-weight:500;font-size:var(--tsm);color:var(--ink);transition:border-color var(--fast),transform var(--fast);-webkit-tap-highlight-color:transparent}
.btn-sphere:hover{border-color:var(--accent);transform:translateY(-1px)}
.btn-sphere__icon{width:36px;height:36px;border-radius:50%;background:var(--accent);position:relative;flex:0 0 auto}
.btn-sphere__icon::before{content:'';position:absolute;top:50%;left:44%;width:8px;height:8px;border-top:2px solid #fff;border-right:2px solid #fff;transform:translate(-50%,-50%) rotate(45deg)}
/* Solid fill on dark sections so it never gets lost against the background */
.btn-sphere--light{border-color:var(--accent);background:var(--accent);color:#fff;padding:.55rem 1.75rem .55rem .55rem}
.btn-sphere--light .btn-sphere__icon{background:#fff}
.btn-sphere--light .btn-sphere__icon::before{border-color:var(--accent)}
.btn-sphere--light:hover{border-color:var(--accent-2);background:var(--accent-2);transform:translateY(-1px)}

/* ─── Contact card orb + “Hola!” ────────────────────────────── */
/* Square box so the sphere shows whole — never cropped top/bottom */
.contact__orb{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1;display:grid;place-items:center;background:var(--bg-2)}
.contact__orb video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.contact__hola{position:relative;z-index:1;font-family:var(--head);font-weight:800;font-size:clamp(2.2rem,4.5vw,3.4rem);letter-spacing:-.03em;color:var(--ink)}
.contact__card-lead{font-size:var(--tlg);color:var(--ink);line-height:1.45}

/* ─── Services CTA ──────────────────────────────────────────── */
.services__cta{margin-top:var(--s10)}

/* ─── Work horizontal slider ────────────────────────────────── */
.work__arrows{display:flex;gap:.5rem;flex:0 0 auto}
.work__arrow{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:1.05rem;color:var(--ink);transition:border-color var(--fast),color var(--fast)}
.work__arrow:hover{border-color:var(--accent);color:var(--accent)}
.work__arrow:disabled{opacity:.28;pointer-events:none}
/* Full-bleed both sides: the track spans the whole viewport, so cards clip at
   the browser edges (not at the .wrap boundary) as they scroll. The inline
   padding keeps the first card aligned with the section title (the .wrap
   content column). scroll-padding matches so snapped cards stay title-aligned
   (its % is relative to the 100vw track, so the gutter is written absolutely). */
.work__slider{display:grid;grid-auto-flow:column;grid-auto-columns:min(82vw,380px);gap:var(--s6);overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;padding-block:var(--s2) var(--s4);margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%) var(--pad);scroll-padding-inline:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad))) 0;scrollbar-width:none}
.work__slider::-webkit-scrollbar{display:none}
.work__slider .proj{scroll-snap-align:start}
.work__slider .proj__media{aspect-ratio:4/5}

/* ─── Modal: white strip over Formless logo ─────────────────── */
/* Cover ONLY the Formless logo (bottom-left) — leave the mic (bottom-right) clickable */
.modal__cover{position:absolute;left:0;bottom:0;width:230px;height:72px;background:#fff;border-bottom-left-radius:18px;z-index:2;pointer-events:none}
/* On phones the dialog is ~320px wide, so this 230px strip covered ~70% of it —
   hiding Formless's own input row (the user couldn't see where to type).
   Usability beats hiding the attribution: drop the strip and give it more height. */
@media(max-width:600px){
  .modal__cover{display:none}
  #formlessModal .modal__dialog{height:min(68vh,600px)}
}

/* ─── Footer contact CTA ────────────────────────────────────── */
.footer__contact-cta{display:inline-flex;align-items:center;width:max-content;padding:.5rem 1.2rem;border:1px solid var(--line);border-radius:100px;font-weight:500;color:var(--ink)!important;transition:border-color var(--fast),color var(--fast)}
.footer__contact-cta:hover{border-color:var(--accent);color:var(--accent)!important}

/* ─── Blog (Criterio · dark) ────────────────────────────────── */
.blog{margin-top:var(--s16);border-top:1px solid var(--dk-line);padding-top:var(--s10)}
.post{display:grid;grid-template-columns:1fr;gap:var(--s6);cursor:pointer;align-items:center}
@media(min-width:760px){.post{grid-template-columns:1.05fr 1fr;gap:var(--s10)}}
.post__media{border-radius:16px;overflow:hidden;background:#0f0f0f;aspect-ratio:16/11}
.post__media img{width:100%;height:100%;object-fit:cover;animation:floaty 10s ease-in-out infinite;transition:transform var(--slow) var(--expo)}
.post:hover .post__media img{transform:scale(1.05)}
@keyframes floaty{0%,100%{transform:scale(1.02) translateY(0)}50%{transform:scale(1.05) translateY(-2%)}}
.post__row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:var(--s2)}
.post__tag{font-family:var(--body);font-weight:500;font-size:var(--tx);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.post__readtime{font-size:var(--tx);letter-spacing:.06em;color:var(--dk-ink-3)}
.post__readtime::before{content:'·';margin-right:.5rem}
/* was var(--t3xl) — an undefined token, silently falling back to the
   inherited (tiny) font-size. Fixed to a real display size. */
.post__title{font-family:var(--head);font-weight:800;font-size:var(--display-sm);letter-spacing:-.035em;line-height:1.0;margin:0 0 var(--s4)}
.post__excerpt{font-size:var(--tlg);color:var(--dk-ink-2);line-height:1.4;max-width:40ch;margin-bottom:var(--s4)}
.post__cta{font-weight:500;font-size:var(--tsm);color:var(--accent-2);transition:opacity var(--fast)}
.post:hover .post__cta{opacity:.7}

/* ─── Blog article panel (light — white bg, black text) ──────── */
.article__hero{border-radius:14px;overflow:hidden;aspect-ratio:16/10;margin-bottom:var(--s6);background:var(--bg-2)}
.article__hero img{width:100%;height:100%;object-fit:cover;animation:floaty 12s ease-in-out infinite}
.panel__title{max-width:18ch}
.article p{font-size:var(--tlg);line-height:1.6;color:var(--ink-2);margin-bottom:var(--s4);max-width:62ch}
.article h4{font-family:var(--head);font-weight:700;font-size:var(--txl);letter-spacing:-.02em;color:var(--ink);margin:var(--s8) 0 var(--s3)}
.article strong{color:var(--ink);font-weight:600}
.art-quote{font-family:var(--head)!important;font-weight:600;font-size:var(--t2xl)!important;letter-spacing:-.02em;line-height:1.25;color:var(--ink)!important;margin-bottom:var(--s6)!important;max-width:22ch!important}
.art-triad{font-size:var(--tlg)!important;color:var(--ink)!important;line-height:1.9;border-left:2px solid var(--accent);padding-left:var(--s3)}

/* ─── Case study body (panelBody — Impacto/Tipo/Sector, value list, tags, link) ── */
/* Case film (e.g. ARKKO brand) — big, native controls = play/pause + volume */
.cs-video{width:100%;display:block;border-radius:14px;background:transparent;margin:0 0 var(--s8)}
.cs-meta{display:grid;grid-template-columns:1fr;gap:var(--s4);margin-bottom:var(--s8);padding-bottom:var(--s6);border-bottom:1px solid var(--line)}
@media(min-width:560px){.cs-meta{grid-template-columns:repeat(3,1fr)}}
.cs-meta__item{display:flex;flex-direction:column;gap:.35rem}
.cs-meta__label{font-family:var(--body);font-weight:500;font-size:var(--tx);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.cs-meta__val{font-size:var(--tsm);color:var(--ink);line-height:1.5}
.cs-value{display:flex;flex-direction:column;gap:.6rem;margin-bottom:var(--s8)}
.cs-value li{font-size:var(--tb);color:var(--ink-2);line-height:1.5;display:flex;gap:.75rem;align-items:baseline}
.cs-value li::before{content:'';display:inline-block;width:14px;height:1px;background:var(--accent);flex:0 0 auto;transform:translateY(-4px)}
.cs-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--s6)}
.cs-tags span{font-size:var(--tx);letter-spacing:.03em;color:var(--ink-2);border:1px solid var(--line);border-radius:100px;padding:.35rem .9rem}
.panel__site{margin:calc(-1 * var(--s2)) 0 var(--s6)}
.panel__site[hidden]{display:none}
.cs-figure{margin:var(--s6) 0}
.cs-figure img{display:block;width:100%;height:auto;border-radius:14px;background:var(--bg)}
.cs-figure figcaption{margin-top:.6rem;font-size:var(--tx);color:var(--ink-3);line-height:1.45}
.cs-link{display:inline-flex;align-items:center;gap:.5rem;font-weight:500;font-size:var(--tsm);color:var(--accent);border-bottom:1px solid transparent;transition:border-color var(--fast)}
.cs-link:hover{border-color:var(--accent)}

/* ─── Audio player (narrated article) ───────────────────────── */
.audio-player{
  display:inline-flex;align-items:center;gap:.75rem;
  padding:.6rem 1.4rem .6rem .6rem;margin-bottom:var(--s8);
  border:1px solid var(--line);border-radius:100px;
  font-family:var(--body);font-weight:500;font-size:var(--tsm);color:var(--ink);
  background:var(--bg);transition:border-color var(--fast),background var(--fast);
  -webkit-tap-highlight-color:transparent;
}
.audio-player:hover{border-color:var(--accent);background:var(--bg-2)}
.audio-player__icon{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--accent);flex:0 0 auto;position:relative;
}
.audio-player__icon::before{
  content:'';border-style:solid;border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent #fff;margin-left:3px;
}
.audio-player.is-playing .audio-player__icon::before{
  width:3px;height:12px;border-style:none;background:#fff;
  box-shadow:6px 0 0 #fff;margin-left:-2px;
}

/* ─── RESPONSIVE TWEAKS ─────────────────────────────────────── */
@media(max-width:760px){
  .hero__h1 br{display:block}
}
@media(max-width:600px){
  /* At 82vw + a 48px gap the next card landed exactly off-screen, so the
     slider looked like a single static card. Narrower card + tighter gap
     leaves a visible sliver that signals there's more to swipe. */
  .work__slider{grid-auto-columns:min(74vw,380px);gap:var(--s4)}

  /* Hero: desktop-sized gaps left the block loose on a phone. Tighten them,
     and drop the bottom padding — it sat outside justify-content's centring,
     which pushed the block visually high under the fixed nav. */
  .hero{padding-bottom:0}
  .hero__h1{margin-bottom:var(--s4)}
  .hero__row{gap:var(--s3)}
}
@media(max-width:520px){
  .nav__tools{gap:.7rem}
  .nav__cta{padding:.5rem .95rem}
}

/* ─── REDUCED MOTION ────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .hero__status,.hero__h1,.hero__row{opacity:1!important}
  .menu__list li{opacity:1;transform:none}
}