/* ============================================================================
   CHEKAR — PÁGINA DEL CRM
   ============================================================================
   Se apoya en styles.css (tokens) y servicios.css (portada, cierre, nav).

   LA DECISIÓN DE FONDO: los tres niveles NO son tres tarjetas iguales una al
   lado de la otra. Son tres escalones apilados, y cada uno dice qué suma
   sobre el anterior.

   Por qué importa: una grilla de tres columnas idénticas con una lista de
   funciones en cada una invita a comparar precios y a buscar la trampa. Una
   escalera invita a ubicarse — "yo estoy acá" — que es la pregunta que
   realmente tiene el visitante. Y de paso evita el patrón de tres tarjetas
   de precios, que es de las señales más gastadas de la web.

     1. El problema
     2. Los tres niveles
     3. El aviso del costo de Meta
     4. Los límites
     5. Responsive
   ============================================================================ */

/* ============================================================================
   1. EL PROBLEMA
   ============================================================================ */
.crm-problema{
  background: var(--crema);
  padding: clamp(60px, 10vh, 110px) 0 clamp(46px, 7vh, 80px);
}
.crm-problema-txt{ max-width: 60ch; }
.crm-grande{
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.7rem);
  line-height: 1.32;
  color: var(--navy);
  margin: 0 0 24px;
}
.crm-problema-txt p{ color: rgba(5,25,72,.82); }
.crm-cierre{
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 2px solid var(--navy);
  font-size: var(--t-1);
  color: var(--navy);
}

/* ============================================================================
   2. LOS TRES NIVELES
   ============================================================================ */
.crm-niveles{
  background: var(--crema-2);
  padding: clamp(60px, 10vh, 110px) 0;
  border-top: 1px solid var(--linea-cla);
}
.crm-intro{ max-width: 46ch; margin-bottom: clamp(32px, 5vh, 50px); }
.crm-intro h2{ margin: 0 0 12px; }
.crm-intro p{ margin: 0; color: rgba(5,25,72,.78); }

.niveles{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.nivel{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: clamp(24px, 4vh, 34px);
  background: var(--crema);
  border: 1px solid var(--linea-cla);
  border-radius: var(--r-panel);
}

/* El segundo nivel es el que le sirve a la mayoría, y se marca — pero con un
   borde y una etiqueta, no con un cartel de "MÁS POPULAR" y un cambio de
   tamaño. Inflar una opción para empujarla es el truco que la gente ya
   reconoce, y acá vendemos lo contrario. */
.nivel-destacado{
  /* El naranja pleno sobre crema da 2.63:1 y no llega al 3:1 que pide la
     norma para el límite de un componente. El mismo naranja oscurecido sí. */
  border-color: var(--naranja-texto);
  box-shadow: 0 18px 44px -26px rgba(3,15,44,.34);
}
.nivel-destacado .nivel-num::after{
  content: "El más elegido";
  margin-left: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,102,51,.16);
  color: var(--naranja-texto);
  font-size: .6875rem;
  letter-spacing: .06em;
}

.nivel-num{
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--naranja-texto);
  margin-bottom: 8px;
}
.nivel-cab h3{
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
}
.nivel-para{
  margin: 0;
  max-width: 42ch;
  color: rgba(5,25,72,.78);
  font-size: .9375rem;
  line-height: 1.5;
}

.nivel-rotulo{
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(5,25,72,.72);
  margin-bottom: 12px;
}
.nivel-cuerpo ul{ list-style: none; margin: 0; padding: 0; }
.nivel-cuerpo li{
  position: relative;
  padding-left: 24px;
  margin-bottom: 9px;
  font-size: .9375rem;
  line-height: 1.5;
  color: rgba(5,25,72,.82);
}
/* El tilde de marca como viñeta, igual que en el resto del sitio */
.nivel-cuerpo li::before{
  content: "";
  position: absolute;
  left: 2px; top: .44em;
  width: 10px; height: 5px;
  border-left: 2.5px solid var(--naranja);
  border-bottom: 2.5px solid var(--naranja);
  transform: rotate(-45deg);
}

.nivel-opcional{
  margin: 16px 0 0;
  font-size: .875rem;
  color: rgba(5,25,72,.78);
}
.nivel-opcional b{ color: var(--navy); }
.nivel-prueba{
  display: inline-block;
  font-size: .875rem;
  margin-top: 14px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(102,204,204,.22);
  color: var(--navy);
  font-weight: 600;
}

