/* ============================================================
   BotSniper — Sistema de marca compartido
   botsniper-brand.css
   Servir desde: https://botsniper.xyz/brand/botsniper-brand.css
   Mobile-first · CSS puro · sin dependencias · sin build
   "Apunta. Conversa. Convierte."
   ============================================================ */

:root{
  /* Paleta oficial BotSniper */
  --bs-black:#0A0A0A;
  --bs-night:#0F172A;          /* azul noche, fondos de tarjetas/secciones */
  --bs-night-2:#1E293B;        /* variante de superficie */
  --bs-green:#00FF88;          /* verde láser, acento principal y CTA */
  --bs-cyan:#00D4FF;           /* cian eléctrico, acento secundario */
  --bs-white:#FFFFFF;
  --bs-ink:#E6EAF2;            /* texto sobre oscuro */
  --bs-dim:#94A3B8;            /* texto secundario */
  --bs-line:rgba(255,255,255,.08);

  /* Tipografía */
  --bs-font:'Inter','Noto Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* Radios, sombras, gradientes de marca */
  --bs-radius:16px;
  --bs-radius-sm:10px;
  --bs-radius-pill:999px;
  --bs-grad-accent:linear-gradient(135deg,var(--bs-green),var(--bs-cyan));
  --bs-glow-green:0 0 24px rgba(0,255,136,.35);

  /* --- Acento por nicho (override en cada landing) ---
     Por defecto = verde láser. Cada vertical puede redefinir
     --bs-accent / --bs-accent-2 para su estética única sin
     romper la base de marca. */
  --bs-accent:var(--bs-green);
  --bs-accent-2:var(--bs-cyan);
  --bs-accent-rgb:0,255,136;   /* para glows/sombras del acento */
}

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

html{scroll-behavior:smooth;}

body{
  font-family:var(--bs-font);
  color:var(--bs-ink);
  /* NUNCA fondo blanco como base */
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(var(--bs-accent-rgb),.10), transparent 60%),
    linear-gradient(135deg,var(--bs-black) 0%,var(--bs-night) 100%);
  background-attachment:fixed;
  min-height:100vh;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;}

/* ---------- Patrón de marca: grid de líneas finas ---------- */
.bs-grid{
  position:relative;
}
.bs-grid::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(var(--bs-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--bs-line) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 75%);
          mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 75%);
  pointer-events:none;
  z-index:0;
}
.bs-grid > *{position:relative;z-index:1;}

/* ---------- Contenedor ---------- */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 1.25rem;
}

/* ---------- Navbar ---------- */
.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  padding:1rem 1.25rem;
  background:rgba(10,10,10,.65);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--bs-line);
  position:sticky;top:0;z-index:50;
}
.logo{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:1.35rem;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--bs-white);
}
.logo img,.bs-isotipo{
  height:34px;width:34px;
  display:block;
  filter:drop-shadow(0 0 8px rgba(var(--bs-accent-rgb),.45));
}
.navbar-right{
  display:flex;
  gap:.75rem;
  align-items:center;
  flex-wrap:wrap;
}

/* ---------- Botones ---------- */
.btn{
  padding:.7rem 1.4rem;
  border:none;
  border-radius:var(--bs-radius-pill);
  cursor:pointer;
  font-family:inherit;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.01em;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  white-space:nowrap;
}

/* CTA primario: relleno verde láser, texto negro, pill, glow en hover */
.btn-primary{
  background:var(--bs-accent);
  color:var(--bs-black);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 0 24px rgba(var(--bs-accent-rgb),.45);
}

/* Secundario: borde fino, transparente, texto claro */
.btn-secondary{
  background:transparent;
  color:var(--bs-ink);
  border:1px solid var(--bs-line);
}
.btn-secondary:hover{
  border-color:var(--bs-accent);
  color:var(--bs-white);
}

/* Login: discreto, con guiño al acento */
.btn-login{
  background:transparent;
  color:var(--bs-dim);
  border:1px solid transparent;
  padding:.7rem 1rem;
}
.btn-login:hover{
  color:var(--bs-accent);
}

.btn-large{padding:.95rem 2rem;font-size:1.05rem;}

