/* =============================================================================
   VR QUALITY SERVICES & PRODUCTS INTERNATIONAL S.A.S.
   Sistema de diseño — hoja de estilos principal
   -----------------------------------------------------------------------------
   01. Tokens          05. Navegación        09. Formularios
   02. Reset & base    06. Secciones         10. Utilidades
   03. Tipografía      07. Componentes       11. Movimiento
   04. Layout          08. Footer            12. Responsive
   ========================================================================== */

/* ---------------------------------------------------------------- 01. TOKENS */
:root{
  /* — Tinta (azul profundo institucional) — */
  --ink-950:#04121E;
  --ink-900:#071C2E;
  --ink-850:#0A2338;
  --ink-800:#0E2C45;
  --ink-700:#14405F;
  --ink-600:#1D5578;
  --ink-500:#2C6C93;

  /* — Turquesa Caribe (acento primario) — */
  --teal-800:#07514B;
  --teal-700:#0A6F66;
  --teal-600:#0C7E74;
  --teal-500:#12A594;
  --teal-400:#2FD3C3;
  --teal-300:#7BE3D4;
  --teal-100:#D6F4EF;
  --teal-050:#EEFAF8;

  /* — Oro (acento secundario, precisión y sello) — */
  --gold-700:#8F6516;
  --gold-600:#B8862B;
  --gold-500:#D3A03A;
  --gold-400:#E6BC63;
  --gold-200:#F2DCAC;
  --gold-100:#F8EED6;

  /* — Papel (neutros cálidos) — */
  --paper-0:#FFFFFF;
  --paper-50:#FCFBF8;
  --paper-100:#F7F5EF;
  --paper-200:#EFEBE1;
  --paper-300:#E2DCCE;
  --paper-400:#CFC7B5;

  /* — Texto — */
  --tx-title:var(--ink-900);
  --tx-body:#3B5470;
  --tx-muted:#566C82;
  --tx-faint:#5D7285;
  --tx-on-dark:#EAF1F6;
  --tx-on-dark-muted:#9FB6C8;
  --tx-on-dark-faint:#6E8AA1;

  /* — Superficies — */
  --surface:var(--paper-50);
  --surface-raised:var(--paper-0);
  --surface-sunken:var(--paper-100);
  --hairline:rgba(7,28,46,.09);
  --hairline-strong:rgba(7,28,46,.16);
  --hairline-dark:rgba(255,255,255,.10);
  --hairline-dark-strong:rgba(255,255,255,.18);

  /* — Radios (squircle exagerado) — */
  --r-xs:.5rem;
  --r-sm:.75rem;
  --r-md:1.125rem;
  --r-lg:1.5rem;
  --r-xl:2rem;
  --r-2xl:2.5rem;
  --r-pill:999px;

  /* — Sombras: ambientales, difusas, teñidas de tinta — */
  --sh-xs:0 1px 2px rgba(7,28,46,.04), 0 1px 1px rgba(7,28,46,.03);
  --sh-sm:0 2px 6px -1px rgba(7,28,46,.06), 0 1px 3px rgba(7,28,46,.04);
  --sh-md:0 12px 28px -12px rgba(7,28,46,.14), 0 4px 10px -4px rgba(7,28,46,.07);
  --sh-lg:0 28px 60px -24px rgba(7,28,46,.20), 0 10px 24px -12px rgba(7,28,46,.09);
  --sh-xl:0 48px 96px -32px rgba(7,28,46,.26), 0 18px 40px -20px rgba(7,28,46,.12);
  --sh-teal:0 24px 56px -20px rgba(14,140,128,.42);
  --sh-inset-top:inset 0 1px 0 rgba(255,255,255,.7);
  --sh-inset-top-dark:inset 0 1px 0 rgba(255,255,255,.09);

  /* — Tipografía — */
  --f-display:"Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-sans:"Plus Jakarta Sans", "SF Pro Text", "Segoe UI Variable", system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --fs-eyebrow:.6875rem;
  --fs-micro:.75rem;
  --fs-xs:.8125rem;
  --fs-sm:.9375rem;
  --fs-base:1.0625rem;
  --fs-lg:1.1875rem;
  --fs-xl:1.375rem;
  --fs-2xl:1.75rem;
  --fs-3xl:2.25rem;
  --fs-4xl:3rem;
  --fs-5xl:3.75rem;
  --fs-6xl:4.25rem;

  /* — Ritmo espacial (macro-whitespace) — */
  --sp-section:clamp(5.5rem, 9vw, 10rem);
  --sp-section-sm:clamp(4rem, 6vw, 6.5rem);
  --gutter:clamp(1.25rem, 4vw, 3rem);
  --maxw:78rem;
  --maxw-narrow:52rem;
  --maxw-prose:40rem;

  /* — Movimiento — */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-spring:cubic-bezier(.32,.72,0,1);
  --e-soft:cubic-bezier(.4,.14,.3,1);
  --e-back:cubic-bezier(.34,1.4,.64,1);
  --t-fast:220ms;
  --t-base:420ms;
  --t-slow:760ms;
  --t-xslow:1100ms;

  /* — Capas — */
  --z-grain:1;
  --z-sticky:60;
  --z-nav:70;
  --z-float:80;
  --z-overlay:90;
  --z-modal:100;
}

/* ------------------------------------------------------- 02. RESET Y BASE */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:6.5rem;
}
body{
  font-family:var(--f-sans);
  font-size:var(--fs-base);
  font-weight:400;
  line-height:1.65;
  color:var(--tx-body);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  overflow-x:clip;
}
img,svg,video,canvas{display:block;max-width:100%;}
img{height:auto;}
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;padding:0;}
:where(h1,h2,h3,h4,h5,h6){font-weight:inherit;font-size:inherit;}
hr{border:0;border-top:1px solid var(--hairline);}

::selection{background:var(--teal-300);color:var(--ink-950);}

:focus-visible{
  outline:2px solid var(--teal-500);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
.dark :focus-visible,
[data-surface="dark"] :focus-visible{outline-color:var(--teal-400);}

.skip-link{
  position:absolute;left:1rem;top:-6rem;z-index:var(--z-modal);
  background:var(--ink-900);color:#fff;
  padding:.85rem 1.4rem;border-radius:var(--r-pill);
  font-size:var(--fs-sm);font-weight:600;
  box-shadow:var(--sh-lg);
  transition:top var(--t-base) var(--e-out);
}
.skip-link:focus{top:1rem;}

/* Grano de película: fijo, sin eventos, capa única */
.grain{
  position:fixed;inset:0;z-index:var(--z-grain);
  pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
}

/* ------------------------------------------------------- 03. TIPOGRAFÍA */
.display,
h1.display,h2.display,h3.display{
  font-family:var(--f-display);
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 120;
  font-weight:500;
  letter-spacing:-.022em;
  line-height:1.06;
  color:var(--tx-title);
  text-wrap:balance;
}
.d-1{font-size:clamp(2rem, 6.1vw, var(--fs-6xl));}
.d-2{font-size:clamp(1.75rem, 4.6vw, var(--fs-5xl));}
.d-3{font-size:clamp(1.5rem, 3.4vw, var(--fs-4xl));}
.d-4{font-size:clamp(1.25rem, 2.4vw, var(--fs-3xl));line-height:1.15;}

.h-sans{
  font-family:var(--f-sans);
  font-weight:650;
  letter-spacing:-.018em;
  line-height:1.2;
  color:var(--tx-title);
  text-wrap:balance;
}
.h-1{font-size:clamp(1.75rem, 3vw, var(--fs-3xl));}
.h-2{font-size:clamp(1.375rem, 2vw, var(--fs-2xl));}
.h-3{font-size:var(--fs-xl);}
.h-4{font-size:var(--fs-lg);}
.h-5{font-size:var(--fs-base);font-weight:680;}

.lede{
  font-size:clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height:1.62;
  color:var(--tx-body);
  font-weight:380;
  text-wrap:pretty;
  max-width:44ch;
}
.lede-wide{max-width:60ch;}
.body-sm{font-size:var(--fs-sm);line-height:1.68;}
.body-xs{font-size:var(--fs-xs);line-height:1.6;}
.muted{color:var(--tx-muted);}
.faint{color:var(--tx-faint);}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  justify-self:start;align-self:start;max-width:100%;
  font-family:var(--f-mono);
  font-size:var(--fs-eyebrow);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--teal-700);
  padding:.4rem .85rem .4rem .7rem;
  border-radius:var(--r-pill);
  background:var(--teal-050);
  border:1px solid rgba(14,140,128,.16);
  text-align:left;
}
.eyebrow::before{
  content:"";width:.375rem;height:.375rem;border-radius:50%;
  background:var(--teal-500);flex:none;
  box-shadow:0 0 0 3px rgba(18,165,148,.16);
}
.eyebrow--gold{color:var(--gold-700);background:var(--gold-100);border-color:rgba(184,134,43,.2);}
.eyebrow--gold::before{background:var(--gold-500);box-shadow:0 0 0 3px rgba(211,160,58,.18);}
.eyebrow--dark{
  color:var(--teal-300);
  background:rgba(47,211,195,.08);
  border-color:rgba(47,211,195,.2);
}
.eyebrow--dark::before{background:var(--teal-400);box-shadow:0 0 0 3px rgba(47,211,195,.14);}

