/* =========================================================================
   CRM Cron — sistema visual de la web
   -------------------------------------------------------------------------
   Deliberadamente distinto al de cartadigital.app y haztevip.com, que
   comparten tokens (--brand, --accion, --ink) y se parecen demasiado entre
   ellos. Aquí no hay tarjetas flotando con sombra blanda: hay una RETÍCULA
   de líneas de 1px sobre blanco, como un cuaderno de contabilidad. Es un
   producto de facturar; que se note.

   Tres reglas que sostienen todo:
     1. El blanco es el fondo. No hay grises de relleno salvo para separar.
     2. Las cosas se separan con LÍNEAS, no con sombras ni con color.
     3. El naranja aparece poco. Cuando aparece, significa algo.
   ========================================================================= */

:root {
  /* --- Marca --- */
  --azul: #1B3AD8;
  --azul-hondo: #132A9E;
  --azul-claro: #EEF1FE;
  --naranja: #F5A623;
  --naranja-hondo: #C9860F;

  /* --- Neutros, con una pizca de azul: un gris puro se ve sin elegir --- */
  --tinta: #0C1020;
  --texto: #414A61;
  --suave: #6E7690;
  --linea: #E4E6EE;
  --linea-fuerte: #C9CDDB;
  --papel: #FFFFFF;
  --papel-2: #F7F8FC;

  /* --- Semánticos: separados del acento a propósito --- */
  --bien: #0E8A5F;
  --ojo: #B45309;

  /* --- Tipografía --- */
  --display: "Bricolage Grotesque", "Segoe UI", Arial, sans-serif;
  --texto-fuente: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --cifra: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* --- Medidas --- */
  --ancho: 1200px;
  --radio: 4px;
  --barra: 64px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--texto-fuente);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--tinta);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(38px, 5.4vw, 62px); }
h2 { font-size: clamp(28px, 3.4vw, 40px); }
h3 { font-size: clamp(20px, 2vw, 24px); letter-spacing: -0.01em; }
h4 { font-size: 18px; letter-spacing: -0.005em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.entradilla { font-size: clamp(18px, 1.6vw, 21px); color: var(--suave); max-width: 62ch; }

/* La etiqueta de sección: en monoespaciada, porque es metadato, no prosa. */
.rotulo {
  font-family: var(--cifra);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--suave);
  display: block;
  margin-bottom: 14px;
}
.rotulo--naranja { color: var(--naranja-hondo); }

.cifra { font-family: var(--cifra); font-variant-numeric: tabular-nums; }

/* ---------- Estructura ---------- */
.env { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }

section { padding: 88px 0; border-top: 1px solid var(--linea); }
section.sin-linea { border-top: 0; }
section.gris { background: var(--papel-2); }

.cabecera-seccion { max-width: 68ch; margin-bottom: 48px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--texto-fuente);
  font-size: 16px; font-weight: 600; line-height: 1;
  padding: 15px 24px;
  border-radius: var(--radio);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { text-decoration: none; }
