/* Fuentes autoalojadas. Antes venían de fonts.googleapis.com: eso es una
   dependencia de terceros que el brief prohíbe, y además hace que la
   maquetación cambie entre cargas si la fuente no llega a tiempo.
   Solo los subconjuntos latin y latin-ext, que es lo que usa el español. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --indigo:#211C84;      /* principal · 13,43:1 sobre blanco */
  --indigo-700:#16116B;  /* hover */
  --indigo-050:#EEEDF9;  /* superficie */
  --teal:#0AAFA0;        /* señal · nunca lleva texto blanco encima */
  --teal-ink:#067F73;    /* teal legible como texto · 4,89:1 */
  --teal-soft:#5DD3C6;   /* teal sobre fondo oscuro · 10,07:1 */

  --ink-1:#0D1526;       /* títulos · 18,3:1 */
  --ink-2:#4A5878;       /* cuerpo · 7,21:1 */
  --ink-3:#5C6B8A;       /* secundario · 5,4:1 */

  --bg:#FFFFFF;
  --bg-2:#F5F7FB;
  --bg-3:#EEF2F9;
  --line:#E2E7F1;
  --line-2:#C8CFE0;

  --night:#0D1526;
  --night-2:#16203A;
  --night-line:#24304F;
  --night-ink:#C9D2E6;   /* 11,4:1 sobre --night */
  --night-dim:#8FA0C0;   /* 6,6:1 sobre --night */

  --warn-bg:#FFF8E7;
  --warn-line:#C79A2E;
  --warn-ink:#6B4700;    /* 8,9:1 sobre --warn-bg */
  --warn-strong:#8A5A00;
  --warn-on-night:#F2D69B;

  --danger:#C0392B;
  --danger-ink:#A5281B;  /* 6,3:1 sobre blanco */

  --wrap:1180px;
  --gut:24px;
  --r-btn:12px;
  --r-card:16px;
  --r-block:18px;

  --sec-y:clamp(56px,7vw,96px);
  --font-display:'Archivo','Archivo Expanded',system-ui,sans-serif;
  --font-text:'Instrument Sans',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{margin:0;background:var(--bg);color:var(--ink-1);font-family:var(--font-text);
  font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:var(--indigo);text-decoration:none}
