/* ============================================================
   CHECK Layer — sitio.css
   Estilos propios del sitio web de marketing.
   REGLA: prohibido hardcodear colores; todo usa var(--cl-*)
   del sistema de diseño (tema.css).
   ============================================================ */

html { scroll-behavior: smooth; }

body { font-size: 16px; }

/* Anclas con compensación por navbar fija */
section[id] { scroll-margin-top: 84px; }

.cl-seccion { padding: 5rem 0; }
.cl-seccion--apretada { padding: 3.5rem 0; }
.cl-seccion--tinte { background: var(--cl-superficie); }

.cl-eyebrow {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cl-teal-texto);
}

.cl-titulo-seccion {
  font-family: var(--cl-font-display);
  font-weight: 800;
  color: var(--cl-tinta);
  letter-spacing: -.02em;
}

.cl-subtitulo-seccion {
  color: var(--cl-cuerpo);
  font-size: 1.05rem;
  max-width: 640px;
}

/* ============================================================
   Botones de marca
   ============================================================ */
.btn-cl-primario {
  --bs-btn-font-weight: 600;
  --bs-btn-color: white;
  --bs-btn-bg: var(--cl-primario);
  --bs-btn-border-color: var(--cl-primario);
  --bs-btn-hover-color: white;
  --bs-btn-hover-bg: var(--cl-primario-hover);
  --bs-btn-hover-border-color: var(--cl-primario-hover);
  --bs-btn-active-color: white;
  --bs-btn-active-bg: var(--cl-primario-hover);
  --bs-btn-active-border-color: var(--cl-primario-hover);
}

.btn-cl-secundario {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--cl-primario-texto);
  --bs-btn-bg: var(--cl-superficie);
  --bs-btn-border-color: var(--cl-borde-boton);
  --bs-btn-hover-color: var(--cl-primario-texto);
  --bs-btn-hover-bg: var(--cl-primario-tinte);
  --bs-btn-hover-border-color: var(--cl-primario);
  --bs-btn-active-color: var(--cl-primario-texto);
  --bs-btn-active-bg: var(--cl-primario-tinte);
  --bs-btn-active-border-color: var(--cl-primario);
}

.btn-cl-teal {
  --bs-btn-font-weight: 600;
  --bs-btn-color: white;
  --bs-btn-bg: var(--cl-teal);
  --bs-btn-border-color: var(--cl-teal);
  --bs-btn-hover-color: white;
  --bs-btn-hover-bg: var(--cl-teal-hover);
  --bs-btn-hover-border-color: var(--cl-teal-hover);
  --bs-btn-active-color: white;
  --bs-btn-active-bg: var(--cl-teal-hover);
  --bs-btn-active-border-color: var(--cl-teal-hover);
}

/* Botón claro sobre bandas con gradiente de marca */
.btn-cl-blanco {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--cl-primario);
  --bs-btn-bg: white;
  --bs-btn-border-color: var(--cl-borde-boton);
  --bs-btn-hover-color: var(--cl-primario-hover);
  --bs-btn-hover-bg: var(--cl-primario-tinte);
  --bs-btn-hover-border-color: var(--cl-primario-tinte);
  --bs-btn-active-color: var(--cl-primario-hover);
  --bs-btn-active-bg: var(--cl-primario-tinte);
  --bs-btn-active-border-color: var(--cl-primario-tinte);
}

.btn-cl-contorno-blanco {
  --bs-btn-font-weight: 600;
  --bs-btn-color: white;
  --bs-btn-bg: rgba(255, 255, 255, .14);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: white;
  --bs-btn-hover-bg: rgba(255, 255, 255, .24);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: white;
  --bs-btn-active-bg: rgba(255, 255, 255, .24);
  --bs-btn-active-border-color: transparent;
}

/* ============================================================
   Navbar
   ============================================================ */
.cl-navbar {
  background: var(--cl-superficie);
  border-bottom: 1px solid var(--cl-borde);
  backdrop-filter: blur(8px);
}

.cl-navbar .navbar-nav .nav-link {
  color: var(--cl-cuerpo);
  font-weight: 500;
  border-radius: var(--cl-radio-sm);
}
.cl-navbar .navbar-nav .nav-link:hover,
.cl-navbar .navbar-nav .nav-link.active {
  color: var(--cl-primario-texto);
  background: var(--cl-primario-tinte);
}

.cl-marca {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--cl-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--cl-tinta);
  text-decoration: none;
}
.cl-marca__nombre { white-space: nowrap; }
.cl-marca__nombre span { color: var(--cl-teal-texto); font-weight: 600; }
.cl-marca:hover { color: var(--cl-tinta); }

/* Botón claro/oscuro en la navbar */
.cl-tema-btn {
  border: 1px solid var(--cl-borde);
  background: var(--cl-superficie);
  color: var(--cl-cuerpo);
  border-radius: 999px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cl-tema-btn:hover { border-color: var(--cl-borde-fuerte); color: var(--cl-tinta); }
.cl-tema-btn .icono-sol { display: none; }
[data-bs-theme="dark"] .cl-tema-btn .icono-sol { display: inline; }
[data-bs-theme="dark"] .cl-tema-btn .icono-luna { display: none; }

/* ============================================================
   Hero
   ============================================================ */
.cl-hero {
  background:
    radial-gradient(560px 360px at 86% 8%, color-mix(in srgb, var(--cl-halo, var(--cl-teal)) 26%, transparent), transparent 70%),
    radial-gradient(600px 400px at 6% 96%, color-mix(in srgb, var(--cl-primario) 30%, transparent), transparent 70%),
    var(--cl-grad-marca);
  padding: 5rem 0 5.5rem;
  overflow: hidden;
  position: relative;
}
/* Cuadrícula sutil de fondo (estilo del portal de referencia) */
.cl-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 44px 44px;
}
.cl-hero::after { content: none; }
.cl-hero > .container { position: relative; z-index: 1; }

.cl-insignia {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: .45rem 1rem;
}
.cl-insignia i { color: var(--cl-extra-2); }

.cl-hero h1 {
  font-family: var(--cl-font-display);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.12;
  color: #fff;
}
.cl-hero h1 .cl-resaltado { color: var(--cl-extra-3); }

.cl-hero__sub {
  color: rgba(255, 255, 255, .85);
  font-size: 1.1rem;
  max-width: 520px;
}
.cl-hero .text-muted { color: rgba(255, 255, 255, .75) !important; }
.cl-hero .bi-check-circle { color: var(--cl-extra-3); }

/* CTA primario del hero: usa el gradiente + glow global de .btn-cl-primario */
.cl-hero .btn-cl-secundario {
  --bs-btn-color: #fff;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(255, 255, 255, .55);
  --bs-btn-hover-bg: rgba(255, 255, 255, .12);
  --bs-btn-hover-border-color: rgba(255, 255, 255, .75);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, .12);
  --bs-btn-active-color: #fff;
}

/* ---------- Mockup del producto (HTML/CSS puro) ---------- */
.cl-mockup {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
}
.cl-mockup::before {
  content: "";
  position: absolute;
  inset: 8% -6% -6% -6%;
  background: color-mix(in srgb, var(--cl-halo, var(--cl-teal)) 30%, transparent);
  filter: blur(48px);
  border-radius: 28px;
  z-index: 0;
}
.cl-mockup > * { position: relative; z-index: 1; }

.cl-mockup__ventana {
  background: var(--cl-superficie);
  border: 1px solid var(--cl-borde);
  border-radius: var(--cl-radio);
  box-shadow: var(--cl-sombra-lg);
  overflow: hidden;
}

.cl-mockup__barra {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--cl-borde);
  background: var(--cl-superficie-2);
}
.cl-mockup__barra i {
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  display: inline-block;
}
.cl-mockup__barra i:nth-child(1) { background: var(--cl-peligro); opacity: .75; }
.cl-mockup__barra i:nth-child(2) { background: var(--cl-advertencia); opacity: .75; }
.cl-mockup__barra i:nth-child(3) { background: var(--cl-teal); opacity: .8; }
.cl-mockup__url {
  margin-left: .6rem;
  font-size: .72rem;
  color: var(--cl-muted);
  background: var(--cl-superficie);
  border: 1px solid var(--cl-borde);
  border-radius: 999px;
  padding: .15rem .8rem;
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl-mockup__cuerpo { padding: 1.5rem 1.4rem 1.6rem; text-align: center; }

.cl-mockup__avatar {
  width: 52px;
  height: 52px;
  margin: 0 auto .6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--cl-primario-texto);
  background: var(--cl-primario-tinte);
  border: 1px solid var(--cl-borde);
}

.cl-mockup__hora {
  font-family: var(--cl-font-display);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -.02em;
  color: var(--cl-tinta);
  line-height: 1.1;
}

.cl-badge--dentro {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--cl-teal-texto);
  background: var(--cl-teal-tinte);
  border: 1px solid var(--cl-teal);
  border-radius: 999px;
  padding: .25rem .8rem;
}

.cl-mockup__boton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  margin-top: 1rem;
  padding: .85rem 1rem;
  border-radius: var(--cl-radio);
  border: 0;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, var(--cl-primario), var(--cl-teal));
  box-shadow: var(--cl-sombra-md);
}

.cl-mockup__fila {
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--cl-muted);
  border-top: 1px solid var(--cl-borde);
  margin-top: 1.1rem;
  padding-top: .9rem;
}

/* Mini tarjeta flotante de reporte */
.cl-mockup__reporte {
  position: absolute;
  right: -1.2rem;
  bottom: -1.6rem;
  width: 230px;
  background: var(--cl-superficie);
  border: 1px solid var(--cl-borde);
  border-radius: var(--cl-radio);
  box-shadow: var(--cl-sombra-lg);
  padding: .9rem 1rem;
  text-align: left;
}
.cl-mockup__reporte .cl-reporte-icono {
  width: 34px;
  height: 34px;
  border-radius: var(--cl-radio-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cl-teal-texto);
  background: var(--cl-teal-tinte);
}
.cl-mockup__reporte .cl-reporte-folio {
  font-size: .72rem;
  color: var(--cl-muted);
}

/* Mini tarjeta flotante de evidencia (arriba-izquierda) */
.cl-mockup__evidencia {
  position: absolute;
  left: -1.4rem;
  top: 2.2rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  background: var(--cl-superficie);
  border: 1px solid var(--cl-borde);
  border-radius: var(--cl-radio);
  box-shadow: var(--cl-sombra-md);
  padding: .6rem .9rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--cl-tinta);
}
.cl-mockup__evidencia i { color: var(--cl-teal); font-size: 1.05rem; }
.cl-mockup__evidencia small { display: block; font-weight: 500; color: var(--cl-muted); }

@media (max-width: 575.98px) {
  .cl-mockup__reporte { right: 0; bottom: -1.4rem; width: 200px; }
  .cl-mockup__evidencia { left: 0; top: -1rem; }
}

/* ============================================================
   Banda de métricas
   ============================================================ */
.cl-metricas {
  background: var(--cl-superficie);
  border-top: 1px solid var(--cl-borde);
  border-bottom: 1px solid var(--cl-borde);
}
.cl-metrica__numero {
  font-family: var(--cl-font-display);
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--cl-primario-texto);
  letter-spacing: -.02em;
}
.cl-metrica__etiqueta { color: var(--cl-cuerpo); font-size: .92rem; }
/* Teléfono: una métrica por fila (a dos columnas "Multiempresa" se encimaba con la vecina) */
@media (max-width: 575.98px) {
  .cl-metricas .col-6 { flex: 0 0 100%; max-width: 100%; }
  .cl-metrica__numero { font-size: 1.5rem; }
  .cl-metricas .row { --bs-gutter-y: 1.25rem; }
}

