/* Tipografías alojadas aquí y no en Google Fonts: la hoja externa
   bloqueaba el render 750 ms y añadía una conexión a un tercero.
   Solo los subconjuntos latin y latin-ext — el sitio es en español.
   Se regeneran con el script de fuentes (ver README). */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/space-grotesk-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/space-grotesk-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ============================================================
   Zebra Genetics — Sistema de diseño (modo claro)
   Home + páginas internas. Una sola hoja para todo el sitio.
   ============================================================ */

:root{
  --ink:#0D1B2A; --ink-soft:#1B263B;
  --accent:#8c52ff; --accent-2:#066aab; --accent-ink:#6b34e0;
  --violet:#8467fa;
  --paper:#fff; --paper-2:#F4F7FA; --paper-3:#F8FAFC;
  --muted:#5A6B7B; --muted-2:#8295a5;
  --line:#E6ECF2; --line-2:#DDE5EC;
  --maxw:1240px; --pad:clamp(18px,4vw,56px);
  --mono:ui-monospace,'SFMono-Regular',Menlo,monospace;
  --head:'Space Grotesk',system-ui,sans-serif;
  --sans:'Inter',system-ui,sans-serif;
  --shadow-sm:0 1px 2px rgba(13,27,42,.04),0 4px 14px rgba(13,27,42,.05);
  --shadow-md:0 12px 32px rgba(13,27,42,.09);
  --shadow-lg:0 26px 64px rgba(13,27,42,.13);
  --r:14px; --r-lg:18px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;font-family:var(--sans);background:var(--paper);color:var(--ink);
  line-height:1.62;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-size:16px;letter-spacing:-.011em;
  font-optical-sizing:auto;
  font-feature-settings:'cv05' 1,'cv11' 1,'ss03' 1,'calt' 1;
}
/* height:auto es obligatorio junto al max-width: las <img> declaran width y
   height reales en el HTML (para que el navegador reserve el espacio y no haya
   salto de layout), y sin esto una imagen encogida por el max-width
   conservaría el alto del atributo y se vería aplastada. */
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--head);margin:0;text-wrap:balance;-webkit-font-smoothing:antialiased;}
p,li{text-wrap:pretty;}
::selection{background:rgba(140,82,255,.2);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}

/* ---------- type helpers ---------- */
.accent{color:var(--accent);}
.mono{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.04em;}
.eyebrow{
  display:block;font-family:var(--mono);font-weight:600;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:14px;
}
.h1{font-family:var(--head);font-weight:600;font-size:clamp(32px,5vw,56px);line-height:1.04;letter-spacing:-.03em;}
.h2{font-family:var(--head);font-weight:600;font-size:clamp(26px,3.6vw,40px);line-height:1.08;letter-spacing:-.025em;margin:0;}
.h2--narrow{max-width:20ch;}
.lead{font-size:clamp(15px,1.5vw,18px);line-height:1.6;color:var(--muted);}
.link-mono{text-decoration:none;font-family:var(--head);font-weight:600;font-size:14px;color:var(--accent-ink);letter-spacing:-.01em;white-space:nowrap;transition:opacity .15s;}
.link-mono:hover{opacity:.65;}
/* Fuera de la vista pero dentro del árbol de accesibilidad: lo lee un lector
   de pantalla y lo cuenta un rastreador. display:none lo borraría de los dos. */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;text-align:center;font-family:var(--head);font-weight:600;
  font-size:15px;letter-spacing:-.01em;padding:14px 26px;border-radius:11px;
  border:1px solid transparent;cursor:pointer;line-height:1;
  transition:transform .15s,background .15s,box-shadow .15s,border-color .15s,color .15s;
}
.btn--primary{background:var(--accent);color:#fff;box-shadow:0 8px 22px rgba(140,82,255,.26);}
.btn--primary:hover{background:#7a3ff0;transform:translateY(-2px);box-shadow:0 12px 28px rgba(140,82,255,.32);}
.btn--ghost{background:#fff;color:var(--ink);border-color:var(--line-2);}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent-ink);transform:translateY(-2px);}
.btn--dark{background:var(--ink);color:#fff;}
.btn--dark:hover{background:var(--accent);transform:translateY(-2px);}
.btn--block{display:flex;width:100%;border-radius:12px;}
.btn--lg{padding:16px 32px;font-size:16px;}
.btn--sm{padding:10px 18px;font-size:13.5px;border-radius:9px;}

/* ---------- topbar ---------- */
.topbar{background:var(--ink);color:#c8d4de;}
.topbar__inner{max-width:var(--maxw);margin:0 auto;padding:9px var(--pad);display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;justify-content:space-between;}
.topbar__muted{font-weight:500;font-size:12px;color:#9fb2c2;}
.topbar__right{display:flex;gap:18px;align-items:center;}
.topbar__phone{text-decoration:none;font-weight:600;font-size:12px;color:var(--accent);}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.header__inner{display:flex;align-items:center;gap:22px;padding:13px var(--pad);max-width:var(--maxw);margin:0 auto;}
.logo{display:flex;align-items:center;text-decoration:none;flex:none;}
.logo__img{height:45px;width:auto;}
.logo__text{display:none;align-items:center;gap:6px;font-family:var(--head);font-weight:700;font-size:18px;color:var(--ink);letter-spacing:-.01em;}
.logo__accent{color:var(--accent);}
.nav{display:flex;align-items:center;gap:2px;margin-left:8px;}
.nav__link,.nav__trigger{position:relative;text-decoration:none;font-family:var(--sans);font-weight:500;font-size:14.5px;color:var(--muted);padding:8px 12px;border-radius:8px;background:none;border:0;cursor:pointer;transition:color .15s,background .15s;}
.nav__link:hover,.nav__trigger:hover{color:var(--ink);background:var(--paper-2);}
.nav__link.is-active,.nav__trigger.is-active{color:var(--ink);}
.nav__link.is-active::after,.nav__trigger.is-active::after{content:"";position:absolute;left:12px;right:12px;bottom:1px;height:2px;background:var(--accent);border-radius:2px;}
.nav__trigger{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--ink);}
.nav__caret{font-size:10px;color:var(--accent);transition:transform .2s;}
.nav__trigger[aria-expanded="true"] .nav__caret{transform:rotate(180deg);}
.header__cta{margin-left:auto;flex:none;padding:10px 20px;border-radius:999px;font-size:14px;}
.hamburger{display:none;margin-left:auto;background:#fff;border:1px solid var(--line-2);border-radius:10px;width:42px;height:42px;cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center;}
.hamburger span{width:18px;height:2px;background:var(--ink);border-radius:2px;}

/* ---------- mega-menu ---------- */
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);}
.mega__inner{max-width:var(--maxw);margin:0 auto;padding:28px var(--pad);display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.mega__title{display:block;text-decoration:none;font-family:var(--head);font-weight:600;font-size:13px;color:var(--accent-ink);text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line);transition:color .15s;}
.mega__title:hover{color:var(--accent);}
.mega__link{display:block;text-decoration:none;font-weight:500;font-size:14px;color:var(--muted);padding:7px 0;transition:color .15s,padding-left .15s;}
.mega__link:hover{color:var(--accent-ink);padding-left:5px;}

/* ---------- sections ---------- */
.section{background:var(--paper);}
.section--alt{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section__inner{max-width:var(--maxw);margin:0 auto;padding:clamp(52px,6vw,92px) var(--pad);}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:38px;}

/* ============================================================ HOME ===== */
.hero{position:relative;background:var(--paper);overflow:hidden;border-bottom:1px solid var(--line);}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 60% at 92% 0,rgba(140,82,255,.09),transparent 62%);pointer-events:none;}
.hero__inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(36px,4vw,60px) var(--pad) clamp(44px,5vw,68px);}
.hero__meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding-bottom:20px;margin-bottom:clamp(30px,4vw,44px);border-bottom:1px solid var(--line);}
.hero__meta .mono{color:var(--accent-ink);font-weight:600;letter-spacing:.06em;}
.hero__meta .mono--dim{color:var(--muted-2);}
.hero__grid{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(32px,5vw,56px);align-items:stretch;}
.hero__copy{align-self:center;}
.hero__title{font-family:var(--head);font-weight:600;font-size:clamp(36px,5.4vw,62px);line-height:1.03;letter-spacing:-.032em;margin:0 0 22px;color:var(--ink);}
.hero__lead{font-size:clamp(15px,1.5vw,18px);line-height:1.62;color:var(--muted);margin:0 0 30px;max-width:500px;}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;}
.hero__figure{margin:0;position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow-lg);background:var(--paper-2);min-height:clamp(360px,42vw,540px);}
/* Fachada del video: miniatura + botón. El iframe real se inserta al pulsar. */
.ytlite{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:var(--ink);cursor:pointer;display:block;}
.ytlite img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease,opacity .3s ease;}
.ytlite:hover img{transform:scale(1.03);opacity:.9;}
.ytlite__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:68px;border-radius:50%;background:rgba(13,27,42,.62);backdrop-filter:blur(2px);box-shadow:0 6px 24px rgba(0,0,0,.35);transition:background .2s ease,transform .2s ease;}
.ytlite__play::after{content:"";position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff;}
.ytlite:hover .ytlite__play,.ytlite:focus-visible .ytlite__play{background:var(--accent);transform:translate(-50%,-50%) scale(1.08);}
.ytlite:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero__video{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;cursor:pointer;background:#0d1b2a;display:block;}
.hero__playbtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;background:rgba(140,82,255,.94);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 32px rgba(13,27,42,.4);transition:transform .18s ease,background .18s ease;}
.hero__playbtn svg{width:30px;height:30px;fill:#fff;margin-left:3px;}
.hero__video:hover .hero__playbtn,.hero__video:focus-visible .hero__playbtn{transform:translate(-50%,-50%) scale(1.09);background:var(--accent);}
.hero__iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.hero__overlay{position:absolute;left:0;right:0;bottom:0;padding:16px;display:flex;flex-wrap:wrap;gap:8px;background:linear-gradient(transparent,rgba(13,27,42,.5));}
.hero__chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-radius:999px;padding:8px 13px;font-family:var(--head);font-weight:600;font-size:12.5px;color:var(--ink);letter-spacing:-.01em;box-shadow:var(--shadow-sm);}
.hero__chip svg{color:var(--accent-ink);}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;box-shadow:0 0 0 4px rgba(140,82,255,.18);}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border:1px solid var(--line);border-radius:16px;background:#fff;margin-top:clamp(32px,4vw,50px);overflow:hidden;box-shadow:var(--shadow-sm);}
.kpi{padding:24px 26px;border-right:1px solid var(--line);}
.kpi:last-child{border-right:0;}
.kpi__num{font-family:var(--head);font-weight:700;font-size:clamp(28px,3.4vw,40px);color:var(--ink);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;}
.kpi__label{font-weight:500;font-size:12.5px;color:var(--muted);margin-top:7px;}

