@charset "UTF-8";
/* ==========================================================================
   SUGOM SEGURIDAD LTDA — SISTEMA DE DISEÑO
   --------------------------------------------------------------------------
   Archivo:      assets/css/styles.css
   Proyecto:     Sitio web corporativo SUGOM Seguridad Ltda.
   Versión:      1.0
   Dependencias: ninguna. CSS3 puro, sin preprocesadores ni frameworks.
   --------------------------------------------------------------------------
   La paleta procede de la medición directa de los píxeles del logotipo:
   azul cobalto #003C80 de fondo, escudo ámbar #FEC900 y monograma marfil
   #F6F5EC. La jerarquía de acción replica esa misma relación: el ámbar es el
   protagonista sobre el azul, igual que el escudo sobre el fondo.

   ÍNDICE
   01. Custom Properties ....... tokens de color, tipografía, espacio y tiempo
   02. Reset ................... normalización moderna
   03. Base y tipografía ....... elementos nativos
   04. Layout .................. contenedores, retículas, secciones
   05. Componentes ............. piezas reutilizables
   06. Secciones de página ..... bloques específicos del sitio
   07. Utilidades .............. clases atómicas
   08. Responsive .............. ajustes por punto de ruptura
   09. Impresión ............... hoja para papel
   ========================================================================== */


/* ==========================================================================
   01. CUSTOM PROPERTIES
   ========================================================================== */

:root {
  /* ----- Rampa azul — medida del fondo del logotipo --------------------- */
  --azul-950: #00142E;   /* lienzo base                                     */
  --azul-900: #001C3F;   /* superficie de tarjeta                           */
  --azul-850: #002550;   /* superficie elevada / hover                      */
  --azul-800: #002E63;   /* borde estándar                                  */
  --azul-700: #00336E;   /* presente en las esquinas del logotipo           */
  --azul-600: #003C80;   /* AZUL DE MARCA — mediana del fondo del logotipo  */
  --azul-500: #004A9E;
  --azul-400: #1668C9;
  --azul-300: #4A93E8;   /* enlaces sobre fondo oscuro                      */
  --azul-200: #8CBCF4;

  /* ----- Rampa ámbar — medida del escudo -------------------------------- */
  --ambar-700: #9A7A00;
  --ambar-600: #C99E00;
  --ambar-500: #F8BF00;  /* base del degradado del escudo                   */
  --ambar-400: #FEC900;  /* ÁMBAR DE MARCA — mediana del escudo             */
  --ambar-300: #FDD200;  /* tope del degradado del escudo                   */
  --ambar-200: #FFE066;

  /* ----- Neutros cálidos — del monograma marfil ------------------------- */
  --marfil:     #F6F5EC; /* el blanco del logotipo no es puro               */
  --neutro-100: #E9EDF3;
  --neutro-200: #D4DBE5;
  --neutro-400: #9DB0C9;
  --neutro-600: #6E85A3;
  --neutro-800: #3D5573;

  /* ----- Estados -------------------------------------------------------- */
  --exito:  #34D399;
  --alerta: #FBBF24;
  --error:  #FF6B7A;

  /* ----- Tokens semánticos · TEMA OSCURO (por defecto) ------------------ */
  --fondo:            var(--azul-950);
  --fondo-alterno:    #000F24;
  --superficie:       var(--azul-900);
  --superficie-alta:  var(--azul-850);
  --superficie-suave: rgba(140, 188, 244, .05);

  --borde:        var(--azul-800);
  --borde-sutil:  #00223F;
  --borde-fuerte: #003C6E;

  --texto:         var(--marfil);
  --texto-suave:   var(--neutro-400);
  --texto-tenue:   var(--neutro-600);
  --texto-inverso: var(--azul-950);

  --marca:       var(--azul-600);
  --marca-clara: var(--azul-300);
  --acento:      var(--ambar-400);
  --acento-alto: var(--ambar-300);
  --acento-bajo: var(--ambar-500);
  --acento-texto: var(--ambar-400);

  --enlace:       var(--azul-300);
  --enlace-hover: var(--azul-200);

  --foco: var(--ambar-400);

  /* Velo del encabezado adherente y de superposiciones */
  --velo:        rgba(0, 20, 46, .82);
  --velo-solido: rgba(0, 20, 46, .96);

  /* Elevación: en oscuro NO se usa sombra difusa (invisible sobre azul
     profundo) sino cambio de superficie + borde + luz interior superior. */
  --elev-1: inset 0 1px 0 rgba(246, 245, 236, .06);
  --elev-2: inset 0 1px 0 rgba(246, 245, 236, .09);
  --elev-3: inset 0 1px 0 rgba(246, 245, 236, .12), 0 18px 42px -22px rgba(0, 0, 0, .85);
  --sombra-acento: 0 14px 34px -18px rgba(254, 201, 0, .55);

  /* ----- Tipografía ----------------------------------------------------- */
  --fuente-titulo: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                   "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-cuerpo: var(--fuente-titulo);
  --fuente-mono:   ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Code",
                   Consolas, "Liberation Mono", monospace;

  /* Escala fluida: no requiere media queries para el tamaño */
  --txt-2xs:  0.6875rem;                          /* 11px */
  --txt-xs:   0.75rem;                            /* 12px */
  --txt-sm:   0.8125rem;                          /* 13px */
  --txt-base: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  --txt-lg:   clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
  --txt-xl:   clamp(1.1875rem, 1.08rem + 0.45vw, 1.4375rem);
  --txt-2xl:  clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
  --txt-3xl:  clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem);
  --txt-4xl:  clamp(1.9375rem, 1.5rem + 1.9vw, 2.9375rem);
  --txt-5xl:  clamp(2.375rem, 1.6rem + 3.4vw, 4.25rem);

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-semi:   600;
  --peso-fuerte: 700;

  --alto-apretado: 1.08;
  --alto-titulo:   1.18;
  --alto-normal:   1.5;
  --alto-comodo:   1.65;

  --track-apretado: -0.028em;
  --track-normal:   -0.011em;
  --track-amplio:    0.02em;
  --track-etiqueta:  0.09em;

  --medida:       68ch;
  --medida-corta: 54ch;

  /* ----- Espaciado — base 4px ------------------------------------------- */
  --esp-1:  0.25rem;   --esp-2:  0.5rem;    --esp-3:  0.75rem;
  --esp-4:  1rem;      --esp-5:  1.25rem;   --esp-6:  1.5rem;
  --esp-8:  2rem;      --esp-10: 2.5rem;    --esp-12: 3rem;
  --esp-14: 3.5rem;    --esp-16: 4rem;      --esp-20: 5rem;
  --esp-24: 6rem;      --esp-32: 8rem;

  /* Ritmo vertical de sección, fluido */
  --esp-seccion:   clamp(3.5rem, 8vw, 7rem);
  --esp-seccion-s: clamp(2.5rem, 5vw, 4rem);

  /* ----- Radios --------------------------------------------------------- */
  --radio-sm:   6px;
  --radio-md:   10px;
  --radio-lg:   16px;
  --radio-xl:   24px;
  --radio-full: 999px;

  /* ----- Contenedores --------------------------------------------------- */
  --ancho-estrecho:  720px;
  --ancho-medio:    1080px;
  --ancho-ancho:    1320px;
  --relleno-lateral: clamp(1rem, 4vw, 2.5rem);

  /* ----- Tiempos y curvas ----------------------------------------------- */
  --dur-rapida:    150ms;
  --dur-media:     250ms;
  --dur-lenta:     400ms;
  --dur-muy-lenta: 700ms;

  --ease-salida:         cubic-bezier(.16, 1, .3, 1);
  --ease-entrada-salida: cubic-bezier(.65, 0, .35, 1);
  --ease-entrada:        cubic-bezier(.55, 0, 1, .45);

  /* ----- Capas ---------------------------------------------------------- */
  --z-base:        1;
  --z-elevado:    10;
  --z-adherente: 100;
  --z-menu:      200;
  --z-superpuesto: 300;
  --z-aviso:     400;

  /* ----- Medidas de componentes ----------------------------------------- */
  --alto-cabecera:    72px;
  --alto-cabecera-sm: 60px;
  --toque-min:        44px;  /* holgado sobre el mínimo 24px de la 2.5.8 */

  color-scheme: dark;
}

/* ----- Tokens semánticos · TEMA CLARO -----------------------------------
   El ámbar #FEC900 sobre blanco da 1.6:1 y sería ilegible como texto; por eso
   el token de texto acentuado cambia a --ambar-700 mientras que el relleno de
   botón conserva el ámbar de marca con texto azul profundo.
   ------------------------------------------------------------------------ */
[data-tema="claro"] {
  --fondo:            #F7F9FC;
  --fondo-alterno:    #EEF3F9;
  --superficie:       #FFFFFF;
  --superficie-alta:  #FFFFFF;
  --superficie-suave: rgba(0, 60, 128, .04);

  --borde:        #D9E2EE;
  --borde-sutil:  #E8EEF6;
  --borde-fuerte: #B9C9DD;

  --texto:         var(--azul-950);
  --texto-suave:   #47607F;
  --texto-tenue:   #6B819B;
  --texto-inverso: var(--marfil);

  --marca:       var(--azul-600);
  --marca-clara: var(--azul-500);
  --acento:      var(--ambar-400);
  --acento-alto: var(--ambar-300);
  --acento-bajo: var(--ambar-500);
  --acento-texto: var(--ambar-700);   /* 4.6:1 sobre #F7F9FC */

  --enlace:       var(--azul-600);
  --enlace-hover: var(--azul-500);

  --foco: var(--azul-600);

  --velo:        rgba(247, 249, 252, .86);
  --velo-solido: rgba(247, 249, 252, .97);

  --elev-1: 0 1px 2px rgba(0, 20, 46, .05);
  --elev-2: 0 2px 4px rgba(0, 20, 46, .06), 0 6px 14px -6px rgba(0, 20, 46, .09);
  --elev-3: 0 2px 6px rgba(0, 20, 46, .07), 0 14px 34px -14px rgba(0, 20, 46, .16);
  --sombra-acento: 0 12px 28px -16px rgba(200, 158, 0, .5);

  color-scheme: light;
}


