/* ============================================================
   VoltLlano — Sitio v8 (2026-07-26)
   Capa de overrides sobre tokens/base/components/pages del v2.
   Objetivo: replicar el look v2 con paleta unificada, alternancia
   de fondos y bloques narrativos (hero+overlay navy 70-80%, sección
   clara con degradado radial de marca, franja navy con textura sutil,
   banda de imagen full-bleed, CTA navy). Sin build step.
   ============================================================ */

/* --- Header sobrescrito: hacerlo permanente sobre todas las páginas.
       Netlify v2 tenía el header “absoluto sobre el hero” solo con
       la clase site-header--overlay. Aquí lo hacemos ligero + sticky. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid rgba(18,58,99,0.08);
}
.site-header--overlay {
  position: absolute;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 0;
}

/* --- Section variants: alternancia de fondos SIN dos blancos seguidos. */

/* Clara con radial de marca (verde 6% + azul 8% desde esquinas). */
.section--radial-brand {
  background:
    radial-gradient(circle at top left,   rgba(57,168,69,0.06)  0%, transparent 34%),
    radial-gradient(circle at bottom right, rgba(18,58,99,0.10) 0%, transparent 40%),
    #ffffff;
}

/* Navy sólido con textura SVG (grid al 4%). */
.section--navy-textured {
  position: relative;
  isolation: isolate;
  color: #ffffff;
  background: linear-gradient(180deg, var(--color-fondo-marca) 0%, var(--color-fondo-marca) 100%);
}
.section--navy-textured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.04;
  background-image:
    linear-gradient(rgba(255,255,255,0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.6) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 40%, transparent 100%);
}
.section--navy-textured h1,
.section--navy-textured h2,
.section--navy-textured h3,
.section--navy-textured p,
.section--navy-textured li {
  color: #ffffff;
}
.section--navy-textured .section-head p,
.section--navy-textured p.text-muted {
  color: rgba(255,255,255,0.78);
}
.section--navy-textured .why-volt {
  color: var(--color-text);
}
.section--navy-textured .why-volt__panel h3 {
  color: var(--color-fondo-marca);
}
.section--navy-textured .why-volt__panel p {
  color: var(--color-text-muted);
}
.section--navy-textured .why-volt__list li {
  color: var(--color-text);
}
.section--navy-textured .why-volt__index,
.section--navy-textured .why-volt__list li::before {
  color: var(--color-verde-l);
}
.section--navy-textured .button--secondary {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border-color: rgba(255,255,255,0.28);
}

/* Franja de imagen full-bleed con overlay navy 72%. */
.section--image-band {
  position: relative;
  isolation: isolate;
  color: #ffffff;
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  background-color: var(--color-fondo-marca);
  background-size: cover;
  background-position: center;
}
.section--image-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(14,47,82,0.78) 0%, rgba(18,58,99,0.72) 100%);
}
.section--image-band h1,
.section--image-band h2,
.section--image-band h3,
.section--image-band p {
  color: #ffffff;
}

/* CTA navy con degradado sutil hacia verde. */
.section--cta-dark {
  color: #ffffff;
  background: linear-gradient(120deg, var(--color-fondo-marca) 0%, var(--color-fondo-marca) 55%, var(--color-verde-lineas) 100%);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}
.section--cta-dark h2 {
  margin: 0 0 1rem;
  color: #ffffff;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.1;
}
.section--cta-dark p {
  margin: 0 auto 1.75rem;
  max-width: 40rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.7;
}
.section--cta-dark .button-group {
  justify-content: center;
}

/* --- Hero slider: overlay neutro para legibilidad sin teñir las fotos. */
.hero-slider__overlay {
  background:
    linear-gradient(90deg, rgba(5, 8, 12, 0.62) 0%, rgba(5, 8, 12, 0.34) 46%, rgba(5, 8, 12, 0.12) 100%),
    linear-gradient(180deg, rgba(5, 8, 12, 0.16) 0%, rgba(5, 8, 12, 0.34) 100%) !important;
}

