/* ============================================================================
   Visor Web SOLUTIVA, version 2. Estetica alineada a solutiva.com.

   POR QUE CAMBIA RESPECTO DE LA v1. El visor v1 era oscuro (#1d1d1d) con acento
   azul (#4393c3) y tipografia Overpass. El sitio corporativo es lo contrario:
   fondo blanco, sesiones oscuras #1a1a1a, acento VERDE LIMA #8caa20 (el del logo
   "20 Anios"), y tipografias Raleway para cuerpo y Titillium Web para titulos,
   con esquinas RECTAS (border-radius 0). Los valores se midieron sobre
   solutiva.com con getComputedStyle, no se estimaron a ojo:
     - texto principal    rgb(26,26,26)   = #1a1a1a   (752 usos)
     - texto secundario   rgb(85,85,85)   = #555555   (144 usos)
     - acento             rgb(139,176,20) = #8caa20
     - gris de seccion    rgb(245,245,245)= #f5f5f5
     - seccion oscura     rgb(42,42,42)   = #2a2a2a
   ============================================================================ */

:root{
  --tx:#1a1a1a; --tx2:#555555; --tx3:#a3a3a3;
  --ac:#8caa20; --ac-dark:#5f7417;
  --bg:#ffffff; --bg2:#f5f5f5; --dark:#1a1a1a; --dark2:#2a2a2a;
  --linea:#e3e3e3;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--tx);
  font:400 16px/1.65 "Montserrat",-apple-system,"Segoe UI",Arial,sans-serif;
}
h1,h2,h3,h4{font-family:"Montserrat",-apple-system,"Segoe UI",Arial,sans-serif;font-weight:600;margin:0;
  line-height:1.25;text-wrap:balance}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.in{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---- header fijo, claro, con la barra de acento abajo ---- */
header{position:sticky;top:0;z-index:50;background:var(--bg);
  border-bottom:1px solid var(--linea)}
header .in{display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:68px}
/* El manual fija 175 x 45 px de minimo digital y la variante CONSULTORES lleva una
   segunda linea que a 34 px se vuelve ilegible. A 46 px el ancho queda en 176. */
#solutiva-logo{height:46px;width:auto}
.header-nav{display:flex;gap:26px;flex-wrap:wrap}
.header-anchor{font-size:12.5px;font-weight:600;letter-spacing:.14em;color:var(--tx2);
  padding:6px 0;border-bottom:2px solid transparent;transition:.15s}
.header-anchor:hover{color:var(--tx);border-bottom-color:var(--ac-dark)}
.header-anchor:focus-visible{outline:3px solid var(--ac-dark);outline-offset:3px}

/* ---- portada ---- */
#front-section{background:var(--dark);color:#fff;padding:76px 0 84px;
  background-image:linear-gradient(rgba(26,26,26,.86),rgba(26,26,26,.94)),url("img/bg1-home5.jpg");
  background-size:cover;background-position:center}
#front-section .in{max-width:860px;text-align:center}
.eyebrow{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.2em;
  color:var(--ac);margin-bottom:18px}
#main-title{font-size:clamp(28px,4.4vw,46px);color:#fff;margin-bottom:16px}
#subtitle{display:block;font-size:17px;color:#cfcfcf;max-width:660px;margin:0 auto 30px}
.front-btn{display:inline-block;background:var(--ac-dark);color:#fff;font-weight:700;
  font-size:13px;letter-spacing:.12em;padding:15px 32px;transition:.16s}
.front-btn:hover{background:#fff;color:var(--tx)}
.front-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ---- barra de cifras ---- */
#stats{background:var(--bg2);border-bottom:1px solid var(--linea);padding:26px 0}
#stats .in{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:22px;
  text-align:center}
.stat b{display:block;font-family:"Montserrat",-apple-system,"Segoe UI",Arial,sans-serif;font-size:32px;
  font-weight:700;color:var(--ac-dark);line-height:1}
.stat span{display:block;font-size:12px;font-weight:600;letter-spacing:.09em;
  color:var(--tx2);margin-top:6px}

/* ---- seccion de proyectos ---- */
.sec-head{max-width:var(--max);margin:0 auto;padding:64px 24px 8px}
.sec-head h2{font-size:clamp(22px,3vw,32px)}
.sec-head p{color:var(--tx2);max-width:640px;margin:12px 0 0}
.rule{width:56px;height:4px;background:var(--ac);margin:0 0 20px}