/* ==========================================================================
   02. RESET
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensa el encabezado adherente al saltar a un ancla (#cctv, #rastreo…) */
  scroll-padding-top: calc(var(--alto-cabecera) + var(--esp-6));
  tab-size: 4;
}

body {
  min-height: 100svh;
  font-family: var(--fuente-cuerpo);
  font-size: var(--txt-base);
  line-height: var(--alto-comodo);
  letter-spacing: var(--track-normal);
  color: var(--texto);
  background-color: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Elementos reemplazados: siempre con dimensiones intrínsecas respetadas
   para evitar desplazamiento acumulado de diseño (CLS). */
img,
picture,
video,
canvas,
svg,
iframe {
  display: block;
  max-width: 100%;
}

img,
video { height: auto; }

svg { fill: currentColor; }

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: 0; }

p,
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

fieldset { border: 0; padding: 0; }
legend   { padding: 0; }

table {
  border-collapse: collapse;
  border-spacing: 0;
}

::selection {
  background-color: var(--ambar-400);
  color: var(--azul-950);
}

@supports (scrollbar-width: thin) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--borde-fuerte) transparent;
  }
}


/* ==========================================================================
   03. BASE Y TIPOGRAFÍA
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-fuerte);
  line-height: var(--alto-titulo);
  letter-spacing: var(--track-apretado);
  color: var(--texto);
  text-wrap: balance;
}

h1 { font-size: var(--txt-5xl); line-height: var(--alto-apretado); }
h2 { font-size: var(--txt-4xl); }
h3 { font-size: var(--txt-2xl); }
h4 { font-size: var(--txt-xl); font-weight: var(--peso-semi); }
h5 { font-size: var(--txt-lg); font-weight: var(--peso-semi); }
h6 {
  font-size: var(--txt-xs);
  font-weight: var(--peso-semi);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--texto-suave);
}

p {
  max-width: var(--medida);
  text-wrap: pretty;
}

a {
  color: var(--enlace);
  text-decoration-color: color-mix(in srgb, var(--enlace) 40%, transparent);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-rapida) var(--ease-salida),
              text-decoration-color var(--dur-rapida) var(--ease-salida);
}

a:hover {
  color: var(--enlace-hover);
  text-decoration-color: currentColor;
}

strong, b { font-weight: var(--peso-semi); color: var(--texto); }

small { font-size: var(--txt-sm); }

code, kbd, samp, pre {
  font-family: var(--fuente-mono);
  font-size: 0.9em;
}

code {
  padding: 0.15em 0.4em;
  border-radius: var(--radio-sm);
  background-color: var(--superficie-suave);
  border: 1px solid var(--borde-sutil);
}

hr {
  height: 1px;
  border: 0;
  background-color: var(--borde);
  margin-block: var(--esp-8);
}

blockquote {
  margin: 0;
  padding-left: var(--esp-5);
  border-left: 3px solid var(--acento);
  font-size: var(--txt-lg);
  color: var(--texto-suave);
}

address { font-style: normal; }

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* ----- Foco visible ------------------------------------------------------
   Se aplica :focus-visible en todo elemento interactivo. Nunca se elimina el
   contorno sin sustituto: el anillo ámbar es visible sobre ambos temas.
   ------------------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--radio-sm);
}

:focus:not(:focus-visible) { outline: none; }

/* ----- Enlace de salto al contenido -------------------------------------- */
.salto-contenido {
  position: absolute;
  top: var(--esp-3);
  left: var(--esp-3);
  z-index: var(--z-aviso);
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--radio-md);
  background-color: var(--acento);
  color: var(--azul-950);
  font-size: var(--txt-sm);
  font-weight: var(--peso-semi);
  text-decoration: none;
  box-shadow: var(--elev-3);
  transform: translateY(calc(-100% - var(--esp-4)));
  transition: transform var(--dur-media) var(--ease-salida);
}

.salto-contenido:focus {
  transform: translateY(0);
  color: var(--azul-950);
}


/* ==========================================================================
   04. LAYOUT
   ========================================================================== */

.contenedor {
  width: 100%;
  max-width: var(--ancho-ancho);
  margin-inline: auto;
  padding-inline: var(--relleno-lateral);
}

.contenedor--medio    { max-width: var(--ancho-medio); }
.contenedor--estrecho { max-width: var(--ancho-estrecho); }

.seccion {
  padding-block: var(--esp-seccion);
  position: relative;
}

.seccion--compacta { padding-block: var(--esp-seccion-s); }
.seccion--sin-tope { padding-block-start: 0; }
.seccion--sin-base { padding-block-end: 0; }

.seccion--alterna {
  background-color: var(--fondo-alterno);
  border-block: 1px solid var(--borde-sutil);
}

/* Rendimiento: el navegador omite el diseño de las secciones fuera de
   pantalla. contain-intrinsic-size evita saltos de la barra de scroll. */
.seccion--diferida {
  content-visibility: auto;
  contain-intrinsic-size: auto 620px;
}

/* ----- Encabezado de sección --------------------------------------------- */
.encabezado-seccion {
  max-width: var(--ancho-estrecho);
  margin-bottom: var(--esp-12);
}

.encabezado-seccion--centrado {
  margin-inline: auto;
  text-align: center;
}

.encabezado-seccion--centrado p { margin-inline: auto; }

.encabezado-seccion__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin-bottom: var(--esp-4);
  font-size: var(--txt-xs);
  font-weight: var(--peso-semi);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--acento-texto);
}

.encabezado-seccion__etiqueta::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: var(--radio-full);
  background-color: var(--acento);
}

.encabezado-seccion--centrado .encabezado-seccion__etiqueta::before { display: none; }

.encabezado-seccion__titulo { margin-bottom: var(--esp-4); }

.encabezado-seccion__texto {
  font-size: var(--txt-lg);
  color: var(--texto-suave);
}

/* ----- Retículas ---------------------------------------------------------
   auto-fit + minmax adapta el número de columnas sin media queries. El min()
   evita el desbordamiento en viewports de 320px.
   ------------------------------------------------------------------------ */
.reticula { display: grid; gap: var(--esp-6); }

.reticula--2    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.reticula--3    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.reticula--4    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.reticula--auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }

.reticula--holgada  { gap: var(--esp-8); }
.reticula--apretada { gap: var(--esp-4); }

/* Retícula de 12 columnas para composiciones asimétricas */
.reticula-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--esp-6);
}

.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* ----- Pilas y agrupaciones ---------------------------------------------- */
.pila { display: flex; flex-direction: column; }
.pila--2 { gap: var(--esp-2); }
.pila--3 { gap: var(--esp-3); }
.pila--4 { gap: var(--esp-4); }
.pila--6 { gap: var(--esp-6); }

.fila {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
}

.grupo-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  align-items: center;
}


/* ==========================================================================
   05. COMPONENTES
   ========================================================================== */

/* --------------------------------------------------------------------------
   05.1 Botones
   La acción primaria es ámbar sólido con texto azul profundo: 11.91:1 sobre
   el fondo. El azul de marca como relleno da 2.17:1 e incumpliría el criterio
   1.4.11, por eso la acción secundaria usa contorno en lugar de relleno.
   -------------------------------------------------------------------------- */

.boton {
  --boton-fondo: transparent;
  --boton-texto: var(--texto);
  --boton-borde: transparent;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--toque-min);
  padding: var(--esp-3) var(--esp-6);
  border: 1px solid var(--boton-borde);
  border-radius: var(--radio-md);
  background-color: var(--boton-fondo);
  color: var(--boton-texto);
  font-size: var(--txt-sm);
  font-weight: var(--peso-semi);
  letter-spacing: var(--track-normal);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: background-color var(--dur-media) var(--ease-salida),
              border-color     var(--dur-media) var(--ease-salida),
              color            var(--dur-media) var(--ease-salida),
              transform        var(--dur-rapida) var(--ease-salida),
              box-shadow       var(--dur-media) var(--ease-salida);
}

.boton:hover  { transform: translateY(-1px); }
.boton:active { transform: translateY(0); transition-duration: var(--dur-rapida); }

.boton[disabled],
.boton[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

.boton .icono { flex-shrink: 0; }

/* Primario — ámbar de marca */
.boton--primario {
  --boton-fondo: var(--acento);
  --boton-texto: var(--azul-950);
  --boton-borde: var(--acento);
  box-shadow: var(--sombra-acento);
}

.boton--primario:hover {
  --boton-fondo: var(--acento-alto);
  --boton-borde: var(--acento-alto);
  color: var(--azul-950);
}

/* Barrido de brillo: solo transform, no dispara repintado de diseño */
.boton--primario::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
              transparent 20%,
              rgba(255, 255, 255, .45) 50%,
              transparent 80%);
  transform: translateX(-120%);
  pointer-events: none;
}

.boton--primario:hover::after {
  animation: barrido-brillo var(--dur-muy-lenta) var(--ease-salida);
}

