@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Base (tema claro) */
  --mkt-bg: #F5F7FB;
  --mkt-text: #0F172A;
  --mkt-text-secondary: #475569;
  --mkt-text-muted: #94A3B8;

  /* Marca (mismo indigo que la app y el widget de chat) */
  --mkt-primary: #6366F1;
  --mkt-primary-hover: #4F46E5;
  --mkt-primary-light: rgba(99, 102, 241, 0.1);
  --mkt-secondary: #8B5CF6;
  --mkt-success: #10B981;

  /* Vidrio esmerilado */
  --mkt-glass-bg: rgba(255, 255, 255, 0.6);
  --mkt-glass-bg-strong: rgba(255, 255, 255, 0.78);
  --mkt-glass-border: rgba(255, 255, 255, 0.9);
  --mkt-glass-shadow: 0 20px 50px -20px rgba(30, 41, 59, 0.18);
  --mkt-border: rgba(15, 23, 42, 0.08);

  --mkt-whatsapp: #25D366;
  --mkt-messenger: #0084FF;
  --mkt-instagram: #E1306C;
  --mkt-telegram: #26A5E4;
  --mkt-webchat: #6366F1;

  --mkt-radius: 1.1rem;
  --mkt-radius-sm: 0.65rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--mkt-bg);
  color: var(--mkt-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img, svg { max-width: 100%; display: block; }

.mkt-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Fondo tipo "aurora" — manchas de color difuminadas fijas detrás de todo,
   para que las tarjetas de vidrio tengan algo translúcido que mostrar. Sin
   esto, el efecto de vidrio sobre un fondo plano no se nota. */
.mkt-aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.mkt-aurora::before,
.mkt-aurora::after,
.mkt-aurora span {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
}
.mkt-aurora::before {
  width: 42vw;
  height: 42vw;
  top: -10vw;
  left: -8vw;
  background: radial-gradient(circle, #A5B4FC 0%, transparent 70%);
}
.mkt-aurora::after {
  width: 38vw;
  height: 38vw;
  top: 8vw;
  right: -10vw;
  background: radial-gradient(circle, #F0ABFC 0%, transparent 70%);
}
.mkt-aurora span {
  width: 34vw;
  height: 34vw;
  bottom: -12vw;
  left: 22vw;
  background: radial-gradient(circle, #99F6E4 0%, transparent 70%);
}

@media (prefers-reduced-motion: no-preference) {
  .mkt-aurora::before { animation: mkt-drift 22s ease-in-out infinite alternate; }
  .mkt-aurora::after { animation: mkt-drift 26s ease-in-out infinite alternate-reverse; }
  .mkt-aurora span { animation: mkt-drift 20s ease-in-out infinite alternate; }
}
@keyframes mkt-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(3vw, 2vw) scale(1.08); }
}

/* Glass — receta base reutilizada por header, tarjetas, badges flotantes */
.mkt-glass {
  background: var(--mkt-glass-bg);
  border: 1px solid var(--mkt-glass-border);
  border-radius: var(--mkt-radius);
  box-shadow: var(--mkt-glass-shadow);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

/* Header */
.mkt-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(245, 247, 251, 0.75);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--mkt-border);
}
.mkt-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 68px;
}
.mkt-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.mkt-logo-text {
  font-weight: 800;
  font-size: 1.25rem;
  background: linear-gradient(90deg, #6366F1, #8B5CF6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mkt-nav {
  display: flex;
  gap: 1.75rem;
  font-size: 0.9rem;
  color: var(--mkt-text-secondary);
}
.mkt-nav a:hover { color: var(--mkt-text); }
.mkt-header-cta { display: flex; gap: 0.75rem; align-items: center; }

/*
  Menú móvil. Antes, a ≤720px se ocultaban tanto `.mkt-nav` como el botón
  "Iniciar sesión" y no había nada que los reemplazara: en un teléfono no
  existía forma de entrar a la cuenta ni de llegar a Producto/Precios/Preguntas
  salvo desplazándose. El botón hamburguesa los devuelve.
*/
.mkt-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 10px;
  border: 1px solid var(--mkt-border);
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.mkt-burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--mkt-text-secondary);
  transition: transform 200ms ease, opacity 200ms ease;
}
/* Abierto: las tres barras se vuelven una X. */
.mkt-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mkt-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mkt-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mkt-mobile-menu {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 1.15rem 1.15rem;
  border-top: 1px solid var(--mkt-border);
  background: rgba(245, 247, 251, 0.97);
}
.mkt-mobile-menu a {
  padding: 0.8rem 0.25rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--mkt-text-secondary);
}
/* Los dos CTA sí conservan su forma de botón y van al final, separados. */
.mkt-mobile-menu .mkt-btn {
  margin-top: 0.35rem;
  padding: 0.8rem 1.25rem;
  color: inherit;
}
.mkt-mobile-menu .mkt-btn-primary { color: #fff; }

/* Buttons */
.mkt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1.25rem;
  border-radius: 0.6rem;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 150ms ease;
  border: 1px solid transparent;
}
.mkt-btn-primary {
  background: linear-gradient(135deg, var(--mkt-primary), var(--mkt-secondary));
  color: #fff;
  box-shadow: 0 12px 24px -10px rgba(99, 102, 241, 0.55);
}
.mkt-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 28px -10px rgba(99, 102, 241, 0.6); }
.mkt-btn-ghost {
  border-color: var(--mkt-border);
  color: var(--mkt-text-secondary);
  background: rgba(255, 255, 255, 0.5);
}
.mkt-btn-ghost:hover { color: var(--mkt-text); border-color: rgba(15, 23, 42, 0.18); }
.mkt-btn-lg { padding: 0.9rem 1.85rem; font-size: 1rem; }

