/* ===========================================================================
   AST — portal de proveedores
   Mismo sistema de diseño que creditivory.com (tipografía, formas, ritmo y
   estructura), con la marca de AST: azul #00132D y rojo #A80101, medidos del
   logo. Donde Credit Ivory usa el dorado como acento, aquí va el rojo.
   Los nombres de clase antiguos (.rejilla .campo .marca .fila .nota .aviso
   .bien .mini .pastilla) se conservan porque el JavaScript los genera.
   =========================================================================== */

:root{
  --ink:#00132D; --ink2:#33415C; --muted:#5E6878;
  --bg:#F3F5F8; --card:#fff; --line:#E3E7EE; --soft:#F7F8FA;
  --navy:#00132D; --navy2:#0b2d57;
  --acc:#A80101; --acctx:#8A0A0A; --accbg:#F3F5F8; --accln:#DCE3EC; --sky:#9FC1FF;
  --accnavy:#FF4D4D;
  --ok:#17784A; --okbg:#E3F4EA;
  --rev:#1F5FBF; --revbg:#E6EFFC;
  --push:#B35A12; --pushbg:#FCEBDC;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Montserrat','Inter',system-ui,sans-serif;   /* la del logo: titulares */
  /* alias del vocabulario viejo */
  --azul:#00132D; --azul2:#0b2d57; --rojo:#A80101; --oro:#A80101;
  --tinta:#00132D; --gris:#5E6878; --linea:#E3E7EE; --fondo:#F3F5F8;
  --papel:#fff; --verde:#17784A;
}

*{box-sizing:border-box}
:focus-visible{outline:3px solid var(--navy2);outline-offset:3px;border-radius:6px}
[id]{scroll-margin-top:92px}
.salto{position:absolute;left:-9999px;top:8px;background:var(--navy);color:#fff;padding:10px 16px;
  border-radius:999px;z-index:100;font-weight:700;text-decoration:none}
.salto:focus{left:16px}
a,button{min-height:24px}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{margin:0;background:var(--card);color:var(--ink);font-family:var(--sans);
     font-size:16px;line-height:1.55}
a{color:inherit}
code{font-family:'JetBrains Mono',Consolas,'Courier New',monospace;font-size:.92em}

.wrap{max-width:1160px;margin:0 auto;padding:0 28px}

/* --------------------------------------------------------------- barra demo */
.demo,.demo-bar{background:#12161D;color:#E9EDF3;font-size:13px;padding:9px 16px;
  display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:center;
  text-align:center;font-weight:500}
.demo{display:block}
.demo b,.demo-bar b{color:#fff}
.demo code{color:#F3B4B4}

/* ----------------------------------------------------------------- cabecera */
header.top{position:sticky;top:0;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:20}
.topin{display:flex;align-items:center;gap:10px 14px;min-height:80px;flex-wrap:wrap;padding:9px 0}
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  font-family:var(--serif);font-size:24px;font-weight:800;letter-spacing:-.02em;text-transform:uppercase;
  white-space:nowrap;line-height:1.05}
.logo::before{content:"";flex:none;width:60px;height:42px;
  background:url(/emblema.png) left center/contain no-repeat}
.logo span{display:flex;flex-direction:column;line-height:1.08}
.logo i{display:block;font-style:normal;margin-top:2px;font-family:var(--sans);font-size:10.5px;
  font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--acctx)}
nav.main{display:flex;gap:2px;flex:0 1 auto;flex-wrap:wrap;margin:0 auto 0 12px}
nav.main a{text-decoration:none;color:var(--muted);font-weight:600;font-size:13.5px;
  padding:8px 12px;border-radius:999px;white-space:nowrap}