/* Secundario — contorno, nunca relleno azul */
.boton--secundario {
  --boton-fondo: transparent;
  --boton-texto: var(--texto);
  --boton-borde: var(--neutro-400);
}

.boton--secundario:hover {
  --boton-fondo: var(--superficie-alta);
  --boton-borde: var(--texto);
  color: var(--texto);
}

/* Fantasma — sin borde hasta el hover */
.boton--fantasma {
  --boton-fondo: transparent;
  --boton-texto: var(--texto-suave);
  --boton-borde: transparent;
}

.boton--fantasma:hover {
  --boton-fondo: var(--superficie-suave);
  --boton-texto: var(--texto);
}

/* Texto — enlace de acción con subrayado animado */
.boton--texto {
  --boton-texto: var(--acento-texto);
  min-height: auto;
  padding: var(--esp-2) 0;
  border-radius: var(--radio-sm);
}

.boton--texto::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 1.5px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-media) var(--ease-salida);
}

.boton--texto:hover {
  transform: none;
  color: var(--acento-alto);
}

.boton--texto:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Sobre superficie ámbar (secciones invertidas) */
.boton--inverso {
  --boton-fondo: var(--azul-950);
  --boton-texto: var(--marfil);
  --boton-borde: var(--azul-950);
}

.boton--inverso:hover {
  --boton-fondo: var(--azul-900);
  --boton-borde: var(--azul-900);
  color: var(--marfil);
}

/* Tamaños */
.boton--pequeno {
  min-height: 36px;
  padding: var(--esp-2) var(--esp-4);
  font-size: var(--txt-xs);
}

.boton--grande {
  min-height: 52px;
  padding: var(--esp-4) var(--esp-8);
  font-size: var(--txt-base);
}

.boton--bloque { width: 100%; }

/* Botón icónico cuadrado — cumple el objetivo táctil mínimo */
.boton--icono {
  min-width: var(--toque-min);
  padding: var(--esp-2);
}

/* Estado de carga: el texto se atenúa y aparece un disco giratorio */
.boton[data-estado="cargando"] {
  pointer-events: none;
  color: transparent;
}

.boton[data-estado="cargando"]::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radio-full);
  color: var(--azul-950);
  animation: girar var(--dur-muy-lenta) linear infinite;
}

.boton--secundario[data-estado="cargando"]::before,
.boton--fantasma[data-estado="cargando"]::before { color: var(--texto); }


/* --------------------------------------------------------------------------
   05.2 Insignias y etiquetas
   -------------------------------------------------------------------------- */

.insignia {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-full);
  background-color: var(--superficie-suave);
  font-size: var(--txt-2xs);
  font-weight: var(--peso-semi);
  letter-spacing: var(--track-amplio);
  text-transform: uppercase;
  color: var(--texto-suave);
  white-space: nowrap;
}

.insignia--acento {
  border-color: color-mix(in srgb, var(--acento) 45%, transparent);
  background-color: color-mix(in srgb, var(--acento) 12%, transparent);
  color: var(--acento-texto);
}

.insignia--exito {
  border-color: color-mix(in srgb, var(--exito) 45%, transparent);
  background-color: color-mix(in srgb, var(--exito) 12%, transparent);
  color: var(--exito);
}

.insignia--proximamente {
  border-color: var(--borde-fuerte);
  color: var(--texto-tenue);
}

/* Punto de estado — acompaña siempre a un texto, nunca comunica solo */
.insignia__punto {
  width: 7px;
  height: 7px;
  border-radius: var(--radio-full);
  background-color: currentColor;
  flex-shrink: 0;
}

.insignia--activa .insignia__punto {
  background-color: var(--exito);
  animation: pulso-estado 2.4s var(--ease-entrada-salida) infinite;
}


/* --------------------------------------------------------------------------
   05.3 Tarjetas
   -------------------------------------------------------------------------- */

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  padding: var(--esp-6);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background-color: var(--superficie);
  box-shadow: var(--elev-1);
  transition: border-color var(--dur-media) var(--ease-salida),
              background-color var(--dur-media) var(--ease-salida),
              transform var(--dur-media) var(--ease-salida),
              box-shadow var(--dur-media) var(--ease-salida);
}

.tarjeta--interactiva:hover,
.tarjeta--interactiva:focus-within {
  border-color: var(--borde-fuerte);
  background-color: var(--superficie-alta);
  transform: translateY(-3px);
  box-shadow: var(--elev-3);
}

/* Filo ámbar superior que se despliega al pasar el puntero */
.tarjeta--interactiva::before {
  content: "";
  position: absolute;
  inset: -1px auto auto -1px;
  width: calc(100% + 2px);
  height: 2px;
  border-radius: var(--radio-lg) var(--radio-lg) 0 0;
  background: linear-gradient(90deg, var(--acento-alto), var(--acento-bajo));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-lenta) var(--ease-salida);
}

.tarjeta--interactiva:hover::before,
.tarjeta--interactiva:focus-within::before { transform: scaleX(1); }

.tarjeta--plana    { box-shadow: none; background-color: transparent; }
.tarjeta--compacta { padding: var(--esp-5); gap: var(--esp-3); }
.tarjeta--holgada  { padding: var(--esp-8); }

.tarjeta__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radio-md);
  border: 1px solid color-mix(in srgb, var(--acento) 30%, transparent);
  background-color: color-mix(in srgb, var(--acento) 10%, transparent);
  color: var(--acento-texto);
  flex-shrink: 0;
  transition: background-color var(--dur-media) var(--ease-salida),
              border-color var(--dur-media) var(--ease-salida);
}

.tarjeta--interactiva:hover .tarjeta__icono {
  background-color: color-mix(in srgb, var(--acento) 18%, transparent);
  border-color: color-mix(in srgb, var(--acento) 55%, transparent);
}

.tarjeta__icono .icono { width: 24px; height: 24px; }

.tarjeta__titulo {
  font-size: var(--txt-xl);
  font-weight: var(--peso-semi);
  letter-spacing: var(--track-normal);
}

.tarjeta__texto {
  color: var(--texto-suave);
  font-size: var(--txt-base);
  margin: 0;
}

.tarjeta__pie {
  margin-top: auto;
  padding-top: var(--esp-2);
}

/* El ::after amplía el área de pulsación sin romper el nombre accesible:
   el texto del enlace sigue siendo descriptivo. */
.tarjeta__enlace::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.tarjeta:has(.tarjeta__enlace:focus-visible) {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.tarjeta__enlace:focus-visible { outline: none; }

/* Tarjeta de estadística */
.tarjeta-cifra {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  padding: var(--esp-6) var(--esp-5);
  border-left: 2px solid var(--acento);
  background-color: var(--superficie-suave);
  border-radius: 0 var(--radio-md) var(--radio-md) 0;
}

.tarjeta-cifra__valor {
  font-size: var(--txt-4xl);
  font-weight: var(--peso-fuerte);
  line-height: 1;
  letter-spacing: var(--track-apretado);
  color: var(--acento-texto);
  font-variant-numeric: tabular-nums;
}

.tarjeta-cifra__etiqueta {
  font-size: var(--txt-sm);
  color: var(--texto-suave);
  max-width: 22ch;
}

/* Tarjeta de sector — compacta, en retícula densa */
.tarjeta-sector {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  background-color: var(--superficie);
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  transition: border-color var(--dur-media) var(--ease-salida),
              background-color var(--dur-media) var(--ease-salida);
}

.tarjeta-sector:hover {
  border-color: color-mix(in srgb, var(--acento) 45%, transparent);
  background-color: var(--superficie-alta);
}

.tarjeta-sector .icono {
  width: 20px;
  height: 20px;
  color: var(--acento-texto);
  flex-shrink: 0;
}

/* Tarjeta de acceso — hub de Ingreso Clientes */
.tarjeta-acceso { gap: var(--esp-5); }

.tarjeta-acceso--inactiva {
  border-style: dashed;
  background-color: transparent;
}

.tarjeta-acceso--inactiva .tarjeta__titulo,
.tarjeta-acceso--inactiva .tarjeta__texto { color: var(--texto-tenue); }

.tarjeta-acceso--inactiva .tarjeta__icono {
  border-color: var(--borde);
  background-color: transparent;
  color: var(--texto-tenue);
}


/* --------------------------------------------------------------------------
   05.4 Iconos
   -------------------------------------------------------------------------- */

.icono {
  display: inline-block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  flex-shrink: 0;
}

.icono--sm { width: 18px; height: 18px; }
.icono--lg { width: 32px; height: 32px; }
.icono--xl { width: 44px; height: 44px; }

/* Iconos macizos (redes sociales) que se pintan con relleno */
.icono--macizo { fill: currentColor; stroke: none; }


/* --------------------------------------------------------------------------
   05.5 Enlace externo
   -------------------------------------------------------------------------- */

.enlace-externo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
}

.enlace-externo .icono { width: 15px; height: 15px; opacity: .75; }


/* --------------------------------------------------------------------------
   05.6 Cabecera y navegación
   -------------------------------------------------------------------------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: var(--z-adherente);
  background-color: var(--velo);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-media) var(--ease-salida),
              border-color var(--dur-media) var(--ease-salida),
              box-shadow var(--dur-media) var(--ease-salida);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .cabecera {
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }
}

/* Estado aplicado por main.js al superar el umbral de desplazamiento */
.cabecera[data-desplazada="true"] {
  background-color: var(--velo-solido);
  border-bottom-color: var(--borde);
  box-shadow: 0 10px 30px -24px rgba(0, 0, 0, .9);
}

