/* ==========================================================================
   Moostreak — sistema del sitio

   Hoja propia y autocontenida para todas las páginas salvo la portada, que
   sigue montada sobre la rejilla heredada. Aquí no se depende de nada de
   fuera: tokens, tipografía, cabecera, pie y componentes.

   Paleta tomada de moostreak-crm (tailwind.config.ts + globals.css), la misma
   que usan los paneles de la portada, para que todo el sitio se lea igual.

   Solo tema oscuro. No hay light mode en este proyecto.
   ========================================================================== */

/* Tipografía servida desde el propio proyecto. Venía del CDN de assets, lo
   que dejaba el nombre de otra marca en las 126 páginas y ataba el sitio a un
   dominio ajeno. Ahora no depende de nadie. */
@font-face {
  font-family: "Moo Sans";
  src: url("/assets/moo-sans.woff2") format("woff2 supports variations"),
       url("/assets/moo-sans.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-display: swap;
  font-synthesis: none;
}
@font-face {
  font-family: "Moo Mono";
  src: url("/assets/moo-mono.woff2") format("woff2 supports variations"),
       url("/assets/moo-mono.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-display: swap;
}

:root {
  /* Escala navy — idéntica a la del CRM */
  --ink-950: #050610;
  --ink-900: #0b0c16;
  --ink-875: #101120;
  --ink-850: #131425;
  --ink-800: #181930;
  --ink-750: #1e1f38;
  --ink-700: #242540;
  --ink-650: #2a2b48;
  --ink-550: #33344f;
  --ink-400: #4b4d6a;
  --ink-350: #5a5d7a;
  --ink-300: #7a7d99;
  --ink-250: #a0a3b8;
  --ink-150: #c9ccd8;
  --ink-50: #ffffff;

  --brand: #fbd708;
  --brand-dark: #dcc937;
  --brand-fg: #0b0c16;
  --lime: #b6f46c;
  --danger: #ff2d78;
  --warning: #ffb300;
  --success: #22c55e;
  --info: #00d4ff;

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --wrap: 1280px;
  --pad: 24px;
  --header-h: 68px;

  --font: "Moo Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Moo Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

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

html {
  background: var(--ink-900);
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--ink-50);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.2px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; letter-spacing: -1.4px; font-weight: 800; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: rgba(251, 215, 8, .28); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; top: -60px; left: 12px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r-md);
  background: var(--brand); color: var(--brand-fg); font-weight: 700;
  transition: top .18s;
}
.skip:focus { top: 12px; }

/* ==========================================================================
   Cabecera
   ========================================================================== */
.hdr {
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid var(--ink-650);
  background: rgba(11, 12, 22, .82);
  backdrop-filter: blur(14px);
}
.hdr-in { display: flex; align-items: center; gap: 20px; height: var(--header-h); }

.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand-mark {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--brand);
}
.brand-mark img { width: 20px; height: 20px; }
.brand-name { font-size: 17px; font-weight: 800; letter-spacing: -0.7px; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-link {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 500;
  color: var(--ink-250);
  transition: color .15s, background-color .15s;
}
.nav-link:hover { color: var(--ink-50); background: rgba(255,255,255,.05); }
.nav-link[aria-current="page"] { color: var(--brand); }

/* Desplegable de Producto — abre por hover y por foco, sin depender del JS */
.nav-drop { position: relative; }
.nav-drop > button {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 500;
  color: var(--ink-250);
  transition: color .15s, background-color .15s;
}
.nav-drop > button:hover { color: var(--ink-50); background: rgba(255,255,255,.05); }
.nav-drop > button svg { width: 12px; height: 12px; transition: transform .18s; }
.nav-drop[data-open="true"] > button { color: var(--ink-50); background: rgba(255,255,255,.05); }
.nav-drop[data-open="true"] > button svg { transform: rotate(180deg); }
.nav-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  display: grid; grid-template-columns: repeat(2, 260px); gap: 2px;
  padding: 8px;
  border: 1px solid var(--ink-650);
  border-radius: var(--r-lg);
  background: var(--ink-875);
  box-shadow: 0 26px 60px -30px rgba(0,0,0,.95);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.nav-drop[data-open="true"] .nav-menu { opacity: 1; visibility: visible; transform: none; }
.nav-item { display: flex; gap: 10px; padding: 10px; border-radius: var(--r-md); transition: background-color .15s; }
.nav-item:hover { background: var(--ink-800); }
.nav-item-ico {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  border-radius: 9px;
  background: rgba(251,215,8,.1);
  color: var(--brand);
}
.nav-item-ico svg { width: 15px; height: 15px; }
.nav-item b { display: block; font-size: 14px; font-weight: 600; }
.nav-item span { display: block; font-size: 12.5px; color: var(--ink-300); line-height: 1.4; }

.hdr-cta { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.hdr-burger { display: none; padding: 8px; border-radius: var(--r-sm); color: var(--ink-250); }
.hdr-burger svg { width: 22px; height: 22px; }

/* ==========================================================================
   Botones
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: 14.5px; font-weight: 700;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: background-color .16s, border-color .16s, color .16s,
              box-shadow .2s, transform .12s, filter .15s;
}
.btn svg { width: 16px; height: 16px; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); }
.btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28),
              0 0 0 1px rgba(251,215,8,.45),
              0 12px 28px -12px rgba(251,215,8,.6);
  transform: translateY(-1px);
}
.btn-ghost { background: var(--ink-850); color: var(--ink-50); border-color: var(--ink-650); }
.btn-ghost:hover {
  border-color: rgba(251,215,8,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08),
              0 0 0 1px rgba(251,215,8,.16),
              0 10px 24px -14px rgba(251,215,8,.4);
}
.btn-quiet { color: var(--ink-250); }
.btn-quiet:hover { color: var(--ink-50); background: rgba(255,255,255,.05); }
.btn-sm { padding: 8px 14px; font-size: 13.5px; }
.btn-lg { padding: 14px 26px; font-size: 15.5px; }

/* ==========================================================================
   Tipografía y bloques
   ========================================================================== */
.kicker {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--brand);
}
.h1 { font-size: clamp(36px, 5.4vw, 64px); letter-spacing: -2.4px; }
.h2 { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -1.8px; }
.h3 { font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -1px; }
.lead { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; color: var(--ink-250); }
.muted { color: var(--ink-300); }
.small { font-size: 13.5px; }

.section { padding: 84px 0; }
.section-sm { padding: 56px 0; }
.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head .h2 { margin: 14px 0 14px; }

.rule { height: 1px; background: var(--ink-650); border: 0; margin: 0; }

/* ==========================================================================
   Tarjetas y rejillas
   ========================================================================== */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  padding: 22px;
  border: 1px solid var(--ink-650);
  border-radius: var(--r-lg);
  background: var(--ink-850);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.card-hover { transition: border-color .18s, box-shadow .22s, transform .18s; }
.card-hover:hover {
  border-color: rgba(251,215,8,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06),
              0 0 0 1px rgba(251,215,8,.12),
              0 20px 44px -26px rgba(251,215,8,.4);
  transform: translateY(-2px);
}
.card-ico {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  margin-bottom: 14px;
  border-radius: 11px;
  background: rgba(251,215,8,.1);
  color: var(--brand);
}
.card-ico svg { width: 18px; height: 18px; }
/* `.card-t` son h2 que antes eran h3: cambiaron de nivel por jerarquía
   de encabezados, no de aspecto. */
.card h3, .card .card-t { font-size: 17px; letter-spacing: -0.6px; margin-bottom: 7px; }
.card p { font-size: 14px; color: var(--ink-250); line-height: 1.55; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--ink-650);
  border-radius: 999px;
  background: var(--ink-850);
  font-size: 12.5px; color: var(--ink-250);
}
/* Fondo sólido: la cinta se monta sobre el borde de la tarjeta y, translúcida,
   dejaba pasar la línea por detrás del texto. El tono es el que daba antes esa
   mezcla, ya resuelto, para que no cambie a la vista. */