/* ============================================================================
   3. EL AVISO DEL COSTO DE META
   ============================================================================
   Va sobre oscuro y ocupa su propia sección: es la información que nadie
   publica, y esconderla en un pie de página sería justo lo contrario de lo
   que hace valiosa a la página.
   ============================================================================ */
.crm-aviso{
  background: var(--navy-900);
  padding: clamp(56px, 9vh, 96px) 0;
}
.crm-aviso-caja{ max-width: 62ch; }
.crm-aviso .eyebrow{ color: var(--turquesa); }
.crm-aviso h2{ color: var(--tinta); margin: 0 0 18px; max-width: 22ch; }
.crm-aviso p{ color: var(--tinta-2); }
.crm-aviso b{ color: var(--tinta); }
.crm-aviso-nota{
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--linea-osc);
  font-size: .9375rem;
  color: rgba(245,245,245,.6);
}

/* ============================================================================
   4. LOS LÍMITES
   ============================================================================ */
.crm-limites{
  background: var(--crema);
  padding: clamp(56px, 9vh, 96px) 0;
}
.crm-lista-limites{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0 clamp(28px, 4vw, 56px);
}
.crm-lista-limites li{
  padding: 20px 0;
  border-top: 1px solid var(--linea-cla);
  font-size: .9375rem;
  line-height: 1.55;
  color: rgba(5,25,72,.78);
}
.crm-lista-limites b{ color: var(--navy); }
.crm-limites-pie{
  margin: 26px 0 0;
  max-width: 56ch;
  font-size: .9375rem;
  color: rgba(5,25,72,.72);
}

/* ============================================================================
   5. RESPONSIVE
   ============================================================================ */
@media (min-width: 900px){
  /* Dos columnas: a la izquierda a quién le sirve, a la derecha qué trae.
     La pregunta va antes que la respuesta, también en el eje horizontal. */
  .nivel{ grid-template-columns: minmax(0, 8fr) minmax(0, 11fr); gap: clamp(28px, 4vw, 56px); }
}
@media (max-width: 560px){
  .crm-lista-limites{ grid-template-columns: 1fr; }
  .nivel-destacado .nivel-num::after{ display: block; margin: 8px 0 0; width: fit-content; }
}


/* ============================================================================
   PAQUETES CON PRECIO + DEMO (18/9/2026)
   ============================================================================ */
.nivel-cab h3{ display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.nivel-precio{ font-variant-numeric: tabular-nums; }
.nivel-periodo{
  font-family: var(--texto);
  font-size: .9375rem;
  font-weight: 500;
  color: rgba(5,25,72,.62);
}
.niveles-pie{
  margin: 22px 0 0;
  max-width: 78ch;
  font-size: .8125rem;
  line-height: 1.55;
  color: rgba(5,25,72,.72);   /* 4,6:1 sobre crema */
}
.niveles-demo{ margin-top: 30px; }

/* El selector de demo es un <details>: el <summary> es el boton y el panel
   con los tres rubros aparece debajo al abrirlo. Sin JavaScript. */
.demo{ position: relative; }
.demo summary{ list-style: none; cursor: pointer; }
.demo summary::-webkit-details-marker{ display: none; }
.demo-panel{
  margin-top: 14px;
  padding: 18px 20px;
  border-radius: var(--r-panel);
  background: rgba(3,15,44,.55);
  border: 1px solid rgba(245,245,245,.14);
  max-width: 520px;
}
.demo-titulo{
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 1.125rem;
  color: var(--tinta);
}
.demo-opciones{ display: flex; flex-wrap: wrap; gap: 10px; }
.demo-opciones a{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(245,245,245,.35);
  color: var(--tinta);
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
}
.demo-opciones a:hover{ border-color: var(--tinta); background: rgba(245,245,245,.08); }
.demo-nota{
  margin: 14px 0 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: rgba(245,245,245,.72);
}
/* Variante sobre crema (al pie de los niveles) */
.demo-claro .demo-panel{ background: var(--crema-2); border-color: var(--linea-cla); }
.demo-claro .demo-titulo{ color: var(--navy); }
.demo-claro .demo-opciones a{ color: var(--navy); border-color: rgba(5,25,72,.35); }
.demo-claro .demo-opciones a:hover{ border-color: var(--navy); background: rgba(5,25,72,.05); }
.demo-claro .demo-nota{ color: rgba(5,25,72,.72); }

/* En la portada, el <details> abierto ocupa toda la fila para no empujar
   los otros botones. */
.sv-portada-acciones .demo[open]{ flex-basis: 100%; }