/* ============================================================
   3NAMIX · Información de producto
   Shared stylesheet · blue world (default) + teal world (.theme-arthritis)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#122436;
  --ink-soft:#37506a;
  --muted:#6c7d90;
  --line:rgba(18,36,54,.10);
  --line-strong:rgba(18,36,54,.18);
  --paper:#ffffff;

  --bg:#eaf3fb;
  --surface:#f4f9fd;
  --surface-2:#e6f1fb;
  --accent:#2c7fc4;
  --accent-deep:#1b4d80;
  --accent-ink:#12395d;
  --accent-wash:#e3effb;
  --on-accent:#ffffff;

  /* real material colours of the insole */
  --mat-top:#d8b88b;     /* Plastazote tan */
  --mat-mid:#3a4150;     /* Memory foam graphite */
  --mat-base:#2f72b8;    /* EVA + VA blue */
  --mat-heel:#d6463c;    /* heel cushion red */

  --radius:18px;
  --radius-lg:26px;
  --maxw:1140px;
  --shadow:0 1px 2px rgba(18,36,54,.04), 0 14px 40px -18px rgba(18,36,54,.22);
  --shadow-soft:0 1px 2px rgba(18,36,54,.04), 0 8px 26px -16px rgba(18,36,54,.18);
}

.theme-arthritis{
  --bg:#ebf6f1;
  --surface:#f3faf6;
  --surface-2:#e1f2ec;
  --accent:#1f9c89;
  --accent-deep:#15695d;
  --accent-ink:#114c44;
  --accent-wash:#ddf1ea;

  --mat-top:#c8ccd3;     /* PET micro fabric · cool grey */
  --mat-base:#1f9c89;    /* EVA + VA teal */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:1.0625rem;
  line-height:1.62;
  color:var(--ink-soft);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--accent-deep);text-decoration:none}

h1,h2,h3{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  color:var(--ink);
  margin:0;
  line-height:1.05;
  letter-spacing:-.02em;
  font-weight:700;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,40px)}

/* ---------- Eyebrow / mono labels ---------- */
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent-deep);
  margin:0 0 18px;
}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb, var(--bg) 86%, white);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  max-width:var(--maxw);margin:0 auto;
  padding:12px clamp(20px,5vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink)}
.brand__mark{width:38px;height:38px;flex:none;object-fit:contain}
.foot__brand .brand__mark{filter:brightness(0) invert(1)}
.brand__name{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:1.18rem;letter-spacing:.01em;color:var(--ink);line-height:1;
}
.brand__name small{
  display:block;font-family:'IBM Plex Mono',monospace;font-weight:500;
  font-size:.5rem;letter-spacing:.34em;color:var(--muted);margin-top:3px;
}
.topbar__nav{display:flex;align-items:center;gap:8px}
.topbar__nav a{
  font-size:.9rem;font-weight:600;color:var(--ink-soft);
  padding:7px 13px;border-radius:999px;transition:background .2s,color .2s;
}
.topbar__nav a:hover{background:var(--accent-wash);color:var(--accent-deep)}
.topbar__nav a.is-current{background:var(--accent);color:#fff}
.topbar__tag{
  display:none;font-family:'IBM Plex Mono',monospace;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  padding-left:8px;border-left:1px solid var(--line-strong);
}
@media(min-width:880px){.topbar__tag{display:inline}}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(46px,8vw,96px) 0 clamp(40px,6vw,72px)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 90% at 78% -10%, var(--accent-wash) 0%, transparent 55%),
    radial-gradient(90% 70% at -10% 110%, var(--surface-2) 0%, transparent 50%);
}
.hero__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,56px);align-items:center;
}
@media(min-width:920px){.hero__grid{grid-template-columns:1.05fr .95fr}}
.hero__kicker{
  font-family:'IBM Plex Mono',monospace;font-size:.8rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);
  display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
}
.hero__kicker::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px}
.hero h1{font-size:clamp(2.45rem,6vw,4.15rem);font-weight:800;max-width:14ch}
.hero h1 em{font-style:normal;color:var(--accent-deep)}
.hero__lead{
  font-size:clamp(1.08rem,1.6vw,1.3rem);color:var(--ink-soft);
  max-width:46ch;margin:22px 0 0;line-height:1.55;
}
.hero__note{margin:16px 0 0;font-size:1rem;color:var(--muted);max-width:44ch}