.cabecera__interior {
  display: flex;
  align-items: center;
  gap: var(--esp-5);
  min-height: var(--alto-cabecera);
}

/* ----- Logotipo ----------------------------------------------------------- */
.logotipo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  flex-shrink: 0;
  text-decoration: none;
  color: var(--texto);
}

.logotipo:hover { color: var(--texto); }

.logotipo__marca {
  width: auto;
  height: 38px;
  display: block;
}

.logotipo__texto {
  font-size: var(--txt-lg);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.06em;
  line-height: 1;
}

.logotipo__lema {
  display: block;
  font-size: var(--txt-2xs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-top: 2px;
}

/* ----- Navegación principal ----------------------------------------------- */
.navegacion { margin-left: auto; }

.navegacion__lista {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.navegacion__enlace {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radio-sm);
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  color: var(--texto-suave);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-rapida) var(--ease-salida);
}

.navegacion__enlace:hover { color: var(--texto); }

/* Subrayado ámbar animado desde el centro */
.navegacion__enlace::after {
  content: "";
  position: absolute;
  left: var(--esp-3);
  right: var(--esp-3);
  bottom: 6px;
  height: 2px;
  border-radius: var(--radio-full);
  background-color: var(--acento);
  transform: scaleX(0);
  transition: transform var(--dur-media) var(--ease-salida);
}

.navegacion__enlace:hover::after { transform: scaleX(1); }

/* La página actual se marca con aria-current, no solo con color */
.navegacion__enlace[aria-current="page"] {
  color: var(--texto);
  font-weight: var(--peso-semi);
}

.navegacion__enlace[aria-current="page"]::after { transform: scaleX(1); }

/* ----- Acciones de la cabecera -------------------------------------------- */
.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex-shrink: 0;
}

.cabecera__separador {
  width: 1px;
  height: 22px;
  background-color: var(--borde);
  flex-shrink: 0;
}

/* ----- Conmutador de tema y selector de idioma ---------------------------- */
.conmutador-tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--toque-min);
  min-height: var(--toque-min);
  border-radius: var(--radio-md);
  color: var(--texto-suave);
  cursor: pointer;
  transition: color var(--dur-rapida) var(--ease-salida),
              background-color var(--dur-rapida) var(--ease-salida);
}

.conmutador-tema:hover {
  color: var(--acento-texto);
  background-color: var(--superficie-suave);
}

/* Solo se muestra el icono correspondiente al tema opuesto */
.conmutador-tema__luna { display: none; }
[data-tema="claro"] .conmutador-tema__luna { display: block; }
[data-tema="claro"] .conmutador-tema__sol  { display: none; }

.selector-idioma {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  overflow: hidden;
}

.selector-idioma__opcion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 34px;
  padding: 0 var(--esp-2);
  font-size: var(--txt-2xs);
  font-weight: var(--peso-semi);
  letter-spacing: var(--track-amplio);
  text-transform: uppercase;
  color: var(--texto-tenue);
  text-decoration: none;
  transition: color var(--dur-rapida) var(--ease-salida),
              background-color var(--dur-rapida) var(--ease-salida);
}

.selector-idioma__opcion:hover {
  color: var(--texto);
  background-color: var(--superficie-suave);
}

.selector-idioma__opcion[aria-current="true"] {
  background-color: var(--acento);
  color: var(--azul-950);
}

/* ----- Botón de menú móvil ------------------------------------------------ */
.boton-menu {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: var(--toque-min);
  min-height: var(--toque-min);
  border-radius: var(--radio-md);
  color: var(--texto);
  cursor: pointer;
}

.boton-menu__barras {
  position: relative;
  width: 20px;
  height: 2px;
  border-radius: var(--radio-full);
  background-color: currentColor;
  transition: background-color var(--dur-rapida) var(--ease-salida);
}

.boton-menu__barras::before,
.boton-menu__barras::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: var(--radio-full);
  background-color: currentColor;
  transition: transform var(--dur-media) var(--ease-salida);
}

.boton-menu__barras::before { top: -6px; }
.boton-menu__barras::after  { top:  6px; }

/* Transformación a aspa cuando el menú está abierto */
.boton-menu[aria-expanded="true"] .boton-menu__barras { background-color: transparent; }
.boton-menu[aria-expanded="true"] .boton-menu__barras::before { transform: translateY(6px) rotate(45deg); }
.boton-menu[aria-expanded="true"] .boton-menu__barras::after  { transform: translateY(-6px) rotate(-45deg); }


/* --------------------------------------------------------------------------
   05.7 Menú móvil a pantalla completa
   -------------------------------------------------------------------------- */

.menu-movil {
  position: fixed;
  inset: var(--alto-cabecera-sm) 0 0 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  padding: var(--esp-6) var(--relleno-lateral) var(--esp-10);
  background-color: var(--velo-solido);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur-media) var(--ease-salida),
              transform var(--dur-media) var(--ease-salida),
              visibility 0s linear var(--dur-media);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .menu-movil {
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
  }
}

.menu-movil[data-abierto="true"] {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

/* Bloquea el desplazamiento del documento con el menú abierto */
body[data-menu-abierto="true"] { overflow: hidden; }

.menu-movil__lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  list-style: none;
  margin: 0 0 var(--esp-8);
  padding: 0;
}

.menu-movil__enlace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  min-height: 56px;
  padding: var(--esp-3) 0;
  border-bottom: 1px solid var(--borde-sutil);
  font-size: var(--txt-2xl);
  font-weight: var(--peso-semi);
  letter-spacing: var(--track-apretado);
  color: var(--texto);
  text-decoration: none;
  transition: color var(--dur-rapida) var(--ease-salida),
              padding-left var(--dur-media) var(--ease-salida);
}

.menu-movil__enlace:hover {
  color: var(--acento-texto);
  padding-left: var(--esp-2);
}

.menu-movil__enlace[aria-current="page"] { color: var(--acento-texto); }

.menu-movil__enlace .icono {
  color: var(--texto-tenue);
  width: 20px;
  height: 20px;
}

.menu-movil__pie {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}


/* --------------------------------------------------------------------------
   05.8 Buscador
   Combobox ARIA: el campo controla una lista de resultados navegable con
   flechas. buscar.php es el respaldo funcional cuando no hay JavaScript.
   -------------------------------------------------------------------------- */

.buscador {
  position: relative;
  flex-shrink: 0;
}

.buscador__campo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  width: 190px;
  min-height: 38px;
  padding: 0 var(--esp-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  background-color: var(--superficie-suave);
  transition: width var(--dur-lenta) var(--ease-salida),
              border-color var(--dur-media) var(--ease-salida),
              background-color var(--dur-media) var(--ease-salida);
}

.buscador__campo:focus-within {
  width: 260px;
  border-color: var(--acento);
  background-color: var(--superficie);
}

.buscador__icono {
  width: 17px;
  height: 17px;
  color: var(--texto-tenue);
  flex-shrink: 0;
}

.buscador__entrada {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: var(--txt-sm);
  color: var(--texto);
  outline: none;
}

.buscador__entrada::placeholder { color: var(--texto-tenue); }

/* El botón de envío solo es visible sin JavaScript */
.buscador__enviar {
  display: none;
  cursor: pointer;
  color: var(--texto-tenue);
}

.buscador__limpiar {
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radio-full);
  color: var(--texto-tenue);
  cursor: pointer;
  flex-shrink: 0;
}

.buscador__limpiar:hover { color: var(--texto); background-color: var(--superficie-alta); }
.buscador[data-con-texto="true"] .buscador__limpiar { display: inline-flex; }

/* ----- Resultados --------------------------------------------------------- */
.buscador__resultados {
  position: absolute;
  top: calc(100% + var(--esp-2));
  right: 0;
  width: min(420px, calc(100vw - var(--esp-8)));
  max-height: 60vh;
  padding: var(--esp-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  background-color: var(--velo-solido);
  box-shadow: var(--elev-3);
  list-style: none;
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: var(--z-superpuesto);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .buscador__resultados {
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
  }
}

.buscador__resultados[hidden] { display: none; }

.buscador__resultado {
  display: block;
  padding: var(--esp-3);
  border-radius: var(--radio-sm);
  color: var(--texto);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-rapida) var(--ease-salida);
}

.buscador__resultado:hover,
.buscador__resultado[aria-selected="true"] {
  background-color: var(--superficie-alta);
  color: var(--texto);
}

.buscador__resultado-titulo {
  display: block;
  font-size: var(--txt-sm);
  font-weight: var(--peso-semi);
  margin-bottom: 2px;
}

/* Se recorta a dos líneas; -webkit-box es el único mecanismo con soporte
   universal para line-clamp, y degrada mostrando el texto completo. */
.buscador__resultado-contexto {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: var(--txt-xs);
  color: var(--texto-suave);
  line-height: var(--alto-normal);
}

.buscador__resultado-seccion {
  display: inline-block;
  margin-bottom: var(--esp-1);
  font-size: var(--txt-2xs);
  font-weight: var(--peso-semi);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--acento-texto);
}

/* El término coincidente se resalta sin depender solo del color */
.buscador__resultado mark {
  background-color: color-mix(in srgb, var(--acento) 28%, transparent);
  color: inherit;
  font-weight: var(--peso-semi);
  border-radius: 2px;
  padding: 0 1px;
}

.buscador__vacio {
  padding: var(--esp-5) var(--esp-3);
  text-align: center;
  font-size: var(--txt-sm);
  color: var(--texto-suave);
}


