/* Sitio de Proinfo. Generado a partir del prototipo aprobado.
   Los estilos de estado (--st-*) mapean 1:1 con el campo estado del catalogo. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
img,svg{max-width:100%}
[hidden]{display:none!important}
:root{
  --ink:#0B1220;
  --n-0:#ffffff; --n-50:#F7F9FC; --n-100:#EEF2F7; --n-200:#E1E8F0; --n-300:#CBD5E1;
  --n-400:#94A3B8; --n-500:#64748B; --n-600:#475569; --n-700:#334155; --n-800:#1E293B;
  --n-900:#0F172A; --n-950:#070D18;

  --brand:#2563EB; --brand-strong:#1D4ED8; --brand-soft:#EFF6FF; --brand-line:#BFDBFE;

  --text:#0F172A; --text-muted:#475569; --text-subtle:#64748B; --text-invert:#F4F7FB;
  --surface:#ffffff; --surface-alt:#F7F9FC; --surface-sunken:#EEF2F7; --surface-ink:#0B1220;
  --border:#E1E8F0; --border-strong:#CBD5E1; --border-ink:rgba(255,255,255,.14);

  --st-activo-fg:#047857; --st-activo-bg:#ECFDF5; --st-activo-bd:#A7F3D0;
  --st-disponible-fg:#1D4ED8; --st-disponible-bg:#EFF6FF; --st-disponible-bd:#BFDBFE;
  --st-consultar-fg:#B45309; --st-consultar-bg:#FFFBEB; --st-consultar-bd:#FDE68A;
  --st-proximamente-fg:#4F46E5; --st-proximamente-bg:#EEF2FF; --st-proximamente-bd:#C7D2FE;

  --rule:linear-gradient(90deg,#22D3EE,#3B82F6,#6366F1);

  --f-display:'Archivo','Archivo Narrow',system-ui,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;

  --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-lg:1.0625rem;
  --fs-xl:clamp(1.15rem,1.05rem + .4vw,1.35rem);
  --fs-2xl:clamp(1.4rem,1.2rem + .9vw,1.85rem);
  --fs-3xl:clamp(1.75rem,1.35rem + 1.7vw,2.4rem);
  --fs-4xl:clamp(2.05rem,1.45rem + 2.6vw,3.1rem);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:80px;
  --section-y:clamp(3rem,5.5vw,5.5rem);
  --container:1180px;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px;
  --e1:0 1px 2px rgba(11,18,32,.05), 0 1px 3px rgba(11,18,32,.04);
  --e2:0 6px 18px rgba(11,18,32,.07);
  --e3:0 18px 44px rgba(11,18,32,.13);
  --ring:0 0 0 3px rgba(37,99,235,.35);
  --dur:170ms; --ease:cubic-bezier(.4,0,.2,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --text:#E7EDF6; --text-muted:#A5B3C7; --text-subtle:#7F8FA6; --text-invert:#F4F7FB;
    --surface:#111A28; --surface-alt:#0B1220; --surface-sunken:#0A1019; --surface-ink:#070D18;
    --border:#1F2C3F; --border-strong:#31415A; --border-ink:rgba(255,255,255,.12);
    --brand:#60A5FA; --brand-strong:#93C5FD; --brand-soft:#132542; --brand-line:#1E3A63;
    --st-activo-fg:#6EE7B7; --st-activo-bg:#07271D; --st-activo-bd:#12543C;
    --st-disponible-fg:#93C5FD; --st-disponible-bg:#0E2141; --st-disponible-bd:#1D3F6E;
    --st-consultar-fg:#FCD34D; --st-consultar-bg:#2A1E05; --st-consultar-bd:#5A3F0B;
    --st-proximamente-fg:#A5B4FC; --st-proximamente-bg:#171A3D; --st-proximamente-bd:#2E3270;
    --e1:0 1px 2px rgba(0,0,0,.4); --e2:0 6px 18px rgba(0,0,0,.45); --e3:0 18px 44px rgba(0,0,0,.55);
    --ring:0 0 0 3px rgba(96,165,250,.45);
  }
}
:root[data-theme="dark"]{
  --text:#E7EDF6; --text-muted:#A5B3C7; --text-subtle:#7F8FA6; --text-invert:#F4F7FB;
  --surface:#111A28; --surface-alt:#0B1220; --surface-sunken:#0A1019; --surface-ink:#070D18;
  --border:#1F2C3F; --border-strong:#31415A; --border-ink:rgba(255,255,255,.12);
  --brand:#60A5FA; --brand-strong:#93C5FD; --brand-soft:#132542; --brand-line:#1E3A63;
  --st-activo-fg:#6EE7B7; --st-activo-bg:#07271D; --st-activo-bd:#12543C;
  --st-disponible-fg:#93C5FD; --st-disponible-bg:#0E2141; --st-disponible-bd:#1D3F6E;
  --st-consultar-fg:#FCD34D; --st-consultar-bg:#2A1E05; --st-consultar-bd:#5A3F0B;
  --st-proximamente-fg:#A5B4FC; --st-proximamente-bg:#171A3D; --st-proximamente-bd:#2E3270;
  --e1:0 1px 2px rgba(0,0,0,.4); --e2:0 6px 18px rgba(0,0,0,.45); --e3:0 18px 44px rgba(0,0,0,.55);
  --ring:0 0 0 3px rgba(96,165,250,.45);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--surface-alt); color:var(--text);
  font-family:var(--f-body); font-size:var(--fs-base); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--f-display); letter-spacing:-.022em; line-height:1.14; text-wrap:balance; margin:0}
p{margin:0}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--r-sm)}
img{max-width:100%}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.wrap{max-width:var(--container); margin:0 auto; padding-inline:var(--s4)}
@media(min-width:720px){.wrap{padding-inline:var(--s5)}}
.sec{padding-block:var(--section-y)}
/* Que la barra fija no tape el titulo al saltar a un ancla */
.sec[id]{scroll-margin-top:96px}
.sec--alt{background:var(--surface)}
.eyebrow{
  font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.11em;
  text-transform:uppercase; color:var(--text-subtle); margin:0 0 var(--s3)
}
.lede{color:var(--text-muted); font-size:var(--fs-lg); max-width:62ch}
.sec-head{margin-bottom:var(--s6)}
.sec-head h2{font-size:var(--fs-3xl); margin-bottom:var(--s3)}

