/* Rém — remdata.ai
   Palette thesis: teal = lo que la organización midió · hueso = lo que Rém dedujo.
   Regla de legibilidad: NINGÚN texto va en gris y NINGÚN texto va atenuado.
   Todo el copy va en hueso pleno (--bone), sin opacidad de por medio. No hay
   token intermedio a propósito: si existe, alguien lo usa. El gris queda sólo
   para cromo que no se lee (flechas del select, placeholders, bordes).
   Warm amber appears once, at the threshold. Nowhere else. */

:root{
  --black:#07090a;
  --deep:#050708;
  --ink:#0d1112;
  --bone:#ede8df;
  --gray:#b3ada1;      /* sólo cromo — nunca copy */
  --gray-dim:#8d887e;  /* sólo cromo — nunca copy */
  --line:#1b2223;
  --teal:#4fd1c5;
  --teal-deep:#2a8f88;
  --amber:#e0a458;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:144px; --s11:200px;

  --display:"Instrument Serif",Georgia,serif;
  --serif:"Newsreader",Georgia,serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --measure:34ch;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--black);color:var(--bone);
  font-family:var(--serif);font-size:19px;line-height:1.62;
  font-weight:300;letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:inherit}

/* ── world canvas ───────────────────────────────────── */
#world{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 8%, transparent 40%, rgba(5,7,8,.55) 100%),
    linear-gradient(to bottom, rgba(5,7,8,.5) 0%, transparent 22%, transparent 78%, rgba(5,7,8,.72) 100%);
}
main,.topbar,.foot{position:relative;z-index:2}

.skip{
  position:absolute;left:-9999px;top:var(--s4);
  background:var(--bone);color:var(--black);padding:var(--s3) var(--s5);z-index:99;
}
.skip:focus{left:var(--s4)}

/* ── topbar ─────────────────────────────────────────── */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s5) clamp(var(--s5),5vw,var(--s8));
  font-family:var(--sans);font-size:14px;letter-spacing:.01em;
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  background:linear-gradient(to bottom,rgba(7,9,10,.86),transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.topbar.on{opacity:1;transform:none;pointer-events:auto}
.brand{display:flex;align-items:center;gap:var(--s3);text-decoration:none;font-family:var(--display);font-size:24px;color:var(--bone)}
.mark{width:38px;height:auto;fill:var(--teal);stroke:none;
      filter:drop-shadow(0 0 12px rgba(79,209,197,.38))}
.topnav{display:flex;align-items:center;gap:clamp(var(--s5),2.4vw,var(--s7))}
.topnav a{text-decoration:none;color:var(--bone);transition:color .3s var(--ease)}
.topnav a:hover{color:var(--teal)}

/* Legal — desplegable nativo <details>: sin JS, sin hash nuevo en la CSP */
.navmenu{position:relative}
.navmenu summary{
  list-style:none;cursor:pointer;color:var(--bone);
  transition:color .3s var(--ease);display:flex;align-items:center;gap:var(--s1);
}
.navmenu summary::-webkit-details-marker{display:none}
.navmenu summary::after{
  content:'';width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .3s var(--ease);
}
.navmenu[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.navmenu summary:hover,.navmenu[open] summary{color:var(--teal)}
.navmenu-panel{
  position:absolute;top:calc(100% + var(--s3));right:0;min-width:210px;
  display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s4);border:1px solid var(--line);border-radius:10px;
  background:rgba(7,9,10,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.navmenu-panel a{white-space:nowrap}
.cta-sm{
  color:var(--bone)!important;border:1px solid var(--line);
  padding:var(--s2) var(--s4);border-radius:999px;transition:border-color .3s var(--ease),background .3s var(--ease)!important;
}
.cta-sm:hover{border-color:var(--teal);background:rgba(79,209,197,.07)}
.lang{
  background:none;border:1px solid var(--line);color:var(--bone);
  font:inherit;font-size:12px;letter-spacing:.09em;
  padding:var(--s2) var(--s3);border-radius:999px;cursor:pointer;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.lang:hover{color:var(--bone);border-color:var(--gray-dim)}

/* ── scene scaffold ─────────────────────────────────── */
.scene{
  position:relative;                 /* the scroll cue anchors to the hero, not the page */
  min-height:100svh;display:flex;align-items:center;
  padding:var(--s10) clamp(var(--s5),6vw,var(--s9));
  scroll-margin-top:var(--s9);       /* anchor jumps clear the fixed topbar */
}
.wrap{width:100%;max-width:1180px;margin:0 auto}
/* asymmetric bias — never centred twice in a row */
.col-left{max-width:1180px;padding-right:clamp(0px,26vw,340px)}
.col-right{max-width:1180px;padding-left:clamp(0px,30vw,420px);text-align:left}

.eyebrow{
  font-family:var(--sans);font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal);
  margin:0 0 var(--s5);
}
h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(38px,6.2vw,76px);line-height:1.04;
  letter-spacing:-.018em;margin:0 0 var(--s7);max-width:16ch;
}
.serif-it{font-style:italic}
h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.6vw,32px);line-height:1.15;margin:0 0 var(--s3);letter-spacing:-.01em}
.prose p{max-width:var(--measure);font-size:clamp(19px,2vw,23px);line-height:1.66;margin:0 0 var(--s5);color:var(--bone)}
.prose p.em{color:var(--bone)}
.kicker{
  font-family:var(--display);font-style:italic;
  font-size:clamp(22px,2.8vw,32px);line-height:1.3;color:var(--teal);
  margin:var(--s9) 0 0;max-width:24ch;
}