.chip-brand { border-color: rgba(251,215,8,.28); background: #241e0e; color: var(--brand); }

/* Enlace con flecha, el gesto que se repite en todo el sitio */
.arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.5px; font-weight: 600;
  color: var(--brand);
  transition: gap .16s;
}
.arrow:hover { gap: 10px; }
.arrow svg { width: 14px; height: 14px; }

/* ==========================================================================
   Pie
   ========================================================================== */
.ftr { border-top: 1px solid var(--ink-650); background: var(--ink-875); padding: 56px 0 28px; }
.ftr-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.ftr-about p { margin-top: 14px; font-size: 13.5px; color: var(--ink-300); max-width: 34ch; line-height: 1.6; }
.ftr-contacto { margin-top: 18px; display: grid; gap: 9px; }
.ftr-contacto a, .ftr-horario { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-250); }
.ftr-contacto a:hover { color: var(--brand); }
.ftr-contacto svg { width: 15px; height: 15px; flex: none; color: var(--ink-400); }
.ftr-horario { color: var(--ink-300); }
.ftr-contacto a:hover svg { color: var(--brand); }
.ftr h4, .ftr .ftr-col {
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink-400);
}
.ftr li + li { margin-top: 9px; }
.ftr li a { font-size: 14px; color: var(--ink-250); transition: color .15s; }
.ftr li a:hover { color: var(--brand); }
.ftr-bottom {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-top: 44px; padding-top: 22px;
  border-top: 1px solid var(--ink-650);
  font-size: 13px; color: var(--ink-400);
}
.ftr-legal { display: flex; flex-wrap: wrap; gap: 16px; margin-left: auto; }
.ftr-legal a { color: var(--ink-400); transition: color .15s; }
.ftr-legal a:hover { color: var(--ink-250); }

