/* ==========================================================================
   Seguridad Capital de Colombia LTDA. — hoja principal
   Implementación del mockup aprobado. Ver DESIGN.md.

   Índice
   01 Reset y base          08 Bitácora del servicio 15 Formularios
   02 Utilidades            09 Cobertura / mapa      16 Políticas del SIG
   03 Header y navegación   10 Respaldo y sellos     17 Pie de página
   04 Botones               11 Clientes              18 WhatsApp flotante
   05 Hero y radar          12 Servicio en detalle   19 Animaciones
   06 Marquesina            13 Bloque destacado      20 Impresión
   07 Rejilla de pelo       14 Banda de cierre
   ========================================================================== */

/* ---------- 01 Reset y base ---------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 8px);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--tx-2);
  font: 400 var(--fs-body)/1.66 var(--ff-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  color: var(--tx);
  margin: 0;
  letter-spacing: -.03em;
  text-wrap: balance;
}
h1 { font-weight: 700; letter-spacing: -.035em; }
h2, h3 { font-weight: 600; }

p { margin: 0; }

a { color: var(--gold); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: #EFC169; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

::selection { background: var(--gold); color: var(--ink); }

/* Texto solo para lectores de pantalla */
.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;
}

/* Salto al contenido */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--gold);
  color: var(--ink);
  padding: 14px 22px;
  font: 600 .875rem var(--ff-display);
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- 02 Utilidades ----------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
}

.sec {
  padding: var(--sec-y) var(--pad-x);
  background: var(--ink);
}
.sec--alt   { background: var(--ink-2); }
.sec--hair  { border-top: 1px solid var(--line); }
.sec--gold  { border-top: 1px solid var(--line-gold); }
.sec--flush { padding-top: 0; }

.eyebrow {
  display: block;
  font: 500 var(--fs-eyebrow)/1 var(--ff-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(.75rem, 1.4vw, 1.125rem);
}
.eyebrow--dim { color: var(--tx-4); }

.lead {
  font: 300 var(--fs-lead)/1.66 var(--ff-text);
  color: var(--tx-2);
  max-width: 40ch;
}
.body-txt {
  font: 300 var(--fs-body)/1.68 var(--ff-text);
  color: var(--tx-2);
  max-width: 62ch;
}
.small-txt {
  font: 300 var(--fs-sm)/1.6 var(--ff-text);
  color: var(--tx-3);
}
.mono {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: .04em;
}

/* Saltos de línea del mockup: solo escritorio */
.br-desk { display: none; }
@media (min-width: 900px) { .br-desk { display: inline; } }

/* Encabezado de sección con enlace a la derecha */
.sec-hd {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm) var(--gap);
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: clamp(1.375rem, 2.6vw, 2.375rem);
}
.sec-hd h2 { font-size: var(--fs-h2); line-height: 1.06; }

.link-more {
  font: 500 var(--fs-mono) var(--ff-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--line-gold-2);
  padding-bottom: 5px;
  white-space: nowrap;
}

/* Dos columnas que colapsan */
.duo {
  display: grid;
  gap: var(--gap);
  align-items: start;
}
@media (min-width: 960px) {
  .duo            { grid-template-columns: 1fr 1fr; }
  .duo--center    { align-items: center; }
  .duo--wide-left { grid-template-columns: 1.1fr .9fr; }
  .duo--wide-right{ grid-template-columns: .9fr 1.1fr; }
  .duo--img-left  { grid-template-columns: .85fr 1.15fr; }
}

/* Migas de pan */
.crumbs {
  font: 500 var(--fs-eyebrow) var(--ff-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tx-4);
  margin-bottom: clamp(.875rem, 1.8vw, 1.375rem);
}
.crumbs a { color: var(--tx-4); }
.crumbs a:hover { color: var(--tx-2); }
.crumbs span[aria-current] { color: var(--gold); }

/* Marca «por confirmar» */
.tbd {
  display: inline-block;
  font: 400 .625rem var(--ff-mono);
  letter-spacing: .06em;
  color: var(--gold);
  border: 1px solid var(--line-gold-2);
  background: rgba(217, 166, 72, .10);
  padding: 3px 7px;
}

/* Punto de estado */
.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}
.dot--gold { background: var(--gold); border-radius: 0; width: 6px; height: 6px; }

