/* ===========================================================
   Service and Medical Colombia S.A.S. — Design tokens & styles
   Minimalismo corporativo de alta gama · slate + sky accent
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* ---- Palette: "Clinical Integrity" (DESIGN.md) ---- */
  --paper-0:#F7F8FA;
  --paper-1:#F7F8FA;
  --paper-2:#F7F8FA;
  --line-200:#C3C6D1;
  --line-300:#737780;

  --ink-950:#111C2C;
  --ink-800:#566066;
  --ink-700:#43474F;
  --ink-600:#5C666C;
  --ink-400:#737780;

  --accent:#0E3A63;
  --accent-600:#1C568C;
  --accent-100:#DAE4EC;

  --logo-teal:#3E96A0;

  /* Fixed dark panel (hero, stats, footer, CTA band) — DESIGN.md inverse-surface/inverse-primary */
  --panel-dark:#2E3E58;
  --panel-accent:#A7C8FF;
  /* Subtle mesh: two soft off-corner glows over the flat panel colour, not a loud gradient. */
  --panel-gradient:
    radial-gradient(120% 150% at 12% -15%, rgba(167,200,255,.15), transparent 55%),
    radial-gradient(110% 130% at 100% 115%, rgba(62,150,160,.13), transparent 50%),
    var(--panel-dark);

  --shadow-1:0 2px 10px rgba(0,30,64,.05), 0 1px 2px rgba(0,30,64,.04);
  --shadow-2:0 16px 36px rgba(0,30,64,.10), 0 4px 10px rgba(0,30,64,.05);

  --font-display:'Inter','Segoe UI',system-ui,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:'Inter','Segoe UI',system-ui,sans-serif;

  --container:1240px;
  --radius-s:9px;
  --radius-m:14px;
  --radius-l:20px;

  /* Motion: built-in CSS easings are too weak for deliberate entrances. */
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- Cross-page transitions ----------
   Native View Transitions API, CSS-only: no JS, ~0 bytes. Since every page shares this
   stylesheet, this one declaration covers navigation between all 8 pages. Unsupported
   browsers (older Safari/Firefox) just navigate normally — no fallback code needed. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:var(--ease-out)}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.001ms}
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
/* Reduced motion means fewer and gentler animations, not zero: keep the fades and colour
   changes that aid comprehension, drop every position/scale change. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.15s !important;
    transition-property:opacity,color,background-color,border-color,box-shadow,fill,stroke !important;
  }
}
body{
  margin:0;
  background:var(--paper-0);
  color:var(--ink-700);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* overflow-x is intentionally NOT set here (html already clips it): giving body its own
     non-visible overflow makes it a scroll container and breaks position:sticky on children
     like .site-header, even though html remains the element that actually scrolls. */
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:-0.025em;text-wrap:balance;color:var(--ink-950)}
p{margin:0;color:var(--ink-700)}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:#fff;padding:14px 22px;border-radius:0 0 var(--radius-s) 0;
  font-weight:700;font-size:.9rem;
}
.skip-link:focus{left:0}

/* ---------- Page loader: full-screen splash while the page settles, an animated
   gauge ring drawing in around the logo mark. This is a multi-page site — every
   nav click is a full reload — so the elaborate ~1s entrance only plays once per
   browser tab (script.js gates it via sessionStorage); repeat navigations get the
   fast .is-skip fade instead of replaying the whole thing on every click. */
.page-loader{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background:var(--paper-0);
  opacity:1;transition:opacity .6s var(--ease-out),visibility 0s linear .6s;
}
.page-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.page-loader.is-skip{transition:opacity .15s ease,visibility 0s linear .15s}
html.loader-lock{overflow:hidden}

/* Ring sized close to the logo itself (only enough gap for the stroke) so the
   drawing animation reads as tracing the mark's own outline, not an unrelated
   spinner floating around it. */
.page-loader__ring{position:relative;width:210px;height:210px}
.page-loader__ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.page-loader__track,.page-loader__fill{fill:none;stroke-width:5}
.page-loader__track{stroke:var(--accent-100)}
.page-loader__fill{
  stroke:var(--accent-600);stroke-linecap:round;
  stroke-dasharray:276.5;stroke-dashoffset:276.5;
  filter:drop-shadow(0 0 7px rgba(28,86,140,.35));
}
.page-loader.is-animating .page-loader__fill{animation:pageLoaderDraw 1.4s var(--ease-out) forwards}
@keyframes pageLoaderDraw{to{stroke-dashoffset:0}}

.page-loader__mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:visible}
.page-loader__mark img{width:188px;height:188px;display:block;opacity:0;transform:translateY(-140px)}
.page-loader.is-animating .page-loader__mark img{animation:pageLoaderFall .8s var(--ease-out) .05s forwards}
/* Falls in from above and settles with a small overshoot/rebound at the bottom,
   rather than just fading in place — reads as the mark physically dropping into
   the ring instead of materialising. */
@keyframes pageLoaderFall{
  0%{opacity:0;transform:translateY(-140px)}
  55%{opacity:1}
  72%{transform:translateY(7px)}
  88%{transform:translateY(-3px)}
  100%{opacity:1;transform:translateY(0)}
}

.page-loader__wordmark{
  width:min(280px, 70vw);opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
.page-loader__wordmark img{width:100%;height:auto;display:block}
.page-loader.is-animating .page-loader__wordmark{opacity:1;transform:translateY(0);transition-delay:.35s}

.page-loader__pct{
  font-family:var(--font-mono);font-size:.78rem;font-weight:600;letter-spacing:.08em;
  color:var(--accent-600);opacity:0;transition:opacity .3s ease;font-variant-numeric:tabular-nums;
}
.page-loader.is-animating .page-loader__pct{opacity:1;transition-delay:.15s}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
@media (max-width:640px){.container{padding-inline:18px}}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent-600);
}
.eyebrow::before{content:"";width:18px;height:1.5px;background:var(--accent);transform-origin:left center}

/* ---------- Continuous motion (opt-in via <body class="continuous-motion">) ----------
   Used on Nosotros, Representaciones, Productos, Certificaciones, Cobertura and Contacto.
   Only short, decorative text gets looping motion — labels, headings, numbers. Paragraph
   body copy is deliberately left alone: continuous movement on reading text hurts
   legibility and is unnecessary for something meant to be read once and left settled. */
@media (prefers-reduced-motion: no-preference){
  /* One shared rhythm, one property (opacity) — the dash and the numbers breathe together
     instead of several effects looping out of sync at different speeds. */
  .continuous-motion .eyebrow::before{animation:softBreathe 3.4s ease-in-out infinite}
  .continuous-motion .stat__num,
  .continuous-motion .about-fact__num{animation:softBreathe 3.4s ease-in-out infinite}
  @keyframes softBreathe{0%,100%{opacity:1}50%{opacity:.5}}
}

.section{padding-block:96px}
.section--tight{padding-block:64px}
@media (max-width:768px){.section{padding-block:60px}.section--tight{padding-block:44px}}
.section--alt{background:var(--paper-2)}

/* ---------- Drifting background blob (opt-in via <body class="has-bg-motion">) ----------
   Used only on Nosotros and Productos. A soft, blurred, slow-moving gradient shape sits
   behind each section's content — plain CSS, no WebGL — so the plain paper background
   isn't completely static, without competing with the text sitting on top of it. */
.has-bg-motion .section{position:relative;overflow:hidden}
.has-bg-motion .section > *{position:relative;z-index:1}
.has-bg-motion .section > .bg-draw-line{position:absolute;z-index:0}

/* ---------- Extra background layer (opt-in via <body class="has-bg-motion-plus">) ----------
   A faint dot-grid texture and a slow rain of miniature company logos drifting downward
   behind the section content (tiled SVG that re-references the small dark logo mark;
   loops seamlessly by animating background-position by one tile). The soft radial "blob"
   this used to include was dropped: once every section shares one flat paper tone, its
   blurred edge no longer blends in and reads as a stray shadow instead of ambient texture. */
.has-bg-motion-plus .section{
  background-image:radial-gradient(circle, rgba(14,58,99,.1) 1px, transparent 1px);
  background-size:22px 22px;
}
.has-bg-motion-plus .section::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url('images/marcas/logo-tile.svg');
  background-repeat:repeat;
  background-size:90px 90px;
  opacity:.1;
}
@media (prefers-reduced-motion: no-preference){
  .has-bg-motion-plus .section::after{animation:bgLogoRain 16s linear infinite}
  @keyframes bgLogoRain{
    from{background-position:0 0}
    to{background-position:0 90px}
  }
}