/* ==========================================================================
   Menú móvil
   ========================================================================== */
.mnav {
  position: fixed; inset: var(--header-h) 0 0; z-index: 55;
  display: none; flex-direction: column; gap: 4px;
  padding: 20px var(--pad) 40px;
  background: var(--ink-900);
  overflow-y: auto;
}
.mnav[data-open="true"] { display: flex; }
.mnav a {
  padding: 13px 12px;
  border-radius: var(--r-md);
  font-size: 16px; font-weight: 600;
  transition: background-color .15s;
}
.mnav a:hover { background: var(--ink-850); }
.mnav .mnav-sub { padding-left: 26px; font-size: 14.5px; font-weight: 500; color: var(--ink-250); }
.mnav h4, .mnav .mnav-col {
  margin: 18px 0 4px; padding: 0 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ink-400);
}
.mnav .btn { margin-top: 18px; }
body[data-mnav="open"] { overflow: hidden; }

/* ==========================================================================
   Adaptación
   ========================================================================== */
@media (max-width: 1080px) {
  .ftr-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ftr-about { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  :root { --pad: 18px; }
  .nav, .hdr-cta .btn-quiet { display: none; }
  .hdr-burger { display: block; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section { padding: 60px 0; }
}
@media (max-width: 400px) {
  /* En pantallas de 320 px la marca, el botón y la hamburguesa no caben y la
     página entera se iba a scroll horizontal. El botón se retira: sus dos CTA
     están en el menú, a ancho completo. */
  .hdr-cta .btn-primary { display: none; }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .ftr-top { grid-template-columns: 1fr; }
  .section { padding: 48px 0; }
  .ftr-bottom { flex-direction: column; align-items: flex-start; }
  .ftr-legal { margin-left: 0; }
}

/* ==========================================================================
   Precios · conmutador de ciclo y complemento
   ========================================================================== */
.ciclo {
  display: inline-flex;
  margin-bottom: 28px;
  border: 1px solid var(--ink-650);
  border-radius: 999px;
  background: var(--ink-875);
  overflow: hidden;
}
.ciclo button {
  padding: 10px 20px;
  font-size: 13.5px; font-weight: 600;
  color: var(--ink-300);
  transition: color .18s, background-color .18s;
}
.ciclo button:hover { color: var(--ink-50); }
.ciclo button[aria-pressed="true"] { background: var(--brand); color: var(--brand-fg); }

/* Los checks salen del helper svg(), que no pone medidas: con el `height:auto`
   global se quedaban en 0x0 y la lista aparecía sin viñetas. */
.feat { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 9px; font-size: 14px; }
.feat > span:first-child { flex: none; margin-top: 3px; }
.feat svg { width: 15px; height: 15px; }

.complemento {
  margin-top: 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.complemento-precio { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
@media (max-width: 640px) {
  .ciclo { display: flex; width: 100%; }
  .ciclo button { flex: 1; padding: 10px 12px; font-size: 12.5px; }
  .complemento-precio { align-items: flex-start; }
}

/* ==========================================================================
   Migas de navegación
   Van visibles además de en el JSON-LD: Google solo las enseña en resultados
   si existen de verdad en la página.
   ========================================================================== */
.migas { border-bottom: 1px solid var(--ink-650); background: var(--ink-875); }
.migas .wrap {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding-top: 11px; padding-bottom: 11px;
  font-size: 12.5px; color: var(--ink-300);
}
.migas a { color: var(--ink-250); }
.migas a:hover { color: var(--brand); }
.migas [aria-current="page"] { color: var(--ink-150); }
.migas-sep { color: var(--ink-400); }

/* --------------------------------------------------------- pago por uso --- */
.uso { margin: 0 0 12px; }
/* Comparte franja con el deslizador, que es más alto. Centrado, el aire
   sobrante se reparte arriba y abajo en vez de amontonarse debajo. */
.uso-fijo { margin: 0 0 12px; line-height: 1.45; }
.uso-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.uso-n {
  font-size: 17px; font-weight: 800; color: var(--ink-50);
  font-variant-numeric: tabular-nums;
}
.uso-n::after { content: " usuarios"; font-size: 12px; font-weight: 500; color: var(--ink-300); }
.uso-cuenta { margin-top: 5px; }
.uso-total { color: var(--brand); font-variant-numeric: tabular-nums; }

.uso-rango {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; margin: 4px 0 0;
  background: transparent; cursor: pointer;
}
.uso-rango::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  /* El relleno se pinta con un degradado cuyo corte mueve el JS: es la única
     forma de teñir la parte recorrida sin envolver el input en más marcado. */
  background: linear-gradient(to right, var(--brand) var(--pct, 40%), var(--ink-700) var(--pct, 40%));
}
.uso-rango::-moz-range-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--brand) var(--pct, 40%), var(--ink-700) var(--pct, 40%));
}
.uso-rango::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -6px;
  border-radius: 50%; border: 3px solid var(--ink-900);
  background: var(--brand);
  box-shadow: 0 2px 10px -2px rgba(251, 215, 8, .7);
  transition: transform .12s;
}
.uso-rango::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%; border: 3px solid var(--ink-900);
  background: var(--brand);
}
.uso-rango:hover::-webkit-slider-thumb { transform: scale(1.12); }
.uso-rango:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 6px; }