.mono{font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.02em;}
.tabular{font-variant-numeric:tabular-nums;}

/* Superficies oscuras: inversión tipográfica */
[data-surface="dark"]{color:var(--tx-on-dark-muted);}
[data-surface="dark"] .display,
[data-surface="dark"] .h-sans{color:#fff;}
[data-surface="dark"] .lede{color:var(--tx-on-dark);}
[data-surface="dark"] .muted{color:var(--tx-on-dark-muted);}
[data-surface="dark"] .faint{color:var(--tx-on-dark-faint);}

/* ---------------------------------------------------------- 04. LAYOUT */
.shell{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.shell--narrow{max-width:var(--maxw-narrow);}
.shell--wide{max-width:88rem;}

.section{
  position:relative;
  padding-block:var(--sp-section);
  isolation:isolate;
}
.section--tight{padding-block:var(--sp-section-sm);}
.section--flush-top{padding-top:0;}

.section-head{
  display:grid;
  gap:1.5rem;grid-template-columns:minmax(0,1fr);
  margin-bottom:clamp(2.75rem,5vw,4.5rem);
  max-width:52rem;
}
.section-head--center{margin-inline:auto;text-align:center;justify-items:center;}
.section-head--center .eyebrow{justify-self:center;}
.section-head--split{
  max-width:none;
  grid-template-columns:minmax(0,1fr);
  align-items:end;
  gap:1.75rem;
}
@media (min-width:900px){
  .section-head--split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3rem;}
  .section-head--split .section-head__aside{padding-bottom:.4rem;}
}

.stack{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr);}
.stack-sm{display:grid;gap:.5rem;grid-template-columns:minmax(0,1fr);}
.stack-lg{display:grid;gap:1.75rem;grid-template-columns:minmax(0,1fr);}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;}
.row-lg{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;}

.grid{display:grid;gap:clamp(1rem,1.8vw,1.5rem);grid-template-columns:minmax(0,1fr);}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr));}

/* --------------------------------------------------- 05. NAVEGACIÓN */
/* Isla flotante de navegación */
.nav-wrap{
  position:sticky;top:0;z-index:var(--z-nav);
  pointer-events:none;
  padding-top:1.125rem;
  transition:padding-top var(--t-base) var(--e-out);
}
.nav-wrap.is-stuck{padding-top:.625rem;}

.nav{
  pointer-events:auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  width:min(calc(100% - 2 * var(--gutter)), 78rem);
  margin-inline:auto;
  padding:.5rem .5rem .5rem 1.125rem;
  border-radius:var(--r-pill);
  background:rgba(252,251,248,.72);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border:1px solid rgba(7,28,46,.07);
  box-shadow:var(--sh-inset-top), 0 1px 2px rgba(7,28,46,.04);
  transition:box-shadow var(--t-base) var(--e-out),
             background var(--t-base) var(--e-out),
             border-color var(--t-base) var(--e-out),
             transform var(--t-base) var(--e-out);
}
.nav-wrap.is-stuck .nav{
  background:rgba(252,251,248,.86);
  border-color:rgba(7,28,46,.10);
  box-shadow:var(--sh-inset-top), 0 18px 40px -22px rgba(7,28,46,.30), 0 3px 10px -4px rgba(7,28,46,.08);
}

.brand{display:inline-flex;align-items:center;gap:.75rem;flex:none;padding:.25rem 0;}
.brand__mark{
  height:2.8rem;width:auto;flex:none;
  transition:transform var(--t-base) var(--e-back), filter var(--t-base) var(--e-out);
}
.brand:hover .brand__mark{transform:rotate(-3deg) scale(1.05);}
.footer .brand__mark{height:3rem;}
@media (max-width:520px){.brand__mark{height:2.35rem;}}
.brand__text{display:grid;line-height:1.05;}
.brand__name{
  font-family:var(--f-display);
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 40;
  font-weight:600;font-size:1.0625rem;letter-spacing:-.014em;
  color:var(--ink-900);
}
.brand__sub{
  font-family:var(--f-mono);font-size:.5625rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tx-faint);margin-top:.15rem;
}

.nav__links{display:none;align-items:center;gap:.125rem;}
@media (min-width:1080px){.nav__links{display:flex;}}
.nav__link{
  position:relative;
  padding:.5rem .8rem;
  border-radius:var(--r-pill);
  font-size:var(--fs-xs);
  font-weight:530;
  letter-spacing:-.005em;
  color:var(--ink-700);
  white-space:nowrap;
  transition:color var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out);
}
.nav__link:hover{color:var(--ink-900);background:rgba(7,28,46,.045);}
.nav__link.is-active{color:var(--teal-700);}
.nav__link.is-active::after{
  content:"";position:absolute;left:.8rem;right:.8rem;bottom:.22rem;height:1.5px;
  border-radius:2px;background:var(--teal-500);
  transform-origin:center;animation:underline-in var(--t-base) var(--e-out) both;
}
@keyframes underline-in{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}

.nav__actions{display:flex;align-items:center;gap:.5rem;flex:none;}

/* Hamburguesa que se transforma en X */
.burger{
  --burger-color:var(--ink-800);
  position:relative;flex:none;
  width:2.75rem;height:2.75rem;
  border-radius:var(--r-pill);
  border:1px solid var(--hairline);
  background:rgba(255,255,255,.5);
  display:grid;place-items:center;
  transition:background var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.burger:active{transform:scale(.94);}
@media (min-width:1080px){.burger{display:none;}}
.burger__box{position:relative;width:1.125rem;height:.75rem;}
.burger__line{
  position:absolute;left:0;right:0;height:1.5px;border-radius:2px;
  background:var(--burger-color);
  transition:transform var(--t-base) var(--e-spring), opacity 180ms var(--e-out), background var(--t-fast) linear;
}
.burger__line:nth-child(1){top:0;}
.burger__line:nth-child(2){top:50%;transform:translateY(-50%);}
.burger__line:nth-child(3){bottom:0;}
.burger[aria-expanded="true"]{--burger-color:#fff;background:rgba(255,255,255,.08);border-color:var(--hairline-dark-strong);}
.burger[aria-expanded="true"] .burger__line:nth-child(1){transform:translateY(.375rem) rotate(45deg);}
.burger[aria-expanded="true"] .burger__line:nth-child(2){opacity:0;transform:translateY(-50%) scaleX(.4);}
.burger[aria-expanded="true"] .burger__line:nth-child(3){transform:translateY(-.375rem) rotate(-45deg);}

/* Panel de menú a pantalla completa */
.menu{
  position:fixed;inset:0;z-index:var(--z-overlay);
  display:grid;grid-template-rows:auto 1fr auto;
  background:rgba(4,18,30,.86);
  -webkit-backdrop-filter:saturate(160%) blur(28px);
  backdrop-filter:saturate(160%) blur(28px);
  opacity:0;visibility:hidden;
  transition:opacity var(--t-base) var(--e-out), visibility 0s linear var(--t-base);
}
.menu.is-open{opacity:1;visibility:visible;transition-delay:0s;}
.menu__spacer{height:7rem;}
.menu__body{
  grid-template-columns:minmax(0,1fr);
  overflow-y:auto;
  padding:1rem var(--gutter) 2rem;
  display:grid;align-content:start;gap:2.25rem;
  max-width:var(--maxw);margin-inline:auto;width:100%;
}
.menu__group-title{
  font-family:var(--f-mono);font-size:var(--fs-eyebrow);letter-spacing:.2em;
  text-transform:uppercase;color:var(--tx-on-dark-faint);margin-bottom:.75rem;
}
.menu__list{display:grid;gap:.125rem;grid-template-columns:minmax(0,1fr);}
.menu__link{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:var(--f-display);
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 60;
  font-size:clamp(1.5rem,5vw,2.125rem);font-weight:400;letter-spacing:-.02em;
  color:#fff;
  padding:.45rem 0;
  border-bottom:1px solid rgba(255,255,255,.07);
  opacity:0;transform:translateY(1.75rem);
  transition:color var(--t-fast) var(--e-out), padding-left var(--t-base) var(--e-spring);
}
.menu.is-open .menu__link{
  animation:menu-in 620ms var(--e-out) forwards;
  animation-delay:calc(var(--i,0) * 45ms + 90ms);
}
@keyframes menu-in{to{opacity:1;transform:translateY(0);}}
.menu__link:hover{color:var(--teal-300);padding-left:.75rem;}
.menu__link span{font-family:var(--f-mono);font-size:.6875rem;color:var(--tx-on-dark-faint);letter-spacing:.12em;}
.menu__foot{
  padding:1.5rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between;align-items:center;
  max-width:var(--maxw);margin-inline:auto;width:100%;
}
body.is-locked{overflow:hidden;}

/* ------------------------------------------------------ 07. COMPONENTES */

/* --- Botones isla con icono anidado --- */
.btn{
  --btn-bg:var(--ink-900);
  --btn-fg:#fff;
  --btn-ring:transparent;
  --btn-chip:rgba(255,255,255,.13);
  position:relative;
  display:inline-flex;align-items:center;gap:.75rem;
  padding:.6rem .7rem .6rem 1.375rem;
  border-radius:var(--r-pill);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-size:var(--fs-sm);
  font-weight:600;
  letter-spacing:-.008em;
  line-height:1.2;
  white-space:nowrap;
  box-shadow:0 0 0 1px var(--btn-ring), var(--sh-md);
  transition:transform var(--t-base) var(--e-spring),
             box-shadow var(--t-base) var(--e-out),
             background var(--t-base) var(--e-out),
             color var(--t-base) var(--e-out);
  isolation:isolate;
}
.btn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,0) 46%);
  opacity:.85;pointer-events:none;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--btn-ring), var(--sh-lg);}