/* ============================================================
   La ley — línea de tiempo y advertencia
   ============================================================ */
.cl-ley-timeline {
  position: relative;
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cl-ley-timeline::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 2%;
  right: 2%;
  height: 2px;
  background: var(--cl-borde-fuerte);
}
.cl-ley-timeline li {
  position: relative;
  flex: 1;
  text-align: center;
  padding-top: 2.1rem;
}
.cl-ley-timeline li::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cl-superficie);
  border: 3px solid var(--cl-primario);
  z-index: 1;
}
.cl-ley-timeline li.cl-hito-clave::before { border-color: var(--cl-peligro); background: var(--cl-peligro); box-shadow: 0 0 0 4px var(--cl-peligro-tinte); }
.cl-ley-timeline li.cl-hito-multa::before { border-color: var(--cl-advertencia); }
.cl-ley-timeline .cl-hito-fecha {
  display: block;
  font-weight: 700;
  font-size: .85rem;
  color: var(--cl-primario-texto);
}
.cl-ley-timeline li.cl-hito-clave .cl-hito-fecha { color: var(--cl-peligro); }
.cl-ley-timeline li.cl-hito-clave .cl-hito-texto strong { color: var(--cl-tinta); }
.cl-ley-timeline li.cl-hito-multa .cl-hito-fecha { color: var(--cl-advertencia-texto); }
.cl-ley-timeline .cl-hito-texto { font-size: .85rem; color: var(--cl-cuerpo); }

@media (max-width: 767.98px) {
  .cl-ley-timeline { flex-direction: column; gap: 1.6rem; }
  .cl-ley-timeline::before {
    top: 2%;
    bottom: 2%;
    left: 10px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .cl-ley-timeline li { text-align: left; padding: 0 0 0 2.4rem; }
  .cl-ley-timeline li::before { left: 2px; top: 2px; transform: none; }
}

.cl-alerta-multa {
  background: var(--cl-advertencia-tinte);
  border: 1px solid var(--cl-advertencia);
  border-radius: var(--cl-radio);
  color: var(--cl-advertencia-texto);
}
.cl-alerta-multa .cl-alerta-icono {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--cl-radio-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: white;
  background: var(--cl-advertencia);
}

/* ============================================================
   Cómo funciona — pasos
   ============================================================ */
.cl-paso {
  background: var(--cl-superficie);
  border: 1px solid var(--cl-borde);
  border-radius: var(--cl-radio);
  box-shadow: var(--cl-sombra-sm);
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease, background-color .25s ease, border-color .25s ease;
}
.cl-paso:hover { box-shadow: var(--cl-sombra-md); }

.cl-paso__numero {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cl-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: white;
  background: linear-gradient(135deg, var(--cl-primario), var(--cl-teal));
  box-shadow: var(--cl-sombra-sm);
}

/* ============================================================
   Funciones — cards con ícono
   ============================================================ */
.cl-funcion {
  background: var(--cl-superficie);
  border: 1px solid var(--cl-borde);
  border-radius: var(--cl-radio);
  box-shadow: var(--cl-sombra-sm);
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease, background-color .25s ease, border-color .25s ease;
}
.cl-funcion:hover { box-shadow: var(--cl-sombra-md); border-color: var(--cl-borde-fuerte); }

.cl-icono {
  width: 48px;
  height: 48px;
  border-radius: var(--cl-radio-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}
.cl-icono--primario { color: var(--cl-primario-texto); background: var(--cl-primario-tinte); }
.cl-icono--teal { color: var(--cl-teal-texto); background: var(--cl-teal-tinte); }

.cl-mini-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .92rem;
  color: var(--cl-cuerpo);
}
.cl-mini-lista li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: .4rem;
}
.cl-mini-lista li::before {
  content: "\F26B"; /* bi-check2 */
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--cl-teal);
  font-weight: 700;
}

/* ============================================================
   Para quién / Por qué — fotos y cards grandes
   ============================================================ */
.cl-foto {
  border: 1px solid var(--cl-borde);
  box-shadow: var(--cl-sombra-md);
}

.cl-audiencia {
  background: var(--cl-superficie);
  border: 1px solid var(--cl-borde);
  border-radius: var(--cl-radio);
  box-shadow: var(--cl-sombra-sm);
  overflow: hidden;
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease, background-color .25s ease, border-color .25s ease;
}
.cl-audiencia:hover { box-shadow: var(--cl-sombra-lg); }
.cl-audiencia img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--cl-borde);
}

.cl-etiqueta {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: .2rem .7rem;
}
.cl-etiqueta--primario { color: var(--cl-primario-texto); background: var(--cl-primario-tinte); }
.cl-etiqueta--teal { color: var(--cl-teal-texto); background: var(--cl-teal-tinte); }

.cl-check-lista { list-style: none; margin: 0; padding: 0; }
.cl-check-lista li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.cl-check-lista .cl-check-ico {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cl-teal-texto);
  background: var(--cl-teal-tinte);
  border: 1px solid var(--cl-teal);
  font-size: .8rem;
  margin-top: .1rem;
}
.cl-check-lista strong { color: var(--cl-tinta); }

/* ============================================================
   Planes
   ============================================================ */
.cl-plan {
  background: var(--cl-superficie);
  border: 1px solid var(--cl-borde);
  border-radius: var(--cl-radio);
  box-shadow: var(--cl-sombra-sm);
  height: 100%;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, background-color .25s ease, border-color .25s ease;
}
.cl-plan:hover { box-shadow: var(--cl-sombra-md); }
/* Trama decorativa tenue en la esquina superior derecha (círculos como el hero y los banners, ACT-046) */
.cl-plan::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 92% 6%, color-mix(in srgb, var(--cl-primario) 7%, transparent) 0 95px, transparent 96px),
    radial-gradient(circle at 76% 24%, color-mix(in srgb, var(--cl-primario) 4%, transparent) 0 62px, transparent 63px),
    radial-gradient(circle at 99% 40%, color-mix(in srgb, var(--cl-grafito) 4%, transparent) 0 44px, transparent 45px);
}
.cl-plan > * { position: relative; z-index: 1; }
.cl-plan--recomendado::before {
  background:
    radial-gradient(circle at 92% 6%, color-mix(in srgb, var(--cl-primario) 10%, transparent) 0 95px, transparent 96px),
    radial-gradient(circle at 76% 24%, color-mix(in srgb, var(--cl-halo, var(--cl-teal)) 6%, transparent) 0 62px, transparent 63px),
    radial-gradient(circle at 99% 40%, color-mix(in srgb, var(--cl-primario) 4%, transparent) 0 44px, transparent 45px);
}
/* Botón del plan: compacto, no ocupa todo el ancho (petición del usuario, ACT-038) */
.cl-plan > .btn { align-self: flex-start; }

.cl-plan--recomendado {
  border: 2px solid var(--cl-primario);
  box-shadow: var(--cl-sombra-lg);
}
.cl-plan__sello {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: white;
  background: linear-gradient(135deg, var(--cl-primario), var(--cl-teal));
  border-radius: 999px;
  padding: .3rem 1rem;
  white-space: nowrap;
  box-shadow: var(--cl-sombra-md);
}

.cl-plan__precio {
  font-family: var(--cl-font-display);
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: -.02em;
  color: var(--cl-tinta);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4rem;
}
.cl-plan__precio small { white-space: nowrap; }
@media (max-width: 575.98px) { .cl-plan__precio { font-size: 2rem; } }
.cl-plan__precio small {
  font-family: var(--cl-font);
  font-size: .9rem;
  font-weight: 500;
  color: var(--cl-muted);
}

/* ============================================================
   FAQ — acordeón con variables
   ============================================================ */
.cl-faq .accordion-item {
  background: var(--cl-superficie);
  border: 1px solid var(--cl-borde);
  border-radius: var(--cl-radio) !important;
  overflow: hidden;
  margin-bottom: .75rem;
}
.cl-faq .accordion-button {
  background: var(--cl-superficie);
  color: var(--cl-tinta);
  font-weight: 600;
  box-shadow: none;
}
.cl-faq .accordion-button:not(.collapsed) {
  background: var(--cl-primario-tinte);
  color: var(--cl-primario-texto);
}
.cl-faq .accordion-button:focus {
  border-color: var(--cl-primario);
  box-shadow: 0 0 0 .2rem var(--cl-primario-tinte);
}
.cl-faq .accordion-button::after {
  /* hereda el ícono de Bootstrap pero con tinta del tema */
  filter: none;
}
[data-bs-theme="dark"] .cl-faq .accordion-button::after {
  filter: invert(1) grayscale(1);
}
.cl-faq .accordion-body { color: var(--cl-cuerpo); }

/* ============================================================
   CTA final
   ============================================================ */
.cl-cta-final {
  background:
    radial-gradient(420px 260px at 90% 0%, color-mix(in srgb, var(--cl-halo, var(--cl-teal)) 24%, transparent), transparent 70%),
    radial-gradient(420px 260px at 4% 100%, color-mix(in srgb, var(--cl-primario) 26%, transparent), transparent 70%),
    var(--cl-grad-marca);
  border-radius: calc(var(--cl-radio) * 1.5);
  box-shadow: var(--cl-sombra-lg);
  color: white;
  position: relative;
  overflow: hidden;
}
/* Círculos decorativos (mismo lenguaje que el hero y el panel de login) */
.cl-cta-final::before {
  content: ""; position: absolute;
  right: -80px; top: -100px;
  width: 300px; height: 300px; border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}
.cl-cta-final::after {
  content: ""; position: absolute;
  left: -60px; bottom: -120px;
  width: 240px; height: 240px; border-radius: 50%;
  background: rgba(255, 255, 255, .06);
}
.cl-cta-final > * { position: relative; z-index: 1; }
.cl-cta-final h2 { color: white; }
.cl-cta-final p { color: rgba(255, 255, 255, .85); }

/* ============================================================
   Sección "Instala la aplicación" (PWA, ACT-040)
   ============================================================ */
/* Menos aire arriba: la sección anterior ya aporta su padding inferior */
.cl-app-seccion { padding-top: 0; }
.cl-app-banda { padding: 3.5rem 3rem; }
.cl-app-banda .btn:disabled { opacity: .85; }
.cl-app-ayuda ul { padding-left: 1.2rem; color: rgba(255, 255, 255, .9); }
.cl-eyebrow--claro { color: var(--cl-extra-2); }
.cl-eyebrow--claro::before { color: var(--cl-extra-2); }
.cl-app-banda .fw-600 { font-weight: 600; }
.cl-app-ayuda {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--cl-radio);
  padding: 1.25rem 1.5rem;
  max-width: 560px;
}
.cl-app-ayuda ol { padding-left: 1.2rem; color: rgba(255, 255, 255, .9); }
.cl-app-ayuda li { margin-bottom: .35rem; }
.cl-app-ayuda #ayuda-android + #ayuda-ios { margin-top: 1rem; }