/* ---------- prototype ribbon ---------- */
.proto{
  background:var(--ink); color:#93C5FD; font-family:var(--f-mono);
  font-size:var(--fs-xs); letter-spacing:.04em; text-align:center;
  padding:6px var(--s4); border-bottom:1px solid var(--border-ink);
}
.proto b{color:#fff; font-weight:500}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-in{display:flex; align-items:center; gap:var(--s4); min-height:62px; flex-wrap:wrap}
.brand{display:flex; align-items:baseline; gap:8px; font-family:var(--f-display); font-weight:700; font-size:1.15rem; color:var(--text); letter-spacing:-.03em}
.brand:hover{text-decoration:none}
.brand span{color:var(--brand)}
.nav-links{display:flex; gap:2px; flex:1; flex-wrap:wrap; list-style:none; margin:0; padding:0}
.nav-links{align-items:center}
.nav-links li{display:flex}
/* El <button> no hereda line-height: la hoja del navegador se lo resetea a normal
   con el atajo `font`. Sin fijarlo, queda mas bajo que los <a> y el menu se desalinea. */
/* .nav-top se usa en las dos barras, así que no va acotado a .nav-links:
   fuera de ahí el <button> quedaba con el gris por defecto del navegador. */
.nav-links a,
.nav-top{
  display:flex; align-items:center; padding:7px 11px; border-radius:var(--r-sm);
  font-size:var(--fs-sm); line-height:1.5; font-weight:500; color:var(--text-muted);
  background:none; border:0; margin:0; font-family:var(--f-body); cursor:pointer;
  white-space:nowrap; text-align:left;
}
.nav-links a:hover,
.nav-top:hover{background:var(--surface-sunken); color:var(--text); text-decoration:none}
.nav-links a[aria-current="page"],
.nav-top[aria-current="page"]{color:var(--brand); background:var(--brand-soft)}
.nav-top span{
  font-size:.7em; margin-left:5px; opacity:.7; line-height:1;
  display:inline-block; transition:transform var(--dur) var(--ease);
}
.nav-top[aria-expanded="true"] span{transform:rotate(180deg)}

/* Desplegable de Productos */
.nav-drop{position:relative; display:block}
.nav-panel{
  position:absolute; top:calc(100% + 6px); left:0; z-index:60; min-width:335px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:var(--e3); padding:6px;
}
/* Dentro del panel los enlaces son de dos renglones: vuelven a ser bloque,
   porque la regla de la barra los hace flex en una sola linea. */
.nav-panel a{display:block; padding:9px 11px; white-space:normal}
.nav-panel a b{display:block; font-family:var(--f-display); font-size:var(--fs-sm); color:var(--text); font-weight:600}
.nav-panel a small{display:block; font-size:var(--fs-xs); line-height:1.45; color:var(--text-subtle); margin-top:2px; white-space:normal}
.nav-panel a:hover b{color:var(--brand)}
.nav-panel a[aria-current="page"] b{color:var(--brand)}
@media(max-width:640px){
  /* En pantalla angosta el panel flotante se sale: pasa a fluir en la barra. */
  .nav-drop{position:static; width:100%}
  .nav-panel{position:static; min-width:0; width:100%; box-shadow:none; margin-top:6px}
}
.nav-cta{display:flex; gap:var(--s2); align-items:center}
.theme-btn{
  border:1px solid var(--border); background:var(--surface); color:var(--text-muted);
  width:34px; height:34px; border-radius:var(--r-sm); cursor:pointer; font-size:15px; line-height:1;
}
.theme-btn:hover{border-color:var(--border-strong); color:var(--text)}

/* Menú de celular. Sin esto, a 390 px los enlaces se repartían alrededor del
   logo y la barra quedaba de cuatro renglones. */
.nav-burger{
  display:none; width:36px; height:34px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); border-radius:var(--r-sm);
  cursor:pointer; font-size:16px; line-height:1; align-items:center; justify-content:center;
}
.nav-burger:hover{border-color:var(--border-strong)}
@media(max-width:820px){
  .nav-burger{display:flex; order:2; margin-left:auto}
  .nav-cta{order:3; margin-left:var(--s2)}
  /* flex-basis:100% y no solo width: la regla base trae flex:1, cuya base 0%
     gana y deja el menu como una columna angosta al lado del logo. */
  .nav-links{display:none; order:4; flex:1 0 100%; flex-direction:column;
             align-items:stretch; padding-bottom:var(--s3)}
  .nav-links.abierto{display:flex}
  .nav-links a, .nav-top{white-space:normal}
}
@media(max-width:560px){
  /* El botón de asesor no entra: Contacto ya está en el menú. */
  .nav-cta .btn-primary{display:none}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  padding:10px 18px; border-radius:var(--r-sm); font-weight:600; font-size:var(--fs-sm);
  border:1px solid transparent; cursor:pointer; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  font-family:var(--f-body);
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-strong)}
.btn-outline{background:transparent; color:var(--text); border-color:var(--border-strong)}
.btn-outline:hover{background:var(--surface-sunken)}
.btn-ghost{background:transparent; color:var(--brand); padding-inline:0}
.btn-ghost:hover{color:var(--brand-strong); text-decoration:underline}
.on-ink .btn-outline{color:#fff; border-color:var(--border-ink)}
.on-ink .btn-outline:hover{background:rgba(255,255,255,.08)}
.btn-sm{padding:7px 13px; font-size:var(--fs-xs)}

/* ---------- hero ---------- */
.hero{background:var(--surface-ink); color:var(--text-invert); position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--rule)}
.hero-in{padding-block:clamp(2.75rem,6vw,5rem); position:relative}
.hero h1{font-size:var(--fs-4xl); color:#fff; max-width:19ch}
.hero .lede{color:#B9C6D9; margin-top:var(--s4); font-size:clamp(1rem,.95rem + .35vw,1.18rem)}
.badge-line{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono);
  font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase;
  color:#93C5FD; border:1px solid var(--border-ink); border-radius:var(--r-pill);
  padding:5px 13px; margin-bottom:var(--s5);
}
.hero-btns{display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s6)}