/* ── 1 · hero ───────────────────────────────────────── */
.scene-hero{min-height:100svh;text-align:center;flex-direction:column;justify-content:center;padding-top:var(--s9)}
.scene-hero .wrap{max-width:820px}
.wordmark{
  font-family:var(--display);font-weight:400;
  font-size:clamp(84px,17vw,190px);line-height:.9;
  margin:0 0 var(--s7);letter-spacing:-.03em;
  animation:emerge 2.6s var(--ease) both;
}
@keyframes emerge{from{opacity:0;filter:blur(14px)}to{opacity:1;filter:blur(0)}}
.lead{
  font-size:clamp(21px,3vw,32px);line-height:1.45;
  margin:0 auto var(--s5);max-width:24ch;color:var(--bone);letter-spacing:-.005em;
}
.sub{font-family:var(--sans);font-size:16px;color:var(--bone);margin:0;letter-spacing:.04em}
.scrollcue{
  position:absolute;bottom:var(--s8);left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  text-decoration:none;color:var(--bone);
  font-family:var(--sans);font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  animation:fadein 1.6s 2.2s var(--ease) both;transition:color .3s var(--ease);
}
.scrollcue:hover{color:var(--teal)}
.scrollcue svg{width:14px;height:22px;fill:none;stroke:currentColor;stroke-width:1.2}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ── 4 · steps ──────────────────────────────────────── */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s8);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.steps li{border-top:1px solid var(--line);padding-top:var(--s5)}
.num{
  display:block;font-family:var(--sans);font-size:12px;letter-spacing:.16em;
  color:var(--teal-deep);margin-bottom:var(--s4);
}
.steps p{margin:0;color:var(--bone);font-size:17.5px;line-height:1.65;max-width:36ch}