/* hero media */
.hero__media{position:relative}
.hero__stage{
  position:relative;border-radius:var(--radius-lg);
  background:
    radial-gradient(80% 80% at 50% 30%, #fff 0%, var(--surface) 70%, var(--surface-2) 100%);
  border:1px solid var(--line);box-shadow:var(--shadow);
  padding:clamp(22px,4vw,40px);
  display:grid;place-items:center;
}
.hero__stage img{filter:drop-shadow(0 26px 34px rgba(18,36,54,.26));border-radius:14px}
.hero__badge{
  position:absolute;left:-10px;bottom:18px;
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-soft);
  border-radius:14px;padding:12px 16px;display:flex;align-items:center;gap:12px;
}
.hero__badge b{font-family:'Bricolage Grotesque',sans-serif;color:var(--ink);font-size:1.15rem;line-height:1}
.hero__badge span{font-size:.78rem;color:var(--muted);line-height:1.25;display:block;max-width:15ch}
.hero__badge .dot{width:34px;height:34px;border-radius:9px;background:var(--accent-wash);color:var(--accent-deep);display:grid;place-items:center;flex:none}

/* ---------- Trust strip ---------- */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%, white)}
.trust__row{
  display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:center;align-items:center;
  padding:18px 0;
}
.trust__item{
  font-family:'IBM Plex Mono',monospace;font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:9px;
}
.trust__item svg{width:15px;height:15px;color:var(--accent);flex:none}

/* ---------- Section scaffolding ---------- */
.section{padding:clamp(54px,8vw,96px) 0}
.section--tint{background:var(--surface)}
.section__head{max-width:62ch;margin:0 0 clamp(30px,5vw,52px)}
.section__head.is-center{margin-left:auto;margin-right:auto;text-align:center}
.section h2{font-size:clamp(1.75rem,3.6vw,2.65rem);font-weight:700}
.section__intro{margin:18px 0 0;font-size:clamp(1.04rem,1.4vw,1.18rem);color:var(--ink-soft)}