/* familias (home) */
.familias{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;}
.familia{text-decoration:none;display:block;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:30px;transition:border-color .2s,transform .2s,box-shadow .2s;}
.familia:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--shadow-md);}
.familia__top{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.familia__num{font-family:var(--head);font-weight:700;font-size:30px;color:var(--accent);letter-spacing:-.02em;line-height:1;}
.familia__rule{flex:1;height:1px;background:var(--line-2);}
.familia__name{font-weight:600;font-size:21px;letter-spacing:-.02em;margin:0 0 11px;color:var(--ink);}
.familia__desc{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0 0 22px;}
.familia__foot{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--line);}
.familia__count{font-family:var(--mono);font-weight:500;font-size:12px;color:var(--muted-2);}
.familia__go{font-family:var(--head);font-weight:600;font-size:13.5px;color:var(--accent);}

/* ---------- testimonial band (dark) ---------- */
.testi{background:var(--ink);position:relative;overflow:hidden;}
.testi::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 80% at 80% 0,rgba(140,82,255,.16),transparent 60%),radial-gradient(40% 70% at 12% 100%,rgba(6,106,171,.1),transparent 60%);pointer-events:none;}
.testi__inner{position:relative;max-width:960px;margin:0 auto;padding:clamp(56px,7vw,104px) var(--pad);text-align:center;}
.testi__mark{font-family:var(--head);font-size:64px;line-height:.5;color:var(--accent);margin-bottom:18px;}
.testi__text{font-family:var(--head);font-weight:500;font-size:clamp(22px,3vw,34px);line-height:1.32;letter-spacing:-.022em;color:#fff;margin:0 0 30px;}
.author{display:inline-flex;align-items:center;gap:14px;}
.author__avatar{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:700;font-size:17px;color:#fff;flex:none;}
.author__name{display:block;font-family:var(--head);font-weight:600;font-size:15px;color:#fff;text-align:left;}
.author__role{display:block;font-weight:500;font-size:13px;color:#9fb2c2;text-align:left;}

/* ---------- blog cards ---------- */
.bloggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;}
/* Paginador del blog. Lo escribe meta.php en el servidor, después de #grid. */
.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:36px;}
.pager__n{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border:1px solid var(--line-2);border-radius:9px;background:#fff;color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;transition:border-color .18s,color .18s;}
.pager__n:hover{border-color:var(--accent);color:var(--accent-ink);}
.pager__n.is-current{background:var(--accent);border-color:var(--accent);color:#fff;}
.pager__off{opacity:.4;pointer-events:none;}
.acard{display:flex;flex-direction:column;text-decoration:none;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s;}
.acard:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--shadow-md);}
.acard__media{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2);}
.acard__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.acard:hover .acard__media img{transform:scale(1.05);}
.acard__body{padding:22px;display:flex;flex-direction:column;flex:1;}
.acard__meta{display:flex;gap:10px;align-items:center;margin-bottom:12px;}
.acard__cat{font-family:var(--head);font-weight:600;font-size:11px;color:var(--accent-ink);background:rgba(140,82,255,.1);padding:4px 10px;border-radius:999px;}
.acard__date{font-family:var(--mono);font-size:12px;color:var(--muted-2);}
.acard__title{font-weight:600;font-size:18px;line-height:1.28;letter-spacing:-.02em;color:var(--ink);margin:0 0 14px;}
.acard__more{margin-top:auto;font-family:var(--head);font-weight:600;font-size:13.5px;color:var(--accent);}

/* ---------- CTA banner with bg image ---------- */
.ctaband{position:relative;overflow:hidden;background:var(--ink);}
.ctaband__bg{position:absolute;inset:0;}
.ctaband__bg img{width:100%;height:100%;object-fit:cover;opacity:.5;}
.ctaband__overlay{position:absolute;inset:0;background:linear-gradient(100deg,rgba(13,27,42,.96) 30%,rgba(13,27,42,.55) 75%,rgba(140,82,255,.35));}
.ctaband__inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(56px,7vw,108px) var(--pad);}
.ctaband__content{max-width:620px;}
.ctaband .eyebrow{color:var(--accent);}
.ctaband__title{font-family:var(--head);font-weight:600;font-size:clamp(28px,4.4vw,50px);letter-spacing:-.03em;line-height:1.05;color:#fff;margin:0 0 16px;}
.ctaband__lead{font-size:clamp(15px,1.6vw,18px);color:#c8d4de;margin:0 0 30px;max-width:520px;}
.ctaband__actions{display:flex;flex-wrap:wrap;gap:12px;}
.ctaband__actions .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);}
.ctaband__actions .btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff;}