/* ── 5 · pillars ────────────────────────────────────── */
.pillars{display:grid;gap:var(--s7);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.pillar{
  border:1px solid var(--line);border-radius:2px;padding:var(--s7);
  background:linear-gradient(160deg,rgba(237,232,223,.028),transparent 60%);
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.pillar:hover{border-color:rgba(79,209,197,.34);transform:translateY(-3px)}
.pill-dir{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:0 0 var(--s4)}
.pillar h3{margin-bottom:var(--s4)}
.pill-lead{font-family:var(--display);font-style:italic;font-size:21px;color:var(--bone);margin:0 0 var(--s5);line-height:1.34}
.pillar ul{list-style:none;margin:0;padding:0}
.pillar li{
  position:relative;padding-left:var(--s5);margin-bottom:var(--s4);
  color:var(--bone);font-size:17px;line-height:1.6;
}
.pillar li::before{content:"";position:absolute;left:0;top:.66em;width:7px;height:1px;background:var(--teal-deep)}

/* ── 6 · industries ─────────────────────────────────── */
/* 6 industrias en 3×2 + una cuarta columna que es la puerta.
   Esa séptima caja se coloca explícitamente (col 4, filas 1-2) para quedar
   pegada a la caja 3 arriba y a la 6 abajo; el auto-placement de las seis
   industrias respeta esa celda ya ocupada. */
.industries{
  list-style:none;margin:0;padding:0;
  display:grid;gap:0;background:transparent;
  grid-template-columns:repeat(3,1fr) minmax(200px,.9fr);
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.ind-cta{padding:0!important;grid-column:4;grid-row:1 / -1}
.ind-cta a{
  display:flex;flex-direction:column;justify-content:center;gap:var(--s3);
  width:100%;height:100%;
  padding:var(--s7) var(--s5);text-decoration:none;
  transition:background .45s var(--ease);
}
.ind-cta a:hover{background:rgba(79,209,197,.06)}
.ind-cta-h{
  font-family:var(--display);font-size:clamp(21px,2.4vw,27px);
  line-height:1.1;color:var(--teal);
}
.ind-cta-s{
  font-family:var(--sans);font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bone);
  display:flex;align-items:center;gap:var(--s2);
  transition:color .45s var(--ease);
}
.ind-cta-s::after{
  content:'';width:6px;height:6px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:rotate(45deg);transition:transform .45s var(--ease);
}
.ind-cta a:hover .ind-cta-s{color:var(--bone)}
.ind-cta a:hover .ind-cta-s::after{transform:rotate(45deg) translate(2px,-2px)}
/* Debajo de 1100px la reja cae a 2 columnas y la puerta cierra la última fila */
@media (max-width:1100px){
  .industries{grid-template-columns:repeat(2,1fr)}
  .ind-cta{grid-column:1 / -1;grid-row:auto}
  .ind-cta a{padding:var(--s6) var(--s5)}
}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.industries li{
  background:var(--black);padding:var(--s7) var(--s5);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--display);font-size:clamp(21px,2.4vw,27px);
  color:var(--bone);transition:background .45s var(--ease),color .45s var(--ease);
}
.industries li:hover{background:rgba(79,209,197,.06);color:var(--teal)}

/* ── 7 · proof ──────────────────────────────────────── */
.figures{display:grid;gap:var(--s8);grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-bottom:var(--s8)}
.fig b{
  display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(52px,8vw,92px);line-height:1;color:var(--teal);
  letter-spacing:-.02em;margin-bottom:var(--s3);font-variant-numeric:tabular-nums;
}
.fig span{font-family:var(--sans);font-size:14px;color:var(--bone);letter-spacing:.02em}
.countries{font-family:var(--display);font-size:clamp(22px,3vw,34px);color:var(--bone);margin:0}

/* ── 8 · threshold ──────────────────────────────────── */
.scene-door{
  background:
    radial-gradient(70% 46% at 50% 108%, rgba(224,164,88,.15), transparent 72%),
    radial-gradient(40% 26% at 50% 104%, rgba(224,164,88,.13), transparent 70%);
  padding-bottom:var(--s11);
}
.scene-door .wrap{max-width:760px;text-align:center}
.quote{margin:0 0 var(--s9);padding:0}
.quote p{
  font-family:var(--display);font-style:italic;
  font-size:clamp(22px,3.2vw,34px);line-height:1.38;color:var(--bone);margin:0 0 var(--s4);
}
.quote cite{font-family:var(--sans);font-style:normal;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone)}
.door-h{
  max-width:none;margin-bottom:var(--s4);
  background:linear-gradient(180deg,var(--bone) 30%,var(--amber));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.door-sub{font-size:19px;color:var(--bone);margin:0 0 var(--s9)}

/* ── form ───────────────────────────────────────────── */
.form{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));text-align:left}
.field{display:flex;flex-direction:column;gap:var(--s2)}
.field-wide{grid-column:1/-1}
label{font-family:var(--sans);font-size:13px;letter-spacing:.03em;color:var(--bone)}
.opt{color:var(--bone)}
input,select{
  font-family:var(--serif);font-size:18px;color:var(--bone);
  background:rgba(10,14,15,.92);border:1px solid #2e3739;
  border-radius:2px;padding:var(--s4);width:100%;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
input::placeholder{color:var(--gray)}
input:focus,select:focus{outline:none;border-color:var(--teal);background:rgba(79,209,197,.05)}
input:user-invalid,select:user-invalid{border-color:#d9534f}
select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--bone) 50%),linear-gradient(135deg,var(--bone) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 12px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
select option{background:var(--ink);color:var(--bone)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.submit{
  grid-column:1/-1;justify-self:start;margin-top:var(--s4);
  font-family:var(--sans);font-size:15px;letter-spacing:.06em;
  color:var(--black);background:var(--bone);
  border:none;border-radius:999px;padding:var(--s4) var(--s8);cursor:pointer;
  transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.submit:hover{background:var(--amber);transform:translateY(-2px);box-shadow:0 10px 40px -12px rgba(224,164,88,.6)}
.submit[disabled]{opacity:.45;cursor:default;transform:none;box-shadow:none}
.formnote{grid-column:1/-1;margin:0;font-family:var(--sans);font-size:14px;min-height:1.4em}
.formnote.ok{color:var(--teal)}
.formnote.err{color:#e8a5a2}

/* ── footer ─────────────────────────────────────────── */
.foot{
  border-top:1px solid var(--line);background:var(--deep);
  padding:var(--s9) clamp(var(--s5),6vw,var(--s9)) var(--s7);
  font-family:var(--sans);font-size:14px;color:var(--bone);
}
.foot-grid{display:grid;gap:var(--s7);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:var(--s8)}
.foot p{margin:0 0 var(--s2)}
.foot-brand{font-family:var(--display);font-size:22px;color:var(--bone);margin-bottom:var(--s3)!important}
.foot-addr{line-height:1.7}
.foot-h{color:var(--bone);margin-bottom:var(--s3)!important}
.foot a{color:var(--bone);text-decoration:none;border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)}
.foot a:hover{color:var(--teal);border-bottom-color:var(--teal-deep)}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s4);border-top:1px solid var(--line);padding-top:var(--s5);margin:0}
.latin{font-family:var(--display);font-style:italic;color:var(--bone)}

/* ── reveal ─────────────────────────────────────────────
   Only hidden when JS is running to bring it back. Without JS the
   copy is simply visible — nobody arrives at a blank page. */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .reveal[data-delay="1"]{transition-delay:.13s}
.js .reveal[data-delay="2"]{transition-delay:.26s}
.js .reveal.in{opacity:1;transform:none}

/* ── responsive ─────────────────────────────────────── */
@media (max-width:860px){
  body{font-size:18px}
  .scene{padding:var(--s9) var(--s5);min-height:auto}
  .scene-hero{min-height:100svh}
  .col-left,.col-right{padding-left:0;padding-right:0}
  .topnav a:not(.cta-sm){display:none}
  .navmenu{display:none}          /* en móvil Legal vive en el pie */
  .kicker{margin-top:var(--s7)}
  .steps{gap:var(--s6)}
  .pillar{padding:var(--s5)}
  .scene-door{padding-bottom:var(--s9)}
}

/* ── accessibility ──────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .reveal{opacity:1;transform:none}
  .wordmark{animation:none}
  .scrollcue{animation:none;opacity:1}
}
@media (prefers-contrast:more){
  :root{--gray:#dcd6ca;--gray-dim:#c6bfb1;--line:#3a4344}
}
::selection{background:var(--teal);color:var(--black)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ══ capa de búsqueda (28 ago 2026) ═══════════════════════════════════
   Bloques nuevos: resumen, tabla comparativa, preguntas frecuentes,
   CTA fijo en móvil, botón de compartir, enlaces entre páginas.
   Misma regla de siempre: nada en gris, nada atenuado. */

/* secciones que no necesitan una pantalla entera */
.scene-tight{min-height:auto;padding-top:var(--s9);padding-bottom:var(--s9)}

/* ── resumen / lo importante primero ────────────────── */
.tl-h{font-size:clamp(30px,4vw,46px);max-width:20ch;margin-bottom:var(--s6)}
.takeaways{list-style:none;margin:0 0 var(--s7);padding:0 0 0 var(--s5);
  border-left:1px solid var(--teal-deep);max-width:66ch;display:grid;gap:var(--s4)}
.takeaways li{color:var(--bone);font-size:clamp(17px,1.8vw,20px);line-height:1.6;margin:0}
.takeaways b{font-family:var(--sans);font-weight:500;font-size:.82em;
  letter-spacing:.05em;text-transform:uppercase;color:var(--teal);
  display:block;margin-bottom:var(--s1)}

/* CTA de una línea, sin peso de botón */
.btn-line{
  display:inline-flex;align-items:center;gap:var(--s3);
  font-family:var(--sans);font-size:15px;letter-spacing:.04em;
  color:var(--bone);text-decoration:none;
  border-bottom:1px solid var(--teal-deep);padding-bottom:var(--s1);
  transition:color .3s var(--ease),border-color .3s var(--ease),gap .3s var(--ease);
}
.btn-line:hover{color:var(--teal);border-bottom-color:var(--teal);gap:var(--s4)}
.after-p{margin:0}

/* ── tabla comparativa ──────────────────────────────── */
.cmp-wrap{overflow-x:auto;margin:0 0 var(--s7)}
.cmp{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:15.5px;min-width:560px}
.cmp caption{text-align:left;font-family:var(--sans);font-size:13px;letter-spacing:.04em;
  color:var(--bone);padding-bottom:var(--s4)}
.cmp th,.cmp td{text-align:left;padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--line);vertical-align:top;color:var(--bone);line-height:1.55}
.cmp thead th{font-family:var(--display);font-size:22px;font-weight:400;
  letter-spacing:-.01em;color:var(--teal);border-bottom:1px solid var(--teal-deep)}
