/* ============================================================
   Manual de marca Ituran 2025
   1.6 Sistemas de color · 1.7 Tipografia corporativa · 1.8 Tipografia secundaria
   1.3 Area de seguridad · 3.1 Grafica Ituran Con Seguro · 3.2 Grafica regional
   ============================================================ */

/* 1.7 / 1.8 — Las corporativas son fuentes comerciales: se referencian con local()
   para quien las tenga instaladas (equipo Ituran). No se empaquetan ni se
   redistribuyen. El resto cae al palo seco del sistema, que respeta 3.1
   ("fuentes delgadas, no serifadas"). */
@font-face{
  font-family:"PF Beau Sans Pro";
  src:local("PF BeauSans Pro Regular"), local("PFBeauSansPro-Regular"), local("PF BeauSans Pro");
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:"PF Beau Sans Pro";
  src:local("PF BeauSans Pro Book"), local("PFBeauSansPro-Bbook");
  font-weight:300; font-display:swap;
}
@font-face{
  font-family:"PF Beau Sans Pro";
  src:local("PF BeauSans Pro Bold"), local("PFBeauSansPro-Bold");
  font-weight:700; font-display:swap;
}
@font-face{
  font-family:"PF Beau Sans Pro";
  src:local("PF BeauSans Pro SemiBold"), local("PFBeauSansPro-SemiBold");
  font-weight:600; font-display:swap;
}
@font-face{
  font-family:"Museo Sans Ituran";
  src:local("Museo Sans Cyrl 700"), local("MuseoSansCyrl-700"), local("Museo Sans 700");
  font-weight:700; font-display:swap;
}

:root{
  --font-marca:"PF Beau Sans Pro", "Museo Sans Ituran", "Segoe UI", Calibri, system-ui, -apple-system, sans-serif;
  /* 1.6 Sistemas de color — valores exactos del manual */
  --azul:#1C386B;      /* Azul Ituran · Pantone 2748C */
  --celeste:#0F98D5;   /* Celeste Ituran · Pantone 2925C */
  --verde:#97C93D;     /* Verde Ituran · Pantone 375C */
  --gris:#9C9DB7;      /* Gris Tagline Ituran · Pantone 5285 */
  --gris-medio:#6D6E71;/* Gris Medio Ituran · Pantone Cool Gray 10C */
  --tinta:#12203c;
  --tinta-2:#4a5570;
  --papel:#f4f6fa;
  --card:#ffffff;
  --borde:#e2e7f0;
  --alerta:#c0392b;
  --alerta-suave:#fdecea;
  --amba:#b7791f;
  --amba-suave:#fdf4e3;
  --radio:14px;
  --sombra:0 1px 2px rgba(18,32,60,.06), 0 8px 24px rgba(18,32,60,.06);
  --wrap:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font:400 16px/1.6 var(--font-marca);
  overflow-wrap:break-word;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
a{color:var(--celeste)}
/* 3.1 Grafica ICS: titulares en peso alto, cuerpo en trazo delgado, nunca serifa */
h1,h2,h3{line-height:1.22; margin:0 0 .4em; font-weight:700; letter-spacing:-.01em}
h2{font-size:1.45rem; color:var(--azul)}
h3{font-size:1.05rem; font-weight:600}
p{margin:0 0 .8em}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--azul); color:#fff;
  box-shadow:0 2px 12px rgba(18,32,60,.18);
  overflow:hidden; isolation:isolate;
}
/* 3.2 Grafica regional: el semicirculo va DETRAS, complementa sin predominar.
   Azul/celeste = publico general. Trazo proporcional al formato. */