.btn:active{transform:translateY(0) scale(.985);}
.btn__chip{
  flex:none;
  width:2rem;height:2rem;border-radius:var(--r-pill);
  background:var(--btn-chip);
  display:grid;place-items:center;
  transition:transform var(--t-base) var(--e-spring), background var(--t-base) var(--e-out);
}
.btn__chip svg{width:.9375rem;height:.9375rem;}
.btn:hover .btn__chip{transform:translate(3px,-1px) scale(1.06);}

.btn--primary{
  --btn-bg:linear-gradient(148deg, var(--teal-600) 0%, var(--teal-700) 58%, var(--teal-800) 100%);
  --btn-chip:rgba(255,255,255,.18);
  box-shadow:var(--sh-teal), var(--sh-inset-top-dark);
}
.btn--primary:hover{box-shadow:0 30px 66px -22px rgba(14,140,128,.52), var(--sh-inset-top-dark);}

.btn--ink{
  --btn-bg:linear-gradient(148deg, var(--ink-800) 0%, var(--ink-900) 60%, var(--ink-950) 100%);
}

.btn--ghost{
  --btn-bg:rgba(255,255,255,.6);
  --btn-fg:var(--ink-800);
  --btn-ring:var(--hairline-strong);
  --btn-chip:rgba(7,28,46,.06);
  box-shadow:0 0 0 1px var(--btn-ring), var(--sh-xs);
}
.btn--ghost:hover{--btn-bg:#fff;box-shadow:0 0 0 1px var(--hairline-strong), var(--sh-md);}

.btn--on-dark{
  --btn-bg:rgba(255,255,255,.07);
  --btn-fg:#fff;
  --btn-ring:var(--hairline-dark-strong);
  --btn-chip:rgba(255,255,255,.12);
  box-shadow:0 0 0 1px var(--btn-ring), var(--sh-inset-top-dark);
}
.btn--on-dark:hover{--btn-bg:rgba(255,255,255,.13);}

.btn--light{
  --btn-bg:#fff;
  --btn-fg:var(--ink-900);
  --btn-chip:rgba(7,28,46,.07);
}

.btn--wa{
  --btn-bg:linear-gradient(148deg,#2ec26a,#1c9e52);
  --btn-chip:rgba(255,255,255,.2);
  box-shadow:0 22px 50px -20px rgba(28,158,82,.5), var(--sh-inset-top-dark);
}
.btn--sm{padding:.45rem .5rem .45rem 1.05rem;font-size:var(--fs-xs);gap:.55rem;}
.btn--sm .btn__chip{width:1.65rem;height:1.65rem;}
.btn--sm .btn__chip svg{width:.8125rem;height:.8125rem;}
.btn--lg{padding:.8rem .8rem .8rem 1.65rem;font-size:var(--fs-base);}
.btn--lg .btn__chip{width:2.35rem;height:2.35rem;}
.btn--block{width:100%;justify-content:space-between;}

/* Enlace-flecha discreto */
.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:var(--fs-sm);font-weight:600;color:var(--teal-700);
  transition:gap var(--t-base) var(--e-spring), color var(--t-fast) var(--e-out);
}
.link-arrow svg{width:1rem;height:1rem;transition:transform var(--t-base) var(--e-spring);}
.link-arrow:hover{gap:.75rem;color:var(--teal-600);}
.link-arrow:hover svg{transform:translateX(2px);}
[data-surface="dark"] .link-arrow{color:var(--teal-300);}
[data-surface="dark"] .link-arrow:hover{color:var(--teal-400);}

/* --- Doble bisel: caparazón exterior + núcleo interior --- */
.bezel{
  --bezel-pad:.5rem;
  --bezel-r:var(--r-2xl);
  position:relative;
  padding:var(--bezel-pad);
  border-radius:var(--bezel-r);
  background:rgba(7,28,46,.038);
  box-shadow:0 0 0 1px var(--hairline);
  transition:box-shadow var(--t-slow) var(--e-out),
             transform var(--t-slow) var(--e-out),
             background var(--t-slow) var(--e-out);
}
.bezel__core{
  position:relative;
  height:100%;
  border-radius:calc(var(--bezel-r) - var(--bezel-pad));
  background:var(--surface-raised);
  box-shadow:var(--sh-inset-top), var(--sh-sm);
  overflow:hidden;
}
.bezel--dark{background:rgba(255,255,255,.045);box-shadow:0 0 0 1px var(--hairline-dark);}
.bezel--dark .bezel__core{
  background:linear-gradient(168deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  box-shadow:var(--sh-inset-top-dark), 0 1px 2px rgba(0,0,0,.2);
}
.bezel--flat .bezel__core{box-shadow:var(--sh-inset-top);}

a.bezel:hover,.bezel--hover:hover{
  transform:translateY(-4px);
  background:rgba(14,140,128,.07);
  box-shadow:0 0 0 1px rgba(14,140,128,.2), var(--sh-lg);
}
.bezel--dark.bezel--hover:hover,a.bezel--dark:hover{
  background:rgba(47,211,195,.09);
  box-shadow:0 0 0 1px rgba(47,211,195,.24), var(--sh-xl);
}

/* --- Tarjeta genérica --- */
.card{
  display:flex;flex-direction:column;gap:1rem;
  padding:clamp(1.4rem,2.2vw,1.9rem);
  height:100%;
}
.card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;}
.card__index{
  font-family:var(--f-mono);font-size:var(--fs-eyebrow);letter-spacing:.14em;
  color:var(--tx-faint);padding-top:.35rem;
}
[data-surface="dark"] .card__index{color:var(--tx-on-dark-faint);}
.card__title{font-size:var(--fs-lg);font-weight:660;letter-spacing:-.016em;color:var(--tx-title);line-height:1.28;}
[data-surface="dark"] .card__title{color:#fff;}
.card__text{font-size:var(--fs-sm);line-height:1.66;color:var(--tx-muted);}
[data-surface="dark"] .card__text{color:var(--tx-on-dark-muted);}
.card__foot{margin-top:auto;padding-top:.35rem;}

/* --- Icono en cápsula --- */
.icon-pill{
  flex:none;
  width:3rem;height:3rem;
  border-radius:var(--r-md);
  display:grid;place-items:center;
  background:linear-gradient(150deg, var(--teal-050), #fff);
  box-shadow:0 0 0 1px rgba(14,140,128,.14), var(--sh-inset-top);
  color:var(--teal-700);
  transition:transform var(--t-base) var(--e-spring), box-shadow var(--t-base) var(--e-out);
}
.icon-pill svg{width:1.375rem;height:1.375rem;}
.bezel--hover:hover .icon-pill,a.bezel:hover .icon-pill{transform:scale(1.06) rotate(-3deg);}
.icon-pill--gold{
  background:linear-gradient(150deg, var(--gold-100), #fff);
  box-shadow:0 0 0 1px rgba(184,134,43,.18), var(--sh-inset-top);
  color:var(--gold-700);
}
.icon-pill--dark{
  background:linear-gradient(150deg, rgba(47,211,195,.14), rgba(255,255,255,.03));
  box-shadow:0 0 0 1px rgba(47,211,195,.2), var(--sh-inset-top-dark);
  color:var(--teal-300);
}
.icon-pill--sm{width:2.25rem;height:2.25rem;border-radius:var(--r-sm);}
.icon-pill--sm svg{width:1.0625rem;height:1.0625rem;}

/* --- Etiqueta / chip --- */
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  justify-self:start;align-self:start;max-width:100%;
  padding:.3rem .7rem;
  border-radius:var(--r-pill);
  font-family:var(--f-mono);font-size:var(--fs-eyebrow);letter-spacing:.06em;
  background:rgba(7,28,46,.05);
  color:var(--ink-700);
  border:1px solid var(--hairline);
  white-space:nowrap;
}
.chip--teal{background:var(--teal-050);color:var(--teal-700);border-color:rgba(14,140,128,.18);}
.chip--gold{background:var(--gold-100);color:var(--gold-700);border-color:rgba(184,134,43,.2);}
.chip--dark{background:rgba(255,255,255,.06);color:var(--tx-on-dark);border-color:var(--hairline-dark);}
.chip svg{width:.8125rem;height:.8125rem;flex:none;}

/* --- Lista con vistos --- */
.ticks{display:grid;gap:.7rem;grid-template-columns:minmax(0,1fr);}
.ticks li{
  position:relative;padding-left:1.8rem;
  font-size:var(--fs-sm);line-height:1.6;color:var(--tx-body);
}
.ticks li::before{
  content:"";position:absolute;left:0;top:.42em;
  width:1.1rem;height:1.1rem;border-radius:50%;
  background:var(--teal-050) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A6F66' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/.65rem no-repeat;
  box-shadow:0 0 0 1px rgba(14,140,128,.16);
}
[data-surface="dark"] .ticks li{color:var(--tx-on-dark-muted);}
[data-surface="dark"] .ticks li::before{
  background-color:rgba(47,211,195,.12);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232FD3C3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  box-shadow:0 0 0 1px rgba(47,211,195,.2);
}
.ticks--two{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:.7rem 2rem;}
.ticks--tight li{font-size:var(--fs-xs);}

/* --- Cifra / estadística --- */
.stat{display:grid;gap:.3rem;}
.stat__num{
  font-family:var(--f-display);
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 90;
  font-size:clamp(2rem,3.4vw,2.9rem);font-weight:500;letter-spacing:-.03em;line-height:1;
  color:var(--tx-title);font-variant-numeric:tabular-nums;
}
[data-surface="dark"] .stat__num{color:#fff;}
.stat__num em{font-style:normal;color:var(--teal-600);}
[data-surface="dark"] .stat__num em{color:var(--teal-400);}
.stat__label{font-size:var(--fs-xs);color:var(--tx-muted);line-height:1.45;max-width:22ch;}
[data-surface="dark"] .stat__label{color:var(--tx-on-dark-muted);}

/* ------------------------------------------------------- 06. SECCIONES */

/* Fondos */
.bg-ink{background:var(--ink-950);color:var(--tx-on-dark-muted);}
.bg-ink-soft{background:linear-gradient(180deg,var(--ink-900),var(--ink-950));}
.bg-paper{background:var(--paper-50);}
.bg-sunken{background:var(--paper-100);}
.bg-white{background:var(--paper-0);}

/* Malla luminosa para superficies oscuras */
.mesh{position:relative;overflow:hidden;}
.mesh::before,.mesh::after{
  content:"";position:absolute;pointer-events:none;z-index:0;
  border-radius:50%;filter:blur(90px);opacity:.5;
}
.mesh::before{
  width:44rem;height:44rem;top:-18rem;right:-14rem;
  background:radial-gradient(circle, rgba(18,165,148,.42) 0%, rgba(18,165,148,0) 68%);
}
.mesh::after{
  width:38rem;height:38rem;bottom:-20rem;left:-12rem;
  background:radial-gradient(circle, rgba(29,85,120,.5) 0%, rgba(29,85,120,0) 70%);
}
.mesh > *{position:relative;z-index:1;}

/* Retícula técnica sutil */
.gridlines{position:relative;}
.gridlines::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(to right, var(--hairline) 1px, transparent 1px),
                   linear-gradient(to bottom, var(--hairline) 1px, transparent 1px);
  background-size:clamp(3rem,7vw,5.5rem) clamp(3rem,7vw,5.5rem);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%);
  opacity:.75;
}
.gridlines > *{position:relative;z-index:1;}
.gridlines--dark::before{
  background-image:linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
                   linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
}

/* --- HERO --- */
.hero{
  position:relative;
  padding-top:clamp(2.75rem,5vw,4.25rem);
  padding-bottom:clamp(3.5rem,6vw,5.5rem);
  overflow:hidden;
}
.hero__glow{
  position:absolute;pointer-events:none;z-index:0;
  width:60rem;height:60rem;
  top:-32rem;left:50%;transform:translateX(-38%);
  background:radial-gradient(circle, rgba(18,165,148,.13) 0%, rgba(18,165,148,0) 62%);
  filter:blur(20px);
}
.hero__grid{
  position:relative;z-index:1;
  display:grid;gap:clamp(2.5rem,5vw,4rem);
  align-items:center;grid-template-columns:minmax(0,1fr);
}
@media (min-width:1024px){
  .hero__grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(2.5rem,4vw,4.5rem);}
}
.hero__copy{display:grid;gap:1.25rem;justify-items:start;max-width:36rem;grid-template-columns:minmax(0,1fr);}
.hero__title{margin-top:.25rem;}
.hero__title em{
  font-style:normal;
  background:linear-gradient(102deg, var(--teal-600) 12%, var(--ink-700) 88%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.75rem;padding-top:.35rem;}
.hero__proof{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;
  padding-top:1.1rem;margin-top:.25rem;
  border-top:1px solid var(--hairline);
  width:100%;
}
.hero__proof .stat__num{font-size:clamp(1.5rem,2.4vw,2rem);}
.hero__proof .stat__label{font-size:var(--fs-micro);}

/* Panel visual del hero */
.hero__panel{position:relative;}
.hero__panel .bezel{--bezel-pad:.625rem;}
.panel-core{padding:clamp(1.5rem,2.4vw,2.1rem);display:grid;gap:1.35rem;grid-template-columns:minmax(0,1fr);}
.panel-core__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-bottom:1.1rem;border-bottom:1px solid var(--hairline);
}
.panel-core__title{font-size:var(--fs-sm);font-weight:660;color:var(--tx-title);letter-spacing:-.012em;}
.panel-core__meta{font-family:var(--f-mono);font-size:var(--fs-eyebrow);letter-spacing:.1em;color:var(--tx-faint);}
.panel-rows{display:grid;gap:.55rem;grid-template-columns:minmax(0,1fr);}
.panel-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:.85rem;align-items:center;
  padding:.7rem .85rem;
  border-radius:var(--r-sm);
  background:var(--paper-100);
  box-shadow:inset 0 0 0 1px rgba(7,28,46,.045);
  transition:background var(--t-base) var(--e-out), transform var(--t-base) var(--e-out);
}
.panel-row:hover{background:var(--teal-050);transform:translateX(3px);}
.panel-row__dot{
  width:1.4rem;height:1.4rem;border-radius:50%;
  display:grid;place-items:center;flex:none;
  background:#fff;box-shadow:0 0 0 1px rgba(14,140,128,.2);color:var(--teal-600);
}
.panel-row__dot svg{width:.75rem;height:.75rem;}
.panel-row__label{font-size:var(--fs-xs);font-weight:560;color:var(--ink-800);letter-spacing:-.008em;}
.panel-row__value{font-family:var(--f-mono);font-size:var(--fs-eyebrow);color:var(--teal-700);letter-spacing:.05em;}
.panel-core__foot{
  display:flex;align-items:center;gap:.7rem;
  padding-top:1.1rem;border-top:1px solid var(--hairline);
  font-size:var(--fs-micro);color:var(--tx-muted);
}