/* --- Página interna: hero con imagen + overlay (usado en /servicios/, /nosotros/). */
.page-hero--image {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #ffffff;
  padding: clamp(5rem, 10vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
  background-color: #transparent;
  background-size: cover;
  background-position: center;
}
.page-hero--image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(14,47,82,0.76) 0%, rgba(18,58,99,0.82) 100%);
}
.page-hero--image h1 { color: #ffffff; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.1; }
.page-hero--image p.lead,
.page-hero--image p { color: rgba(255,255,255,0.86); }
.page-hero--image .eyebrow {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.2);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --- Home: banda inferior con SEGUNDO rotador (crossfade de servicios). */
.service-band {
  position: relative;
  overflow: hidden;
  min-height: clamp(18rem, 32vw, 26rem);
  isolation: isolate;
  color: #ffffff;
  background: var(--color-fondo-marca);
}
.service-band__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.service-band__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 900ms ease-in-out;
}
.service-band__slide.is-active { opacity: 1; }
.service-band__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-band__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(14,47,82,0.70) 0%, rgba(18,58,99,0.80) 100%);
}
.service-band__content {
  position: relative;
  z-index: 2;
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  text-align: center;
}
.service-band__content h2 {
  margin: 0 0 0.5rem;
  color: #ffffff;
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  line-height: 1.15;
}
.service-band__content p {
  margin: 0 auto 1.5rem;
  max-width: 38rem;
  color: rgba(255,255,255,0.86);
  line-height: 1.7;
}
.service-band__dots {
  display: inline-flex;
  gap: 0.4rem;
  margin-top: 0.75rem;
}
.service-band__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  border: 0;
  cursor: pointer;
  transition: background 200ms;
}
.service-band__dot.is-active { background: #ffffff; }

/* --- Cotizar simplificado: 3 pasos claros (lenguaje cliente). */
.quote-steps {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  counter-reset: qstep;
}
.quote-steps__item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: start;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid rgba(18,58,99,0.1);
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(18,58,99,0.06);
}
.quote-steps__item::before {
  counter-increment: qstep;
  content: counter(qstep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem; height: 2.3rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-fondo-marca) 0%, var(--color-verde-lineas) 100%);
  color: #ffffff;
  font-weight: 700;
}
.quote-steps__item h3 { margin: 0 0 0.25rem; color: var(--color-fondo-marca); font-size: 1.05rem; }
.quote-steps__item p  { margin: 0; color: var(--color-text-muted); line-height: 1.6; }
@media (min-width: 48rem) {
  .quote-steps { grid-template-columns: repeat(3, 1fr); }
}

/* --- Trabaja: bloque de checkboxes (habilidades). */
.skills-group {
  display: grid;
  gap: 0.65rem;
  padding: 0.5rem 0 0.1rem;
}
.skills-group__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 0.85rem;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.94);
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
  transition: background 180ms, border-color 180ms;
}
.skills-group__item:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.30); }
.skills-group__item input {
  width: 1.05rem; height: 1.05rem; margin: 0.15rem 0 0 0;
  accent-color: var(--color-verde-l); flex: 0 0 auto;
}
.skills-note {
  margin: 0.6rem 0 0;
  color: rgba(255,255,255,0.72);
  font-size: 0.92rem;
  line-height: 1.55;
}
@media (min-width: 48rem) {
  .skills-group { grid-template-columns: repeat(2, 1fr); }
}