/* ---------- kpi ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden}
.kpi{background:var(--surface); padding:var(--s5) var(--s4)}
.kpi b{display:block; font-family:var(--f-display); font-size:clamp(1.6rem,1.3rem + 1.1vw,2.1rem); font-weight:700; letter-spacing:-.03em; color:var(--text); font-variant-numeric:tabular-nums; line-height:1.1}
.kpi span{display:block; margin-top:6px; font-size:var(--fs-sm); color:var(--text-muted); line-height:1.45}
.on-ink .kpis{background:var(--border-ink); border-color:var(--border-ink)}
.on-ink .kpi{background:rgba(255,255,255,.035)}
.on-ink .kpi b{color:#fff}
.on-ink .kpi span{color:#A9B8CC}

/* ---------- grids & cards ---------- */
.grid{display:grid; gap:var(--s5)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3);
}
.card h3{font-size:var(--fs-xl)}
.card p{color:var(--text-muted); font-size:var(--fs-sm); line-height:1.6}
.card .btn{align-self:flex-start; margin-top:auto}
.card-ico{
  width:38px; height:38px; border-radius:var(--r-sm); display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand); border:1px solid var(--brand-line);
}
.card-ico svg{width:20px; height:20px}

/* ---------- badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); font-weight:600;
  padding:2px 9px; border-radius:var(--r-pill); border:1px solid; white-space:nowrap;
  font-family:var(--f-body);
}
.badge::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor}
.badge[data-e="activo"]{color:var(--st-activo-fg); background:var(--st-activo-bg); border-color:var(--st-activo-bd)}
.badge[data-e="disponible"]{color:var(--st-disponible-fg); background:var(--st-disponible-bg); border-color:var(--st-disponible-bd)}
.badge[data-e="consultar"]{color:var(--st-consultar-fg); background:var(--st-consultar-bg); border-color:var(--st-consultar-bd)}
.badge[data-e="proximamente"]{color:var(--st-proximamente-fg); background:var(--st-proximamente-bg); border-color:var(--st-proximamente-bd)}

/* ---------- area cards ---------- */
.area-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3);
  color:inherit; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.area-card:hover{border-color:var(--brand-line); box-shadow:var(--e2); text-decoration:none}