#cards-section{max-width:var(--max);margin:0 auto;padding:14px 24px 70px;
  display:grid;grid-template-columns:1fr 1fr;gap:26px}
/* La ficha se apila: imagen arriba, texto abajo. Con dos por fila la columna de texto
   ya no da para poner la imagen al lado sin dejar la prosa en cuarenta caracteres. */
.card-container{display:flex;flex-direction:column;
  border:1px solid var(--linea);background:var(--bg);transition:.18s}
.card-container:hover{border-color:#cfcfcf;box-shadow:0 10px 28px rgba(0,0,0,.07)}
@media(max-width:820px){#cards-section{grid-template-columns:1fr}}
.card-text-container{padding:28px 28px 26px;display:flex;flex-direction:column;
  flex:1}
.card-kicker{font-size:11px;font-weight:700;letter-spacing:.17em;color:var(--ac-dark);
  margin-bottom:9px}
.card-title{font-size:21px;margin-bottom:12px}
.card-description-container{flex:1}
.card-description-container p{margin:0 0 18px;color:var(--tx2);font-size:15px}
.card-meta{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 22px}
.tag{font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--tx2);
  border:1px solid var(--linea);background:var(--bg2);padding:4px 10px}
.btn{align-self:flex-start;display:inline-block;background:var(--dark);color:#fff;
  font-weight:700;font-size:12.5px;letter-spacing:.11em;padding:13px 26px;transition:.16s}
.btn:hover{background:var(--ac-dark)}
.btn:focus-visible{outline:3px solid var(--ac);outline-offset:2px}
.card-image-container{background:var(--bg2);overflow:hidden;order:-1}
.card-image-container a{display:block}
/* Proporcion fija: las seis capturas no miden lo mismo y sin esto las filas quedan
   desparejas. */
.card-image{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:transform .5s}
.card-container:hover .card-image{transform:scale(1.035)}

/* ---- informacion / dispositivos ---- */
#devices-section{background:var(--dark2);color:#fff;padding:66px 0 72px}
#devices-section .in{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media(max-width:820px){#devices-section .in{grid-template-columns:1fr}}
#devices-section h2{font-size:clamp(22px,3vw,30px);color:#fff}
#devices-section p{color:#c7c7c7;font-size:15.5px}
#devices-section .rule{margin-bottom:18px}
.dev-list{list-style:none;padding:0;margin:22px 0 0}
.dev-list li{position:relative;padding-left:22px;margin-bottom:11px;color:#dcdcdc;
  font-size:15px}
.dev-list li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:2px;
  background:var(--ac)}
.dev-imgs{display:flex;align-items:flex-end;justify-content:center;gap:14px}
.dev-imgs img{filter:drop-shadow(0 14px 26px rgba(0,0,0,.4))}
.dev-imgs img{min-width:0}
.device-image-smartphone{width:118px;max-width:32%}
.device-image-tablet{width:250px;max-width:64%}