/* --------------------------------------------------------------------------
   05.9 Formularios
   -------------------------------------------------------------------------- */

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.campo__etiqueta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  color: var(--texto);
}

/* El asterisco es decorativo: la obligatoriedad se comunica también con
   el atributo required y con el texto de la leyenda del formulario. */
.campo__requerido {
  color: var(--acento-texto);
  margin-left: 2px;
}

.campo__opcional {
  font-size: var(--txt-xs);
  font-weight: var(--peso-normal);
  color: var(--texto-tenue);
}

.campo__control {
  width: 100%;
  min-height: var(--toque-min);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  background-color: var(--superficie);
  color: var(--texto);
  font-size: var(--txt-base);
  line-height: var(--alto-normal);
  transition: border-color var(--dur-rapida) var(--ease-salida),
              background-color var(--dur-rapida) var(--ease-salida),
              box-shadow var(--dur-rapida) var(--ease-salida);
}

.campo__control::placeholder { color: var(--texto-tenue); }

.campo__control:hover { border-color: var(--borde-fuerte); }

.campo__control:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent);
}

.campo__control:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 1px;
}

textarea.campo__control {
  min-height: 148px;
  resize: vertical;
  font-family: inherit;
}

select.campo__control {
  appearance: none;
  cursor: pointer;
  padding-right: var(--esp-10);
  /* Cheurón dibujado con gradientes: sin petición de red ni SVG externo */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% + 1px),
    calc(100% - 15px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* ----- Estados de validación ---------------------------------------------- */
.campo[data-estado="error"] .campo__control {
  border-color: var(--error);
  background-color: color-mix(in srgb, var(--error) 7%, transparent);
}

.campo[data-estado="error"] .campo__control:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 22%, transparent);
}

.campo[data-estado="valido"] .campo__control {
  border-color: color-mix(in srgb, var(--exito) 55%, transparent);
}

/* El mensaje de error va en texto, nunca solo en color */
.campo__mensaje {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  font-size: var(--txt-xs);
  line-height: var(--alto-normal);
  color: var(--texto-tenue);
}

.campo__mensaje .icono { width: 15px; height: 15px; margin-top: 1px; }

.campo[data-estado="error"] .campo__mensaje { color: var(--error); }

.campo__contador {
  font-size: var(--txt-xs);
  color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
}

.campo__contador[data-limite="cerca"] { color: var(--alerta); }
.campo__contador[data-limite="excedido"] { color: var(--error); font-weight: var(--peso-semi); }

/* ----- Grupo de opciones (motivo de contacto) ----------------------------- */
.grupo-opciones {
  display: grid;
  gap: var(--esp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.opcion {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-4);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  background-color: var(--superficie);
  cursor: pointer;
  transition: border-color var(--dur-media) var(--ease-salida),
              background-color var(--dur-media) var(--ease-salida);
}

.opcion:hover { border-color: var(--borde-fuerte); }

.opcion__entrada {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Marca circular dibujada con CSS, coherente con los nodos del logotipo */
.opcion__marca {
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 2px solid var(--borde-fuerte);
  border-radius: var(--radio-full);
  flex-shrink: 0;
  transition: border-color var(--dur-rapida) var(--ease-salida);
}

.opcion__marca::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: var(--radio-full);
  background-color: var(--acento);
  transform: scale(0);
  transition: transform var(--dur-media) var(--ease-salida);
}

.opcion__entrada:checked ~ .opcion__marca { border-color: var(--acento); }
.opcion__entrada:checked ~ .opcion__marca::after { transform: scale(1); }

.opcion:has(.opcion__entrada:checked) {
  border-color: var(--acento);
  background-color: color-mix(in srgb, var(--acento) 8%, transparent);
}

.opcion:has(.opcion__entrada:focus-visible) {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.opcion__contenido { display: flex; flex-direction: column; gap: 2px; }

.opcion__titulo {
  font-size: var(--txt-sm);
  font-weight: var(--peso-semi);
  color: var(--texto);
}

.opcion__texto {
  font-size: var(--txt-xs);
  color: var(--texto-suave);
  line-height: var(--alto-normal);
}

/* ----- Casilla de verificación -------------------------------------------- */
.casilla {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  cursor: pointer;
}

.casilla__entrada {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.casilla__marca {
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 2px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  flex-shrink: 0;
  transition: border-color var(--dur-rapida) var(--ease-salida),
              background-color var(--dur-rapida) var(--ease-salida);
}

/* Palomita construida con dos bordes rotados */
.casilla__marca::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--azul-950);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform var(--dur-media) var(--ease-salida);
}

.casilla__entrada:checked ~ .casilla__marca {
  background-color: var(--acento);
  border-color: var(--acento);
}

.casilla__entrada:checked ~ .casilla__marca::after { transform: rotate(45deg) scale(1); }

.casilla:has(.casilla__entrada:focus-visible) .casilla__marca {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.casilla__texto {
  font-size: var(--txt-sm);
  color: var(--texto-suave);
  line-height: var(--alto-normal);
}

.casilla__texto a { color: var(--acento-texto); }

/* ----- Honeypot -----------------------------------------------------------
   Oculto para personas y lectores de pantalla, visible para bots ingenuos.
   No se usa display:none porque algunos bots lo detectan.
   ------------------------------------------------------------------------ */
.trampa {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ----- Resultado del envío ------------------------------------------------ */
.aviso-formulario {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  background-color: var(--superficie);
  font-size: var(--txt-sm);
  line-height: var(--alto-normal);
}

.aviso-formulario[hidden] { display: none; }

.aviso-formulario .icono { flex-shrink: 0; margin-top: 1px; }

.aviso-formulario--exito {
  border-color: color-mix(in srgb, var(--exito) 45%, transparent);
  background-color: color-mix(in srgb, var(--exito) 9%, transparent);
  color: var(--exito);
}

.aviso-formulario--error {
  border-color: color-mix(in srgb, var(--error) 45%, transparent);
  background-color: color-mix(in srgb, var(--error) 9%, transparent);
  color: var(--error);
}

.aviso-formulario--info {
  border-color: color-mix(in srgb, var(--acento) 40%, transparent);
  background-color: color-mix(in srgb, var(--acento) 8%, transparent);
  color: var(--acento-texto);
}


/* --------------------------------------------------------------------------
   05.10 Notificación emergente
   -------------------------------------------------------------------------- */

.notificaciones {
  position: fixed;
  right: var(--esp-4);
  bottom: var(--esp-4);
  z-index: var(--z-aviso);
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  width: min(380px, calc(100vw - var(--esp-8)));
  pointer-events: none;
}

.notificacion {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
  border: 1px solid var(--borde);
  border-left-width: 3px;
  border-radius: var(--radio-md);
  background-color: var(--velo-solido);
  box-shadow: var(--elev-3);
  font-size: var(--txt-sm);
  pointer-events: auto;
  animation: entrar-notificacion var(--dur-lenta) var(--ease-salida);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .notificacion {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}

.notificacion--exito { border-left-color: var(--exito); }
.notificacion--error { border-left-color: var(--error); }
.notificacion--info  { border-left-color: var(--acento); }

.notificacion[data-saliendo="true"] {
  animation: salir-notificacion var(--dur-media) var(--ease-entrada) forwards;
}

.notificacion__cuerpo { flex: 1; }

.notificacion__titulo {
  font-weight: var(--peso-semi);
  margin-bottom: 2px;
}

.notificacion__texto { color: var(--texto-suave); font-size: var(--txt-xs); }

.notificacion__cerrar {
  color: var(--texto-tenue);
  cursor: pointer;
  padding: 2px;
  border-radius: var(--radio-sm);
  flex-shrink: 0;
}

.notificacion__cerrar:hover { color: var(--texto); }


/* --------------------------------------------------------------------------
   05.11 Acordeón
   -------------------------------------------------------------------------- */

.acordeon {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

.acordeon__elemento {
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  background-color: var(--superficie);
  overflow: hidden;
  transition: border-color var(--dur-media) var(--ease-salida);
}

.acordeon__elemento[open] { border-color: var(--borde-fuerte); }

.acordeon__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: var(--toque-min);
  padding: var(--esp-4) var(--esp-5);
  font-size: var(--txt-base);
  font-weight: var(--peso-semi);
  color: var(--texto);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur-rapida) var(--ease-salida);
}

.acordeon__titulo::-webkit-details-marker { display: none; }
.acordeon__titulo:hover { background-color: var(--superficie-alta); }

.acordeon__titulo .icono {
  color: var(--acento-texto);
  transition: transform var(--dur-media) var(--ease-salida);
  flex-shrink: 0;
}

.acordeon__elemento[open] .acordeon__titulo .icono { transform: rotate(180deg); }

.acordeon__cuerpo {
  padding: 0 var(--esp-5) var(--esp-5);
  color: var(--texto-suave);
  font-size: var(--txt-base);
}

.acordeon__elemento[open] .acordeon__cuerpo {
  animation: desplegar var(--dur-lenta) var(--ease-salida);
}


/* --------------------------------------------------------------------------
   05.12 Pestañas de categoría (filtro de productos)
   -------------------------------------------------------------------------- */

.pestanas {
  display: flex;
  gap: var(--esp-2);
  margin-bottom: var(--esp-10);
  padding-bottom: var(--esp-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-bottom: 1px solid var(--borde-sutil);
}

.pestanas::-webkit-scrollbar { display: none; }

.pestana {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 40px;
  padding: var(--esp-2) var(--esp-4);
  border: 1px solid var(--borde);
  border-radius: var(--radio-full);
  background-color: transparent;
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  color: var(--texto-suave);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--dur-media) var(--ease-salida),
              border-color var(--dur-media) var(--ease-salida),
              background-color var(--dur-media) var(--ease-salida);
}

.pestana:hover {
  color: var(--texto);
  border-color: var(--borde-fuerte);
}

.pestana[aria-selected="true"] {
  background-color: var(--acento);
  border-color: var(--acento);
  color: var(--azul-950);
  font-weight: var(--peso-semi);
}

.pestana .icono { width: 17px; height: 17px; }


/* --------------------------------------------------------------------------
   05.13 Migas de pan
   -------------------------------------------------------------------------- */

.migas {
  margin-bottom: var(--esp-6);
  font-size: var(--txt-xs);
}

.migas__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.migas__elemento {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  color: var(--texto-tenue);
}

.migas__elemento:not(:last-child)::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: var(--radio-full);
  background-color: var(--borde-fuerte);
}

.migas__enlace {
  color: var(--texto-suave);
  text-decoration: none;
}

.migas__enlace:hover { color: var(--acento-texto); }


/* --------------------------------------------------------------------------
   05.14 Marquesina de aliados
   Duplicada en el marcado con aria-hidden en la copia para que los lectores
   de pantalla no anuncien la lista dos veces.
   -------------------------------------------------------------------------- */

.marquesina {
  position: relative;
  overflow: hidden;
  padding-block: var(--esp-4);
  /* Desvanecido lateral sin superponer elementos opacos */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquesina__pista {
  display: flex;
  gap: var(--esp-10);
  width: max-content;
  animation: desplazar-marquesina 44s linear infinite;
}

.marquesina:hover .marquesina__pista,
.marquesina:focus-within .marquesina__pista { animation-play-state: paused; }

/* Botón de pausa para cumplir el criterio 2.2.2 sin depender del puntero */
.marquesina[data-pausada="true"] .marquesina__pista { animation-play-state: paused; }

.marquesina__elemento {
  display: inline-flex;
  align-items: center;
  font-size: var(--txt-base);
  font-weight: var(--peso-semi);
  letter-spacing: var(--track-amplio);
  color: var(--texto-tenue);
  white-space: nowrap;
  transition: color var(--dur-media) var(--ease-salida);
}

.marquesina__elemento:hover { color: var(--texto); }

.marquesina__control {
  position: absolute;
  right: var(--esp-2);
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-elevado);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-full);
  background-color: var(--velo-solido);
  color: var(--texto-suave);
  cursor: pointer;
}

.marquesina__control:hover { color: var(--texto); border-color: var(--borde-fuerte); }


/* --------------------------------------------------------------------------
   05.15 Carrusel
   -------------------------------------------------------------------------- */

.carrusel { position: relative; }

.carrusel__ventana {
  overflow: hidden;
  border-radius: var(--radio-lg);
}

.carrusel__pista {
  display: flex;
  transition: transform var(--dur-muy-lenta) var(--ease-salida);
  will-change: transform;
}

.carrusel__diapositiva {
  flex: 0 0 100%;
  min-width: 0;
}

/* Las diapositivas ocultas se retiran del orden de tabulación por JS con
   inert; aquí solo se atenúan para reforzar el estado visualmente. */
.carrusel__diapositiva[aria-hidden="true"] { opacity: .35; }

.carrusel__controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-4);
  margin-top: var(--esp-6);
}