.area-card h3{font-size:var(--fs-lg); display:flex; align-items:center; justify-content:space-between; gap:var(--s3)}
.area-card .count{font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--text-subtle); font-weight:400; letter-spacing:.02em}
.area-card p{color:var(--text-muted); font-size:var(--fs-sm)}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto}
.chip{
  font-size:var(--fs-xs); color:var(--text-subtle); background:var(--surface-sunken);
  border:1px solid var(--border); border-radius:var(--r-sm); padding:2px 7px;
}

/* ---------- module cards ---------- */
.mods{display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.mod{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:var(--s5); scroll-margin-top:110px;
}
.mod-top{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s2)}
.mod h3{font-size:var(--fs-lg)}
.mod > p{color:var(--text-muted); font-size:var(--fs-sm); margin-top:var(--s2)}
.mod .prueba{
  display:inline-block; margin-top:var(--s3); font-family:var(--f-mono); font-size:var(--fs-xs);
  color:var(--text-subtle); border-left:2px solid var(--brand-line); padding-left:9px;
}
.mod details{margin-top:var(--s3); border-top:1px solid var(--border); padding-top:var(--s3)}
.mod summary{
  cursor:pointer; font-size:var(--fs-sm); font-weight:600; color:var(--brand);
  list-style:none; display:flex; align-items:center; gap:6px;
}
.mod summary::-webkit-details-marker{display:none}
.mod summary::after{content:"+"; font-family:var(--f-mono); margin-left:auto; color:var(--text-subtle)}
.mod details[open] summary::after{content:"–"}
.mod details p{font-size:var(--fs-sm); color:var(--text-muted); margin-top:var(--s3)}
.mod details ul{margin:var(--s3) 0 0; padding-left:18px; font-size:var(--fs-sm); color:var(--text-muted)}
.mod details li{margin-bottom:4px}