/* Teléfono ilustrativo */
.cl-telefono {
  width: 250px; height: 500px;
  margin: 0 auto;
  border-radius: 40px;
  background: var(--cl-grafito-hover);
  border: 6px solid rgba(255, 255, 255, .16);
  box-shadow: var(--cl-sombra-lg);
  padding: 14px;
  position: relative;
}
.cl-telefono::before {
  content: ""; position: absolute;
  top: 14px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 22px; border-radius: 12px;
  background: var(--cl-grafito-hover);
  z-index: 2;
}
.cl-telefono__pantalla {
  height: 100%; border-radius: 28px; overflow: hidden;
  background:
    radial-gradient(240px 200px at 80% 0%, color-mix(in srgb, var(--cl-halo, var(--cl-teal)) 30%, transparent), transparent 70%),
    var(--cl-grad-marca);
  display: flex; flex-direction: column; align-items: center;
  padding: 44px 14px 16px;
  gap: 16px;
}
.cl-telefono__hora { font-family: var(--cl-font-display); font-weight: 700; font-size: 30px; color: white; letter-spacing: -.02em; }
.cl-telefono__apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; width: 100%; }
.cl-telefono__app {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 42px;
}
.cl-telefono__app::before { content: ""; width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, .14); }
.cl-telefono__app--check::before { display: none; }
.cl-telefono__app--check svg { width: 40px; height: 40px; margin: -4px 0; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); }
.cl-telefono__app--check small { font-size: 9px; color: white; font-weight: 600; text-align: center; line-height: 1.1; }
.cl-telefono__tarjeta {
  margin-top: auto; width: 100%;
  background: var(--cl-superficie);
  border-radius: 16px;
  padding: 12px;
  text-align: center;
  box-shadow: var(--cl-sombra-md);
}
.cl-telefono__reloj {
  font-family: var(--cl-font-display); font-weight: 700; font-size: 24px;
  color: var(--cl-tinta); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  margin-bottom: 8px;
}
.cl-telefono__boton {
  background: var(--cl-grad-primario); color: white;
  border-radius: 10px; padding: 9px 10px;
  font-size: 13px; font-weight: 600;
  box-shadow: var(--cl-glow);
}
@media (max-width: 991.98px) {
  /* Las filas con g-5 (margen -24 px) se salían 12 px del contenedor (padding 12 px) en móvil:
     la-ley, por-que, para-quien. Gutter normal por debajo de lg. */
  .row.g-5 { --bs-gutter-x: 1.5rem; }
  .cl-app-banda { padding: 2.5rem 1.5rem; }
  .cl-app-banda .col-lg-5 { order: -1; }
  .cl-telefono { width: 240px; height: 480px; }
}

/* Cotizador: "Qué incluye" + FAQ del plan elegido (ACT-045) */
.cl-res-extra { border-top: 1px solid var(--cl-borde); }
.cl-res-extra .cl-mini-lista li { font-size: 14px; }
.cl-faq-mini details { border-bottom: 1px solid var(--cl-borde); padding: .55rem 0; }
.cl-faq-mini details:last-child { border-bottom: none; }
.cl-faq-mini summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--cl-tinta); list-style: none; display: flex; justify-content: space-between; gap: .75rem; }
.cl-faq-mini summary::-webkit-details-marker { display: none; }
.cl-faq-mini summary::after { content: "+"; color: var(--cl-primario); font-weight: 700; flex-shrink: 0; }
.cl-faq-mini details[open] summary::after { content: "–"; }
.cl-faq-mini p { font-size: 13.5px; color: var(--cl-cuerpo); margin: .45rem 0 0; }

/* ============================================================
   Footer
   ============================================================ */
.cl-footer {
  background: var(--cl-superficie);
  border-top: 1px solid var(--cl-borde);
}
.cl-footer h6 {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cl-muted);
}
.cl-footer a {
  color: var(--cl-cuerpo);
  text-decoration: none;
  display: inline-block;
  padding: .15rem 0;
}
.cl-footer a:hover { color: var(--cl-primario-texto); }

/* ============================================================
   Página 404
   ============================================================ */