/* ---------------------------------------------------------------- modal --- */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: var(--pad);
}
.modal-fondo { position: absolute; inset: 0; background: rgba(3, 4, 10, .72); backdrop-filter: blur(3px); }
.modal-caja {
  position: relative;
  width: 100%; max-width: 520px; max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
  border: 1px solid var(--ink-650);
  border-radius: var(--r-xl);
  background: var(--ink-875);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95);
  animation: modal-entra .22s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes modal-entra { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .modal-caja { animation: none; } }

.modal-x {
  position: absolute; top: 16px; right: 16px;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 9px; color: var(--ink-300);
  transition: color .15s, background-color .15s;
}
.modal-x:hover { color: var(--ink-50); background: rgba(255, 255, 255, .06); }
.modal-x svg { width: 17px; height: 17px; }
.modal-titulo { font-size: 25px; letter-spacing: -1.2px; margin: 10px 0 4px; }
.modal-lema { color: var(--ink-300); font-size: 14px; margin-bottom: 20px; }

.modal-fila {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--ink-700);
  font-size: 14.5px;
}
.modal-fila span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.modal-fila--total {
  border-top: 1px solid var(--ink-550);
  margin-top: 4px; padding-top: 15px;
  font-size: 17px; font-weight: 800;
}
.modal-fila--total span:last-child { color: var(--brand); font-size: 21px; letter-spacing: -0.8px; }
.modal-nota { margin-top: 8px; line-height: 1.5; }
.modal-acciones { display: grid; gap: 10px; margin-top: 22px; }