.btn-primario { background: var(--azul); color: #fff; }
.btn-primario:hover { background: var(--azul-hondo); }
.btn-linea { background: transparent; color: var(--tinta); border-color: var(--linea-fuerte); }
.btn-linea:hover { border-color: var(--tinta); }
.btn-naranja { background: var(--naranja); color: #2B1A00; }
.btn-naranja:hover { background: var(--naranja-hondo); color: #fff; }
.btn-lg { font-size: 17px; padding: 17px 30px; }

/* ---------- Barra superior ---------- */
.barra {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--linea);
}
.barra-int { display: flex; align-items: center; gap: 28px; height: var(--barra); }
.marca { display: flex; align-items: center; gap: 10px; }
.marca img { height: 30px; width: auto; }
.marca span { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--tinta); letter-spacing: -0.02em; }
.nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav a { color: var(--texto); font-size: 15.5px; font-weight: 500; }
.nav a:hover { color: var(--tinta); text-decoration: none; }
.nav-acciones { display: flex; align-items: center; gap: 12px; }
/* `.nav a` (clase + elemento) pesa más que `.btn-primario` (clase suelta) y le
   ganaba el color: el botón azul salía con el texto oscuro encima, ilegible.
   Estas tres reglas igualan la especificidad y lo devuelven a su sitio. */
.nav a.btn-primario { color: #fff; }
.nav a.btn-linea { color: var(--tinta); }
.nav a.btn-naranja { color: #2B1A00; }
.menu-btn { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--tinta); }
@media (max-width: 940px) {
  .nav { display: none; }
  .nav.abierta {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: var(--barra);
    background: #fff; border-bottom: 1px solid var(--linea); padding: 8px 24px 20px;
  }
  .nav.abierta a { padding: 13px 0; border-bottom: 1px solid var(--linea); }
  .nav.abierta .nav-acciones { flex-direction: column; align-items: stretch; padding-top: 16px; gap: 10px; }
  .nav.abierta .btn { justify-content: center; }
  .menu-btn { display: block; margin-left: auto; }
}

/* ---------- Portada ---------- */
.portada { padding: 76px 0 0; border-top: 0; }
.portada-rejilla { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: start; }
@media (max-width: 980px) { .portada-rejilla { grid-template-columns: 1fr; gap: 44px; } }
.portada h1 { margin-bottom: 20px; }
.portada .acciones { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 18px; }
.letra-chica { font-size: 14.5px; color: var(--suave); }

/* La retícula: el motivo visual de toda la web. */
.rejilla-datos {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  display: grid; grid-template-columns: repeat(2, 1fr);
  overflow: hidden;
}
.rejilla-datos > div { padding: 22px 24px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.rejilla-datos > div:nth-child(2n) { border-right: 0; }
.rejilla-datos > div:nth-last-child(-n+2) { border-bottom: 0; }
.rejilla-datos dt { font-family: var(--cifra); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); margin-bottom: 7px; }
.rejilla-datos dd { margin: 0; font-family: var(--display); font-size: 27px; font-weight: 700; color: var(--tinta); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rejilla-datos dd small { font-size: 14px; font-weight: 500; color: var(--suave); font-family: var(--texto-fuente); letter-spacing: 0; }

/* ---------- Factura de muestra (portada) ---------- */
.muestra { border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: #fff; overflow: hidden; }
.muestra-cab { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--linea); background: var(--papel-2); }
.muestra-cab .tit { font-family: var(--cifra); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.sello { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--bien); }
.sello::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bien); }
.muestra-cuerpo { padding: 22px 20px; }
.muestra-fila { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--linea); font-size: 15px; }
.muestra-fila:last-of-type { border-bottom: 0; }
.muestra-fila .cifra { color: var(--tinta); }
.muestra-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--tinta); }
.muestra-total span { font-weight: 600; color: var(--tinta); }
.muestra-total .cifra { font-family: var(--display); font-size: 27px; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.muestra-pie { padding: 12px 20px; border-top: 1px solid var(--linea); background: var(--papel-2); font-family: var(--cifra); font-size: 11.5px; color: var(--suave); letter-spacing: .04em; word-break: break-all; }

/* ---------- Columnas ---------- */
.cols { display: grid; gap: 0; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols > article { padding: 32px 28px; border-right: 1px solid var(--linea); }
.cols > article:last-child { border-right: 0; }
@media (max-width: 900px) {
  .cols-3, .cols-2 { grid-template-columns: 1fr; }
  .cols > article { border-right: 0; border-bottom: 1px solid var(--linea); }
  .cols > article:last-child { border-bottom: 0; }
}
.cols h3 { margin-bottom: 10px; }
.cols p { font-size: 16px; }
.icono-num { font-family: var(--cifra); font-size: 12px; color: var(--naranja-hondo); letter-spacing: .1em; display: block; margin-bottom: 16px; }

/* ---------- Lista de funciones ---------- */
.funciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
@media (max-width: 860px) { .funciones { grid-template-columns: 1fr; } }
.funcion { display: flex; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--linea); }
.funcion .marca-si { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--azul-claro); color: var(--azul); display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-top: 3px; }
.funcion h4 { margin: 0 0 4px; }
.funcion p { font-size: 15.5px; color: var(--suave); margin: 0; }