/* Hero */
.mkt-hero { padding: 4.5rem 0 5rem; }
.mkt-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
}
.mkt-hero-copy h1 {
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}
.mkt-hero-copy h1 .mkt-gradient-text {
  background: linear-gradient(90deg, var(--mkt-primary), var(--mkt-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mkt-hero-copy p {
  font-size: 1.1rem;
  color: var(--mkt-text-secondary);
  max-width: 520px;
  margin-bottom: 2rem;
}
.mkt-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.mkt-hero-note { font-size: 0.85rem; color: var(--mkt-text-muted); margin-bottom: 2rem; }

.mkt-channels { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.mkt-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid var(--mkt-border);
  background: rgba(255, 255, 255, 0.55);
}
.mkt-pill-wa { color: var(--mkt-whatsapp); }
.mkt-pill-msn { color: var(--mkt-messenger); }
.mkt-pill-ig { color: var(--mkt-instagram); }
.mkt-pill-tg { color: var(--mkt-telegram); }
.mkt-pill-wc { color: var(--mkt-webchat); }

.mkt-hero-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.mkt-hero-stat strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
}
/* Hijo directo, no descendiente: el stat "<2min" anida un <span> contador
   dentro de <strong> y no debe heredar el tamaño chico del subtítulo. */
.mkt-hero-stat > span {
  font-size: 0.82rem;
  color: var(--mkt-text-muted);
}

/* Mockup de dashboard en tiempo real */
.mkt-hero-visual { position: relative; }
.mkt-dashboard {
  padding: 1.5rem;
  position: relative;
}
.mkt-dashboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}
.mkt-dashboard-title { font-weight: 700; font-size: 0.95rem; }
.mkt-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--mkt-success);
  background: rgba(16, 185, 129, 0.12);
  padding: 0.3rem 0.65rem;
  border-radius: 9999px;
}
.mkt-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mkt-success);
}
@media (prefers-reduced-motion: no-preference) {
  .mkt-live-dot { animation: mkt-pulse 1.6s ease-in-out infinite; }
}
@keyframes mkt-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  50% { opacity: 0.6; box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
}

.mkt-chart-wrap { margin-bottom: 1.25rem; }
.mkt-chart-wrap svg { width: 100%; height: auto; display: block; }

.mkt-stat-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.mkt-stat-tile {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--mkt-border);
  border-radius: var(--mkt-radius-sm);
  padding: 0.75rem 0.85rem;
}
.mkt-stat-tile span {
  display: block;
  font-size: 0.68rem;
  color: var(--mkt-text-muted);
  margin-bottom: 0.2rem;
}
.mkt-stat-tile strong { font-size: 1.05rem; font-weight: 800; }
.mkt-stat-tile.up strong { color: var(--mkt-success); }

.mkt-float-badge {
  position: absolute;
  padding: 0.6rem 0.9rem;
  border-radius: var(--mkt-radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mkt-float-badge svg { flex-shrink: 0; }
.mkt-float-1 { top: -1.25rem; right: -1rem; }
.mkt-float-2 { bottom: -1.5rem; left: -1.25rem; max-width: 220px; }
.mkt-float-2 small { display: block; color: var(--mkt-text-muted); font-weight: 500; font-size: 0.7rem; }

@media (prefers-reduced-motion: no-preference) {
  .mkt-float-1 { animation: mkt-float 5s ease-in-out infinite; }
  .mkt-float-2 { animation: mkt-float 6s ease-in-out infinite 0.4s; }
}
@keyframes mkt-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Secciones */
section { padding: 4.5rem 0; position: relative; }
.mkt-section-header { text-align: center; max-width: 620px; margin: 0 auto 3rem; }
.mkt-section-header h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin-bottom: 0.75rem; }
.mkt-section-header p { color: var(--mkt-text-secondary); }
.mkt-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mkt-primary);
  margin-bottom: 0.75rem;
}