/* ------------------------------------------- complemento con vista previa --- */
.extra {
  margin-top: 20px; padding: 16px;
  border: 1px solid var(--ink-700); border-radius: var(--r-lg);
  background: var(--ink-850);
  transition: border-color .18s, background-color .18s;
}
.extra:has(input:checked) { border-color: rgba(251, 215, 8, .4); background: rgba(251, 215, 8, .05); }
.extra-lab { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.extra-lab input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw {
  position: relative; flex: none;
  width: 40px; height: 23px; margin-top: 2px;
  border-radius: 999px; background: var(--ink-700);
  transition: background-color .2s;
}
.sw::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--ink-300);
  transition: transform .2s cubic-bezier(.2, .8, .3, 1), background-color .2s;
}
.extra-lab input:checked + .sw { background: var(--brand); }
.extra-lab input:checked + .sw::after { transform: translateX(17px); background: var(--ink-900); }
.extra-lab input:focus-visible + .sw { outline: 2px solid var(--brand); outline-offset: 3px; }
.extra-txt b { display: block; font-size: 14.5px; }
.extra-txt span { display: block; font-size: 12.5px; color: var(--ink-300); margin-top: 3px; }

/* La demostración: el mismo hueco de la pantalla de inicio, con el icono y el
   nombre cambiando al activar el complemento. Es más claro que explicarlo. */
.icono-demo { margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--ink-700); }
.icono-pantalla {
  display: flex; justify-content: center; gap: 20px;
  padding: 14px 10px 12px;
  border-radius: 14px;
  background: linear-gradient(160deg, #171a33, #0d0e1c);
  border: 1px solid var(--ink-700);
}
.icono-app { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 62px; }
.icono-cara {
  display: grid; place-items: center;
  width: 50px; height: 50px;
  border-radius: 13px;
  background: var(--brand);
  color: var(--ink-900);
  font-size: 15px; font-weight: 800; letter-spacing: -0.5px;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .9);
  transition: background-color .32s, color .32s, transform .32s;
}
.icono-cara img { width: 30px; height: 30px; transition: opacity .22s; }
.icono-nombre {
  font-size: 10.5px; color: var(--ink-250); text-align: center;
  line-height: 1.25; transition: color .32s;
}
.icono-app--otra .icono-cara { background: var(--ink-700); color: var(--ink-300); }
/* Al activar el complemento el icono cambia de verdad delante de quien mira. */
.extra:has(input:checked) .icono-app--tuya .icono-cara {
  background: #0b7cff; color: #fff; transform: scale(1.06);
}
.extra:has(input:checked) .icono-app--tuya .icono-cara img { opacity: 0; position: absolute; }
.icono-pie { margin-top: 9px; text-align: center; line-height: 1.45; }

@media (max-width: 480px) {
  .modal-caja { padding: 22px 18px; }
  .icono-pantalla { gap: 12px; }
}

/* ==========================================================================
   Qué es "con tu marca"

   Existe para resolver una ambigüedad que cuesta devoluciones: "app con tu
   marca" y "icono propio" suenan a lo mismo. Aquí se separan por dónde
   ocurren —dentro de la app o en la tienda— y se dice cuál va incluida.
   ========================================================================== */




/* ==========================================================================
   Tabla de precios

   La tabla es el pricing. No hay tarjetas aparte: el precio vive en la misma
   columna que lo que trae, así no hay que recordar lo de arriba mientras se
   mira lo de abajo. La cabecera se queda pegada al desplazarse, que es lo que
   permite recorrer treinta filas sin perder de vista en qué plan estás.
   ========================================================================== */
