/* ============================================================================
   COTIZADOR PÚBLICO — lo específico de esta página
   ----------------------------------------------------------------------------
   Todo lo que se pueda reusar del sitio se reusa: esta hoja va DESPUÉS de
   site.css y solo añade lo que no existe allá (la calculadora, el interruptor
   de modalidad por enlaces, el desglose de cada tarjeta y el bloque Enterprise).
   Nada de esto toca `cotizacion.css`, que es la hoja del VISOR — el documento
   que recibe el cliente, con sus reglas de impresión pagadas a golpes.

   Regla de la casa: solo tokens del design system. Un token inexistente no se
   ignora, pone el valor INICIAL (un `var(--space-7)` deja el padding en 0), así
   que aquí solo se usan los que existen en tokens.css.
   ========================================================================== */

/* --- Héroe: la calculadora es lo primero y lo más grande ------------------- */
.cot-hero {
  padding: var(--space-16) 0 var(--space-12);
  background:
    radial-gradient(60% 120% at 15% 0%, color-mix(in srgb, var(--signal-500) 10%, transparent) 0%, transparent 60%),
    var(--surface-page);
  border-bottom: 1px solid var(--border-subtle);
}
.cot-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.08;
  margin: 8px 0 10px;
  color: var(--text-primary);
  max-width: 18ch;
  text-wrap: balance;
}
.cot-hero-sub {
  margin: 0 0 var(--space-8);
  color: var(--text-secondary);
  font-size: var(--fs-18);
  max-width: 620px;
}

/* La calculadora: campo grande, botón grande, en una línea cuando cabe. */
.cot-calc {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  max-width: 640px;
}
/* `.field` ya pone el flex y el gap; aquí solo el reparto dentro de la fila. */
.cot-calc-campo { flex: 1 1 260px; min-width: 0; }
/* 20px no es decorativo: el número es el dato de la página, y por debajo de 16px
   iOS hace zoom al enfocar. Va con la especificidad de `.field .input` (0-2-0) o
   PIERDE la cascada: escrito como `.cot-calc-input` a secas (0-1-0) el campo
   volvía a 14px aunque la regla estuviera después. Es la misma trampa que ya se
   pagó dos veces en este repo. */
.cot-calc .field .input { font-size: var(--fs-20); font-weight: 700; padding: 14px 16px; }
.cot-calc-btn { flex: 0 0 auto; }

/* --- Interruptor de modalidad: enlaces, no botones con JavaScript ---------- */
.cot-modos {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 var(--space-8);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
}
.cot-modo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cot-modo:hover { color: var(--text-primary); }
.cot-modo.is-active {
  background: var(--ocean-700);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-sm);
}
/* La insignia, con los MISMOS valores que el interruptor del sitio: en reposo
   teal claro con texto teal oscuro; sobre el navy del activo, blanco translúcido
   con texto blanco. Mi primera versión la puso teal sólido con texto blanco y
   axe la midió por debajo de 4.5:1 en los dos temas — el mismo error que ya
   costó una ronda en el visor. */
.cot-modo .save-badge {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--teal-50);
  color: var(--teal-700);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.cot-modo.is-active .save-badge { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* --- Dentro de cada tarjeta de plan ---------------------------------------- */
/* Lo que la persona vino a saber: qué le cuesta a ELLA, no el precio unitario. */
.cot-tuyo {
  display: grid;
  gap: 2px;
  margin: 0 0 var(--space-4);
  padding: 12px 14px;
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
}
.cot-tuyo > span:first-child {
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.cot-tuyo b {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.cot-tuyo-nota { font-size: var(--fs-12); color: var(--text-tertiary); }

/* El desglose queda disponible pero en segundo plano: antes competía con el
   precio y la tarjeta se leía como una hoja de cálculo. */
.cot-desglose { margin: 0 0 var(--space-5); display: grid; gap: 4px; }
.cot-fila {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-13);
  color: var(--text-secondary);
}
.cot-fila dt { margin: 0; }
.cot-fila dd { margin: 0; font-variant-numeric: tabular-nums; }
.cot-fila.es-fuerte {
  padding-top: 6px;
  margin-top: 2px;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-weight: 700;
}

/* --- Notas del resultado --------------------------------------------------- */
.cot-nota-prueba,
.cot-alcance {
  max-width: 760px;
  margin: var(--space-6) 0 0;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--text-secondary);
  background: var(--surface-sunken);
  border-left: 3px solid var(--teal-500);
}
.cot-nota-prueba { border-left-color: var(--signal-500); }
.cot-mas-usuarios { margin: var(--space-6) 0 0; font-size: var(--fs-14); color: var(--text-secondary); }
.cot-mas-usuarios a { font-weight: 700; }

/* --- Arriba de 300 usuarios: Enterprise, sin precio de lista --------------- */
.cot-ent-caja {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-8);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 820px) { .cot-ent-caja { grid-template-columns: 1fr; gap: var(--space-6); } }
.cot-ent-precio { display: grid; gap: 6px; }
.cot-ent-precio b {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
}
.cot-ent-precio > span:last-child { font-size: var(--fs-14); color: var(--text-secondary); }
.cot-ent-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cot-ent-lista li {
  position: relative;
  padding-left: 26px;
  font-size: var(--fs-16);
  color: var(--text-secondary);
}
.cot-ent-lista li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--teal-500);
  font-weight: 700;
}
.cot-ent-pie { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0 0; }

/* --- Avisos ---------------------------------------------------------------- */
.cot-aviso {
  margin: 0 0 var(--space-6);
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: var(--fs-16);
  background: var(--surface-sunken);
  border-left: 3px solid var(--border-default);
  color: var(--text-secondary);
}
.cot-aviso--ok { border-left-color: var(--teal-500); background: var(--teal-50); color: var(--text-primary); }
.cot-aviso--error { border-left-color: var(--color-danger); color: var(--text-primary); }

/* --- Captura y pie --------------------------------------------------------- */
/* El honeypot no se ve, no se tabula y no lo anuncia nadie. Fuera de pantalla en
   vez de display:none porque algunos bots ignoran los campos ocultos. */
.cot-trampa { position: absolute; left: -9999px; width: 0; height: 0; opacity: 0; }
.form-row--una { grid-template-columns: 1fr; }
.cot-pie-marca { margin-bottom: var(--space-4); }

/* El menú lo gobierna site.css (se esconde por debajo de 1240px y lo abre la
   clase `is-open`); aquí no se toca, solo se porta su manejador en
   cotizacion.js. Lo que sí se recupera es el botón de tema: el sitio lo esconde
   a ≤380px porque ahí compite con su CTA, pero en el cotizador no hay CTA en la
   barra y esconderlo sería un retroceso respecto de la versión anterior. */
@media (max-width: 900px) {
  .cot-hero { padding-top: var(--space-10); }
}
@media (max-width: 380px) {
  .header-acciones .theme-toggle-btn { display: inline-flex; }
  .header-acciones .header-cta { display: none; }
}