.cl-error-codigo {
  font-family: var(--cl-font-display);
  font-weight: 700;
  font-size: clamp(4.5rem, 14vw, 8rem);
  letter-spacing: -.04em;
  line-height: 1;
  background: linear-gradient(135deg, var(--cl-primario), var(--cl-teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   Páginas sencillas (aviso de privacidad)
   ============================================================ */
.cl-doc h2 { font-size: 1.15rem; margin-top: 2rem; }
.cl-doc p, .cl-doc li { color: var(--cl-cuerpo); }
.cl-doc h3 { font-size: 1rem; margin-top: 1.5rem; }
/* ACT-112: registro en dos pasos */
.cl-registro fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.cl-registro-pasos { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 20px; }
.cl-registro-pasos li { flex: 1; display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--cl-muted, #94a3b8); padding-bottom: 8px; border-bottom: 3px solid var(--cl-borde, #e2e8f0); }
.cl-registro-pasos li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; background: var(--cl-borde, #e2e8f0); color: var(--cl-cuerpo, #475467); }
.cl-registro-pasos li.activo { color: var(--cl-tinta); border-color: var(--cl-primario); }
.cl-registro-pasos li.activo span { background: var(--cl-primario); color: #fff; }
.cl-registro-pasos li.hecho { color: var(--cl-cuerpo, #475467); border-color: var(--cl-primario); }
.cl-registro-pasos li.hecho span { background: var(--cl-primario-tinte, #e0f2fe); color: var(--cl-primario); }
.cl-opciones-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 420px) { .cl-opciones-tipo { grid-template-columns: 1fr; } }
.cl-opcion-tipo { position: relative; cursor: pointer; margin: 0; }
.cl-opcion-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.cl-opcion-tipo > span { display: grid; gap: 2px; height: 100%; padding: 12px; border: 1.5px solid var(--cl-borde, #e2e8f0); border-radius: 10px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.cl-opcion-tipo > span i { font-size: 1.2rem; color: var(--cl-primario); }
.cl-opcion-tipo > span b { font-size: .9rem; color: var(--cl-tinta); }
.cl-opcion-tipo > span small { font-size: .78rem; color: var(--cl-muted-fuerte, #6b7280); line-height: 1.3; }
.cl-opcion-tipo input:checked + span { border-color: var(--cl-primario); box-shadow: 0 0 0 3px var(--cl-anillo); }
.cl-opcion-tipo input:focus-visible + span { box-shadow: 0 0 0 3px var(--cl-anillo); }
/* ACT-108: código de 6 dígitos de Recuperar contraseña */
.cl-codigo { font-size: 1.75rem; font-weight: 700; letter-spacing: .5em; text-align: center; padding-left: .5em; font-variant-numeric: tabular-nums; }
/* ACT-107: datos y notas del borrador legal pendientes de definir (las [VERIFICAR] no se ven en producción) */
.cl-doc mark.cl-pendiente { background: #FEF3C7; color: #92400E; padding: 0 .2em; border-radius: 3px; }
.cl-doc__marco {
  background: var(--cl-superficie);
  border: 1px solid var(--cl-borde);
  border-radius: var(--cl-radio);
  box-shadow: var(--cl-sombra-sm);
}

/* ============================================================
   COTIZADOR — selector de rangos (ACT-026)
   ============================================================ */
.cl-paso-etiqueta {
  font-size: 13px;
  font-weight: 600;
  color: var(--cl-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .85rem;
}
.cl-rango {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  height: 100%;
  width: 100%;
  text-align: left;
  background: var(--cl-superficie);
  border: 2px solid var(--cl-borde);
  border-radius: var(--cl-radio);
  padding: 1.1rem 1.2rem;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.cl-rango:hover {
  border-color: var(--cl-primario);
  box-shadow: var(--cl-sombra-md);
}
.cl-rango__etiqueta {
  font-size: 15px; font-weight: 700; color: var(--cl-tinta);
  line-height: 1.15;
  padding-right: 30px;            /* espacio para el círculo de selección */
}
.cl-rango__etiqueta small { display: block; font-size: 12px; font-weight: 600; color: var(--cl-muted); margin-top: 2px; }
.cl-rango__precio {
  margin-top: .45rem;
  font-family: var(--cl-font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--cl-tinta);
  line-height: 1.15;
}
.cl-rango__precio small { font-size: 12px; font-weight: 500; color: var(--cl-muted); }
.cl-rango__plan { font-size: 13px; font-weight: 600; color: var(--cl-primario-texto); }
.cl-rango__nota { font-size: 12px; color: var(--cl-muted); }
.cl-rango__check {
  position: absolute;
  top: .7rem;
  right: .7rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--cl-borde-fuerte);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: .7rem;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.cl-rango.seleccionado {
  border-color: var(--cl-primario);
  background: var(--cl-primario-tinte);
  box-shadow: var(--cl-sombra-md);
}
.cl-rango.seleccionado .cl-rango__check {
  background: var(--cl-primario);
  border-color: var(--cl-primario);
  color: #fff;
}

/* ============================================================
   FIRMA VISUAL LAYER (ACT-030) — texto con degradado y chips
   ============================================================ */
.cl-texto-grad {
  background: linear-gradient(90deg, var(--cl-extra-1), var(--cl-extra-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cl-eyebrow::before { content: "— "; color: var(--cl-primario); }

.cl-chip-oscuro {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .85);
  border-radius: 999px;
  padding: .35rem .8rem;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
.cl-chip-oscuro i { color: var(--cl-extra-2); }

/* Banda de métricas con icono (estilo del portal de referencia) */
.cl-metricas__icono {
  font-size: 1.5rem;
  color: var(--cl-primario);
}

/* Icono del banner de multa (ACT-032) */
.cl-multa-icono {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .12);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  color: #fff;
}

/* ---------- Botones con fondo blanco: SÍ llevan borde de color (ACT-038).
   Va al final porque .btn { border: none } (componentes.css) y .cl-app .btn (portal.css)
   quitan el borde a todos los botones. ---------- */
.btn.btn-cl-secundario, .btn.btn-cl-blanco {
  border: 1px solid var(--bs-btn-border-color);
}

/* ============================================================
   ACT-103: formularios de contacto y de solicitud de cotización
   ============================================================ */
.cl-form-contacto { padding: 28px; border: 1px solid var(--cl-borde); border-radius: calc(var(--cl-radio) * 1.25); box-shadow: var(--cl-sombra-lg); background: #fff; color: var(--cl-cuerpo); text-align: left; }
.cl-form-contacto h3 { color: var(--cl-tinta); }
.cl-form-contacto .form-label { font-size: 13px; font-weight: 600; color: var(--cl-tinta); margin-bottom: 6px; }
.cl-form-contacto .form-control, .cl-form-contacto .form-select { min-height: 46px; border-radius: 10px; }
.cl-form-contacto textarea.form-control { min-height: 120px; }
.cl-form-contacto .validation-message { color: #b91c1c; font-size: 12.5px; margin-top: 4px; }
.cl-cta-final .cl-form-contacto p, .cl-cta-final .cl-form-contacto small, .cl-cta-final .cl-form-contacto .text-muted { color: var(--cl-muted, #64748b) !important; }
.cl-trampa { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cl-form-gracias { padding: 24px 8px; }
.cl-form-gracias__ic { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; color: #fff; background: var(--cl-grad-marca); box-shadow: 0 10px 24px rgba(8, 145, 178, .28); }
.cl-contacto-lista li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.cl-contacto-lista i { font-size: 1.25rem; color: var(--cl-primario); width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--cl-superficie); }
.cl-contacto-lista b { display: block; color: var(--cl-tinta); font-size: 14.5px; }
.cl-contacto-lista span, .cl-contacto-lista a { font-size: 14.5px; }
.cl-cta-cotizacion { text-align: left; }
.cl-cta-lista li { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; color: rgba(255, 255, 255, .9); }
.cl-cta-lista i { font-size: 1.1rem; }
@media (max-width: 575.98px) { .cl-form-contacto { padding: 20px 16px; } }

/* ACT-104: en escritorios medianos el menú no cabe en un renglón; «Funciones» y «Para quién» sólo en pantallas amplias
   (en el menú del teléfono siguen apareciendo) y los textos ya no se parten */
@media (min-width: 992px) { .cl-navbar .nav-link, .cl-navbar .btn { white-space: nowrap; } }
@media (min-width: 992px) and (max-width: 1439.98px) { .cl-nav-amplio { display: none; } }

/* ACT-113: el registro usa un plano más ancho (520 px) para que no se vea apretado */
.cl-auth__plano:has(.cl-registro), .cl-auth__plano:has([data-registro-codigo]) { max-width: 520px; }

/* ACT-113: «Verificando…» al enviar un código (registro y recuperar contraseña), unos segundos antes de seguir */
.cl-verificando { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: rgba(246, 248, 251, .86); backdrop-filter: blur(3px); animation: cl-verif-entra .2s ease-out; }
.cl-verificando__caja { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 28px 32px; background: #fff; border-radius: 18px; box-shadow: 0 18px 50px rgba(15, 23, 42, .16); min-width: 280px; }
.cl-verificando__anillo { width: 56px; height: 56px; border-radius: 50%; border: 4px solid var(--cl-primario-tinte); border-top-color: var(--cl-primario); animation: cl-girar .9s linear infinite; }
.cl-verificando__txt { font-weight: 600; color: var(--cl-tinta); min-height: 1.4em; transition: opacity .25s; }
.cl-verificando__sub { font-size: .82rem; color: var(--cl-muted); margin-top: -8px; }
.cl-verificando__barra { width: 220px; height: 4px; border-radius: 2px; background: var(--cl-borde); overflow: hidden; }
.cl-verificando__barra i { display: block; height: 100%; width: 0; background: var(--cl-primario); animation: cl-verif-avance var(--cl-verif-ms, 4000ms) linear forwards; }
@keyframes cl-girar { to { transform: rotate(360deg); } }
@keyframes cl-verif-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes cl-verif-avance { to { width: 100%; } }

/* ACT-115: registro, paso «Tu plan» (tarjetas de plan a todo el ancho y periodicidad) y ayuda si no llega el código */
.cl-planes-reg { display: grid; gap: 8px; }
.cl-plan-reg, .cl-mes-reg { position: relative; cursor: pointer; margin: 0; display: block; }
.cl-plan-reg input, .cl-mes-reg input { position: absolute; opacity: 0; pointer-events: none; }
.cl-plan-reg > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom precio" "det det"; gap: 2px 10px; align-items: baseline; padding: 11px 14px; border: 1.5px solid var(--cl-borde, #e2e8f0); border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.cl-plan-reg > span > b { grid-area: nom; font-size: .95rem; color: var(--cl-tinta); }
.cl-plan-reg__precio { grid-area: precio; font-weight: 700; color: var(--cl-tinta); white-space: nowrap; }
.cl-plan-reg__precio small { font-weight: 500; color: var(--cl-muted-fuerte, #6b7280); font-size: .78rem; }
.cl-plan-reg__det { grid-area: det; font-size: .8rem; color: var(--cl-muted-fuerte, #6b7280); }
.cl-plan-reg__det i { margin-right: 5px; color: var(--cl-primario); }
.cl-plan-reg input:checked + span, .cl-mes-reg input:checked + span { border-color: var(--cl-primario); box-shadow: 0 0 0 3px var(--cl-anillo); background: color-mix(in srgb, var(--cl-primario) 4%, #fff); }
.cl-plan-reg input:focus-visible + span, .cl-mes-reg input:focus-visible + span { box-shadow: 0 0 0 3px var(--cl-anillo); }
.cl-meses-reg__ops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.cl-mes-reg > span { display: grid; gap: 1px; padding: 10px; border: 1.5px solid var(--cl-borde, #e2e8f0); border-radius: 10px; background: #fff; text-align: center; height: 100%; }
.cl-mes-reg > span > b { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cl-muted-fuerte, #6b7280); }
.cl-mes-reg__total { font-weight: 700; color: var(--cl-tinta); font-size: .95rem; }
.cl-mes-reg > span > small { font-size: .74rem; color: var(--cl-teal-texto, #15803d); }
.cl-no-llego { border: 1px solid var(--cl-borde, #e2e8f0); border-radius: 12px; padding: 10px 14px; background: #fff; font-size: .88rem; }
.cl-no-llego summary { cursor: pointer; font-weight: 600; color: var(--cl-primario); }
.cl-no-llego__pasos { margin: 10px 0 2px; padding-left: 18px; display: grid; gap: 10px; color: var(--cl-cuerpo, #475467); }
.cl-no-llego__form { display: flex; gap: 6px; margin-top: 6px; }
.cl-no-llego__form .form-control { flex: 1; min-width: 0; }

/* ============================================================
   ACT-122 — Ilustraciones en HTML/CSS para «La ley» y «Por qué» (mismo lenguaje que la maqueta del hero; sin fotos de banco)
   ============================================================ */
.cl-ley-ilu, .cl-razones-ilu { position: relative; max-width: 480px; margin: 0 auto; }
.cl-ley-ilu::before, .cl-razones-ilu::before {
  content: ""; position: absolute; inset: 6% -4% -4% -4%; z-index: 0; border-radius: 28px; filter: blur(46px);
  background: color-mix(in srgb, var(--cl-halo, var(--cl-teal)) 26%, transparent);
}
.cl-ley-ilu > *, .cl-razones-ilu > * { position: relative; z-index: 1; }

/* Hoja del decreto */
.cl-ley-doc {
  background: var(--cl-superficie); border: 1px solid var(--cl-borde); border-radius: var(--cl-radio); box-shadow: var(--cl-sombra-lg);
  padding: 1.4rem 1.5rem 1.6rem; margin-right: 2.5rem; transform: rotate(-1.5deg);
}
.cl-ley-doc__cab { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding-bottom: .6rem; margin-bottom: .8rem; border-bottom: 2px solid var(--cl-tinta); }
.cl-ley-doc__cab span { font-family: var(--cl-font-display); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cl-tinta); }
.cl-ley-doc__cab small { font-size: .7rem; color: var(--cl-muted); white-space: nowrap; }
.cl-ley-doc__titulo { display: block; font-size: .8rem; line-height: 1.35; color: var(--cl-tinta); text-align: center; margin-bottom: .9rem; }
.cl-ley-doc__lineas { display: grid; gap: .4rem; margin: .7rem 0; }
.cl-ley-doc__lineas span { display: block; height: .4rem; border-radius: 4px; background: var(--cl-superficie-2); }
.cl-ley-doc__art { font-size: .74rem; color: var(--cl-cuerpo); margin: 0 0 .35rem; }
.cl-ley-doc__frac { font-size: .8rem; line-height: 1.45; color: var(--cl-tinta); margin: 0; }
.cl-ley-doc__frac mark { padding: .1rem .25rem; border-radius: 4px; color: inherit; background: color-mix(in srgb, var(--cl-teal) 22%, transparent); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Gráfica 48 → 40 h */
.cl-ley-grafica {
  position: absolute; right: -.6rem; bottom: -2.4rem; width: 200px;
  background: var(--cl-superficie); border: 1px solid var(--cl-borde); border-radius: var(--cl-radio); box-shadow: var(--cl-sombra-lg); padding: .8rem .9rem .7rem;
}
.cl-ley-grafica > small { display: block; font-size: .7rem; font-weight: 600; color: var(--cl-muted); margin-bottom: .5rem; }
.cl-ley-grafica__barras { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; align-items: end; height: 92px; }
.cl-ley-grafica__barras span { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.cl-ley-grafica__barras span::before {
  content: ""; order: 2; width: 100%; height: var(--h); border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--cl-primario), var(--cl-teal));
}
.cl-ley-grafica__barras b { order: 1; font-size: .7rem; color: var(--cl-tinta); margin-bottom: .15rem; }
.cl-ley-grafica__barras i { order: 3; font-style: normal; font-size: .62rem; color: var(--cl-muted); margin-top: .2rem; }

/* Fecha clave */
.cl-ley-fecha {
  position: absolute; left: -1rem; bottom: -1.7rem; display: flex; align-items: center; gap: .55rem;
  background: var(--cl-superficie); border: 1px solid var(--cl-borde); border-radius: var(--cl-radio); box-shadow: var(--cl-sombra-md);
  padding: .6rem .9rem; font-size: .78rem; font-weight: 700; color: var(--cl-tinta);
}
.cl-ley-fecha i { font-size: 1.1rem; color: var(--cl-primario); }
.cl-ley-fecha small { display: block; font-weight: 500; color: var(--cl-muted); font-size: .7rem; }

/* «Por qué»: cuatro mini tarjetas */
.cl-razones-ilu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-bottom: 1.5rem; }
.cl-razon-card {
  display: flex; flex-direction: column; gap: .55rem; align-items: flex-start;
  background: var(--cl-superficie); border: 1px solid var(--cl-borde); border-radius: var(--cl-radio); box-shadow: var(--cl-sombra-lg); padding: 1rem 1.05rem 1.1rem;
}
.cl-razon-card--baja { transform: translateY(1.5rem); }
.cl-razon-card > b { font-family: var(--cl-font-display); font-size: .92rem; color: var(--cl-tinta); }
.cl-razon-card__ico { width: 38px; height: 38px; border-radius: var(--cl-radio-sm); display: grid; place-items: center; font-size: 1.1rem; color: var(--cl-primario-texto); background: var(--cl-primario-tinte); }
.cl-razon-card__ico.teal { color: var(--cl-teal-texto); background: var(--cl-teal-tinte); }
.cl-razon-empresas { list-style: none; padding: 0; margin: 0; width: 100%; display: grid; gap: .3rem; }
.cl-razon-empresas li { display: flex; align-items: center; gap: .45rem; font-size: .72rem; color: var(--cl-cuerpo); padding: .3rem .45rem; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-razon-empresas li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cl-razon-empresas li i { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--cl-borde-fuerte, var(--cl-borde)); }
.cl-razon-empresas li.activa { background: var(--cl-primario-tinte); color: var(--cl-tinta); font-weight: 600; }
.cl-razon-empresas li.activa i { background: var(--cl-primario); }
.cl-razon-folio { width: 100%; display: flex; justify-content: space-between; gap: .4rem; font-size: .7rem; color: var(--cl-muted); border-bottom: 1px dashed var(--cl-borde); padding-bottom: .25rem; }
.cl-razon-folio code { font-size: .7rem; color: var(--cl-tinta); background: none; padding: 0; }
.cl-razon-nota { font-size: .68rem; color: var(--cl-muted); }
.cl-razon-nota i { color: var(--cl-teal); }
.cl-razon-boton { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .8rem; border-radius: 999px; font-size: .74rem; font-weight: 700; color: #fff; background: linear-gradient(90deg, var(--cl-primario), var(--cl-teal)); box-shadow: 0 6px 16px color-mix(in srgb, var(--cl-primario) 35%, transparent); }
.cl-razon-ley { font-family: var(--cl-font-display); font-weight: 700; font-size: .95rem; line-height: 1.2; color: var(--cl-tinta); padding: .45rem .7rem; border-left: 3px solid var(--cl-teal); background: var(--cl-superficie-2); border-radius: 0 6px 6px 0; }

@media (max-width: 991.98px) { .cl-ley-ilu, .cl-razones-ilu { margin-top: 1rem; } }
@media (max-width: 575.98px) {
  .cl-ley-doc { margin-right: 0; padding: 1.1rem 1.1rem 1.3rem; }
  .cl-ley-grafica { position: relative; right: auto; bottom: auto; width: auto; margin: 1rem 0 0; }
  .cl-ley-fecha { position: relative; left: auto; top: auto; margin-top: .8rem; display: inline-flex; }
  .cl-razones-ilu { gap: .7rem; }
  .cl-razon-card { padding: .85rem; }
  .cl-razon-card--baja { transform: translateY(1rem); }
}

/* ============================================================
   ACT-125 — Guías: índice, artículo (citas, tablas), llamado a la acción
   ============================================================ */
.cl-guia-card {
  display: flex; flex-direction: column; height: 100%; padding: 1.5rem; text-decoration: none;
  background: var(--cl-superficie); border: 1px solid var(--cl-borde); border-radius: var(--cl-radio); box-shadow: var(--cl-sombra-md);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.cl-guia-card:hover { transform: translateY(-3px); box-shadow: var(--cl-sombra-lg); border-color: color-mix(in srgb, var(--cl-primario) 35%, var(--cl-borde)); }
.cl-guia-card h2 { color: var(--cl-tinta); line-height: 1.3; }
.cl-guia-card p { color: var(--cl-cuerpo); font-size: .95rem; }
.cl-guia-card__pie { margin-top: auto; display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: .8rem; color: var(--cl-muted); }
.cl-guia-card__leer { font-weight: 600; color: var(--cl-primario-texto); }
.cl-guia h2 { font-size: 1.3rem; margin-top: 2.2rem; color: var(--cl-tinta); }
.cl-guia h3 { font-size: 1.05rem; }
.cl-guia p, .cl-guia li { font-size: 1.02rem; line-height: 1.7; }
.cl-doc blockquote { margin: 1.2rem 0; padding: .9rem 1.1rem; border-left: 4px solid var(--cl-teal); background: var(--cl-superficie-2); border-radius: 0 var(--cl-radio-sm) var(--cl-radio-sm) 0; }
.cl-doc blockquote p { margin: 0 0 .6rem; color: var(--cl-tinta); font-style: italic; }
.cl-doc blockquote p:last-child { margin-bottom: 0; }
.cl-doc-tabla { margin: 1rem 0 1.4rem; font-size: .95rem; }
.cl-doc-tabla th { background: var(--cl-superficie-2); color: var(--cl-tinta); font-weight: 700; }
.cl-doc-tabla td, .cl-doc-tabla th { padding: .55rem .75rem; border-color: var(--cl-borde); }
.cl-guia-cta {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.3rem 1.5rem;
  border-radius: var(--cl-radio); border: 1px solid color-mix(in srgb, var(--cl-primario) 30%, var(--cl-borde)); background: var(--cl-primario-tinte);
}
.cl-guia-cta b { color: var(--cl-tinta); font-size: 1.05rem; }
.cl-guia-cta p { color: var(--cl-cuerpo); }
.cl-guia-otras { padding-left: 1.1rem; display: grid; gap: .45rem; }

/* ============================================================
   ACT-126 — Guías como artículos del sitio: cabecera, índice, cuerpo, tarjetas y portadas ilustradas
   ============================================================ */
/* Cabecera (usa .cl-hero) */
.cl-guia-hero { padding: 3.5rem 0 4rem; }
.cl-guia-hero--indice { padding: 4rem 0 4.5rem; }
.cl-guia-hero__titulo { font-family: var(--cl-font-display); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; color: #fff; font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
.cl-guia-hero__entrada { font-size: 1.05rem; max-width: 620px; }
.cl-guia-hero--indice .cl-hero__sub { max-width: 680px; }
.cl-guia-ruta { display: flex; align-items: center; gap: .45rem; font-size: .85rem; }
.cl-guia-ruta a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.cl-guia-ruta a:hover { color: #fff; text-decoration: underline; }
.cl-guia-ruta i { font-size: .7rem; color: rgba(255, 255, 255, .5); }
.cl-guia-hero__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .85rem; color: rgba(255, 255, 255, .75); }
.cl-guia-hero__meta i { margin-right: .4rem; color: var(--cl-extra-2); }
.cl-guia-hero__portada { display: flex; justify-content: center; }

/* Cuerpo */
.cl-guia-seccion { background: var(--cl-fondo, #F6F8FB); }
.cl-guia { background: var(--cl-superficie); border: 1px solid var(--cl-borde); border-radius: calc(var(--cl-radio) * 1.2); box-shadow: var(--cl-sombra-md); padding: 2.6rem 3rem; counter-reset: seccion; }
.cl-guia > :first-child { margin-top: 0; }
.cl-guia h2 { counter-increment: seccion; display: flex; align-items: baseline; gap: .75rem; font-family: var(--cl-font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: -.015em; color: var(--cl-tinta); margin: 2.6rem 0 1rem; scroll-margin-top: 90px; }
.cl-guia h2::before { content: counter(seccion, decimal-leading-zero); flex: none; font-size: .78rem; font-weight: 700; color: var(--cl-primario-texto); background: var(--cl-primario-tinte); border-radius: 8px; padding: .25rem .5rem; transform: translateY(-.15rem); }
.cl-guia h3 { font-size: 1.08rem; font-weight: 700; color: var(--cl-tinta); margin: 1.6rem 0 .6rem; }
.cl-guia p, .cl-guia li { font-size: 1.04rem; line-height: 1.75; color: var(--cl-cuerpo); }
.cl-guia strong { color: var(--cl-tinta); }
.cl-guia ul, .cl-guia ol { padding-left: 1.3rem; margin-bottom: 1.2rem; }
.cl-guia li { margin-bottom: .35rem; }
.cl-guia li::marker { color: var(--cl-primario); font-weight: 700; }
.cl-guia hr { margin: 2.4rem 0; border-color: var(--cl-borde); opacity: 1; }
.cl-guia hr + p { padding: 1.1rem 1.3rem; border-radius: var(--cl-radio); background: var(--cl-primario-tinte); border: 1px solid color-mix(in srgb, var(--cl-primario) 25%, var(--cl-borde)); color: var(--cl-tinta); }
.cl-guia p:has(> em:only-child) { font-size: .88rem; color: var(--cl-muted); margin-bottom: .4rem; }
.cl-guia blockquote { position: relative; margin: 1.4rem 0 1.6rem; padding: 2.2rem 1.4rem 1.2rem; border: 1px solid var(--cl-borde); border-left: 4px solid var(--cl-teal); border-radius: var(--cl-radio); background: linear-gradient(135deg, var(--cl-superficie-2), var(--cl-superficie) 80%); }
.cl-guia blockquote p { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 1.05rem; color: var(--cl-tinta); }
.cl-guia-cita__rotulo { position: absolute; top: .7rem; left: 1.4rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cl-teal-texto); }
.cl-guia .table-responsive { border: 1px solid var(--cl-borde); border-radius: var(--cl-radio); margin: 1.2rem 0 1.6rem; }
/* ACT-190: en pantallas chicas, columnas con ancho mínimo (la tabla se desplaza de lado en vez de crecer hacia abajo) */
@media (max-width: 575.98px) { .cl-guia .cl-doc-tabla th, .cl-guia .cl-doc-tabla td { min-width: 6.5rem; } }
.cl-guia .cl-doc-tabla { margin: 0; }
.cl-guia .cl-doc-tabla th { background: var(--cl-superficie-2); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.cl-guia .cl-doc-tabla tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--cl-superficie-2) 55%, transparent); }
.cl-guia a.cl-link { overflow-wrap: anywhere; }

/* Índice lateral */
.cl-guia-indice { position: sticky; top: 92px; display: grid; gap: 1rem; }
.cl-guia-indice__caja { background: var(--cl-superficie); border: 1px solid var(--cl-borde); border-radius: var(--cl-radio); padding: 1rem 1.1rem; box-shadow: var(--cl-sombra-md); }
.cl-guia-indice__caja summary { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cl-muted); cursor: pointer; list-style: none; }
.cl-guia-indice__caja summary::-webkit-details-marker { display: none; }
.cl-guia-indice__caja ol { list-style: none; counter-reset: indice; padding: 0; margin: .7rem 0 0; display: grid; gap: .1rem; }
.cl-guia-indice__caja li { counter-increment: indice; }
.cl-guia-indice__caja a { display: flex; gap: .5rem; padding: .35rem .4rem; border-radius: 6px; font-size: .86rem; line-height: 1.35; color: var(--cl-cuerpo); text-decoration: none; }
.cl-guia-indice__caja a::before { content: counter(indice, decimal-leading-zero); flex: none; font-size: .72rem; font-weight: 700; color: var(--cl-primario-texto); padding-top: .1rem; }
.cl-guia-indice__caja a:hover { background: var(--cl-primario-tinte); color: var(--cl-tinta); }
.cl-guia-indice__cta { border-radius: var(--cl-radio); padding: 1.1rem; color: #fff; background: radial-gradient(220px 160px at 90% 0%, color-mix(in srgb, var(--cl-halo, var(--cl-teal)) 30%, transparent), transparent 70%), var(--cl-grad-marca); box-shadow: var(--cl-sombra-md); }
.cl-guia-indice__cta b { display: block; font-family: var(--cl-font-display); margin-bottom: .3rem; }
.cl-guia-indice__cta p { font-size: .85rem; color: rgba(255, 255, 255, .85); margin-bottom: .8rem; }

/* Tarjetas */
.cl-guia-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; text-decoration: none; background: var(--cl-superficie); border: 1px solid var(--cl-borde); border-radius: calc(var(--cl-radio) * 1.2); box-shadow: var(--cl-sombra-md); transition: transform .15s, box-shadow .15s; }
.cl-guia-card:hover { transform: translateY(-4px); box-shadow: var(--cl-sombra-lg); }
.cl-guia-card__portada { position: relative; display: flex; justify-content: center; align-items: center; padding: 1.1rem 0; overflow: hidden;
  background: radial-gradient(360px 240px at 85% 0%, color-mix(in srgb, var(--cl-halo, var(--cl-teal)) 28%, transparent), transparent 70%), var(--cl-grad-marca); }
.cl-guia-card__portada::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 32px 32px; }
.cl-guia-card__cuerpo { display: flex; flex-direction: column; gap: .5rem; padding: 1.3rem 1.5rem 1.4rem; flex: 1; }
.cl-guia-card__etiqueta { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--cl-teal-texto); }
.cl-guia-card__etiqueta i { margin-right: .35rem; }
.cl-guia-card__titulo { font-family: var(--cl-font-display); font-weight: 700; font-size: 1.12rem; line-height: 1.3; color: var(--cl-tinta); }
.cl-guia-card__resumen { font-size: .93rem; color: var(--cl-cuerpo); }
.cl-guia-card__pie { margin-top: auto; padding-top: .6rem; display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; color: var(--cl-muted); }
.cl-guia-card__leer { font-weight: 600; color: var(--cl-primario-texto); }
.cl-guia-card--destacada { flex-direction: row; }
.cl-guia-card--destacada .cl-guia-card__portada { flex: 0 0 55%; padding: 1.6rem 0; }
.cl-guia-card--destacada .cl-guia-card__cuerpo { justify-content: center; padding: 2rem 2.2rem; }
.cl-guia-card--destacada .cl-guia-card__titulo { font-size: 1.6rem; }
.cl-guia-card--destacada .cl-guia-card__resumen { font-size: 1.02rem; }

/* Portadas: lienzo de 480×300 escalado */
.cl-gp { position: relative; width: calc(480px * var(--gp-escala, 1)); height: calc(300px * var(--gp-escala, 1)); flex: none; }
.cl-gp__lienzo { position: absolute; left: 0; top: 0; width: 480px; height: 300px; transform: scale(var(--gp-escala, 1)); transform-origin: 0 0; }
.cl-gp__lienzo > * { position: absolute; }
.cl-gp-chip { display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border-radius: 12px; background: var(--cl-superficie); border: 1px solid var(--cl-borde); box-shadow: 0 10px 26px rgba(0, 0, 0, .25); font-size: 12.5px; font-weight: 700; color: var(--cl-tinta); z-index: 3; }
.cl-gp-chip i { font-size: 17px; color: var(--cl-primario); }
.cl-gp-chip small { display: block; font-weight: 500; font-size: 10.5px; color: var(--cl-muted); }
.cl-gp-tarjeta, .cl-gp-doc, .cl-gp-acta { background: var(--cl-superficie); border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .3); }
.cl-gp-linea { display: block; height: 6px; border-radius: 3px; background: var(--cl-superficie-2); margin: 6px 0; }
/* 1. Decreto */
.cl-gp-doc { left: 70px; top: 18px; width: 330px; padding: 18px 20px 20px; transform: rotate(-2deg); }
.cl-gp-doc__cab { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--cl-tinta); padding-bottom: 6px; margin-bottom: 8px; }
.cl-gp-doc__cab span { font-family: var(--cl-font-display); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cl-tinta); }
.cl-gp-doc__cab small { font-size: 9.5px; color: var(--cl-muted); }
.cl-gp-doc > b { display: block; text-align: center; font-size: 12px; color: var(--cl-tinta); margin-bottom: 4px; }
.cl-gp-doc p { font-size: 11.5px; line-height: 1.45; margin: 6px 0; color: var(--cl-tinta); }
.cl-gp-doc mark { padding: 1px 3px; border-radius: 3px; color: inherit; background: color-mix(in srgb, var(--cl-teal) 28%, transparent); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.cl-gp-sello { right: 34px; bottom: 26px; width: 86px; height: 86px; border-radius: 50%; display: grid; place-content: center; text-align: center; font-family: var(--cl-font-display); font-weight: 800; font-size: 22px; color: #fff; background: var(--cl-grad-primario, linear-gradient(135deg, var(--cl-primario), var(--cl-teal))); border: 4px solid rgba(255, 255, 255, .85); box-shadow: 0 12px 28px rgba(0, 0, 0, .35); transform: rotate(10deg); z-index: 3; }
.cl-gp-sello small { font-size: 10px; font-weight: 600; letter-spacing: .04em; }
/* 2. Gráfica */
.cl-gp-grafica { left: 90px; top: 40px; width: 300px; padding: 16px 18px 12px; }
.cl-gp-grafica > small { display: block; font-size: 11px; font-weight: 700; color: var(--cl-muted); margin-bottom: 10px; }
.cl-gp-barras { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: end; height: 170px; }
.cl-gp-barras span { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.cl-gp-barras span::before { content: ""; order: 2; width: 100%; height: var(--h); border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, var(--cl-primario), var(--cl-teal)); }
.cl-gp-barras span:last-child::before { background: linear-gradient(180deg, var(--cl-teal), color-mix(in srgb, var(--cl-teal) 60%, #fff)); }
.cl-gp-barras b { order: 1; font-size: 11.5px; color: var(--cl-tinta); margin-bottom: 4px; }
.cl-gp-barras i { order: 3; font-style: normal; font-size: 10px; color: var(--cl-muted); margin-top: 4px; }
/* 3. Tarjeta de papel contra teléfono */
.cl-gp-cartulina { left: 40px; top: 36px; width: 170px; padding: 14px 14px 30px; border-radius: 6px; background: color-mix(in srgb, #F5E9C8 92%, var(--cl-superficie)); box-shadow: 0 16px 34px rgba(0, 0, 0, .3); transform: rotate(-6deg); }
.cl-gp-cartulina > b { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #6B5B3A; border-bottom: 1px dashed #B9A675; padding-bottom: 6px; margin-bottom: 6px; }
.cl-gp-cartulina__fila { display: grid; grid-template-columns: 30px 1fr 1fr; gap: 4px; font-size: 10.5px; color: #6B5B3A; padding: 4px 0; border-bottom: 1px dotted #CDBB8C; }
.cl-gp-cartulina__fila code { font-size: 11px; color: #8A2E2E; background: none; padding: 0; font-family: "Courier New", monospace; }
.cl-gp-cartulina__pie, .cl-gp-cel__pie { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.cl-gp-cartulina__pie { background: #B9A675; color: #fff; }
.cl-gp-vs { left: 214px; top: 118px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-family: var(--cl-font-display); font-weight: 800; font-size: 16px; color: var(--cl-tinta); background: var(--cl-superficie); box-shadow: 0 10px 24px rgba(0, 0, 0, .3); z-index: 3; }
.cl-gp-cel { left: 284px; top: 14px; width: 150px; height: 270px; border-radius: 26px; padding: 9px; background: var(--cl-grafito-hover, #1F2937); border: 4px solid rgba(255, 255, 255, .18); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); transform: rotate(4deg); }
.cl-gp-cel__pantalla { height: 100%; border-radius: 18px; background: var(--cl-superficie); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; text-align: center; }
.cl-gp-cel__pantalla small { font-size: 10px; color: var(--cl-muted); }
.cl-gp-cel__pantalla b { font-family: var(--cl-font-display); font-size: 22px; color: var(--cl-tinta); letter-spacing: -.02em; }
.cl-gp-cel__boton { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 9px; font-size: 10.5px; font-weight: 700; color: #fff; background: linear-gradient(90deg, var(--cl-primario), var(--cl-teal)); }
.cl-gp-cel__folio { font-size: 9px !important; }
.cl-gp-cel__pie { background: var(--cl-teal); color: #fff; }
/* 4. Laptop */
.cl-gp-laptop { left: 100px; top: 38px; width: 290px; }
.cl-gp-laptop__pantalla { background: var(--cl-superficie); border: 8px solid var(--cl-grafito-hover, #1F2937); border-bottom-width: 12px; border-radius: 12px 12px 0 0; overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, .3); }
.cl-gp-laptop__barra { display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: var(--cl-superficie-2); border-bottom: 1px solid var(--cl-borde); }
.cl-gp-laptop__barra i { width: 7px; height: 7px; border-radius: 50%; background: var(--cl-borde-fuerte, #CBD5E1); }
.cl-gp-laptop__barra span { margin-left: 8px; font-size: 9px; color: var(--cl-muted); }
.cl-gp-laptop__cuerpo { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 12px 26px; }
.cl-gp-laptop__cuerpo small { font-size: 10.5px; color: var(--cl-muted); }
.cl-gp-laptop__cuerpo b { font-family: var(--cl-font-display); font-size: 28px; color: var(--cl-tinta); letter-spacing: -.02em; }
.cl-gp-laptop__base { width: 340px; height: 14px; margin-left: -25px; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #CBD5E1, #94A3B8); box-shadow: 0 12px 24px rgba(0, 0, 0, .3); }
/* 5. Acta */
.cl-gp-acta { left: 60px; top: 30px; width: 270px; padding: 16px 18px 18px; border-radius: 12px 12px 0 0; transform: rotate(-3deg); }
.cl-gp-acta::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px; background: radial-gradient(circle at 7px 10px, transparent 6px, var(--cl-superficie) 6.5px) 0 0 / 14px 10px repeat-x; }
.cl-gp-acta__cab { display: flex; gap: 10px; align-items: center; padding-bottom: 10px; border-bottom: 1px dashed var(--cl-borde-fuerte, #CBD5E1); }
.cl-gp-acta__cab > i { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 16px; color: var(--cl-primario); background: var(--cl-primario-tinte); }
.cl-gp-acta__cab b { display: block; font-size: 13px; color: var(--cl-tinta); }
.cl-gp-acta__cab small { display: block; font-size: 10px; color: var(--cl-muted); }
.cl-gp-acta__monto { font-family: var(--cl-font-display); font-weight: 800; font-size: 25px; text-align: center; color: var(--cl-tinta); padding: 14px 0 10px; letter-spacing: -.02em; }
.cl-gp-acta__fila { display: flex; justify-content: space-between; font-size: 11px; padding: 4px 0; }
.cl-gp-acta__fila span { color: var(--cl-muted); }
.cl-gp-acta__fila b { color: var(--cl-tinta); }
.cl-gp-acta__barras { height: 26px; margin-top: 12px; opacity: .75; background: repeating-linear-gradient(90deg, #0b1220 0 2px, transparent 2px 4px, #0b1220 4px 5px, transparent 5px 8px, #0b1220 8px 11px, transparent 11px 13px); }

/* ACT-190: portadas de las guías de One Checker */
.cl-gp-lista { left: 40px; top: 30px; width: 270px; padding: 16px 18px; transform: rotate(-2deg); }
.cl-gp-lista > small, .cl-gp-turnos > small, .cl-gp-dia > small { display: block; font-size: 11px; font-weight: 700; color: var(--cl-muted); margin-bottom: 8px; }
.cl-gp-lista__fila { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--cl-borde); font-size: 12.5px; font-weight: 600; color: var(--cl-tinta); }
.cl-gp-lista__fila:last-child { border-bottom: 0; }
.cl-gp-lista__fila i { font-size: 17px; color: var(--cl-muted); }
.cl-gp-lista__fila.hecho i { color: var(--cl-teal); }
.cl-gp-lista__fila small { display: block; font-size: 10px; font-weight: 500; color: var(--cl-muted); }
.cl-gp-recibo { width: 270px; }
.cl-gp-recibo__fila { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 9px 0; border-bottom: 1px dotted var(--cl-borde); }
.cl-gp-recibo__fila span { color: var(--cl-tinta); }
.cl-gp-recibo__fila b { font-family: var(--cl-font-display); color: var(--cl-tinta); }
.cl-gp-recibo__fila b.x2, .cl-gp-recibo__fila b.x3 { padding: 2px 10px; border-radius: 999px; color: #fff; background: var(--cl-primario); }
.cl-gp-recibo__fila b.x3 { background: var(--cl-teal); }
.cl-gp-turnos { left: 34px; top: 40px; width: 300px; padding: 16px 18px 14px; transform: rotate(-2deg); }
.cl-gp-turnos__dias, .cl-gp-turnos__fila { display: grid; grid-template-columns: 72px repeat(7, 1fr); gap: 5px; align-items: center; }
.cl-gp-turnos__dias i { font-style: normal; font-size: 10px; font-weight: 700; text-align: center; color: var(--cl-muted); }
.cl-gp-turnos__fila { margin-top: 8px; }
.cl-gp-turnos__fila span { font-size: 11px; font-weight: 700; color: var(--cl-tinta); }
.cl-gp-turnos__fila i { height: 22px; border-radius: 6px; background: var(--cl-superficie-2); }
.cl-gp-turnos__fila i.a { background: color-mix(in srgb, var(--cl-teal) 70%, #fff); }
.cl-gp-turnos__fila i.b { background: var(--cl-primario); }
.cl-gp-turnos__fila i.c { background: var(--cl-grafito-hover, #1F2937); }
.cl-gp-carpeta { left: 50px; top: 34px; width: 280px; transform: rotate(-3deg); }
.cl-gp-carpeta__pestana { display: inline-block; padding: 6px 16px 10px; border-radius: 10px 10px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6B5B3A; background: #E9D9A8; }
.cl-gp-carpeta__hoja { margin-top: -4px; padding: 16px 18px 18px; border-radius: 0 12px 12px 12px; background: var(--cl-superficie); box-shadow: 0 18px 40px rgba(0, 0, 0, .3); border-top: 6px solid #E9D9A8; }
.cl-gp-carpeta__hoja > b { display: block; font-size: 13px; color: var(--cl-tinta); margin-bottom: 4px; }
.cl-gp-dia { left: 40px; top: 32px; width: 280px; padding: 16px 18px; transform: rotate(-2deg); }
.cl-gp-dia__fila { display: grid; grid-template-columns: 46px 14px 1fr; gap: 8px; align-items: center; padding: 8px 0; font-size: 12px; color: var(--cl-tinta); }
.cl-gp-dia__fila code { font-family: var(--cl-font-display); font-size: 13px; font-weight: 700; color: var(--cl-tinta); background: none; padding: 0; }
.cl-gp-dia__fila i { width: 12px; height: 12px; border-radius: 50%; background: var(--cl-borde-fuerte, #CBD5E1); box-shadow: 0 0 0 3px var(--cl-superficie-2); }
.cl-gp-dia__fila.aviso i { background: #f59e0b; }
.cl-gp-dia__fila.aviso span { color: #b45309; font-weight: 700; }
.cl-gp-dia__fila.ok i { background: var(--cl-teal); }

@media (max-width: 991.98px) {
  .cl-guia-hero .col-lg-5 { order: -1; }
  .cl-guia-indice { position: static; }
  .cl-guia-card--destacada { flex-direction: column; }
  .cl-guia-card--destacada .cl-guia-card__portada { flex: none; }
  .cl-guia-card--destacada .cl-guia-card__titulo { font-size: 1.3rem; }
}
@media (max-width: 575.98px) {
  .cl-guia { padding: 1.6rem 1.25rem; }
  .cl-guia h2 { font-size: 1.2rem; }
  .cl-guia p, .cl-guia li { font-size: 1rem; }
  .cl-guia-hero__portada .cl-gp { --gp-escala: .7 !important; }
  .cl-guia-card .cl-gp { --gp-escala: .64 !important; }
  .cl-guia-card--destacada .cl-guia-card__cuerpo { padding: 1.3rem 1.5rem; }
}

/* ============================================================
   Página /Instalar y cartel /Instalar/Cartel (PWA, ACT-191)
   ============================================================ */
.cl-inst { background: var(--cl-fondo); min-height: 100vh; }
.cl-inst-barra {
  background: var(--cl-superficie);
  border-bottom: 1px solid var(--cl-borde);
  padding-top: env(safe-area-inset-top);
}
.cl-inst-barra__fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 62px; }
.cl-inst-barra .cl-marca { text-decoration: none; }

/* Ficha de la app (banda oscura de la marca) */
.cl-inst-hero {
  position: relative;
  overflow: hidden;
  color: white;
  padding: 2.5rem 0 2.75rem;
  background:
    radial-gradient(520px 380px at 88% -10%, color-mix(in srgb, var(--cl-halo, var(--cl-teal)) 32%, transparent), transparent 70%),
    radial-gradient(420px 300px at -5% 110%, color-mix(in srgb, var(--cl-primario) 26%, transparent), transparent 70%),
    var(--cl-grad-marca);
}
.cl-inst-ficha { display: flex; align-items: center; gap: 1.15rem; }
.cl-inst-ficha__icono { flex-shrink: 0; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .38)); }
.cl-inst-ficha__icono svg { width: 88px; height: 88px; display: block; }
.cl-inst-ficha__nombre {
  font-family: var(--cl-font-display); font-weight: 800; letter-spacing: -.02em;
  font-size: 2rem; line-height: 1.1; color: white; margin: 0 0 .2rem;
}
.cl-inst-ficha__lema { color: rgba(255, 255, 255, .82); font-size: 1rem; margin: 0; }
.cl-inst-ficha__datos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.25rem; }
.cl-inst-ficha__datos span {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px; padding: .25rem .65rem;
}
.cl-inst-ficha__datos i { color: var(--cl-extra-2); }

.cl-inst-accion { margin-top: 1.9rem; max-width: 540px; }
.cl-inst-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; max-width: 380px; min-height: 58px;
  font-size: 17px; font-weight: 600;
  color: var(--cl-primario-texto); background: var(--cl-superficie);
  border: 0; border-radius: 16px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cl-inst-boton:hover, .cl-inst-boton:focus-visible { color: var(--cl-primario-texto); background: var(--cl-superficie); transform: translateY(-1px); box-shadow: 0 18px 38px rgba(0, 0, 0, .32); }
.cl-inst-boton:active { transform: translateY(1px); }
.cl-inst-boton i { font-size: 1.2rem; }
.cl-inst-boton--claro { color: white; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28); box-shadow: none; }
.cl-inst-boton--claro:hover, .cl-inst-boton--claro:focus-visible { color: white; background: rgba(255, 255, 255, .16); box-shadow: none; }
.cl-inst-accion__nota { color: rgba(255, 255, 255, .78); font-size: 13.5px; margin: .75rem 0 0; }
.cl-inst-accion__fila { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.cl-inst-accion__fila .cl-inst-boton { width: auto; flex: 1 1 200px; }

.cl-inst-listo, .cl-inst-aviso {
  display: flex; gap: .9rem; align-items: flex-start;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px; padding: 1rem 1.1rem;
}
.cl-inst-listo__ico {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cl-teal); color: white; font-size: 1.3rem;
}
.cl-inst-listo__titulo, .cl-inst-aviso__titulo { color: white; font-weight: 600; margin: 0 0 .2rem; }
.cl-inst-listo__texto, .cl-inst-aviso__texto { color: rgba(255, 255, 255, .8); font-size: 14px; margin: 0; }
.cl-inst-aviso { border-left: 3px solid var(--cl-advertencia); }
.cl-inst-aviso > i { font-size: 1.3rem; color: var(--cl-advertencia-tinte); margin-top: .1rem; }

.cl-inst-qr {
  display: flex; align-items: center; gap: 1.25rem;
  background: var(--cl-superficie); color: var(--cl-cuerpo);
  border-radius: 18px; padding: 1rem 1.25rem 1rem 1rem;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .25);
}
.cl-inst-qr__codigo { flex-shrink: 0; width: 148px; }
.cl-inst-qr__codigo svg { width: 100%; height: auto; display: block; }
.cl-inst-qr__titulo { color: var(--cl-tinta); font-weight: 700; font-size: 1.05rem; margin: 0 0 .3rem; }
.cl-inst-qr__texto { font-size: 14px; margin: 0 0 .5rem; }
.cl-inst-telefono { transform: rotate(-4deg); }
.cl-inst-telefono .cl-telefono__app--check svg { width: 40px; height: 40px; }

/* Secciones */
.cl-inst-seccion { padding: 3.5rem 0; }
.cl-inst-seccion--tinte { background: var(--cl-superficie); border-top: 1px solid var(--cl-borde); border-bottom: 1px solid var(--cl-borde); }
.cl-inst-encabezado { text-align: center; margin-bottom: 1.75rem; }
.cl-inst-titulo {
  font-family: var(--cl-font-display); font-weight: 700; letter-spacing: -.02em;
  font-size: 2rem; color: var(--cl-tinta); margin: 0;
}

.cl-inst-tabs {
  display: flex; width: max-content; max-width: 100%; margin: 0 auto 2rem;
  background: var(--cl-superficie-2); border: 1px solid var(--cl-borde);
  border-radius: 999px; padding: 4px;
}
.cl-inst-tabs button {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 0; background: transparent; color: var(--cl-cuerpo);
  font-weight: 600; font-size: 15px;
  padding: .55rem 1.4rem; border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
.cl-inst-tabs button[aria-selected="true"] { background: var(--cl-superficie); color: var(--cl-tinta); box-shadow: var(--cl-sombra-md); }

.cl-inst-pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.cl-inst-paso {
  background: var(--cl-superficie); border: 1px solid var(--cl-borde);
  border-radius: 18px; padding: .75rem .75rem 1.35rem;
  box-shadow: var(--cl-sombra-sm); text-align: center;
}
.cl-inst-paso__dibujo { background: var(--cl-superficie-2); border-radius: 13px; padding: .6rem .4rem 0; overflow: hidden; }
.cl-inst-paso__num {
  position: relative; display: inline-grid; place-items: center;
  width: 34px; height: 34px; margin-top: -17px;
  border-radius: 50%; border: 3px solid var(--cl-superficie);
  background: var(--cl-grad-primario); color: white;
  font-weight: 700; font-size: 15px;
}
.cl-inst-paso h3 { font-size: 1.08rem; font-weight: 700; color: var(--cl-tinta); margin: .55rem 0 .4rem; }
.cl-inst-paso p { font-size: 14px; margin: 0 .5rem; }
.cl-inst-nota {
  display: flex; gap: .55rem; align-items: flex-start;
  max-width: 760px; margin: 1.5rem auto 0;
  background: var(--cl-info-tinte); color: var(--cl-info-texto);
  border-radius: 12px; padding: .8rem 1rem; font-size: 13.5px;
}
.cl-inst-nota i { margin-top: .1rem; }

.cl-inst-alterno {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 1.5rem;
  max-width: 820px; margin: 1.5rem auto 0;
  background: var(--cl-superficie); border: 1px solid var(--cl-borde);
  border-radius: 18px; padding: 1rem 1.5rem 1rem 1rem;
}
.cl-inst-alterno__dibujo { background: var(--cl-superficie-2); border-radius: 13px; padding: .6rem .4rem 0; overflow: hidden; }
.cl-inst-alterno h3 { font-size: 1.08rem; font-weight: 700; color: var(--cl-tinta); margin: 0 0 .4rem; }
.cl-inst-alterno p { font-size: 14px; margin: 0 0 .6rem; }
.cl-inst-alterno--destacado { animation: cl-inst-destacar 1.4s ease-out 2; }
@keyframes cl-inst-destacar {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cl-primario) 45%, transparent); border-color: var(--cl-primario); }
  100% { box-shadow: 0 0 0 18px transparent; border-color: var(--cl-borde); }
}

.cl-inst-beneficios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.cl-inst-beneficio { background: var(--cl-fondo); border: 1px solid var(--cl-borde); border-radius: 16px; padding: 1.25rem; }
.cl-inst-beneficio__ico {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--cl-primario-tinte); color: var(--cl-primario-texto); font-size: 1.25rem; margin-bottom: .8rem;
}
.cl-inst-beneficio h3 { font-size: 1rem; font-weight: 700; color: var(--cl-tinta); margin: 0 0 .3rem; }
.cl-inst-beneficio p { font-size: 14px; margin: 0; }

.cl-inst-compartir {
  display: grid; grid-template-columns: minmax(0, 1fr) 230px; align-items: center; gap: 2.5rem;
  max-width: 920px; margin: 0 auto;
  background: var(--cl-superficie); border: 1px solid var(--cl-borde);
  border-radius: 22px; padding: 2.25rem 2.5rem; box-shadow: var(--cl-sombra-md);
}
.cl-inst-compartir .cl-inst-titulo { font-size: 1.6rem; margin-bottom: .6rem; }
.cl-inst-compartir__texto > p:not(.cl-eyebrow) { margin-bottom: 1rem; }
.cl-inst-compartir__qr svg { width: 100%; height: auto; display: block; }
.cl-inst-compartir .cl-inst-accion__fila { margin-top: .9rem; }
.cl-inst-enlace {
  display: flex; align-items: center; gap: .5rem;
  background: var(--cl-superficie-2); border: 1px solid var(--cl-borde);
  border-radius: 12px; padding: .35rem .35rem .35rem .85rem;
}
.cl-inst-enlace__url {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 14px; font-weight: 500; color: var(--cl-tinta);
}
.cl-inst-enlace__url i { color: var(--cl-primario); margin-right: .3rem; }
.btn.cl-inst-copiado { background: var(--cl-teal) !important; border-color: var(--cl-teal) !important; color: white !important; }

.cl-inst-faq { background: var(--cl-fondo); border: 1px solid var(--cl-borde); border-radius: 16px; padding: .25rem 1.25rem; }
.cl-inst-faq details { border-bottom: 1px solid var(--cl-borde); padding: .9rem 0; }
.cl-inst-faq details:last-child { border-bottom: none; }
.cl-inst-faq summary { cursor: pointer; font-weight: 600; color: var(--cl-tinta); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.cl-inst-faq summary::-webkit-details-marker { display: none; }
.cl-inst-faq summary::after { content: "+"; color: var(--cl-primario); font-weight: 700; font-size: 1.15rem; line-height: 1; }
.cl-inst-faq details[open] summary::after { content: "–"; }
.cl-inst-faq p { font-size: 14.5px; margin: .55rem 0 0; }

.cl-inst-pie {
  background: var(--cl-superficie); border-top: 1px solid var(--cl-borde);
  padding: 1.4rem 0 calc(1.4rem + env(safe-area-inset-bottom));
  font-size: 13px; color: var(--cl-muted-fuerte);
}
.cl-inst-pie a { color: var(--cl-cuerpo); text-decoration: none; }
.cl-inst-pie a:hover { color: var(--cl-primario-texto); }

@media (min-width: 992px) {
  .cl-inst-hero { padding: 4.25rem 0 4.5rem; }
  .cl-inst-ficha__nombre { font-size: 2.6rem; }
  .cl-inst-ficha__icono svg { width: 104px; height: 104px; }
  .cl-inst-titulo { font-size: 2.2rem; }
  .cl-inst-seccion { padding: 4.5rem 0; }
}
@media (max-width: 991.98px) {
  .cl-inst-beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .cl-inst-pasos { grid-template-columns: minmax(0, 1fr); max-width: 400px; margin: 0 auto; }
  .cl-inst-alterno { grid-template-columns: minmax(0, 1fr); text-align: center; padding: 1rem 1rem 1.25rem; max-width: 400px; }
  .cl-inst-alterno__dibujo { max-width: 260px; margin: 0 auto; }
  .cl-inst-compartir { grid-template-columns: minmax(0, 1fr); text-align: center; padding: 1.75rem 1.25rem; gap: 1.5rem; }
  .cl-inst-compartir__qr { width: 200px; margin: 0 auto; order: -1; }
  .cl-inst-compartir .cl-inst-accion__fila { justify-content: center; }
  .cl-inst-qr { flex-direction: column; text-align: center; }
}
@media (max-width: 575.98px) {
  .cl-inst-seccion { padding: 2.75rem 0; }
  .cl-inst-titulo { font-size: 1.65rem; }
  .cl-inst-ficha__nombre { font-size: 1.75rem; }
  .cl-inst-ficha__icono svg { width: 76px; height: 76px; }
  .cl-inst-beneficios { grid-template-columns: minmax(0, 1fr); }
  .cl-inst-boton { max-width: none; }
}

/* Dibujos de /Instalar (Compartidos/IlustracionInstalar.razor) */
.ii { width: 100%; height: auto; display: block; }
.ii text { font-family: var(--cl-font); font-size: 9px; fill: var(--cl-tinta); }
.ii .ii-texto--tenue { fill: var(--cl-muted-fuerte); }
.ii .ii-texto--chico { font-size: 7.5px; }
.ii .ii-texto--fuerte { font-weight: 700; }
.ii .ii-texto--acento { fill: var(--cl-primario-texto); font-weight: 600; }
.ii .ii-texto--acento-fuerte { fill: var(--cl-primario-texto); font-weight: 700; }
.ii .ii-texto--info { fill: var(--cl-info); }
.ii .ii-texto--blanco { fill: white; }
.ii .ii-texto--hora { font-family: var(--cl-font-display); font-size: 20px; font-weight: 700; }
.ii-marco { fill: var(--cl-superficie); stroke: var(--cl-grafito); stroke-width: 5; }
.ii-marco--atenuado { fill: color-mix(in srgb, var(--cl-tinta) 40%, var(--cl-superficie)); }
.ii-marco--fondo { fill: var(--cl-ii-fondo, var(--cl-sidebar-fondo)); } /* la piel de una marca con lateral clara lo redefine */
.ii-linea { fill: var(--cl-borde-fuerte); }
.ii-linea--fuerte { fill: var(--cl-muted); }
.ii-linea--sobre-oscuro { fill: rgba(255, 255, 255, .3); }
.ii-tarjeta { fill: var(--cl-superficie-2); stroke: var(--cl-borde); }
.ii-boton { fill: var(--cl-primario); }
.ii-menu { fill: var(--cl-superficie); stroke: var(--cl-borde-fuerte); stroke-width: .8; filter: drop-shadow(0 6px 10px rgba(15, 23, 42, .18)); }
.ii-resalte { fill: var(--cl-primario-tinte); stroke: var(--cl-primario); stroke-width: 1.2; }
.ii-trazo { fill: none; stroke: var(--cl-cuerpo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ii-trazo--acento { stroke: var(--cl-primario-texto); }
.ii-barra { fill: var(--cl-superficie-2); }
.ii-barra--pildora { stroke: var(--cl-borde); stroke-width: .8; }
.ii-campo { fill: var(--cl-superficie); stroke: var(--cl-borde-fuerte); stroke-width: .8; }
.ii-toque { fill: var(--cl-primario-tinte); stroke: var(--cl-primario); stroke-width: 1.2; }
.ii-toque-suave { fill: var(--cl-info-tinte); }
.ii-punto { fill: var(--cl-primario-texto); }
.ii-punto--oscuro { fill: var(--cl-tinta); }
.ii-hoja { fill: var(--cl-fondo); }
.ii-lista { fill: var(--cl-superficie); }
.ii-app { fill: var(--cl-borde-fuerte); }
.ii-icono-gris { fill: none; stroke: var(--cl-muted); stroke-width: 1.2; }
.ii-separador { stroke: var(--cl-borde); stroke-width: 1; }
.ii-switch { fill: var(--cl-teal); }
.ii-switch-perilla { fill: white; }
.ii-dedo { fill: white; opacity: .45; }
.ii-app-inicio { fill: rgba(255, 255, 255, .16); }
.ii-toque-anillo {
  fill: none; stroke: var(--cl-primario); stroke-width: 2;
  transform-box: fill-box; transform-origin: center;
  animation: cl-ii-pulso 1.9s ease-out infinite;
}
.ii-toque-anillo--claro { stroke: white; }
@keyframes cl-ii-pulso {
  0% { transform: scale(.82); opacity: .95; }
  70% { transform: scale(1.32); opacity: 0; }
  100% { transform: scale(1.32); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ii-toque-anillo { animation: none; opacity: .7; }
  .cl-inst-alterno--destacado { animation: none; border-color: var(--cl-primario); }
}

/* Cartel imprimible (tamaño carta). Las medidas van en cqw: el cartel escala igual en pantalla y en papel. */
.cl-cartel-pagina { background: var(--cl-superficie-2); min-height: 100vh; padding: 1.25rem 1rem 3rem; }
.cl-cartel-herramientas {
  max-width: 8.5in; margin: 0 auto 1rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
}
.cl-cartel-herramientas__nota { font-size: 13px; color: var(--cl-muted-fuerte); flex: 1 1 220px; text-align: center; }
.cl-cartel {
  container-type: inline-size;
  width: 100%; max-width: 8.5in; aspect-ratio: 8.5 / 11; margin: 0 auto;
  display: flex; flex-direction: column; overflow: hidden;
  background: white; border-radius: 6px; box-shadow: var(--cl-sombra-lg);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.cl-cartel__cabeza {
  display: flex; align-items: center; justify-content: center; gap: 2cqw;
  padding: 4cqw 6cqw;
  background:
    radial-gradient(60cqw 40cqw at 90% -20%, color-mix(in srgb, var(--cl-halo, var(--cl-teal)) 35%, transparent), transparent 70%),
    var(--cl-grad-marca);
}
.cl-cartel__cabeza svg { width: 8cqw; height: 8cqw; }
.cl-cartel__marca { font-family: var(--cl-font-display); font-weight: 700; font-size: 5cqw; color: white; letter-spacing: -.02em; white-space: nowrap; }
.cl-cartel__marca span { color: var(--cl-extra-2); font-weight: 600; }
.cl-cartel__cuerpo { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 5cqw 7cqw 4cqw; }
.cl-cartel__eyebrow { font-size: 1.8cqw; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cl-primario-texto); margin: 0 0 1.2cqw; }
.cl-cartel__titulo { font-family: var(--cl-font-display); font-weight: 800; font-size: 6cqw; line-height: 1.08; letter-spacing: -.025em; color: var(--cl-tinta); margin: 0 0 1.6cqw; max-width: 16ch; }
.cl-cartel__sub { font-size: 2.4cqw; color: var(--cl-cuerpo); margin: 0; }
.cl-cartel__qr { width: 40cqw; margin: 3.5cqw auto 1.2cqw; padding: 1.4cqw; border: .25cqw solid var(--cl-borde); border-radius: 3cqw; }
.cl-cartel__qr svg { width: 100%; height: auto; display: block; }
.cl-cartel__url { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 600; font-size: 2.8cqw; color: var(--cl-tinta); margin: 0; }
.cl-cartel__pasos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5cqw;
  margin-top: auto; width: 100%; text-align: left;
  border-top: .2cqw solid var(--cl-borde); padding-top: 3cqw;
}
.cl-cartel__so { display: flex; align-items: center; gap: 1cqw; font-weight: 700; font-size: 2.3cqw; color: var(--cl-tinta); margin: 0 0 1cqw; }
.cl-cartel__pasos ol { margin: 0; padding-left: 3cqw; font-size: 2cqw; color: var(--cl-cuerpo); }
.cl-cartel__pasos li { margin-bottom: .5cqw; }
.cl-cartel__pie { background: var(--cl-superficie-2); text-align: center; font-size: 1.8cqw; color: var(--cl-cuerpo); padding: 2cqw; }
@media print {
  @page { size: letter; margin: 0; }
  body { background: white !important; }
  .cl-ambiente, .cl-cartel-herramientas, #components-reconnect-modal { display: none !important; }
  .cl-cartel-pagina { padding: 0; background: none; min-height: 0; }
  .cl-cartel { max-width: none; width: 8.5in; height: 11in; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
}