/* Decorative circuit-style line that draws in as its section scrolls into view. Fully
   visible by default (safe fallback); browsers with scroll-driven animation support hide
   it first and animate the reveal, matching the pattern used by the process timeline. */
.bg-draw-line{position:absolute;inset:0;width:100%;height:100%;opacity:.09;z-index:0}
.bg-draw-line path{stroke:var(--accent);stroke-width:1.5;fill:none;stroke-dasharray:1000;stroke-dashoffset:0}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .bg-draw-line path{
      stroke-dashoffset:1000;
      animation:bgLineDraw linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 65%;
    }
    @keyframes bgLineDraw{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
  }
}

.section-head{max-width:680px;margin-bottom:48px}
.section-head h2{font-size:clamp(1.85rem,2.9vw,2.75rem);line-height:1.1;margin-top:12px}
.section-head p{margin-top:14px;color:var(--ink-600);font-size:1.03rem}
.section-head--center{margin-inline:auto;text-align:center}
/* Heading paired with a "see all" action that links to the dedicated page. */
.section-head--linked{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.section-head--linked > div{max-width:680px}
.section-head--linked .btn{flex:none}
@media (max-width:768px){.section-head--linked{flex-direction:column;align-items:flex-start;gap:20px}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:var(--radius-s);
  font-family:var(--font-body);font-weight:600;font-size:.92rem;
  border:1.5px solid transparent;white-space:nowrap;
  transition:transform .16s var(--ease-out), box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}
/* Press feedback: a subtle inward scale reads as "pressed" better than a nudge down. */
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-600);border-color:var(--accent-600)}
/* On the fixed dark panel the dark primary fill vanishes — it is inverted to the light
   accent under .pagehead. The CTA banner's button sits in a white card, so it stays dark. */
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-outline:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-outline--dark{color:var(--ink-950);border-color:var(--line-300)}
.btn-outline--dark:hover{background:var(--paper-2);border-color:var(--accent)}
.btn-block{width:100%}
.btn-sm{padding:9px 16px;font-size:.82rem}
.btn svg{width:16px;height:16px;flex:none}

.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.88rem;color:var(--accent-600)}
.link-arrow svg{width:15px;height:15px;transition:transform .15s ease}
.link-arrow:hover{color:var(--accent)}
.link-arrow:hover svg{transform:translateX(3px)}