/* ---------- 03 Header y navegación -------------------------------------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  border-bottom: 1px solid var(--line-gold);
}
.hdr__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  padding-inline: var(--pad-x);
  min-height: var(--hdr-h);
}
.hdr__brand { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.hdr__logo { height: clamp(32px, 3.4vw, 48px); width: auto; }

.hdr__status {
  display: none;
  align-items: center;
  gap: 9px;
  font: 500 var(--fs-mono) var(--ff-mono);
  letter-spacing: .14em;
  color: var(--gold);
  border-left: 1px solid rgba(255, 255, 255, .14);
  padding-left: 26px;
  white-space: nowrap;
}
@media (min-width: 1400px) { .hdr__status { display: flex; } }

.nav { display: flex; align-items: center; gap: clamp(1rem, 1.7vw, 1.5rem); }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(.875rem, 1.5vw, 1.5rem);
}
.nav__link {
  display: block;
  font: 500 var(--fs-mono) var(--ff-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx-2);
  padding: 26px 0;
  border-bottom: 1px solid transparent;
}
.nav__link:hover { color: var(--tx); }
.nav__link[aria-current='page'] {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* Hamburguesa */
.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 10px;
  margin-right: -10px;
}
.burger span {
  display: block;
  height: 2px;
  background: var(--tx);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.burger span:first-child { background: var(--gold); }
.burger span:last-child  { width: 62%; margin-left: auto; }
.burger[aria-expanded='true'] span:first-child { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:last-child {
  width: 100%; transform: translateY(-7px) rotate(-45deg);
}

/* Escritorio: nav visible, sin hamburguesa */
@media (min-width: 1000px) {
  .burger { display: none; }
}

/* Móvil / tablet: cajón lateral */
@media (max-width: 999px) {
  .nav {
    position: fixed;
    inset: var(--hdr-h) 0 0 auto;
    width: min(88vw, 340px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink-2);
    border-left: 1px solid var(--line-gold);
    padding: 22px var(--pad-x) 40px;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 240ms var(--ease), visibility 240ms;
  }
  .nav[data-open='true'] { transform: none; visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    padding: 16px 0;
    font-size: .8125rem;
    border-bottom: 1px solid var(--line);
  }
  .nav__link[aria-current='page'] { border-bottom-color: var(--gold); }
  .nav .btn { margin-top: 22px; }
  .nav__status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    font: 500 .625rem var(--ff-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ok);
  }
}
@media (min-width: 1000px) { .nav__status { display: none; } }

.scrim {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(10, 9, 8, .72);
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms var(--ease), visibility 240ms;
}
.scrim[data-open='true'] { opacity: 1; visibility: visible; }
body[data-nav-open='true'] { overflow: hidden; }

/* ---------- 04 Botones --------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 600 clamp(.875rem, .84rem + .16vw, .9375rem) var(--ff-display);
  letter-spacing: .04em;
  text-align: center;
  padding: 17px clamp(1.25rem, 2.2vw, 2rem);
  min-height: 48px;
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn--gold { background: var(--gold); color: var(--on-gold); }
.btn--gold:hover { background: #EFC169; color: var(--on-gold); }

.btn--ghost { border-color: var(--line-3); color: var(--tx); }
.btn--ghost:hover { border-color: var(--tx); color: var(--tx); background: var(--wash-2); }

.btn--dark { background: var(--ink); color: var(--tx); }
.btn--dark:hover { background: var(--ink-3); color: var(--tx); }

.btn--on-gold { border-color: rgba(10, 9, 8, .4); color: var(--on-gold); }
.btn--on-gold:hover { background: rgba(10, 9, 8, .08); color: var(--on-gold); }

.btn--outline-gold { border-color: var(--gold); color: var(--gold); padding: 12px 22px; min-height: 44px; }
.btn--outline-gold:hover { background: var(--wash-gold-2); color: var(--gold); }

.btn--wa { border-color: rgba(62, 214, 127, .5); color: var(--ok); }
.btn--wa:hover { border-color: var(--ok); background: rgba(62, 214, 127, .08); color: var(--ok); }

.btn--block { display: flex; width: 100%; }

.btns { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
@media (max-width: 640px) {
  .btns { flex-direction: column; align-items: stretch; gap: 10px; }
  .btns .btn { width: 100%; }
}

/* ---------- 05 Hero y radar --------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  padding: clamp(2.125rem, 5vw, 5.125rem) var(--pad-x) 0;
}
.hero__in { position: relative; max-width: 760px; }
.hero h1 {
  font-size: var(--fs-hero);
  line-height: .98;
  margin-bottom: clamp(1rem, 2vw, 1.625rem);
}
.hero h1 em { color: var(--gold); font-style: normal; }
.hero .lead { margin-bottom: clamp(1.5rem, 2.8vw, 2.25rem); max-width: 560px; }
.hero .btns { margin-bottom: clamp(1.75rem, 4vw, 3.25rem); }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-gold-2);
  padding: 8px 14px;
  font: 500 var(--fs-eyebrow) var(--ff-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(1.375rem, 2.6vw, 2rem);
}

/* Radar decorativo.
   Un solo cuadrado con todos los elementos en `inset`: así los anillos, el
   barrido y el núcleo comparten exactamente el mismo centro, y el barrido gira
   sobre ese centro (transform-origin 50% 50% por defecto). */
.radar {
  position: absolute;
  top: 50%;
  right: 0;
  width: clamp(340px, 52vw, 720px);
  aspect-ratio: 1;
  transform: translate(32%, -50%);
  pointer-events: none;
}
.radar > * {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.radar__sweep {
  background: conic-gradient(from 0deg,
    rgba(217, 166, 72, .34),
    rgba(217, 166, 72, .16) 14%,
    rgba(217, 166, 72, 0) 40%);
  animation: cap-sweep 7s linear infinite;
}
.radar__ring { border: 1px solid rgba(217, 166, 72, .18); }
.radar__ring--2 { inset: 19%; border-color: rgba(217, 166, 72, .15); }
.radar__ring--3 { inset: 38%; border-color: rgba(217, 166, 72, .13); }
.radar__core {
  inset: 46.5%;
  border: 1px solid rgba(217, 166, 72, .55);
  animation: cap-pulse 3.2s ease-out infinite;
}
/* En la cabecera de página interna el radar es más discreto y más lento. */
.hero--page .radar { width: clamp(300px, 40vw, 520px); transform: translate(38%, -55%); }
.hero--page .radar__sweep { animation-duration: 9s; opacity: .7; }

/* Hero interno con foto de fondo */
.hero--photo {
  display: flex;
  align-items: flex-end;
  min-height: clamp(330px, 34vw, 420px);
  padding: 0;
}
.hero--photo > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
  filter: grayscale(1) contrast(1.1) brightness(.45);
}
.hero--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 9, 8, .5), rgba(10, 9, 8, .95));
}
.hero--photo .hero__in {
  z-index: 1;
  padding: 0 var(--pad-x) clamp(1.625rem, 3.6vw, 3.5rem);
  max-width: 820px;
}