/* ---------- ventajas strip (pre-footer) ---------- */
.ventajas{background:var(--paper-2);border-top:1px solid var(--line);}
.ventajas__inner{max-width:var(--maxw);margin:0 auto;padding:30px var(--pad);display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;}
.ventaja{display:flex;align-items:center;gap:14px;}
.ventaja__ic{flex:none;width:46px;height:46px;border-radius:12px;background:#fff;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);color:var(--accent-ink);}
.ventaja__ic svg,.value__ic svg,.info-card__ic svg{display:block;}
.ventaja__t{font-family:var(--head);font-weight:600;font-size:15px;color:var(--ink);letter-spacing:-.01em;}
.ventaja__d{font-size:13px;color:var(--muted);}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#fff;}
.footer__inner{max-width:var(--maxw);margin:0 auto;padding:clamp(52px,5vw,72px) var(--pad) 36px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;}
.footer__brand{min-width:200px;}
.footer__logo{height:34px;width:auto;margin-bottom:18px;}
.footer__logo-text{display:none;font-family:var(--head);font-weight:700;font-size:18px;color:#fff;margin-bottom:18px;}
.footer__desc{font-size:13.5px;line-height:1.6;color:#9fb2c2;margin:0 0 18px;max-width:280px;}
.footer__social{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.16);color:#c8d4de;text-decoration:none;font-family:var(--head);font-weight:700;font-size:15px;transition:background .15s,border-color .15s,color .15s;}
.footer__social:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.footer__socials{display:flex;gap:10px;flex-wrap:wrap;}
.footer__title{font-family:var(--head);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:16px;}
.footer__col a,.footer__addr{display:block;text-decoration:none;font-weight:500;font-size:14px;color:#c8d4de;padding:6px 0;}
.footer__col a{transition:color .15s;}
.footer__col a:hover{color:var(--accent);}
.footer__addr{line-height:1.5;}
.footer__link-accent{color:var(--accent)!important;font-weight:600!important;font-size:13px!important;margin-top:8px;}
.footer__bar{border-top:1px solid rgba(255,255,255,.08);padding:20px var(--pad);max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-weight:500;font-size:12.5px;color:#7d909e;}

/* ---------- drawer ---------- */
.drawer{position:fixed;inset:0;z-index:80;background:rgba(13,27,42,.45);}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;width:86%;max-width:370px;background:#fff;padding:24px;overflow-y:auto;transform:translateX(100%);transition:transform .25s ease;box-shadow:var(--shadow-lg);}
.drawer.is-open .drawer__panel{transform:translateX(0);}
.drawer__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.drawer__title{font-family:var(--head);font-weight:700;font-size:16px;color:var(--ink);}
.drawer__close{background:none;border:0;font-size:28px;color:var(--muted);cursor:pointer;line-height:1;}
.acc{border-bottom:1px solid var(--line);}
.acc__btn{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0;padding:15px 0;cursor:pointer;font-family:var(--head);font-weight:600;font-size:15px;color:var(--ink);text-align:left;}
.acc__sign{color:var(--accent);font-size:18px;}
.acc__panel{display:none;padding:0 0 12px;}
.acc.is-open .acc__panel{display:block;}
.acc__link{display:block;text-decoration:none;font-weight:500;font-size:14px;color:var(--muted);padding:7px 0 7px 12px;}
.acc__link:hover{color:var(--accent-ink);}
.acc__link--head{color:var(--accent-ink);font-weight:600;}
.drawer__links{display:flex;flex-direction:column;margin-top:8px;}
.drawer__nav{text-decoration:none;font-family:var(--head);font-weight:600;font-size:15px;color:var(--ink);padding:14px 0;border-bottom:1px solid var(--line);}
.drawer__cta{margin-top:20px;color:#fff;}

/* ---------- fab (a la derecha: la izquierda es del botón de Godixital) ---------- */
.fab{position:fixed;bottom:24px;right:24px;z-index:70;width:58px;height:58px;border-radius:50%;background:#25D366;box-shadow:0 10px 28px rgba(37,211,102,.45);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:transform .15s;}
.fab:hover{transform:scale(1.06);}


/* ============================================================ SHARED ===== */
/* breadcrumb */
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--muted);}
.breadcrumb a{text-decoration:none;color:var(--muted);transition:color .15s;}
.breadcrumb a:hover{color:var(--accent-ink);}
.breadcrumb span{color:var(--muted-2);}
.breadcrumb b{color:var(--ink);font-weight:600;}

/* page hero */
.page-hero{background:var(--paper-2);border-bottom:1px solid var(--line);position:relative;overflow:hidden;}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 80% at 95% 0,rgba(140,82,255,.07),transparent 60%);pointer-events:none;}
.page-hero__inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(28px,3.5vw,48px) var(--pad) clamp(34px,4vw,56px);}
.page-hero__title{font-family:var(--head);font-weight:600;font-size:clamp(28px,4.4vw,48px);letter-spacing:-.03em;line-height:1.05;margin:16px 0 14px;color:var(--ink);}
.page-hero__lead{font-size:clamp(15px,1.5vw,18px);color:var(--muted);margin:0;max-width:640px;}

/* product card (catálogo / relacionados) */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;}
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s;}
.pcard:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--shadow-md);}
.pcard__link{display:block;text-decoration:none;}
.pcard__media{position:relative;aspect-ratio:1/1;background:radial-gradient(120% 120% at 50% 0,#fff 0,var(--paper-3) 70%);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.pcard__media img{width:100%;height:100%;object-fit:contain;padding:24px;mix-blend-mode:multiply;transition:transform .35s ease;}
/* Micrografías IHC (anticuerpos): llenan la tarjeta, sin padding ni multiply */
.pcard__media--photo{background:var(--ink);}
/* Micrografías IHC: tiras anchas de baja resolución -> nunca ampliar sobre su tamaño nativo (nitidez) */
.pcard__media--photo img{object-fit:scale-down;padding:10px;mix-blend-mode:normal;}
.pcard__media--photo .pcard__tag{background:rgba(255,255,255,.92);color:var(--accent-ink);box-shadow:0 1px 4px rgba(13,27,42,.18);}
/* Imagen genérica de categoría (producto sin foto propia): cuadrada 1:1, llena la tarjeta */
.pcard__media--generic{background:var(--paper-2);}
.pcard__media--generic img{object-fit:cover;padding:0;mix-blend-mode:normal;}
.pcard:hover .pcard__media img{transform:scale(1.05);}
.pcard__media--ph{background:radial-gradient(120% 120% at 50% 10%,color-mix(in srgb,var(--tint) 8%,#fff) 0,var(--paper-3) 72%);flex-direction:column;gap:14px;}
.pcard__glyph{display:flex;}
.pcard__code{font-family:var(--mono);font-size:11px;color:var(--muted-2);letter-spacing:.04em;}
.pcard__tag{position:absolute;top:12px;left:12px;z-index:1;font-family:var(--head);font-weight:600;font-size:10.5px;color:var(--accent-ink);background:rgba(140,82,255,.1);padding:5px 10px;border-radius:999px;}
.pcard__ph{font-family:var(--mono);font-size:11px;color:var(--muted-2);}
.pcard__body{padding:18px;display:flex;flex-direction:column;flex:1;}
.pcard__cat{text-decoration:none;font-family:var(--head);font-weight:600;font-size:11px;color:var(--accent-ink);margin-bottom:9px;display:inline-block;align-self:flex-start;}
.pcard__cat:hover{text-decoration:underline;}
.pcard__name{font-weight:600;font-size:15.5px;line-height:1.34;letter-spacing:-.018em;margin:0 0 9px;text-wrap:pretty;}
.pcard__name a{text-decoration:none;color:var(--ink);}
.pcard__name a:hover{color:var(--accent-ink);}
.pcard__sku{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-bottom:16px;font-variant-numeric:tabular-nums;letter-spacing:.01em;}
.pcard__actions{margin-top:auto;}
.pcard__cta{display:block;text-decoration:none;text-align:center;background:var(--ink);color:#fff;font-family:var(--head);font-weight:600;font-size:13.5px;padding:11px;border-radius:10px;transition:background .15s;}
.pcard__cta:hover{background:var(--accent);}

/* ============================================================ CATÁLOGO ===== */
.cat-layout{max-width:var(--maxw);margin:0 auto;padding:clamp(28px,4vw,48px) var(--pad) clamp(48px,6vw,88px);display:grid;grid-template-columns:262px 1fr;gap:36px;align-items:start;}
.filters{position:sticky;top:140px;}
.filters__group{border-bottom:1px solid var(--line);padding:18px 0;}
.filters__group:first-child{padding-top:0;}
.filters__title{font-family:var(--head);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);margin-bottom:14px;}
.filters__opt{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;cursor:pointer;font-size:14px;color:var(--muted);transition:color .15s;}
.filters__opt:hover{color:var(--ink);}
.filters__opt.is-active{color:var(--accent-ink);font-weight:600;}
.filters__opt input{accent-color:var(--accent);}
.filters__opt .cnt{font-family:var(--mono);font-size:11px;color:var(--muted-2);font-variant-numeric:tabular-nums;}
.filters__reset{margin-top:16px;font-family:var(--head);font-weight:600;font-size:13px;color:var(--accent-ink);background:none;border:0;cursor:pointer;padding:0;}

.cat-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:22px;}
.cat-count{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;}
.cat-count b{color:var(--ink);font-weight:600;}
.searchbar{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:11px 16px;box-shadow:var(--shadow-sm);margin-bottom:22px;}
.searchbar:focus-within{border-color:var(--accent);}
.searchbar__ic{width:16px;height:16px;border:2.4px solid var(--accent);border-radius:50%;flex:none;position:relative;}
.searchbar__ic::after{content:"";position:absolute;width:6px;height:2px;background:var(--accent);right:-4px;bottom:0;transform:rotate(45deg);border-radius:2px;}
.searchbar input{flex:1;border:0;background:none;outline:none;font:500 15px var(--sans);color:var(--ink);}
.select{font:500 13.5px var(--sans);color:var(--ink);border:1px solid var(--line-2);border-radius:10px;padding:9px 12px;background:#fff;cursor:pointer;}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;}
.chip{text-decoration:none;font-family:var(--mono);font-weight:500;font-size:12.5px;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:6px 13px;cursor:pointer;transition:border-color .15s,background .15s;}
.chip:hover{border-color:var(--accent);}
.chip.is-active{background:var(--ink);color:#fff;border-color:var(--ink);}
.empty{text-align:center;padding:60px 20px;color:var(--muted);}
.empty__title{font-family:var(--head);font-weight:600;font-size:20px;color:var(--ink);margin-bottom:8px;}
.loadmore{display:flex;justify-content:center;margin-top:36px;}
.mobile-filter-btn{display:none;}

/* Índice completo de la categoría. Es sobre todo una ruta de rastreo, pero se
   ve: una lista de 461 enlaces oculta con display:none sería justo lo que
   Google llama contenido escondido. En columnas para que ocupe poco. */
.cat-index{display:block;margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line);padding-top:clamp(24px,3vw,36px);}
.cat-index:empty{display:none;}
.cat-index__title{font-size:clamp(19px,2.2vw,24px);margin-bottom:18px;}
.cat-index__list{list-style:none;margin:0;padding:0;columns:260px;column-gap:32px;}
.cat-index__list li{break-inside:avoid;margin-bottom:7px;}
.cat-index__list a{font-size:13.5px;line-height:1.45;color:var(--muted);text-decoration:none;transition:color .15s;}
.cat-index__list a:hover{color:var(--accent-ink);text-decoration:underline;}
.filters__close{display:none;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--line-2);border-radius:9px;background:#fff;font-size:24px;line-height:1;color:var(--ink);cursor:pointer;}
.filters__apply{display:none;}

/* ============================================================ FICHA ===== */
.ficha{max-width:var(--maxw);margin:0 auto;padding:clamp(24px,3vw,40px) var(--pad) clamp(48px,6vw,84px);}
.ficha__top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,52px);align-items:start;margin-top:22px;}
.ficha__media{position:sticky;top:130px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:radial-gradient(120% 120% at 50% 0,#fff,var(--paper-3));aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:var(--shadow-sm);}
.ficha__media img{width:100%;height:100%;object-fit:contain;padding:42px;mix-blend-mode:multiply;}
.ficha__media--photo{background:var(--ink);}
.ficha__media--photo img{object-fit:scale-down;padding:24px;mix-blend-mode:normal;}
.ficha__media--generic{background:var(--paper-2);}
.ficha__media--generic img{object-fit:cover;padding:0;mix-blend-mode:normal;}
.ficha__media--ph{flex-direction:column;gap:18px;}
/* galería (gallery en products.json): el sticky pasa al contenedor */
.ficha__gal{position:sticky;top:130px;}
.ficha__gal .ficha__media{position:static;}
.ficha__thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:10px;margin-top:12px;}
.ficha__thumb{aspect-ratio:1/1;padding:6px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff;cursor:pointer;transition:border-color .15s;}
.ficha__thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;}
.ficha__thumb:hover,.ficha__thumb[aria-current]{border-color:var(--accent);}
.ficha__badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-weight:600;font-size:12px;color:var(--accent-ink);background:rgba(140,82,255,.1);padding:6px 13px;border-radius:999px;margin-bottom:14px;}
.ficha__title{font-family:var(--head);font-weight:600;font-size:clamp(26px,3.6vw,40px);letter-spacing:-.03em;line-height:1.08;color:var(--ink);margin:0 0 16px;}
.ficha__codes{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;}
.ficha__code{font-family:var(--mono);font-size:13px;color:var(--ink);background:var(--paper-2);border:1px solid var(--line-2);border-radius:8px;padding:7px 12px;}
.ficha__code b{color:var(--accent-ink);}
.ficha__desc{font-size:15.5px;line-height:1.7;color:var(--muted);margin:0 0 26px;}
.specs{width:100%;border-collapse:collapse;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;margin-bottom:26px;}
.specs th,.specs td{text-align:left;padding:13px 16px;font-size:14px;border-bottom:1px solid var(--line);}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0;}
.specs th{background:var(--paper-2);color:var(--muted);font-weight:600;width:42%;font-family:var(--head);}
.specs td{color:var(--ink);}
.ficha__cta{background:var(--ink);border-radius:var(--r-lg);padding:24px;color:#fff;}
.ficha__cta h2{font-size:18px;letter-spacing:-.02em;margin:0 0 6px;}
.ficha__cta p{font-size:13.5px;color:#9fb2c2;margin:0 0 16px;}
.ficha__cta-row{display:flex;flex-wrap:wrap;gap:10px;}

/* ============================================================ FAMILIA ===== */
.fam-hero{position:relative;overflow:hidden;background:var(--ink);color:#fff;}
.fam-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 90% at 85% 0,rgba(140,82,255,.22),transparent 60%),radial-gradient(40% 80% at 5% 100%,rgba(6,106,171,.12),transparent 60%);}
.fam-hero__inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(36px,5vw,72px) var(--pad);}
.fam-hero .breadcrumb,.fam-hero .breadcrumb a,.fam-hero .breadcrumb span{color:#9fb2c2;}
.fam-hero .breadcrumb b{color:#fff;}
.fam-hero__title{font-family:var(--head);font-weight:600;font-size:clamp(30px,5vw,56px);letter-spacing:-.03em;line-height:1.04;margin:16px 0 16px;max-width:16ch;}
.fam-hero__lead{font-size:clamp(15px,1.6vw,18px);color:#aebccb;max-width:600px;margin:0 0 8px;}
.subcats{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;}
.subcat{text-decoration:none;display:flex;flex-direction:column;justify-content:space-between;gap:18px;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:24px;min-height:140px;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s;}
.subcat:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--shadow-md);}
.subcat--media{padding:0;gap:0;}
/* min-height:0 + overflow:hidden: sin eso, al ser flex item su tamaño mínimo
   automático es el alto natural de la imagen y las miniaturas poco apaisadas
   (Neuroendocrino 1:1, Kits de tinción 4:3) estiraban la tarjeta. */
.subcat__media{aspect-ratio:16/10;min-height:0;overflow:hidden;background:var(--paper-2);display:flex;align-items:center;justify-content:center;padding:16px;border-bottom:1px solid var(--line);}
.subcat__media img{width:100%;height:100%;object-fit:scale-down;mix-blend-mode:multiply;}
.subcat--media .subcat__body{padding:20px 22px;display:flex;flex-direction:column;gap:16px;flex:1;justify-content:space-between;}
.subcat__name{font-family:var(--head);font-weight:600;font-size:18px;letter-spacing:-.02em;color:var(--ink);}
.subcat__foot{display:flex;align-items:center;justify-content:space-between;}
.subcat__count{font-family:var(--mono);font-size:12px;color:var(--muted-2);}
.subcat__go{font-family:var(--head);font-weight:600;font-size:13px;color:var(--accent);}

/* ============================================================ NOSOTROS ===== */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;}
.value{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:26px;}
.value__ic{width:48px;height:48px;border-radius:12px;background:rgba(140,82,255,.1);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--accent-ink);}
.value__t{font-family:var(--head);font-weight:600;font-size:18px;letter-spacing:-.02em;color:var(--ink);margin-bottom:8px;}
.value__d{font-size:14px;color:var(--muted);line-height:1.6;}
.team{display:flex;align-items:center;gap:24px;flex-wrap:wrap;background:var(--ink);border-radius:var(--r-lg);padding:32px;color:#fff;}
.team__avatar{width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:700;font-size:30px;color:#fff;flex:none;}
.team__name{font-family:var(--head);font-weight:600;font-size:22px;letter-spacing:-.02em;}
.team__role{color:var(--accent);font-weight:600;font-size:14px;margin:2px 0 10px;}
.team__quote{color:#aebccb;font-size:15px;line-height:1.6;max-width:560px;}
.statband{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow-sm);}

/* ============================================================ ARTICLE ===== */
.article{max-width:760px;margin:0 auto;padding:clamp(28px,4vw,52px) var(--pad) clamp(48px,6vw,80px);}
.article__cover{aspect-ratio:16/8;border-radius:var(--r-lg);overflow:hidden;margin:22px 0 32px;border:1px solid var(--line-2);}
.article__cover img{width:100%;height:100%;object-fit:cover;}
.article__body{font-size:17px;line-height:1.75;color:#2b3a48;}
.article__body h2{font-size:26px;letter-spacing:-.02em;margin:36px 0 14px;color:var(--ink);}
.article__body h3{font-size:20px;letter-spacing:-.02em;margin:28px 0 10px;color:var(--ink);}
.article__body p{margin:0 0 18px;}
.article__body ul{margin:0 0 18px;padding-left:22px;}
.article__body li{margin-bottom:8px;}
.article__table{overflow-x:auto;margin:0 0 22px;border:1px solid var(--line-2);border-radius:var(--r);}
.article__table table{width:100%;min-width:520px;border-collapse:collapse;font-size:15px;line-height:1.55;}
.article__table th,.article__table td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);}
.article__table th{background:var(--paper-2);color:var(--ink);font-weight:600;}
.article__table td:first-child{font-weight:600;color:var(--ink);}
.article__table tr:last-child td{border-bottom:0;}
.article__aside{margin:0 0 22px;padding:18px 22px;background:var(--paper-2);border-left:4px solid var(--accent);border-radius:var(--r);font-size:16px;}
.article__aside p{margin:0 0 10px;}
.article__aside p:last-child{margin:0;}
.article__aside-title{font-family:var(--head);font-weight:700;color:var(--ink);}

/* ============================================================ CONTACTO ===== */
.contact-grid{max-width:var(--maxw);margin:0 auto;padding:clamp(36px,5vw,72px) var(--pad);display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,4vw,52px);align-items:start;}
.form{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:clamp(24px,3vw,36px);box-shadow:var(--shadow-sm);}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{margin-bottom:16px;display:flex;flex-direction:column;}
.field label{font-family:var(--head);font-weight:600;font-size:13px;color:var(--ink);margin-bottom:7px;}
.field label .req{color:var(--accent);}
.field label .opt{font-weight:500;color:var(--muted-2);}
/* El atributo hidden trae display:none de la hoja del navegador, que pierde
   contra cualquier regla del sitio: .field{display:flex} lo anulaba y el campo
   se veía igual. Con !important vuelve a hacer lo que dice su nombre. */