.arco-marca{
  position:absolute; right:-88px; top:50%; transform:translateY(-50%);
  width:230px; height:230px; z-index:-1; opacity:.22; pointer-events:none;
}
.topbar-in{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:14px; padding-bottom:12px}
/* 1.3 Area de seguridad: reserva alrededor del isologotipo, no lo invaden otros elementos */
.brand{display:flex; align-items:center; gap:16px; min-width:0}
.brand-logo{height:44px; width:auto; flex:0 0 auto; display:block}
.brand-txt{min-width:0; border-left:1px solid rgba(255,255,255,.22); padding-left:16px}
.brand strong{display:block; font-size:1.05rem; font-weight:700; letter-spacing:.1px}
.brand-sub{display:block; font-size:.78rem; font-weight:300; color:#b9c8e4}
.topbar-actions{display:flex; align-items:center; gap:10px; flex:0 0 auto}

.btn{
  border:0; border-radius:10px; padding:8px 14px; font:inherit; font-size:.86rem;
  cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:.15s;
}
.btn-ghost{background:rgba(255,255,255,.14); color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.24)}
.btn-ghost:disabled{opacity:.5; cursor:progress}
.btn .ico{font-size:1.05rem; line-height:1}
.btn.spin .ico{animation:spin .8s linear infinite; display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

.chip{display:inline-block; padding:5px 11px; border-radius:999px; font-size:.76rem; white-space:nowrap}
.chip-quiet{background:rgba(255,255,255,.13); color:#cddcf2}

.tabs{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; padding-bottom:0}
.tabs::-webkit-scrollbar{display:none}
.tab{
  background:transparent; border:0; border-bottom:3px solid transparent; color:#b9c8e4;
  padding:11px 15px; font:inherit; font-size:.9rem; cursor:pointer; white-space:nowrap; transition:.15s;
}
.tab:hover{color:#fff}
.tab.is-active{color:#fff; border-bottom-color:var(--verde); font-weight:600}

.offline-bar{background:var(--amba-suave); color:var(--amba); text-align:center; padding:8px; font-size:.85rem; border-bottom:1px solid #f0e0bd}

/* ---------- layout ---------- */
main{padding:26px 20px 60px; min-height:60vh}
.loading{padding:60px 0; text-align:center; color:var(--tinta-2)}
section{margin-bottom:34px}
.lead{color:var(--tinta-2); max-width:75ch; margin-bottom:18px}

.card{background:var(--card); border:1px solid var(--borde); border-radius:var(--radio); box-shadow:var(--sombra)}
.pad{padding:20px}

/* KPI */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:22px}
.kpi{background:var(--card); border:1px solid var(--borde); border-radius:var(--radio); padding:17px 18px; box-shadow:var(--sombra); position:relative; overflow:hidden}
.kpi::before{content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--celeste)}
.kpi.is-us::before{background:var(--verde)}
.kpi.is-warn::before{background:var(--alerta)}
.kpi-label{font-size:.76rem; text-transform:uppercase; letter-spacing:.6px; color:var(--gris); margin-bottom:6px}
.kpi-val{font-size:2rem; font-weight:700; color:var(--azul); line-height:1}
.kpi-val small{font-size:.9rem; font-weight:600; color:var(--tinta-2)}
.kpi-note{font-size:.8rem; color:var(--tinta-2); margin-top:6px}

/* barras comparativas */
.bars{display:grid; gap:11px}
.bar-row{display:grid; grid-template-columns:minmax(120px,168px) 1fr auto; align-items:center; gap:12px; font-size:.9rem}
.bar-name{color:var(--tinta-2)}
.bar-track{background:#eef1f7; border-radius:999px; height:20px; overflow:hidden}
.bar-fill{height:100%; border-radius:999px; background:var(--celeste); transition:width .5s ease}
.bar-fill.us{background:var(--verde)}
.bar-fill.zero{background:#dfe4ee; min-width:3px}
.bar-val{font-variant-numeric:tabular-nums; font-weight:600; color:var(--azul); min-width:2.4em; text-align:right}

/* hallazgos */
.finding{border-left:4px solid var(--gris); margin-bottom:16px}
.finding.sev-critica{border-left-color:var(--alerta)}
.finding.sev-alta{border-left-color:var(--amba)}
.finding.sev-media{border-left-color:var(--celeste)}
.finding-head{display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:10px}
.finding-head h3{margin:0; flex:1 1 320px}
.sev{font-size:.7rem; text-transform:uppercase; letter-spacing:.7px; padding:4px 10px; border-radius:999px; font-weight:700}
.sev-critica .sev{background:var(--alerta-suave); color:var(--alerta)}
.sev-alta .sev{background:var(--amba-suave); color:var(--amba)}
.sev-media .sev{background:#e8f4fb; color:#1a6f9e}
.finding dl{display:grid; gap:11px; margin:0}
.finding dt{font-size:.73rem; text-transform:uppercase; letter-spacing:.6px; color:var(--gris); margin-bottom:2px}
.finding dd{margin:0; color:var(--tinta-2)}
.finding dd.quote{background:var(--papel); border-radius:9px; padding:11px 13px; color:var(--tinta); font-size:.92rem}
.finding .accion{background:#f3f9e9; border-radius:9px; padding:11px 13px; color:#4e6b1c}

/* filtros */
.filters{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-bottom:18px}
.fbtn{
  background:var(--card); border:1px solid var(--borde); border-radius:999px;
  padding:7px 14px; font:inherit; font-size:.84rem; cursor:pointer; color:var(--tinta-2); transition:.15s;
}
.fbtn:hover{border-color:var(--celeste); color:var(--celeste)}
.fbtn.on{background:var(--azul); border-color:var(--azul); color:#fff; font-weight:600}
.fbtn .n{opacity:.65; font-size:.8em; margin-left:4px}
.fsep{width:1px; height:22px; background:var(--borde); margin:0 3px}
.fcount{margin-left:auto; font-size:.84rem; color:var(--gris)}

/* grid de anuncios */
.adgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(276px,1fr)); gap:16px}
.ad{background:var(--card); border:1px solid var(--borde); border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); display:flex; flex-direction:column}
.ad-media{position:relative; background:#0d1a30; display:flex; justify-content:center; align-items:center; min-height:150px}
.ad-media img{width:100%; height:auto; display:block; max-height:330px; object-fit:cover}
.ad-badge{position:absolute; top:9px; left:9px; background:rgba(13,26,48,.82); color:#fff; font-size:.68rem; padding:3px 8px; border-radius:999px; letter-spacing:.4px}
.ad-badge.vid{background:rgba(15,152,213,.92)}
.ad-body{padding:14px; display:flex; flex-direction:column; gap:9px; flex:1}
.ad-brand{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.8rem}
.ad-brand b{color:var(--azul)}
.ad-date{color:var(--gris); font-size:.76rem; white-space:nowrap}
.ad-copy{font-size:.86rem; color:var(--tinta-2); white-space:pre-wrap; margin:0; max-height:8.2em; overflow:hidden; position:relative; transition:max-height .25s}
.ad-copy.open{max-height:none}
.ad-copy:not(.open).clipped::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2.2em; background:linear-gradient(transparent,#fff)}
.ad-more{align-self:flex-start; background:none; border:0; color:var(--celeste); font:inherit; font-size:.8rem; cursor:pointer; padding:0}
.ad-tags{display:flex; gap:5px; flex-wrap:wrap; margin-top:auto; padding-top:4px}
.tag{font-size:.7rem; padding:3px 8px; border-radius:6px; background:#eef2f8; color:var(--tinta-2)}
.tag.price{background:#f3f9e9; color:#4e6b1c; font-weight:700}
.tag.cta{background:#e8f4fb; color:#1a6f9e}

/* google serp */
.serpgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px}
.serp{background:#fff; border:1px solid var(--borde); border-radius:var(--radio); padding:16px; box-shadow:var(--sombra); position:relative}
.serp.rel-critica{border-color:#f0b6ae; box-shadow:0 0 0 3px var(--alerta-suave)}
.serp.rel-nuestra{border-color:#c9e39a; box-shadow:0 0 0 3px #f3f9e9}
.serp-tag{font-size:.68rem; font-weight:700; color:#3c4043; margin-bottom:7px; display:block}
.serp-url{font-size:.76rem; color:#3c4043; margin-bottom:2px}
.serp-title{color:#1a0dab; font-size:1.03rem; line-height:1.3; margin:2px 0 5px; font-weight:400}
.serp-desc{font-size:.85rem; color:#4d5156; margin:0}
.serp-links{display:flex; gap:8px; flex-wrap:wrap; margin-top:9px}
.serp-links span{font-size:.75rem; color:#1a0dab; border:1px solid #dadce0; border-radius:999px; padding:3px 9px}
.serp-why{margin-top:12px; padding-top:11px; border-top:1px dashed var(--borde); font-size:.82rem; color:var(--tinta-2)}
.serp-why b{color:var(--azul)}

/* tabla mensajes */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--borde); border-radius:var(--radio); background:#fff}
table{border-collapse:collapse; width:100%; min-width:720px; font-size:.88rem}
th,td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--borde); vertical-align:top}
thead th{background:var(--azul); color:#fff; font-size:.8rem; letter-spacing:.3px; position:sticky; top:0}
thead th.us{background:#16305c; box-shadow:inset 0 -3px 0 var(--verde)}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:#fafbfd}
td.eje{font-weight:600; color:var(--azul); white-space:nowrap}
td.us{background:#f3f9e9}

/* inversion */
.sliders{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin:18px 0 6px}
.slider label{display:block; font-size:.83rem; color:var(--tinta-2); margin-bottom:7px}
.slider label b{color:var(--azul); font-variant-numeric:tabular-nums}
.slider input[type=range]{width:100%; accent-color:var(--celeste)}
.slider .hint{font-size:.74rem; color:var(--gris); margin-top:4px}
.warnbox{background:var(--amba-suave); border:1px solid #f0e0bd; border-radius:var(--radio); padding:14px 16px; color:#7a5a12; font-size:.88rem; margin-bottom:18px}
.warnbox b{color:var(--amba)}

/* plan */
.steps{display:grid; gap:12px; counter-reset:s}
.step{display:grid; grid-template-columns:auto 1fr; gap:15px; align-items:start; background:var(--card); border:1px solid var(--borde); border-radius:var(--radio); padding:16px 18px; box-shadow:var(--sombra)}
.step-n{width:30px; height:30px; border-radius:50%; background:var(--azul); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.86rem}
.step h3{margin:0 0 5px}
.step p{margin:0 0 9px; color:var(--tinta-2); font-size:.91rem}
.step-meta{display:flex; gap:7px; flex-wrap:wrap}
.pill{font-size:.72rem; padding:3px 9px; border-radius:999px; background:#eef2f8; color:var(--tinta-2)}
.pill.imp-alto{background:#f3f9e9; color:#4e6b1c; font-weight:600}
.pill.esf-bajo{background:#e8f4fb; color:#1a6f9e}

/* metodo */
.srclist{display:grid; gap:14px}
.src{border-left:3px solid var(--celeste); padding-left:15px}
.src h3{margin:0 0 3px}
.src .yes{color:#4e6b1c; font-size:.88rem}
.src .no{color:var(--alerta); font-size:.88rem}
ul.clean{margin:0; padding-left:20px; color:var(--tinta-2)}
ul.clean li{margin-bottom:8px}

/* footer */
.foot{background:var(--azul); color:#b9c8e4; padding:34px 0 28px; font-size:.83rem; text-align:center}
.foot a{color:#cddcf2}
/* 1.3 area de seguridad: margen libre alrededor del isologotipo + tagline */
.foot-logo{height:52px; width:auto; display:block; margin:0 auto 22px}
.foot-src{margin-bottom:12px}
.foot-sig{margin:0; color:#fff}
.foot-sig .heart{color:#ff6b81}

@media (max-width:640px){
  .wrap{padding:0 15px}
  main{padding:20px 15px 44px}
  /* 1.4 Reductibilidad: por debajo del minimo legible el logo pierde pregnancia */
  .brand-logo{height:36px}
  .brand-txt{padding-left:12px}
  .brand strong{font-size:.95rem}
  .foot-logo{height:42px}
  .arco-marca{right:-110px; width:180px; height:180px; opacity:.16}
  .kpi-val{font-size:1.65rem}
  .bar-row{grid-template-columns:1fr auto; gap:8px}
  .bar-name{grid-column:1/-1; font-size:.85rem}
  .btn-label{display:none}
  .adgrid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  h2{font-size:1.2rem}
}