/* ---------- Precios ---------- */
.precios { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--linea-fuerte); border-radius: var(--radio); overflow: hidden; max-width: 860px; }
@media (max-width: 800px) { .precios { grid-template-columns: 1fr; } }
.plan { padding: 36px 32px; border-right: 1px solid var(--linea); }
.plan:last-child { border-right: 0; }
.plan--destacado { background: var(--papel-2); position: relative; }
.plan--destacado::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--naranja); }
.plan .nombre { font-family: var(--cifra); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); margin-bottom: 18px; }
.plan .importe { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.plan .importe b { font-family: var(--display); font-size: 46px; font-weight: 700; color: var(--tinta); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plan .importe span { color: var(--suave); font-size: 16px; }
.plan .apunte { font-size: 14.5px; color: var(--suave); margin-bottom: 24px; }
.plan ul { list-style: none; margin: 24px 0 0; padding: 0; }
.plan li { padding: 9px 0 9px 26px; position: relative; font-size: 15.5px; border-bottom: 1px solid var(--linea); }
.plan li:last-child { border-bottom: 0; }
.plan li::before { content: "✓"; position: absolute; left: 0; top: 9px; color: var(--bien); font-weight: 700; }

/* ---------- Aviso legal destacado ---------- */
.aviso {
  border: 1px solid var(--linea);
  border-left: 3px solid var(--naranja);
  border-radius: var(--radio);
  background: var(--papel-2);
  padding: 26px 30px;
}
.aviso h3 { margin-bottom: 8px; }
.aviso p { margin-bottom: 0; font-size: 16px; }

/* ---------- Preguntas ---------- */
.preguntas { border-top: 1px solid var(--linea); max-width: 860px; }
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta summary { cursor: pointer; padding: 22px 40px 22px 0; font-family: var(--display); font-weight: 600; font-size: 18.5px; color: var(--tinta); list-style: none; position: relative; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; position: absolute; right: 6px; top: 19px; font-size: 24px; font-weight: 400; color: var(--suave); }
.pregunta[open] summary::after { content: "–"; }
.pregunta .respuesta { padding: 0 40px 24px 0; font-size: 16px; }

/* ---------- Franja de cierre ---------- */
.franja { background: var(--tinta); color: #fff; border-top: 0; }
.franja h2 { color: #fff; }
.franja p { color: #B9C0D4; }
.franja .acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.franja .btn-linea { color: #fff; border-color: rgba(255,255,255,.35); }
.franja .btn-linea:hover { border-color: #fff; }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--linea); padding: 56px 0 32px; font-size: 15px; }
.pie-rejilla { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
@media (max-width: 860px) { .pie-rejilla { grid-template-columns: 1fr 1fr; gap: 32px; } }
.pie h4 { font-family: var(--cifra); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); font-weight: 500; margin-bottom: 14px; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 9px; }
.pie a { color: var(--texto); }
.pie a:hover { color: var(--azul); }
.pie-legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--linea); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: var(--suave); font-size: 14px; }

/* ---------- Utilidades ---------- */
.centro { text-align: center; margin-left: auto; margin-right: auto; }
.ancho-texto { max-width: 68ch; }
.tabla-scroll { overflow-x: auto; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =========================================================================
   MÓVIL
   -------------------------------------------------------------------------
   El diseño se apoya en una retícula de líneas, y al apilar las columnas las
   líneas VERTICALES desaparecen: lo que en pantalla grande es una rejilla
   ordenada, en el móvil se convierte en un texto blanco detrás de otro.

   Aquí se devuelve la estructura con lo que sí sobrevive a una sola columna:
   un filete de color al principio de cada bloque, algo de fondo para separar
   y bastante menos aire vertical.
   ========================================================================= */
@media (max-width: 720px) {

  body { font-size: 16.5px; }

  /* 88 px arriba y abajo eran tres dedos de pantalla en blanco. */
  section { padding: 52px 0; }
  .portada { padding: 40px 0 0; }
  .env { padding: 0 18px; }
  .cabecera-seccion { margin-bottom: 32px; }

  h1 { font-size: clamp(31px, 8.5vw, 40px); }
  h2 { font-size: clamp(25px, 6.6vw, 31px); }
  .entradilla { font-size: 17px; }

  /* Cada bloque de una rejilla pasa a ser una ficha reconocible: fondo suave
     y un filete arriba. Sin esto son párrafos sueltos sobre blanco. */
  .cols {
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cols > article {
    border-right: 0;
    border-bottom: 0;
    border-top: 2px solid var(--azul);
    border-radius: var(--radio);
    background: var(--papel-2);
    padding: 24px 20px;
  }
  /* El primero de cada rejilla, en naranja: marca dónde empieza el bloque. */
  .cols > article:first-child { border-top-color: var(--naranja); }

  /* Los datos de la portada: en dos columnas se quedaban en nada. */
  .rejilla-datos { grid-template-columns: 1fr 1fr; }
  .rejilla-datos > div { padding: 16px 14px; }
  .rejilla-datos dd { font-size: 22px; }
  .rejilla-datos dd small { display: block; font-size: 12.5px; }

  /* La factura de muestra es lo mejor que tiene la portada: que no se encoja. */
  .muestra-cuerpo { padding: 18px 16px; }
  .muestra-fila { font-size: 14.5px; }
  .muestra-total .cifra { font-size: 23px; }
  .muestra-pie { font-size: 10.5px; }

  /* Las funciones, con su línea y menos hueco. */
  .funciones { gap: 0; }
  .funcion { padding: 16px 0; }

  /* Los planes, uno debajo de otro pero sin perder el borde. */
  .precios { border: 0; display: flex; flex-direction: column; gap: 14px; }
  .plan {
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio);
    padding: 26px 22px;
  }
  .plan .importe b { font-size: 38px; }

  /* Botones a lo ancho: en el móvil se pulsa con el pulgar. */
  .portada .acciones .btn,
  .franja .acciones .btn { width: 100%; justify-content: center; }

  .aviso { padding: 20px 18px; }
  .pregunta summary { font-size: 17px; padding: 18px 34px 18px 0; }
  .pie { padding: 40px 0 26px; }
  .pie-rejilla { gap: 28px; }
}

/* En pantallas muy estrechas, dos columnas de datos se rompen. */
@media (max-width: 400px) {
  .rejilla-datos { grid-template-columns: 1fr; }
  .rejilla-datos > div { border-right: 0; }
  .rejilla-datos > div:nth-last-child(2) { border-bottom: 1px solid var(--linea); }
}