/* ---------- Benefit cards ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:720px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px 28px;box-shadow:var(--shadow-soft);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card__icon{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-wash);color:var(--accent-deep);margin-bottom:18px;
}
.card__icon svg{width:24px;height:24px}
.card h3{font-size:1.22rem;margin-bottom:9px}
.card p{margin:0;font-size:.99rem;color:var(--ink-soft)}

/* ---------- Layer signature ---------- */
.layers{
  display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,48px);align-items:center;
}
@media(min-width:940px){.layers{grid-template-columns:1.1fr .9fr}}
.layerfig{
  background:
    radial-gradient(70% 60% at 50% 40%, #fff 0%, var(--surface) 100%);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:clamp(18px,3vw,30px);
}
.layerfig svg{width:100%;height:auto;overflow:visible}
.layer-use{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.layerfig:hover .lu1{transform:translate(0,-16px)}
.layerfig:hover .lu3{transform:translate(46px,140px)}
.lbl{font-family:'IBM Plex Mono',monospace;font-size:13px;fill:var(--ink);font-weight:600;letter-spacing:.04em}
.lbl--sub{font-family:'Hanken Grotesk',sans-serif;font-size:12px;fill:var(--muted);font-weight:500;letter-spacing:0}
.leader{stroke:var(--line-strong);stroke-width:1.4;fill:none}
.leader-dot{fill:var(--accent)}

.layerlist{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.layerlist li{display:flex;gap:15px;align-items:flex-start}
.chip{
  font-family:'IBM Plex Mono',monospace;font-size:.74rem;font-weight:600;letter-spacing:.06em;
  color:#fff;background:var(--accent-deep);border-radius:7px;padding:5px 8px;flex:none;margin-top:2px;
}
.chip--tan{background:var(--mat-top);color:#5a4326}
.chip--mid{background:var(--mat-mid)}
.chip--base{background:var(--mat-base)}
.chip--heel{background:var(--mat-heel)}
.layerlist h3{font-size:1.05rem;margin:0 0 3px}
.layerlist p{margin:0;font-size:.96rem;color:var(--ink-soft)}

/* ---------- Feature grid ---------- */
.features{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:620px){.features{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.features{grid-template-columns:repeat(4,1fr)}}
.feature{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px;box-shadow:var(--shadow-soft);
}
.feature svg{width:28px;height:28px;color:var(--accent);margin-bottom:12px}
.feature h3{font-size:1.05rem;margin-bottom:6px}
.feature p{margin:0;font-size:.93rem;color:var(--muted)}

/* ---------- Split (why it matters) ---------- */
.split{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,52px);align-items:center}
@media(min-width:920px){.split{grid-template-columns:1fr 1fr}}
.split__body p{margin:0 0 14px}
.prose-accent{color:var(--accent-deep);font-weight:600}

/* pressure mini-viz */
.viz{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:clamp(22px,3vw,34px);
}
.viz h3{font-size:1.05rem;margin:0 0 4px}
.viz__cap{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 22px}
.viz__row{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.viz__name{flex:none;width:118px;font-size:.86rem;font-weight:600;color:var(--ink)}
.viz__bar{flex:1;height:30px;border-radius:9px;position:relative;overflow:hidden;border:1px solid var(--line)}
.viz__bar--bad{background:linear-gradient(90deg,#2bb673 0%,#9ccb3f 30%,#f2c14e 55%,#ef7d3b 75%,#d6463c 100%)}
.viz__bar--good{background:linear-gradient(90deg,#2bb673 0%,#52bd86 60%,#9ccb3f 100%)}
.viz__scale{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:var(--muted);letter-spacing:.06em;margin-top:6px}

/* clinical citation callout */
.cite{
  background:var(--accent);color:#fff;border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,40px);box-shadow:var(--shadow);
  background-image:linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
}
.cite .eyebrow{color:rgba(255,255,255,.78)}
.cite h3{color:#fff;font-size:clamp(1.3rem,2.4vw,1.8rem);max-width:24ch}
.cite p{color:rgba(255,255,255,.9);margin:14px 0 0;max-width:52ch}
.cite cite{font-style:normal;color:#fff;font-weight:600}

/* ---------- Usage ---------- */
.usage{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,46px);align-items:center}
@media(min-width:860px){.usage{grid-template-columns:1fr 1fr}}
.usage ol{margin:0;padding:0;list-style:none;counter-reset:step}
.usage li{position:relative;padding:0 0 18px 52px;counter-increment:step}
.usage li::before{
  content:counter(step,decimal-leading-zero);position:absolute;left:0;top:-2px;
  font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:.86rem;color:#fff;
  background:var(--accent);width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
}
.usage li b{color:var(--ink)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery img{border:1px solid var(--line);border-radius:14px;background:var(--paper);box-shadow:var(--shadow-soft)}

/* size chart */
.sizewrap{max-width:560px;margin:30px auto 0}
.sizewrap img{border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-soft)}

/* ---------- CTA / consult ---------- */
.consult{
  text-align:center;background:
    radial-gradient(80% 120% at 50% -20%, var(--accent-wash) 0%, transparent 60%);
}
.consult h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
.consult p{max-width:52ch;margin:18px auto 0;font-size:1.1rem;color:var(--ink-soft)}
.consult__actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.btn{
  display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:1rem;
  padding:13px 24px;border-radius:999px;transition:transform .2s, box-shadow .2s, background .2s;
}
.btn--primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-soft)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn--ghost{background:transparent;color:var(--accent-deep);border:1px solid var(--line-strong)}
.btn--ghost:hover{background:var(--accent-wash)}

/* cross-link */
.crosslink{
  margin-top:46px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 24px;box-shadow:var(--shadow-soft);text-align:left;
}
.crosslink span{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px}
.crosslink b{font-family:'Bricolage Grotesque',sans-serif;color:var(--ink);font-size:1.15rem}

/* ---------- Footer ---------- */
.foot{background:var(--ink);color:rgba(255,255,255,.72);padding:clamp(40px,6vw,64px) 0 36px}
.foot__top{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start}
.foot__brand{display:flex;align-items:center;gap:12px;color:#fff}
.foot__brand .brand__mark{color:#fff}
.foot__brand .brand__name{color:#fff}
.foot__brand .brand__name small{color:rgba(255,255,255,.6)}
.foot__links{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot__links a{color:rgba(255,255,255,.8);font-weight:600;font-size:.95rem}
.foot__links a:hover{color:#fff}
.foot__rule{height:1px;background:rgba(255,255,255,.14);margin:30px 0 22px}
.foot__fine{font-size:.82rem;color:rgba(255,255,255,.55);max-width:70ch;line-height:1.6}
.foot__fine a{color:rgba(255,255,255,.8)}

/* ---------- Index landing ---------- */
.lead-hero{padding:clamp(60px,9vw,120px) 0 clamp(30px,5vw,60px);text-align:center;position:relative;overflow:hidden}
.lead-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(100% 80% at 50% -10%, var(--accent-wash) 0%, transparent 55%)}
.lead-hero__inner{position:relative;z-index:1}
.lead-hero h1{font-size:clamp(2.6rem,6.5vw,4.6rem);font-weight:800;max-width:18ch;margin:0 auto}
.lead-hero p{max-width:54ch;margin:22px auto 0;font-size:clamp(1.1rem,1.7vw,1.35rem);color:var(--ink-soft)}
.products{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:820px){.products{grid-template-columns:1fr 1fr}}
.product-card{
  display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft);
  transition:transform .25s, box-shadow .25s;text-align:left;
}
.product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.product-card__media{padding:34px;display:grid;place-items:center;border-bottom:1px solid var(--line)}
.product-card__media img{filter:drop-shadow(0 22px 28px rgba(18,36,54,.22));max-height:230px;width:auto}
.product-card__body{padding:28px 28px 30px;display:flex;flex-direction:column;flex:1}
.product-card .eyebrow{margin-bottom:12px}
.product-card h2{font-size:1.55rem}
.product-card p{margin:12px 0 22px;color:var(--ink-soft);flex:1}
.product-card .btn{align-self:flex-start}
.theme-blue{--accent:#2c7fc4;--accent-deep:#1b4d80;--accent-wash:#e3effb}
.theme-teal{--accent:#1f9c89;--accent-deep:#15695d;--accent-wash:#ddf1ea}

/* layerfig with real photo */
.layerfig--photo{padding:0;overflow:hidden}
.layerfig--photo img{width:100%;height:auto;display:block;max-height:440px;object-fit:cover;object-position:center}

/* ── Arch support callout ── */
.arch-highlight{padding-top:0}
.arch-card{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,48px);align-items:flex-start;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  border-radius:var(--radius-lg);padding:clamp(28px,4vw,48px);box-shadow:var(--shadow);
}
@media(max-width:620px){.arch-card{grid-template-columns:1fr}}
.arch-card__icon{
  width:80px;height:80px;border-radius:20px;
  background:rgba(255,255,255,.15);display:grid;place-items:center;
  color:#fff;flex:none;
}
@media(max-width:620px){.arch-card__icon{display:none}}
.arch-card .eyebrow{color:rgba(255,255,255,.75);margin-bottom:12px}
.arch-card__title{color:#fff;font-size:clamp(1.35rem,2.6vw,1.85rem);margin:0 0 16px;max-width:32ch}
.arch-card__body p{color:rgba(255,255,255,.88);margin:0 0 12px;max-width:60ch}
.arch-card__body strong{color:#fff}

/* ---------- Reveal animation ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
[data-reveal].is-visible{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .card,.product-card,.btn{transition:none}
  .layer-use{transition:none}
  .layerfig:hover .lu1,.layerfig:hover .lu3{transform:none}
}

:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

@media print{
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .topbar{position:static}
}