/* ---------- filters / search ---------- */
.toolbar{display:flex; gap:var(--s3); flex-wrap:wrap; align-items:center; margin-bottom:var(--s5)}
.search{
  flex:1; min-width:min(100%,220px); display:flex; align-items:center; gap:8px;
  border:1px solid var(--border); background:var(--surface); border-radius:var(--r-sm); padding:8px 12px;
}
.search input{border:0; background:transparent; color:var(--text); font-family:var(--f-body); font-size:var(--fs-sm); width:100%; outline:none}
.search svg{width:15px; height:15px; color:var(--text-subtle); flex:none}
.fchips{display:flex; gap:6px; flex-wrap:wrap}
.fchip{
  border:1px solid var(--border); background:var(--surface); color:var(--text-muted);
  font-size:var(--fs-xs); font-weight:600; padding:6px 12px; border-radius:var(--r-pill); cursor:pointer;
  font-family:var(--f-body);
}
.fchip[aria-pressed="true"]{background:var(--brand); border-color:var(--brand); color:#fff}
.empty{color:var(--text-subtle); font-size:var(--fs-sm); padding:var(--s6) 0; text-align:center}

/* ---------- subnav ----------
   Antes eran 13 opciones en una fila con scroll horizontal: no se veian todas,
   no se sabia cuantas habia y en el celular era una tira infinita. Ahora hay un
   selector de area agrupado y, al costado, las tres paginas transversales. */
.subnav{
  position:sticky; top:calc(62px + env(safe-area-inset-top,0px)); z-index:40;
  background:var(--surface); border-bottom:1px solid var(--border);
}
.subnav-in{display:flex; align-items:center; gap:var(--s3); padding-block:9px; flex-wrap:wrap}
.subnav a{
  padding:6px 11px; border-radius:var(--r-sm); font-size:var(--fs-sm);
  color:var(--text-muted); font-weight:500;
}
.subnav a:hover{background:var(--surface-sunken); color:var(--text); text-decoration:none}
.subnav a[aria-current="page"]{background:var(--brand-soft); color:var(--brand)}
.subnav-marca{
  font-family:var(--f-display); font-weight:700; letter-spacing:-.02em;
  color:var(--text)!important; padding-left:0!important;
}
.subnav-extra{display:flex; gap:2px; margin-left:auto; flex-wrap:wrap}

/* En la barra de MICFE el botón tiene que leerse como un selector, no como
   texto: si no, en el hub dice "Elegí un área" y nadie se da cuenta de que abre. */
.subnav .nav-top{
  padding:6px 11px; border:1px solid var(--border); background:var(--surface);
  color:var(--text); font-weight:600;
}
.subnav .nav-top:hover{border-color:var(--border-strong); background:var(--surface-sunken)}
.subnav .nav-top[aria-current="page"]{border-color:var(--brand-line); color:var(--brand)}

.area-drop{position:relative}
.area-panel{
  position:absolute; top:calc(100% + 9px); left:0; z-index:55;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:var(--e3); padding:var(--s5);
  display:grid; gap:var(--s5); grid-template-columns:repeat(4, minmax(140px, 1fr));
  width:max-content; max-width:calc(100vw - 32px);
}
.area-grupo{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-subtle); margin:0 0 7px 7px;
}
.area-panel a{display:block; padding:6px 7px; white-space:nowrap}
.area-panel a:hover{color:var(--brand)}
/* En escritorio estos tres enlaces viven en la barra; adentro del panel sobran. */
.area-mas{display:none}
@media(max-width:820px){
  /* En celular es al revés: en la barra apilaban tres renglones y la dejaban
     de 148 px de alto, pegada arriba. Pasan adentro del panel. */
  .area-mas{display:block}
  .subnav-extra{display:none}
  /* "MICFE" sale de la barra: ya está en las migas de la página, y si se queda
     empuja al selector a un segundo renglón. El selector toma el ancho entero
     y se lee como lo que es, un desplegable. */
  .subnav-marca{display:none}
  .area-drop{position:static; width:100%}
  .subnav .nav-top{width:100%; justify-content:space-between}
  .area-panel{
    position:static; width:100%; max-width:none; box-shadow:none; margin-top:var(--s2);
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .area-panel a{white-space:normal}
}

/* ---------- breadcrumb ---------- */
.crumb{font-size:var(--fs-sm); color:var(--text-subtle); margin-bottom:var(--s4)}
.crumb a{color:var(--text-subtle)}
.crumb a:hover{color:var(--brand)}
.crumb span{margin-inline:7px; opacity:.5}

/* ---------- proof ---------- */
.proofs{display:grid; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr))}
.proof{background:var(--surface); padding:var(--s5)}
.proof h4{font-size:var(--fs-base); margin-bottom:var(--s2)}
.proof p{font-size:var(--fs-sm); color:var(--text-muted)}
.proof .tag{font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--brand); display:block; margin-bottom:var(--s3); letter-spacing:.04em}

/* ---------- integrations ---------- */
.tiles{display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr))}
.tile{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s5)}
.tile-top{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s3); margin-bottom:var(--s3)}
.tile h3{font-size:var(--fs-base)}
.tile p{font-size:var(--fs-sm); color:var(--text-muted)}
.dir{font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--text-subtle); margin-top:var(--s3); display:block; letter-spacing:.02em}