/* --- Volty floating stack (portado del sitio anterior, estilo v8). */
.floating-social {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 45;
  display: grid;
  gap: 0.55rem;
  padding: 0.6rem 0.45rem;
  border-radius: 1rem 0 0 1rem;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(18,58,99,0.18);
  transform: translateY(-50%);
}
.floating-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  color: #ffffff;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.floating-social__link:hover,
.floating-social__link:focus-visible {
  transform: translateX(-2px) scale(1.04);
  box-shadow: 0 10px 20px rgba(18,58,99,0.18);
}
.floating-social__link svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}
.floating-social__link--instagram {
  background: radial-gradient(circle at 30% 110%, #feda75 0 18%, #fa7e1e 34%, #d62976 58%, #962fbf 78%, #4f5bd5 100%);
}
.floating-social__link--facebook {
  background: #1877f2;
}
.floating-social__link--whatsapp {
  background: #25d366;
  color: var(--color-fondo-marca);
}

.vl-floating-stack {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  pointer-events: none;
}
#volty-mascot { position: relative; pointer-events: auto; }
/* Volty v3 (tarea 61): el rayo con casco sale de una base circular clara con brillo
   eléctrico. La mascota (volty.svg) no lleva círculo propio. */
.vl-volty-btn {
  position: relative;
  display: block;
  width: 66px; height: 66px;
  color: var(--color-blanco);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.vl-volty-base {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-blanco);
  border: 3px solid var(--color-azul-rayo);
  box-shadow: 0 0 0 3px rgba(81, 198, 101, 0.55), 0 0 22px 4px rgba(10, 121, 200, 0.35),
              inset 0 -10px 18px rgba(10, 121, 200, 0.14), 0 14px 28px rgba(38, 43, 49, 0.22);
  transition: box-shadow 200ms, transform 200ms;
}
.vl-volty-btn:hover .vl-volty-base,
.vl-volty-btn:focus-visible .vl-volty-base {
  transform: scale(1.04);
  box-shadow: 0 0 0 4px rgba(81, 198, 101, 0.7), 0 0 30px 8px rgba(10, 121, 200, 0.45),
              inset 0 -10px 18px rgba(10, 121, 200, 0.18), 0 14px 28px rgba(38, 43, 49, 0.22);
}
.vl-volty-btn:focus-visible { outline: 3px solid var(--color-azul-rayo); outline-offset: 4px; border-radius: 50%; }
.vl-volty-svg-host {
  position: absolute;
  left: -16px;
  bottom: 4px;
  width: 98px;
  height: 119px;
  pointer-events: none;
}
.vl-volty-svg-host > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vl-volty-svg .volty-cuerpo { animation: voltyFlotar 3.2s ease-in-out infinite; }
@keyframes voltyFlotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.vl-volty-svg .volty-ceja {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 350ms cubic-bezier(.3, 1.6, .5, 1);
}
.vl-volty-svg .volty-brazo { transform-origin: 0 0; transition: transform 400ms; }
.vl-volty-svg[data-estado="saludo"] .volty-brazo { animation: voltyAgitar 0.5s ease-in-out infinite alternate; }
.vl-volty-svg[data-estado="pensando"] .volty-brazo { transform: rotate(-58deg); }
@keyframes voltyAgitar {
  from { transform: rotate(-22deg); }
  to   { transform: rotate(18deg); }
}
.vl-volty-svg .volty-chispa {
  stroke: var(--color-dorado-rayo-claro);
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px var(--color-amarillo-rayo));
}
.vl-volty-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(81, 198, 101, 0.55);
  animation: voltyPulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes voltyPulse {
  0%   { transform: scale(1);   opacity: 0.75; }
  100% { transform: scale(1.5); opacity: 0;    }
}
.vl-volty-tooltip {
  position: absolute;
  right: 84px;
  bottom: 56px;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: max-content;
  max-width: 16rem;
  padding: 0.6rem 0.55rem 0.6rem 0.8rem;
  /* Tarea 69: borde sutil y sombra suave corporativa (fondo de marca). */
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-blanco);
  color: var(--color-fondo-marca);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 8px 24px rgba(38, 43, 49, 0.16), 0 2px 6px rgba(38, 43, 49, 0.08);
  opacity: 0;
  transform: translateY(6px) scale(0.94);
  transform-origin: bottom right;
  transition: opacity 220ms, transform 300ms cubic-bezier(.3, 1.6, .5, 1);
  pointer-events: none;
}
.vl-volty-tooltip::after {
  content: "";
  position: absolute;
  right: -9px;
  bottom: 14px;
  width: 14px;
  height: 14px;
  background: var(--color-blanco);
  border-top: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  transform: rotate(45deg);
}
/* Toda la burbuja es un botón que abre el chat; la «×» va aparte. */
.vl-volty-tooltip-abrir {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.vl-volty-tooltip-abrir:focus-visible { outline: 2px solid var(--color-azul-rayo); outline-offset: 3px; border-radius: 6px; }
.vl-volty-tooltip-msg { min-height: 2.4em; transition: opacity 320ms ease; }
.vl-volty-tooltip-msg.is-fundido { opacity: 0; }
.vl-volty-estado {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-verde-lineas);
}
.vl-volty-estado-punto {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-verde-l);
}
.vl-volty-estado-punto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-verde-l);
  animation: voltyEnLinea 1.8s ease-out infinite;
}
@keyframes voltyEnLinea {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0;   }
}
.vl-volty-tooltip.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.vl-volty-tooltip-close {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.2rem -0.1rem 0 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.vl-volty-tooltip-close:hover,
.vl-volty-tooltip-close:focus-visible { background: var(--color-gris-descriptor); color: var(--color-fondo-marca); }
@media (prefers-reduced-motion: reduce) {
  .vl-volty-svg .volty-cuerpo,
  .vl-volty-svg[data-estado="saludo"] .volty-brazo,
  .vl-volty-pulse,
  .vl-volty-estado-punto::after { animation: none; }
  .vl-volty-tooltip-msg { transition: none; }
}
@media (max-width: 30rem) {
  .floating-social {
    right: 0;
    gap: 0.45rem;
    padding: 0.5rem 0.35rem;
  }
  .floating-social__link {
    width: 2rem;
    height: 2rem;
  }
  .floating-social__link svg {
    width: 1.05rem;
    height: 1.05rem;
  }
  /* Las medidas de Volty en celular viven en el bloque móvil de abajo (tarea 75 · B). */
}

/* Tarea 63 (24-oct, Andrés): Volty se ve mejor sobre fondos oscuros (halo
   claro + sombra) y en celular es más grande (85 px) y queda a 16 px de las
   esquinas. Las proporciones del rayo y del saludo siguen las del botón de
   escritorio (66 px). Colores de la paleta v2: blanco y fondo de marca. */
.vl-volty-btn {
  filter: drop-shadow(0 4px 12px rgba(254, 254, 254, 0.25)) drop-shadow(0 6px 16px rgba(38, 43, 49, 0.4));
}
@media (max-width: 48rem) {
  /* Un solo flotante en celular: Volty. El riel social vive en el pie
     (auditoría 2026-11-02, A08; tarea 75 · B). */
  .floating-social { display: none; }
  .vl-floating-stack { right: 16px; bottom: 16px; }
  .vl-volty-btn { width: 64px; height: 64px; }
  .vl-volty-svg-host { left: -16px; bottom: 4px; width: 95px; height: 115px; }
  .vl-volty-tooltip { right: 78px; bottom: 56px; max-width: 220px; font-size: 0.8125rem; }
  /* Que la mascota nunca tape el último bloque de contenido. */
  main > section:last-of-type { padding-bottom: calc(var(--space-8) + 72px); }
  /* Los títulos de las tarjetas dejan libre el carril de la mascota (64 px + margen). */
  .sector-card h3 { margin-right: 4.75rem; }
}

/* --- Chip para nav activo. */
.site-nav a[aria-current="page"] {
  color: var(--color-fondo-marca);
  font-weight: 700;
  position: relative;
}
.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.35rem;
  height: 2px;
  background: var(--color-verde-l);
  border-radius: 2px;
}

