/* =========================================================================
   AÉREO SERVICIOS · páginas por servicio (/servicios/<slug>/)
   Se carga DESPUÉS de /guias/guias.css: la página usa el mismo esqueleto que
   las guías (miga, hero, respuesta corta, índice lateral, FAQ, cierre) y acá
   solo va lo propio de un servicio. Servicios es el área negra del sistema de
   identidad: el negro marca el área, el amarillo es el acento.
   Las páginas las arma tools/servicios.py; no se editan a mano.
   ========================================================================= */

.sv-hero .sello-area{margin:0 0 16px;}
.sv-hero .gu-k{background:#000;color:#ECE31D;}

/* botones del hero: el primario siempre lleva a WhatsApp con una persona */
.sv-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.sv-btns .btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  background:#ECE31D;color:#000;border:2px solid #000;padding:12px 20px;}
.sv-btns .btn.g{background:#fff;color:#000;}
.sv-btns .btn svg{width:18px;height:18px;flex:0 0 18px;}

/* captura real de una plataforma o de terreno */
.sv-fig{margin:28px 0 0;}
.sv-fig img{display:block;width:100%;height:auto;border:2px solid #000;border-radius:4px;background:#141C23;}
.sv-fig figcaption{font-family:var(--mn);font-size:11px;letter-spacing:.04em;line-height:1.5;color:var(--ink-2);margin-top:9px;}

/* caso ejecutado: el área Servicios en su color */
.sv-caso{background:#000;color:#fff;border-radius:4px;padding:clamp(20px,3vw,30px);margin:28px 0 0;}
.sv-caso .k{display:block;font-family:var(--mn);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#ECE31D;}
.sv-caso h3{font-family:var(--hd);font-weight:900;text-transform:uppercase;font-size:clamp(22px,3vw,30px);
  line-height:1;color:#fff;margin:10px 0 0;}
.sv-caso p{font-size:15.5px;line-height:1.6;color:#D0D6DD;margin:12px 0 0;}
.sv-caso p b,.sv-caso p strong{color:#fff;font-weight:500;}
.sv-caso a{color:#ECE31D;font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.sv-caso .cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:14px;margin-top:20px;}
.sv-caso .cifras div{border-top:2px solid #ECE31D;padding-top:10px;}
.sv-caso .cifras b{display:block;font-family:var(--hd);font-weight:900;font-size:clamp(28px,4vw,38px);line-height:1;color:#fff;}
.sv-caso .cifras span{display:block;font-family:var(--mn);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#D0D6DD;margin-top:6px;line-height:1.4;}
.sv-caso .equipo{font-family:var(--mn);font-size:11px;letter-spacing:.06em;color:#97A6B4;margin-top:16px;}

/* informe de ejemplo: la severidad siempre va con su palabra, nunca solo color */
.sv-sev{display:inline-block;font-family:var(--mn);font-size:11px;font-weight:700;letter-spacing:.02em;
  padding:2px 7px;border:1.5px solid #000;border-radius:3px;white-space:nowrap;}
.sv-sev.s5{background:#000;color:#ECE31D;}
.sv-sev.s4{background:#000;color:#fff;}
.sv-sev.s3{background:#ECE31D;color:#000;}
.sv-sev.s2{background:#fff;color:#000;}
.sv-nota{font-family:var(--mn);font-size:11px;letter-spacing:.04em;line-height:1.5;color:var(--ink-2);margin:10px 0 0;}

/* El <caption> de .gu-tabla es display:block en guias.css (lo exige el móvil, donde
   la tabla pasa a bloques). En escritorio, dentro de una tabla con <thead>, ese
   bloque quedaba DEBAJO de la fila de cabecera y además ensanchaba la primera
   columna hasta el largo del rótulo. Desde 640 px vuelve a ser caption de verdad. */
@media (min-width:640px){ .gu-tabla caption{display:table-caption;} }