/* Hero de página interna, sencillo */
.hero--page {
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
  padding: clamp(1.75rem, 4.4vw, 4rem) var(--pad-x) clamp(1.75rem, 4vw, 3.5rem);
}
.hero--page h1 { font-size: var(--fs-h1); line-height: 1.02; margin-bottom: clamp(.875rem, 1.6vw, 1.25rem); }
.hero--page .lead { max-width: 66ch; }

/* ---------- 06 Marquesina ----------------------------------------------- */

.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: cap-march 34s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__item {
  font: 500 var(--fs-mono) var(--ff-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tx-4);
  padding: 14px clamp(1rem, 1.6vw, 1.375rem);
  border-right: 1px solid rgba(255, 255, 255, .08);
  white-space: nowrap;
}

/* ---------- 07 Rejilla de pelo ------------------------------------------ */

/* El contenedor lleva el color de la celda y cada celda dibuja su propia línea
   con box-shadow, que rellena exactamente el hueco de 1px del gap. Se ve igual
   que pintar el fondo del contenedor con el color de línea, pero cuando la
   última fila queda incompleta —5 servicios en 3 columnas, 5 tipos de PQRSF en
   3— el hueco sobrante no se ve como un bloque gris. */
.grid-hair {
  display: grid;
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--line);
  grid-template-columns: 1fr;
}
.grid-hair > * { background: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.sec--alt .grid-hair,
.grid-hair--alt { background: var(--ink-2); }
.sec--alt .grid-hair > *,
.grid-hair--alt > * { background: var(--ink-2); }

@media (min-width: 560px) {
  .grid-hair--2, .grid-hair--3, .grid-hair--4, .grid-hair--5 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .grid-hair--3 { grid-template-columns: repeat(3, 1fr); }
  .grid-hair--4 { grid-template-columns: repeat(4, 1fr); }
  .grid-hair--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1160px) {
  .grid-hair--5 { grid-template-columns: repeat(5, 1fr); }
}

/* Celda de servicio.
   `display:block` es obligatorio: la celda es un <a>, y en línea el relleno
   desborda la fila y el fondo del hover se pinta fuera de la celda. */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.375rem, 2.2vw, 2rem) clamp(1.125rem, 1.8vw, 1.75rem);
  transition: background var(--dur) var(--ease);
}
.card:hover { background: var(--ink-3) !important; }
.card:hover .card__arrow { background: var(--gold); color: var(--ink); border-color: var(--gold); }
/* La letra o la sigla que encabeza una tarjeta no debe absorber espacio
   libre. «.card p» lleva «margin-top:auto» para pegar la descripción al
   fondo; con dos <p> en la misma columna flex el reparto del hueco depende
   del texto, y los títulos de una misma fila quedaban a distinta altura. */
.card__key {
  margin-top: 0;
  margin-bottom: .75rem;
  color: var(--gold);
  line-height: 1;
}
.card p.card__key { margin-top: 0; color: var(--gold); }
.card__key--letra { font: 700 clamp(1.875rem, 1.4rem + 1.7vw, 2.625rem) var(--ff-display); }
.card__key--sigla { font: 700 clamp(1.125rem, 1rem + .5vw, 1.375rem) var(--ff-mono); }

