/* Estilos de la portada (index.html) y de las páginas por rubro (18/10/2026).
   Mobile primero, cortes a 760 y 1024 px. Las páginas por rubro se generan
   con _rubros/generar.mjs. */
:root{--azul:#1a5c9e;--azul2:#2f7fd0;--celeste:#e3edf8;--navy:#0f1b2d;--ink:#0f1b2d;--muted:#4a5568;--line:#dbe3ec;--fondo:#f4f6f9;--lima:#a3e635;--pad:20px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:#fff;line-height:1.5}
h1,h2,h3,p,ul{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--azul)}
a:focus-visible,button:focus-visible{outline:3px solid var(--azul2);outline-offset:3px;border-radius:8px}
.wrap{padding-inline:max(var(--pad),calc((100% - 1160px)/2))}
section{scroll-margin-top:70px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:14px;font-weight:700;font-size:16px;text-decoration:none;border:2px solid transparent;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn-azul{background:var(--azul);color:#fff}.btn-azul:hover{background:#154a80}
.btn-borde{border-color:var(--azul);color:var(--azul);background:#fff}
.btn-blanco{background:#fff;color:var(--ink)}
.btn-borde-blanco{border-color:rgba(255,255,255,.7);color:#fff}
.pastilla{display:inline-block;font-size:12px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;color:var(--azul);background:var(--celeste);border-radius:999px;padding:7px 16px}
.titulo{font-size:30px;line-height:1.1;letter-spacing:-.8px;font-weight:900;margin-top:14px}
.titulo em{font-style:normal;color:var(--azul2)}
.bajada{font-size:17px;color:var(--muted);margin-top:12px;max-width:640px}
.centro{text-align:center}.centro .bajada{margin-inline:auto}
.sec{padding:64px 0}
.gris{background:var(--fondo)}

/* Barra */
.top{position:sticky;top:0;z-index:20;background:var(--azul);color:#fff}
.top .wrap{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-size:28px;font-weight:800;letter-spacing:-1px;color:#fff;text-decoration:none}.logo span{color:#9ccbf5}
.nav{display:none;align-items:center;gap:22px}
.nav a{color:#fff;text-decoration:none;font-weight:500;font-size:15px;opacity:.92}
.nav a:hover{opacity:1;text-decoration:underline}
.nav .btn{min-height:40px;font-size:14px;padding:0 16px;opacity:1}
.nav .btn-blanco{color:var(--azul);text-decoration:none}
.ham{background:none;border:0;color:#fff;padding:8px;cursor:pointer}
.menu{position:absolute;top:64px;left:0;right:0;background:#fff;box-shadow:0 18px 40px rgba(15,27,45,.18);padding:10px var(--pad) 18px}
.menu a{display:block;padding:13px 4px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600}
.menu .sub{font-size:12px;font-weight:800;letter-spacing:1.6px;color:var(--muted);padding:16px 4px 4px;text-transform:uppercase}

/* Portada */
.hero{background:linear-gradient(180deg,#fff 0%,#eef4fb 100%);padding:36px 0 40px;overflow:hidden}
.hero .wrap{display:grid;gap:28px}
.hero h1{font-size:38px;line-height:1.04;letter-spacing:-1.4px;font-weight:900}
.hero h1 em{font-style:normal;color:var(--azul2)}
.hero .lead{font-size:18px;color:var(--muted);margin-top:16px}
.hero .acciones{display:grid;gap:12px;margin-top:24px}
.hero .lugar{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin-top:16px}
.hero-img{border-radius:24px;overflow:hidden;box-shadow:0 24px 60px rgba(15,27,45,.18)}
.hero-copy{align-self:center}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:28px 0 8px}
.chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 13px;font-weight:700;font-size:13px;box-shadow:0 4px 14px rgba(15,27,45,.05)}
.chip svg{width:18px;height:18px;color:var(--azul)}

/* Puertas */
.puertas{display:grid;gap:18px;margin-top:32px}
.puerta{position:relative;display:flex;flex-direction:column;border-radius:26px;overflow:hidden;text-decoration:none;color:var(--ink);background:var(--celeste);box-shadow:0 16px 40px rgba(15,27,45,.10);transition:transform .2s}
.puerta:hover{transform:translateY(-3px)}
.puerta img{width:100%;aspect-ratio:1100/684;object-fit:cover}
.puerta .txt{padding:18px 22px 22px;background:#fff;flex:1}
.puerta h3{display:flex;align-items:center;gap:12px;font-size:23px;font-weight:900;letter-spacing:-.6px}
.puerta h3 i{display:inline-flex;width:38px;height:38px;border-radius:50%;background:var(--azul);color:#fff;align-items:center;justify-content:center;font-style:normal;font-size:20px}
.puerta p{font-size:15px;color:var(--muted);margin-top:6px;max-width:330px}

/* Vitrina de Terminal OS */
.vitrina{position:relative;margin-top:36px}
.navegador{border-radius:16px;overflow:hidden;box-shadow:0 30px 70px rgba(15,27,45,.18);border:1px solid var(--line);background:#fff}
.navegador .barra{height:30px;background:#eef2f6;display:flex;gap:7px;align-items:center;padding-left:14px}
.navegador .barra i{width:11px;height:11px;border-radius:50%}
.globo{position:absolute;display:flex;align-items:center;gap:12px;background:#fff;border-radius:18px;padding:12px 16px;box-shadow:0 18px 40px rgba(15,27,45,.18);font-weight:800;font-size:15px}
.globo b{display:inline-flex;width:40px;height:40px;border-radius:12px;background:var(--azul);color:#fff;align-items:center;justify-content:center;flex:none}
.globo b svg{width:22px;height:22px}
.g1{left:-6px;bottom:-22px}.g2{right:-6px;top:-18px;display:none}

/* Funciones (fondo oscuro) */
.oscuro{background:radial-gradient(900px 500px at 90% 0%,rgba(47,127,208,.35),transparent 60%),var(--navy);color:#fff}
.oscuro .titulo{color:#fff}.oscuro .bajada{color:#cbd5e1}
.funcs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}
.func{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:18px}
.func .ic{width:44px;height:44px;border-radius:13px;background:var(--azul2);display:flex;align-items:center;justify-content:center}
.func .ic svg{width:24px;height:24px;color:#fff}
.func h3{font-size:17px;font-weight:800;margin-top:12px;line-height:1.2}
.func p{font-size:14px;color:#cbd5e1;margin-top:6px;line-height:1.45}

/* Opciones (kits) */
.opciones{display:grid;gap:16px;margin-top:32px}
.op{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden}
.op.dest{border:2px solid var(--azul)}
.op img{width:100%;aspect-ratio:3/2;object-fit:cover;border-bottom:1px solid #eef2f6}
.op .cuerpo{padding:18px;display:flex;flex-direction:column;flex:1}
.op .tag{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:1.6px;color:var(--azul);background:var(--celeste);border-radius:999px;padding:5px 10px;text-transform:uppercase}
.op h3{font-size:22px;font-weight:900;letter-spacing:-.4px;margin-top:10px}
.op p{font-size:14px;color:var(--muted);margin-top:6px}
.op .precio{margin-top:auto;padding-top:16px}
.op .monto{font-size:28px;font-weight:900;letter-spacing:-1px}
.op .monto small{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0}
.op .extra{display:inline-block;margin-top:6px;font-size:13px;font-weight:800;background:var(--lima);border-radius:8px;padding:3px 8px}
.op .btn{margin-top:14px;min-height:46px;font-size:15px}
.nota-abono{margin-top:18px;font-size:14px;color:var(--muted);text-align:center}
.urban{display:flex;flex-direction:column;gap:12px;margin-top:22px;background:#fff;border:1px dashed #b9c8d8;border-radius:18px;padding:18px}
.urban b{font-size:17px}.urban p{font-size:14px;color:var(--muted)}

/* Monotributo */
.mono{display:grid;gap:28px;align-items:center}
.lista{list-style:none;padding:0;display:grid;gap:14px;margin-top:22px}
.lista li{display:flex;gap:12px;font-size:16px;line-height:1.4}
.lista li svg{flex:none;width:24px;height:24px;margin-top:1px}
.lista li b{display:block}
.lista li span{color:var(--muted);font-size:14.5px}
.mono .acciones{display:grid;gap:10px;margin-top:24px}
.mono .fino{font-size:13px;color:var(--muted);margin-top:10px}
.op .despues{display:block;margin-top:6px;font-size:13px;font-weight:700;color:var(--muted)}
.mono-planes{display:grid;gap:12px;margin-top:22px}
.mono-plan{display:flex;flex-direction:column;gap:3px;padding:16px 18px;background:#fff;border:2px solid #e3e8ef;border-radius:18px;text-decoration:none;color:inherit}
.mono-plan:hover{border-color:var(--azul)}
.mono-plan.dest{border-color:var(--azul)}
.mono-plan b{font-size:18px}
.mp-tag{align-self:flex-start;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--azul)}
.mp-que{font-size:14px;color:var(--muted)}
.mp-precio{font-size:26px;font-weight:900;margin-top:6px}
.mp-precio small{font-size:14px;font-weight:600;color:var(--muted)}
.mp-promo{align-self:flex-start;font-size:13px;font-weight:800;background:var(--lima);border-radius:8px;padding:3px 8px}
.mp-cta{margin-top:8px;font-size:14.5px;font-weight:800;color:var(--azul)}
.mono-img{border-radius:26px;overflow:hidden;background:var(--celeste)}

/* Cómo trabajamos */
.pasos{display:grid;gap:14px;margin-top:30px;counter-reset:p}
.paso{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px}
.paso .n{width:36px;height:36px;border-radius:50%;background:var(--azul);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center}
.paso h3{font-size:18px;font-weight:800;margin-top:12px}
.paso p{font-size:14.5px;color:var(--muted);margin-top:6px}
.confianza{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.conf{background:var(--celeste);border-radius:18px;padding:16px;text-align:center}
.conf b{display:block;font-size:20px;font-weight:900;color:var(--azul);letter-spacing:-.4px}
.conf span{font-size:13.5px;color:var(--muted)}

.foto-opcional{margin:30px 0 0;border-radius:24px;overflow:hidden}
.foto-opcional img{width:100%}
/* Opiniones (se cargan de /opiniones.json; sin opiniones la sección no se muestra) */
.opiniones{display:grid;gap:14px;margin:30px 0 24px}
.opinion{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:10px}
.opinion .estrellas{color:#f5a524;font-size:18px;letter-spacing:2px}
.opinion p{font-size:15.5px;line-height:1.55}
.opinion .quien{display:flex;align-items:center;gap:10px;margin-top:auto;font-size:14px;color:var(--muted)}
.opinion .quien b{color:var(--ink)}
.opinion .ini{width:36px;height:36px;border-radius:50%;background:var(--celeste);color:var(--azul);font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
/* Preguntas */
.faq{display:grid;gap:10px;margin-top:30px;max-width:860px;margin-inline:auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 20px}
.faq summary{cursor:pointer;list-style:none;font-weight:800;font-size:16.5px;padding:18px 28px 18px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:14px;font-size:24px;font-weight:500;color:var(--azul)}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);font-size:15px;padding:0 0 18px}

/* Hablemos */
.hablemos{background:var(--azul);color:#fff;text-align:center}
.hablemos h2{font-size:34px;font-weight:900;letter-spacing:-1px}
.hablemos p{font-size:17px;opacity:.92;margin:12px auto 0;max-width:560px}
.hablemos .acciones{display:grid;gap:12px;max-width:420px;margin:26px auto 0}
.hablemos .datos{margin-top:20px;font-size:14px;opacity:.85}
.fab{position:fixed;right:16px;bottom:16px;z-index:30;width:58px;height:58px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.25)}
.fab svg{width:32px;height:32px}

@media (min-width:760px){
  :root{--pad:32px}
  .hero h1{font-size:52px}
  .hero .acciones,.mono .acciones,.hablemos .acciones{grid-template-columns:auto auto;justify-content:start}
  .mono-planes{grid-template-columns:1fr 1fr}
  .hablemos .acciones{justify-content:center;max-width:none}
  .puertas{grid-template-columns:1fr 1fr}
  .chip{padding:10px 16px;font-size:14px;gap:8px}
  .funcs{grid-template-columns:repeat(3,1fr)}
  .opciones{grid-template-columns:1fr 1fr}
  .opiniones{grid-template-columns:repeat(3,1fr)}
  .pasos{grid-template-columns:repeat(2,1fr)}
  .confianza{grid-template-columns:repeat(4,1fr)}
  .titulo{font-size:40px}
  .g2{display:flex}
  .urban{flex-direction:row;align-items:center;justify-content:space-between}
}
@media (min-width:1024px){
  .nav{display:flex}.ham,.menu{display:none!important}
  .hero{padding:56px 0 72px}
  .hero .wrap{grid-template-columns:1fr 1.08fr;align-items:center;gap:48px}
  .hero h1{font-size:58px}
  .opciones{grid-template-columns:repeat(4,1fr)}
  .pasos{grid-template-columns:repeat(4,1fr)}
  .mono{grid-template-columns:1fr 1fr;gap:56px}
  .titulo{font-size:44px}
  .sec{padding:88px 0}
}

/* Páginas por rubro */
.para{display:inline-flex;align-items:center;gap:0;white-space:pre;margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-size:14px;font-weight:700;color:var(--azul)}
.dolores{display:grid;gap:14px;margin-top:30px}
.dolor{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px}
.dolor .antes{font-size:14px;color:#94a3b8;text-decoration:line-through}
.dolor h3{display:flex;gap:10px;font-size:17px;font-weight:800;line-height:1.35;margin-top:8px}
.dolor h3 svg{flex:none;width:22px;height:22px;margin-top:1px}
.dolor p{font-size:14.5px;color:var(--muted);margin-top:6px}
.uso{display:grid;gap:28px;margin-top:30px;align-items:center}
.uso ol{list-style:none;padding:0;display:grid;gap:14px;counter-reset:u}
.uso li{display:flex;gap:14px;align-items:flex-start}
.uso li .n{flex:none;width:34px;height:34px;border-radius:50%;background:var(--azul);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center}
.uso li b{display:block;font-size:16.5px}
.uso li span{font-size:14.5px;color:var(--muted)}
.reco{display:grid;background:#fff;border:2px solid var(--azul);border-radius:26px;overflow:hidden;margin-top:30px}
.reco img{width:100%;aspect-ratio:3/2;object-fit:cover;background:#fff}
.reco .cuerpo{padding:22px;display:flex;flex-direction:column}
.reco h3{font-size:28px;font-weight:900;letter-spacing:-.6px;margin-top:10px}
.reco ul{list-style:none;padding:0;display:grid;gap:8px;margin-top:14px}
.reco li{display:flex;gap:10px;font-size:15px}
.reco li svg{flex:none;width:20px;height:20px;margin-top:2px}
.reco .monto{font-size:34px;font-weight:900;letter-spacing:-1px;margin-top:18px}
.reco .monto small{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0}
.reco .extra{align-self:flex-start;margin-top:8px;font-size:13.5px;font-weight:800;background:var(--lima);border-radius:8px;padding:4px 9px}
.reco .abono{font-size:14px;color:var(--muted);margin-top:10px}
.reco .acciones{display:grid;gap:10px;margin-top:18px}
.alt-op{margin-top:16px;font-size:14.5px;color:var(--muted);text-align:center}
.rubros{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}
.rubros a{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-weight:700;font-size:14.5px;color:var(--ink);text-decoration:none;box-shadow:0 4px 14px rgba(15,27,45,.05)}
.rubros a:hover{border-color:var(--azul);color:var(--azul)}
@media (min-width:760px){
  .dolores{grid-template-columns:repeat(3,1fr)}
  .reco .acciones{grid-template-columns:auto auto;justify-content:start}
}
@media (min-width:1024px){
  .uso{grid-template-columns:1fr 1.15fr;gap:56px}
  .reco{grid-template-columns:1.05fr 1fr}
  .reco img{height:100%;aspect-ratio:auto;object-fit:contain}
  .reco .cuerpo{padding:34px}
}
.hero-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.navegador img{width:100%}