/* ---------- Professional gate bar ---------- */
.gatebar{
  background:var(--panel-dark);color:#C9D8E5;
  font-size:.82rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.gatebar__row{
  display:flex;align-items:center;justify-content:center;gap:18px;
  padding-block:9px;text-align:center;flex-wrap:wrap;
}
.gatebar strong{color:#fff}
.gatebar__close{
  position:relative;
  background:transparent;border:1px solid rgba(255,255,255,.3);color:#C9D8E5;
  border-radius:99px;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  flex:none;
}
.gatebar__close::after{content:"";position:absolute;inset:-11px}
.gatebar__close:hover{border-color:#fff;color:#fff}
.gatebar.is-hidden{display:none}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--paper-1) 68%, transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;box-shadow:none;
  transition:background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* Deepens into a proper glass panel once the page has scrolled past the header itself —
   at the very top there's nothing behind it yet to blur. */
.site-header.is-scrolled{
  background:color-mix(in srgb, var(--paper-1) 90%, transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--line-200);box-shadow:var(--shadow-1);
}
.site-header__row{display:flex;align-items:center;justify-content:space-between;height:80px;gap:20px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand__mark{width:40px;height:38px;flex:none;display:block}
.brand__mark img{width:100%;height:100%;object-fit:contain;display:block}
.brand__name{display:flex;flex-direction:column;line-height:1.2}
.brand__name b{font-family:var(--font-display);font-weight:800;font-size:1.04rem;color:var(--ink-950)}
.brand__name b em{font-style:normal;color:var(--logo-teal)}
.brand__name span{font-family:var(--font-mono);font-weight:500;font-size:.6rem;letter-spacing:.09em;color:var(--ink-600);text-transform:uppercase;margin-top:1px}

.nav{display:flex;align-items:center;gap:24px;position:relative}
.nav a:not(.btn){font-size:.9rem;font-weight:600;color:var(--ink-700);position:relative;padding-block:6px}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transition:transform .18s ease}
.nav a:not(.btn):hover{color:var(--ink-950)}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.nav a:not(.btn).is-current{color:var(--ink-950)}
.nav a:not(.btn).is-current::after{transform:scaleX(1);background:var(--ink-950)}

/* ---------- Nav mega-menu: a single shared panel that shifts between items ---------- */
.nav-drop{
  position:absolute;top:calc(100% + 20px);left:0;min-width:300px;max-width:360px;
  background:var(--paper-1);border:1px solid var(--line-200);border-radius:var(--radius-l);
  box-shadow:var(--shadow-2);padding:20px;z-index:80;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility 0s linear .2s;
}
/* Invisible bridge over the gap above the panel, so the mouse can travel from the nav
   link down into the panel without the hover gap closing it first. */
.nav-drop::before{content:"";position:absolute;top:-20px;left:0;right:0;height:20px}
.nav-drop.is-open{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.nav-drop__nub{
  position:absolute;top:-6px;left:0;width:12px;height:12px;
  background:var(--paper-1);border-left:1px solid var(--line-200);border-top:1px solid var(--line-200);
  transform:translateX(-50%) rotate(45deg);transition:left .25s var(--ease-out);
}
.nav-drop__body p{margin:0 0 14px;color:var(--ink-600);font-size:.9rem;line-height:1.55}
.nav-drop__links{display:flex;flex-direction:column;gap:9px}
.nav-drop__links a{font-size:.86rem;font-weight:600;color:var(--accent-600)}
.nav-drop__links a:hover{color:var(--accent)}
.nav-drop__links a.nav-drop__brand{display:flex;align-items:center;gap:10px;color:var(--ink-700);padding:6px 0}
.nav-drop__links a.nav-drop__brand:hover{color:var(--ink-950)}
.nav-drop__brand-logos{display:flex;align-items:center;gap:6px;flex:none}
.nav-drop__brand-logos picture{display:flex;align-items:center;height:20px}
.nav-drop__brand-logos picture + picture{padding-left:6px;border-left:1px solid var(--line-200)}
.nav-drop__brand-logos img{max-height:100%;width:auto;max-width:52px;object-fit:contain;display:block}
.nav-drop__brand-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-s);background:var(--paper-2);color:var(--accent);flex:none}
.nav-drop__brand-icon svg{width:16px;height:16px}
.nav-drop__body.slide-l{animation:navDropSlideL .28s var(--ease-out)}
.nav-drop__body.slide-r{animation:navDropSlideR .28s var(--ease-out)}
@keyframes navDropSlideL{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes navDropSlideR{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@media (max-width:1100px){.nav-drop{display:none}}
@media (prefers-reduced-motion: reduce){
  .nav-drop{transition:opacity .15s ease;transform:none}
  .nav-drop.is-open{transform:none}
  .nav-drop__nub{transition:none}
  .nav-drop__body.slide-l,.nav-drop__body.slide-r{animation:none}
}

.header-actions{display:flex;align-items:center;gap:14px}
.menu-toggle{display:none;background:transparent;border:1px solid var(--line-300);border-radius:var(--radius-s);width:44px;height:44px;align-items:center;justify-content:center;color:var(--ink-950)}
.menu-toggle svg{width:20px;height:20px}

/* 7 nav items + brand + actions need ~1090px; below that, collapse to the drawer. */
@media (max-width:1100px){
  .nav{position:fixed;inset:0 0 0 auto;top:0;height:100vh;width:min(320px,86vw);background:var(--paper-1);
    flex-direction:column;align-items:flex-start;padding:96px 28px 28px;gap:6px;
    transform:translateX(100%);transition:transform .25s ease;box-shadow:var(--shadow-2);z-index:70}
  .nav.is-open{transform:translateX(0)}
  .nav a:not(.btn){width:100%;padding:12px 0;border-bottom:1px solid var(--line-200);font-size:1rem}
  .nav a.btn{width:100%}
  .header-actions .btn-primary{display:none}
  .menu-toggle{display:inline-flex}
}

/* ---------- Page header (static, replaces the old slide carousel) ---------- */
.pagehead{position:relative;overflow:hidden;background:var(--panel-gradient);color:#fff;perspective:1400px}

/* ---------- Home hero: fills the first screen ----------
   Gives the scroll-tilt effect above (.pagehead__inner's heroTilt) a full viewport of
   scroll distance to play out in, instead of resolving within a few hundred pixels. */
.home-hero{display:flex;flex-direction:column;min-height:100dvh}
.home-hero .pagehead{flex:1;display:flex;align-items:center}
.home-hero .pagehead__inner{padding-block:40px;width:100%;margin-inline:auto;text-align:center}
.home-hero .stats{flex:none}
.home-hero .pagehead h1{font-size:clamp(2.8rem,7.5vw,6rem);line-height:1}

/* ---------- Hero brand lockup (icon + wordmark, replaces the hero heading text) ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.hero-mark{display:flex;justify-content:center}
.hero-mark__img{width:100%;max-width:860px;height:auto;display:block}
@media (max-width:640px){.hero-mark__img{max-width:420px}}

/* Entrance: a 3D flip-and-settle, distinct from the generic .reveal rise used elsewhere.
   Higher specificity than the base .reveal rule (which this overrides), same mechanism —
   the existing revealObserver in script.js toggles .is-visible with no JS changes needed. */
.hero-mark.reveal{
  opacity:0;transform:perspective(900px) rotateY(-38deg) rotateX(6deg) scale(.82);
  transform-origin:left center;
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.hero-mark.reveal.is-visible{opacity:1;transform:perspective(900px) rotateY(0deg) rotateX(0deg) scale(1)}
@media (prefers-reduced-motion: reduce){.hero-mark.reveal{opacity:1;transform:none}}
/* WebGL particle field. Sits behind the copy; the static SVG below is the fallback and
   only fades out once Three.js is actually painting (.has-webgl). */
.pagehead-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.pagehead.has-webgl .hero-particles{opacity:0;transition:opacity .6s ease}
.hero-particles{position:absolute;inset:0;pointer-events:none;opacity:.55}
.hero-particles circle{fill:var(--panel-accent);animation:drift 9s ease-in-out infinite}
.hero-particles circle:nth-child(2n){animation-duration:12s;animation-delay:-3s}
.hero-particles circle:nth-child(3n){animation-duration:7s;animation-delay:-1.5s;fill:#fff;opacity:.5}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.pagehead__inner{position:relative;padding-block:76px 84px;max-width:900px;transform-origin:top center}
@media (max-width:768px){.pagehead__inner{padding-block:52px 56px}}
/* Scroll-driven 3D recede: the hero copy sits flat on load, then tilts back and sinks
   in perspective as the page scrolls away from it — CSS-only, tied to document scroll.
   Browsers without scroll-driven animation support (older Safari/Firefox) just keep it
   static, so no fallback code is needed. Same progressive-enhancement pattern as the
   process timeline's connector line below. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .pagehead__inner{
      animation:heroTilt linear both;
      animation-timeline:scroll(root block);
      animation-range:0 100vh;
    }
    @keyframes heroTilt{
      from{transform:perspective(1400px) rotateX(0deg) scale(1);opacity:1}
      to{transform:perspective(1400px) rotateX(-16deg) scale(.92);opacity:.4}
    }
  }
}
.eyebrow--on-dark{color:var(--panel-accent)}
.eyebrow--on-dark::before{background:var(--panel-accent)}
.pagehead h1{color:#fff;font-size:clamp(2.2rem,4.6vw,3.7rem);line-height:1.04;margin-top:14px;max-width:20ch}
.pagehead p{margin-top:20px;color:#C7D2DE;font-size:1.08rem;max-width:60ch}
.pagehead__cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
/* Primary buttons sitting directly on a dark panel invert to the light accent.
   (The home CTA's button lives inside a white .cta-form card, so it keeps the dark fill.) */
.pagehead .btn-primary,
.cta-banner .cta-copy .btn-primary{background:var(--panel-accent);color:var(--accent);border-color:var(--panel-accent)}
.pagehead .btn-primary:hover,
.cta-banner .cta-copy .btn-primary:hover{background:#fff;border-color:#fff}
.cta-actions{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}

/* ---------- Stats bar ---------- */
.stats{background:var(--panel-gradient);color:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat{padding:32px 22px;border-left:1px solid rgba(255,255,255,.12)}
.stat:first-child{border-left:none}
.stat__num{font-family:var(--font-mono);font-weight:600;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1;font-variant-numeric:tabular-nums;color:var(--panel-accent)}
.stat__label{margin-top:8px;font-size:.82rem;color:#B9C7D6;line-height:1.35;max-width:20ch}
@media (max-width:860px){.stats-grid{grid-template-columns:repeat(2,1fr)}.stat:nth-child(3){border-left:none}}
@media (max-width:520px){.stats-grid{grid-template-columns:1fr}.stat{border-left:none;border-top:1px solid rgba(255,255,255,.12)}.stat:first-child{border-top:none}}

/* ---------- About ---------- */
/* .about-grid also carries .container (which centers at 1240px) — capping width here too
   would fight that and re-center this as its own narrower box, throwing it out of alignment
   with the stats grid and every other section above/below it. Cap the child instead. */
.about-copy{max-width:760px}
.about-copy p{color:var(--ink-600);margin-top:16px}
.about-copy p:first-of-type{margin-top:14px}
.about-facts{display:flex;gap:34px;margin-top:32px;flex-wrap:wrap}
.about-fact__num{font-family:var(--font-mono);font-weight:600;font-size:1.7rem;color:var(--accent-600)}
.about-fact__label{font-size:.78rem;color:var(--ink-600);margin-top:2px;max-width:12ch}
/* Staggered entrance: eyebrow, paragraph and the fact row settle in sequence behind the
   heading's own word-by-word cascade, instead of the whole block moving as one flat unit. */
.about-copy .eyebrow.reveal{transition-delay:0s}
.about-copy p.reveal{transition-delay:.15s}
.about-copy .about-facts.reveal{transition-delay:.3s}

/* ---------- Credenciales (glass panel) ---------- */
.credentials{position:relative;background:var(--panel-gradient);color:#fff;overflow:hidden}
.credentials__glow{position:absolute;top:-120px;right:-80px;width:420px;height:420px;border-radius:99px;background:radial-gradient(circle, rgba(56,189,248,.18), transparent 70%);filter:blur(10px);pointer-events:none}
.credentials .section-head p{color:#C7D2DE}
.credentials .section-head h2{color:#fff}
.credentials-title__accent{background:linear-gradient(135deg,#fff,var(--panel-accent));-webkit-background-clip:text;background-clip:text;color:transparent}

.glass-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
@media (max-width:860px){.glass-grid{grid-template-columns:1fr}}

.glass-card{
  position:relative;overflow:hidden;border-radius:var(--radius-l);
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:32px;box-shadow:0 20px 48px rgba(0,0,0,.35);
}
.glass-card__glow{position:absolute;top:-64px;right:-64px;width:220px;height:220px;border-radius:99px;background:rgba(255,255,255,.06);filter:blur(30px);pointer-events:none}

.glass-card__head{position:relative;display:flex;align-items:center;gap:16px;margin-bottom:28px}
.glass-card__icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--radius-m);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);flex:none}
.glass-card__icon svg{width:24px;height:24px;color:#fff}
.glass-card__stat{font-family:var(--font-mono);font-size:1.9rem;font-weight:600;line-height:1;color:#fff}
.glass-card__stat-label{margin-top:4px;font-size:.86rem;color:#AEC0CF}

.glass-card__progress{position:relative;margin-bottom:26px}
.glass-card__progress-row{display:flex;justify-content:space-between;font-size:.86rem;margin-bottom:9px}
.glass-card__progress-row span:first-child{color:#AEC0CF}
.glass-card__progress-row span:last-child{color:#fff;font-weight:600}
.glass-card__bar{height:7px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.glass-card__bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--panel-accent),#fff)}

.glass-card__divider{height:1px;background:rgba(255,255,255,.12);margin-bottom:22px}

.glass-card__mini-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center;margin-bottom:26px}
.glass-card__mini{display:flex;flex-direction:column;gap:3px}
.glass-card__mini-num{font-family:var(--font-mono);font-weight:600;font-size:1.15rem;color:#fff}
.glass-card__mini-label{font-size:.68rem;letter-spacing:.03em;text-transform:uppercase;color:#8FA2B3}

.glass-card__pills{position:relative;display:flex;flex-wrap:wrap;gap:9px}
.glass-pill{display:inline-flex;align-items:center;gap:7px;border-radius:99px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);padding:7px 13px;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#DCE7EF}
.glass-pill svg{width:13px;height:13px;color:var(--panel-accent)}
.glass-pill__ping{position:relative;display:inline-flex;width:8px;height:8px;flex:none}
.glass-pill__ping::before{content:"";position:absolute;inset:0;border-radius:99px;background:#22C55E;opacity:.7;animation:pingRing 1.8s cubic-bezier(0,0,.2,1) infinite}
.glass-pill__ping::after{content:"";position:absolute;inset:1.5px;border-radius:99px;background:#22C55E}
@keyframes pingRing{75%,100%{transform:scale(2.4);opacity:0}}
@media (prefers-reduced-motion: reduce){.glass-pill__ping::before{animation:none;opacity:0}}

.glass-card--marquee{display:flex;flex-direction:column;justify-content:center}
.glass-marquee__title{font-size:.92rem;font-weight:600;color:#C7D2DE;margin-bottom:22px}
.glass-marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(to right,transparent,#000 15%,#000 85%,transparent)}
.glass-marquee__track{display:flex;gap:44px;width:max-content;animation:marqueeScroll 32s linear infinite}
.glass-marquee:hover .glass-marquee__track{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){.glass-marquee__track{animation:none}}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.glass-marquee__item{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:#fff;opacity:.55;transition:opacity .2s ease;white-space:nowrap}
.glass-marquee__item:hover{opacity:1}

/* ---------- Identity: Misión / Visión / Valores / Objetivos ---------- */
.identity-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
/* Pinned positions, not auto-flow: when one card leaves the grid to expand (position:fixed),
   the other three must hold still instead of sliding to fill its slot. */
.identity-grid > .idcard:nth-child(1){grid-area:1 / 1}
.identity-grid > .idcard:nth-child(2){grid-area:1 / 2}
.identity-grid > .idcard:nth-child(3){grid-area:2 / 1}
.identity-grid > .idcard:nth-child(4){grid-area:2 / 2}
@media (max-width:820px){
  .identity-grid{grid-template-columns:1fr}
  .identity-grid > .idcard:nth-child(1){grid-area:1 / 1}
  .identity-grid > .idcard:nth-child(2){grid-area:2 / 1}
  .identity-grid > .idcard:nth-child(3){grid-area:3 / 1}
  .identity-grid > .idcard:nth-child(4){grid-area:4 / 1}
}
.idcard{background:var(--paper-1);border:1px solid var(--line-200);border-radius:var(--radius-l);padding:34px;transition:transform .25s ease, box-shadow .25s ease;cursor:pointer;position:relative}
@media (hover: hover) and (pointer: fine){.idcard:not(.is-expanded):hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}}
.idcard:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px}
.idcard__icon{width:28px;height:28px;color:var(--accent);margin-bottom:18px}
.idcard__icon svg{width:28px;height:28px}
.idcard h3{font-size:1.2rem}
.idcard p{color:var(--ink-600);font-size:.94rem;margin-top:12px}
.idcard p + p{margin-top:12px}

/* Click a card to bring it to the middle of the screen, larger and easier to read. */
.idcard__close{
  display:none;position:absolute;top:16px;right:16px;width:32px;height:32px;
  align-items:center;justify-content:center;background:var(--paper-2);
  border:1px solid var(--line-200);border-radius:99px;color:var(--ink-700);
  cursor:pointer;z-index:1;transition:border-color .15s ease,color .15s ease;
}
.idcard__close:hover{border-color:var(--accent);color:var(--accent)}
.idcard__close svg{width:14px;height:14px}
.idcard-overlay{
  position:fixed;inset:0;background:rgba(17,28,44,.5);z-index:150;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.idcard-overlay.is-open{opacity:1;pointer-events:auto}
/* .idcard also carries .reveal for the scroll-in fade, and this page replays that on every
   re-entry (continuous-motion) — .is-open (not .is-visible) keeps the expand/collapse state
   from colliding with the reveal system's own class, and the compound selector below
   outranks .reveal.is-visible so an in-flight reveal can't override the resting position.
   The flight (sliding in from the card's own grid slot and back) is one native CSS
   @keyframes animation instead of a JS-driven transition — script.js only supplies the
   --fly-dx/dy custom properties (which direction the card's own slot sits relative to
   centre). Position + opacity only, deliberately no scale(): the slot and the centred
   modal have very different aspect ratios, and scaling non-uniformly to bridge them
   stretched the text and icons out of shape mid-flight — the actual source of "messy".
   Separate in/out keyframes (not the same one played in reverse) so the return trip gets
   its own easing tuned to decelerate into place, instead of inheriting the entrance
   curve's shape backwards. */
@keyframes idcardFlyIn{
  from{transform:translate(-50%,-50%) translate(var(--fly-dx,0px),var(--fly-dy,0px));opacity:0}
  to{transform:translate(-50%,-50%);opacity:1}
}
@keyframes idcardFlyOut{
  from{transform:translate(-50%,-50%);opacity:1}
  to{transform:translate(-50%,-50%) translate(var(--fly-dx,0px),var(--fly-dy,0px));opacity:0}
}
.idcard.is-expanded{
  /* .idcard is also .reveal, whose own transition:transform .8s var(--ease-out) would
     otherwise race the keyframe animation below for control of the same property. */
  position:fixed;top:50%;left:50%;z-index:151;transform:translate(-50%,-50%);transition:none;
  width:min(720px, calc(100vw - 48px));max-height:min(760px, calc(100vh - 48px));overflow-y:auto;
  box-shadow:var(--shadow-2);cursor:default;
}
.idcard.is-expanded.is-flying-in{animation:idcardFlyIn .8s var(--ease-out) both}
.idcard.is-expanded.is-flying-out{animation:idcardFlyOut .55s cubic-bezier(.45,0,.2,1) both}
.idcard.is-expanded .idcard__close{display:flex}
html.idcard-lock{overflow:hidden}

/* Content settles in a beat after the card itself lands — icon, then title, then body —
   instead of popping in all at once with the box. Purely a delayed opacity/translateY
   fade (never scale), so it can't reintroduce the text-distortion issue above. Scoped to
   .is-flying-in only: the JS never adds that class under prefers-reduced-motion, so this
   whole stagger is already inert there without needing its own media query. */
@keyframes idcardContentIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.idcard.is-flying-in > *{animation:idcardContentIn .45s var(--ease-out) both}
.idcard.is-flying-in > .idcard__icon{animation-delay:.3s}
.idcard.is-flying-in > h3{animation-delay:.37s}
.idcard.is-flying-in > p,
.idcard.is-flying-in > ul,
.idcard.is-flying-in > .curar-caption{animation-delay:.44s}
.idcard.is-flying-in > p ~ p{animation-delay:.5s}
.idcard.is-flying-in > .curar-caption{animation-delay:.5s}
.idcard.is-flying-in > .idcard__close{animation:idcardContentIn .3s var(--ease-out) both;animation-delay:.48s}

@media (prefers-reduced-motion: reduce){
  .idcard.is-expanded.is-flying-in, .idcard.is-expanded.is-flying-out{animation:none}
  .idcard.is-flying-in > *{animation:none}
}
.curar-list{margin-top:16px;display:flex;flex-direction:column;gap:11px}
.curar-list li{display:flex;gap:2px;font-size:.94rem;color:var(--ink-700);line-height:1.5}
.curar-letter{font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--accent);line-height:1;margin-right:1px}
.curar-caption{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-200);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-600)}
.curar-caption b{color:var(--accent-600)}
.obj-list{margin-top:16px;display:flex;flex-direction:column;gap:13px}
.obj-list li{display:flex;align-items:flex-start;gap:10px;font-size:.94rem;color:var(--ink-700)}
.obj-list svg{width:18px;height:18px;color:var(--accent);flex:none;margin-top:2px}

/* ---------- Featured products: flagship (photography) tier ---------- */
.prod-flagship{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:22px}
@media (max-width:960px){.prod-flagship{grid-template-columns:1fr}}
.prod-flagship__card{background:var(--paper-1);border:1px solid var(--line-200);border-radius:var(--radius-m);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease, box-shadow .25s ease}
/* Hover motion is gated: a tap on touch fires a phantom hover that would stick. */
@media (hover: hover) and (pointer: fine){
  .prod-flagship__card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
  /* The frame clips, so the device grows slightly inside its own box. */
  .prod-flagship__card:hover .prod-flagship__media img{transform:scale(1.04)}
}
.prod-flagship__media img{transition:transform .4s var(--ease-out)}
/* The picture is taken out of flow so aspect-ratio governs the box height —
   otherwise a tall image's intrinsic ratio stretches the card out of line. */
.prod-flagship__media{aspect-ratio:1/1;background:#fff;border-bottom:1px solid var(--line-200);position:relative;overflow:hidden}
.prod-flagship__media > picture{position:absolute;inset:0;display:block}
/* Product renders sit on white with generous margins — contain (not cover) keeps the device intact. */
.prod-flagship__media img{width:100%;height:100%;object-fit:contain;display:block;padding:4px}
/* Stacked, not side-by-side: both renders are landscape, and splitting the box into two
   narrow tall columns left them tiny with huge empty margins top and bottom. Two wide
   short rows fit landscape photos far better. */
.prod-flagship__media--dual{display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr;row-gap:1px;background:var(--line-200)}
/* min-height:0 stops a grid row from growing to its image's own intrinsic aspect ratio
   instead of splitting the two rows evenly — the classic grid-track content-overflow trap. */
.prod-flagship__media--dual > picture{position:relative;inset:auto;background:#fff;width:100%;height:100%;min-height:0}
/* ---------- Product image lightbox: click a product photo to see it at its real,
   uncropped size (max-width/height only ever shrink to fit the viewport, never
   enlarge past the image's own natural pixels) instead of the contain-fit thumbnail. */
.prod-flagship__media img{cursor:zoom-in}
.img-lightbox{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(17,28,44,.75);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .25s ease;padding:40px;
}
.img-lightbox.is-open{opacity:1;pointer-events:auto}
.img-lightbox__img{
  max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  border-radius:var(--radius-s);box-shadow:var(--shadow-2);background:#fff;
  transform:scale(.96);transition:transform .3s var(--ease-out);cursor:zoom-in;
}
.img-lightbox.is-open .img-lightbox__img{transform:scale(1)}
/* Click a spot on the enlarged image to zoom further into that exact point (JS sets
   transform-origin to the click position); click again to zoom back out. Higher
   specificity than the .is-open rule above so it wins regardless of source order. */
.img-lightbox.is-open .img-lightbox__img.is-zoomed{transform:scale(2.2);cursor:zoom-out}
.img-lightbox__close{
  position:absolute;top:20px;right:20px;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.3);border-radius:99px;color:#fff;cursor:pointer;
  transition:background .15s ease;
}
.img-lightbox__close:hover{background:rgba(255,255,255,.24)}
.img-lightbox__close svg{width:18px;height:18px}
html.lightbox-lock{overflow:hidden}

.prod-flagship__body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.prod-flagship__body .prod-card__brand{font-size:.68rem}
.prod-flagship__body h3{font-size:1.1rem;margin-top:2px}
.prod-flagship__body p{color:var(--ink-600);font-size:.9rem;flex:1}
.prod-flagship__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding-top:14px;border-top:1px solid var(--line-200);flex-wrap:wrap}
.spec-badge{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:.64rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-600);background:var(--accent-100);border-radius:99px;padding:5px 10px}

/* ---------- Featured products: compact tier ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:960px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.prod-grid{grid-template-columns:1fr}}
.prod-card{background:var(--paper-1);border:1px solid var(--line-200);border-radius:var(--radius-m);padding:22px;display:flex;flex-direction:column;gap:8px;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.prod-card:hover{border-color:var(--line-300);box-shadow:var(--shadow-2);transform:translateY(-3px)}
.prod-card__brand{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-600)}
/* Manufacturer mark in place of the text label — sized to sit in the same eyebrow slot. */
.prod-card__brand-logo{display:flex;align-items:center;height:17px}
.prod-card__brand-logo picture{display:flex;align-items:center;height:100%}
.prod-card__brand-logo img{max-height:100%;width:auto;display:block}
/* Co-branded products (Inari by Stryker): both marks, then the name spelled out —
   the logo alone doesn't say "by Stryker", so the eyebrow text stays. */
.prod-card__brand-logo--pair picture + picture{margin-left:9px;padding-left:9px;border-left:1px solid var(--line-200)}
.prod-card__brand-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.prod-card__brand-row .prod-card__brand{margin:0}
.prod-card h3{font-size:.98rem;margin-top:2px}
.prod-card p{color:var(--ink-600);font-size:.84rem;flex:1}
.prod-card .link-arrow{margin-top:4px;font-size:.82rem}

/* ---------- Representaciones ---------- */
.rep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:860px){.rep-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.rep-grid{grid-template-columns:1fr}}
.rep-card{background:var(--paper-1);border:1px solid var(--line-200);border-radius:var(--radius-m);padding:26px;display:flex;flex-direction:column;gap:10px;transition:transform .25s ease, box-shadow .25s ease}
/* Institutional trust bar (DESIGN.md): logos sit in grayscale, full colour is the hover
   reward. Gated behind fine-pointer hover so touch — with no hover to trigger it — always
   shows colour instead of getting stuck grey. */
@media (hover: hover) and (pointer: fine){
  .rep-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
  .rep-card__logo img{filter:grayscale(1);transition:filter .35s ease}
  .rep-card:hover .rep-card__logo img{filter:grayscale(0)}
}
/* Manufacturer logo sits above the name, in a fixed-height box so mixed
   logo proportions still line up across the grid. */
.rep-card__logo{height:46px;display:flex;align-items:center;margin-bottom:4px}
.rep-card__logo picture{display:block;height:100%}
.rep-card__logo img{max-height:100%;width:auto;max-width:170px;object-fit:contain;display:block}
/* Two marks side by side (a brand and its parent company), split by a hairline. */
.rep-card__logo--pair{gap:14px}
.rep-card__logo--pair picture{display:flex;align-items:center;height:100%}
.rep-card__logo--pair picture + picture{padding-left:14px;border-left:1px solid var(--line-200)}
.rep-card__logo--pair img{max-width:112px}
.rep-card__name{font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--ink-950)}
.rep-card p{color:var(--ink-600);font-size:.88rem;flex:1}


/* ---------- Differentiators ---------- */
.diff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
@media (max-width:860px){.diff-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.diff-grid{grid-template-columns:1fr}}
.diff{display:flex;flex-direction:column;gap:12px;padding-top:20px;border-top:1px solid var(--line-200)}
.diff__icon{width:24px;height:24px;color:var(--accent)}
.diff__icon svg{width:24px;height:24px}
.diff h3{font-size:1rem}
.diff p{color:var(--ink-600);font-size:.88rem}

/* ---------- Process timeline ---------- */
.timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
/* Line runs node-centre to node-centre: nodes are 40px wide at each column's left edge,
   so it starts at 20px and stops 20px into the last of 4 columns (26px gaps). */
.timeline__track{position:absolute;top:20px;left:20px;right:calc(25% - 39.5px);height:2px;background:var(--line-200);z-index:0}
/* Same footprint as .timeline__track above, but split into 3 equal segments (percentages
   resolve against this wrapper, so each third lines up on a node regardless of the mixed
   px/% math used for the overall span) — each segment fills in turn, node to node. */
.timeline__connector-wrap{position:absolute;top:20px;left:20px;right:calc(25% - 39.5px);height:2px;z-index:0}
.timeline__connector.reveal{
  position:absolute;top:0;height:100%;width:calc(33.334% + .5px);background:var(--accent);
  opacity:1;transform:scaleX(0);transform-origin:left;transition:transform .75s var(--ease-out);
}
.timeline__connector[data-seg="1"]{left:0}
.timeline__connector[data-seg="2"]{left:33.333%;transition-delay:.3s}
.timeline__connector[data-seg="3"]{left:66.666%;transition-delay:.6s}
.timeline__connector.reveal.is-visible{transform:scaleX(1)}
.timeline__step{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px}
.timeline__node{
  width:40px;height:40px;border-radius:99px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:700;font-size:.92rem;flex:none;
}
.timeline__step h3{font-size:1.02rem;margin-top:4px}
.timeline__step p{color:var(--ink-600);font-size:.88rem}
.timeline__step:nth-child(4){transition-delay:.15s}
.timeline__step:nth-child(5){transition-delay:.3s}
.timeline__step:nth-child(6){transition-delay:.45s}
@media (max-width:820px){
  .timeline{grid-template-columns:1fr;gap:36px;padding-left:20px}
  .timeline__track,.timeline__connector-wrap{top:0;bottom:0;left:19px;right:auto;width:2px;height:auto}
  .timeline__connector.reveal{top:auto;left:0;width:100%;height:calc(33.334% + .5px);transform:scaleY(0);transform-origin:top}
  .timeline__connector[data-seg="1"]{top:0}
  .timeline__connector[data-seg="2"]{top:33.333%}
  .timeline__connector[data-seg="3"]{top:66.666%}
  .timeline__connector.reveal.is-visible{transform:scaleY(1)}
  .timeline__step{padding-left:44px}
  .timeline__node{position:absolute;left:-20px;top:0}
}
/* Scroll-driven: each segment's progress is tied to its own slice of how far the timeline
   has travelled through the viewport, so they draw one after another as you scroll instead
   of firing once. Runs off the main thread. Browsers without support keep the transitions above. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .timeline__connector.reveal{
      transition:none;
      animation:timelineDraw linear both;
      animation-timeline:view();
    }
    .timeline__connector[data-seg="1"].reveal{animation-range:entry 0% entry 40%}
    .timeline__connector[data-seg="2"].reveal{animation-range:entry 30% entry 70%}
    .timeline__connector[data-seg="3"].reveal{animation-range:entry 60% entry 100%}
    @keyframes timelineDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    @media (max-width:820px){
      @keyframes timelineDraw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
    }
  }
}
@media (prefers-reduced-motion: reduce){
  .timeline__connector.reveal{transform:scaleX(1) !important}
}
@media (prefers-reduced-motion: reduce) and (max-width:820px){
  .timeline__connector.reveal{transform:scaleY(1) !important}
}

/* ---------- Testimonials ---------- */
.rating-strip{display:flex;align-items:center;gap:14px;margin-bottom:36px;padding:16px 20px;background:var(--paper-1);border:1px solid var(--line-200);border-radius:var(--radius-m);width:fit-content}
.rating-strip__stars{display:flex;gap:3px;color:var(--accent)}
.rating-strip__stars svg{width:18px;height:18px}
.rating-strip__num{font-family:var(--font-mono);font-weight:600;font-size:1.15rem}
.rating-strip__sub{font-size:.8rem;color:var(--ink-600)}
.tcard{background:var(--paper-1);border:1px solid var(--line-200);border-radius:var(--radius-l);padding:26px;display:flex;flex-direction:column;gap:16px;transition:transform .25s ease, box-shadow .25s ease}
@media (hover: hover) and (pointer: fine){.tcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}}

/* Continuous testimonial carousel: two identical card sets back-to-back, track scrolls
   exactly -50% so the loop point is invisible. Pauses on hover so a testimonial can be read. */
.testi-marquee{
  position:relative;overflow:hidden;margin-inline:-4px;padding-inline:4px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
}
.testi-marquee__track{display:flex;gap:22px;width:max-content;animation:testiScroll 42s linear infinite}
.testi-marquee:hover .testi-marquee__track{animation-play-state:paused}
@keyframes testiScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tcard--marquee{width:340px;flex:none}
@media (max-width:480px){.tcard--marquee{width:82vw}}
@media (prefers-reduced-motion: reduce){
  .testi-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .testi-marquee__track{animation:none}
  /* Only the first (non-decorative) set of 3 stays — the duplicate exists purely to loop. */
  .testi-marquee__track .tcard--marquee:nth-child(n+4){display:none}
}
.tcard__stars{display:flex;gap:2px;color:var(--accent)}
.tcard__stars svg{width:14px;height:14px}
.tcard blockquote{margin:0;font-size:.96rem;color:var(--ink-700);line-height:1.6}
.tcard__who{display:flex;align-items:center;gap:12px;margin-top:auto}
.tcard__avatar{width:38px;height:38px;border-radius:99px;background:var(--panel-dark);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:.85rem;flex:none}
.tcard__name{font-weight:700;font-size:.88rem}
.tcard__role{font-size:.78rem;color:var(--ink-600)}

/* ---------- Certifications ---------- */
.cert-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:820px}
@media (max-width:640px){.cert-grid{grid-template-columns:1fr}}
.ccard{background:var(--paper-1);border:1px solid var(--line-200);border-radius:var(--radius-m);padding:28px;transition:transform .25s ease, box-shadow .25s ease}
@media (hover: hover) and (pointer: fine){.ccard:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}}
.ccard__badge{width:26px;height:26px;color:var(--accent);margin-bottom:18px}
.ccard__badge svg{width:26px;height:26px}
.ccard h3{font-size:1.05rem}
.ccard p{color:var(--ink-600);font-size:.88rem;margin-top:8px}
/* Regulator mark: identifies the authority, not an endorsement of the company —
   hence the caption directly under it. */
.ccard__authority{display:flex;align-items:center;gap:14px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line-200)}
.ccard__authority img{height:34px;width:auto;flex:none}
.ccard__authority span{font-size:.72rem;line-height:1.4;color:var(--ink-600)}
@media (max-width:420px){.ccard__authority{flex-direction:column;align-items:flex-start;gap:10px}}

/* ---------- CTA banner ---------- */
.cta-banner{position:relative;background:var(--panel-gradient);color:#fff;overflow:hidden}
.cta-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
@media (max-width:860px){.cta-grid{grid-template-columns:1fr;gap:32px}}
.cta-copy h2{color:#fff;font-size:clamp(1.6rem,3vw,2.2rem)}
.cta-copy p{color:#C7D2DE;margin-top:14px;max-width:460px}
.cta-copy ul{margin-top:22px;display:flex;flex-direction:column;gap:10px}
/* Full-width band (no form card alongside): centre the copy and lay the checklist out in a row. */
.cta-banner--wide .cta-copy{max-width:760px;margin-inline:auto;text-align:center}
.cta-banner--wide .cta-copy p{margin-inline:auto}
.cta-banner--wide .eyebrow{justify-content:center}
.cta-banner--wide .cta-actions{justify-content:center}
.cta-copy__list--inline{flex-direction:row !important;flex-wrap:wrap;justify-content:center;gap:10px 26px}
@media (max-width:640px){.cta-copy__list--inline{flex-direction:column !important;align-items:flex-start;text-align:left}}

/* Accent band: sits between the dark page header and the light form, so it needs its
   own value step — two dark panels stacked would read as one block. */
.cta-banner--accent{background:var(--panel-accent)}
.cta-banner--accent .cta-copy h2{color:var(--accent)}
.cta-banner--accent .cta-copy p{color:var(--accent-600)}
.cta-banner--accent .cta-copy li{color:var(--accent-600)}
.cta-banner--accent .cta-copy li svg{color:var(--accent)}
.cta-banner--accent .eyebrow--on-dark{color:var(--accent)}
.cta-banner--accent .eyebrow--on-dark::before{background:var(--accent)}
/* Dark fill returns here: the band itself is light. */
.cta-banner--accent .cta-copy .btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.cta-banner--accent .cta-copy .btn-primary:hover{background:var(--accent-600);border-color:var(--accent-600)}
.cta-copy li{display:flex;align-items:center;gap:10px;font-size:.9rem;color:#DCE7EF}
.cta-copy li svg{width:16px;height:16px;color:var(--panel-accent);flex:none}
.cta-form{background:var(--paper-1);border-radius:var(--radius-l);padding:28px;box-shadow:var(--shadow-2)}
.cta-form h3{color:var(--ink-950);font-size:1.1rem;margin-bottom:4px}
.cta-form__sub{font-size:.82rem;color:var(--ink-600);margin-bottom:18px}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:.76rem;font-weight:700;color:var(--ink-700);text-transform:uppercase;letter-spacing:.03em}
.field label .req{color:var(--accent-600);margin-left:2px}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:.94rem;padding:11px 13px;
  border:1.5px solid var(--line-300);border-radius:var(--radius-s);
  background:var(--paper-2);color:var(--ink-700);transition:border-color .15s ease, background .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);background:var(--paper-1);outline:none}
.field textarea{resize:vertical;min-height:96px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:480px){.field-row{grid-template-columns:1fr}}
.form-note{font-size:.74rem;color:var(--ink-600);margin-top:10px;line-height:1.5}
.form-success{
  display:none;align-items:flex-start;gap:12px;padding:16px;background:var(--accent-100);
  border:1px solid var(--accent);border-radius:var(--radius-m);color:var(--ink-700);font-size:.88rem;
}
.form-success.is-visible{display:flex}
.form-success svg{width:20px;height:20px;color:var(--accent-600);flex:none;margin-top:1px}
.form-error{
  display:none;padding:14px 16px;background:#FDECEB;
  border:1px solid #E4A9A2;border-radius:var(--radius-m);color:#8C2F26;font-size:.86rem;margin-top:14px;
}
.form-error.is-visible{display:block}
form.is-submitted .field,form.is-submitted .btn-block{display:none}

/* ---------- Coverage / logistics network map (schematic, not to scale) ----------
   A flat hub-and-spoke diagram instead of a stock satellite photo: Bogotá as the
   central node, direct-coverage cities on the inner ring, allied-distributor zones
   on the outer ring — same two-tier split already used by the .zone-chip list below. */
.coverage-network{
  margin:0 0 32px;padding:28px 20px 20px;border:1px solid var(--line-200);border-radius:var(--radius-l);
  background:var(--paper-1);box-shadow:var(--shadow-1);
}
.cn-svg{width:100%;height:auto;max-width:560px;display:block;margin-inline:auto}
.cn-ring{fill:none;stroke:var(--line-200);stroke-width:1}
/* Each link draws itself from the Bogotá hub out to its destination once the diagram
   scrolls into view — dasharray/dashoffset set to the link's own exact length (150 for
   the inner ring, 250 for the outer) so the growth reads at a steady pace across the
   whole transition, not a near-instant snap followed by dead time. */
.cn-link{fill:none;stroke:var(--line-300);stroke-width:1.5;stroke-linecap:round;transition:stroke-dashoffset .9s var(--ease-out)}
.cn-link--inner{stroke-dasharray:150;stroke-dashoffset:150}
.cn-link--outer{stroke-dasharray:250;stroke-dashoffset:250}
.coverage-network.is-visible .cn-link{stroke-dashoffset:0}
.cn-link:nth-child(2){transition-delay:.09s}
.cn-link:nth-child(3){transition-delay:.18s}
.cn-link:nth-child(4){transition-delay:.27s}
.cn-link:nth-child(5){transition-delay:.36s}
.cn-link:nth-child(6){transition-delay:.45s}
.cn-link:nth-child(7){transition-delay:.54s}
.cn-link:nth-child(8){transition-delay:.63s}
.cn-link:nth-child(9){transition-delay:.72s}
@media (prefers-reduced-motion: reduce){.cn-link{stroke-dashoffset:0 !important;transition:none}}
.cn-hub circle{fill:var(--accent-100);stroke:var(--accent);stroke-width:2}
.cn-hub__core{fill:var(--accent);stroke:none !important}
.cn-hub__eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;fill:var(--accent-600)}
.cn-hub__label{font-family:var(--font-display);font-size:23px;font-weight:800;fill:var(--ink-950)}
.cn-node text{font-family:var(--font-body);font-size:13px;font-weight:600;fill:var(--ink-800)}
.cn-node--direct circle{fill:var(--accent);stroke:var(--paper-1);stroke-width:2}
.cn-node--allied circle{fill:var(--paper-1);stroke:var(--accent);stroke-width:2}
.cn-node--allied text{font-weight:500;fill:var(--ink-700)}
.cn-legend{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:14px;padding-top:16px;border-top:1px solid var(--line-200)}
.cn-legend span{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:var(--ink-700)}
.cn-legend__dot{width:10px;height:10px;border-radius:99px;display:inline-block}
.cn-legend__dot--direct{background:var(--accent)}
.cn-legend__dot--allied{background:var(--paper-1);border:2px solid var(--accent)}

/* ---------- Coverage / map ---------- */
.coverage-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:stretch}
@media (max-width:860px){.coverage-grid{grid-template-columns:1fr}}
.coverage-map{border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--line-200);box-shadow:var(--shadow-1);min-height:360px}
.coverage-map iframe{width:100%;height:100%;min-height:360px;border:0;display:block;filter:grayscale(.15) contrast(1.02)}
.coverage-list h3{font-size:1rem;margin-bottom:14px}
.coverage-list h3:not(:first-child){margin-top:26px}
.zone-chips{display:flex;flex-wrap:wrap;gap:9px}
.zone-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:99px;background:var(--paper-1);border:1px solid var(--line-200);font-size:.83rem;font-weight:600;color:var(--ink-700);transition:border-color .2s ease, color .2s ease}
.zone-chip:hover{border-color:var(--accent);color:var(--accent)}
.zone-chip svg{width:13px;height:13px;color:var(--accent-600)}
.zone-chip--alt{background:var(--paper-2)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px}
@media (max-width:920px){.contact-grid{grid-template-columns:1fr;gap:36px}}
.contact-panel{background:var(--paper-1);border:1px solid var(--line-200);border-radius:var(--radius-l);padding:32px}
.contact-side{display:flex;flex-direction:column;gap:22px}
.contact-item{display:flex;gap:14px}
.contact-item__icon{width:20px;height:20px;color:var(--accent);flex:none;margin-top:3px}
.contact-item__icon svg{width:20px;height:20px}
.contact-item h3{font-size:.92rem;margin-bottom:3px}
.contact-item p{font-size:.86rem;color:var(--ink-600)}
.contact-social{display:flex;gap:10px;margin-top:6px}
.social-btn{position:relative;width:38px;height:38px;border-radius:99px;border:1px solid var(--line-300);display:flex;align-items:center;justify-content:center;color:var(--ink-700)}
.social-btn::after{content:"";position:absolute;inset:-3px}
.social-btn:hover{background:var(--panel-dark);color:#fff;border-color:var(--panel-dark)}
.social-btn svg{width:17px;height:17px}

/* ---------- Divider ---------- */
.pulse-divider{width:100%;height:28px;color:var(--line-300);opacity:.9}
.pulse-divider svg{width:100%;height:100%}

/* ---------- Footer ---------- */
.site-footer{background:var(--panel-gradient);color:#B9C8D6;padding-top:64px}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;row-gap:32px}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer-brand__name{font-family:var(--font-display);color:#fff;font-weight:700;font-size:1.1rem;margin-top:12px}
.footer-brand p{margin-top:12px;font-size:.86rem;color:#8FA2B3;max-width:32ch}
.footer-col h4{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
.footer-col ul{display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:.86rem;color:#B9C8D6}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:22px;font-size:.78rem;color:#7E93A5;flex-wrap:wrap}
.footer-legal{max-width:70ch}
.footer-bottom-links{display:flex;gap:18px;flex-wrap:wrap}
.footer-bottom-links a:hover{color:#fff}

/* ---------- Reveal-on-scroll (respects reduced motion) ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none}}

/* ---------- Word-by-word heading reveal (words rise out of a clipping mask) ---------- */
.split-word{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.split-word__inner{
  display:inline-block;transform:translateY(105%);opacity:0;filter:blur(7px);
  transition:transform .65s var(--ease-out), opacity .65s var(--ease-out), filter .65s var(--ease-out);
}
.is-split-in .split-word__inner{transform:none;opacity:1;filter:blur(0)}
@media (prefers-reduced-motion: reduce){
  .split-word{overflow:visible;padding-bottom:0;margin-bottom:0}
  .split-word__inner{transform:none;opacity:1;filter:none;transition:none}
}

/* ---------- Product cards: Motion-driven stagger reveal (JS sets final state; CSS is the no-JS/reduced-motion fallback) ---------- */
.prod-anim-init{opacity:0;transform:translateY(16px)}
@media (prefers-reduced-motion: reduce){.prod-anim-init{opacity:1;transform:none}}

/* ---------- Line-draw icons (stroke-based icons trace in on scroll) ---------- */
.draw-icon svg{stroke-dasharray:140;stroke-dashoffset:140;transition:stroke-dashoffset 1.1s var(--ease-out)}
.draw-icon.is-drawn svg{stroke-dashoffset:0}
@media (prefers-reduced-motion: reduce){.draw-icon svg{stroke-dashoffset:0;transition:none}}

/* ---------- Legal / policy pages ---------- */
.legal-wrap{max-width:760px;margin-inline:auto;padding:64px 24px 110px}
.legal-back{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;color:var(--ink-600);margin-bottom:36px}
.legal-back svg{width:15px;height:15px}
.legal-back:hover{color:var(--accent-600)}
.legal-back--on-dark{display:flex;width:fit-content;color:#C7D2DE;margin-bottom:22px}
.legal-back--on-dark:hover{color:#fff}
.legal-header h1{font-size:clamp(1.8rem,3vw,2.35rem);line-height:1.15}
.legal-updated{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-600);margin-top:12px;letter-spacing:.06em;text-transform:uppercase}
.legal-intro{margin-top:20px;color:var(--ink-600);font-size:1rem;max-width:64ch}
.legal-body{margin-top:52px;display:flex;flex-direction:column;gap:40px}
.legal-section h2{font-size:1.12rem}
.legal-section + .legal-section{padding-top:40px;border-top:1px solid var(--line-200)}
.legal-section p{color:var(--ink-600);font-size:.96rem;line-height:1.75;margin-top:12px;max-width:64ch}
.legal-section ul{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.legal-section li{padding-left:18px;position:relative;color:var(--ink-600);font-size:.95rem;line-height:1.6}
.legal-section li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:99px;background:var(--accent)}

/* ---------- Search overlay ---------- */
.search-trigger{background:transparent;border:1px solid var(--line-300);border-radius:var(--radius-s);width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-700)}
.search-trigger:hover{border-color:var(--accent);color:var(--accent-600)}
.search-trigger svg{width:18px;height:18px}

/* ---------- Language switch ----------
   UI-only for now: the site is Spanish throughout, so picking English/German shows a
   short "coming soon" note instead of silently doing nothing or claiming to translate
   content that doesn't exist yet. */
.lang-switch{position:relative}
.lang-switch__trigger{
  background:transparent;border:1px solid var(--line-300);border-radius:99px;height:44px;
  padding:0 14px 0 10px;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-body);font-size:.82rem;font-weight:700;color:var(--ink-700);
  transition:border-color .15s ease,color .15s ease;
}
.lang-switch__trigger:hover,.lang-switch__trigger[aria-expanded="true"]{border-color:var(--accent);color:var(--accent-600)}
.lang-switch__flag{width:19px;height:19px;border-radius:99px;overflow:hidden;flex:none}
.lang-switch__menu{
  position:absolute;top:calc(100% + 10px);right:0;width:200px;background:var(--paper-1);
  border:1px solid var(--line-200);border-radius:var(--radius-m);box-shadow:var(--shadow-2);
  padding:7px;opacity:0;transform:translateY(-6px);pointer-events:none;z-index:120;
  transition:opacity .16s ease,transform .16s ease;
}
.lang-switch.is-open .lang-switch__menu{opacity:1;transform:translateY(0);pointer-events:auto}
.lang-switch__menu button{
  width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-s);
  font-family:var(--font-body);font-size:.86rem;font-weight:600;color:var(--ink-700);text-align:left;
}
.lang-switch__menu button svg{width:19px;height:19px;border-radius:99px;overflow:hidden;flex:none}
.lang-switch__menu button:hover{background:var(--paper-2)}
.lang-switch__menu button.is-active{color:var(--accent);background:var(--accent-100)}
.lang-switch__note{
  max-height:0;overflow:hidden;opacity:0;font-size:.76rem;color:var(--ink-600);line-height:1.4;
  transition:max-height .2s ease,opacity .2s ease,margin-top .2s ease;
}
.lang-switch__note.is-visible{max-height:60px;opacity:1;margin-top:6px;padding:8px 10px;border-top:1px solid var(--line-200)}
@media (max-width:480px){.lang-switch__trigger span{display:none}.lang-switch__trigger{padding:0 11px;gap:0}}
.search-overlay{position:fixed;inset:0;background:rgba(17,28,44,.5);backdrop-filter:blur(2px);z-index:100;display:none;align-items:flex-start;justify-content:center;padding:12vh 20px 20px}
.search-overlay.is-open{display:flex}
.search-panel{background:var(--paper-1);border-radius:var(--radius-l);box-shadow:var(--shadow-2);width:100%;max-width:560px;overflow:hidden;border:1px solid var(--line-200)}
.search-panel__row{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line-200)}
.search-panel__row svg{width:19px;height:19px;color:var(--ink-600);flex:none}
.search-panel__row input{flex:1;border:none;outline:none;background:transparent;font-family:var(--font-body);font-size:1.02rem;color:var(--ink-950)}
.search-panel__row input::placeholder{color:var(--ink-400)}
.search-panel__esc{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-600);border:1px solid var(--line-300);border-radius:4px;padding:2px 6px;flex:none}
.search-results{max-height:52vh;overflow-y:auto;padding:8px}
.search-result{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 14px;border-radius:var(--radius-s);cursor:pointer}
.search-result:hover,.search-result.is-active{background:var(--paper-2)}
.search-result__name{font-weight:600;font-size:.92rem;color:var(--ink-950)}
.search-result__tag{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-600);flex:none}
.search-empty{padding:32px 20px;text-align:center;color:var(--ink-600);font-size:.88rem}
.search-highlight{outline:2.5px solid var(--accent);outline-offset:4px;border-radius:var(--radius-m);transition:outline-color .3s ease}

/* ---------- Home fab (bottom-left, refresh/return home) ---------- */
.home-fab{
  position:fixed;left:22px;bottom:22px;z-index:90;
  width:46px;height:46px;border-radius:99px;background:var(--paper-1);border:1px solid var(--line-200);
  box-shadow:var(--shadow-2);display:flex;align-items:center;justify-content:center;
}
.home-fab:hover{border-color:var(--accent)}
.home-fab svg{width:24px;height:30px}
@media (max-width:480px){.home-fab{left:16px;bottom:16px}}

/* ---------- Kobe: asistente virtual ---------- */
.kobe-fab{
  position:fixed;right:22px;bottom:22px;z-index:90;
  display:inline-flex;align-items:center;gap:10px;padding:12px 18px 12px 12px;
  background:var(--panel-dark);color:#fff;border:none;border-radius:99px;box-shadow:var(--shadow-2);
}
.kobe-fab:hover{background:var(--accent-600)}
.kobe-fab__avatar{width:28px;height:28px;border-radius:99px;background:var(--panel-accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:.82rem;flex:none}
.kobe-fab__avatar svg{width:19px;height:19px}
.kobe-fab__label{font-size:.86rem;font-weight:700}
.kobe-fab.is-open{display:none}

.kobe-panel{
  position:fixed;right:22px;bottom:22px;z-index:95;width:360px;max-width:calc(100vw - 32px);
  height:min(520px, calc(100vh - 100px));background:var(--paper-1);border:1px solid var(--line-200);
  border-radius:var(--radius-l);box-shadow:var(--shadow-2);display:flex;flex-direction:column;overflow:hidden;
  /* Origin-aware: grows from the corner where its trigger sits, not from its own centre.
     `visibility` is delayed on the way out (but not the way in) so the panel's form fields
     can't be tabbed to while invisible — scale(0) is avoided per the 0.9–0.97 floor. */
  transform-origin:bottom right;opacity:0;transform:scale(.95) translateY(6px);visibility:hidden;
  transition:opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility 0s linear .22s;
}
.kobe-panel.is-open{
  opacity:1;transform:scale(1) translateY(0);visibility:visible;
  transition:opacity .22s var(--ease-out), transform .22s var(--ease-out);
}
.kobe-head{display:flex;align-items:center;gap:12px;padding:16px 16px;border-bottom:1px solid var(--line-200);flex:none}
.kobe-head__avatar{width:34px;height:34px;border-radius:99px;background:var(--panel-dark);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:.92rem;flex:none}
.kobe-head__avatar svg{width:23px;height:23px}
.kobe-head__name{font-weight:700;font-size:.94rem;color:var(--ink-950)}
.kobe-head__sub{font-size:.72rem;color:var(--ink-600)}
.kobe-head__sub::before{content:"";display:inline-block;width:6px;height:6px;border-radius:99px;background:#22C55E;margin-right:5px}
.kobe-close{position:relative;margin-left:auto;background:transparent;border:none;color:var(--ink-600);width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex:none}
.kobe-close::after{content:"";position:absolute;inset:-8px}
.kobe-close:hover{color:var(--ink-950)}
.kobe-close svg{width:16px;height:16px}
.kobe-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.kobe-msg{max-width:86%;font-size:.87rem;line-height:1.55;padding:10px 13px;border-radius:12px}
.kobe-msg--bot{align-self:flex-start;background:var(--paper-2);color:var(--ink-700);border-bottom-left-radius:4px}
.kobe-msg--user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.kobe-quick{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px;flex:none}
.kobe-quick button{font-size:.78rem;font-weight:600;color:var(--accent-600);background:var(--accent-100);border:1px solid transparent;border-radius:99px;padding:7px 12px}
.kobe-quick button:hover{border-color:var(--accent)}
.kobe-inputrow{display:flex;align-items:center;gap:8px;padding:12px;border-top:1px solid var(--line-200);flex:none}
.kobe-inputrow input{flex:1;border:1.5px solid var(--line-300);border-radius:99px;padding:9px 14px;font-size:.86rem;font-family:var(--font-body);background:var(--paper-2);color:var(--ink-950)}
.kobe-inputrow input:focus{outline:none;border-color:var(--accent);background:var(--paper-1)}
.kobe-send{width:36px;height:36px;border-radius:99px;background:var(--accent);color:#fff;border:none;display:flex;align-items:center;justify-content:center;flex:none}
.kobe-send:hover{background:var(--accent-600)}
.kobe-send svg{width:16px;height:16px}
@media (max-width:480px){.kobe-panel{right:16px;bottom:16px;width:calc(100vw - 32px)}.kobe-fab{right:16px;bottom:16px}}