/* Tarjeta flotante sobre el panel */
.hero__float{
  position:absolute;left:-1.25rem;bottom:-2.9rem;z-index:2;
  display:none;
}
@media (min-width:1024px){.hero__float{display:block;}}
.hero__float .bezel{--bezel-pad:.4rem;--bezel-r:var(--r-xl);background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px var(--hairline), var(--sh-lg);}
.float-core{padding:.95rem 1.2rem;display:flex;align-items:center;gap:.85rem;}
.float-core__text{display:grid;gap:.1rem;min-width:0;}
.float-core__k{font-size:var(--fs-xs);font-weight:660;color:var(--tx-title);letter-spacing:-.01em;}
.float-core__v{font-size:var(--fs-micro);color:var(--tx-muted);}

/* --- Marquesina de normas --- */
.marquee{
  position:relative;overflow:hidden;
  padding-block:1.35rem;
  border-block:1px solid var(--hairline);
  background:var(--paper-100);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{
  display:flex;width:max-content;
  gap:clamp(2rem,4vw,3.5rem);
  animation:marquee 46s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused;}
@keyframes marquee{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
.marquee__item{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.06em;
  color:var(--ink-700);white-space:nowrap;opacity:.82;
}
.marquee__item svg{width:1rem;height:1rem;color:var(--teal-600);flex:none;}
.marquee__item b{font-family:var(--f-sans);font-weight:640;letter-spacing:-.01em;}

/* --- Bento de servicios --- */
.bento{display:grid;gap:clamp(.85rem,1.4vw,1.15rem);grid-template-columns:minmax(0,1fr);}
@media (min-width:760px){.bento{grid-template-columns:repeat(6,1fr);}}
@media (min-width:1100px){.bento{grid-template-columns:repeat(12,1fr);}}
.bento > *{grid-column:span 1;}
@media (min-width:760px){
  .bento > *{grid-column:span 6;}
  .bento .b-half{grid-column:span 3;}
}
@media (min-width:1100px){
  .bento > *{grid-column:span 4;}
  .bento .b-wide{grid-column:span 8;}
  .bento .b-full{grid-column:span 12;}
  .bento .b-half{grid-column:span 6;}
}

.svc{position:relative;display:flex;flex-direction:column;gap:1.1rem;padding:clamp(1.5rem,2.3vw,2.05rem);height:100%;}
.svc__head{display:flex;align-items:flex-start;gap:1rem;}
.svc__num{
  margin-left:auto;font-family:var(--f-mono);font-size:var(--fs-eyebrow);
  letter-spacing:.16em;color:var(--tx-faint);padding-top:.5rem;
}
.svc__title{font-size:clamp(1.125rem,1.55vw,1.3125rem);font-weight:660;letter-spacing:-.018em;color:var(--tx-title);line-height:1.25;}
.svc__text{font-size:var(--fs-sm);color:var(--tx-muted);line-height:1.65;}
.svc__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.4rem;}
.svc__tag{
  font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.04em;
  padding:.28rem .6rem;border-radius:var(--r-pill);
  background:rgba(7,28,46,.045);color:var(--tx-muted);
  border:1px solid rgba(7,28,46,.06);
}
.svc--feature .svc__list{
  display:grid;gap:.55rem 1.75rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
}

/* --- Proceso / metodología --- */
.process{display:grid;gap:clamp(.85rem,1.4vw,1.15rem);grid-template-columns:minmax(0,1fr);counter-reset:step;}
@media (min-width:720px){.process{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1100px){.process{grid-template-columns:repeat(5,1fr);}}
.step{position:relative;display:flex;flex-direction:column;gap:.85rem;padding:clamp(1.35rem,2vw,1.7rem);height:100%;}
.step__badge{
  display:inline-grid;place-items:center;flex:none;
  width:2.5rem;height:2.5rem;border-radius:var(--r-sm);
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:500;letter-spacing:.02em;
  background:linear-gradient(150deg,var(--ink-800),var(--ink-950));
  color:var(--teal-300);
  box-shadow:var(--sh-inset-top-dark), var(--sh-sm);
}
.step__title{font-size:var(--fs-base);font-weight:660;letter-spacing:-.015em;color:var(--tx-title);line-height:1.3;}
.step__text{font-size:var(--fs-xs);color:var(--tx-muted);line-height:1.62;}
.step__out{
  margin-top:auto;padding-top:.85rem;border-top:1px dashed var(--hairline-strong);
  font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.04em;color:var(--teal-700);
}
[data-surface="dark"] .step__out{border-top-color:var(--hairline-dark-strong);color:var(--teal-300);}

/* --- Sectores --- */
.sector{
  display:flex;align-items:center;gap:1rem;
  padding:1.15rem 1.35rem;height:100%;
}
.sector__body{display:grid;gap:.15rem;}
.sector__title{font-size:var(--fs-sm);font-weight:640;color:var(--tx-title);letter-spacing:-.012em;}
[data-surface="dark"] .sector__title{color:#fff;}
.sector__text{font-size:var(--fs-micro);color:var(--tx-muted);line-height:1.5;}
[data-surface="dark"] .sector__text{color:var(--tx-on-dark-muted);}

/* --- Normas ISO --- */
.norms{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));}
.norm{
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;
  padding:1.15rem 1.25rem;height:100%;
}
.norm__code{
  font-family:var(--f-mono);font-size:var(--fs-eyebrow);letter-spacing:.04em;
  padding:.35rem .55rem;border-radius:var(--r-xs);
  background:rgba(47,211,195,.1);color:var(--teal-300);
  border:1px solid rgba(47,211,195,.18);white-space:nowrap;
}
.norm__body{display:grid;gap:.2rem;}
.norm__name{font-size:var(--fs-sm);font-weight:620;color:#fff;letter-spacing:-.012em;line-height:1.35;}
.norm__for{font-size:var(--fs-micro);color:var(--tx-on-dark-muted);line-height:1.5;}

/* --- Acordeón (FAQ) --- */
.acc{display:grid;gap:.6rem;grid-template-columns:minmax(0,1fr);}
.acc__item{--bezel-pad:.375rem;--bezel-r:var(--r-lg);}
.acc__btn{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  padding:1.15rem 1.35rem;
  text-align:left;
  font-size:var(--fs-base);font-weight:600;letter-spacing:-.014em;color:var(--tx-title);
  line-height:1.4;
  transition:color var(--t-fast) var(--e-out);
}
.acc__btn:hover{color:var(--teal-700);}
.acc__sign{
  position:relative;flex:none;width:1.75rem;height:1.75rem;border-radius:50%;
  background:rgba(7,28,46,.05);
  box-shadow:0 0 0 1px var(--hairline);
  transition:transform var(--t-base) var(--e-spring), background var(--t-base) var(--e-out);
}
.acc__sign::before,.acc__sign::after{
  content:"";position:absolute;left:50%;top:50%;
  width:.6875rem;height:1.5px;border-radius:2px;background:var(--ink-700);
  transform:translate(-50%,-50%);
  transition:transform var(--t-base) var(--e-spring), opacity var(--t-fast) var(--e-out);
}
.acc__sign::after{transform:translate(-50%,-50%) rotate(90deg);}
.acc__item.is-open .acc__sign{background:var(--teal-500);box-shadow:0 0 0 1px rgba(14,140,128,.35);transform:rotate(180deg);}
.acc__item.is-open .acc__sign::before,.acc__item.is-open .acc__sign::after{background:#fff;}
.acc__item.is-open .acc__sign::after{opacity:0;transform:translate(-50%,-50%) rotate(0);}
.acc__panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--t-slow) var(--e-spring);
}
.acc__item.is-open .acc__panel{grid-template-rows:1fr;}
.acc__panel > div{overflow:hidden;}
.acc__inner{
  padding:0 1.35rem 1.35rem;
  font-size:var(--fs-sm);line-height:1.7;color:var(--tx-muted);
  max-width:62ch;
}
.acc__inner p + p{margin-top:.75rem;}
.acc__inner strong{color:var(--ink-800);font-weight:620;}

/* --- Pestañas --- */
.tabs__list{
  display:flex;flex-wrap:wrap;gap:.35rem;
  padding:.375rem;border-radius:var(--r-pill);
  background:rgba(7,28,46,.045);
  box-shadow:0 0 0 1px var(--hairline);
  width:max-content;max-width:100%;
}
[data-surface="dark"] .tabs__list{background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--hairline-dark);}
.tabs__btn{
  padding:.5rem 1.05rem;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:-.008em;
  color:var(--tx-muted);white-space:nowrap;
  transition:color var(--t-fast) var(--e-out), background var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}
