/* ==========================================================================
   Builders Alfa Tech — Design System compartido
   Dark theme, mobile-first. Consumido por todas las páginas del sitio.
   ========================================================================== */

:root {
  --bg: #0a0e14;
  --surface: #111720;
  --border: #1e2632;
  --text: #e6edf3;
  --muted: #8b97a6;
  --brand: #29c6d6;
  --navy: #1e3a5f;

  /* Acento por página/producto. Default = brand cyan.
     Override por página: :root{--accent:#25d366} (ChatPyme) / #8b7cf6 (Marioneta) */
  --accent: var(--brand);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   Sistema de iconos SVG compartido (bat-ico)
   Iconos de linea (stroke, 24x24, currentColor via mask) — reemplazan emojis.
   ========================================================================== */
.bat-ico{display:inline-block;width:1.5rem;height:1.5rem;background-color:currentColor;
  -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;vertical-align:middle}

.bat-ico--server{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273%27 y=%274%27 width=%2718%27 height=%276%27 rx=%271.5%27/%3E%3Crect x=%273%27 y=%2714%27 width=%2718%27 height=%276%27 rx=%271.5%27/%3E%3Cline x1=%277%27 y1=%277%27 x2=%277.01%27 y2=%277%27/%3E%3Cline x1=%277%27 y1=%2717%27 x2=%277.01%27 y2=%2717%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273%27 y=%274%27 width=%2718%27 height=%276%27 rx=%271.5%27/%3E%3Crect x=%273%27 y=%2714%27 width=%2718%27 height=%276%27 rx=%271.5%27/%3E%3Cline x1=%277%27 y1=%277%27 x2=%277.01%27 y2=%277%27/%3E%3Cline x1=%277%27 y1=%2717%27 x2=%277.01%27 y2=%2717%27/%3E%3C/svg%3E")}
.bat-ico--flag{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cline x1=%275%27 y1=%273%27 x2=%275%27 y2=%2721%27/%3E%3Cpath d=%27M5 4 C9 2, 14 6, 19 4 L19 14 C14 16, 9 12, 5 14 Z%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cline x1=%275%27 y1=%273%27 x2=%275%27 y2=%2721%27/%3E%3Cpath d=%27M5 4 C9 2, 14 6, 19 4 L19 14 C14 16, 9 12, 5 14 Z%27/%3E%3C/svg%3E")}
.bat-ico--coin{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279%27/%3E%3Cpath d=%27M12 7v10M9.5 9.5a2.5 2 0 0 1 2.5-1.5c1.5 0 2.7.9 2.7 2s-1.2 1.7-2.7 2c-1.5.3-2.7 1-2.7 2.1s1.2 1.9 2.7 1.9a2.6 2.6 0 0 0 2.5-1.4%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279%27/%3E%3Cpath d=%27M12 7v10M9.5 9.5a2.5 2 0 0 1 2.5-1.5c1.5 0 2.7.9 2.7 2s-1.2 1.7-2.7 2c-1.5.3-2.7 1-2.7 2.1s1.2 1.9 2.7 1.9a2.6 2.6 0 0 0 2.5-1.4%27/%3E%3C/svg%3E")}
.bat-ico--headset{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 13a8 8 0 0 1 16 0%27/%3E%3Crect x=%273%27 y=%2713%27 width=%274%27 height=%276%27 rx=%271.5%27/%3E%3Crect x=%2717%27 y=%2713%27 width=%274%27 height=%276%27 rx=%271.5%27/%3E%3Cpath d=%27M19 19v1a2 2 0 0 1-2 2h-4%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 13a8 8 0 0 1 16 0%27/%3E%3Crect x=%273%27 y=%2713%27 width=%274%27 height=%276%27 rx=%271.5%27/%3E%3Crect x=%2717%27 y=%2713%27 width=%274%27 height=%276%27 rx=%271.5%27/%3E%3Cpath d=%27M19 19v1a2 2 0 0 1-2 2h-4%27/%3E%3C/svg%3E")}
.bat-ico--whatsapp{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M8 10.5c0 3 2.5 5.5 5.5 5.5.9 0 1.7-.2 2.5-.6l2.5.8-.8-2.4c.5-.8.8-1.7.8-2.8 0-3-2.5-5.5-5.5-5.5S8 7.5 8 10.5Z%27/%3E%3Cpath d=%27M20.5 12A8.5 8.5 0 1 1 12 3.5%27/%3E%3Cpath d=%27M20.5 12c0 4.7-3.8 8.5-8.5 8.5%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M8 10.5c0 3 2.5 5.5 5.5 5.5.9 0 1.7-.2 2.5-.6l2.5.8-.8-2.4c.5-.8.8-1.7.8-2.8 0-3-2.5-5.5-5.5-5.5S8 7.5 8 10.5Z%27/%3E%3Cpath d=%27M20.5 12A8.5 8.5 0 1 1 12 3.5%27/%3E%3Cpath d=%27M20.5 12c0 4.7-3.8 8.5-8.5 8.5%27/%3E%3C/svg%3E")}
.bat-ico--bot{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%274%27 y=%278%27 width=%2716%27 height=%2711%27 rx=%272%27/%3E%3Cline x1=%2712%27 y1=%278%27 x2=%2712%27 y2=%274%27/%3E%3Ccircle cx=%2712%27 cy=%273%27 r=%271%27/%3E%3Cline x1=%278%27 y1=%2713%27 x2=%278%27 y2=%2714.5%27/%3E%3Cline x1=%2716%27 y1=%2713%27 x2=%2716%27 y2=%2714.5%27/%3E%3Cline x1=%272%27 y1=%2712%27 x2=%274%27 y2=%2712%27/%3E%3Cline x1=%2720%27 y1=%2712%27 x2=%2722%27 y2=%2712%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%274%27 y=%278%27 width=%2716%27 height=%2711%27 rx=%272%27/%3E%3Cline x1=%2712%27 y1=%278%27 x2=%2712%27 y2=%274%27/%3E%3Ccircle cx=%2712%27 cy=%273%27 r=%271%27/%3E%3Cline x1=%278%27 y1=%2713%27 x2=%278%27 y2=%2714.5%27/%3E%3Cline x1=%2716%27 y1=%2713%27 x2=%2716%27 y2=%2714.5%27/%3E%3Cline x1=%272%27 y1=%2712%27 x2=%274%27 y2=%2712%27/%3E%3Cline x1=%2720%27 y1=%2712%27 x2=%2722%27 y2=%2712%27/%3E%3C/svg%3E")}
.bat-ico--code{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%278 6 3 12 8 18%27/%3E%3Cpolyline points=%2716 6 21 12 16 18%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%278 6 3 12 8 18%27/%3E%3Cpolyline points=%2716 6 21 12 16 18%27/%3E%3C/svg%3E")}
.bat-ico--plug{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M9 3v5M15 3v5%27/%3E%3Cpath d=%27M6.5 8h11v4a5.5 5.5 0 0 1-11 0Z%27/%3E%3Cline x1=%2712%27 y1=%2717%27 x2=%2712%27 y2=%2721%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M9 3v5M15 3v5%27/%3E%3Cpath d=%27M6.5 8h11v4a5.5 5.5 0 0 1-11 0Z%27/%3E%3Cline x1=%2712%27 y1=%2717%27 x2=%2712%27 y2=%2721%27/%3E%3C/svg%3E")}
.bat-ico--shield{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z%27/%3E%3Cpolyline points=%279 12 11 14 15 10%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z%27/%3E%3Cpolyline points=%279 12 11 14 15 10%27/%3E%3C/svg%3E")}
.bat-ico--bolt{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolygon points=%2713 2 4 14 11 14 10 22 20 9 13 9 13 2%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolygon points=%2713 2 4 14 11 14 10 22 20 9 13 9 13 2%27/%3E%3C/svg%3E")}
.bat-ico--brain{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M9 4a3 3 0 0 0-3 3 3 3 0 0 0-2 5 3 3 0 0 0 2 5h2a2 2 0 0 0 2-2V6a2 2 0 0 0-1-2Z%27/%3E%3Cpath d=%27M15 4a3 3 0 0 1 3 3 3 3 0 0 1 2 5 3 3 0 0 1-2 5h-2a2 2 0 0 1-2-2V6a2 2 0 0 1 1-2Z%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M9 4a3 3 0 0 0-3 3 3 3 0 0 0-2 5 3 3 0 0 0 2 5h2a2 2 0 0 0 2-2V6a2 2 0 0 0-1-2Z%27/%3E%3Cpath d=%27M15 4a3 3 0 0 1 3 3 3 3 0 0 1 2 5 3 3 0 0 1-2 5h-2a2 2 0 0 1-2-2V6a2 2 0 0 1 1-2Z%27/%3E%3C/svg%3E")}
.bat-ico--bell{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6Z%27/%3E%3Cpath d=%27M10 19a2 2 0 0 0 4 0%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6Z%27/%3E%3Cpath d=%27M10 19a2 2 0 0 0 4 0%27/%3E%3C/svg%3E")}
.bat-ico--mic{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%279%27 y=%272%27 width=%276%27 height=%2712%27 rx=%273%27/%3E%3Cpath d=%27M5 10a7 7 0 0 0 14 0%27/%3E%3Cline x1=%2712%27 y1=%2717%27 x2=%2712%27 y2=%2721%27/%3E%3Cline x1=%278%27 y1=%2721%27 x2=%2716%27 y2=%2721%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%279%27 y=%272%27 width=%276%27 height=%2712%27 rx=%273%27/%3E%3Cpath d=%27M5 10a7 7 0 0 0 14 0%27/%3E%3Cline x1=%2712%27 y1=%2717%27 x2=%2712%27 y2=%2721%27/%3E%3Cline x1=%278%27 y1=%2721%27 x2=%2716%27 y2=%2721%27/%3E%3C/svg%3E")}
.bat-ico--user{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%278%27 r=%274%27/%3E%3Cpath d=%27M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%278%27 r=%274%27/%3E%3Cpath d=%27M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7%27/%3E%3C/svg%3E")}
.bat-ico--chart{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%274 19 4 11%27/%3E%3Cpolyline points=%2710 19 10 6%27/%3E%3Cpolyline points=%2716 19 16 14%27/%3E%3Cpolyline points=%2720 19 20 9%27/%3E%3Cline x1=%273%27 y1=%2719%27 x2=%2721%27 y2=%2719%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%274 19 4 11%27/%3E%3Cpolyline points=%2710 19 10 6%27/%3E%3Cpolyline points=%2716 19 16 14%27/%3E%3Cpolyline points=%2720 19 20 9%27/%3E%3Cline x1=%273%27 y1=%2719%27 x2=%2721%27 y2=%2719%27/%3E%3C/svg%3E")}
.bat-ico--filter{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolygon points=%273 4 21 4 14 13 14 19 10 21 10 13 3 4%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolygon points=%273 4 21 4 14 13 14 19 10 21 10 13 3 4%27/%3E%3C/svg%3E")}
.bat-ico--moon{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 14.5A8.5 8.5 0 1 1 9.5 4a7 7 0 0 0 10.5 10.5Z%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 14.5A8.5 8.5 0 1 1 9.5 4a7 7 0 0 0 10.5 10.5Z%27/%3E%3C/svg%3E")}
.bat-ico--clock{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279%27/%3E%3Cpolyline points=%2712 7 12 12 16 14%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279%27/%3E%3Cpolyline points=%2712 7 12 12 16 14%27/%3E%3C/svg%3E")}
.bat-ico--document{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M7 3h7l5 5v13H7Z%27/%3E%3Cpolyline points=%2714 3 14 8 19 8%27/%3E%3Cline x1=%279%27 y1=%2713%27 x2=%2715%27 y2=%2713%27/%3E%3Cline x1=%279%27 y1=%2717%27 x2=%2715%27 y2=%2717%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M7 3h7l5 5v13H7Z%27/%3E%3Cpolyline points=%2714 3 14 8 19 8%27/%3E%3Cline x1=%279%27 y1=%2713%27 x2=%2715%27 y2=%2713%27/%3E%3Cline x1=%279%27 y1=%2717%27 x2=%2715%27 y2=%2717%27/%3E%3C/svg%3E")}
.bat-ico--layers{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolygon points=%2712 3 21 8 12 13 3 8 12 3%27/%3E%3Cpolyline points=%273 12 12 17 21 12%27/%3E%3Cpolyline points=%273 16 12 21 21 16%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolygon points=%2712 3 21 8 12 13 3 8 12 3%27/%3E%3Cpolyline points=%273 12 12 17 21 12%27/%3E%3Cpolyline points=%273 16 12 21 21 16%27/%3E%3C/svg%3E")}
.bat-ico--lock{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%274%27 y=%2711%27 width=%2716%27 height=%2710%27 rx=%272%27/%3E%3Cpath d=%27M8 11V7a4 4 0 0 1 8 0v4%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%274%27 y=%2711%27 width=%2716%27 height=%2710%27 rx=%272%27/%3E%3Cpath d=%27M8 11V7a4 4 0 0 1 8 0v4%27/%3E%3C/svg%3E")}

/* ---------- Reset mínimo ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.6;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-sans);
  font-weight: 800;
  line-height: 1.2;
}

.bat-container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* ==========================================================================
   .bat-nav
   ========================================================================== */
.bat-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem clamp(1rem, 4vw, 2rem);
  background: rgba(10, 14, 20, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.bat-nav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 1rem;
}

.bat-nav__brand img,
.bat-nav__brand svg {
  height: 28px;
  width: auto;
}

.bat-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  flex-wrap: wrap;
}

.bat-nav__links a:not(.bat-btn) {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.15s ease;
}

.bat-nav__links a:not(.bat-btn):hover,
.bat-nav__links a:not(.bat-btn):focus-visible {
  color: var(--text);
}

@media (max-width: 768px) {
  .bat-nav__links a:not(.bat-btn) {
    display: none;
  }

  .bat-nav__links .bat-btn {
    margin-left: auto;
  }
}

/* ==========================================================================
   .bat-hero
   ========================================================================== */
.bat-hero {
  padding: clamp(2.5rem, 8vw, 6rem) clamp(1rem, 4vw, 2rem);
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    var(--bg);
}

.bat-hero__eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  margin-bottom: 1.25rem;
}

.bat-hero h1 {
  font-size: clamp(2rem, 6vw, 3.5rem);
  max-width: 18ch;
  margin-inline: auto;
  margin-bottom: 1rem;
}

.bat-hero p {
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.15rem);
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: 2rem;
}

.bat-hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   .bat-btn
   ========================================================================== */
.bat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.bat-btn:hover,
.bat-btn:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  transform: translateY(-1px);
}

.bat-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #06121a;
}

.bat-btn--primary:hover,
.bat-btn--primary:focus-visible {
  background: color-mix(in srgb, var(--accent) 85%, white);
  border-color: color-mix(in srgb, var(--accent) 85%, white);
}

/* ==========================================================================
   .bat-card
   ========================================================================== */
.bat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.bat-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
}

.bat-card p {
  color: var(--muted);
  font-size: 0.95rem;
}

/* ==========================================================================
   .bat-features
   ========================================================================== */
.bat-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem);
  max-width: 1120px;
  margin-inline: auto;
}

.bat-feat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.bat-feat__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.bat-feat h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.bat-feat p {
  color: var(--muted);
  font-size: 0.92rem;
}

/* ==========================================================================
   .bat-plans
   ========================================================================== */
.bat-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem);
  max-width: 1120px;
  margin-inline: auto;
  align-items: stretch;
}

.bat-plan {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2rem);
}

.bat-plan__name {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.bat-plan__price {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 800;
  margin-bottom: 0.25rem;
}

.bat-plan__price span {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
}

.bat-plan__desc {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.bat-plan__features {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.bat-plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--text);
}

.bat-plan__features li::before {
  content: "✓";
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}

.bat-plan .bat-btn {
  width: 100%;
}

.bat-plan--featured {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  position: relative;
}

.bat-plan--featured::before {
  content: "Recomendado";
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #06121a;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* ==========================================================================
   .bat-faq
   ========================================================================== */
.bat-faq {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.bat-faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
}

.bat-faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.98rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.bat-faq summary::-webkit-details-marker {
  display: none;
}

.bat-faq summary::after {
  content: "+";
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.bat-faq details[open] summary::after {
  transform: rotate(45deg);
}

.bat-faq p {
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: 0.75rem;
}

/* ==========================================================================
   .bat-footer
   ========================================================================== */
.bat-footer {
  border-top: 1px solid var(--border);
  padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.bat-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  color: var(--text);
}

.bat-footer__brand img,
.bat-footer__brand svg {
  height: 22px;
  width: auto;
}

.bat-footer__links {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.bat-footer__links a:hover,
.bat-footer__links a:focus-visible {
  color: var(--text);
}

/* ==========================================================================
   Responsive guardrails
   ========================================================================== */
@media (max-width: 480px) {
  .bat-nav__links {
    gap: 0.9rem;
  }

  .bat-hero__actions .bat-btn,
  .bat-plan .bat-btn {
    width: 100%;
  }
}