/* --- Hero content sobre imagen: padding compacto para un hero más bajo. */
.hero-slider {
  min-height: 58svh !important;
}
.hero-slider__shell {
  min-height: 58svh !important;
  padding: calc(var(--header-height) + 1.25rem) 0 3rem;
}

/* --- H3 (2026-07-27): mensaje de error/éxito legible dentro de las
       tarjetas oscuras de formulario. pages.css declara
       `.contact-card--career .form-message { color: rgba(255,255,255,.86) }`
       y `.contact-card--pqrs .form-message …` — como se carga después
       de components.css con la misma especificidad, ganaba y volvía
       ilegible el error rojo sobre el fondo rojo pálido. Aquí subimos
       especificidad y añadimos borde para separar del fondo navy. */
.contact-card--career .form-message.is-error,
.contact-card--pqrs   .form-message.is-error {
  background: var(--color-error-soft);
  color: var(--color-error);
  border: 1px solid var(--color-error-border);
}
.contact-card--career .form-message.is-success,
.contact-card--pqrs   .form-message.is-success {
  background: var(--color-secondary-soft);
  color: var(--color-verde-texto);
  border: 1px solid var(--color-verde-l);
}

/* Tarea 64 · A: cotizador de listas de materiales (assets/js/cotizador-materiales.js).
   Solo tokens de la paleta 2026; Plus Jakarta Sans; sin degradados. */
.vl-cot__abrir {
  display: block; width: calc(100% - 1.5rem); margin: 0.5rem 0.75rem 0; min-height: 44px;
  border: 1px dashed var(--color-azul-rayo); border-radius: var(--radius-sm, 0.75rem);
  background: var(--color-bg-alt); color: var(--color-primary); font: 700 0.85rem var(--font-sans); cursor: pointer;
}
.vl-cot__abrir:hover, .vl-cot__abrir:focus-visible { background: var(--color-primary-soft); }
.vl-cot { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(38, 43, 49, 0.55); font-family: var(--font-sans); }
.vl-cot[hidden] { display: none; }
body.vl-cot-abierto { overflow: hidden; }
.vl-cot__caja { width: min(980px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column;
  background: var(--color-surface); border-radius: 16px; box-shadow: 0 20px 48px rgba(38, 43, 49, 0.35); overflow: hidden; }
.vl-cot__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px;
  background: var(--color-primary); color: var(--color-on-primary); }
.vl-cot__cab h2 { margin: 0; font-size: 1.05rem; font-weight: 700; color: inherit; }
.vl-cot__cerrar { background: none; border: 0; color: inherit; font-size: 1.2rem; min-width: 44px; min-height: 44px; cursor: pointer; }
.vl-cot__cuerpo { padding: 16px 18px 20px; overflow-y: auto; color: var(--color-text); }
.vl-cot__form { display: grid; gap: 10px; }
.vl-cot__form label { font-size: 0.85rem; font-weight: 600; color: var(--color-primary); }
.vl-cot__form textarea, .vl-cot__form input:not([type=checkbox]), .vl-cot__dudas select, .vl-cot__tabla input {
  width: 100%; box-sizing: border-box; font: 400 0.9rem var(--font-sans); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: 10px; padding: 8px 10px; background: var(--color-surface); }
.vl-cot__form textarea { resize: vertical; min-height: 120px; }
.vl-cot__archivos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vl-cot__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vl-cot__chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  background: var(--color-bg-alt); font-size: 0.8rem; }
.vl-cot__chip button { border: 0; background: none; cursor: pointer; color: var(--color-text-muted); }
.vl-cot__datos summary { cursor: pointer; font-weight: 600; color: var(--color-primary); font-size: 0.85rem; min-height: 32px; }
.vl-cot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-top: 8px; }
.vl-cot__grid label { display: grid; gap: 4px; font-weight: 400; }
.vl-cot__check { display: flex !important; align-items: center; gap: 8px; font-weight: 400 !important; min-height: 44px; }
.vl-cot__check input { width: 20px; height: 20px; }
.vl-cot__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px;
  padding: 0 16px; border-radius: 999px; font: 700 0.9rem var(--font-sans); cursor: pointer; text-decoration: none; }