.tabs__btn:hover{color:var(--ink-800);}
.tabs__btn[aria-selected="true"]{
  background:var(--paper-0);color:var(--ink-900);
  box-shadow:var(--sh-sm), var(--sh-inset-top);
}
[data-surface="dark"] .tabs__btn{color:var(--tx-on-dark-muted);}
[data-surface="dark"] .tabs__btn:hover{color:#fff;}
[data-surface="dark"] .tabs__btn[aria-selected="true"]{
  background:rgba(255,255,255,.12);color:#fff;box-shadow:var(--sh-inset-top-dark);
}
.tabs__panel[hidden]{display:none;}
.tabs__panel{animation:tab-in 520ms var(--e-out) both;}
@keyframes tab-in{from{opacity:0;transform:translateY(.75rem);}to{opacity:1;transform:none;}}

/* --------------------------------------------------- 09. FORMULARIOS */
.form{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr);}
.field{display:grid;gap:.45rem;grid-template-columns:minmax(0,1fr);}
.field__label{
  font-size:var(--fs-xs);font-weight:600;color:var(--ink-800);letter-spacing:-.006em;
  display:flex;align-items:center;gap:.4rem;
}
.field__label .req{color:var(--teal-600);font-weight:700;}
.field__hint{font-size:var(--fs-micro);color:var(--tx-faint);}
.field__err{
  font-size:var(--fs-micro);color:#B3261E;display:none;align-items:center;gap:.35rem;
}
.field.has-error .field__err{display:flex;}
.field.has-error .input,.field.has-error .select,.field.has-error .textarea{
  box-shadow:0 0 0 1px #E5A5A0, inset 0 1px 2px rgba(7,28,46,.05);
  background:#FEF7F6;
}

.input,.select,.textarea{
  width:100%;
  padding:.8rem 1rem;
  border:0;border-radius:var(--r-sm);
  background:var(--paper-0);
  color:var(--ink-900);
  font-size:var(--fs-sm);
  line-height:1.5;
  box-shadow:0 0 0 1px var(--hairline), inset 0 1px 2px rgba(7,28,46,.04);
  transition:box-shadow var(--t-base) var(--e-out), background var(--t-base) var(--e-out);
  -webkit-appearance:none;appearance:none;
}
.input::placeholder,.textarea::placeholder{color:var(--tx-faint);}
.input:hover,.select:hover,.textarea:hover{box-shadow:0 0 0 1px var(--hairline-strong), inset 0 1px 2px rgba(7,28,46,.04);}
.input:focus,.select:focus,.textarea:focus{
  outline:none;
  box-shadow:0 0 0 1px var(--teal-500), 0 0 0 4px rgba(18,165,148,.14), inset 0 1px 2px rgba(7,28,46,.03);
  background:#fff;
}
.textarea{min-height:7rem;resize:vertical;}
.select{
  padding-right:2.5rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C8299' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:1.05rem;
}
.field-row{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));}