.cmp tbody th{font-weight:400;font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--bone);width:22%}
.cmp tbody tr:hover td{background:rgba(79,209,197,.05)}
@media (max-width:720px){
  .cmp{min-width:0;display:block}
  .cmp thead{display:none}
  .cmp tbody,.cmp tr,.cmp td,.cmp th{display:block;width:auto}
  .cmp tr{border-bottom:1px solid var(--line);padding:var(--s5) 0}
  .cmp th,.cmp td{border:none;padding:var(--s1) 0}
  .cmp tbody th{color:var(--teal);margin-bottom:var(--s2)}
  .cmp td::before{content:attr(data-col);display:block;font-size:12px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--teal);margin-top:var(--s3)}
}

/* ── preguntas frecuentes ───────────────────────────── */
.faq{border-top:1px solid var(--line);margin:0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:var(--s4);
  padding:var(--s5) 0;font-family:var(--display);font-weight:400;
  font-size:clamp(20px,2.2vw,26px);line-height:1.25;color:var(--bone);
  transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--teal)}
.faq summary::after{
  content:'';margin-left:auto;flex:none;align-self:center;
  width:9px;height:9px;border-right:1px solid var(--teal);border-bottom:1px solid var(--teal);
  transform:rotate(45deg);transition:transform .35s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding:0 0 var(--s6);max-width:62ch}