/* ---------- table ---------- */
.tablebox{overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:540px; font-size:var(--fs-sm)}
th,td{text-align:left; padding:13px var(--s4); border-bottom:1px solid var(--border); vertical-align:top}
thead th{background:var(--surface-sunken); font-family:var(--f-display); font-size:var(--fs-sm); font-weight:600; position:sticky; top:0}
tbody tr:last-child td{border-bottom:0}
td:first-child{color:var(--text-muted); width:32%}
.yes{color:var(--st-activo-fg); font-weight:600}

/* ---------- faq ---------- */
.faq{border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); overflow:hidden}
.faq details{border-bottom:1px solid var(--border)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer; padding:var(--s4) var(--s5); font-weight:600; font-size:var(--fs-base); list-style:none; display:flex; gap:var(--s3); align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; margin-left:auto; font-family:var(--f-mono); color:var(--text-subtle)}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 var(--s5) var(--s5); color:var(--text-muted); font-size:var(--fs-sm)}
.faq .ans ol{margin:var(--s2) 0 0; padding-left:20px}
.faq .ans li{margin-bottom:5px}

/* ---------- timeline ---------- */
.tl{list-style:none; margin:0; padding:0; border-left:2px solid var(--border)}
.tl li{padding:0 0 var(--s5) var(--s5); position:relative}
.tl li::before{content:""; position:absolute; left:-5px; top:7px; width:8px; height:8px; border-radius:50%; background:var(--brand); border:2px solid var(--surface-alt)}
.sec--alt .tl li::before{border-color:var(--surface)}
.tl time{font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--text-subtle); letter-spacing:.03em}
.tl h4{font-size:var(--fs-base); margin:3px 0 4px}
.tl p{font-size:var(--fs-sm); color:var(--text-muted)}

/* ---------- callout / cta ---------- */
.callout{
  border:1px solid var(--st-proximamente-bd); background:var(--st-proximamente-bg);
  border-radius:var(--r-md); padding:var(--s5); display:flex; gap:var(--s5);
  flex-wrap:wrap; align-items:center; justify-content:space-between;
}
.callout h3{font-size:var(--fs-xl); margin-bottom:var(--s2)}
.callout p{color:var(--text-muted); font-size:var(--fs-sm); max-width:58ch}
.ctaband{background:var(--surface-ink); color:#fff; position:relative}
.ctaband::before{content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--rule)}
.ctaband h2{font-size:var(--fs-3xl); color:#fff; max-width:22ch}
.ctaband p{color:#B9C6D9; margin-top:var(--s3); max-width:58ch}
.ctaband .hero-btns{margin-top:var(--s5)}

/* ---------- split ---------- */
.split{display:grid; gap:var(--s6); grid-template-columns:1fr}
@media(min-width:860px){.split{grid-template-columns:1.05fr .95fr; align-items:start}}
.bullets{list-style:none; margin:0; padding:0; display:grid; gap:var(--s3)}
.bullets li{display:flex; gap:11px; font-size:var(--fs-sm); color:var(--text-muted); line-height:1.6}
.bullets li::before{content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--brand); margin-top:8px}
.bullets b{color:var(--text); font-weight:600}
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s5)}
.panel h3{font-size:var(--fs-xl); margin-bottom:var(--s4)}

/* ---------- shot (fake screenshot) ---------- */
.shot{border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; background:var(--surface); box-shadow:var(--e2)}
.shot-bar{display:flex; align-items:center; gap:6px; padding:9px var(--s4); background:var(--surface-sunken); border-bottom:1px solid var(--border)}
.shot-bar i{width:9px; height:9px; border-radius:50%; background:var(--border-strong); display:block}
.shot img{width:100%; height:auto; display:block}
.shot-bar span{font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--text-subtle); margin-left:6px}
.shot table{min-width:0; font-size:var(--fs-xs)}
.shot th,.shot td{padding:8px 12px}
.shot figcaption{font-size:var(--fs-xs); color:var(--text-subtle); padding:10px var(--s4); border-top:1px solid var(--border)}

