:root{
  --bg:#0b0d14;
  --card:#111522;
  --muted:#8a94a7;
  --text:#e8edf5;
  --primary:#6c6cff;
  --primary-600:#5454ff;
  --accent:#ffb703;
  --success:#10b981;
  --contrast:#111;
  --border:#1c2435;
  --shadow:0 10px 30px rgba(0,0,0,.35);

  /* Velocidad del marquee (puedes cambiar a 12s, 25s, etc.) */
  --marquee-duration: 20s;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f8fc; --card:#fff; --muted:#516074; --text:#0a0c12;
    --primary:#4f46e5; --primary-600:#4338ca; --contrast:#fff;
    --border:#e6eaf2; --shadow:0 10px 25px rgba(0,0,0,.08);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6
}
.container{width:min(1120px,92vw);margin-inline:auto}
.grid{display:grid;gap:24px}
.center{text-align:center}
.muted{color:var(--muted)}
.accent{color:var(--accent)}
.lead{font-size:1.1rem;color:var(--muted);max-width:60ch}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}

/* Topbar */
.topbar{background:linear-gradient(90deg,var(--primary),#00b3ff);color:#fff}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:.45rem 0}
.topbar .btn{margin-left:.5rem}

/* Header */
.header{
  position:sticky;top:0;z-index:10;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border)
}
.nav{display:flex;align-items:center;gap:16px;padding:14px 0}
.logo{font-weight:800;letter-spacing:.3px;text-decoration:none;color:var(--text);display:inline-flex;align-items:center;gap:.4rem}
.logo-mark{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--primary),#00b3ff);color:#fff;font-weight:900}
.menu{display:flex;gap:18px;align-items:center}
.menu a{color:var(--muted);text-decoration:none;font-weight:600}
.menu a:hover{color:var(--text)}
.hamburger{display:none;background:transparent;border:1px solid var(--border);color:var(--text);border-radius:8px;padding:.4rem .6rem}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.1rem;border-radius:12px;border:1px solid transparent;
  font-weight:700;text-decoration:none;cursor:pointer;
  transition:transform .06s ease,filter .2s ease
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--primary);color:#fff}
.btn.primary:hover{filter:brightness(1.08)}
.btn.outline{background:transparent;border-color:var(--border);color:var(--text)}
.btn.contrast{background:var(--accent);color:#111}
.btn.success{background:var(--success);color:#fff}
.ghost{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:10px;padding:.4rem .6rem}
.small{font-size:.85rem}

/* Accesibilidad: foco visible en enlaces y botones */
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary-600);
  outline-offset:2px;
  border-radius:12px;
}

/* Hero */
.hero{padding:48px 0 24px}
.hero-grid{grid-template-columns:1.1fr .9fr;align-items:center}
.hero-bullets{list-style:none;margin:12px 0 0;padding:0}
.hero-bullets li{color:var(--muted);margin:.2rem 0}
@media (max-width:880px){ .hero-grid{grid-template-columns:1fr} }

/* Carousel */
.carousel{position:relative;overflow:hidden;min-height:320px}
.carousel-track{display:flex;transition:transform .5s ease-in-out}
.carousel img{
  width:100%;height:100%;object-fit:cover;display:block;
  aspect-ratio:16/9; /* ayuda a evitar saltos de layout */
}
.carousel .carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,.4);border:none;color:#fff;
  width:38px;height:38px;border-radius:50%;cursor:pointer
}
.carousel .prev{left:12px}
.carousel .next{right:12px}
.carousel-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:8px;justify-content:center}
.carousel-dots button{width:10px;height:10px;border-radius:50%;border:1px solid #fff;background:transparent;opacity:.6}
.carousel-dots button.active{background:#fff;opacity:1}

/* Sections */
.section{padding:64px 0}
.section.alt{background:linear-gradient(180deg,rgba(255,255,255,0.03),transparent)}
.cards-3{grid-template-columns:repeat(3,1fr)}
.feature{padding:22px;border:1px solid var(--border);border-radius:16px;background:var(--card)}
.feature .icon{font-size:28px}

/* Pricing */
.pricing{grid-template-columns:repeat(3,1fr);margin-top:18px}
.price-card{padding:22px;border:1px solid var(--border);border-radius:16px;background:var(--card);position:relative}
.price-card .badge{position:absolute;top:16px;right:16px;background:var(--accent);color:#111;font-weight:800;padding:.2rem .45rem;border-radius:10px}
.price{font-size:2.2rem;font-weight:800;margin:.3rem 0}
.price .small{font-size:.9rem;color:var(--muted);font-weight:600}
.subtitle{color:var(--muted);margin-top:-.25rem}
.list{list-style:none;padding:0;margin:12px 0 16px}
.list li{padding:6px 0;border-bottom:1px dashed var(--border)}

/* Teaser Reseller */
.teaser{grid-template-columns:1.1fr .9fr;align-items:center}
.teaser-card{min-height:260px;display:grid;place-items:center}
.teaser-graphic{width:100%;aspect-ratio:16/9;border-radius:14px;background:linear-gradient(135deg,#0ea5e9, #6c6cff);position:relative}
.teaser-graphic::after{content:"Panel Reseller";position:absolute;left:16px;bottom:14px;background:rgba(0,0,0,.35);padding:.35rem .6rem;border-radius:10px;color:#fff;font-weight:700}

/* Forms */
.form{padding:22px}
.form-grid{grid-template-columns:1fr 1fr}
.form-grid .full{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:8px;font-weight:600}
input,select,textarea{padding:.8rem;border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary-600);border-color:transparent}

/* Footer */
.footer{border-top:1px solid var(--border);padding:26px 0;margin-top:24px}
.footer-grid{display:grid;gap:16px;grid-template-columns:1fr auto}
.footer .links{display:flex;gap:14px;align-items:center}
.legal-note{font-size:.9rem}

/* Marquee (cinta deslizante) */
.marquee{
  overflow:hidden;
  border-block:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
}
.marquee-track{
  display:inline-flex;
  gap:28px;
  white-space:nowrap;
  padding:.6rem 0;
  will-change:transform;
}
.marquee.is-animating .marquee-track{
  animation: marquee-scroll var(--marquee-duration) linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state: paused; }
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{   transform:translateX(-50%); } /* -50% porque duplicamos el contenido por JS */
}
@media (prefers-reduced-motion: reduce){
  .marquee.is-animating .marquee-track{ animation:none; }
}

/* WhatsApp Float */
.whatsapp-float{
  position: fixed;
  bottom: 22px;
  right: 22px;      /* usa .left para lado izquierdo */
  width: 60px;
  height: 60px;
  background: transparent;   /* el verde está en el SVG dentro */
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
  text-decoration:none;
  z-index: 999;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover{
  transform: scale(1.08);
  filter: brightness(1.05);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.whatsapp-float.left{ left:22px; right:auto; }

/* Responsive */
@media (max-width:880px){
  .menu{display:none}
  .hamburger{display:inline-block;margin-left:auto}
  .cards-3{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .teaser{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}