[hidden]{display:none!important;}
.field input,.field textarea,.field select{font:500 15px var(--sans);color:var(--ink);border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;background:#fff;outline:none;transition:border-color .15s,box-shadow .15s;width:100%;}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(140,82,255,.12);}
.field textarea{resize:vertical;min-height:120px;}
.form__note{font-size:12.5px;color:var(--muted-2);margin-top:6px;}
.info-card{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:clamp(24px,3vw,34px);}
.info-card__row{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1);}
.info-card__row:last-of-type{border-bottom:0;}
.info-card__ic{width:40px;height:40px;border-radius:10px;background:rgba(140,82,255,.16);display:flex;align-items:center;justify-content:center;flex:none;color:#b79cff;}
.info-card__k{font-family:var(--head);font-weight:600;font-size:13px;color:#9fb2c2;}
.info-card__v{font-size:15px;color:#fff;text-decoration:none;}
.info-card__v:hover{color:var(--accent);}
.map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);margin-top:20px;aspect-ratio:16/10;background:var(--paper-2);}
.map iframe{width:100%;height:100%;border:0;display:block;}
.form-success{background:rgba(140,82,255,.1);border:1px solid var(--accent);color:var(--accent-ink);border-radius:12px;padding:16px;font-weight:600;font-size:14px;margin-bottom:18px;}
.form-error{background:rgba(200,30,60,.08);border:1px solid #c81e3c;color:#a3162f;border-radius:12px;padding:16px;font-weight:600;font-size:14px;margin-bottom:18px;}
/* Honeypot: fuera de pantalla, no display:none — los bots ignoran los ocultos. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ============================================================ RESPONSIVE ===== */
@media (max-width:980px){
  .footer__inner{grid-template-columns:1fr 1fr;}
  .ficha__top{grid-template-columns:1fr;}
  .ficha__media{position:static;max-width:440px;} .ficha__gal{position:static;max-width:440px;}
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;}
  .hero__figure{order:-1;}
  .cat-layout{grid-template-columns:1fr;}
  .filters{position:fixed;inset:0;z-index:85;background:#fff;padding:24px 24px 40px;overflow-y:auto;display:none;}
  .filters.is-open{display:block;}
  .mobile-filter-btn{display:inline-flex;}
  .filters__close{display:inline-flex;}
  .filters__apply{display:flex;margin-top:22px;position:sticky;bottom:0;}
}
@media (max-width:860px){
  .nav,.header__cta{display:none;}
  .hamburger{display:flex;}
}
@media (min-width:861px){.drawer{display:none;}}
@media (max-width:680px){
  .footer__inner{grid-template-columns:1fr;gap:30px;}
  .form__row{grid-template-columns:1fr;}
  .topbar__muted{display:none;}
  .topbar__inner{justify-content:center;}
}
@media (max-width:560px){
  .topbar__inner{justify-content:center;text-align:center;}
  .kpis{grid-template-columns:1fr 1fr;}
  .kpi{padding:18px;border-right:0;border-bottom:0;}
  .kpi:nth-child(odd){border-right:1px solid var(--line);}
  .kpi:nth-child(1),.kpi:nth-child(2){border-bottom:1px solid var(--line);}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
  .pcard__body{padding:13px;}
  .pcard__name{font-size:14px;}
  .pcard__sku{margin-bottom:12px;}
  .pcard__cta{font-size:12.5px;padding:9px;}
}
@media (max-width:460px){
  .hero__actions,.ctaband__actions{flex-direction:column;align-items:stretch;}
  .hero__actions .btn,.ctaband__actions .btn{width:100%;justify-content:center;}
  .fab{width:52px;height:52px;bottom:18px;right:18px;}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;}}

/* ============================================================ FAQ ===== */
.faq{max-width:820px;margin:0 auto;}
/* El FAQ usa <details>/<summary>: el acordeón es del navegador, no hay JS que
   lo arme. Así las 8 preguntas están en el HTML servido — que es lo que leen
   el rastreador y el FAQPage schema — y funcionan aunque el JS falle.
   El resto del sitio (mega-menú) sigue usando .acc con botones y .is-open. */
.faq .acc{border-bottom:1px solid var(--line);}
.faq .acc__btn{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--head);font-weight:600;color:var(--ink);cursor:pointer;
  font-size:16.5px;padding:22px 0;gap:20px;line-height:1.35;
  list-style:none;   /* fuera el triángulo por defecto */
}
.faq .acc__btn::-webkit-details-marker{display:none;}
/* El signo se dibuja en CSS: antes era un <span> que el JS reescribía. */
.faq .acc__btn::after{content:'+';color:var(--accent);font-size:22px;flex:none;}
.faq .acc[open] .acc__btn::after{content:'–';}
.faq .acc__panel{display:block;padding:0 0 24px;}
.faq .acc__panel p{font-size:15px;line-height:1.7;color:var(--muted);margin:0 0 12px;max-width:74ch;}
.faq .acc__panel p:last-child{margin-bottom:0;}
.faq .acc__panel a{color:var(--accent-ink);font-weight:600;text-decoration:none;}
.faq .acc__panel a:hover{text-decoration:underline;}