/* ---------- form ---------- */
.form{display:grid; gap:var(--s4)}
.frow{display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.field{display:grid; gap:6px}
.field label{font-size:var(--fs-sm); font-weight:600}
.field .req{color:var(--brand); font-weight:400}
.field input,.field select,.field textarea{
  font-family:var(--f-body); font-size:var(--fs-sm); color:var(--text);
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-sm);
  padding:10px 12px; width:100%;
}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--brand); box-shadow:var(--ring)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:var(--fs-sm); color:var(--text-muted)}
.consent input{margin-top:4px; flex:none; width:auto}
.formnote{font-size:var(--fs-xs); color:var(--text-subtle); font-family:var(--f-mono)}
.contact-list{list-style:none; margin:0; padding:0; display:grid; gap:var(--s4)}
.contact-list dt{font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--text-subtle); margin-bottom:3px}
.contact-list dd{margin:0; font-size:var(--fs-sm)}

/* ---------- partners ---------- */
/* stretch, no center: con center la tarjeta cuya descripcion parte en dos
   lineas sobresale y las placas dejan de alinearse entre si. */
.partners{display:flex; flex-wrap:wrap; gap:var(--s3); align-items:stretch}
.partner{
  border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface);
  padding:0; overflow:hidden; display:flex; flex-direction:column; min-width:170px; flex:1 1 170px;
}
/* Cada logo va sobre el fondo para el que fue diseñado: el de respond.io es de texto
   blanco, así que su placa es oscura. Ningún logo se recolorea. */
.partner .placa{
  height:62px; display:grid; place-items:center; padding:12px 18px; background:#fff;
  border-bottom:1px solid var(--border);
}
.partner .placa[data-fondo="oscuro"]{background:#0B1220}
.partner .placa img{max-height:30px; width:auto; object-fit:contain}
.partner .placa .texto{
  font-family:var(--f-display); font-weight:700; font-size:1.05rem; letter-spacing:-.03em; color:#0F172A;
}
.partner .pie{padding:10px 14px 12px; background:var(--surface)}
.partner .pie b{display:block; font-family:var(--f-display); font-size:var(--fs-sm); color:var(--text)}
/* Antes eran etiquetas cortas en mayuscula monoespaciada. Ahora son frases:
   en ese estilo se vuelven ilegibles, asi que van en texto normal. */
.partner .pie small{
  display:block; font-size:var(--fs-xs); line-height:1.45;
  color:var(--text-subtle); margin-top:3px;
}
.partner .pie b.tag-propio{color:var(--brand)}

/* ---------- footer ---------- */
.foot{background:var(--ink); color:#93A3B8; padding-block:var(--s8) var(--s6); font-size:var(--fs-sm)}
.foot-grid{display:grid; gap:var(--s6); grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.foot h4{color:#E2E8F0; font-size:var(--fs-sm); margin-bottom:var(--s3); font-family:var(--f-display)}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.foot a{color:#93A3B8}
.foot a:hover{color:#fff}
.foot-bottom{
  margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--border-ink);
  display:flex; gap:var(--s4); flex-wrap:wrap; justify-content:space-between; font-size:var(--fs-xs); color:#6B7C92;
}

@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important; scroll-behavior:auto!important}}

/* ---------- Calculadora del tarifario ----------
   En el prototipo estos estilos iban en linea dentro del JS. Aca viven en la
   hoja, asi la version que pinta PHP y la que pinta el navegador se ven igual. */
.calc-fila{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--s4);
  padding:var(--s4) 0; border-bottom:1px solid var(--border);
}
.calc-fila b{font-family:var(--f-display); font-size:var(--fs-base); display:block}
.calc-fila span{display:block; font-size:var(--fs-xs); color:var(--text-subtle)}
.calc-monto{
  font-size:var(--fs-xl); font-weight:600; white-space:nowrap; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.calc-monto.fuerte{font-size:var(--fs-2xl); color:var(--brand)}
.calc-tramo{font-family:var(--f-display); font-size:var(--fs-xl); margin-bottom:var(--s2)}
.calc-rango{font-size:var(--fs-sm); color:var(--text-muted); margin-bottom:var(--s3)}

/* El aviso de precios no disponibles: mejor no mostrar nada que mostrar mal. */
.sin-precios{
  border:1px dashed var(--border-strong); border-radius:var(--r-md);
  padding:var(--s6); text-align:center; color:var(--text-muted);
}

/* ---------- Tabla del tarifario ----------
   La arma includes/tarifario.php, que no conoce las clases del sitio. */
table.tarifario td.num{text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums}
table.tarifario th:first-child{width:auto}
table.tarifario .sin-dato{color:var(--text-subtle)}
table.tarifario .sin-abono{color:var(--text); font-weight:600}
.tarifario-nota{margin-top:var(--s3); font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--text-subtle)}