.card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(.75rem, 1.4vw, 1.25rem);
}
.card__num { font: 500 var(--fs-mono) var(--ff-mono); color: var(--gold); }
.card__arrow {
  width: 26px; height: 26px;
  border: 1px solid var(--line-gold-2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: 12px;
  flex: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card h3 { font-size: var(--fs-h3); line-height: 1.24; margin-bottom: .5rem; }
.card p { font: 300 var(--fs-sm)/1.62 var(--ff-text); color: var(--tx-2); margin-top: auto; }

/* Celda de sector — el hover invierte a oro */
.sector { padding: clamp(1.125rem, 1.9vw, 1.75rem) clamp(1rem, 1.6vw, 1.5rem); transition: background var(--dur) var(--ease); }
.sector__name {
  font: 600 clamp(.9375rem, .86rem + .3vw, 1.1875rem)/1.2 var(--ff-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .5rem;
  transition: color var(--dur) var(--ease);
}
.sector p { font: 300 var(--fs-xs)/1.58 var(--ff-text); color: var(--tx-3); transition: color var(--dur) var(--ease); }
.sector:hover { background: var(--gold) !important; }
.sector:hover .sector__name { color: var(--ink); }
.sector:hover p { color: var(--on-gold-2); }

/* Celda de valor / bienestar */
.tile { padding: clamp(1.125rem, 1.9vw, 1.875rem) clamp(1rem, 1.6vw, 1.75rem); }
.tile h3 { font-size: var(--fs-h3); line-height: 1.2; margin-bottom: .375rem; }
.tile p { font: 300 var(--fs-xs)/1.56 var(--ff-text); color: var(--tx-3); }

/* Celda con clave mono + valor (tecnología, PQRSF) */
.kv {
  padding: clamp(.9375rem, 1.5vw, 1.25rem) clamp(1rem, 1.5vw, 1.5rem);
  display: flex;
  gap: 18px;
  align-items: baseline;
}
.kv__k { font: 500 var(--fs-mono) var(--ff-mono); color: var(--gold); min-width: 26px; flex: none; }
.kv__v { font: 400 var(--fs-sm)/1.5 var(--ff-text); color: var(--tx-1); }

/* Lista numerada de proceso */
.steps { border-top: 1px solid var(--line); }
.steps li {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  align-items: baseline;
}
@media (min-width: 900px) { .steps li { grid-template-columns: 44px 1fr; gap: 14px; padding: 13px 0; } }
.steps__n { font: 500 var(--fs-mono) var(--ff-mono); color: var(--gold); }
.steps__t { font: 400 var(--fs-sm)/1.45 var(--ff-text); color: var(--tx-1); }

/* Pasos con título + descripción */
.steps--rich li {
  grid-template-columns: 38px 1fr;
  align-items: start;
  padding: 16px 0;
  border-bottom: 0;
  border-top: 1px solid var(--line);
}
.steps--rich { border-top: 0; }
@media (min-width: 900px) { .steps--rich li { grid-template-columns: 52px 1fr; gap: 18px; padding: 20px 0; } }
.steps--rich .steps__n { padding-top: 3px; }
.steps--rich h3 { font-size: clamp(1rem, .95rem + .2vw, 1.125rem); margin-bottom: .25rem; }
.steps--rich p { font: 300 var(--fs-xs)/1.55 var(--ff-text); color: var(--tx-3); }

/* Viñetas de servicio */
.bullets { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 720px) { .bullets { grid-template-columns: 1fr 1fr; } }
.bullets li {
  background: var(--ink);
  padding: 13px 16px;
  display: flex;
  gap: 11px;
  align-items: baseline;
  font: 400 var(--fs-sm)/1.5 var(--ff-text);
  color: var(--tx-1);
}
@media (min-width: 900px) { .bullets li { padding: 16px 20px; } }
.bullets li::before { content: '▪'; color: var(--gold); font-size: 12px; flex: none; }

/* Lista de departamentos.
   26 elementos no dividen exacto entre 3 ni 4 columnas, así que la última fila
   queda incompleta. En la rejilla de pelo normal ese hueco deja ver el fondo
   del contenedor como un bloque gris. Aquí el contenedor lleva el color de la
   celda y cada celda dibuja su propia línea con box-shadow: los huecos quedan
   invisibles y las separaciones se ven igual. Mismo caso en .clients. */
.deps { display: grid; gap: 1px; background: var(--ink-2); border: 1px solid var(--line); grid-template-columns: 1fr 1fr; }
@media (min-width: 700px)  { .deps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .deps { grid-template-columns: repeat(4, 1fr); } }
.deps li {
  background: var(--ink-2);
  box-shadow: 0 0 0 1px var(--line);
  font: 400 var(--fs-mono) var(--ff-mono);
  color: var(--tx-2);
  padding: 10px 11px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
@media (min-width: 900px) { .deps li { padding: 11px 12px; } }
.deps li:hover { background: var(--gold); color: var(--ink); }

/* ---------- 08 Bitácora del servicio ------------------------------------ */

.log { border: 1px solid var(--line-gold); background: var(--ink); }
.log__hd {
  padding: 14px clamp(1rem, 1.6vw, 1.625rem);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
  align-items: center;
  font: 500 var(--fs-mono) var(--ff-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tx-2);
}
@media (min-width: 900px) { .log__hd { padding: 20px 26px; } }
.log__clock { color: var(--gold); letter-spacing: .06em; font-variant-numeric: tabular-nums; }

.log__row {
  padding: 14px clamp(1rem, 1.6vw, 1.625rem);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  display: grid;
  gap: 5px 18px;
  grid-template-areas: 'time state' 'text text';
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 900px) {
  .log__row {
    grid-template-areas: 'time text state';
    grid-template-columns: 60px 1fr auto;
    padding: 20px 26px;
    justify-content: stretch;
  }
}
.log__time { grid-area: time; font: 500 var(--fs-sm) var(--ff-mono); color: var(--gold); font-variant-numeric: tabular-nums; }
.log__text { grid-area: text; font: 400 var(--fs-sm)/1.4 var(--ff-text); color: var(--tx-1); }
.log__state {
  grid-area: state;
  font: 500 .5625rem var(--ff-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ok);
  border: 1px solid rgba(62, 214, 127, .4);
  padding: 4px 9px;
  white-space: nowrap;
}
@media (min-width: 900px) { .log__state { font-size: .65625rem; } }

.log__shots {
  display: grid;
  /* auto-fit y no «repeat(3,1fr)»: la tira lleva las evidencias que de verdad
     existan, sin dejar un hueco cuando no son exactamente tres. */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
  padding: 14px clamp(1rem, 1.6vw, 1.625rem);
}
@media (min-width: 900px) { .log__shots { gap: 10px; padding: 22px 26px; } }
.log__shots img {
  width: 100%;
  height: clamp(64px, 9vw, 104px);
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .14);
}
.log__cap { font: 400 .625rem var(--ff-mono); color: var(--tx-4); margin-top: 7px; }
@media (max-width: 899px) { .log__cap { display: none; } }

/* ---------- 09 Cobertura / mapa ----------------------------------------- */

/* Mapa vectorial de los 32 departamentos, generado desde datos oficiales
   (ver README §Mapa). Cada trazo lleva data-dep y data-estado, y se ilumina al
   pasar el cursor tanto sobre el mapa como sobre la lista de departamentos.
   Los trazos no reciben foco de teclado: el equivalente accesible es la lista
   que acompaña al mapa, y el SVG lo declara así en su <desc>. */
.co-map {
  position: relative;
  width: min(100%, 420px);
  margin-inline: auto;
}
.co-map__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.co-map__deps path {
  fill: #171614;
  stroke: var(--ink);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
  transition: fill var(--dur) var(--ease);
}
.co-map__deps path[data-estado='cubierto'] { fill: rgba(217, 166, 72, .30); }
.co-map__deps path[data-estado='sede']     { fill: rgba(217, 166, 72, .62); }
.co-map__deps path[data-estado='cubierto']:hover,
.co-map__deps path[data-estado='sede']:hover,
.co-map__deps path[data-activo]            { fill: var(--gold); }
.co-map__deps path[data-estado='sin']:hover { fill: #221F1C; }

.co-map__pin  { fill: var(--gold); }
.co-map__ping {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: cap-pulse 2.8s ease-out infinite;
}

/* Lectura del estado: por defecto el resumen, al señalar el departamento. */
.co-map__readout {
  margin-top: clamp(.875rem, 1.6vw, 1.25rem);
  min-height: 3.25em;
  border-top: 1px solid var(--line);
  padding-top: .875rem;
  font: 500 var(--fs-mono) var(--ff-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tx-4);
}
.co-map__readout b {
  display: block;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 4px;
  letter-spacing: .1em;
}

/* Enlace en los dos sentidos con la lista de departamentos. */
.deps li[data-activo] { background: var(--gold); color: var(--ink); }


/* ---------- 10 Respaldo y sellos ---------------------------------------- */

.seals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: clamp(.625rem, 1.2vw, .875rem);
  margin-bottom: clamp(1.25rem, 2.2vw, 1.625rem);
}
/* Los sellos originales vienen con fondo blanco opaco, no transparente: sobre
   negro y con brightness alto se convertían en un rectángulo blanco ilegible.
   Se montan sobre una placa clara, en escala de grises, y recuperan su color
   al pasar el cursor. */
.seal {
  border: 1px solid var(--line);
  background: #fff;
  padding: clamp(.75rem, 1.2vw, 1rem);
  display: grid;
  place-items: center;
  min-height: 76px;
  /* La opacidad va en la placa completa, no en la imagen: así el blanco del
     logo y el de la placa se atenúan igual y no se ve el recorte del PNG. */
  opacity: .86;
  transition: opacity var(--dur) var(--ease);
}
.seal img {
  height: clamp(30px, 3.4vw, 50px);
  width: auto;
  filter: grayscale(1);
  transition: filter var(--dur) var(--ease);
}
.seal:hover { opacity: 1; }
.seal:hover img { filter: none; }
.seal--txt {
  font: 600 .625rem var(--ff-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  text-align: center;
  line-height: 1.5;
}

.rows > li { padding: 14px 0; border-top: 1px solid var(--line); }
.rows h3 { font: 600 clamp(.90625rem, .87rem + .16vw, .96875rem) var(--ff-display); letter-spacing: 0; margin-bottom: .25rem; }
.rows p { font: 300 var(--fs-xs)/1.5 var(--ff-text); color: var(--tx-3); }

/* Pólizas */
.policies > li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: center;
  background: var(--ink-2);
  padding: 14px 16px;
}
@media (min-width: 900px) { .policies > li { grid-template-columns: 52px 1fr; gap: 18px; padding: 18px 22px; } }
.policies__amt {
  font: 600 clamp(.75rem, .7rem + .2vw, .875rem) var(--ff-mono);
  color: var(--gold);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.policies__txt { font: 400 var(--fs-sm)/1.5 var(--ff-text); color: var(--tx-1); }

/* ---------- 11 Clientes -------------------------------------------------- */

/* Logotipos de clientes: mismo tratamiento que los sellos, porque llegan igual
   de la empresa, en JPG con fondo blanco opaco. Las placas son más anchas que
   las de los sellos porque conviven marcas cuadradas (Galotrans, Alfa) con
   otras muy apaisadas (MTS): a una altura fija las cuadradas quedaban
   diminutas, así que se limita el alto y se deja que el ancho mande. */
.seals--cli { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.seals--cli .seal { min-height: 92px; }
.seals--cli .seal img {
  height: auto;
  max-height: clamp(52px, 5.2vw, 74px);
  max-width: 100%;
}

/* Testimonios */
.quote {
  border: 1px solid var(--line);
  background: var(--ink-2);
  padding: clamp(1.125rem, 1.9vw, 1.625rem);
  margin-bottom: 12px;
}
.quote p { font: 300 clamp(.9375rem, .89rem + .2vw, 1rem)/1.62 var(--ff-text); color: var(--tx-1); margin-bottom: .875rem; }
.quote cite {
  font: 500 .6875rem var(--ff-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  font-style: normal;
}

/* ---------- 12 Servicio en detalle -------------------------------------- */

.svc {
  display: grid;
  gap: 0;
  border-bottom: 1px solid var(--line);
}
.svc > img {
  width: 100%;
  height: clamp(180px, 22vw, 300px);
  object-fit: cover;
  filter: grayscale(.35) contrast(1.05);
}
.svc__body { padding: clamp(1.5rem, 2.6vw, 3.5rem) var(--pad-x) clamp(1.625rem, 3vw, 3.5rem); }
@media (min-width: 960px) {
  .svc {
    grid-template-columns: .85fr 1.15fr;
    gap: clamp(2rem, 3.6vw, 3.25rem);
    padding: clamp(2rem, 3.6vw, 3.5rem) var(--pad-x);
    align-items: start;
  }
  .svc > img { border: 1px solid rgba(255, 255, 255, .14); }
  .svc__body { padding: 0; }
}
.svc__hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: clamp(.75rem, 1.4vw, 1rem); }
.svc__num { font: 500 clamp(.71875rem, .69rem + .12vw, .8125rem) var(--ff-mono); color: var(--gold); }
.svc h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); line-height: 1.1; }
.svc__body > p { margin-bottom: clamp(1.125rem, 2vw, 1.625rem); }
.svc .bullets { margin-bottom: clamp(1.125rem, 1.8vw, 1.5rem); }

/* ---------- 13 Bloque destacado ----------------------------------------- */

.note {
  border: 1px solid var(--line-gold-2);
  background: var(--wash-gold);
  padding: clamp(1.125rem, 1.9vw, 1.625rem);
}
.note h3 { font-size: clamp(1rem, .94rem + .25vw, 1.3125rem); margin-bottom: .5rem; letter-spacing: 0; }
.note p { font: 300 var(--fs-sm)/1.6 var(--ff-text); color: var(--tx-2); margin-bottom: .875rem; }
.note__val { font: 500 var(--fs-sm) var(--ff-mono); color: var(--gold); word-break: break-word; }

/* Lista con guion. Existe para los textos que el cliente entrega literales y
   pide publicar tal cual: el guion es parte de su redacción, no una viñeta
   que podamos cambiar por otra. */
.lista-guion { margin: 0 0 .875rem; }
.lista-guion li {
  position: relative;
  padding-left: 1.15em;
  font: 300 var(--fs-sm)/1.6 var(--ff-text);
  color: var(--tx-2);
  margin-bottom: .3125rem;
}
.lista-guion li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--gold);
}
.lista-guion--punto li::before { content: '•'; }
.lista-guion a { color: var(--gold); }

.panel {
  border: 1px solid rgba(255, 255, 255, .14);
  background: var(--ink-2);
  padding: clamp(1.25rem, 2.2vw, 2.25rem);
}
.sec--alt .panel { background: var(--ink); }
.panel h2 { font-size: clamp(1.5rem, 1.32rem + .7vw, 1.75rem); line-height: 1.15; margin-bottom: .375rem; }
.panel > p { font: 300 var(--fs-sm)/1.55 var(--ff-text); color: var(--tx-3); margin-bottom: clamp(1.25rem, 2vw, 1.625rem); }

.aside-note { border-left: 2px solid var(--gold); padding-left: 16px; font: 300 var(--fs-sm)/1.6 var(--ff-text); color: var(--tx-2); }

/* Canales de contacto */
.channel { padding: clamp(1.125rem, 1.9vw, 1.75rem) clamp(1rem, 1.6vw, 1.625rem); }
.channel__t { font: 500 var(--fs-eyebrow) var(--ff-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: .625rem; }
.channel__v { font: 600 clamp(1.125rem, 1.04rem + .35vw, 1.25rem) var(--ff-display); color: var(--tx); margin-bottom: .25rem; display: block; letter-spacing: -.01em; }
.channel__v:hover { color: var(--gold); }
.channel p { font: 300 var(--fs-xs)/1.5 var(--ff-text); color: var(--tx-3); }

/* Enlaces de trámite */
.errands li + li { margin-top: 12px; }
.errands a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font: 400 var(--fs-sm) var(--ff-text);
  color: var(--tx-1);
}
.errands li:last-child a { border-bottom: 0; padding-bottom: 0; }
.errands a:hover { color: var(--gold); }
.errands a::after { content: '→'; color: var(--gold); }

/* Sede */
.branch { border: 1px solid rgba(255, 255, 255, .14); background: var(--ink-2); }
.sec--alt .branch { background: var(--ink); }
.branch__map { position: relative; display: grid; place-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.branch__body { padding: clamp(1.125rem, 1.6vw, 1.625rem); }
.branch h3 { font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); letter-spacing: 0; margin-bottom: .375rem; }
.branch__data { font: 400 var(--fs-xs)/1.75 var(--ff-mono); color: var(--tx-3); }

/* Portal del bienestar */
.portal {
  border: 1px solid var(--line-gold-2);
  background: var(--wash-gold);
  padding: clamp(1.125rem, 1.8vw, 1.5rem);
  display: grid;
  gap: 14px;
  align-items: center;
}
@media (min-width: 720px) { .portal { grid-template-columns: auto 1fr auto; gap: 20px; } }
.portal img { height: 70px; width: auto; border: 1px solid rgba(255, 255, 255, .14); }
@media (max-width: 719px) { .portal img { display: none; } }
.portal h3 { font-size: 1rem; letter-spacing: 0; margin-bottom: .3125rem; }
.portal p { font: 300 var(--fs-xs)/1.5 var(--ff-text); color: var(--tx-2); }

/* ---------- 14 Banda de cierre ------------------------------------------ */

.band {
  background: var(--gold);
  padding: clamp(2rem, 4vw, 4rem) var(--pad-x);
}
.band__in {
  max-width: var(--wrap);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 3rem);
  justify-content: space-between;
  align-items: center;
}
.band h2 {
  color: var(--on-gold);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  line-height: 1.04;
  margin-bottom: .625rem;
}
.band p { font: 400 var(--fs-body)/1.55 var(--ff-text); color: var(--on-gold-2); }
.band .btns { flex: none; }
@media (max-width: 860px) {
  .band__in { display: block; }
  .band .btns { margin-top: 1.25rem; }
}

