:root{
  /* --- MARCA GRAVITAS GROUP (guía oficial) --- */
  --marca:        #354A69;   /* azul institucional */
  --marca-osc:    #27374F;
  --marca-2:      #4A648A;
  --marca-suave:  #EDF0F5;
  --acento:       #B09E80;   /* dorado */
  --acento-osc:   #716551;
  --acento-suave: #F7F3EC;
  --hueso:        #E9E9E9;

  /* --- SEMÁFORO --- */
  --verde:  #2F7A5F;  --verde-bg:  #E9F2EE;
  --ambar:  #C08A2E;  --ambar-bg:  #FAF1E1;
  --rojo:   #A8443F;  --rojo-bg:   #F7EAE9;

  /* --- NEUTROS --- */
  --ink:      #1A2333;
  --texto:    #333E4D;
  --tenue:    #6B7684;
  --linea:    #DFE3E9;
  --linea-2:  #EFF1F4;
  --papel:    #F6F7F9;
  --superficie:#FFFFFF;

  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --caps:  'Spectral SC', 'Spectral', Georgia, serif;
  --sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --r: 10px;
  --sombra: 0 1px 2px rgba(26,35,51,.04), 0 8px 24px -12px rgba(26,35,51,.16);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--sans); color:var(--texto); background:var(--papel);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--serif); color:var(--ink); font-weight:600; line-height:1.28; margin:0 0 .5em}
h1{font-size:clamp(1.7rem,4vw,2.4rem); letter-spacing:-.015em}
h2{font-size:clamp(1.3rem,3vw,1.6rem)}
h3{font-size:1.1rem}
p{margin:0 0 1em}
a{color:var(--marca-2)}
.contenedor{max-width:820px; margin:0 auto; padding:0 20px}
.contenedor-ancho{max-width:1180px; margin:0 auto; padding:0 20px}

/* ---------- Encabezado ---------- */
.barra{background:var(--marca); color:var(--hueso); padding:12px 0}
.barra .contenedor,.barra .contenedor-ancho{display:flex; align-items:center; justify-content:space-between; gap:16px}
.marca{display:flex; flex-direction:column; align-items:center; gap:2px; text-decoration:none; color:var(--hueso)}
.marca-corona{display:flex; align-items:center; gap:9px; width:100%; color:var(--acento)}
.marca-corona .regla{flex:1; height:1px; background:currentColor; opacity:.85; min-width:26px}
.marca-corona svg{display:block; flex:0 0 auto}
.marca-txt{font-family:var(--caps); font-size:1.22rem; font-weight:600; letter-spacing:.055em; color:var(--hueso); line-height:1.15; white-space:nowrap}
.marca-sub{font-size:.63rem; text-transform:none; letter-spacing:.19em; color:var(--acento); font-family:var(--sans); font-weight:500}
.marca--oscuro{color:var(--marca)} .marca--oscuro .marca-txt{color:var(--marca)}