nav.main a:hover{background:var(--soft);color:var(--ink)}
nav.main a.on{background:var(--navy);color:#fff}
.topr{flex:none;display:flex;align-items:center;gap:10px}
.topr .tel{font-size:13.5px;font-weight:700;color:var(--ink2);white-space:nowrap;text-decoration:none;padding:8px 6px}

/* ------------------------------------------------------------------ botones */
.btn,button{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;border-radius:999px;padding:12px 22px;font-weight:800;
  font-size:15px;border:0;min-height:46px;cursor:pointer;font-family:inherit;
  text-align:center;background:var(--navy);color:#fff;white-space:nowrap;
  transition:transform .12s,box-shadow .12s,background .12s}
.btn:hover,button:hover{transform:translateY(-1px)}
.btn.dark{background:var(--navy);color:#fff}
.btn.rojo{background:var(--acc);color:#fff;box-shadow:0 10px 26px rgba(168,1,1,.28)}
.btn.ghost,button.flojo{background:#fff;color:var(--ink);border:1px solid var(--line);
  box-shadow:none;font-weight:700}
.btn.ghost:hover,button.flojo:hover{background:var(--soft)}
.btn.big,button.grande{padding:17px 32px;font-size:17px;min-height:54px}
button:disabled{opacity:.45;cursor:default;transform:none}
.tlink{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--ink);
  text-decoration:none;padding:12px 6px}

/* -------------------------------------------------------------------- héroe */
.hero{background:radial-gradient(900px 420px at 85% 10%,#E6EDF7 0%,rgba(230,237,247,0) 62%),
      linear-gradient(180deg,#FBFAF8 0%,#fff 100%);padding:58px 0 44px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);
  gap:40px;align-items:center;max-width:1240px}
.eye{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--acctx)}
h1{font-family:var(--serif);font-size:46px;line-height:1.04;letter-spacing:-.025em;
  margin:14px 0 18px;font-weight:600}
h1 mark,h2 mark{background:none;color:var(--acc);padding:0}
.lead{font-size:18.5px;color:var(--ink2);margin:0 0 24px;max-width:560px}
.lead b{color:var(--ink)}
.cta{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.trust{display:flex;gap:8px 18px;flex-wrap:wrap;margin-top:18px;font-size:13.5px;
  color:var(--muted)}
.trust span::before{content:"✓";color:var(--ok);font-weight:800;margin-right:6px}

/* héroe corto (panel y páginas internas) */
.hf{padding:48px 0 10px;background:linear-gradient(180deg,#FBFAF8 0%,#fff 100%)}
.hf h1{font-size:clamp(32px,4.6vw,46px);margin:10px 0 12px}
.hf .lead{font-size:17.5px;max-width:820px;margin-bottom:0}

/* tarjeta de prueba del héroe */
.demo-card{background:#fff;border:1px solid var(--line);border-radius:24px;
  padding:22px;box-shadow:0 34px 80px rgba(0,19,45,.16)}
.demo-card .ct{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.demo-card .q{display:flex;gap:8px;align-items:center;background:var(--soft);
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14px;
  font-weight:700}
.demo-card .q span{flex:1;color:var(--ink)}
.demo-card .q em{font-style:normal;background:var(--navy);color:#fff;border-radius:999px;
  padding:5px 11px;font-size:11.5px;font-weight:800}
.demo-card .arrow{text-align:center;color:#C3CAD5;font-size:19px;line-height:1;margin:8px 0}
.demo-card .out{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.demo-card .out .hd{background:var(--okbg);color:var(--ok);font-size:12px;font-weight:800;
  padding:8px 13px;letter-spacing:.03em}
.demo-card .out .bd{padding:13px}
.demo-card .kv{display:flex;justify-content:space-between;gap:10px;padding:6px 0;
  font-size:13.5px;border-bottom:1px solid var(--line)}
.demo-card .kv:last-child{border-bottom:0}
.demo-card .kv b{font-family:'JetBrains Mono',Consolas,monospace;letter-spacing:.02em}
.demo-card .pie{font-size:12px;color:var(--muted);margin:12px 2px 0}

/* ----------------------------------------------------------------- secciones */
section{padding:66px 0}
section.corta{padding:16px 0}
.band{background:var(--bg)}
.sec-h{max-width:760px;margin:0 auto 34px;text-align:center}
.sec-h.izq{margin-left:0;text-align:left}
h2{font-family:var(--serif);font-size:34px;letter-spacing:-.02em;line-height:1.1;
  margin:0 0 12px;font-weight:600}
h3{font-size:18px;margin:0 0 5px;font-weight:800;letter-spacing:-.01em}
.sub{font-size:16.5px;color:var(--ink2);margin:0}

/* pasos */
.steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:start}
.step{text-align:center;padding:10px}
.step .ic{width:68px;height:68px;border-radius:22px;background:var(--accbg);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:27px}
.step h3{font-size:19px}
.step p{margin:0;color:var(--ink2);font-size:14.5px}
.arr{align-self:center;color:#C3CAD5;font-size:25px;padding-top:28px}

/* tarjetas de rasgo */
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.f{border:1px solid var(--line);border-radius:20px;padding:22px;background:#fff;
  min-width:0;transition:transform .15s,box-shadow .15s}
.f:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,19,45,.08)}
.f .ic{width:44px;height:44px;border-radius:14px;background:var(--accbg);display:flex;
  align-items:center;justify-content:center;margin-bottom:12px;font-size:20px}
.f p{margin:0;font-size:14.5px;color:var(--ink2)}

/* ---------------------------------------------------------------- formulario */
.frm{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 28px;
  margin:0 0 18px}
.frm-h{display:flex;align-items:flex-start;gap:14px;margin-bottom:6px}
.frm-h .num{flex:none;width:36px;height:36px;border-radius:12px;background:var(--navy);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;
  font-size:15px}
.frm-h h2{font-size:22px;margin:3px 0 0}
.frm .ayuda,.ayuda{color:var(--ink2);font-size:14.5px;margin:8px 0 16px}
.frm .ayuda b,.ayuda b{color:var(--ink)}

.g,.rejilla{display:grid;gap:14px 18px;grid-template-columns:1fr 1fr}
.rejilla{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.g .w,.g .ancho,.rejilla .ancho,.rejilla .w{grid-column:1/-1}
.campo{min-width:0}

label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:5px}
label .opc{font-weight:500;color:var(--muted)}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=password],
input[type=number],input[type=url],select,textarea{
  width:100%;font:inherit;font-weight:500;font-size:15px;padding:11px 13px;
  border:1px solid var(--line);border-radius:12px;background:var(--soft);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--navy2);
  background:#fff;box-shadow:0 0 0 3px rgba(11,45,87,.12)}
textarea{min-height:86px;resize:vertical}
input.bad,select.bad,textarea.bad{border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(168,1,1,.12)}

/* el ojito de las contrasenas (ojo.js lo pone en todo input[type=password]) */
.ojo-w{position:relative;display:block;min-width:0}
.ojo-w input{padding-right:46px}
.ojo{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;
  background:transparent;color:var(--muted);cursor:pointer;border-radius:10px;display:flex;align-items:center;
  justify-content:center;padding:0;font:inherit}
.ojo:hover{color:var(--ink);background:var(--soft)}
.ojo.on{color:var(--navy2)}
.ojo:focus-visible{outline:2px solid var(--navy2);outline-offset:1px}

/* casillas: la .marca de siempre, con la caja de Credit Ivory */
.marca,.chk{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;
  font-weight:500;padding:13px 15px;border:1px solid var(--line);border-radius:14px;
  margin-bottom:10px;background:#fff;transition:border-color .12s,background .12s}
.marca:hover,.chk:hover{border-color:#C9D3E0;background:var(--soft)}
.marca input[type=checkbox],.chk input[type=checkbox]{flex:0 0 auto;width:20px;height:20px;
  margin:1px 0 0;accent-color:var(--navy);cursor:pointer}
.marca label,.chk label{font-weight:500;color:var(--ink2);margin:0;font-size:14.5px;
  cursor:pointer}
.marca label b,.chk label b{color:var(--ink);font-weight:800}
.marca .mini,.chk .mini{display:block;margin-top:4px}
.marca.suelta{border:0;padding:0;background:none;margin-bottom:8px}
.marca.suelta:hover{background:none}

/* filas repetibles (licencias, referencias, empresas) */
.fila{border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:12px;
  background:var(--soft)}
.fila .quitar{float:right;background:none;color:var(--acc);border:0;font-size:12.5px;
  padding:4px 8px;font-weight:800;min-height:0;border-radius:999px}
.fila .quitar:hover{background:var(--accbg);transform:none}
.fila input,.fila select,.fila textarea{background:#fff}

/* --------------------------------------------------------------------- avisos */
.nota{background:var(--accbg);border:1px solid var(--accln);border-left:4px solid var(--acc);
  padding:13px 16px;font-size:14px;margin:14px 0;border-radius:0 14px 14px 0}
.aviso{background:var(--accbg);border:1px solid var(--accln);border-left:4px solid var(--acc);
  padding:13px 16px;font-size:14px;margin:14px 0;border-radius:0 14px 14px 0}
.nota{background:#EFF3F9;border-color:#DCE4F0;border-left-color:var(--navy2)}
.bien,.okc{background:var(--okbg);border:1px solid #BFE3CC;border-left:4px solid var(--ok);
  padding:13px 16px;font-size:14px;margin:14px 0;border-radius:0 14px 14px 0}
.okc{border-radius:22px;border-left-width:1px;padding:26px 28px}
.okc h2{margin:0 0 8px;font-size:26px}
.nota ul,.aviso ul,.bien ul{margin:6px 0 0;padding-left:20px}
.mini{font-size:12.8px;color:var(--muted);line-height:1.5}
.mini b{color:var(--ink2)}

.pastilla{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;
  padding:4px 11px;border-radius:999px;letter-spacing:.02em}
.p-ok{background:var(--okbg);color:var(--ok)}
.p-falta{background:var(--accbg);color:var(--acc)}
.p-medio{background:var(--pushbg);color:var(--push)}

/* --------------------------------------------------------------------- tablas */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;margin:12px 0;
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
th{background:var(--soft);color:var(--ink);text-align:left;padding:10px 13px;
  font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  border-bottom:1px solid var(--line)}
td{padding:10px 13px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td button{padding:7px 14px;min-height:0;font-size:13px}

/* ------------------------------------------------------------------- acuerdo */
.acuerdo{max-height:360px;overflow:auto;border:1px solid var(--line);border-radius:16px;
  background:#fff;padding:22px 26px;font-size:14px;line-height:1.65;color:var(--ink2)}
.acuerdo h3{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);
  margin:0 0 16px}
.acuerdo h4{font-size:13px;font-weight:800;color:var(--ink);margin:22px 0 7px;
  letter-spacing:.02em}
.acuerdo p{margin:0 0 11px}
.acuerdo ul{margin:0 0 11px;padding-left:20px}
.acuerdo li{margin-bottom:4px}
.acuerdo b{color:var(--ink);font-weight:700}
.acuerdo hr{border:0;border-top:1px solid var(--line);margin:18px 0}
/* los huecos de la plantilla: se rellenan solos con lo que escribe la empresa */
.hueco{background:#E6EEF9;border-bottom:1px solid #BFD2EC;padding:1px 5px;border-radius:4px;
  font-weight:700;color:var(--ink)}
.hueco.vacio{font-weight:600;font-style:italic;color:#5B7CA8}
.huella{font-family:'JetBrains Mono',Consolas,monospace;font-size:11.5px;color:var(--muted);
  word-break:break-all;margin:8px 2px 0}

.oficios{display:grid;gap:0 12px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

/* ------------------------------------------------------------------- pie */
footer{border-top:1px solid var(--line);background:#fff;padding:42px 0 54px;margin-top:40px}
.fcols{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:32px;
  padding-bottom:24px;border-bottom:1px solid var(--line)}
.fcol{display:flex;flex-direction:column;gap:8px}
.fcol h4{margin:0 0 4px;font-size:11.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--acctx)}
.fcol a,.fcol span{text-decoration:none;font-size:14px;color:var(--ink2);font-weight:600;
  overflow-wrap:anywhere}
.fbrand p{font-size:14px;color:var(--ink2);max-width:380px;margin:12px 0 0}
.fn{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:18px}

/* En CSS Grid una columna '1fr' no baja de su contenido minimo, asi que una
   tarjeta ancha empuja la rejilla mas alla de la pantalla y en el movil la
   pagina se sale por la derecha. min-width:0 en los hijos lo impide. */
.hero .wrap>*,.g>*,.rejilla>*,.feat>*,.steps>*,.kpis>*,.fcols>*,.emp .dat>*,
.demo-card .kv>*{min-width:0}
.demo-card .kv b{overflow-wrap:anywhere}

/* --------------------------------------------------------------------- móvil */
@media (max-width:980px){
  .feat{grid-template-columns:1fr 1fr}
}
@media (max-width:1460px){
  .topr .tel{display:none}
  nav.main a{padding:8px 9px;font-size:12.8px}
}
@media (max-width:900px){
  .wrap{padding:0 16px}
  .topin{min-height:60px;gap:8px;padding:8px 0}
  nav.main{display:none}
  .logo{font-size:18px}.logo::before{width:36px;height:25px}
  .logo i{font-size:9px;letter-spacing:.14em}
  .topr .tel{display:none}
  .topr .btn{padding:9px 14px;font-size:13.5px;min-height:38px}
  .topr .btn.ghost{display:none}
  .estante{display:none}
  .hero{padding:32px 0 26px}
  .hero .wrap{grid-template-columns:minmax(0,1fr);gap:26px}
  h1{font-size:34px}h2{font-size:27px}
  section{padding:42px 0}
  .steps{grid-template-columns:minmax(0,1fr)}.arr{display:none}
  .feat{grid-template-columns:minmax(0,1fr)}
  .g,.rejilla{grid-template-columns:minmax(0,1fr)}
  .frm{padding:20px 17px;border-radius:18px}
  .fcols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fbrand{grid-column:1/-1}
  input,select,textarea{font-size:16px !important}   /* iOS no amplía */
}
@media (max-width:420px){
  .logo{font-size:16px;gap:8px}.logo::before{width:30px;height:21px}
  .fcols{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* =========================================================== panel interno */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 6px}
.kpi{border:1px solid var(--line);border-radius:18px;padding:18px 20px;background:#fff}
.kpi .k{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted)}
.kpi b{display:block;font-family:var(--serif);font-size:32px;font-weight:600;
  letter-spacing:-.03em;line-height:1.1;margin-top:6px}
.kpi.ok b{color:var(--ok)}
.kpi.mal b{color:var(--acc)}
.kpi small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}

.enlace-caja{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.enlace-caja input{flex:1 1 320px;font-family:'JetBrains Mono',Consolas,monospace;
  font-size:14px;font-weight:700;background:#fff}

.emp{border:1px solid var(--line);border-radius:18px;padding:18px 20px;margin-bottom:14px;
  background:#fff;transition:box-shadow .15s}
.emp:hover{box-shadow:0 14px 34px rgba(0,19,45,.07)}
.emp .cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  flex-wrap:wrap}
.emp .nom{font-size:17px;font-weight:800;letter-spacing:-.01em}
.emp .dat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:14px;
  background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.emp .dat h5{margin:0 0 4px;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.emp .sam{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.emp .sam .tres{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.emp .sam .tres .marca{margin:0;flex:1 1 200px;padding:10px 13px}
.rojo-txt{color:var(--acc);font-weight:700}

@media (max-width:900px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .emp .dat{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .emp .dat{grid-template-columns:minmax(0,1fr)}
}

/* ===================================================== piezas de la landing */


/* bloque de dos columnas (lo que ponemos / lo que pedimos) */
.partner{background:#fff;border:1px solid var(--accln);border-top:4px solid var(--navy);border-radius:28px;padding:34px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
.partner h3{font-family:var(--serif);font-size:23px;font-weight:600;margin:0 0 14px}
.partner ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;
  font-size:15px;color:var(--ink2)}
.partner li{position:relative;padding-left:27px}
.partner li::before{content:"✓";color:var(--ok);font-weight:800;position:absolute;left:0;top:0}
.partner .pide li::before{content:"→";color:var(--acc)}
.partner b{color:var(--ink)}

/* banda oscura: evidencia y llamada final */
.oscuro{background:var(--navy);color:#fff;border-radius:28px;padding:38px;
  box-shadow:0 30px 70px rgba(0,19,45,.28)}
.oscuro h2{color:#fff}
.oscuro .sub{color:#B9C6D8}
.oscuro .eye{color:var(--sky)}
.oscuro a.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.oscuro a.btn.ghost:hover{background:rgba(255,255,255,.08)}
.ev{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:26px}
.ev div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:16px;padding:16px 18px}
.ev b{display:block;font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:-.03em;
  line-height:1.1}
.ev span{display:block;font-size:12.5px;color:#B9C6D8;margin-top:4px}
.fuente{font-size:12.5px;color:#9FB0C6;margin:20px 0 0}

/* preguntas */
.faq{max-width:860px;margin:0 auto}
.faq details{border-top:1px solid var(--line);padding:16px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700;font-size:16.5px;list-style:none;display:flex;
  justify-content:space-between;gap:16px;color:var(--ink)}
.faq summary::after{content:"+";color:var(--acctx);font-weight:800;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin:10px 0 0;color:var(--ink2);font-size:15px}
.faq p b{color:var(--ink)}

/* recuadro de franqueza */
.franco{border:1px solid var(--line);border-left:5px solid var(--navy);border-radius:0 20px 20px 0;
  background:#fff;padding:28px 30px;max-width:880px}
.franco h3{font-family:var(--serif);font-size:24px;font-weight:600;margin:0 0 12px}
.franco p{color:var(--ink2);font-size:15.5px;margin:0 0 12px}
.franco p:last-child{margin-bottom:0}

@media (max-width:900px){
  .partner{grid-template-columns:minmax(0,1fr);padding:22px;border-radius:20px}
  .oscuro{padding:24px;border-radius:20px}
  .ev{grid-template-columns:repeat(2,minmax(0,1fr))}
  .partner>*,.ev>*{min-width:0}
}

/* ========================================================= armazon de la app
   Las plataformas que hacen esto en serio (Procore, BuildingConnected,
   HigherGov, Avetta) usan barra lateral en la APP y barra superior en la WEB.
   No es capricho: la app tiene 8-10 destinos y la web 5. */
.app{display:grid;grid-template-columns:238px minmax(0,1fr);min-height:100vh}
.lado{background:var(--navy);color:#fff;padding:18px 14px;position:sticky;top:0;
  height:100vh;overflow:auto;display:flex;flex-direction:column;gap:3px}
.lado>*{flex-shrink:0}   /* ventana baja: la barra se desplaza, no se aplasta (la marca pisaba el primer enlace) */
.lado .marca-lado{display:flex;align-items:center;gap:10px;padding:4px 8px 16px;
  text-decoration:none;color:#fff}
.lado .marca-lado::before{content:"";flex:none;width:34px;height:24px;
  background:url(/emblema.png) left center/contain no-repeat;
  filter:brightness(0) invert(1)}
.lado .marca-lado b{font-family:var(--serif);font-size:16px;font-weight:600;line-height:1.1}
.lado .marca-lado i{display:block;font-style:normal;font-size:9.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin-top:2px}
.lado a.nav{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
  color:#C3D0E2;text-decoration:none;font-size:14px;font-weight:600}
.lado a.nav:hover{background:rgba(255,255,255,.08);color:#fff}
.lado a.nav.on{background:#fff;color:var(--navy)}
.lado a.nav .n{margin-left:auto;background:var(--acc);color:#fff;border-radius:999px;
  font-size:11px;font-weight:800;padding:1px 7px;min-width:20px;text-align:center}
.lado a.nav.on .n{background:var(--acc);color:#fff}
.lado .sep{margin:12px 12px 6px;font-size:10.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#7D93B0}
.lado .pie{margin-top:auto;padding:14px 12px 0;border-top:1px solid rgba(255,255,255,.14);
  font-size:12px;color:#9FB3CC}
.lado .pie a{color:#fff;font-weight:700}

.cuerpo{padding:26px 30px 70px;background:var(--bg);min-width:0}
.cuerpo > header{display:flex;justify-content:space-between;align-items:flex-start;
  gap:16px;flex-wrap:wrap;margin-bottom:20px}
.cuerpo h1{font-size:30px;margin:0 0 4px}
.cuerpo .sub{font-size:15px}
.vista{display:none}
.vista.on{display:block}

/* estado de cumplimiento: tres valores, como Avetta */
.sem{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;
  padding:5px 12px;border-radius:999px;letter-spacing:.02em}
.sem::before{content:"";width:8px;height:8px;border-radius:999px;background:currentColor}
.sem.cumple{background:var(--okbg);color:var(--ok)}
.sem.condicional{background:var(--pushbg);color:var(--push)}
.sem\.no{background:var(--accbg);color:var(--acc)}
.sem.nocumple{background:var(--accbg);color:var(--acc)}
.cont{font-size:12.5px;color:var(--muted);font-weight:600}

/* la pestania de MOTIVOS: una frase por requisito incumplido */
.motivos{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:12px;
  background:#fff}
.motivos .m{display:flex;gap:12px;padding:12px 15px;border-bottom:1px solid var(--line);
  font-size:14px;align-items:flex-start}
.motivos .m:last-child{border-bottom:0}
.motivos .m .ic{flex:none;width:18px;height:18px;border-radius:999px;font-size:11px;
  font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px;
  background:var(--accbg);color:var(--acc)}
.motivos .m.ok .ic{background:var(--okbg);color:var(--ok)}
.motivos .m b{display:block;color:var(--ink)}
.motivos .m span{color:var(--ink2)}
.motivos .m .de{margin-left:auto;flex:none;font-size:11px;font-weight:700;
  color:var(--muted);white-space:nowrap}

/* hilo de mensajes */
.hilo{display:flex;flex-direction:column;gap:12px;max-height:460px;overflow:auto;
  padding:4px 2px}
.msg{max-width:78%;border-radius:16px;padding:12px 15px;font-size:14.5px;line-height:1.55;
  white-space:pre-wrap;border:1px solid var(--line);background:#fff}
.msg.mio{align-self:flex-end;background:var(--navy);color:#fff;border-color:var(--navy)}
.msg .quien{display:block;font-size:11px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:5px;color:var(--muted)}
.msg.mio .quien{color:#9FB3CC}

.zona{border:2px dashed var(--line);border-radius:16px;padding:22px;text-align:center;
  background:var(--soft);font-size:14px;color:var(--ink2)}
.zona.sobre{border-color:var(--navy2);background:#EFF3F9}

@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .lado{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;
    padding:10px}
  .lado .marca-lado{padding:4px 8px}
  .lado .sep,.lado .pie{display:none}
  .lado a.nav{padding:8px 11px;font-size:13px}
  .cuerpo{padding:18px 15px 60px}
  .msg{max-width:92%}
}


/* ====================================================== la web, paso 7 */
/* estante de confianza: lo que un CO copia sin pedir nada */
.estante{background:var(--navy);color:#C9D4E3;font-size:12.5px}
.estante .wrap{display:flex;flex-wrap:wrap;gap:4px 22px;align-items:center;min-height:34px;padding-top:5px;padding-bottom:5px}
.estante b{color:#fff;font-weight:800;letter-spacing:.06em;font-size:11px;margin-right:4px}
.estante code{color:#fff;font-size:12px}
.estante .der{margin-left:auto;display:flex;gap:18px}
.estante a{color:var(--accnavy);font-weight:800;text-decoration:none;padding:4px 0;white-space:nowrap}
@media (max-width:1460px){.estante .psc{display:none}}
@media (max-width:1200px){.estante .naics2{display:none}}
@media (max-width:1100px){
  .topr .btn.ghost{display:none}
  nav.main a{padding:8px 8px;font-size:12.5px}
  .logo{font-size:20px}.logo::before{width:40px;height:28px}
}
.estante a:hover{text-decoration:underline}

/* las dos puertas del heroe */
.puertas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:26px}
.puerta{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px 22px;
  display:flex;flex-direction:column;gap:6px;min-width:0}
.puerta.sub{background:var(--navy);border-color:var(--navy);color:#fff}
.puerta.sub .eye{color:var(--sky)}
.puerta.sub p{color:#C9D4E3}
.puerta.sub .tlink{color:#fff}
.puerta .eye{font-size:11px}
.puerta h3{font-family:var(--serif);font-size:21px;font-weight:600;margin:2px 0 0;line-height:1.15}
.puerta p{margin:0 0 8px;color:var(--ink2);font-size:14.5px}
.puerta .cta{margin-top:auto;gap:8px 14px}
.puerta .btn{padding:11px 18px;font-size:14px;min-height:42px}
.puerta .tlink{padding:8px 2px;font-size:14px}

/* capability snapshot */
.snap{background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px 24px;
  box-shadow:0 34px 80px rgba(0,19,45,.14);min-width:0}
.snap .ct{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.snap dl{margin:0}
.snap dl>div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.45}
.snap dl>div:last-child{border-bottom:0}
.snap dt{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.snap dd{margin:0;color:var(--ink2)}
.snap dd b{color:var(--ink)}
.snap code{font-weight:700;color:var(--ink);background:var(--soft);border-radius:6px;padding:1px 6px;font-size:12px;white-space:nowrap}
.snap .pie{font-size:12px;color:var(--muted);margin:12px 2px 0}

/* cuatro cifras bajo el heroe */
.cifras{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.cifras .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.cifras .wrap>div{padding:20px 22px 20px 0;border-right:1px solid var(--line);min-width:0}
.cifras .wrap>div+div{padding-left:22px}
.cifras .wrap>div:last-child{border-right:0}
.cifras b{display:block;font-family:var(--serif);font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
.cifras span{display:block;font-size:13px;color:var(--muted);margin-top:5px}

/* procedimiento numerado */
.proc{list-style:none;margin:0;padding:0;counter-reset:paso;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.proc li{counter-increment:paso;position:relative;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:20px 22px 20px 70px;font-size:15px;color:var(--ink2);min-width:0}
.proc li::before{content:counter(paso,decimal-leading-zero);position:absolute;left:20px;top:18px;
  font-family:var(--serif);font-size:26px;font-weight:600;color:var(--acctx);letter-spacing:-.03em}
.proc li b{color:var(--ink);display:block;margin-bottom:3px;font-size:16px}

/* numerales en vez de emojis */
.num-f{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:14px;background:var(--accbg);color:var(--acctx);font-family:var(--serif);
  font-size:21px;font-weight:600;letter-spacing:-.02em;margin-bottom:14px}
.steps .step .num-f{margin:0 auto 12px}

/* bloque de registro con la tarjeta de prueba */
.registro-demo{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:34px;
  align-items:center;margin-top:44px}
.registro-demo .junto h3{font-family:var(--serif);font-size:26px;font-weight:600;margin:0 0 10px;letter-spacing:-.01em}
.registro-demo .junto p{color:var(--ink2);font-size:15.5px;margin:0 0 14px}
.registro-demo .trust{list-style:none;padding:0;margin:0 0 18px;flex-direction:column;gap:7px}
.registro-demo .trust li::before{content:"\2713";color:var(--ok);font-weight:800;margin-right:8px}

.sub.centro{text-align:center;margin-top:26px}
.oscuro .sub.ancho{max-width:720px}
.oscuro.final{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
.oscuro.final h2{font-size:28px;margin:8px 0 8px}
.oscuro.final .sub{margin:0 0 18px}
.oscuro.final>div+div{border-left:1px solid rgba(255,255,255,.14);padding-left:34px}
#porque-ast .franco{margin-top:22px;max-width:none}
.tramo{border-top:4px solid var(--acc)}
footer .codigos{font-size:12.5px;color:var(--muted);line-height:1.9}
footer .codigos b{color:var(--ink);font-size:11px;letter-spacing:.06em}
footer .codigos code{background:var(--soft);border-radius:6px;padding:1px 6px;font-size:11.5px;font-weight:700;color:var(--ink)}

@media (max-width:1100px){
  .cifras .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cifras .wrap>div:nth-child(2){border-right:0}
  .cifras .wrap>div:nth-child(n+3){border-top:1px solid var(--line)}
  .cifras .wrap>div:nth-child(3){padding-left:0}
}
@media (max-width:900px){
  .puertas,.proc,.registro-demo,.oscuro.final{grid-template-columns:minmax(0,1fr)}
  .oscuro.final>div+div{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.14);padding-top:26px}
  .snap dl>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .registro-demo{margin-top:30px;gap:22px}
}
@media (max-width:520px){
  .cifras .wrap{grid-template-columns:minmax(0,1fr)}
  .cifras .wrap>div{border-right:0;padding-left:0 !important;border-top:1px solid var(--line)}
  .cifras .wrap>div:first-child{border-top:0}
}

/* fotos */
img{max-width:100%;height:auto;display:block}
.banda-foto{margin:0;position:relative;height:clamp(220px,34vw,420px);overflow:hidden;background:var(--navy)}
.banda-foto img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.banda-foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 28px 14px;font-size:13px;color:#fff;
  background:linear-gradient(180deg,rgba(0,19,45,0) 0%,rgba(0,19,45,.72) 100%)}
.banda-foto figcaption span{color:#C9D4E3}
.banda-foto figcaption{padding-left:max(28px,calc((100% - 1160px)/2 + 28px));padding-right:max(28px,calc((100% - 1160px)/2 + 28px))}

.familias{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:12px}
.familia{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:22px;
  overflow:hidden;text-decoration:none;color:var(--ink);min-width:0;transition:transform .15s,box-shadow .15s}
.familia:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,19,45,.12)}
.familia img{aspect-ratio:3/2;width:100%;object-fit:cover}
.familia .tx{padding:18px 20px 20px}
.familia .eye{font-size:11px}
.familia .eye code{font-weight:700;color:var(--ink);background:var(--soft);border-radius:6px;padding:1px 6px;font-size:11.5px}
.familia h3{font-family:var(--serif);font-size:20px;font-weight:600;margin:8px 0 6px;line-height:1.15}
.familia p{margin:0;color:var(--ink2);font-size:14px}

.oscuro.con-foto{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:30px;align-items:center}
.foto-sitio{margin:0;border-radius:18px;overflow:hidden;position:relative;align-self:stretch;min-height:260px;background:#0b2d57}
.foto-sitio img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.foto-sitio figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 16px 12px;font-size:12px;color:#E6ECF4;
  background:linear-gradient(180deg,rgba(0,19,45,0),rgba(0,19,45,.8))}
.oscuro.con-foto .ev{grid-template-columns:repeat(2,minmax(0,1fr))}

.intro-subs{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:36px;align-items:center;margin-bottom:34px}
.intro-subs .sec-h{margin-bottom:0;max-width:none}
.intro-subs .cta{margin-top:20px}
.foto-subs{margin:0;border-radius:22px;overflow:hidden;position:relative;aspect-ratio:4/5;background:var(--navy)}
.foto-subs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foto-subs figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;font-size:14px;font-weight:700;color:#fff;
  background:linear-gradient(180deg,rgba(0,19,45,0),rgba(0,19,45,.78))}
.foto-subs figcaption span{display:block;font-weight:500;font-size:12px;color:#C9D4E3}

@media (max-width:980px){.familias{grid-template-columns:minmax(0,1fr)}.familia img{aspect-ratio:2/1}}
@media (max-width:900px){
  .oscuro.con-foto,.intro-subs{grid-template-columns:minmax(0,1fr)}
  .foto-sitio{min-height:200px;aspect-ratio:16/9}
  .foto-subs{aspect-ratio:16/10}
  .banda-foto figcaption{padding:30px 16px 12px}
}


/* ============================================== tipografia y marca, 10-nov */
h1,h2{font-weight:800;letter-spacing:-.02em}
h1{font-size:44px;line-height:1.06}
h2{font-size:32px}
h3,.puerta h3,.familia h3,.franco h3,.partner h3,.registro-demo .junto h3,.f h3,.step h3{font-weight:700;letter-spacing:-.01em}
.eye{font-family:var(--serif);font-weight:700;letter-spacing:.12em}
.cifras b,.ev b,.kpi b,.proc li::before{font-weight:800}
.proc li::before{color:var(--navy)}
.num-f{background:var(--navy);color:#fff;font-weight:800}
.lead{font-size:18px}
.snap .pie{display:none}

/* la marca sobre la primera foto, en vez del pie */
.banda-foto figcaption{display:none}
.banda-foto .sello{position:absolute;left:max(28px,calc((100% - 1160px)/2 + 28px));bottom:24px;background:rgba(255,255,255,.94);
  border-radius:18px;padding:12px 18px 10px;box-shadow:0 14px 34px rgba(0,19,45,.22)}
.banda-foto .sello img{width:150px;height:auto;display:block}
.oscuro.final{position:relative;overflow:hidden}
.oscuro.final::after{content:"";position:absolute;right:-40px;bottom:-60px;width:360px;height:250px;opacity:.07;
  background:url(/emblema.png) center/contain no-repeat;pointer-events:none}
footer .fbrand .logo{display:none}
footer .fbrand .logo-grande{display:block;width:170px;height:auto;margin-bottom:10px}
@media (max-width:900px){
  .logo{font-size:17px}.logo::before{width:44px;height:31px}
  h1{font-size:33px}h2{font-size:26px}
  .banda-foto .sello{left:16px;bottom:14px;padding:8px 12px 6px}.banda-foto .sello img{width:104px}
}

/* cabecera: que quepa en una linea hasta 1200 px */
.logo{font-size:21px}
.logo::before{width:54px;height:38px}
nav.main a{font-size:13px;padding:8px 10px}
@media (max-width:1500px){.topr .btn.ghost{display:none}}

@media (max-width:1100px){
  .logo{font-size:18px}.logo::before{width:46px;height:32px}
  nav.main a{font-size:12px;padding:7px 7px}
  .topr .btn{padding:10px 16px;font-size:14px}
}
/* el sello va a la derecha: el cortacesped esta a la izquierda */
.banda-foto .sello{left:auto;right:max(28px,calc((100% - 1160px)/2 + 28px))}
@media (max-width:900px){.banda-foto .sello{left:auto;right:16px}}

/* ====================================================== el heroe ES la foto */
.hero.foto{position:relative;background:#00132D url(/img/grounds-lackland.jpg) center 55%/cover no-repeat;
  padding:0;min-height:600px;display:flex;align-items:center;color:#fff}
.hero.foto::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,19,45,.94) 0%,rgba(0,19,45,.86) 38%,rgba(0,19,45,.42) 70%,rgba(0,19,45,.18) 100%)}
.hero.foto .wrap{position:relative;display:block;max-width:1160px;padding-top:64px;padding-bottom:56px}
.hero.foto .hero-tx{max-width:760px}
.hero.foto .eye{color:var(--sky)}
.hero.foto h1{color:#fff;font-size:54px;margin:14px 0 16px;text-shadow:0 2px 24px rgba(0,19,45,.5)}
.hero.foto h1 mark{color:#FF4D4D}
.hero.foto .lead{color:#E3EAF4;max-width:640px;font-size:19px}
.hero.foto .lead b{color:#fff}
.hero.foto .puertas{margin-top:30px;max-width:820px}
.hero.foto .puerta{background:rgba(255,255,255,.96);color:var(--ink)}
.hero.foto .puerta.sub{background:rgba(0,19,45,.82);border:1px solid rgba(255,255,255,.28);color:#fff;backdrop-filter:blur(6px)}
.hero.foto .puerta.sub .btn.rojo{box-shadow:0 10px 26px rgba(0,0,0,.35)}
/* el snapshot como franja ancha */
#snapshot{padding:28px 0 34px}
.snap.ancho{box-shadow:none;border-radius:20px}
.snap.ancho .ct{margin-bottom:10px}
.snap.ancho dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
.snap.ancho dl>div{grid-template-columns:112px minmax(0,1fr)}
@media (max-width:900px){
  .hero.foto{min-height:0}
  .hero.foto .wrap{padding-top:40px;padding-bottom:34px}
  .hero.foto h1{font-size:36px}
  .hero.foto::before{background:linear-gradient(180deg,rgba(0,19,45,.9) 0%,rgba(0,19,45,.86) 100%)}
  .snap.ancho dl{grid-template-columns:minmax(0,1fr)}
}

/* el cortacesped esta a la izquierda de la foto: el texto va a la derecha y la sombra tambien */
.hero.foto{background-position:left 58%}
.hero.foto::before{background:linear-gradient(270deg,rgba(0,19,45,.93) 0%,rgba(0,19,45,.88) 42%,rgba(0,19,45,.5) 64%,rgba(0,19,45,.08) 100%)}
.hero.foto .hero-tx{margin-left:auto;max-width:700px}
.hero.foto .puertas{max-width:none}
@media (max-width:900px){
  .hero.foto::before{background:linear-gradient(180deg,rgba(0,19,45,.55) 0%,rgba(0,19,45,.92) 32%,rgba(0,19,45,.94) 100%)}
  .hero.foto{background-position:12% 100%}   /* en movil: el cortacesped, no las copas de los arboles */
  .hero.foto .wrap{padding-top:150px}
}

/* oficios: un cuadro con pestanas por grupo y buscador (antes, 34 tarjetas en 2,6 pantallas) */
.grupo-t{grid-column:1/-1;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:10px 0 2px}
.oficios-box{border:1px solid var(--line);border-radius:20px;background:#fff;overflow:hidden;margin-top:6px}
.of-barra{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 16px;background:var(--soft)}
.of-busca-w{position:relative;flex:1 1 300px;min-width:0}
.of-busca-w svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.of-busca-w input{width:100%;font:inherit;font-weight:500;font-size:14.5px;padding:10px 14px 10px 40px;
  border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);-webkit-appearance:none}
.of-busca-w input::placeholder{color:#8A94A6}
.of-tabs{display:flex;gap:6px;flex-wrap:wrap}
.of-tab{font:inherit;font-weight:700;font-size:13px;padding:8px 13px;border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--ink2);cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.of-tab span{color:var(--muted);font-weight:600;margin-left:6px;font-family:var(--mono,ui-monospace,monospace);font-size:12px}
.of-tab:hover{border-color:#C9D3E0}
.of-tab.on{background:var(--navy);border-color:var(--navy);color:#fff}
.of-tab.on span{color:var(--sky)}
.of-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-height:132px;align-content:start}
.of-row{display:flex;align-items:center;gap:10px;padding:11px 16px;border-top:1px solid var(--line);border-right:1px solid var(--line);
  text-decoration:none;color:var(--ink);font-size:14px;line-height:1.3;min-width:0;transition:background .12s}
.of-row:nth-child(3n){border-right:0}
.of-row .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.of-row b{font-weight:600}
.of-row .g{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.02em}
.of-row code{font-size:11px;font-weight:700;color:var(--muted);background:var(--soft);border-radius:999px;padding:2px 8px;flex:none}
.of-row .pt{width:7px;height:7px;border-radius:999px;background:var(--acc);flex:none}
.of-row:hover{background:var(--soft)}
.of-row:hover b{color:var(--acctx)}
.of-vacio{grid-column:1/-1;padding:26px 16px;text-align:center;color:var(--muted);border-top:1px solid var(--line)}
.of-pie{margin:0;padding:12px 16px;border-top:1px solid var(--line);background:var(--soft);font-size:14px;color:var(--ink2);text-align:center}
@media (max-width:1000px){.of-panel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .of-row:nth-child(3n){border-right:1px solid var(--line)}.of-row:nth-child(2n){border-right:0}}
@media (max-width:600px){.of-panel{grid-template-columns:minmax(0,1fr)}.of-row{border-right:0!important}
  .oficios-box{border-radius:16px}.of-tab{padding:7px 11px;font-size:12.5px}}

/* la barra lateral como estaba: escudo grande arriba, el nombre debajo en dos lineas */
.lado .marca-lado{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:6px 6px 18px}
.lado .marca-lado::before{display:block;width:62px;height:43px}
.lado .marca-lado b{font-size:17px;line-height:1.15;max-width:200px}
.lado .marca-lado i{font-size:10.5px;margin-top:3px}
@media (max-width:900px){.lado .marca-lado{flex-direction:row;align-items:center;padding:4px 8px}.lado .marca-lado::before{width:40px;height:28px}.lado .marca-lado b{font-size:14px}}