.check{
  display:grid;grid-template-columns:1.1rem 1fr;gap:.7rem;align-items:start;
  font-size:var(--fs-micro);line-height:1.55;color:var(--tx-muted);cursor:pointer;
}
.check input{
  appearance:none;-webkit-appearance:none;
  width:1.1rem;height:1.1rem;margin-top:.15rem;border-radius:.3rem;
  background:#fff;box-shadow:0 0 0 1px var(--hairline-strong);
  transition:background var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out);
  cursor:pointer;flex:none;
}
.check input:checked{
  background:var(--teal-600) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/.72rem no-repeat;
  box-shadow:0 0 0 1px var(--teal-600);
}
.check a{color:var(--teal-700);text-decoration:underline;text-underline-offset:2px;}
.check.has-error input{box-shadow:0 0 0 1px #E5A5A0;}

.form__status{
  display:none;align-items:flex-start;gap:.7rem;
  padding:.9rem 1.05rem;border-radius:var(--r-sm);
  font-size:var(--fs-xs);line-height:1.55;
}
.form__status.is-visible{display:flex;}
.form__status--ok{background:var(--teal-050);color:var(--teal-800);box-shadow:0 0 0 1px rgba(14,140,128,.18);}
.form__status--err{background:#FEF7F6;color:#8C2018;box-shadow:0 0 0 1px #E5A5A0;}
.form__status svg{width:1.05rem;height:1.05rem;flex:none;margin-top:.1rem;}

/* Bloque de contacto */
.contact{display:grid;gap:clamp(1.25rem,2.4vw,2rem);grid-template-columns:minmax(0,1fr);}
@media (min-width:960px){.contact{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start;}}
.contact-card{padding:clamp(1.5rem,2.4vw,2.15rem);display:grid;gap:1.35rem;height:100%;grid-template-columns:minmax(0,1fr);}
.cinfo{display:grid;gap:.9rem;grid-template-columns:minmax(0,1fr);}
.cinfo__item{
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;
  padding:.85rem;border-radius:var(--r-md);
  background:rgba(255,255,255,.04);
  box-shadow:0 0 0 1px var(--hairline-dark);
  transition:background var(--t-base) var(--e-out), transform var(--t-base) var(--e-out);
}
a.cinfo__item:hover{background:rgba(47,211,195,.09);transform:translateX(3px);}
.cinfo__item > span:last-child{display:grid;gap:.15rem;min-width:0;}
.cinfo__k{display:block;font-family:var(--f-mono);font-size:var(--fs-eyebrow);letter-spacing:.14em;text-transform:uppercase;color:var(--tx-on-dark-faint);}
.cinfo__v{
  display:block;font-size:var(--fs-sm);color:#fff;font-weight:560;letter-spacing:-.01em;line-height:1.45;
  overflow-wrap:anywhere;
}
.cinfo__x{display:block;font-size:var(--fs-micro);color:var(--tx-on-dark-muted);line-height:1.5;}

.map-frame{
  border-radius:var(--r-md);overflow:hidden;
  box-shadow:0 0 0 1px var(--hairline-dark);
  background:rgba(255,255,255,.03);
  aspect-ratio:16/9;
}
.map-frame iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.28) contrast(1.04);}

/* ------------------------------------------------------------ 08. FOOTER */
.footer{background:var(--ink-950);color:var(--tx-on-dark-muted);position:relative;overflow:hidden;}
.footer__top{
  display:grid;gap:2.5rem;
  padding-block:clamp(3rem,5vw,4.5rem);
}
@media (min-width:900px){
  .footer__top{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:2rem 2.5rem;}
}
.footer__brand{display:grid;gap:1.1rem;max-width:24rem;}
.footer__col-title{
  font-family:var(--f-mono);font-size:var(--fs-eyebrow);letter-spacing:.2em;text-transform:uppercase;
  color:var(--tx-on-dark-faint);margin-bottom:1rem;
}
.footer__list{display:grid;gap:.6rem;grid-template-columns:minmax(0,1fr);}
.footer__list a,.footer__list span{
  font-size:var(--fs-xs);color:var(--tx-on-dark-muted);line-height:1.5;
  transition:color var(--t-fast) var(--e-out);
  display:inline-flex;align-items:center;gap:.45rem;
}
.footer__list a:hover{color:var(--teal-300);}
.footer__legal{
  border-top:1px solid rgba(255,255,255,.08);
  padding-block:1.5rem calc(1.5rem + env(safe-area-inset-bottom));
  display:flex;flex-wrap:wrap;gap:.85rem 1.75rem;align-items:center;justify-content:space-between;
  font-size:var(--fs-micro);color:var(--tx-on-dark-faint);
}
.footer__legal a{transition:color var(--t-fast) var(--e-out);}
.footer__legal a:hover{color:var(--teal-300);}
.footer__reg{
  display:flex;flex-wrap:wrap;gap:.5rem .9rem;
  font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.06em;
}
.footer__reg span{white-space:nowrap;}

/* --------------------------------------------------- FLOTANTES / UI */
.floats{
  position:fixed;right:clamp(.9rem,2.5vw,1.5rem);
  bottom:calc(clamp(.9rem,2.5vw,1.5rem) + env(safe-area-inset-bottom));
  z-index:var(--z-float);
  display:grid;gap:.6rem;justify-items:end;
}
.fab{
  position:relative;
  width:3.25rem;height:3.25rem;border-radius:var(--r-pill);
  display:grid;place-items:center;
  color:#fff;
  box-shadow:0 18px 40px -14px rgba(7,28,46,.45), var(--sh-inset-top-dark);
  transition:transform var(--t-base) var(--e-spring), box-shadow var(--t-base) var(--e-out), opacity var(--t-base) var(--e-out);
}
.fab:hover{transform:translateY(-3px) scale(1.04);}
.fab:active{transform:scale(.95);}
.fab svg{width:1.5rem;height:1.5rem;}
.fab--wa{background:linear-gradient(150deg,#2ec26a,#189b4d);}
.fab--wa::after{
  content:"";position:absolute;inset:-.35rem;border-radius:inherit;
  border:1.5px solid rgba(46,194,106,.4);
  animation:pulse-ring 2.8s var(--e-out) infinite;
  pointer-events:none;
}
@keyframes pulse-ring{0%{transform:scale(.9);opacity:.7}70%{transform:scale(1.22);opacity:0}100%{opacity:0}}
.fab--top{
  width:2.75rem;height:2.75rem;
  background:rgba(252,251,248,.8);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:var(--ink-800);
  box-shadow:0 0 0 1px var(--hairline-strong), var(--sh-md);
  opacity:0;pointer-events:none;transform:translateY(.5rem);
}
.fab--top.is-visible{opacity:1;pointer-events:auto;transform:none;}
.fab__tip{
  position:absolute;right:calc(100% + .7rem);top:50%;transform:translateY(-50%) translateX(.35rem);
  padding:.4rem .75rem;border-radius:var(--r-pill);
  background:var(--ink-900);color:#fff;
  font-size:var(--fs-micro);font-weight:560;white-space:nowrap;
  opacity:0;pointer-events:none;
  box-shadow:var(--sh-md);
  transition:opacity var(--t-base) var(--e-out), transform var(--t-base) var(--e-spring);
}
.fab:hover .fab__tip{opacity:1;transform:translateY(-50%) translateX(0);}
@media (max-width:600px){.fab__tip{display:none;}}

/* Banner de cookies */
.cookie{
  position:fixed;left:clamp(.9rem,2.5vw,1.5rem);
  bottom:calc(clamp(.9rem,2.5vw,1.5rem) + env(safe-area-inset-bottom));
  z-index:var(--z-float);
  width:min(26rem, calc(100vw - 2 * clamp(.9rem,2.5vw,1.5rem)));
  --bezel-pad:.4rem;--bezel-r:var(--r-xl);
  background:rgba(252,251,248,.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 0 0 1px var(--hairline-strong), var(--sh-xl);
  opacity:0;transform:translateY(1.25rem) scale(.98);pointer-events:none;
  transition:opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-spring);
}
.cookie.is-visible{opacity:1;transform:none;pointer-events:auto;}
.cookie__core{padding:1.15rem 1.3rem;display:grid;gap:.9rem;grid-template-columns:minmax(0,1fr);}
.cookie__text{font-size:var(--fs-micro);line-height:1.6;color:var(--tx-muted);}
.cookie__text a{color:var(--teal-700);text-decoration:underline;text-underline-offset:2px;}
.cookie__actions{display:flex;flex-wrap:wrap;gap:.5rem;}
.cookie__actions .btn{flex:1 1 auto;justify-content:center;}
@media (max-width:640px){
  .cookie{width:calc(100vw - 1.8rem);}
  body.has-cookie .floats{bottom:calc(11rem + env(safe-area-inset-bottom));}
}

/* --------------------------------------------------- 11. MOVIMIENTO */
/* Entrada por scroll: desenfoque + elevación, sólo transform/opacity/filter */
.js [data-reveal]{
  opacity:0;
  transform:translate3d(0,2.75rem,0);
  filter:blur(6px);
  transition:opacity var(--t-xslow) var(--e-out),
             transform var(--t-xslow) var(--e-out),
             filter var(--t-slow) var(--e-out);
  transition-delay:var(--reveal-delay,0ms);
  will-change:transform,opacity;
}
.js [data-reveal="left"]{transform:translate3d(-2rem,1.25rem,0);}
.js [data-reveal="right"]{transform:translate3d(2rem,1.25rem,0);}
.js [data-reveal="scale"]{transform:translate3d(0,1.75rem,0) scale(.965);}
.js [data-reveal].is-in{
  opacity:1;
  transform:none;
  filter:blur(0);
  will-change:auto;
}

/* Escalonado automático dentro de un contenedor */
.js [data-stagger] > *{
  opacity:0;transform:translate3d(0,1.75rem,0);filter:blur(4px);
  transition:opacity 900ms var(--e-out), transform 900ms var(--e-out), filter 700ms var(--e-out);
}
[data-stagger].is-in > *{opacity:1;transform:none;filter:blur(0);}
[data-stagger].is-in > *:nth-child(1){transition-delay:0ms}
[data-stagger].is-in > *:nth-child(2){transition-delay:70ms}
[data-stagger].is-in > *:nth-child(3){transition-delay:140ms}
[data-stagger].is-in > *:nth-child(4){transition-delay:210ms}
[data-stagger].is-in > *:nth-child(5){transition-delay:280ms}
[data-stagger].is-in > *:nth-child(6){transition-delay:350ms}
[data-stagger].is-in > *:nth-child(7){transition-delay:420ms}
[data-stagger].is-in > *:nth-child(8){transition-delay:490ms}
[data-stagger].is-in > *:nth-child(n+9){transition-delay:560ms}

/* Revelado por línea del titular */
.reveal-lines{display:grid;gap:0;}
.reveal-lines > span{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em;}
.js .reveal-lines > span > span{
  display:block;
  transform:translate3d(0,110%,0);
  transition:transform 1000ms var(--e-out);
  transition-delay:calc(var(--i,0) * 90ms);
}
.reveal-lines.is-in > span > span{transform:none;}

/* -------------------------------------------------- 10. UTILIDADES */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.center{text-align:center;}
.mx-auto{margin-inline:auto;}
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.mt-4{margin-top:2rem}.mt-6{margin-top:3rem}
.full{width:100%;}
.nowrap{white-space:nowrap;}
.hide-sm{display:none;}
@media (min-width:640px){.hide-sm{display:revert;}}
@media (max-width:759px){.only-md{display:none !important;}}

.divider{height:1px;background:var(--hairline);border:0;}
[data-surface="dark"] .divider{background:var(--hairline-dark);}

.rule{
  display:flex;align-items:center;gap:1rem;
  font-family:var(--f-mono);font-size:var(--fs-eyebrow);letter-spacing:.18em;
  text-transform:uppercase;color:var(--tx-faint);
}
.rule::after{content:"";flex:1;height:1px;background:var(--hairline);}
[data-surface="dark"] .rule::after{background:var(--hairline-dark);}

/* ------------------------------------------------- 12. RESPONSIVE */
@media (max-width:768px){
  .section{padding-block:clamp(3.5rem,10vw,5rem);}
  .hero__copy{max-width:none;}
  .hero__proof{gap:1.1rem 1.5rem;}
  .bezel{--bezel-pad:.4rem;--bezel-r:var(--r-xl);}
  .tabs__list{width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;}
  .tabs__list::-webkit-scrollbar{display:none;}
  .btn{width:auto;}
  .btn--block-sm{width:100%;justify-content:space-between;}
}
@media (max-width:420px){
  :root{--fs-base:1rem;}
  /* En pantallas muy estrechas un CTA largo debe poder partirse en dos líneas. */
  .btn{white-space:normal;text-align:left;}
  .btn{padding:.55rem .6rem .55rem 1.15rem;font-size:var(--fs-xs);}
  .btn__chip{width:1.8rem;height:1.8rem;}
}

/* Preferencias del usuario */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal],[data-stagger] > *{opacity:1 !important;transform:none !important;filter:none !important;}
  .reveal-lines > span > span{transform:none !important;}
  .marquee__track{animation:none;}
  .fab--wa::after{animation:none;opacity:0;}
}