.vl-cot__btn--pri { background: var(--color-azul-rayo); color: var(--color-on-primary); border: 1px solid var(--color-azul-rayo); justify-self: start; }
.vl-cot__btn--sec { background: var(--color-surface); color: var(--color-primary); border: 1px solid var(--color-border); }
.vl-cot__btn--wa { background: var(--color-verde-lineas); color: var(--color-on-primary); border: 1px solid var(--color-verde-lineas); }
.vl-cot__btn:disabled { opacity: 0.55; cursor: wait; }
.vl-cot__estado { min-height: 1.2em; margin: 10px 0 0; font-size: 0.85rem; color: var(--color-text-muted); }
.vl-cot__num { margin: 14px 0 8px; font-size: 0.95rem; color: var(--color-primary); }
.vl-cot__dudas { border: 1px solid var(--color-border); border-left: 4px solid var(--color-azul-rayo); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 12px; display: grid; gap: 8px; background: var(--color-bg-alt); }
.vl-cot__dudas p { margin: 0; font-weight: 700; color: var(--color-primary); }
.vl-cot__dudas label { display: grid; gap: 4px; font-size: 0.85rem; }
.vl-cot__tabla { overflow-x: auto; }
.vl-cot__tabla table { width: 100%; border-collapse: collapse; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.vl-cot__tabla th { background: var(--color-primary); color: var(--color-on-primary); text-align: left; padding: 8px; font-weight: 700; }
.vl-cot__tabla td { padding: 8px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.vl-cot__tabla td small { display: block; font-size: 0.75rem; color: var(--color-text-muted); margin-top: 2px; }
.vl-cot__tabla .r { text-align: right; white-space: nowrap; }
.vl-cot__tabla input { width: 80px; padding: 4px 6px; }
.vl-cot__nota--referencia { color: var(--color-azul-v) !important; }
.vl-cot__nota--por_cotizar { font-style: normal; }
.vl-cot__badge { display: inline-block; white-space: nowrap; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.vl-cot__badge--stock { background: var(--color-secondary-soft); color: var(--color-verde-lineas); }
.vl-cot__badge--pedido { background: var(--color-accent-soft); color: var(--color-azul-v); }
.vl-cot__totales { margin: 12px 0 0 auto; max-width: 340px; display: grid; gap: 4px; font-size: 0.9rem; }
.vl-cot__totales div { display: flex; justify-content: space-between; gap: 12px; }
.vl-cot__totales p { margin: 4px 0 0; font-size: 0.8rem; color: var(--color-text-muted); }
.vl-cot__total { border-top: 2px solid var(--color-primary); padding-top: 6px; font-size: 1.05rem; color: var(--color-primary); }
.vl-cot__cross { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--color-secondary-soft);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.vl-cot__cross p { margin: 0; font-size: 0.85rem; }
.vl-cot__pie { font-size: 0.78rem; color: var(--color-text-muted); margin: 12px 0; }
.vl-cot__revision { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--color-accent-soft); color: var(--color-primary); font-size: 0.85rem; font-weight: 600; }
.vl-cot__acciones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (max-width: 40rem) {
  .vl-cot { padding: 0; }
  .vl-cot__caja { max-height: 100vh; height: 100%; border-radius: 0; }
  .vl-cot__tabla thead { display: none; }
  .vl-cot__tabla tr { display: block; border-bottom: 1px solid var(--color-border); padding: 6px 0; }
  .vl-cot__tabla td { display: flex; justify-content: space-between; gap: 10px; border: 0; padding: 4px 0; }
  .vl-cot__tabla td::before { content: attr(data-l); font-weight: 700; color: var(--color-primary); }
  .vl-cot__tabla td:first-child, .vl-cot__tabla td[data-l="Disponibilidad"] { display: block; }
  .vl-cot__tabla td[data-l="Disponibilidad"]::before { display: block; margin-bottom: 4px; }
  .vl-cot__tabla td:first-child::before { content: none; }
  .vl-cot__acciones .vl-cot__btn { flex: 1 1 100%; }
}

/* ── Tarea 66 · A: empresas, proveedores y documentos en el chat ─────── */
.vl-emp__menu { display: grid; gap: 10px; }
.vl-emp__opcion { display: grid; gap: 4px; text-align: left; min-height: 44px; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--color-border); border-left: 4px solid var(--color-azul-rayo); border-radius: 12px;
  background: var(--color-surface); color: var(--color-text); font: 400 0.85rem var(--font-sans); }
.vl-emp__opcion strong { color: var(--color-primary); font-size: 0.95rem; }
.vl-emp__opcion:hover, .vl-emp__opcion:focus-visible { background: var(--color-bg-alt); }
.vl-emp__sub { margin: 16px 0 6px; font-size: 0.95rem; color: var(--color-primary); }
.vl-emp__lista { margin: 0; padding-left: 1.1rem; display: grid; gap: 6px; font-size: 0.9rem; }
.vl-emp__ficha { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 12px 0 0; font-size: 0.9rem; }
.vl-emp__ficha dt { font-weight: 700; color: var(--color-primary); }
.vl-emp__ficha dd { margin: 0; }
.vl-emp__aviso { margin: 12px 0; padding: 10px 12px; border-radius: 12px; font-size: 0.85rem;
  background: var(--color-bg-alt); border-left: 4px solid var(--color-verde-lineas); }
.vl-emp select { width: 100%; box-sizing: border-box; font: 400 0.9rem var(--font-sans); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: 10px; padding: 8px 10px; background: var(--color-surface); min-height: 44px; }
.vl-emp__docs { border: 1px solid var(--color-border); border-radius: 12px; padding: 6px 12px; margin: 0; }
.vl-emp__docs legend { font-size: 0.85rem; font-weight: 600; color: var(--color-primary); padding: 0 4px; }
.vl-emp__error { color: var(--color-primary); font-weight: 700; font-size: 0.8rem; min-height: 0; }
.vl-emp__error:empty { display: none; }
.vl-emp__volver { margin-bottom: 8px; }
.vl-emp__enlace { background: none; border: 0; padding: 0; color: var(--color-azul-rayo); font: inherit;
  text-decoration: underline; cursor: pointer; }
@media (max-width: 40rem) { .vl-emp__ficha { grid-template-columns: 1fr; } }

/* ── SEO/GEO (5-nov-2026): cápsula de respuesta, tablas, cobertura regional,
   normativa, páginas pilares y el submenú en dos columnas ─────────────── */
.geo-answer-capsule { max-width: 46rem; }
.hero-slider__subtitle.geo-answer-capsule { max-width: 44rem; }
.section-head .geo-respuesta,
.svc-hub-intro .geo-respuesta { max-width: 52rem; margin: var(--space-3) 0 0; }
.section-head--services-center .geo-respuesta { margin-inline: auto; }

.geo-tabla { margin: var(--space-6) 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.geo-tabla table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.92rem; }
.geo-tabla caption { padding: 0.85rem 1rem; text-align: left; font-weight: 700; color: var(--color-primary); }
.geo-tabla th, .geo-tabla td { padding: 0.75rem 1rem; text-align: left; vertical-align: top;
  border-top: 1px solid var(--color-border); color: var(--color-text); line-height: 1.55; }
.geo-tabla thead th { background: var(--color-bg-alt); color: var(--color-primary); font-weight: 700; }
.geo-tabla tbody th { color: var(--color-primary); font-weight: 700; }

.cobertura-regional { margin: var(--space-7) 0 0; padding: var(--space-6); border-radius: var(--radius-md);
  background: var(--color-surface); border: 1px solid var(--color-border); }
.cobertura-regional__titulo { margin: 0 0 var(--space-3); color: var(--color-primary);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.2; }
.cobertura-regional p { margin: 0; color: var(--color-text-muted); line-height: 1.7; }
.cobertura-regional__lista { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0;
  padding: 0; list-style: none; }
.cobertura-regional__lista li { padding: 0.35rem 0.8rem; border-radius: var(--radius-pill);
  background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; font-size: 0.9rem; }
.cobertura-regional__nota { font-weight: 600; }

.normativa-lista { display: grid; gap: var(--space-2); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.normativa-lista li { padding: 0.75rem 1rem; border-left: 4px solid var(--color-verde-lineas);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--color-surface);
  color: var(--color-text); line-height: 1.55; }
.normativa-lista strong { color: var(--color-primary); }

.svc-pilares { margin: var(--space-6) 0 0; }
.svc-pilares__titulo { margin: 0 0 var(--space-3); color: var(--color-primary); font-size: 1.1rem; }
.svc-pilares ul { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.svc-pilares a { display: inline-flex; min-height: 44px; align-items: center; padding: 0.45rem 0.95rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface);
  color: var(--color-primary); font-weight: 600; font-size: 0.92rem; }
.svc-pilares a:hover, .svc-pilares a:focus-visible { border-color: var(--color-action); color: var(--color-action); }

.svc-pilar-grid { display: grid; gap: var(--space-4); margin: var(--space-6) 0 0; }
.svc-pilar-card { display: grid; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-md);
  border: 1px solid var(--color-border); border-top: 4px solid var(--color-azul-rayo);
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); }
.svc-pilar-card h3 { margin: 0; color: var(--color-primary); font-size: 1.1rem; line-height: 1.3; }
.svc-pilar-card p { margin: 0; color: var(--color-text-muted); font-size: 0.93rem; line-height: 1.6; }
.svc-pilar-card__ir { color: var(--color-action); font-weight: 700; font-size: 0.92rem; }
.svc-pilar-card:hover, .svc-pilar-card:focus-visible { border-color: var(--color-action); }
@media (min-width: 48rem) { .svc-pilar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .svc-pilar-grid { grid-template-columns: repeat(3, 1fr); } }