/* ============================================================ SERVICIOS ===== */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;}
.step{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:26px;}
.step__n{font-family:var(--head);font-weight:700;font-size:15px;color:#fff;background:var(--accent);width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.step__t{font-family:var(--head);font-weight:600;font-size:17px;letter-spacing:-.02em;color:var(--ink);margin-bottom:8px;}
.step__d{font-size:14px;color:var(--muted);line-height:1.6;}

/* ============================================================ LEGAL ===== */
.legal .article__body h2{font-size:22px;margin:32px 0 12px;}
.legal .article__body h3{font-size:18px;}
.article__body a{color:var(--accent-ink);font-weight:600;text-decoration:none;}
.article__body a:hover{text-decoration:underline;}
.legal__updated{font-family:var(--mono);font-size:12.5px;color:var(--muted-2);margin:2px 0 0;}

/* ============================================================ LANDINGS (campañas) ===== */
/* Páginas de publicidad/captación: hero oscuro con formulario de lead al lado. */
.lp-hero{position:relative;overflow:hidden;background:var(--ink);color:#fff;}
.lp-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 90% at 80% 0,rgba(140,82,255,.24),transparent 62%),radial-gradient(45% 80% at 0 100%,rgba(6,106,171,.14),transparent 60%);pointer-events:none;}
/* En desktop la copia ocupa la columna izquierda y el formulario la derecha.
   En móvil el formulario sube justo bajo el titular (tráfico pagado: el form
   tiene que verse sin scrollear media página). */