/* ---------- Acentos tipográficos ---------- */
.bs-accent{color:var(--bs-accent);}
.bs-accent-cyan{color:var(--bs-accent-2);}
.bs-accent-grad{
  background:var(--bs-grad-accent);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.bs-tagline{
  font-weight:800;
  letter-spacing:.02em;
}

/* ---------- Hero ---------- */
.hero{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  align-items:center;
  padding:3rem 0 2rem;
}
.hero-content h1{
  font-size:clamp(2rem,7vw,3.25rem);
  line-height:1.1;
  letter-spacing:-.03em;
  font-weight:800;
  margin-bottom:1rem;
  color:var(--bs-white);
}
.hero-content p{
  font-size:1.08rem;
  color:var(--bs-dim);
  margin-bottom:1.75rem;
  max-width:40ch;
}
.hero-buttons{
  display:flex;
  gap:.85rem;
  flex-wrap:wrap;
}
.hero-image{
  background:linear-gradient(135deg,rgba(var(--bs-accent-rgb),.12),rgba(0,212,255,.08));
  border:1px solid var(--bs-line);
  border-radius:var(--bs-radius);
  padding:2rem;
  text-align:center;
  color:var(--bs-dim);
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:4rem;
  background-size:cover;
  background-position:center;
}

/* ---------- Features ---------- */
.features{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  padding:3rem 0;
}
.feature{
  background:var(--bs-night);
  border:1px solid var(--bs-line);
  padding:1.75rem;
  border-radius:var(--bs-radius);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.feature:hover{
  border-color:rgba(var(--bs-accent-rgb),.4);
  transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.feature-icon{font-size:2.25rem;margin-bottom:.85rem;}
.feature h3{font-size:1.2rem;margin-bottom:.5rem;color:var(--bs-white);font-weight:700;}
.feature p{color:var(--bs-dim);font-size:.95rem;}

/* ---------- Pricing ---------- */
.pricing{padding:3rem 0;}
.pricing h2{
  text-align:center;
  font-size:clamp(1.8rem,5vw,2.5rem);
  color:var(--bs-white);
  letter-spacing:-.02em;
  margin-bottom:2.5rem;
}
.pricing-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  align-items:start;
}
.pricing-card{
  background:var(--bs-night);
  border:1px solid var(--bs-line);
  padding:2rem;
  border-radius:var(--bs-radius);
  text-align:center;
  transition:transform .25s ease, border-color .25s ease;
}
.pricing-card:hover{
  border-color:rgba(var(--bs-accent-rgb),.4);
  transform:translateY(-4px);
}
.pricing-card.popular{
  border:1px solid var(--bs-accent);
  box-shadow:0 0 28px rgba(var(--bs-accent-rgb),.18);
}
.pricing-card h3{font-size:1.4rem;margin-bottom:.5rem;color:var(--bs-white);font-weight:700;}
.pricing-card .price{font-size:2.4rem;font-weight:800;margin:1rem 0;color:var(--bs-white);}
.pricing-card .price span{font-size:1rem;color:var(--bs-dim);font-weight:500;}
.pricing-card ul{list-style:none;margin:1.5rem 0;text-align:left;}
.pricing-card li{padding:.55rem 0;color:var(--bs-dim);border-bottom:1px solid var(--bs-line);}
.pricing-card li:last-child{border-bottom:none;}
.pricing-card .btn{width:100%;margin-top:1rem;}

/* ---------- CTA ---------- */
.cta{
  text-align:center;
  padding:3.5rem 0;
  margin-top:2rem;
  border-top:1px solid var(--bs-line);
}
.cta h2{font-size:clamp(1.6rem,5vw,2rem);color:var(--bs-white);margin-bottom:1rem;letter-spacing:-.02em;}
.cta p{color:var(--bs-dim);font-size:1.08rem;margin-bottom:2rem;}

/* ---------- Footer ---------- */
footer{
  text-align:center;
  padding:2.5rem 0;
  color:var(--bs-dim);
  border-top:1px solid var(--bs-line);
  margin-top:2rem;
}
footer .logo{font-size:1.1rem;margin-bottom:.5rem;justify-content:center;}

/* ============================================================
   Desktop / tablet (mobile-first → ampliamos en breakpoints)
   ============================================================ */
@media (min-width:769px){
  .navbar{padding:1.25rem 3rem;}
  .container{padding:0 2rem;}
  .hero{grid-template-columns:1fr 1fr;gap:3rem;padding:5rem 0 3rem;}
  .hero-image{min-height:400px;}
  .features{grid-template-columns:repeat(3,1fr);gap:2rem;}
  .pricing-cards{grid-template-columns:repeat(3,1fr);gap:2rem;}
  .pricing-card.popular{transform:scale(1.04);}
  .pricing-card.popular:hover{transform:scale(1.04) translateY(-4px);}
}

/* ============================================================
   COMPONENTES COMPARTIDOS (landing principal + verticales)
   ============================================================ */

/* ---------- Secciones ---------- */
.section{padding:3.5rem 0;}
.section-head{max-width:46rem;margin:0 auto 2.5rem;text-align:center;}
.eyebrow{
  display:inline-block;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bs-accent);
  padding:.35rem .8rem;border:1px solid var(--bs-line);border-radius:var(--bs-radius-pill);
  margin-bottom:1rem;
}
.section-title{
  font-size:clamp(1.7rem,5vw,2.5rem);font-weight:800;letter-spacing:-.02em;
  color:var(--bs-white);line-height:1.15;
}
.section-sub{color:var(--bs-dim);font-size:1.05rem;margin-top:.85rem;}

/* ---------- Botón flotante de WhatsApp ---------- */
.bs-wa-float{
  position:fixed;right:18px;bottom:18px;z-index:90;
  display:inline-flex;align-items:center;gap:.5rem;
  background:#25D366;color:#0A0A0A;font-weight:800;
  padding:.8rem 1.1rem;border-radius:var(--bs-radius-pill);
  text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:transform .2s ease,box-shadow .2s ease;
}
.bs-wa-float:hover{transform:translateY(-2px);box-shadow:0 0 24px rgba(37,211,102,.55);}
.bs-wa-float svg{width:22px;height:22px;display:block;}
.bs-wa-float .label{display:none;}
@media (min-width:560px){.bs-wa-float .label{display:inline;}}

/* ---------- Demo de chat estilo WhatsApp (animado, CSS puro) ---------- */
.bs-chat{
  background:#0B141A;border:1px solid var(--bs-line);border-radius:var(--bs-radius);
  overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.45);max-width:380px;width:100%;margin:0 auto;
}
.bs-chat-head{
  display:flex;align-items:center;gap:.7rem;padding:.8rem 1rem;
  background:linear-gradient(90deg,rgba(var(--bs-accent-rgb),.18),transparent);
  border-bottom:1px solid var(--bs-line);
}
.bs-chat-head .ava{
  width:38px;height:38px;border-radius:50%;
  background:var(--bs-grad-accent);display:flex;align-items:center;justify-content:center;
}
.bs-chat-head .ava img{width:24px;height:24px;}
.bs-chat-head .who{font-weight:700;color:var(--bs-white);font-size:.95rem;line-height:1.1;}
.bs-chat-head .st{font-size:.72rem;color:var(--bs-accent);}
.bs-msgs{
  padding:1rem;display:flex;flex-direction:column;gap:.55rem;
  min-height:330px;
  background-image:radial-gradient(rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:18px 18px;
}
.bubble{
  max-width:80%;padding:.6rem .8rem;border-radius:14px;font-size:.9rem;line-height:1.4;
  opacity:0;transform:translateY(8px);animation:bsPop .45s ease forwards;
}
.bubble.in{align-self:flex-start;background:#1F2C34;color:var(--bs-ink);border-bottom-left-radius:4px;}
.bubble.out{align-self:flex-end;background:#075E54;color:#EAFBF2;border-bottom-right-radius:4px;}
.bubble .t{display:block;font-size:.62rem;opacity:.6;margin-top:.25rem;text-align:right;}
.bubble.typing{display:inline-flex;gap:4px;padding:.7rem .8rem;}
.bubble.typing i{width:7px;height:7px;border-radius:50%;background:var(--bs-dim);display:inline-block;animation:bsBlink 1.2s infinite;}
.bubble.typing i:nth-child(2){animation-delay:.2s;}
.bubble.typing i:nth-child(3){animation-delay:.4s;}
.bs-chat .d1{animation-delay:.3s;}
.bs-chat .d2{animation-delay:1.1s;}
.bs-chat .d3{animation-delay:2.0s;}
.bs-chat .d4{animation-delay:2.9s;}
.bs-chat .d5{animation-delay:3.8s;}
.bs-chat .d6{animation-delay:4.7s;}
.bs-chat .d7{animation-delay:5.6s;}
.bs-chat .d8{animation-delay:6.5s;}
.bs-chat .d9{animation-delay:7.4s;}
.bs-chat .d10{animation-delay:8.3s;}
@keyframes bsPop{to{opacity:1;transform:translateY(0);}}
@keyframes bsBlink{0%,60%,100%{opacity:.3;}30%{opacity:1;}}

/* ---------- Cómo funciona: pasos ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:1.25rem;counter-reset:step;}
.step{
  background:var(--bs-night);border:1px solid var(--bs-line);border-radius:var(--bs-radius);
  padding:1.75rem;position:relative;
}
.step-n{
  display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:12px;background:var(--bs-grad-accent);color:var(--bs-black);
  font-weight:800;font-size:1.2rem;margin-bottom:.9rem;
}
.step h3{color:var(--bs-white);font-size:1.15rem;margin-bottom:.4rem;}
.step p{color:var(--bs-dim);font-size:.95rem;}

/* ---------- Tarjetas de verticales ---------- */
.verticals-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;}
.vert-card{
  display:flex;flex-direction:column;gap:.6rem;
  background:var(--bs-night);border:1px solid var(--bs-line);border-radius:var(--bs-radius);
  padding:1.6rem;text-decoration:none;transition:transform .25s ease,border-color .25s ease;
}
.vert-card:hover{transform:translateY(-4px);border-color:rgba(var(--bs-accent-rgb),.4);}
.vert-card .vc-ico{font-size:2rem;}
.vert-card h3{color:var(--bs-white);font-size:1.2rem;}
.vert-card p{color:var(--bs-dim);font-size:.93rem;flex:1;}
.vert-card .vc-go{color:var(--bs-accent);font-weight:700;font-size:.9rem;}
.vert-card.soon{opacity:.72;}
.tag{
  align-self:flex-start;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.2rem .55rem;border-radius:var(--bs-radius-pill);
}
.tag.live{background:rgba(var(--bs-accent-rgb),.15);color:var(--bs-accent);}
.tag.soon{background:rgba(148,163,184,.12);color:var(--bs-dim);}

/* ---------- Por qué (diferenciadores) ---------- */
.why-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;}
.why-item{background:var(--bs-night);border:1px solid var(--bs-line);border-radius:var(--bs-radius);padding:1.6rem;}
.why-item .wi-ico{font-size:1.8rem;margin-bottom:.6rem;}
.why-item h3{color:var(--bs-white);font-size:1.1rem;margin-bottom:.35rem;}
.why-item p{color:var(--bs-dim);font-size:.93rem;}

/* ---------- Prueba de que funciona ---------- */
.metric-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1.5rem;}
.metric{background:var(--bs-night);border:1px solid var(--bs-line);border-radius:var(--bs-radius);padding:1.4rem;text-align:center;}
.metric .num{font-size:2rem;font-weight:800;color:var(--bs-accent);line-height:1;}
.metric .lbl{color:var(--bs-dim);font-size:.85rem;margin-top:.4rem;}