/* Trust badges */
.mkt-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem 0 0;
}
.mkt-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mkt-text-secondary);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--mkt-border);
}
.mkt-trust-item svg { width: 16px; height: 16px; color: var(--mkt-primary); flex-shrink: 0; }

/* Features */
.mkt-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 960px) {
  .mkt-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .mkt-features { grid-template-columns: 1fr; }
}
.mkt-feature-card {
  padding: 1.75rem;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.mkt-feature-card:hover { transform: translateY(-4px); box-shadow: 0 26px 55px -22px rgba(30, 41, 59, 0.22); }
.mkt-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(139, 92, 246, 0.18));
  color: var(--mkt-primary);
  margin-bottom: 1rem;
}
.mkt-feature-icon svg { width: 22px; height: 22px; }
.mkt-feature-card h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.mkt-feature-card p { color: var(--mkt-text-secondary); font-size: 0.9rem; }

/* Selector de moneda (USD/DOP) */
.mkt-currency-toggle {
  display: inline-flex;
  gap: 0.25rem;
  margin-top: 1.25rem;
  padding: 0.25rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--mkt-border);
}
.mkt-currency-btn {
  border: none;
  background: transparent;
  color: var(--mkt-text-secondary);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.4rem 1rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 150ms ease;
}
.mkt-currency-btn.active {
  background: linear-gradient(135deg, var(--mkt-primary), var(--mkt-secondary));
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(99, 102, 241, 0.55);
}
.mkt-currency-btn:not(.active):hover { color: var(--mkt-text); }

/* Pricing */
.mkt-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
.mkt-pricing-note {
  text-align: center;
  font-size: 0.8rem;
  color: var(--mkt-text-muted);
  margin-top: 1.5rem;
}
.mkt-plan {
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.mkt-plan.mkt-plan-highlight {
  background: var(--mkt-glass-bg-strong);
  box-shadow: 0 0 0 1.5px var(--mkt-primary), 0 26px 55px -20px rgba(99, 102, 241, 0.45);
  transform: translateY(-6px);
}
.mkt-plan-name { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.25rem; }
.mkt-plan-tagline { color: var(--mkt-text-secondary); font-size: 0.85rem; margin-bottom: 1.25rem; min-height: 2.2rem; }
.mkt-plan-price { font-size: 2.2rem; font-weight: 800; margin-bottom: 0.1rem; }
/* Solo el sufijo "/mes" (último span) va chico — el símbolo de moneda y
   el monto (primeros dos spans) heredan el tamaño grande. */
.mkt-plan-price > span:last-child { font-size: 0.9rem; font-weight: 500; color: var(--mkt-text-secondary); }
.mkt-plan-cycle .mkt-price-value, .mkt-plan-cycle .mkt-currency-symbol { font-weight: 700; color: var(--mkt-text); }
.mkt-plan-cycle { font-size: 0.8rem; color: var(--mkt-text-muted); margin-bottom: 0.4rem; }
.mkt-plan-included { font-size: 0.8rem; color: var(--mkt-text-secondary); margin-bottom: 1.5rem; }
.mkt-plan-features { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.75rem; flex: 1; }
.mkt-plan-features li { display: flex; gap: 0.5rem; font-size: 0.88rem; color: var(--mkt-text-secondary); }
.mkt-plan-features li::before { content: "✓"; color: var(--mkt-success); font-weight: 700; }
.mkt-badge {
  position: absolute;
  top: -0.8rem;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--mkt-primary), var(--mkt-secondary));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.3rem 0.8rem;
  border-radius: 9999px;
  box-shadow: 0 8px 18px -6px rgba(99, 102, 241, 0.6);
}

/* FAQ */
.mkt-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; }
.mkt-faq-item { padding: 1.25rem 1.5rem; }
.mkt-faq-item h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.mkt-faq-item p { color: var(--mkt-text-secondary); font-size: 0.9rem; }

/* CTA */
.mkt-cta {
  text-align: center;
  padding: 3.5rem 2rem;
  margin: 0 1.5rem;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.12));
}
.mkt-cta h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin-bottom: 0.75rem; }
.mkt-cta p { color: var(--mkt-text-secondary); margin-bottom: 1.75rem; }