.carrusel__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--toque-min);
  min-height: var(--toque-min);
  border: 1px solid var(--borde);
  border-radius: var(--radio-full);
  color: var(--texto-suave);
  cursor: pointer;
  transition: color var(--dur-media) var(--ease-salida),
              border-color var(--dur-media) var(--ease-salida),
              background-color var(--dur-media) var(--ease-salida);
}

.carrusel__boton:hover {
  color: var(--acento-texto);
  border-color: var(--acento);
  background-color: var(--superficie-suave);
}

.carrusel__boton[disabled] { opacity: .35; cursor: not-allowed; }

.carrusel__indicadores {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* El objetivo táctil mide 24px aunque el punto visible mida 8px */
.carrusel__indicador {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
  border-radius: var(--radio-full);
}

.carrusel__indicador::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radio-full);
  background-color: var(--borde-fuerte);
  transition: background-color var(--dur-media) var(--ease-salida),
              width var(--dur-media) var(--ease-salida);
}

.carrusel__indicador[aria-selected="true"]::before {
  width: 22px;
  background-color: var(--acento);
}


/* --------------------------------------------------------------------------
   05.16 Línea de tiempo
   -------------------------------------------------------------------------- */

.linea-tiempo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-8);
  padding-left: var(--esp-8);
  list-style: none;
  margin: 0;
}

.linea-tiempo::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: var(--radio-full);
  background: linear-gradient(180deg,
              var(--acento) 0%,
              var(--borde) 45%,
              var(--borde) 100%);
}

.linea-tiempo__hito { position: relative; }

/* Nodo circular, eco del vocabulario gráfico del logotipo */
.linea-tiempo__hito::before {
  content: "";
  position: absolute;
  left: calc(var(--esp-8) * -1 + 2px);
  top: 6px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--acento);
  border-radius: var(--radio-full);
  background-color: var(--fondo);
}

.linea-tiempo__ano {
  display: block;
  font-size: var(--txt-sm);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-amplio);
  color: var(--acento-texto);
  margin-bottom: var(--esp-1);
  font-variant-numeric: tabular-nums;
}

.linea-tiempo__titulo {
  font-size: var(--txt-lg);
  font-weight: var(--peso-semi);
  margin-bottom: var(--esp-2);
}

.linea-tiempo__texto { color: var(--texto-suave); font-size: var(--txt-base); }


/* --------------------------------------------------------------------------
   05.17 Lista de verificación
   -------------------------------------------------------------------------- */

.lista-verificada {
  display: grid;
  gap: var(--esp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.lista-verificada__elemento {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  font-size: var(--txt-base);
  color: var(--texto-suave);
  line-height: var(--alto-normal);
}

.lista-verificada__elemento .icono {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--acento-texto);
  flex-shrink: 0;
}

.lista-verificada__elemento strong { color: var(--texto); }

/* Variante de viñeta simple para listas técnicas */
.lista-tecnica {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.lista-tecnica__elemento {
  position: relative;
  padding-left: var(--esp-5);
  font-size: var(--txt-base);
  color: var(--texto-suave);
  line-height: var(--alto-normal);
}

.lista-tecnica__elemento::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: var(--radio-full);
  background-color: var(--acento);
}


/* ==========================================================================
   06. SECCIONES DE PÁGINA
   ========================================================================== */

/* --------------------------------------------------------------------------
   06.1 Hero
   El lienzo de red de nodos se dibuja en canvas por animaciones.js. Es la
   traducción literal de los nodos conectados del logotipo.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(88svh, 820px);
  padding-block: var(--esp-16) var(--esp-20);
  overflow: hidden;
  isolation: isolate;
}

.hero__lienzo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  opacity: .55;
  pointer-events: none;
}

/* Halo ámbar difuso que ancla la composición sin usar imagen */
.hero::before {
  content: "";
  position: absolute;
  top: -18%;
  right: -8%;
  z-index: -1;
  width: min(760px, 78vw);
  aspect-ratio: 1;
  border-radius: var(--radio-full);
  background: radial-gradient(circle,
              color-mix(in srgb, var(--acento) 14%, transparent) 0%,
              transparent 66%);
  pointer-events: none;
}

/* Degradado inferior que funde el hero con la sección siguiente */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: -1;
  height: 180px;
  background: linear-gradient(180deg, transparent, var(--fondo));
  pointer-events: none;
}

.hero__contenido { max-width: 780px; }

.hero__distintivo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin-bottom: var(--esp-6);
  padding: var(--esp-2) var(--esp-4);
  border: 1px solid color-mix(in srgb, var(--acento) 35%, transparent);
  border-radius: var(--radio-full);
  background-color: color-mix(in srgb, var(--acento) 8%, transparent);
  font-size: var(--txt-xs);
  font-weight: var(--peso-semi);
  letter-spacing: var(--track-amplio);
  color: var(--acento-texto);
}

.hero__distintivo .insignia__punto {
  background-color: var(--exito);
  animation: pulso-estado 2.4s var(--ease-entrada-salida) infinite;
}

.hero__titulo {
  margin-bottom: var(--esp-6);
  text-wrap: balance;
}

/* La palabra clave del titular se acentúa en ámbar */
.hero__titulo em {
  font-style: normal;
  color: var(--acento-texto);
}

.hero__texto {
  max-width: 62ch;
  margin-bottom: var(--esp-8);
  font-size: var(--txt-lg);
  line-height: var(--alto-comodo);
  color: var(--texto-suave);
}

.hero__acciones { margin-bottom: var(--esp-10); }

.hero__respaldo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3) var(--esp-6);
  padding-top: var(--esp-6);
  border-top: 1px solid var(--borde-sutil);
  font-size: var(--txt-xs);
  color: var(--texto-tenue);
}

.hero__respaldo-elemento {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
}

.hero__respaldo-elemento .icono {
  width: 16px;
  height: 16px;
  color: var(--acento-texto);
}


/* --------------------------------------------------------------------------
   06.2 Banda de cifras
   -------------------------------------------------------------------------- */