/* ---------- 15 Formularios ---------------------------------------------- */

.form__grid { display: grid; gap: 12px; margin-bottom: 14px; }
@media (min-width: 620px) { .form__grid { grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } }
.form__grid--full { grid-template-columns: 1fr; }

.field { display: block; margin-bottom: 14px; }
.field:last-of-type { margin-bottom: 0; }
.form__grid .field { margin-bottom: 0; }

.field__label {
  display: block;
  font: 500 clamp(.625rem, .61rem + .07vw, .65625rem) var(--ff-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.field__req { color: var(--gold); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--line-2);
  border-radius: 0;
  background: var(--wash);
  color: var(--tx);
  font: 400 var(--fs-sm) var(--ff-text);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  appearance: none;
}
.field textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.field input::placeholder,
.field textarea::placeholder { color: var(--tx-4); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold);
  background: rgba(255, 255, 255, .05);
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 13px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
  color: var(--tx);
}
.field select:invalid { color: var(--tx-4); }
.field select option { background: var(--ink-2); color: var(--tx); }

.field__help { display: block; font: 300 .75rem/1.5 var(--ff-text); color: var(--tx-4); margin-top: 6px; }
.field__error {
  display: none;
  font: 500 .6875rem var(--ff-mono);
  letter-spacing: .04em;
  color: var(--alert);
  margin-top: 6px;
}
.field[data-invalid] input,
.field[data-invalid] select,
.field[data-invalid] textarea { border-color: var(--alert); }
.field[data-invalid] .field__error,
.check[data-invalid] .field__error { display: block; }