/* Footer */
.mkt-footer { border-top: 1px solid var(--mkt-border); padding: 2.5rem 0; }
.mkt-footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
  justify-content: space-between;
}
.mkt-footer-links { display: flex; gap: 1.5rem; font-size: 0.85rem; color: var(--mkt-text-secondary); }
.mkt-footer-links a:hover { color: var(--mkt-text); }
.mkt-text-muted { color: var(--mkt-text-muted); font-size: 0.85rem; }
.mkt-footer-copy { width: 100%; text-align: center; margin-top: 0.5rem; }
.mkt-footer-by {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--mkt-text-muted);
  margin-top: 0.6rem;
}
.mkt-footer-by a { color: var(--mkt-text-secondary); font-weight: 600; }
.mkt-footer-by a:hover { color: var(--mkt-primary); }
.mkt-footer-contact { font-size: 0.8rem; color: var(--mkt-text-secondary); display: flex; flex-direction: column; gap: 0.3rem; }
.mkt-footer-contact a:hover { color: var(--mkt-primary); }

/* Legal pages */
.mkt-legal { max-width: 760px; margin: 0 auto; padding: 3rem 1.5rem 5rem; }
.mkt-legal h1 { font-size: 2rem; font-weight: 800; margin-bottom: 1.5rem; }
.mkt-legal h2 { font-size: 1.2rem; font-weight: 700; margin: 2rem 0 0.75rem; }
.mkt-legal p, .mkt-legal li { color: var(--mkt-text-secondary); margin-bottom: 0.75rem; font-size: 0.95rem; }
.mkt-legal ul { list-style: disc; padding-left: 1.25rem; }
.mkt-legal ul li { list-style: disc; }
.mkt-legal strong { color: var(--mkt-text); }

/*
  Entrada en scroll (progressive enhancement — sin JS se ve igual, solo sin
  animar). El estado oculto se condiciona a `.mkt-js`, que pone un script en
  línea en el <head> de base.html: así, si el JS está deshabilitado, las
  tarjetas de producto, los precios, el FAQ y el CTA se ven de una vez en vez
  de quedar en `opacity: 0` ocupando espacio en blanco. La clase se agrega
  antes del primer pintado justamente para que no haya parpadeo.
*/
.mkt-js .mkt-reveal { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 500ms ease; }
.mkt-js .mkt-reveal.mkt-in { opacity: 1; transform: translateY(0); }

/* ------------------------------------------------------------------ */
/* Responsivo                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 960px) {
  .mkt-hero-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .mkt-hero-copy { text-align: center; }
  .mkt-hero-copy p { margin-left: auto; margin-right: auto; }
  .mkt-hero-actions, .mkt-channels, .mkt-hero-stats { justify-content: center; }
  .mkt-hero-visual { max-width: 460px; margin: 0 auto; }
}

/*
  La cabecera se queda sin espacio antes que el resto de la página: logo + tres
  enlaces + dos botones ya no entran a 768px (ahí "Iniciar sesión" partía en dos
  líneas y "Prueba gratis" quedaba cortado contra el borde). Por eso el menú
  hamburguesa entra a 880px y no a 720px como el resto del layout.
  La navegación y el login no desaparecen: se mudan al menú.
*/
@media (max-width: 880px) {
  .mkt-nav { display: none; }
  .mkt-header-cta { display: none; }
  .mkt-burger { display: flex; }
  .mkt-mobile-menu.abierto { display: flex; }
}

@media (max-width: 720px) {
  .mkt-container { padding: 0 1.15rem; }
  .mkt-cta { margin: 0 1rem; padding: 2.5rem 1.25rem; }
  .mkt-hero { padding: 3rem 0 3.5rem; }
  section { padding: 3.25rem 0; }
  .mkt-float-badge { display: none; }
  .mkt-hero-stats { gap: 1.5rem; }

  /* Tres tiles de estadística dentro de una tarjeta de ~430px dejaban ~120px
     cada uno y "Resolución"/"2m 14s" se partían en varias líneas. */
  .mkt-stat-tiles { grid-template-columns: repeat(2, 1fr); }

  /* El footer es flex-wrap, pero sus hijos no podían romper línea: los tres
     enlaces y "Un producto de Consemco" quedaban comprimidos contra el borde. */
  .mkt-footer-inner { justify-content: flex-start; gap: 1.25rem; }
  .mkt-footer-inner > * { flex-basis: 100%; }
  .mkt-footer-links { flex-wrap: wrap; gap: 1rem 1.5rem; }
  .mkt-footer-by { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .mkt-stat-tiles { grid-template-columns: 1fr; }
  /* El logotipo a 1.25rem/800 más "Prueba gratis" no entraban en la barra. */
  .mkt-logo-text { font-size: 1.1rem; }
  .mkt-header-inner { gap: 0.75rem; }
  /* Los precios en DOP ("RD$14,000") desbordaban la tarjeta a 2.2rem. */
  .mkt-plan { padding: 1.75rem 1.25rem; }
  .mkt-plan-price { font-size: 1.9rem; }
  .mkt-legal { padding: 2rem 1.15rem 3.5rem; }
  .mkt-legal h1 { font-size: 1.6rem; }
}