.cifras {
  display: grid;
  gap: var(--esp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}


/* --------------------------------------------------------------------------
   06.3 Categorías de producto
   Las anclas #cctv, #intrusion, #acceso, #incendios, #blindados y #rastreo
   ya están indexadas y no deben cambiar nunca.
   -------------------------------------------------------------------------- */

.categoria {
  scroll-margin-top: calc(var(--alto-cabecera) + var(--esp-8));
  padding-block: var(--esp-12);
  border-bottom: 1px solid var(--borde-sutil);
}

.categoria:last-of-type { border-bottom: 0; }

/* Oculta por el filtro de pestañas; el atributo hidden lo pone buscador de
   categoría en productos.php y el módulo de filtrado. */
.categoria[hidden] { display: none; }

.categoria__cabecera {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-5);
  margin-bottom: var(--esp-8);
}

.categoria__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radio-lg);
  border: 1px solid color-mix(in srgb, var(--acento) 32%, transparent);
  background-color: color-mix(in srgb, var(--acento) 10%, transparent);
  color: var(--acento-texto);
  flex-shrink: 0;
}

.categoria__icono .icono { width: 30px; height: 30px; }

.categoria__titulo { margin-bottom: var(--esp-2); font-size: var(--txt-3xl); }

.categoria__texto { color: var(--texto-suave); font-size: var(--txt-lg); }

.categoria__cuerpo {
  display: grid;
  gap: var(--esp-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: start;
}

/* Panel destacado — usado por la categoría de rastreo satelital para remitir
   al portal externo de Rastreo GPS. */
.destacado {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  padding: var(--esp-8);
  border: 1px solid color-mix(in srgb, var(--acento) 30%, transparent);
  border-radius: var(--radio-lg);
  background:
    radial-gradient(circle at 100% 0%,
      color-mix(in srgb, var(--acento) 12%, transparent) 0%,
      transparent 55%),
    var(--superficie);
}

.destacado__titulo {
  font-size: var(--txt-2xl);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-apretado);
  color: var(--acento-texto);
}


/* --------------------------------------------------------------------------
   06.4 Servicios
   -------------------------------------------------------------------------- */

.servicio {
  scroll-margin-top: calc(var(--alto-cabecera) + var(--esp-8));
  display: grid;
  gap: var(--esp-8);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  padding-block: var(--esp-12);
  border-bottom: 1px solid var(--borde-sutil);
}

.servicio:last-of-type { border-bottom: 0; }

/* Alterna el lado de la ilustración en las posiciones pares */
.servicio:nth-child(even) .servicio__visual { order: -1; }

.servicio__numero {
  display: block;
  font-size: var(--txt-sm);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-etiqueta);
  color: var(--acento-texto);
  margin-bottom: var(--esp-3);
  font-variant-numeric: tabular-nums;
}

.servicio__titulo { margin-bottom: var(--esp-4); font-size: var(--txt-3xl); }

.servicio__texto {
  color: var(--texto-suave);
  font-size: var(--txt-lg);
  margin-bottom: var(--esp-6);
}

.servicio__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: var(--esp-8);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background:
    radial-gradient(circle at 50% 30%,
      color-mix(in srgb, var(--marca) 22%, transparent) 0%,
      transparent 62%),
    var(--superficie);
}

.servicio__visual svg { width: 100%; height: auto; max-width: 380px; }


/* --------------------------------------------------------------------------
   06.5 Bloques de aliados y clientes
   -------------------------------------------------------------------------- */

.grupo-marcas { margin-bottom: var(--esp-10); }

.grupo-marcas:last-child { margin-bottom: 0; }

.grupo-marcas__titulo {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin-bottom: var(--esp-5);
  font-size: var(--txt-sm);
  font-weight: var(--peso-semi);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--acento-texto);
}

.grupo-marcas__titulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--borde-sutil);
}

.lista-marcas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.lista-marcas__elemento {
  padding: var(--esp-2) var(--esp-4);
  border: 1px solid var(--borde);
  border-radius: var(--radio-full);
  background-color: var(--superficie);
  font-size: var(--txt-sm);
  color: var(--texto-suave);
  transition: border-color var(--dur-media) var(--ease-salida),
              color var(--dur-media) var(--ease-salida);
}

.lista-marcas__elemento:hover {
  border-color: color-mix(in srgb, var(--acento) 45%, transparent);
  color: var(--texto);
}


/* --------------------------------------------------------------------------
   06.6 Llamada a la acción final
   Fondo ámbar: la jerarquía se invierte y el botón pasa a azul profundo.
   -------------------------------------------------------------------------- */

.llamada {
  position: relative;
  overflow: hidden;
  padding-block: var(--esp-20);
  background:
    radial-gradient(circle at 15% 20%,
      color-mix(in srgb, var(--marca) 30%, transparent) 0%,
      transparent 55%),
    linear-gradient(135deg, var(--ambar-300), var(--ambar-500));
  color: var(--azul-950);
  text-align: center;
}

.llamada h2,
.llamada p { color: var(--azul-950); }

.llamada p {
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: var(--esp-8);
  font-size: var(--txt-lg);
  opacity: .82;
}

.llamada .grupo-acciones { justify-content: center; }

/* Variante sobria sobre superficie oscura */
.llamada--sobria {
  background:
    radial-gradient(circle at 50% 0%,
      color-mix(in srgb, var(--acento) 10%, transparent) 0%,
      transparent 60%),
    var(--fondo-alterno);
  color: var(--texto);
  border-block: 1px solid var(--borde-sutil);
}

.llamada--sobria h2 { color: var(--texto); }
.llamada--sobria p  { color: var(--texto-suave); opacity: 1; }


/* --------------------------------------------------------------------------
   06.7 Página de contacto
   -------------------------------------------------------------------------- */

.contacto-composicion {
  display: grid;
  gap: var(--esp-10);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
}

.panel-contacto {
  display: flex;
  flex-direction: column;
  gap: var(--esp-6);
  padding: var(--esp-8);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background-color: var(--superficie);
  box-shadow: var(--elev-2);
}

.canal {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-4);
  padding-bottom: var(--esp-5);
  border-bottom: 1px solid var(--borde-sutil);
}

.canal:last-child { padding-bottom: 0; border-bottom: 0; }

.canal__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radio-md);
  border: 1px solid var(--borde);
  color: var(--acento-texto);
  flex-shrink: 0;
}

.canal__icono .icono { width: 20px; height: 20px; }

.canal__etiqueta {
  display: block;
  font-size: var(--txt-2xs);
  font-weight: var(--peso-semi);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: 2px;
}

.canal__valor {
  font-size: var(--txt-base);
  font-weight: var(--peso-medio);
  color: var(--texto);
  text-decoration: none;
}

a.canal__valor:hover { color: var(--acento-texto); }

/* Mapa SVG de cobertura */
.mapa-cobertura {
  width: 100%;
  height: auto;
  border-radius: var(--radio-md);
}

.mapa-cobertura__silueta {
  fill: color-mix(in srgb, var(--marca) 40%, transparent);
  stroke: var(--borde-fuerte);
  stroke-width: 1;
}

/* Los nodos heredan el vocabulario gráfico del logotipo: círculos ámbar
   sobre la silueta azul. */
.mapa-cobertura__nodo { fill: var(--acento); }

.mapa-cobertura__nodo--sede {
  fill: var(--acento-alto);
  stroke: var(--marfil);
  stroke-width: 1.5;
}


/* --------------------------------------------------------------------------
   06.8 Página de error y estados vacíos
   -------------------------------------------------------------------------- */

.estado-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-5);
  padding-block: var(--esp-20);
  text-align: center;
}

.estado-vacio__codigo {
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: var(--peso-fuerte);
  line-height: 1;
  letter-spacing: var(--track-apretado);
  color: var(--acento-texto);
  font-variant-numeric: tabular-nums;
}

.estado-vacio__texto {
  max-width: 52ch;
  color: var(--texto-suave);
  font-size: var(--txt-lg);
}


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

.pie {
  padding-block: var(--esp-16) var(--esp-8);
  border-top: 1px solid var(--borde);
  background-color: var(--fondo-alterno);
}

.pie__superior {
  display: grid;
  gap: var(--esp-10);
  grid-template-columns: minmax(0, 2fr) repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  padding-bottom: var(--esp-10);
  border-bottom: 1px solid var(--borde-sutil);
}

.pie__identidad { max-width: 40ch; }

.pie__lema {
  margin-top: var(--esp-4);
  font-size: var(--txt-sm);
  color: var(--texto-suave);
}

.pie__titulo {
  margin-bottom: var(--esp-4);
  font-size: var(--txt-xs);
  font-weight: var(--peso-semi);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--texto);
}

.pie__lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pie__enlace {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--txt-sm);
  color: var(--texto-suave);
  text-decoration: none;
  transition: color var(--dur-rapida) var(--ease-salida);
}

.pie__enlace:hover { color: var(--acento-texto); }

.pie__redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-top: var(--esp-6);
}

.pie__red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  color: var(--texto-suave);
  transition: color var(--dur-media) var(--ease-salida),
              border-color var(--dur-media) var(--ease-salida),
              background-color var(--dur-media) var(--ease-salida);
}

.pie__red:hover {
  color: var(--acento-texto);
  border-color: color-mix(in srgb, var(--acento) 45%, transparent);
  background-color: var(--superficie-suave);
}

.pie__red .icono { width: 18px; height: 18px; }

.pie__inferior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding-top: var(--esp-6);
  font-size: var(--txt-xs);
  color: var(--texto-tenue);
}

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-4);
}

.pie__legal a { color: var(--texto-tenue); text-decoration: none; }
.pie__legal a:hover { color: var(--texto-suave); }


/* --------------------------------------------------------------------------
   06.10 Botón volver arriba
   -------------------------------------------------------------------------- */