/* ---- pie ---- */
footer{background:var(--dark);color:#9a9a9a;padding:38px 0 34px;font-size:13.5px}
footer .in{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap}
footer a:hover{color:#fff;text-decoration:underline}
footer .brand{font-family:"Montserrat",-apple-system,"Segoe UI",Arial,sans-serif;color:#fff;font-weight:600;
  font-size:15px;margin-bottom:7px}
.foot-note{border-top:1px solid #333;margin-top:26px;padding-top:18px;font-size:12px;
  color:#9a9a9a}

/* ---------- cascara compartida de los tableros ----------
   Estas tres clases vivian solo en el <style> del Dashboard de Presupuesto, y la
   Evaluacion Social las usaba sin tener ninguna regla: quedaba pegada al borde y
   desbordaba a 390 px. Van aca, que es la hoja que comparten las dos. */
.dash-head{max-width:var(--max);margin:0 auto;padding:34px 24px 6px}
.dash-head .rule{width:56px;height:4px;background:var(--ac);margin:0 0 16px}
.dash-head h1{font-size:clamp(21px,3vw,30px);margin:0;color:var(--tx)}
.dash-head .lead{color:var(--tx2);max-width:680px;margin:10px 0 0;font-size:15px}
.dash-head .badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.17em;
  color:var(--ac-dark);margin-bottom:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:16px 24px 46px}

/* <button> no hereda la familia del body: sin esto 64 controles del sitio salian en Arial */
button,input,select,textarea{font:inherit}

/* piso tipografico: nada por debajo de 12 px, que es donde la auditoria encontro
   nueve tamanios distintos apinados y solutiva.com no baja de 13 px */
.tag,.card-kicker,.stat span,.header-anchor{font-size:12px}
.foot-note{font-size:12px}

/* ---------- nota de material referencial ----------
   Va en TODAS las hojas del visor, justo bajo el banner. El visor muestra formato de
   entrega con datos de estudios ya ejecutados, y quien llegue por un enlace directo a un
   modulo tiene que leerlo ahi mismo, no en el indice. */
.nota-ref{ background:#fbf6e4; border-top:1px solid #ece2bf; border-bottom:1px solid #ece2bf;
  font-family:"Montserrat",-apple-system,"Segoe UI",Arial,sans-serif; }
.nota-ref .in{ max-width:1180px; margin:0 auto; padding:9px 24px;
  font-size:12.5px; line-height:1.5; color:#5c5433; }
.nota-ref b{ color:#3d3720; }
@media (max-width:560px){ .nota-ref .in{ padding:8px 16px; font-size:12px; } }

/* Los ceros de los deslizadores y de las tarjetas salian con cifras de estilo antiguo y
   se leian como letra o. Se fuerzan cifras lineales y de ancho fijo donde hay numeros
   que se comparan entre si. */
.val, .van, .rc .sub, table td, table th, .ext{
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* ---------- solo portada (body.portada) ----------
   Se acota con la clase para no mover el encabezado de los modulos, que comparten hoja. */
.portada .sec-head,.portada section[id]{scroll-margin-top:84px}
.portada main{overflow-x:clip} /* la entrada lateral de las fichas no abre scroll horizontal */
.portada .logo-link{display:block}
.portada .logo-link:focus-visible{outline:3px solid var(--ac-dark);outline-offset:3px}
.portada footer a{display:inline-block;min-height:24px;line-height:24px}
.portada .ext-ico{display:inline-block;vertical-align:baseline;margin-left:5px}
.portada .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.portada footer a:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* Bajo 820 px el encabezado fijo media 154 px a 390: deja de ser fijo y la navegacion
   pasa a una fila compacta bajo el logo. */
@media(max-width:820px){
  .portada header{position:static}
  .portada header .in{flex-direction:column;align-items:flex-start;gap:6px;
    padding:10px 16px 8px;min-height:0}
  .portada .header-nav{gap:2px 18px}
  .portada .header-anchor{padding:3px 0}
  .portada .sec-head,.portada section[id]{scroll-margin-top:0}
}
@media print{
  .portada .rv,.portada .rv-l,.portada .rv-r,.portada .hero-in{opacity:1!important;
    transform:none!important;animation:none!important;transition:none!important}
  .portada header{position:static}
  .portada #front-section,.portada #devices-section,.portada footer{background:#fff!important;
    color:#1a1a1a!important}
  .portada #main-title,.portada #devices-section h2,.portada footer .brand{color:#1a1a1a!important}
  .portada #subtitle,.portada #devices-section p,.portada .dev-list li,.portada footer,
  .portada .foot-note{color:#333!important}
  .portada .eyebrow{color:var(--ac-dark)}
  .portada .front-btn,.portada .btn{background:#fff!important;color:#1a1a1a!important;
    border:1px solid #1a1a1a}
  .portada .front-btn::after{display:none}
  .portada .card-container{break-inside:avoid;box-shadow:none}
  .portada .dev-imgs img{filter:none}
}

/* ---- Portada: menos aire y esquinas moderadas (01-10-2026) ----------------------------- */
.portada #front-section{padding:56px 0 52px}
.portada #main-title{margin-bottom:12px}
.portada .hero-dato{display:block;margin-top:22px;font-size:13px;color:#cfcfcf;letter-spacing:.02em}
.portada .hero-dato b{color:var(--ac);font-weight:700}
.portada .sec-head{padding:40px 24px 4px}
.portada #cards-section{padding-top:10px}
.portada .card-container{border-radius:12px;overflow:hidden}
.portada .btn,.portada .front-btn{border-radius:6px}
.portada .tag{border-radius:999px;padding:4px 12px}
.portada .front-btn::after{border-radius:inherit}
/* La entrada animada dejaba el titulo de la seccion y las fichas en blanco hasta hacer scroll:
   en la primera pantalla se leia como espacio vacio. Se muestran desde el inicio. */
.portada .rv,.portada .rv-l,.portada .rv-r{opacity:1!important;transform:none!important;transition:none!important}