.lp-hero__inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(26px,3.4vw,48px) var(--pad) clamp(40px,5vw,72px);display:grid;grid-template-columns:1.08fr .92fr;grid-template-areas:"head form" "more form";gap:0 clamp(28px,4vw,54px);align-items:start;}
/* Las tres áreas existen solo en la grilla de .lp-hero__inner, así que van
   acotadas a ella. Sueltas, .lp-card se lleva el `grid-area:form` a cualquier
   otra grilla donde se use —el formulario de la página de categoría— y el
   navegador le crea una fila y una columna implícitas: la tarjeta se va abajo
   a la derecha y la columna de texto se queda en un palmo. */
.lp-hero__inner>.lp-head{grid-area:head;}
.lp-hero__inner>.lp-more{grid-area:more;}
.lp-hero__inner>.lp-card{grid-area:form;}
.lp-hero .breadcrumb,.lp-hero .breadcrumb a,.lp-hero .breadcrumb span{color:#9fb2c2;}
.lp-hero .breadcrumb b{color:#fff;}
.lp-hero .eyebrow{color:var(--accent);margin-top:16px;}
.lp-title{font-family:var(--head);font-weight:600;font-size:clamp(30px,4.6vw,52px);letter-spacing:-.03em;line-height:1.04;margin:0 0 16px;max-width:17ch;}
.lp-lead{font-size:clamp(15px,1.6vw,18px);line-height:1.6;color:#aebccb;margin:0 0 26px;max-width:560px;}
.lp-bullets{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:11px;}
.lp-bullets li{position:relative;padding-left:28px;font-size:15px;line-height:1.5;color:#d7e0e8;}
.lp-bullets li::before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(140,82,255,.2);}
.lp-bullets b{color:#fff;font-weight:600;}
.lp-chips{display:flex;flex-wrap:wrap;gap:9px;}
.lp-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);border-radius:999px;padding:7px 13px;font-family:var(--head);font-weight:600;font-size:12.5px;color:#e4ebf1;letter-spacing:-.01em;}
.lp-chip svg{width:15px;height:15px;color:var(--accent);flex:none;}

/* tarjeta de formulario */
.lp-card{background:#fff;color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:clamp(22px,2.6vw,30px);box-shadow:var(--shadow-lg);}
.lp-card__t{font-family:var(--head);font-weight:600;font-size:21px;letter-spacing:-.02em;margin:0 0 6px;}
.lp-card__d{font-size:13.5px;color:var(--muted);margin:0 0 20px;}
.lp-card .field{margin-bottom:13px;}
.lp-card .field textarea{min-height:88px;}
.lp-card__actions{display:grid;gap:9px;margin-top:4px;}
.lp-card__wa{background:#25D366;color:#fff;border-color:#25D366;box-shadow:0 8px 22px rgba(37,211,102,.28);}
.lp-card__wa:hover{background:#1fb857;border-color:#1fb857;color:#fff;transform:translateY(-2px);}
.lp-card__alt{font-size:13px;color:var(--muted);text-align:center;margin:2px 0 0;}
.lp-card__alt a{color:var(--accent-ink);font-weight:600;text-decoration:none;}
.lp-card__alt a:hover{text-decoration:underline;}

/* bajada de sección y lista de características técnicas */
.lp-sub{font-size:clamp(15px,1.5vw,17px);line-height:1.6;color:var(--muted);margin:-22px 0 34px;max-width:72ch;}
.lp-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:15px 40px;list-style:none;margin:0;padding:0;}
.lp-specs li{position:relative;padding-left:28px;font-size:14.5px;line-height:1.6;color:var(--muted);}
.lp-specs li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:3px;background:var(--accent);}
.lp-specs b{color:var(--ink);font-weight:600;}
.lp-specs__note{font-size:13px;color:var(--muted-2);margin:26px 0 0;}
/* ítem destacado dentro de una lista (FMH-500II: la pantalla LCD) */
.lp-specs .lp-hl{padding:14px 16px 14px 40px;border:1px solid rgba(140,82,255,.35);border-radius:var(--r);background:rgba(140,82,255,.07);}
.lp-specs .lp-hl::before{left:16px;top:1.35em;}
/* pasos numerados reutilizando .lp-specs */
.lp-pasos{counter-reset:paso;margin-bottom:26px;}
.lp-pasos li{counter-increment:paso;padding-left:44px;}
.lp-pasos li::before{content:counter(paso);top:0;width:30px;height:30px;border-radius:9px;background:rgba(140,82,255,.12);color:var(--accent);font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center;}
/* diagrama alto y angosto: sin recorte ni caja de 4/5 */
.lp-shot--diag{aspect-ratio:auto;padding:22px;max-width:360px;justify-self:center;}
.lp-shot--diag img{height:auto;}
/* texto corrido de un bloque informativo (homogeneizadores): párrafos, no lista */
.lp-prose{max-width:72ch;}
.lp-prose p{font-size:clamp(15px,1.5vw,17px);line-height:1.65;color:var(--muted);margin:0 0 16px;}
.lp-prose b,.value__d b{color:var(--ink);font-weight:600;}
.value__d p{margin:0 0 10px;}
.value__d ul{margin:0 0 14px;padding-left:18px;}
.value__d li{margin:3px 0;}
/* procesadores de tejidos: el flujo histológico en una fila (reemplaza al video),
   las cifras de cada equipo destacado y dos .lp-feat en la misma sección */
.lp-flow{display:flex;flex-wrap:wrap;gap:10px 0;list-style:none;margin:0 0 34px;padding:0;}
.lp-flow li{display:flex;align-items:center;font-family:var(--head);font-weight:600;font-size:14px;color:var(--muted);}
.lp-flow li+li::before{content:"→";margin:0 10px;color:var(--muted-2);}
.lp-flow span{padding:9px 16px;border:1px solid var(--line-2);border-radius:999px;background:#fff;}
.lp-flow__on span{background:var(--accent);border-color:var(--accent);color:#fff;}
.lp-datos{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:22px 0 0;padding:0;}
.lp-datos li{padding:9px 14px;border:1px solid rgba(140,82,255,.35);border-radius:var(--r);background:rgba(140,82,255,.07);font-family:var(--head);font-weight:600;font-size:14px;color:var(--ink);}
.lp-modelo__t{font-family:var(--head);font-weight:600;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;color:var(--ink);margin:0 0 18px;}
.lp-modelo__t span{display:block;font-size:15px;font-weight:500;letter-spacing:0;color:var(--muted);margin-top:6px;}
.lp-feat+.lp-feat{margin-top:clamp(40px,6vw,72px);}
.lp-prose+.lp-specs{margin-top:24px;}
.steps+.lp-prose{margin-top:30px;}
/* centros de inclusión: fotos apaisadas (2:1) que en la caja 4/5 quedaban
   perdidas, cinco pasos en una fila, un flujo entre párrafos y un h3 tras lista */
.lp-shot.lp-shot--ancho{aspect-ratio:3/2;padding:18px;}
.steps--5{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
.lp-flow--medio{margin:26px 0;}
.lp-modelo__t--sub{margin-top:44px;}
/* carrusel de equipos destacados: mismo scroll-snap que .spot__track del home,
   en versión clara. landing.js solo sincroniza las pestañas. */
.lp-tabs{display:inline-flex;gap:6px;padding:5px;border-radius:999px;background:#fff;border:1px solid var(--line-2);margin-bottom:30px;}
.lp-tab{font-family:var(--head);font-weight:600;font-size:14px;color:var(--muted);background:none;border:0;border-radius:999px;padding:9px 16px;cursor:pointer;transition:background .15s,color .15s;}
.lp-tab:hover{color:var(--ink);}
.lp-tab[aria-pressed="true"]{background:var(--accent);color:#fff;}
.lp-carrusel{display:flex;gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;padding-bottom:14px;}
.lp-carrusel::-webkit-scrollbar{display:none;}
.lp-carrusel:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-lg);}
.lp-carrusel>.lp-feat{flex:0 0 100%;min-width:0;margin-top:0;scroll-snap-align:start;}
.lp-models{margin-top:32px;}
/* 3 por fila: con 6 y 5 tarjetas, el auto-fit de .values dejaba una sola abajo */
.values--3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}

/* ficha técnica: lista a la izquierda, mosaico de fotos a la derecha */
.lp-feat{display:grid;grid-template-columns:1fr minmax(0,500px);gap:clamp(28px,4vw,52px);align-items:start;}
/* En la ficha técnica las dos columnas son largas y alinear arriba es lo
   correcto. En el formulario de la categoría el texto mide la mitad que la
   tarjeta y dejaba un hueco del alto de media pantalla debajo: ahí se centra.
   En móvil, con una sola columna, no hace nada. */
.lp-feat--centro{align-items:center;}
.lp-specs--col{grid-template-columns:1fr;}
/* dos columnas fijas: con auto-fit, al ensanchar la columna entraban tres por
   fila y el 2×2 se desarmaba en 3+1. */
/* centrado en vertical: las categorías con solo dos fotos dejaban la columna
   colgando del borde superior junto a una lista larga. */
.lp-shots{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-self:center;}
.lp-shot{display:flex;align-items:center;justify-content:center;aspect-ratio:4/5;overflow:hidden;background:#fff;border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-sm);}
/* contain y no cover: los renders de producto vienen sobre fondo blanco y
   recortarlos parte la campana o la cabina por la mitad. */
.lp-shot img{width:100%;height:100%;object-fit:contain;}
/* las fotos de ambiente sí van recortadas: si no, dejan franjas vacías */
.lp-shot--foto img{object-fit:cover;}
/* mosaico desfasado (4 fotos): la columna derecha baja y cada tarjeta cambia
   de tamaño, para que no se lea como una grilla de cuatro cuadros iguales. */
.lp-shots--desfasado{align-items:start;align-self:start;gap:16px 14px;}
.lp-shots--desfasado .lp-shot:nth-child(2n){margin-top:34px;}
.lp-shots--desfasado .lp-shot:nth-child(2){width:90%;}
.lp-shots--desfasado .lp-shot:nth-child(3){width:92%;}
.lp-shots--desfasado .lp-shot:nth-child(4){aspect-ratio:3/4;justify-self:end;}

/* par desfasado: dos fotos apiladas, la de abajo más grande y corrida a la
   derecha. Es para las categorías con solo dos imágenes, donde una fila de
   dos tarjetas iguales se veía como un 2x2 al que le faltan piezas.
   Las alturas van en % y la columna se estira: así el bloque de fotos mide
   exactamente lo mismo que la lista de al lado y no queda un hueco abajo.
   Por eso se anula el aspect-ratio: aquí manda la altura, no la proporción. */
/* min-height:0 en los dos niveles: sin eso, el tamaño mínimo automático de
   flex hace que la foto imponga su alto natural y la columna vuelva a
   pasarse de largo. */
.lp-shots--par{display:flex;flex-direction:column;align-self:stretch;width:100%;height:100%;min-height:0;gap:0;}
.lp-shots--par .lp-shot{position:relative;aspect-ratio:auto;flex:0 0 45%;width:62%;min-height:0;}
/* la foto se saca del flujo para que no aporte su alto natural al cálculo */
.lp-shots--par .lp-shot img{position:absolute;inset:0;}
.lp-shots--par .lp-shot+.lp-shot{flex-basis:57%;width:80%;margin-left:auto;margin-top:-2%;}
@media (max-width:860px){
  /* en una columna ya no hay nada al lado con qué igualar el alto, y las
     alturas en % se quedaban sin referencia: vuelve a mandar la proporción */
  .lp-shots--par{height:auto;}
  .lp-shots--par .lp-shot{flex-basis:auto;aspect-ratio:4/5;}
  .lp-feat{grid-template-columns:1fr;}
  .lp-shots{max-width:420px;margin-inline:auto;}
}

/* video de la landing — los Shorts son verticales (9:16), así que el
   reproductor va en una columna angosta y el texto ocupa el resto */
.lp-video{display:grid;grid-template-columns:1fr minmax(0,390px);gap:clamp(26px,4vw,56px);align-items:center;}
/* 4:5 y no 9:16: es la proporción de la miniatura que entrega YouTube, y
   recortarla a vertical completo se comía el título rotulado en el video. */
/* width:100% explícito: con aspect-ratio, `justify-items:normal` deja de
   comportarse como stretch y el marco colapsaba a 2 px (solo los bordes). */
.lp-video__frame{position:relative;margin:0;width:100%;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow-lg);background:var(--ink);}
/* Video horizontal (16:9): el 4/5 de arriba recorta los videos de producto.
   Al ser horizontal necesita más ancho que los 390 px de la columna vertical;
   el :has() evita tener que marcar también la sección en el HTML. */
.lp-video__frame--wide{aspect-ratio:16/9;}
.lp-video:has(.lp-video__frame--wide){grid-template-columns:minmax(0,1fr) minmax(0,660px);}
.lp-video .eyebrow{margin-bottom:10px;}
.lp-video .lp-sub{margin:14px 0 24px;}
@media (max-width:860px){
  /* el :has() de arriba pesa más que un .lp-video suelto, así que en móvil hay
     que repetirlo: si no, el video horizontal se queda en dos columnas y el
     texto cae a una tira de una palabra por línea. */
  .lp-video,.lp-video:has(.lp-video__frame--wide){grid-template-columns:1fr;}
  .lp-video__frame{max-width:360px;margin-inline:auto;}
  .lp-video__frame--wide{max-width:none;}
}

/* franja de confianza */
.lp-strip{background:var(--paper-2);border-bottom:1px solid var(--line);}
.lp-strip__inner{max-width:var(--maxw);margin:0 auto;padding:26px var(--pad);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;}
.lp-stat__n{font-family:var(--head);font-weight:700;font-size:clamp(24px,3vw,32px);color:var(--ink);letter-spacing:-.03em;line-height:1;}
.lp-stat__l{font-size:13px;color:var(--muted);margin-top:6px;}

@media (max-width:980px){
  .lp-hero__inner{grid-template-columns:1fr;grid-template-areas:"head" "form" "more";}
  .lp-title{max-width:none;}
  .lp-more{margin-top:28px;}
}

/* ============================================================
   MARQUESINA DE MARCAS (home)
   Sin JS: dos tiras idénticas en fila y un translateX del -50%.
   Fondo blanco a propósito — la mitad de los logos son JPEG con
   fondo blanco y sobre --paper-2 se verían como cajas.
   ============================================================ */
.marcas{background:var(--paper);border-block:1px solid var(--line);padding:30px 0;}
.marcas__eyebrow{display:block;text-align:center;margin-bottom:22px;}
/* el degradado de los bordes evita que los logos aparezcan y desaparezcan de golpe */
.marcas__viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent);
}
.marcas__track{display:flex;width:max-content;animation:marcas-scroll 50s linear infinite;}
.marcas:hover .marcas__track,
.marcas:focus-within .marcas__track{animation-play-state:paused;}
.marcas__set{display:flex;align-items:center;gap:52px;margin:0;padding:0 26px;list-style:none;}
/* Todos ocupan la misma caja; el object-fit los mete dentro sin deformarlos. */
.marcas__set img{
  width:150px;height:58px;object-fit:contain;display:block;
  transform:scale(var(--s,1));
  filter:grayscale(1);opacity:.62;transition:filter .25s,opacity .25s;
}
.marcas__set img:hover{filter:none;opacity:1;}
/* Compensa el aire dentro de cada archivo: los cuadrados de 447x447 traen
   márgenes anchos y el logo queda diminuto; los apaisados llegan al borde y
   se ven enormes. El selector va por nombre de archivo para no tener que
   etiquetar los 28 <li> (la tira está duplicada). */
.marcas__set img[src*="molarray"]{--s:1.45;}
.marcas__set img[src*="diagnostic"]{--s:1.35;}
.marcas__set img[src*="kfbio"],
.marcas__set img[src*="lanphan"],
.marcas__set img[src*="mether"]{--s:1.3;}
.marcas__set img[src*="meling"]{--s:1.22;}
.marcas__set img[src*="maxlab"]{--s:1.18;}
.marcas__set img[src*="monchilab"]{--s:1.12;}
.marcas__set img[src*="zeedo"],
.marcas__set img[src*="tianlong"]{--s:1.05;}
.marcas__set img[src*="yeson"]{--s:.92;}
.marcas__set img[src*="scytek"]{--s:.86;}
.marcas__set img[src*="haimo"]{--s:.8;}
@keyframes marcas-scroll{to{transform:translateX(-50%);}}
@media (max-width:720px){
  .marcas__set{gap:36px;padding:0 18px;}
  .marcas__set img{width:112px;height:46px;}
}
/* Sin animación: la tira queda quieta y se arrastra a mano. */
@media (prefers-reduced-motion:reduce){
  .marcas__viewport{overflow-x:auto;}
  .marcas__track{animation:none;}
}

/* footer legal bar */
.footer__bar-links{display:flex;flex-wrap:wrap;gap:16px;}
.footer__bar-links a{text-decoration:none;color:#9fb2c2;transition:color .15s;}
.footer__bar-links a:hover{color:#fff;}

/* ============================================================ PRODUCTO DESTACADO (home) ===== */
/* Carrusel de 3 diapositivas con scroll-snap: se desliza sin JS; home.js solo
   mueve las pestañas y flechas. Fondo de marca como .lp-hero; los equipos van
   sobre tarjeta blanca y sin filtros para no alterar su color real. La altura
   la fija la diapositiva más alta, así que las imágenes llevan tope de alto. */
.spot{position:relative;overflow:hidden;background:var(--ink);color:#fff;}
.spot::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 90% at 100% 0,rgba(140,82,255,.26),transparent 62%),radial-gradient(45% 80% at 0 100%,rgba(6,106,171,.16),transparent 60%);pointer-events:none;}
.spot__inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(40px,5vw,64px) var(--pad);}
.spot .eyebrow{color:var(--accent);}
.spot__top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:clamp(20px,3vw,32px);}
.spot__title{font-weight:600;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.03em;line-height:1.08;margin:0;}
.spot__title span{display:block;font-size:.55em;letter-spacing:-.02em;color:#c9b3ff;margin-top:6px;}
.spot__sub{margin:10px 0 0;max-width:52ch;font-size:15px;color:rgba(255,255,255,.72);}
.spot__tabs{display:flex;gap:6px;padding:5px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);}
.spot__tab{font-family:var(--head);font-weight:600;font-size:14px;color:#aebccb;background:none;border:0;border-radius:999px;padding:9px 16px;cursor:pointer;transition:background .15s,color .15s;}
.spot__tab:hover{color:#fff;}
.spot__tab[aria-selected="true"]{background:var(--accent);color:#fff;}

.spot__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;}
.spot__track::-webkit-scrollbar{display:none;}
.spot__track:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-lg);}
.spot__slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(24px,4.5vw,64px);align-items:center;}

.spot__fig{margin:0;position:relative;justify-self:center;max-width:100%;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:clamp(16px,2vw,24px);}
.spot__fig img{display:block;width:auto;max-width:100%;height:auto;max-height:400px;margin:0 auto;}
.spot__fig:has(.spot__size){padding-bottom:58px;}
.spot__fig--diag img{max-height:380px;}
.spot__size{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);white-space:nowrap;font-size:13px;color:var(--muted);background:var(--paper-2);border:1px solid var(--line-2);border-radius:999px;padding:6px 14px;}
.spot__size b{color:var(--ink);font-weight:600;}

.spot__tag{font-family:var(--head);font-weight:600;font-size:clamp(17px,1.8vw,21px);letter-spacing:-.02em;margin:0 0 10px;}
.spot__h3{font-family:var(--head);font-weight:600;font-size:clamp(21px,2.4vw,28px);letter-spacing:-.02em;line-height:1.15;margin:0 0 10px;color:#fff;}
.spot__lead{font-size:clamp(15px,1.4vw,16px);line-height:1.6;color:#aebccb;margin:0 0 20px;max-width:58ch;}
.spot__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px 24px;}
.spot__list li{display:flex;gap:12px;align-items:flex-start;}
.spot__list svg{flex:none;width:36px;height:36px;padding:8px;border-radius:10px;background:rgba(140,82,255,.16);color:#c9b3ff;}
.spot__list b{display:block;font-family:var(--head);font-weight:600;font-size:15px;color:#fff;letter-spacing:-.01em;}
.spot__list span{font-size:13.5px;line-height:1.45;color:#aebccb;}

.spot__det,.spot__steps{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.spot__det li{font-size:14.5px;line-height:1.5;color:#aebccb;padding-left:18px;position:relative;}
.spot__det li::before{content:"";position:absolute;left:2px;top:.6em;width:7px;height:7px;border-radius:2px;background:var(--accent);}
.spot__det b,.spot__steps b{display:block;font-family:var(--head);font-weight:600;font-size:15px;color:#fff;letter-spacing:-.01em;}
.spot__det .spot__hl{padding:13px 16px 13px 34px;border:1px solid rgba(140,82,255,.45);border-radius:var(--r);background:rgba(140,82,255,.14);margin-bottom:5px;}
.spot__det .spot__hl::before{left:16px;top:1.4em;}
.spot__steps{counter-reset:paso;gap:14px;margin-bottom:18px;}
.spot__steps li{counter-increment:paso;position:relative;padding-left:48px;font-size:14.5px;line-height:1.5;color:#aebccb;}
.spot__steps li::before{content:counter(paso);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:10px;background:rgba(140,82,255,.16);color:#c9b3ff;font-family:var(--head);font-weight:600;display:flex;align-items:center;justify-content:center;}
.spot__note{font-size:13px;line-height:1.5;color:#8fa2b4;margin:0;max-width:52ch;}

.spot__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:clamp(24px,3vw,36px);padding-top:clamp(20px,2.5vw,28px);border-top:1px solid rgba(255,255,255,.1);}
.spot__link{font-family:var(--head);font-weight:600;font-size:15px;color:#fff;text-decoration:none;}
.spot__link:hover{color:var(--accent);}
.spot__arrows{display:flex;gap:8px;margin-left:auto;}
.spot__arrow{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:none;color:#fff;font-size:18px;cursor:pointer;transition:background .15s,border-color .15s;}
.spot__arrow:hover{background:rgba(140,82,255,.2);border-color:var(--accent);}
@media (max-width:860px){
  .spot__slide{grid-template-columns:1fr;align-items:start;}
  .spot__fig img{max-height:220px;}
  .spot__list{grid-template-columns:1fr 1fr;gap:12px 14px;}
  .spot__list li{flex-direction:column;gap:6px;}
  .spot__fig--diag img{max-height:220px;}
  .spot__tabs{width:100%;justify-content:space-between;}
  .spot__tab{flex:1;padding:9px 8px;font-size:13px;}
}
@media (prefers-reduced-motion:reduce){.spot__track{scroll-behavior:auto;}}