.faq .a p{margin:0 0 var(--s4);color:var(--bone);font-size:17.5px;line-height:1.68}
.faq .a p:last-child{margin-bottom:0}
.faq .a a{color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(79,209,197,.32)}
.faq .a a:hover{border-bottom-color:var(--teal)}

/* ── enlaces entre páginas ──────────────────────────── */
.pagelinks{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin:var(--s8) 0 0;padding:0;list-style:none}
.pagelinks a{
  display:block;text-decoration:none;border:1px solid var(--line);border-radius:2px;
  padding:var(--s5);transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.pagelinks a:hover{border-color:rgba(79,209,197,.34);transform:translateY(-2px)}
.pagelinks .pl-h{font-family:var(--display);font-size:23px;color:var(--bone);margin:0 0 var(--s2)}
.pagelinks .pl-s{font-family:var(--sans);font-size:14px;color:var(--bone);margin:0;line-height:1.55}

/* ── migas ──────────────────────────────────────────── */
.crumbs{font-family:var(--sans);font-size:13px;letter-spacing:.03em;color:var(--bone);
  margin:0 0 var(--s5);padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2)}
.crumbs li{display:flex;gap:var(--s2)}
.crumbs li + li::before{content:'/';color:var(--teal-deep)}
.crumbs a{color:var(--bone);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--teal);border-bottom-color:var(--teal-deep)}

/* ── compartir ──────────────────────────────────────── */
.share{
  font-family:var(--sans);font-size:14px;letter-spacing:.03em;
  background:none;border:1px solid var(--line);border-radius:999px;
  color:var(--bone);padding:var(--s2) var(--s5);cursor:pointer;
  display:inline-flex;align-items:center;gap:var(--s2);
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.share:hover{border-color:var(--teal);color:var(--teal)}
.share svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5}