.precios-top { padding-top: 30px; }
.precios-cab {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 26px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.precios-cab > div:first-child { max-width: 620px; }
.precios-h1 { margin: 10px 0 10px; font-size: clamp(28px, 3.2vw, 40px); }
.precios-cab .lead { font-size: 15px; }

/* Sin `overflow` a propósito: un envoltorio con scroll es contenedor de
   desplazamiento y el `sticky` de la cabecera se ancla a él en vez de a la
   página, así que dejaba de pegarse. No hace falta: por debajo de 940 px la
   tabla se convierte en bloques y por encima cabe entera. */
.tp-envoltorio { }
.tp {
  width: 100%; min-width: 0;
  border-collapse: separate; border-spacing: 0;
  font-size: 14px;
}

/* ------------------------------------------------------------- cabecera --- */
/* Toda la fila se queda pegada bajo la cabecera del sitio. Lleva solo cinta,
   nombre, precio y botón: cuanto menos ocupe, más tabla se ve al bajar. */
.tp thead th {
  position: sticky; top: var(--header-h); z-index: 5;
  vertical-align: top;
  padding: 16px 16px 15px;
  background: var(--ink-900);
  border-bottom: 1px solid var(--ink-650);
  text-align: left;
}
.tp-esquina { width: 31%; min-width: 250px; }
.tp-plan { width: 17.25%; }
/* El tinte de la columna destacada iba solo, y al ser translúcido dejaba ver
   las filas pasar por debajo de la cabecera pegada. Se compone sobre el fondo
   opaco para que tape. */
.tp-plan.es-dest {
  background: linear-gradient(rgba(251, 215, 8, .05), rgba(251, 215, 8, .05)), var(--ink-900);
}
/* Solo dos planes llevan cinta; los otros dos reservan su hueco para que las
   cuatro columnas empiecen a la misma altura. */
.tp-cinta { display: inline-block; margin-bottom: 10px; }
.tp-cinta--hueca { visibility: hidden; }
.tp-cinta--suave { background: var(--ink-750); border-color: var(--ink-650); color: var(--ink-250); }
.tp-nombre { display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.6px; }
.tp-precio { display: block; margin-top: 8px; }
.tp-cifra {
  display: block;
  font-size: 21px; font-weight: 800; letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  /* "COP 1.990.000" es el más largo y partía en dos al estrecharse la columna,
     bajando el botón de esa sola columna. */
  white-space: nowrap;
}
@media (max-width: 1200px) { .tp-cifra { font-size: 19px; } }
@media (max-width: 1060px) { .tp-cifra { font-size: 17px; letter-spacing: -0.7px; } }
/* Dos líneas reservadas: "por usuario al mes" parte en dos cuando la columna
   se estrecha y, sin esto, el botón de esa columna baja y la fila se descuadra. */
.tp-por {
  display: block; margin-top: 1px; min-height: 30px;
  font-size: 11.5px; font-weight: 400; line-height: 1.3; color: var(--ink-300);
}
.tp-cta { width: 100%; margin-top: 12px; padding: 9px 14px; }

/* --------------------------------------------------------------- filas --- */
.tp-grupo th {
  padding: 20px 16px 10px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--brand);
  text-align: left;
  border-bottom: 1px solid var(--ink-700);
}
.tp-fila th {
  padding: 13px 16px; text-align: left; font-weight: 500;
  border-bottom: 1px solid var(--ink-800);
}
.tp-fila td {
  padding: 13px 16px; text-align: center;
  border-bottom: 1px solid var(--ink-800);
  font-variant-numeric: tabular-nums;
}
.tp-fila:hover th, .tp-fila:hover td { background: rgba(255, 255, 255, .022); }
.tp-fila td.es-dest { background: rgba(251, 215, 8, .05); }
.tp-fila:hover td.es-dest { background: rgba(251, 215, 8, .075); }
.tp-t { display: block; color: var(--ink-50); }
.tp-d { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-350); line-height: 1.45; }
.tp-si { display: inline-flex; color: var(--success); }
.tp-si svg { width: 17px; height: 17px; }
.tp-no { color: var(--ink-550); }
.tp-v { color: var(--ink-150); font-size: 13.5px; }

/* La fila del icono de la tienda es la que resolvía la confusión: va marcada
   para que no se lea como una prestación más de la lista de arriba. */
.tp-fila--aparte th, .tp-fila--aparte td {
  background: rgba(255, 179, 0, .05);
  border-bottom: 1px solid rgba(255, 179, 0, .18);
}
.tp-fila--aparte td.es-dest { background: rgba(255, 179, 0, .05); }
.tp-fila--aparte .tp-v { color: var(--warning); font-weight: 700; }