.svc-cta__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.25rem; }
.servicios-principales__pilares { margin: var(--space-4) auto 0; max-width: 52rem; text-align: center;
  color: var(--color-text-muted); line-height: 1.8; }
.servicios-principales__pilares a { color: var(--color-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.svc-intro.svc-intro--solo { grid-template-columns: 1fr; }
.section-head.svc-cta { margin-inline: auto; }
.button[data-abrir-volty] { gap: 0.5rem; }
@media (max-width: 40rem) {
  .geo-tabla table { min-width: 0; }
  .geo-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .geo-tabla tr { display: block; padding: 0.5rem 0; border-top: 1px solid var(--color-border); }
  .geo-tabla th, .geo-tabla td { display: block; padding: 0.25rem 1rem; border-top: 0; }
  .geo-tabla td::before { content: attr(data-label) ": "; color: var(--color-primary); font-weight: 700; }
}

/* ============================================================
   Cabecera oscura, mega-menú y menú del celular (orden maestra UI/UX de
   Andrés, 6-nov-2026, §1). La cabecera de todas las páginas va sobre el
   fondo de marca (token --color-fondo-marca de tokens.css) con desenfoque y borde fino, para
   que el isotipo tricolor y el descriptor del logo se lean nítidos. Las
   páginas sin foto de portada la llevan fija arriba (--fija).
   ============================================================ */
.site-header--overlay {
  background: color-mix(in srgb, var(--color-fondo-marca) 94%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--color-on-primary) 10%, transparent);
}

.site-header--overlay.site-header--fija {
  position: sticky;
  top: 0;
}

/* Botón «Menú» del celular: píldora con ☰ que pasa a ✕ al abrir. */
.nav-toggle,
.site-header--overlay .nav-toggle {
  width: auto;
  height: 2.5rem;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-weight: 600;
  line-height: 1;
}

.nav-toggle__icono {
  position: relative;
  display: inline-block;
  width: 1.1rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: background-color 0.2s ease;
}

.nav-toggle__icono::before,
.nav-toggle__icono::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.2s ease;
}