@media print{
  .nav-wrap,.floats,.cookie,.menu,.grain,.marquee{display:none !important;}
  body{background:#fff;color:#000;}
  .section{padding-block:1.5rem;break-inside:avoid;}
  .bezel{box-shadow:none;background:none;}
  .bezel__core{box-shadow:0 0 0 1px #ccc;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.7em;color:#555;}
}

/* ------------------------------------------- 13. PÁGINAS DE TEXTO LEGAL */
.doc-hero{
  padding-top:clamp(3rem,6vw,5rem);
  padding-bottom:clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--hairline);
  background:linear-gradient(180deg,var(--paper-100),var(--paper-50));
}
.doc-hero__meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:1.25rem;
  font-family:var(--f-mono);font-size:var(--fs-eyebrow);letter-spacing:.1em;
  color:var(--tx-faint);text-transform:uppercase;
}
.doc-layout{display:grid;gap:clamp(2rem,4vw,3.5rem);padding-block:clamp(2.5rem,5vw,4rem);}
@media (min-width:960px){.doc-layout{grid-template-columns:minmax(0,16rem) minmax(0,1fr);align-items:start;}}
.doc-toc{position:sticky;top:6.5rem;display:none;}
@media (min-width:960px){.doc-toc{display:block;}}
.doc-toc__title{
  font-family:var(--f-mono);font-size:var(--fs-eyebrow);letter-spacing:.2em;text-transform:uppercase;
  color:var(--tx-faint);margin-bottom:1rem;
}
.doc-toc__list{display:grid;gap:.15rem;grid-template-columns:minmax(0,1fr);}
.doc-toc__list a{
  display:block;padding:.4rem .7rem;border-radius:var(--r-xs);
  font-size:var(--fs-xs);color:var(--tx-muted);line-height:1.45;
  transition:background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.doc-toc__list a:hover{background:rgba(7,28,46,.045);color:var(--ink-800);}

.prose{max-width:46rem;font-size:var(--fs-sm);line-height:1.78;color:var(--tx-body);}
.prose > * + *{margin-top:1.1rem;}
.prose h2{
  font-family:var(--f-sans);font-weight:660;letter-spacing:-.018em;
  font-size:var(--fs-xl);color:var(--tx-title);line-height:1.25;
  margin-top:2.75rem;padding-top:1.5rem;border-top:1px solid var(--hairline);
  scroll-margin-top:7rem;
}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0;}
.prose h3{
  font-family:var(--f-sans);font-weight:640;letter-spacing:-.012em;
  font-size:var(--fs-base);color:var(--ink-800);margin-top:1.75rem;
}
.prose ul,.prose ol{display:grid;gap:.6rem;padding-left:1.15rem;}
.prose ul li{list-style:none;position:relative;}
.prose ul li::before{
  content:"";position:absolute;left:-1.15rem;top:.72em;
  width:.3125rem;height:.3125rem;border-radius:50%;background:var(--teal-500);
}
.prose ol{list-style:decimal;}
.prose ol li::marker{color:var(--teal-700);font-family:var(--f-mono);font-size:.85em;}
.prose strong{color:var(--ink-800);font-weight:640;}
.prose a{color:var(--teal-700);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}
.prose a:hover{color:var(--teal-600);}
.prose table{width:100%;border-collapse:collapse;font-size:var(--fs-xs);}
.prose th,.prose td{text-align:left;padding:.7rem .85rem;border-bottom:1px solid var(--hairline);vertical-align:top;}
.prose th{font-weight:640;color:var(--ink-800);background:var(--paper-100);}
.prose .callout{
  padding:1.15rem 1.35rem;border-radius:var(--r-md);
  background:var(--teal-050);box-shadow:0 0 0 1px rgba(14,140,128,.16);
  font-size:var(--fs-xs);line-height:1.7;color:var(--teal-800);
}
.prose .callout strong{color:var(--teal-800);}
.table-wrap{overflow-x:auto;border-radius:var(--r-md);box-shadow:0 0 0 1px var(--hairline);}

/* ------------------------------------- 14. BARRA DE ACCIÓN MÓVIL */
.actionbar{display:none;}
@media (max-width:760px){
  .actionbar{
    position:fixed;left:0;right:0;bottom:0;z-index:var(--z-float);
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    background:rgba(4,18,30,.9);
    -webkit-backdrop-filter:saturate(180%) blur(18px);
    backdrop-filter:saturate(180%) blur(18px);
    border-top:1px solid rgba(255,255,255,.1);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .actionbar__item{
    display:grid;justify-items:center;gap:.2rem;
    padding:.6rem .5rem;
    color:var(--tx-on-dark);
    font-size:.6875rem;font-weight:560;letter-spacing:-.005em;
    transition:background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
  }
  .actionbar__item + .actionbar__item{border-left:1px solid rgba(255,255,255,.08);}
  .actionbar__item svg{width:1.2rem;height:1.2rem;opacity:.85;}
  .actionbar__item:active{background:rgba(255,255,255,.08);}
  .actionbar__item--wa{color:#7ee2a6;}
  body{padding-bottom:4.25rem;}
  .floats{bottom:calc(5rem + env(safe-area-inset-bottom));}
  body.has-cookie .floats{bottom:calc(15rem + env(safe-area-inset-bottom));}
  .cookie{bottom:calc(5rem + env(safe-area-inset-bottom));}
  .fab--wa{display:none;}
}

/* --------------------------------- 15. MAPA CON CARGA POR CLIC */
.map-load{
  width:100%;height:100%;
  display:flex;align-items:center;gap:.85rem;
  padding:1.15rem 1.25rem;text-align:left;
  background:
    linear-gradient(135deg, rgba(18,165,148,.09), rgba(29,85,120,.12)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px);
  transition:background var(--t-base) var(--e-out);
}
.map-load:hover{background:linear-gradient(135deg, rgba(18,165,148,.16), rgba(29,85,120,.18));}
.map-load__text{display:grid;gap:.2rem;min-width:0;}
.map-load__k{font-size:var(--fs-sm);font-weight:620;color:#fff;letter-spacing:-.012em;}
.map-load__v{font-size:var(--fs-micro);color:var(--tx-on-dark-muted);line-height:1.45;}

/* -------------------------------------- 16. CALENDARIO NORMATIVO */
.timeline{display:grid;gap:clamp(.85rem,1.4vw,1.15rem);grid-template-columns:minmax(0,1fr);}
@media (min-width:720px){.timeline{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1140px){.timeline{grid-template-columns:repeat(5,1fr);}}
.tl{display:flex;flex-direction:column;gap:.7rem;padding:clamp(1.25rem,2vw,1.6rem);height:100%;}
.tl__head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;}
.tl__date{
  font-family:var(--f-mono);font-size:var(--fs-eyebrow);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-700);
}
.tl__title{font-size:var(--fs-base);font-weight:660;letter-spacing:-.016em;color:var(--tx-title);line-height:1.28;}
.tl__text{font-size:var(--fs-xs);color:var(--tx-muted);line-height:1.62;}
.tl__who{
  margin-top:auto;padding-top:.8rem;border-top:1px dashed var(--hairline-strong);
  font-size:.6875rem;color:var(--tx-faint);line-height:1.45;
}

/* ------------------------------------ 17. DIAGNÓSTICO INTERACTIVO */
.diag__top{display:grid;gap:.6rem;}
.diag__meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.diag__bar{
  height:.3125rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.09);overflow:hidden;
}
.diag__fill{
  display:block;height:100%;width:0%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--teal-500),var(--teal-300));
  transform-origin:left;
  transition:width var(--t-slow) var(--e-spring);
}
.diag__nav{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;align-items:center;}