/* ---------- Tarjetas ---------- */
.tarjeta{background:var(--superficie); border:1px solid var(--linea); border-radius:var(--r); box-shadow:var(--sombra)}
.tarjeta-p{padding:clamp(20px,4vw,36px)}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:600 .95rem/1 var(--sans); padding:13px 24px; border-radius:8px;
  border:1px solid transparent; cursor:pointer; text-decoration:none; transition:.15s;
}
.btn-p{background:var(--marca); color:#fff}
.btn-p:hover{background:var(--marca-osc)}
.btn-s{background:#fff; color:var(--marca); border-color:var(--linea)}
.btn-s:hover{border-color:var(--marca); background:var(--marca-suave)}
.btn-a{background:var(--acento); color:#fff}
.btn-a:hover{filter:brightness(.93)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn-sm{padding:8px 14px; font-size:.85rem}

/* ---------- Formulario ---------- */
.progreso{position:sticky; top:0; z-index:20; background:var(--superficie); border-bottom:1px solid var(--linea)}
.progreso-barra{height:4px; background:var(--linea-2)}
.progreso-fill{height:100%; background:var(--acento); width:0; transition:width .35s cubic-bezier(.4,0,.2,1)}
.progreso-meta{display:flex; justify-content:space-between; align-items:center; padding:10px 20px; max-width:820px; margin:0 auto; font-size:.8rem; color:var(--tenue)}
.progreso-meta strong{color:var(--ink); font-weight:600}

.paso{display:none; animation:entra .3s ease}
.paso.activo{display:block}
@keyframes entra{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

.seccion-cab{border-left:3px solid var(--acento); padding-left:16px; margin-bottom:28px}
.seccion-eyebrow{font-size:.7rem; text-transform:uppercase; letter-spacing:.18em; color:var(--acento-osc); font-weight:600; margin-bottom:6px}
.seccion-cab h2{margin-bottom:.3em}
.seccion-cab p{color:var(--tenue); margin:0; font-size:.95rem}

.campo{margin-bottom:26px; padding-bottom:26px; border-bottom:1px solid var(--linea-2)}
.campo:last-of-type{border-bottom:0}
.campo-label{display:block; font-weight:600; color:var(--ink); margin-bottom:4px; font-size:1rem}
.campo-req{color:var(--acento); margin-left:3px}
.campo-ayuda{font-size:.86rem; color:var(--tenue); margin:0 0 12px}

input[type=text],input[type=number],input[type=email],textarea{
  width:100%; font:400 1rem/1.5 var(--sans); color:var(--ink);
  padding:12px 14px; border:1px solid var(--linea); border-radius:8px; background:#fff; transition:.15s;
}
input:focus,textarea:focus{outline:none; border-color:var(--marca-2); box-shadow:0 0 0 3px rgba(53,74,105,.14)}
textarea{min-height:96px; resize:vertical}
.input-unidad{position:relative}
.input-unidad>span{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--tenue); font-weight:600; pointer-events:none}
.input-unidad input{padding-left:38px}

.opciones{display:grid; gap:8px; margin-top:12px}
@media(min-width:620px){.opciones.dos{grid-template-columns:1fr 1fr}}
.op{
  display:flex; align-items:flex-start; gap:11px; padding:13px 15px; border:1px solid var(--linea);
  border-radius:8px; cursor:pointer; background:#fff; transition:.13s; font-size:.95rem;
}
.op:hover{border-color:var(--marca-2); background:var(--marca-suave)}
.op input{position:absolute; opacity:0; width:0; height:0}
.op-mark{flex:0 0 18px; height:18px; margin-top:2px; border:2px solid #C3CBD1; border-radius:50%; position:relative; transition:.13s}
.op input:checked ~ .op-mark{border-color:var(--marca); background:var(--marca)}
.op input:checked ~ .op-mark::after{content:''; position:absolute; inset:3px; background:#fff; border-radius:50%}
.op:has(input:checked){border-color:var(--marca); background:var(--marca-suave); box-shadow:0 0 0 1px var(--marca)}
.op input:focus-visible ~ .op-mark{box-shadow:0 0 0 3px rgba(53,74,105,.22)}

.nav-pasos{display:flex; justify-content:space-between; gap:12px; margin-top:32px; padding-top:24px; border-top:1px solid var(--linea)}
.error-msg{color:var(--rojo); font-size:.86rem; margin-top:8px; display:none}
.error-msg.ver{display:block}
.campo.malo input,.campo.malo textarea{border-color:var(--rojo)}

/* ---------- Semáforo / puntajes ---------- */
.chip{display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; padding:4px 10px; border-radius:20px}
.chip.verde{background:var(--verde-bg); color:var(--verde)}
.chip.ambar{background:var(--ambar-bg); color:var(--ambar)}
.chip.rojo{background:var(--rojo-bg); color:var(--rojo)}
.punto{width:8px; height:8px; border-radius:50%; background:currentColor; display:inline-block}

.medidor{height:8px; background:var(--linea-2); border-radius:4px; overflow:hidden}
.medidor > i{display:block; height:100%; border-radius:4px}
.medidor > i.verde{background:var(--verde)} .medidor > i.ambar{background:var(--ambar)} .medidor > i.rojo{background:var(--rojo)}

.rejilla{display:grid; gap:16px}
@media(min-width:700px){.rejilla.c2{grid-template-columns:1fr 1fr} .rejilla.c4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:900px){.rejilla.c3{grid-template-columns:repeat(3,1fr)}}

.kpi{background:var(--superficie); border:1px solid var(--linea); border-radius:var(--r); padding:18px}
.kpi-lab{font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--tenue); font-weight:600}
.kpi-val{font-family:var(--serif); font-size:1.9rem; font-weight:600; color:var(--ink); line-height:1.1; margin:6px 0 4px}
.kpi-pie{font-size:.82rem; color:var(--tenue)}

.hallazgo{border:1px solid var(--linea); border-left-width:4px; border-radius:var(--r); background:#fff; padding:20px; margin-bottom:14px}
.hallazgo.sev1{border-left-color:var(--rojo)}
.hallazgo.sev2{border-left-color:var(--ambar)}
.hallazgo.sev3{border-left-color:var(--marca-2)}
.hallazgo h3{margin-bottom:8px}
.hallazgo .meta{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; align-items:center}
.etq{font-size:.72rem; font-weight:600; color:var(--tenue); background:var(--linea-2); padding:3px 9px; border-radius:5px}
.bloque-accion{background:var(--marca-suave); border-radius:8px; padding:14px 16px; margin-top:12px}
.bloque-accion .t{font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--marca); font-weight:700; margin-bottom:5px}
.bloque-accion p{margin:0; font-size:.95rem}

table.tabla{width:100%; border-collapse:collapse; font-size:.92rem}
table.tabla th{text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--tenue); font-weight:600; padding:10px 12px; border-bottom:2px solid var(--linea)}
table.tabla td{padding:11px 12px; border-bottom:1px solid var(--linea-2); vertical-align:top}
table.tabla tr:hover td{background:var(--papel)}
.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}

.aviso{background:var(--acento-suave); border:1px solid #E3D8C4; border-radius:8px; padding:14px 16px; font-size:.88rem; color:var(--acento-osc)}
.tenue{color:var(--tenue)} .peq{font-size:.86rem} .mini{font-size:.78rem}
.mt0{margin-top:0} .mb0{margin-bottom:0}
.sep{height:1px; background:var(--linea); margin:32px 0; border:0}
.pie{text-align:center; color:var(--tenue); font-size:.82rem; padding:36px 20px}

/* ---------- Impresión / PDF ---------- */
@page{size:letter; margin:14mm 13mm}
@media print{
  :root{--papel:#fff}
  body{background:#fff; font-size:10.5pt}
  .no-print{display:none !important}
  .barra{background:var(--marca) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .tarjeta,.kpi,.hallazgo,.chip,.medidor>i,.bloque-accion,.aviso{-webkit-print-color-adjust:exact; print-color-adjust:exact; box-shadow:none}
  .hallazgo,.kpi,.tarjeta{break-inside:avoid; page-break-inside:avoid}
  h2{break-after:avoid}
  .salto{break-before:page; page-break-before:always}
  .contenedor,.contenedor-ancho{max-width:none; padding:0}
  a{color:inherit; text-decoration:none}
}

/* ---------- Lectura de Gravitas IA ---------- */
.pill-ia{display:inline-flex; align-items:center; gap:6px; background:var(--acento); color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:4px 11px; border-radius:20px}
#bloque-ia .btn-a{background:var(--acento)}