.nav-toggle__icono::before { top: -6px; }
.nav-toggle__icono::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icono { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icono::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icono::after { transform: translateY(-6px) rotate(-45deg); }

/* Rótulos del mega-menú. */
.site-nav__rotulo {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-nav__lineas,
.site-nav__especiales ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* «Cotizar proyecto» va en la barra de escritorio (header-actions); en el
   celular, dentro del menú, para verlo en la misma pantalla que los enlaces. */
.site-nav .site-nav__cotizar { display: none; }

/* Celular y tableta: solo las 8 líneas, en una rejilla de 2 columnas. Las 5
   especializadas siguen en sus páginas madre y en el pie. */
@media (max-width: 63.99rem) {
  .site-nav .site-nav__cotizar,
  .site-header--overlay .site-nav .site-nav__cotizar {
    display: flex;
    justify-content: center;
    margin-top: var(--space-3);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-pill);
    color: var(--color-on-primary);
  }

  .site-nav .site-nav__cotizar::after { content: none; }

  .site-nav__mega > .site-nav__rotulo,
  .site-nav__especiales,
  .site-nav__desc {
    display: none;
  }

  .site-nav__lineas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-3);
  }

  .site-nav .site-nav__lineas a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.2rem;
    line-height: 1.25;
  }

  .site-nav__icono {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    color: var(--color-verde-l);
  }
}

/* Escritorio: mega-menú de 2 bloques, centrado bajo la cabecera. */
@media (min-width: 64rem) {
  .site-header__inner { position: relative; }
  .site-nav__group { position: static; }

  .site-nav .site-nav__mega,
  .site-header--overlay .site-nav .site-nav__mega {
    top: calc(100% - 0.25rem);
    left: 50%;
    width: min(60rem, calc(100vw - 2rem));
    min-width: 0;
    padding: var(--space-5) var(--space-6);
    transform: translateX(-50%);
    grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--space-6);
  }

  .site-nav__mega::before {
    top: -1.25rem;
    height: 1.25rem;
  }

  .site-nav__group.is-open > .site-nav__mega,
  .site-nav:not([data-dropdown-ready]) .site-nav__group:hover > .site-nav__mega,
  .site-nav:not([data-dropdown-ready]) .site-nav__group:focus-within > .site-nav__mega {
    display: grid;
  }

  .site-nav__mega > .site-nav__rotulo { grid-column: 1; grid-row: 1; }

  .site-nav__lineas {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    gap: var(--space-1) var(--space-3);
  }

  .site-nav .site-nav__lineas a,
  .site-header--overlay .site-nav .site-nav__lineas a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.75rem;
    align-items: start;
    padding: 0.65rem 0.75rem;
    white-space: normal;
  }

  .site-nav__icono {
    grid-row: 1 / span 2;
    margin-top: 0.1rem;
    color: var(--color-action);
  }

  .site-nav__titulo {
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.3;
  }

  .site-nav__desc {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.35;
  }

  .site-nav__lineas a[aria-current="page"] .site-nav__titulo,
  .site-nav__lineas a:hover .site-nav__titulo,
  .site-nav__lineas a:focus-visible .site-nav__titulo {
    color: var(--color-primary);
  }

  .site-nav__especiales {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    padding-left: var(--space-5);
    border-left: 1px solid var(--color-border);
  }

  .site-nav .site-nav__especiales ul a,
  .site-header--overlay .site-nav .site-nav__especiales ul a {
    padding: 0.5rem 0.6rem;
    font-size: 0.9rem;
    white-space: normal;
  }

  .site-nav .site-nav__catalogo,
  .site-header--overlay .site-nav .site-nav__catalogo {
    margin-top: auto;
    padding: 0.7rem 0.6rem 0.2rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-action);
    font-size: 0.92rem;
    font-weight: 700;
  }

  .site-nav .site-nav__catalogo::after { content: none; }

  /* Barra de escritorio alineada: Inicio · Servicios ▾ · Nosotros · Trabaja con nosotros · Contacto. */
  .site-nav { gap: 1.5rem; }
}