/* ---------- FAQ (accordion nativo) ---------- */
.faq-list{max-width:46rem;margin:0 auto;display:flex;flex-direction:column;gap:.75rem;}
.faq-item{background:var(--bs-night);border:1px solid var(--bs-line);border-radius:var(--bs-radius-sm);padding:0 1.2rem;}
.faq-item summary{
  cursor:pointer;list-style:none;padding:1.1rem 0;font-weight:700;color:var(--bs-white);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";color:var(--bs-accent);font-size:1.4rem;font-weight:800;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{color:var(--bs-dim);padding:0 0 1.1rem;font-size:.95rem;}

/* ---------- Trust strip ---------- */
.trust{border-top:1px solid var(--bs-line);border-bottom:1px solid var(--bs-line);padding:1.5rem 0;}
.trust-row{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:center;align-items:center;color:var(--bs-dim);font-size:.9rem;}
.trust-row b{color:var(--bs-ink);}

@media (min-width:769px){
  .steps{grid-template-columns:repeat(3,1fr);}
  .verticals-grid{grid-template-columns:repeat(3,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .metric-row{grid-template-columns:repeat(4,1fr);}
}

/* Accesibilidad: respetar reduce-motion */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important;}
  .btn:hover,.feature:hover,.pricing-card:hover{transform:none;}
  .bubble{opacity:1!important;transform:none!important;animation:none!important;}
  .bubble.typing{display:none!important;}
}