.volver-arriba {
  position: fixed;
  right: var(--esp-5);
  bottom: var(--esp-5);
  z-index: var(--z-adherente);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--toque-min);
  min-height: var(--toque-min);
  border: 1px solid var(--borde);
  border-radius: var(--radio-full);
  background-color: var(--velo-solido);
  color: var(--texto-suave);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur-media) var(--ease-salida),
              transform var(--dur-media) var(--ease-salida),
              visibility 0s linear var(--dur-media),
              color var(--dur-media) var(--ease-salida),
              border-color var(--dur-media) var(--ease-salida);
}

.volver-arriba[data-visible="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.volver-arriba:hover {
  color: var(--acento-texto);
  border-color: var(--acento);
}


/* ==========================================================================
   07. UTILIDADES
   ========================================================================== */

/* Solo para lectores de pantalla — el patrón estándar accesible */
.solo-lector {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Visible al recibir el foco (enlaces de salto) */
.solo-lector--enfocable:focus,
.solo-lector--enfocable:focus-visible {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
}

.oculto { display: none !important; }

.texto-centrado  { text-align: center !important; }
.texto-derecha   { text-align: right !important; }
.texto-acento    { color: var(--acento-texto) !important; }
.texto-suave     { color: var(--texto-suave) !important; }
.texto-tenue     { color: var(--texto-tenue) !important; }

.medida-corta { max-width: var(--medida-corta) !important; }
.sin-medida   { max-width: none !important; }

.mt-0  { margin-top: 0 !important; }
.mt-4  { margin-top: var(--esp-4) !important; }
.mt-6  { margin-top: var(--esp-6) !important; }
.mt-8  { margin-top: var(--esp-8) !important; }
.mt-12 { margin-top: var(--esp-12) !important; }

.mb-0  { margin-bottom: 0 !important; }
.mb-4  { margin-bottom: var(--esp-4) !important; }
.mb-6  { margin-bottom: var(--esp-6) !important; }
.mb-8  { margin-bottom: var(--esp-8) !important; }
.mb-12 { margin-bottom: var(--esp-12) !important; }

.centrado-bloque { margin-inline: auto !important; }

.sin-desbordamiento { overflow: hidden !important; }


/* ==========================================================================
   08. RESPONSIVE
   Mobile-first: la base cubre 360px. Los bloques siguientes solo añaden
   comportamiento a partir de cada umbral, o corrigen hacia abajo cuando la
   composición de escritorio es la que necesita descomponerse.
   ========================================================================== */

/* ----- Hasta 1024px — se colapsa la navegación de escritorio -------------- */
@media (max-width: 1024px) {
  .navegacion { display: none; }
  .boton-menu { display: inline-flex; }

  .buscador__campo { width: 150px; }
  .buscador__campo:focus-within { width: 210px; }

  .servicio {
    grid-template-columns: 1fr;
    gap: var(--esp-6);
  }

  /* La ilustración vuelve al orden natural para no romper la lectura */
  .servicio:nth-child(even) .servicio__visual { order: 0; }

  .contacto-composicion { grid-template-columns: 1fr; }

  .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: span 12; }
}

/* ----- Hasta 768px ------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --alto-cabecera: var(--alto-cabecera-sm);
  }

  .cabecera__interior { min-height: var(--alto-cabecera-sm); }

  /* El buscador de la cabecera se traslada al menú móvil */
  .cabecera__acciones .buscador { display: none; }
  .cabecera__separador { display: none; }
  .selector-idioma { display: none; }

  .menu-movil .buscador { display: block; width: 100%; }
  .menu-movil .buscador__campo,
  .menu-movil .buscador__campo:focus-within { width: 100%; }
  .menu-movil .buscador__resultados { width: 100%; }
  .menu-movil .selector-idioma { display: inline-flex; }

  .logotipo__lema { display: none; }
  .logotipo__marca { height: 32px; }

  .hero {
    min-height: auto;
    padding-block: var(--esp-12) var(--esp-16);
  }

  .hero__lienzo { opacity: .35; }

  .categoria__cabecera {
    flex-direction: column;
    gap: var(--esp-4);
  }

  .categoria__icono { width: 52px; height: 52px; }
  .categoria__icono .icono { width: 26px; height: 26px; }

  .panel-contacto { padding: var(--esp-6); }

  .pie__superior { grid-template-columns: 1fr; gap: var(--esp-8); }

  .pie__inferior {
    flex-direction: column;
    align-items: flex-start;
  }

  .marquesina__pista { gap: var(--esp-8); }

  .volver-arriba {
    right: var(--esp-4);
    bottom: var(--esp-4);
  }

  .notificaciones {
    right: var(--esp-3);
    left: var(--esp-3);
    bottom: var(--esp-3);
    width: auto;
  }
}

/* ----- Hasta 480px ------------------------------------------------------- */
@media (max-width: 480px) {
  .grupo-acciones { width: 100%; }

  /* Los botones principales pasan a ancho completo para el pulgar */
  .grupo-acciones > .boton { flex: 1 1 100%; }

  .hero__respaldo { gap: var(--esp-3); flex-direction: column; align-items: flex-start; }

  .tarjeta { padding: var(--esp-5); }
  .tarjeta--holgada { padding: var(--esp-6); }

  .destacado-marca { padding: var(--esp-6); }

  .servicio__visual { padding: var(--esp-5); min-height: 180px; }

  .menu-movil__enlace { font-size: var(--txt-xl); min-height: 52px; }

  .linea-tiempo { padding-left: var(--esp-6); }
  .linea-tiempo__hito::before { left: calc(var(--esp-6) * -1 + 1px); }

  .carrusel__controles { gap: var(--esp-3); }
}

/* ----- Desde 1280px ------------------------------------------------------ */
@media (min-width: 1280px) {
  .hero__contenido { max-width: 840px; }

  .encabezado-seccion { margin-bottom: var(--esp-14); }
}

/* ----- Desde 1440px — se ensancha la medida sin perder legibilidad -------- */
@media (min-width: 1440px) {
  :root {
    --relleno-lateral: 3rem;
  }

  .reticula--holgada { gap: var(--esp-10); }
}

/* ----- Orientación apaisada en móvil -------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-block: var(--esp-10);
  }

  .menu-movil { padding-block: var(--esp-4); }
  .menu-movil__enlace { min-height: 44px; font-size: var(--txt-lg); }
}

/* ----- Dispositivos sin puntero fino --------------------------------------
   En pantallas táctiles los efectos de hover no se disparan de forma fiable,
   así que los estados que dependen de él se dan por aplicados.
   ------------------------------------------------------------------------ */
@media (hover: none) {
  .boton:hover { transform: none; }

  .tarjeta--interactiva:hover { transform: none; }

  .navegacion__enlace::after { display: none; }

  .marquesina:hover .marquesina__pista { animation-play-state: running; }
}

/* ----- Preferencia de contraste elevado ----------------------------------- */
@media (prefers-contrast: more) {
  :root {
    --texto-suave: var(--neutro-200);
    --texto-tenue: var(--neutro-400);
    --borde: var(--neutro-600);
    --borde-sutil: var(--neutro-800);
  }

  .tarjeta,
  .campo__control,
  .boton--secundario { border-width: 2px; }

  :focus-visible { outline-width: 3px; }
}

/* ----- Modo de contraste forzado de Windows -------------------------------
   Se restauran bordes en elementos que solo se distinguían por color de
   fondo, ya que el sistema descarta background-color.
   ------------------------------------------------------------------------ */
@media (forced-colors: active) {
  .boton,
  .tarjeta,
  .campo__control,
  .insignia,
  .pestana { border: 1px solid ButtonBorder; }

  .boton--primario { forced-color-adjust: none; }

  .opcion__marca::after,
  .casilla__marca::after { forced-color-adjust: none; }

  .navegacion__enlace[aria-current="page"]::after,
  .pestana[aria-selected="true"] { border-bottom: 2px solid Highlight; }

  :focus-visible { outline: 2px solid Highlight; }
}


/* ==========================================================================
   09. IMPRESIÓN
   ========================================================================== */

@media print {
  :root {
    --fondo: #FFFFFF;
    --superficie: #FFFFFF;
    --texto: #000000;
    --texto-suave: #333333;
    --texto-tenue: #555555;
    --borde: #CCCCCC;
    --borde-sutil: #E5E5E5;
  }

  body {
    background: #FFFFFF;
    color: #000000;
    font-size: 11pt;
    line-height: 1.45;
  }

  /* Elementos sin sentido en papel */
  .cabecera,
  .menu-movil,
  .boton-menu,
  .buscador,
  .conmutador-tema,
  .selector-idioma,
  .volver-arriba,
  .notificaciones,
  .carrusel__controles,
  .marquesina__control,
  .hero__lienzo,
  .llamada,
  .salto-contenido,
  .pie__redes { display: none !important; }

  .seccion,
  .categoria,
  .servicio { padding-block: 1rem; break-inside: avoid; }

  .hero { min-height: auto; padding-block: 1rem; }
  .hero::before,
  .hero::after { display: none; }

  .tarjeta,
  .panel-contacto,
  .servicio__visual {
    border: 1px solid #CCCCCC;
    box-shadow: none;
    break-inside: avoid;
    background: #FFFFFF;
  }

  h1, h2, h3, h4 { break-after: avoid; }

  /* La URL de destino se imprime junto al texto del enlace */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555555;
    word-break: break-all;
  }

  a[href^="#"]::after,
  a[href^="mailto"]::after,
  a[href^="tel"]::after { content: ""; }

  .seccion--diferida { content-visibility: visible; }
}