/* Carrusel «Por qué elegir VoltLlano» (orden UI/UX §2.B.1): las 8 pestañas
   van a todo el ancho de la tarjeta. En escritorio, 4 × 2 sin huérfanas y
   cada nombre en una línea; en celular, una fila con desplazamiento táctil. */
.why-volt__controls {
  grid-column: 1 / -1;
  padding-top: 0;
}

@media (max-width: 63.99rem) {
  .why-volt__controls {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding-bottom: 0.35rem;
    -webkit-overflow-scrolling: touch;
  }

  .why-volt__button {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }
}

@media (min-width: 64rem) {
  .why-volt__controls {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .why-volt__button {
    text-align: center;
    white-space: nowrap;
  }
}

/* Simetría de rejillas en escritorio (orden UI/UX §2.B.2): las 8 líneas de
   /servicios/ van en 4 × 2 (2 × 4 en pantallas medianas) y las 5 páginas
   especializadas en una sola fila de 5, sin tarjetas sueltas. Las tarjetas
   de una misma fila tienen la misma altura y el botón queda abajo. */
@media (min-width: 75rem) {
  main .svc-hub-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .svc-pilar-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.svc-hub-card,
.svc-pilar-card {
  height: 100%;
}

.svc-pilar-card__ir {
  align-self: end;
}

/* Tarjetas del catálogo: título y texto arriba, «Ver servicio» siempre al
   pie y alineado entre las tarjetas de una misma fila. */
main .svc-hub-card__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

main .svc-hub-card__link {
  margin-top: auto;
  padding-top: var(--space-3);
}

/* Módulos de profundización técnica en las páginas madre (orden UI/UX §2.A):
   las 5 páginas especializadas aparecen dentro de su línea, no como servicios
   sueltos. Tarjetas de la misma altura, con el enlace al pie. */
.svc-modulos { margin: var(--space-6) 0 0; }
.svc-modulos__titulo { margin: 0 0 var(--space-3); color: var(--color-primary); font-size: 1.1rem; }
.svc-modulos__grid { display: grid; gap: var(--space-4); }
.svc-modulo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-azul-rayo);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.svc-modulo:hover, .svc-modulo:focus-visible { border-color: var(--color-action); }
.svc-modulo__titulo { color: var(--color-primary); font-size: 1.05rem; line-height: 1.3; }
.svc-modulo__alcance { color: var(--color-text-muted); font-size: 0.93rem; line-height: 1.6; }
.svc-modulo__ir { margin-top: auto; color: var(--color-action); font-size: 0.92rem; font-weight: 700; }
@media (min-width: 48rem) {
  .svc-modulos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Franja ejecutiva de rigor técnico (orden UI/UX §4.2): el respaldo normativo
   una sola vez por vista, 4 columnas en escritorio y 2 × 2 en celular. */
.franja-rigor {
  padding: var(--space-6) 0;
  background: var(--color-fondo-marca);
  color: var(--color-on-primary);
}
.franja-rigor__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.franja-rigor__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.75rem;
  align-items: start;
}
.franja-rigor__icono {
  grid-row: 1 / span 2;
  color: var(--color-verde-l);
}
.franja-rigor__titulo {
  color: var(--color-on-primary);
  font-size: 0.98rem;
  line-height: 1.3;
}
.franja-rigor__texto {
  color: color-mix(in srgb, var(--color-on-primary) 80%, transparent);
  font-size: 0.88rem;
  line-height: 1.5;
}
@media (min-width: 64rem) {
  .franja-rigor__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Etiquetas de alcance técnico en las tarjetas del catálogo (§4.1): 3 por tarjeta. */
.svc-hub-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}
.svc-hub-card__tags li {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
}

/* ── Subtítulo corto y «En resumen» bajo el título de las fichas (Andrés, 6-nov-2026) ──
   El subtítulo (18–25 palabras) es la lectura rápida; la cápsula de respuesta (45–65 palabras)
   queda debajo, en letra normal, con la etiqueta «En resumen». La etiqueta va en el CSS para
   que la cápsula conserve sus palabras. Lo escribe 11_Web/scripts/subtitulos_web.py. */
.page-hero__subtitulo { margin-bottom: 0.9rem; }
.page-hero__resumen {
  margin-top: 0;
  padding-left: 0.85rem;
  border-left: 3px solid rgba(255, 255, 255, 0.35);
  font-size: 0.95rem;
  line-height: 1.6;
}
.page-hero__resumen::before {
  content: "En resumen";
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}