/* ── CTA fijo en móvil ──────────────────────────────── */
.mcta{display:none}
@media (max-width:860px){
  .mcta{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;
    align-items:center;justify-content:space-between;gap:var(--s4);
    padding:var(--s3) var(--s5);
    padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom,0px));
    background:rgba(7,9,10,.95);border-top:1px solid var(--line);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    transform:translateY(115%);transition:transform .45s var(--ease);
  }
  .mcta.on{transform:none}
  .mcta-t{font-family:var(--sans);font-size:13.5px;color:var(--bone);line-height:1.35;margin:0}
  .mcta-b{
    flex:none;font-family:var(--sans);font-size:14px;letter-spacing:.04em;
    color:var(--black);background:var(--bone);text-decoration:none;
    border-radius:999px;padding:var(--s3) var(--s6);
  }
  .foot{padding-bottom:calc(var(--s8) + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){
  .mcta{transition:none}
}

/* El H1 ahora dice de qué va la página. El wordmark sigue siendo lo que se ve;
   la promesa vive dentro del mismo título en vez de en un párrafo suelto. */
.hero-h1{margin:0;font-weight:400;font-size:inherit;letter-spacing:normal}
.hero-h1 .wordmark,.hero-h1 .lead{display:block}
.hero-h1 .lead{font-family:var(--serif);font-weight:300}

/* Páginas de producto: la primera línea después del H1 es la promesa,
   no la fecha de actualización de las legales. */
.docmain h1 + p.lede{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(19px,2.1vw,23px);line-height:1.6;color:var(--bone);
  margin:0 0 var(--s6);max-width:52ch;
}
.docmain .takeaways{padding-left:var(--s5)}
.docmain .takeaways li{padding-left:0;margin-bottom:0}
.docmain .takeaways li::before{display:none}
.docmain .faq .a p{margin:0 0 var(--s4)}
.docmain .pagelinks li{padding-left:0;margin:0}
.docmain .pagelinks li::before{display:none}
.docmain .crumbs li{padding-left:0;margin:0}
.docmain .crumbs li::before{position:static;width:auto;height:auto;background:none;content:'/';color:var(--teal-deep)}
.docmain .crumbs li:first-child::before{content:none}
.docbar .cta-sm{border:1px solid var(--line);border-radius:999px;padding:var(--s2) var(--s4);text-decoration:none}
.docbar .cta-sm:hover{border-color:var(--teal)}
.docbar-nav{display:flex;align-items:center;gap:var(--s5)}

/* ── radiografía ─────────────────────────────────────
   La lente vive por encima del copy y por debajo de la barra. Solo se abre en las
   secciones marcadas con data-xray. El anillo es el único cromo que agrega. */
#xray{position:fixed;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;display:block}
.xray-ring{position:fixed;left:0;top:0;z-index:7;pointer-events:none;border-radius:50%;
  border:1px solid rgba(237,232,223,.16);opacity:0;
  transition:opacity .6s var(--ease)}
.xray-ring::after{content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px solid rgba(79,209,197,.20);transform:scale(1.05)}
[data-xray]{cursor:crosshair}
@media (hover:none),(prefers-reduced-motion:reduce){#xray,.xray-ring{display:none}}

/* el rubro que estás mirando se enciende mientras la lente trae sus documentos */
.industries li.ind-lit{background:rgba(79,209,197,.10);color:var(--teal)}


/* ── las dos cajas son el enlace ──────────────────────
   Los botones sueltos de abajo desaparecieron: el click vive en la caja, que ya
   era el objeto que el visitante estaba mirando. Enlace estirado, para que el
   área clickeable sea la tarjeta entera sin envolver todo en un <a>. */
.pillar-link{position:relative}
.pillar-link h3 a{color:inherit;text-decoration:none}
.pillar-link h3 a::after{content:"";position:absolute;inset:0;border-radius:2px}
.pillar-link:hover h3 a{color:var(--teal)}
.pillar-link:focus-within{border-color:rgba(79,209,197,.34)}
.pill-more{
  font-family:var(--sans);font-size:14px;color:var(--teal);
  margin:var(--s5) 0 0;transition:transform .4s var(--ease);
}
.pillar-link:hover .pill-more{transform:translateX(3px)}