a:hover{color:var(--teal-ink)}
button{font:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.sec{padding-top:var(--sec-y);padding-bottom:var(--sec-y);border-bottom:1px solid var(--line)}
.sec--tight{padding-top:clamp(44px,5vw,72px);padding-bottom:clamp(44px,5vw,72px)}
.sec--alt{background:var(--bg-2)}
.sec--night{background:var(--night);color:#fff;border-bottom:0}
.sec--indigo{background:var(--indigo);color:#fff;border-bottom:0;position:relative;overflow:hidden}
.skip{position:absolute;left:-9999px;top:0;background:var(--indigo);color:#fff;padding:12px 18px;z-index:200;border-radius:0 0 10px 0}
.skip:focus{left:0;color:#fff}

/* --- Tipografía ---------------------------------------------------------- */
.display,h1{font-family:var(--font-display);font-weight:800;font-stretch:112%;
  font-size:clamp(38px,5.6vw,70px);line-height:1.02;letter-spacing:-.03em;color:var(--ink-1);text-wrap:balance}
h2,.h2{font-family:var(--font-display);font-weight:800;font-stretch:110%;
  font-size:clamp(28px,3.4vw,42px);line-height:1.08;letter-spacing:-.025em;color:var(--ink-1);text-wrap:balance}
h3,.h3{font-family:var(--font-display);font-weight:800;font-stretch:108%;
  font-size:22px;line-height:1.2;letter-spacing:-.02em;color:var(--ink-1)}
.h4{font-family:var(--font-display);font-weight:800;font-stretch:106%;font-size:18px;letter-spacing:-.01em;color:var(--ink-1)}
.eyebrow{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal-ink);margin-bottom:16px}
.sec--night .eyebrow,.sec--indigo .eyebrow{color:var(--teal-soft)}
.lead{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.sec--night .lead,.sec--indigo .lead{color:var(--night-ink)}
.sec--indigo .lead{color:#D5D3F0}
.sec--night h2,.sec--night h3,.sec--indigo h2,.sec--indigo h1{color:#fff}
p+p{margin-top:16px}
.measure{max-width:46ch}
.measure-wide{max-width:60ch}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* --- Botones -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 24px;border-radius:var(--r-btn);font-weight:600;font-size:16.5px;
  border:1.5px solid transparent;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease}
.btn-lg{min-height:56px;padding:0 28px;font-size:17px}
.btn-sm{min-height:46px;padding:0 20px;font-size:15px;border-radius:10px}
.btn-primary{background:var(--indigo);color:#fff}          /* 13,43:1 */
.btn-primary:hover{background:var(--indigo-700);color:#fff}
.btn-ghost{border-color:var(--line-2);color:var(--indigo);background:var(--bg)}
.btn-ghost:hover{border-color:var(--indigo);color:var(--indigo)}
.btn-white{background:#fff;color:var(--indigo)}
.btn-white:hover{background:var(--indigo-050);color:var(--indigo-700)}
.btn-outline-light{border-color:rgba(255,255,255,.5);color:#fff}
.btn-outline-light:hover{border-color:#fff;color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-row--center{justify-content:center}

/* --- Cabecera ------------------------------------------------------------- */
.testbar{background:var(--night);color:var(--night-ink);font-size:13px}
.testbar .wrap{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding-top:9px;padding-bottom:9px}
.testbar b{color:var(--night-dim);text-transform:uppercase;letter-spacing:.14em;font-size:11px}
.site-head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.head-inner{display:flex;align-items:center;gap:24px;height:72px}
/* El logotipo mide 19 px de alto y el enlace medía lo mismo: como
   objetivo táctil se quedaba a menos de la mitad de los 44 px. El
   área de toque crece; el logo se ve igual. */
.brand{display:inline-flex;align-items:center;min-height:44px}
.brand img{height:19px;width:auto}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-link{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;
  border-radius:8px;color:var(--ink-1);font-size:15px;font-weight:500;background:none;border:0;cursor:pointer}
.nav-link:hover{color:var(--indigo);background:var(--bg-2)}
.nav-link[aria-current="page"]{color:var(--indigo);font-weight:600;background:var(--indigo-050)}
.caret{width:8px;height:8px;border-right:1.6px solid var(--ink-2);border-bottom:1.6px solid var(--ink-2);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.nav-link[aria-expanded="true"] .caret{transform:rotate(225deg) translateY(-2px)}
.nav-item{position:relative}
.dropdown{position:absolute;top:56px;left:-8px;width:390px;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:0 24px 60px -20px rgba(13,21,38,.28);padding:10px;display:grid;gap:2px}
.dropdown[hidden]{display:none}
.dd-item{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:12px;border-radius:10px;align-items:start}
.dd-item:hover{background:var(--bg-2)}
.dd-item b{display:block;color:var(--ink-1);font-weight:600}
.dd-item span{display:block;font-size:14px;color:var(--ink-2);line-height:1.45}
.dd-item .ico{display:flex}
.ico{width:36px;height:36px;border-radius:9px;background:var(--indigo-050);display:flex;align-items:center;justify-content:center}
.burger{display:none;margin-left:auto;width:46px;height:46px;border-radius:10px;border:1px solid var(--line);
  background:#fff;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--ink-1);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{border-top:1px solid var(--line);background:#fff;padding:12px var(--gut) 24px;
  max-height:calc(100vh - 120px);overflow:auto}
.drawer[hidden]{display:none}
.drawer a{display:flex;align-items:center;min-height:52px;padding:8px;font-weight:600;
  color:var(--ink-1);border-bottom:1px solid var(--bg-3)}
.drawer a:last-of-type{border-bottom:0}
.drawer .btn{width:100%;margin-top:16px}
@media (max-width:939px){
  .nav{display:none}
  .burger{display:flex}
}
@media (min-width:940px){ .drawer{display:none} }

/* --- Rejillas y tarjetas -------------------------------------------------- */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(28px,4vw,64px);align-items:center}
.grid-2--top{align-items:start}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:26px}
.card p{margin-top:8px;color:var(--ink-2);font-size:16px;line-height:1.5}
a.card{display:block;transition:border-color .2s ease,transform .2s ease}
a.card:hover{border-color:var(--indigo);transform:translateY(-3px)}
.card .h3{margin-top:20px}
.tag{margin-top:18px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--teal-ink)}
.dot{width:5px;height:5px;border-radius:50%;background:var(--teal);flex:0 0 auto}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.stats li{background:#fff;padding:20px 22px}
.stats b{display:block;font-family:var(--font-display);font-stretch:112%;font-weight:800;
  font-size:30px;color:var(--indigo);letter-spacing:-.02em;line-height:1.1}
.stats span{display:block;font-size:14.5px;color:var(--ink-2);margin-top:4px}
.rows{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.rows li{background:#fff;padding:18px 22px;display:flex;gap:14px;align-items:baseline}
.rows b{font-weight:700;color:var(--indigo);font-size:15px;flex:0 0 84px}
.rows span{color:var(--ink-2);font-size:16px}
.checks{display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2);font-size:16.5px}
.checks svg{flex:0 0 auto;margin-top:3px}
.bullets{display:grid;gap:9px}
.bullets li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2);font-size:16px}
.bullets li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--teal);margin-top:9px}

/* --- Marcadores de posición ----------------------------------------------- */
.note{border:1px dashed var(--warn-line);background:var(--warn-bg);border-radius:12px;padding:16px 20px}
.note b{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--warn-strong)}
.note p{margin-top:8px;color:var(--warn-ink);font-size:15.5px;line-height:1.5}
.note--inline{display:inline-flex;align-items:center;gap:10px;padding:9px 14px;border-radius:10px;
  background:rgba(255,255,255,.08);color:var(--warn-on-night);font-size:13.5px}
.mark{color:var(--warn-strong);font-weight:600}
.sec--night .mark{color:var(--warn-on-night)}

/* --- Fotografía ----------------------------------------------------------- */
.ph{position:relative;border-radius:var(--r-block);overflow:hidden;background:var(--bg-3);margin:0}
.ph img{width:100%;height:100%;object-fit:cover}
.ph.is-missing::after{content:attr(data-label);position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;text-align:center;padding:20px;
  background:repeating-linear-gradient(135deg,var(--bg-3) 0 12px,var(--bg-2) 12px 24px);
  color:var(--ink-3);font-size:14px;font-weight:600}
.ph--tall{aspect-ratio:4/5}
.ph--wide{aspect-ratio:3/2}
.ph--sq{aspect-ratio:1}

/* --- Pestañas de industria ------------------------------------------------ */
.tabs{display:flex;flex-wrap:wrap;gap:9px;margin-top:32px}
.tab{min-height:44px;padding:0 20px;border-radius:999px;cursor:pointer;font-size:15.5px;font-weight:600;
  border:1.5px solid var(--line-2);background:#fff;color:var(--ink-1)}
.tab:hover{border-color:var(--indigo)}
.tab[aria-selected="true"]{background:var(--indigo);border-color:var(--indigo);color:#fff}
.panel{margin-top:24px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-block);
  padding:clamp(24px,3.5vw,40px);display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(24px,4vw,48px);align-items:center;min-width:0}
.panel[hidden]{display:none}
.panel-media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0}

/* --- Comparativa ---------------------------------------------------------- */
.compare{margin-top:36px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.compare-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.compare-row>*{padding:20px 24px;border-bottom:1px solid var(--bg-3);font-size:16.5px;color:var(--ink-2)}
.compare-row:last-child>*{border-bottom:0}
.compare-row>*:last-child{background:#FBFBFE;color:var(--ink-1)}
.compare-head>*{border-bottom:1px solid var(--line);font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.compare-head>*:last-child{background:var(--indigo-050);color:var(--indigo)}
table.tbl{width:100%;border-collapse:collapse;margin-top:28px;font-size:16px}
table.tbl th,table.tbl td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);color:var(--ink-2)}
table.tbl thead th{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
table.tbl tbody th{color:var(--ink-1);font-weight:600}
table.tbl td[data-yes]{color:var(--teal-ink);font-weight:600}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* --- Planes --------------------------------------------------------------- */
.plans{margin-top:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px;align-items:start}
.plan{background:var(--night-2);border:1px solid var(--night-line);border-radius:var(--r-card);padding:28px;position:relative}
.plan h3{color:#fff}
.plan .kicker{display:block;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--night-dim)}
.plan .price{display:block;margin-top:14px;font-family:var(--font-display);font-stretch:112%;font-weight:800;
  font-size:40px;letter-spacing:-.03em;color:#fff;line-height:1}
.plan .price small{font-size:16px;font-weight:600;color:var(--night-dim);font-stretch:100%;letter-spacing:0}
.plan p{margin-top:12px;color:var(--night-ink);font-size:16px}
.plan ul{margin-top:18px;display:grid;gap:9px;color:var(--night-ink);font-size:15.5px}
.plan li{display:flex;gap:9px}
.plan li::before{content:"—";color:var(--teal-soft)}
.plan--featured{background:#fff;border-color:#fff}
.plan--featured .kicker{color:var(--ink-3)}
.plan--featured .price{color:var(--ink-1)}
.plan--featured .price small{color:var(--ink-3)}
.plan--featured p,.plan--featured ul{color:var(--ink-2)}
.plan--featured li::before{color:var(--teal-ink)}
.badge{position:absolute;top:-11px;left:28px;background:var(--teal);color:var(--ink-1);
  font-size:12px;font-weight:700;letter-spacing:.06em;padding:4px 11px;border-radius:999px}

/* --- Acordeón ------------------------------------------------------------- */
.faq{margin-top:32px;max-width:820px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:none;border:0;cursor:pointer;padding:18px 4px;text-align:left;font-size:18px;font-weight:600;color:var(--ink-1)}
.faq-q .chev{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--indigo-050);
  display:flex;align-items:center;justify-content:center;transition:transform .22s ease}
.faq-q[aria-expanded="true"] .chev{transform:rotate(180deg)}
.faq-a{padding:0 44px 24px 4px;color:var(--ink-2);font-size:17px;line-height:1.6;max-width:62ch;text-wrap:pretty}
.faq-a[hidden]{display:none}

/* --- Formulario ----------------------------------------------------------- */
.form{display:grid;gap:20px;max-width:640px}
.field{display:grid;gap:7px}
.field label{font-size:14.5px;font-weight:600;color:var(--ink-1)}
.field .hint{font-size:13.5px;color:var(--ink-3)}
.input,select.input,textarea.input{width:100%;min-height:52px;border:1.5px solid var(--line-2);
  border-radius:10px;padding:13px 14px;font-size:16px;font-family:var(--font-text);color:var(--ink-1);background:#fff}
textarea.input{min-height:120px;resize:vertical}
.input:focus{border-color:var(--indigo);outline:3px solid rgba(33,28,132,.18);outline-offset:0}
.field.is-error .input{border-color:var(--danger)}
.err{display:none;gap:7px;align-items:flex-start;color:var(--danger-ink);font-size:14.5px}
.field.is-error .err{display:flex}
.err svg{flex:0 0 auto;margin-top:2px}
.form-ok{display:none;border:1px solid var(--teal);background:#EAF8F6;border-radius:12px;padding:18px 20px;color:#04564E}
.form-ok.is-on{display:block}

/* --- Pie ------------------------------------------------------------------ */
.site-foot{background:var(--night);color:var(--night-dim)}
.site-foot .wrap{padding-top:clamp(48px,6vw,72px);padding-bottom:32px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:32px}
.site-foot img{height:20px;width:auto;filter:brightness(0) invert(1)}
.site-foot h4{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7086A5}
.site-foot ul{margin-top:14px;display:grid;gap:10px;font-size:15px}
.site-foot a{color:var(--night-ink)}
.site-foot a:hover{color:var(--teal-soft)}
.site-foot p{margin-top:16px;font-size:15px;line-height:1.55;max-width:26ch;color:var(--night-dim)}
.foot-legal{margin-top:40px;padding-top:22px;border-top:1px solid var(--night-line);
  display:flex;flex-wrap:wrap;gap:12px 28px;font-size:14px;color:#7086A5}
.foot-legal a{color:var(--night-dim)}

/* El pie es fondo oscuro pero no lleva .sec--night, así que .mark se
   quedaba con el ámbar de fondo claro: 3,07:1, por debajo de AA. El
   token para fondo oscuro ya existía sin usarse aquí — 12,90:1. */
.site-foot .mark{color:var(--warn-on-night)}

/* Donde se toca con el dedo, 44 px. Los enlaces del pie medían 19-22.
   El interlineado baja a 2 px para que la altura del bloque no se
   dispare al crecer cada objetivo. */
@media (max-width:939px){
  .site-foot ul{gap:2px}
  .site-foot ul a{display:flex;align-items:center;min-height:44px}
  .foot-legal{gap:0 28px}
  .foot-legal a{display:inline-flex;align-items:center;min-height:44px}
}

/* --- Motivo de marca ------------------------------------------------------ */
.atom{position:absolute;pointer-events:none;user-select:none}
.atom--hero{right:-90px;top:-40px;width:540px;max-width:70vw;opacity:.05;animation:drift 14s ease-in-out infinite alternate}
.atom--cta{left:-70px;bottom:-110px;width:420px;opacity:.09;filter:brightness(0) invert(1)}
@keyframes drift{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(0,-14px,0) rotate(8deg)}}

/* --- Entrada -------------------------------------------------------------- */
.reveal{opacity:1}
.js-motion .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .55s cubic-bezier(.22,.7,.25,1),transform .55s cubic-bezier(.22,.7,.25,1)}
.js-motion .reveal.is-in{opacity:1;transform:none}

/* --- Utilidades ----------------------------------------------------------- */
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}
.mt-32{margin-top:32px}.mt-40{margin-top:40px}
.center{text-align:center}
.center .lead,.center h1,.center h2{margin-left:auto;margin-right:auto}
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .wrap{padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(48px,6vw,80px);position:relative}
.pill{display:inline-flex;align-items:center;gap:9px;background:var(--indigo-050);color:var(--indigo);
  font-size:13px;font-weight:600;letter-spacing:.04em;padding:7px 14px;border-radius:999px;margin-bottom:26px}
.crumb{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--ink-3);margin-bottom:20px}
.crumb a{color:var(--ink-3)}
/* «Inicio» medía 22 px de alto: la mitad del objetivo táctil mínimo. */
@media (max-width:939px){ .crumb a{display:inline-flex;align-items:center;min-height:44px} }
.crumb a:hover{color:var(--indigo)}

/* --- Órbita de módulos ---------------------------------------------------- */
/* Las 3 elipses SON el símbolo: giran lento. Un electrón recorre la pista que
   une los 4 módulos y cada uno se enciende al pasar. Todo en CSS y en un solo
   reloj de 16 s, así que no depende de JavaScript ni del scroll.
   El estado en reposo —sin animación— es TODO encendido y la estela completa,
   que es lo que ve quien tiene el movimiento reducido. */
.orbita{margin:clamp(32px,5vw,56px) auto 0;display:flex;flex-direction:column;
  align-items:center;gap:clamp(20px,3vw,30px)}
.orb-escena{position:relative;width:min(420px,74vw);aspect-ratio:1}
.orb-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orb-estela{stroke-dasharray:251.33 0}
.orb-electron,.orb-halo{opacity:0}

.orb-nodo{position:absolute;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:9px;white-space:nowrap;
  padding:7px 15px 7px 7px;border-radius:100px;
  background:var(--bg);border:1px solid var(--teal);
  box-shadow:0 4px 24px rgba(10,175,160,.20)}
.orb-dot{width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:var(--teal);color:var(--ink-1);display:flex;align-items:center;justify-content:center}
.orb-dot svg{width:18px;height:18px}
.orb-lbl{font-size:13px;font-weight:600;color:var(--ink-1);line-height:1}
.orb-pie{max-width:52ch;text-align:center;color:var(--ink-2)}

@media (prefers-reduced-motion:no-preference){
  .orb-orbes{transform-origin:50px 50px;animation:orb-gira 60s linear infinite}
  /* la pista es un círculo de radio 40 que arranca arriba, a las 12 */
  .orb-viajero{transform-box:view-box;transform-origin:50px 50px;
    animation:orb-viaje 16s linear infinite}
  .orb-electron,.orb-halo{opacity:1}
  .orb-estela{stroke-dasharray:45.24 206.09;animation:orb-estela 16s linear infinite}
  /* cada nodo se enciende cuando el electrón lo alcanza: 45° a los 2 s,
     y uno más cada 4 s. El resto del ciclo queda en reposo. */
  .orb-nodo{border-color:var(--line);box-shadow:0 2px 16px rgba(13,21,38,.07);
    animation:orb-toque 16s linear infinite;
    animation-delay:calc(2s + var(--i) * 4s)}
  .orb-dot{background:var(--bg-2);color:var(--teal-ink)}
  .orb-lbl{color:var(--ink-2)}
}
@keyframes orb-gira{to{transform:rotate(360deg)}}
@keyframes orb-viaje{to{transform:rotate(360deg)}}
/* la estela va DETRÁS del electrón: con dasharray 18/82 y offset 0 el
   trazo cae por delante, así que arranca desplazado su propio largo */
@keyframes orb-estela{from{stroke-dashoffset:45.24}to{stroke-dashoffset:-206.09}}
@keyframes orb-toque{
  0%,14%{border-color:var(--teal);box-shadow:0 4px 24px rgba(10,175,160,.20)}
  30%,100%{border-color:var(--line);box-shadow:0 2px 16px rgba(13,21,38,.07)}
}
@keyframes orb-toque-dot{
  0%,14%{background:var(--teal);color:var(--ink-1)}
  30%,100%{background:var(--bg-2);color:var(--teal-ink)}
}
@media (prefers-reduced-motion:no-preference){
  .orb-dot{animation:orb-toque-dot 16s linear infinite;
    animation-delay:calc(2s + var(--i) * 4s)}
}

@media (max-width:600px){
  .orb-escena{width:min(300px,72vw)}
  .orb-nodo{gap:7px;padding:5px 12px 5px 5px}
  .orb-dot{width:28px;height:28px}
  .orb-dot svg{width:15px;height:15px}
  .orb-lbl{font-size:11px}
}

/* --- Hero: la venta atravesando el sistema -------------------------------- */
/* No es una captura del producto —el copy promete justo lo contrario— sino el
   recorrido de un movimiento real. Reloj común de 12 s, todo en CSS.
   En reposo (sin animación) los 4 pasos están completos y visibles: es lo que
   ve quien tiene el movimiento reducido, y lo que queda si el CSS de
   animación no llega. */
.hero-grid{display:grid;gap:clamp(32px,4vw,56px);align-items:center}
.hero-txt h1{max-width:15ch}
.hero-txt .lead{max-width:52ch}
@media (min-width:940px){
  .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .hero-grid .stats{grid-column:1 / -1}
  .hero-txt h1{font-size:clamp(36px,3.9vw,54px);max-width:17ch}
}

.flujo{background:#fff;border:1px solid var(--line);border-radius:var(--r-block);
  padding:18px;box-shadow:0 18px 50px rgba(13,21,38,.09);min-width:0}
.flujo-top{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.flujo-t{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-1)}
.flujo-t i{width:7px;height:7px;border-radius:50%;background:var(--teal);flex-shrink:0}
.flujo-h{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}

.flujo-paso{display:grid;grid-template-columns:36px 1fr 20px;gap:12px;align-items:center;
  padding:12px 8px;border-radius:12px;min-width:0}
.fp-ico{width:36px;height:36px;border-radius:10px;background:var(--indigo-050);
  display:flex;align-items:center;justify-content:center;color:var(--indigo)}
.fp-ico svg{width:19px;height:19px}
.fp-txt{min-width:0}
.fp-txt>b{display:block;font-size:14.5px;font-weight:600;color:var(--ink-1);line-height:1.3}
.fp-txt>span{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis}
.fp-num{color:var(--teal-ink);font-weight:700}
.fp-txt s{color:var(--ink-3);text-decoration-thickness:1px}
.fp-ok{width:20px;height:20px;border-radius:50%;background:var(--teal);color:var(--ink-1);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fp-ok svg{width:12px;height:12px}
/* los 3 estados ocupan la MISMA línea y solo cambia cuál se ve.
   Va con `.fp-txt` delante: `.fp-txt>span{display:block}` tiene más
   especificidad y si no, los tres se apilan uno debajo del otro. */
.fp-txt .fp-estados{display:grid}
.fp-estados em{grid-area:1/1;font-style:normal;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.fp-estados .e1,.fp-estados .e2{opacity:0;visibility:hidden}
.fp-estados .e3{color:var(--teal-ink);font-weight:600}
.flujo-pie{opacity:1;margin-top:10px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--ink-3);text-align:center}

@media (prefers-reduced-motion:no-preference){
  .flujo-paso{opacity:.35;animation:fp-entra 12s ease-in-out infinite;
    animation-delay:calc(var(--i) * 1.6s)}
  .fp-ok{transform:scale(.4);opacity:0;animation:fp-ok 12s ease-in-out infinite;
    animation-delay:calc(.9s + var(--i) * 1.6s)}
  .fp-estados .e1{animation:fp-e1 12s linear infinite}
  .fp-estados .e2{animation:fp-e2 12s linear infinite}
  .fp-estados .e3{animation:fp-e3 12s linear infinite}
}
@keyframes fp-entra{
  0%{opacity:.35;background:transparent}
  4%,52%{opacity:1;background:var(--bg-2)}
  58%,93%{opacity:1;background:transparent}
  100%{opacity:.35;background:transparent}
}
@keyframes fp-ok{
  0%{opacity:0;transform:scale(.4)}
  5%,93%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.6)}
}
/* Los tres estados comparten celda. Van SIN animation-delay y con las
   ventanas en porcentaje del mismo reloj de 12 s: un delay desplaza la
   frontera de iteración y deja el tercero pintado debajo de los otros dos
   en cada vuelta. «Validando ante la DIAN» dura ~1 s, que es el
   diferenciador de la página y antes no daba tiempo de leerse.
   e3 arranca visible, así el panel abre mostrando el estado final. */
@keyframes fp-e1{0%,13.3%{opacity:0;visibility:hidden}14%,17%{opacity:1;visibility:visible}17.4%,100%{opacity:0;visibility:hidden}}
@keyframes fp-e2{0%,17.5%{opacity:0;visibility:hidden}18.2%,25.5%{opacity:1;visibility:visible}26%,100%{opacity:0;visibility:hidden}}
@keyframes fp-e3{0%,12.8%{opacity:1;visibility:visible}13.3%,26%{opacity:0;visibility:hidden}26.6%,100%{opacity:1;visibility:visible}}

@media (max-width:600px){
  .flujo{padding:14px}
  .flujo-paso{grid-template-columns:32px 1fr 18px;gap:10px;padding:10px 4px}
  .fp-ico{width:32px;height:32px;border-radius:9px}
  .fp-ico svg{width:17px;height:17px}
  .fp-txt>b{font-size:14px}
  .fp-txt>span{font-size:12.5px}
}

/* Imprimir desde el hero dejaba en blanco todo lo que aún no se había
   revelado: al no haber intersección, los .reveal siguen en opacity 0. */
@media print{ .js-motion .reveal{opacity:1;transform:none;transition:none} }

/* --- Línea de tiempo de los 30 días --------------------------------------- */
/* Va sobre fondo oscuro. En reposo —movimiento reducido, o si el CSS de
   animación no llega— las 4 etapas se ven completas y la barra llena. */
.linea{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:0;
  margin:36px 0 8px;padding:0;list-style:none;position:relative}
.ln-etapa,.ln-meta{position:relative;padding:26px 14px 0 0;min-width:0}
/* el riel y su relleno */
.ln-etapa::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;
  background:var(--night-line)}
.ln-etapa::after{content:"";position:absolute;left:0;top:9px;height:2px;width:100%;
  background:var(--teal);transform-origin:left;transform:scaleX(1)}
.ln-etapa .ln-dia{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal-soft);margin-bottom:5px}
.ln-etapa .ln-nom,.ln-meta .ln-nom{display:block;font-size:14.5px;color:#fff;line-height:1.3}
/* el punto de cada etapa */
.ln-etapa .ln-dia::before{content:"";position:absolute;left:0;top:3px;width:14px;height:14px;
  border-radius:50%;background:var(--teal);border:3px solid var(--night)}
.ln-meta{padding-left:16px}
.ln-bandera{position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;
  background:var(--teal);color:var(--ink-1);display:flex;align-items:center;justify-content:center}
.ln-bandera svg{width:12px;height:12px}
.ln-meta .ln-nom{margin-top:26px;font-weight:600}

@media (prefers-reduced-motion:no-preference){
  /* 🔴 `backwards` es obligatorio aquí: durante el animation-delay el elemento
     muestra su estado BASE, no el primer fotograma. Sin esto los cuatro rieles
     arrancan llenos, se apagan de golpe al llegar su turno y se vuelven a
     llenar. Con `backwards` la línea empieza vacía y se va llenando, que es lo
     que tiene que contar. */
  .ln-etapa::after{animation:ln-riel 14s linear infinite backwards;
    animation-delay:calc(var(--i) * 2.4s)}
  .ln-etapa .ln-dia::before{animation:ln-punto 14s linear infinite backwards;
    animation-delay:calc(var(--i) * 2.4s)}
  .ln-etapa .ln-nom,.ln-etapa .ln-dia{animation:ln-txt 14s linear infinite backwards;
    animation-delay:calc(var(--i) * 2.4s)}
  .ln-bandera{animation:ln-punto 14s linear infinite backwards;animation-delay:9.6s}
  .ln-meta .ln-nom{animation:ln-txt 14s linear infinite backwards;animation-delay:9.6s}
}
@keyframes ln-riel{ 0%{transform:scaleX(0)} 15%,100%{transform:scaleX(1)} }
@keyframes ln-punto{ 0%{transform:scale(.35);opacity:.4} 12%,100%{transform:scale(1);opacity:1} }
@keyframes ln-txt{ 0%{opacity:.45} 12%,100%{opacity:1} }

@media (max-width:768px){
  .linea{grid-template-columns:1fr;gap:0}
  .ln-etapa,.ln-meta{padding:0 0 22px 26px}
  .ln-etapa::before{left:6px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .ln-etapa::after{left:6px;top:0;width:2px;height:100%;
    transform-origin:top;transform:scaleY(1)}
  .ln-etapa .ln-dia::before{left:0;top:0}
  .ln-meta{padding-left:26px}
  .ln-meta .ln-nom{margin-top:0}
  .ln-bandera{top:-2px}
}
@keyframes ln-riel-y{ 0%{transform:scaleY(0)} 15%,100%{transform:scaleY(1)} }
@media (prefers-reduced-motion:no-preference){
  @media (max-width:768px){ .ln-etapa::after{animation-name:ln-riel-y} }
}

/* Rótulo sobre la foto de cada industria. Sin él las seis se leen como la
   misma imagen: el sector no está escrito en ninguna parte de la foto. */
.ph{position:relative}
.ph-pie{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;
  background:linear-gradient(to top,rgba(13,21,38,.88) 30%,rgba(13,21,38,0));
  color:#fff;pointer-events:none}
.ph-pie b{display:block;font-family:var(--font-display);font-weight:800;
  font-stretch:106%;font-size:17px;letter-spacing:-.01em}
.ph-pie span{display:block;font-size:13.5px;color:var(--night-ink);margin-top:2px}

/* El mismo panel del hero, en las 4 páginas de módulo: cada una con su
   propio recorrido. Ancho acotado porque ahí va a una sola columna. */
.flujo--sol{max-width:560px;margin-top:36px}

/* El panel de módulo va al lado del titular, no debajo. A un ancho por
   debajo de 940 px la rejilla vuelve a una columna sola y el panel cae
   después de los botones, que es el orden de lectura correcto. */
@media (min-width:940px){
  .hero-grid .flujo--sol{margin-top:0;max-width:none;align-self:center}
}
.hero-grid .hero-txt .crumb{margin-bottom:16px}

/* Los enlaces sueltos dentro de .rows —la lista de sugerencias de 404— van
   en línea con el texto, así que medían 20 px de alto. En móvil se les da
   el área táctil mínima sin romper el flujo de la frase. */
@media (max-width:939px){
  .rows a{display:inline-flex;align-items:center;min-height:44px}
}