.diag-q{animation:tab-in 480ms var(--e-out) both;}
.diag-q__eyebrow{
  font-family:var(--f-mono);font-size:var(--fs-eyebrow);letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal-300);
}
.diag-q__title{
  font-family:var(--f-sans);font-weight:640;letter-spacing:-.018em;line-height:1.3;
  font-size:clamp(1.125rem,2vw,1.4375rem);color:#fff;margin:.5rem 0 1.25rem;
  text-wrap:balance;
}
.diag-opts{display:grid;gap:.5rem;grid-template-columns:minmax(0,1fr);}
.diag-opt{
  display:grid;grid-template-columns:1.15rem 1fr;gap:.85rem;align-items:start;
  padding:.95rem 1.1rem;border-radius:var(--r-md);
  background:rgba(255,255,255,.04);
  box-shadow:0 0 0 1px var(--hairline-dark);
  cursor:pointer;
  font-size:var(--fs-sm);line-height:1.5;color:var(--tx-on-dark);
  transition:background var(--t-base) var(--e-out),
             box-shadow var(--t-base) var(--e-out),
             transform var(--t-base) var(--e-spring);
}
.diag-opt:hover{background:rgba(47,211,195,.09);transform:translateX(3px);}
.diag-opt input{
  appearance:none;-webkit-appearance:none;
  width:1.15rem;height:1.15rem;margin-top:.16rem;border-radius:50%;
  background:transparent;box-shadow:0 0 0 1.5px rgba(255,255,255,.28);
  flex:none;cursor:pointer;
  transition:background var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out);
}
.diag-opt input:checked{
  background:var(--teal-400)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304121E' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>")
    center/.68rem no-repeat;
  box-shadow:0 0 0 1.5px var(--teal-400);
}
.diag-opt:has(input:checked){
  background:rgba(47,211,195,.12);
  box-shadow:0 0 0 1px rgba(47,211,195,.36);
}

/* Resultado */
.diag-res{display:grid;gap:1.5rem;animation:tab-in 620ms var(--e-out) both;}
.diag-res__top{display:grid;gap:1.25rem;align-items:center;}
@media (min-width:640px){.diag-res__top{grid-template-columns:auto minmax(0,1fr);gap:1.75rem;}}
.diag-ring{
  --pct:0;
  position:relative;flex:none;
  width:8.5rem;height:8.5rem;border-radius:50%;
  display:grid;place-items:center;
  background:conic-gradient(var(--teal-400) calc(var(--pct) * 1%), rgba(255,255,255,.08) 0);
  box-shadow:0 0 0 1px var(--hairline-dark);
  transition:background 1.1s var(--e-out);
}
.diag-ring::after{
  content:"";position:absolute;inset:.55rem;border-radius:50%;
  background:linear-gradient(160deg,#0b2135,#04121E);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.diag-ring__val{
  position:relative;z-index:1;text-align:center;
  font-family:var(--f-display);font-variation-settings:"opsz" 90;
  font-weight:500;font-size:2.25rem;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.diag-ring__val small{display:block;font-family:var(--f-mono);font-size:.5625rem;letter-spacing:.18em;color:var(--tx-on-dark-faint);margin-top:.3rem;font-weight:400;}
.diag-res__level{font-family:var(--f-display);font-variation-settings:"opsz" 100;font-weight:500;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.024em;color:#fff;line-height:1.15;}
.diag-res__text{font-size:var(--fs-sm);color:var(--tx-on-dark-muted);line-height:1.65;margin-top:.6rem;max-width:46ch;}

.diag-bars{display:grid;gap:.65rem;grid-template-columns:minmax(0,1fr);}
.diag-bar__row{display:grid;grid-template-columns:minmax(0,11rem) 1fr auto;gap:.85rem;align-items:center;}
@media (max-width:560px){.diag-bar__row{grid-template-columns:1fr auto;}.diag-bar__track{grid-column:1/-1;order:3;}}
.diag-bar__k{font-size:var(--fs-xs);color:var(--tx-on-dark-muted);line-height:1.35;}
.diag-bar__track{height:.375rem;border-radius:var(--r-pill);background:rgba(255,255,255,.08);overflow:hidden;}
.diag-bar__fill{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--teal-600),var(--teal-300));transition:width 900ms var(--e-out);}
.diag-bar__v{font-family:var(--f-mono);font-size:var(--fs-eyebrow);color:var(--teal-300);letter-spacing:.06em;}

.diag-reco{display:grid;gap:.6rem;grid-template-columns:minmax(0,1fr);}
.diag-reco__item{
  display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;
  padding:.9rem 1.05rem;border-radius:var(--r-md);
  background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--hairline-dark);
}
.diag-reco__item > span:last-child{display:grid;gap:.2rem;}
.diag-reco__k{
  display:block;font-size:var(--fs-sm);font-weight:620;color:#fff;letter-spacing:-.012em;
  line-height:1.35;transition:color var(--t-fast) var(--e-out);
}
a.diag-reco__k:hover{color:var(--teal-300);}
.diag-reco__v{display:block;font-size:var(--fs-xs);color:var(--tx-on-dark-muted);line-height:1.55;}
.diag-res__cta{display:flex;flex-wrap:wrap;gap:.6rem;padding-top:.35rem;}
.diag-res__note{font-size:var(--fs-micro);color:var(--tx-on-dark-faint);line-height:1.55;}

/* `hidden` debe ganarle a los display de los componentes (.btn, .tabs__panel, etc.) */
[hidden]{display:none !important;}


/* Un ítem de rejilla con contenido ancho (una palabra larga, un correo, un código)
   no debe poder estirar su columna: min-width auto es el valor por defecto y desborda. */
.shell > *, .bezel__core, .card, .svc, .step, .tl, .norm__body, .sector__body,
.cinfo__item > span:last-child, .panel-row, .diag-reco__item{min-width:0;}
.panel-row__label, .panel-row__value, .norm__name, .norm__for,
.sector__title, .sector__text, .cinfo__v, .footer__list a{overflow-wrap:anywhere;}

/* Con el menú abierto, la isla de navegación sube por encima del overlay para que
   la hamburguesa (convertida en X) siga siendo visible y utilizable. */
body.is-locked .nav-wrap{z-index:var(--z-modal);}
body.is-locked .nav-wrap .nav,
body.is-locked .nav-wrap.is-stuck .nav{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
body.is-locked .brand__name{color:#fff;}
body.is-locked .brand__sub{color:var(--tx-on-dark-faint);}
body.is-locked .nav__links,
body.is-locked .nav__actions .btn{opacity:0;pointer-events:none;}
body.is-locked .brand__mark{filter:brightness(1.55) saturate(1.15);}

/* Barra superior compacta en móvil: el teléfono es lo único accionable ahí. */
@media (max-width:640px){
}

/* Portátiles de pantalla baja (1366×768 y similares): el hero se compacta
   para que el CTA principal siga siendo visible sin hacer scroll. */
@media (min-width:1024px) and (max-height:850px){
  .hero{padding-top:1.75rem;padding-bottom:2.75rem;}
  .hero .d-1{font-size:clamp(2rem,3.9vw,3.35rem);}
  .hero__copy{gap:1rem;}
  .hero .lede{font-size:1.0625rem;}
  .hero__proof{padding-top:.9rem;margin-top:0;}
  .hero__proof .stat__num{font-size:1.5rem;}
}

/* Pantallas muy estrechas (≤380 px): la firma bajo el nombre no cabe junto a la
   hamburguesa, así que se retira y queda el logo + el nombre. */
@media (max-width:380px){
  .brand__sub{display:none;}
  .brand__name{font-size:1rem;}
  .brand{gap:.6rem;}
  .footer .brand__sub{display:block;}
}