/* Chips (radio ocultos) */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.chips input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.chips label {
  display: block;
  border: 1px solid var(--line-2);
  color: var(--tx-2);
  font: 500 clamp(.78125rem, .76rem + .1vw, .8125rem) var(--ff-display);
  padding: 10px 16px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chips label:hover { border-color: var(--line-3); color: var(--tx); }
.chips input:checked + label {
  border-color: var(--gold);
  background: var(--wash-gold-2);
  color: var(--gold);
}
.chips input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Zona de archivo */
.drop {
  display: block;
  border: 1px dashed var(--line-3);
  background: rgba(255, 255, 255, .02);
  padding: clamp(1.125rem, 2vw, 1.625rem);
  text-align: center;
  cursor: pointer;
  margin-bottom: 16px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.drop:hover, .drop[data-over] { border-color: var(--gold); background: var(--wash-gold); }
.drop__t { font: 600 clamp(.90625rem, .87rem + .16vw, .9375rem) var(--ff-display); color: var(--tx); margin-bottom: .25rem; }
.drop__h { font: 300 var(--fs-xs) var(--ff-text); color: var(--tx-4); }
.drop input[type='file'] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop[data-filled] { border-style: solid; border-color: var(--gold); }
.drop[data-filled] .drop__t { color: var(--gold); }

/* Casilla de verificación */
.check { display: flex; flex-wrap: wrap; gap: 11px; align-items: flex-start; margin-bottom: 14px; cursor: pointer; }
.check .field__error { flex-basis: 100%; margin-left: 29px; margin-top: 0; }
.check input {
  appearance: none;
  width: 18px; height: 18px;
  flex: none;
  margin: 2px 0 0;
  border: 1px solid var(--line-3);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.check input:hover { border-color: var(--gold); }
.check input:checked { border-color: var(--gold); background: var(--gold); }
.check input:checked::after {
  content: '';
  display: block;
  width: 10px; height: 5px;
  margin: 3px auto 0;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}
.check span { font: 300 var(--fs-xs)/1.55 var(--ff-text); color: var(--tx-3); }
.check[data-invalid] input { border-color: var(--alert); }

/* Estado de envío */
.form__status {
  display: none;
  border: 1px solid var(--line-gold-2);
  background: var(--wash-gold);
  padding: 14px 16px;
  margin-bottom: 16px;
  font: 400 var(--fs-sm)/1.55 var(--ff-text);
  color: var(--tx-1);
}
.form__status[data-state] { display: block; }
.form__status[data-state='ok'] { border-color: rgba(62, 214, 127, .5); background: rgba(62, 214, 127, .08); }
.form__status[data-state='error'] { border-color: rgba(229, 83, 75, .5); background: rgba(229, 83, 75, .08); }
.form__status strong { color: var(--tx); font-family: var(--ff-display); }
.form__status code { font: 500 var(--fs-sm) var(--ff-mono); color: var(--gold); }

button[data-busy] { opacity: .6; pointer-events: none; }

/* ---------- 16 Políticas del SIG ---------------------------------------- */

.docs { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 720px)  { .docs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .docs { grid-template-columns: repeat(3, 1fr); } }

.doc {
  background: var(--ink-2);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  padding: clamp(1.125rem, 1.8vw, 1.625rem);
  transition: background var(--dur) var(--ease);
}
.doc:hover { background: var(--ink-3); }
.doc__code {
  font: 500 .6875rem var(--ff-mono);
  letter-spacing: .1em;
  color: var(--gold);
}
.doc h3 { font-size: clamp(1rem, .95rem + .2vw, 1.125rem); line-height: 1.3; letter-spacing: 0; }
.doc__meta { font: 400 .6875rem var(--ff-mono); color: var(--tx-4); letter-spacing: .04em; }
.doc__dl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 .71875rem var(--ff-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--line-gold-2);
  padding-bottom: 4px;
  justify-self: start;
}

/* ---------- 17 Pie de página -------------------------------------------- */

.ftr {
  background: var(--ink);
  border-top: 1px solid var(--line);
  padding: clamp(2rem, 3.4vw, 3.25rem) var(--pad-x) 1.5rem;
}
.ftr__top {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  padding-bottom: clamp(1.5rem, 2.8vw, 2.25rem);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 700px)  { .ftr__top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .ftr__top { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }

.ftr__logo { height: clamp(42px, 4vw, 52px); width: auto; margin-bottom: 1.125rem; }
.ftr__data { font: 400 clamp(.71875rem, .70rem + .1vw, .75rem)/1.8 var(--ff-mono); color: var(--tx-3); }
.ftr__data a { color: var(--tx-3); }
.ftr__data a:hover { color: var(--gold); }

.ftr__ttl {
  font: 500 .6875rem var(--ff-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.ftr__links li { margin-bottom: 10px; }
.ftr__links a { font: 300 var(--fs-sm) var(--ff-text); color: var(--tx-2); }
.ftr__links a:hover { color: var(--gold); }
.ftr__links a[target]::after { content: ' ↗'; font-size: .8em; opacity: .7; }

.ftr__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.25rem;
  font: 400 clamp(.6875rem, .67rem + .07vw, .71875rem) var(--ff-mono);
  letter-spacing: .06em;
  color: var(--tx-4);
}
.ftr__legal a { color: var(--tx-4); }
.ftr__legal a:hover { color: var(--gold); }

/* ---------- 18 WhatsApp flotante ---------------------------------------- */

.wa-float {
  position: fixed;
  right: clamp(14px, 2vw, 26px);
  bottom: clamp(14px, 2vw, 26px);
  z-index: 90;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--wa);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
  display: grid;
  place-items: center;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.wa-float:hover { transform: scale(1.06); background: #2AE474; }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }

/* ---------- 19 Animaciones ---------------------------------------------- */

@keyframes cap-pulse { 0% { transform: scale(.6); opacity: .85 } 100% { transform: scale(2.6); opacity: 0 } }
@keyframes cap-march { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }
@keyframes cap-blink { 0%, 100% { opacity: 1 } 50% { opacity: .18 } }
@keyframes cap-sweep { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } }

.blink { animation: cap-blink 1.8s ease-in-out infinite; }
.blink--fast { animation-duration: 1.4s; }

.reveal { opacity: 0; transform: translateY(14px); }
.reveal[data-shown] {
  opacity: 1;
  transform: none;
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
html.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
  .radar__sweep { animation: none; opacity: .5; }
}

/* ---------- 20 Impresión ------------------------------------------------ */

@media print {
  .hdr, .nav, .scrim, .wa-float, .band, .marquee, .radar, .log__shots { display: none !important; }
  body { background: #fff; color: #111; }
  h1, h2, h3 { color: #000; }
  .sec, .sec--alt, .grid-hair > *, .panel, .log { background: #fff !important; border-color: #bbb; }
  a { color: #000; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: .8em; }
}