/* --------------------------------------------------- calculadora por uso --- */
.uso { margin: 0; text-align: left; }
.uso-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.uso-n { font-size: 15px; font-weight: 800; color: var(--ink-50); font-variant-numeric: tabular-nums; }
.uso-cuenta { margin-top: 4px; color: var(--ink-250); }
.uso-total { color: var(--brand); font-variant-numeric: tabular-nums; }
.uso-rango {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 20px; margin: 2px 0 0;
  background: transparent; cursor: pointer;
}
.uso-rango::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px;
  /* El relleno es un degradado cuyo corte mueve el JS: así se tiñe la parte
     recorrida sin envolver el input en más marcado. */
  background: linear-gradient(to right, var(--brand) var(--pct, 40%), var(--ink-700) var(--pct, 40%));
}
.uso-rango::-moz-range-track {
  height: 5px; border-radius: 999px;
  background: linear-gradient(to right, var(--brand) var(--pct, 40%), var(--ink-700) var(--pct, 40%));
}
.uso-rango::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; margin-top: -5px;
  border-radius: 50%; border: 3px solid var(--ink-900); background: var(--brand);
}
.uso-rango::-moz-range-thumb {
  width: 15px; height: 15px;
  border-radius: 50%; border: 3px solid var(--ink-900); background: var(--brand);
}
.uso-rango:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

/* ------------------------------------------------------------- estrecho --- */
@media (max-width: 940px) {
  /* Con cinco columnas no cabe de ninguna manera, y recortarla con overflow
     tampoco: la página entera acababa desplazándose. Así que se deja de tratar
     como tabla y cada fila pasa a ser un bloque con los cuatro planes debajo.
     El marcado no cambia; los rótulos salen del `data-col` de cada celda. */
  .tp, .tp thead, .tp tbody, .tp tr, .tp th, .tp td { display: block; width: auto; }
  .tp thead tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tp-esquina { display: none; }
  .tp thead th {
    position: static;
    border: 1px solid var(--ink-650); border-radius: var(--r-lg);
    background: var(--ink-875);
  }
  .tp-plan.es-dest { border-color: rgba(251, 215, 8, .4); }
  .uso-cuenta { min-height: 0; }

  .tp-grupo th { padding: 26px 0 10px; border-bottom: 0; }
  .tp-fila {
    margin-bottom: 10px; padding: 13px 15px;
    border: 1px solid var(--ink-650); border-radius: var(--r-lg);
    background: var(--ink-875);
  }
  .tp-fila th { padding: 0 0 9px; border-bottom: 1px solid var(--ink-750); }
  .tp-fila td {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 7px 0 0; border: 0; text-align: left;
    background: none !important;
  }
  .tp-fila td::before { content: attr(data-col); font-size: 13px; color: var(--ink-300); }
  .tp-fila--aparte { border-color: rgba(255, 179, 0, .3); }
}
@media (max-width: 560px) {
  .tp thead tr { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Contacto

   Sin formulario: no enviaba nada. La columna que ocupaba la llena la lista de
   lo que conviene contar en el mensaje —los mismos campos, pero en manos de
   quien escribe— para que la página no quede coja.
   ========================================================================== */
.cont { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: 44px; align-items: start; }
.cont-izq .lead { max-width: 46ch; }
.cont-cta { margin-top: 26px; }
.cont-num { margin-top: 9px; font-variant-numeric: tabular-nums; }

.cont-datos { margin-top: 30px; display: grid; gap: 16px; }
.cont-datos li, .cont-punto { display: flex; gap: 13px; align-items: flex-start; }
.cont-datos .card-ico, .cont-punto .card-ico { margin: 0; flex: none; }
.cont-datos b, .cont-punto b { display: block; font-size: 14.5px; }
.cont-datos span span, .cont-punto span span {
  display: block; margin-top: 3px;
  font-size: 13px; color: var(--ink-300); line-height: 1.5;
}
.cont-der { padding: 26px; }
.cont-lista { display: grid; gap: 18px; }
.cont-cta2 { width: 100%; margin-top: 24px; }

@media (max-width: 900px) {
  .cont { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}