:root {
  --bg:#0f1020; --card:#16172b; --muted:#8a8fb3; --text:#e9ecff;
  --brand:#7a28ff; --ok:#22c55e; --danger:#ef4444; --warn:#f59e0b;
  --shadow:0 10px 40px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}

a{text-decoration:none;color:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 18px}
.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.btn{display:inline-block;padding:12px 18px;border-radius:12px;background:var(--brand);color:#fff;font-weight:600;box-shadow:var(--shadow);transition:.2s}
.btn:hover{transform:translateY(-2px)}
.btn-outline{background:transparent;border:1px solid #2a2f51}

.badge{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;background:#1f2140;color:#c8cdfa}
.small{font-size:13px;color:#a9aed9}
.muted{color:#8a8fb3}
.destacado{color:#22c55e}

nav.top{position:sticky;top:0;background:rgba(15,16,32,.7);backdrop-filter:blur(10px);border-bottom:1px solid #22254a;z-index:5}
nav.top .wrap{display:flex;align-items:center;gap:16px;padding:10px 0}
.logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#7a28ff,#27b3ff);box-shadow:0 0 0 3px rgba(122,40,255,.25)}
nav .links{margin-left:auto;display:flex;gap:16px}

.hero{padding:80px 0;background:radial-gradient(1200px 600px at 20% -10%, #241a46 0%, transparent 60%), radial-gradient(1200px 600px at 120% 10%, #1c1540 0%, transparent 60%)}
.hero h1{font-size:clamp(28px,4vw,48px);line-height:1.1;margin:0 0 14px}
.hero p{color:var(--muted);font-size:clamp(15px,2.2vw,18px)}
.hero-visual img{max-width:100%;border-radius:18px;box-shadow:var(--shadow)}

.card{background:var(--card);border:1px solid #2a2f51;border-radius:16px;box-shadow:var(--shadow)}
.card .body{padding:22px}
.price{font-size:34px;font-weight:700}

.section{padding:60px 0}
.cta{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.trust{margin-top:14px;display:flex;gap:14px;flex-wrap:wrap;color:#a9aed9}

ul{list-style:none;margin:14px 0 0;padding:0}
ul li{margin:6px 0}

footer{padding:28px 0;color:#a4a9d9;border-top:1px solid #2a2f51;margin-top:40px}
footer .footer{display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap}

@media(max-width:900px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
}

#acerca-de img {
  max-width: 350px;   /* límite de ancho */
  width: 100%;        /* se adapta a pantallas pequeñas */
  height: auto;       /* mantiene proporciones */
  display: block;
  margin: 0 auto;     /* centrado */
}

/* === FAQ Sandwich/Accordion === */
.accordion {border-radius:14px; overflow:hidden; border:1px solid #2a2f51; background:var(--card);}
.acc-item + .acc-item {border-top:1px solid #22254a;}
.acc-q {width:100%; text-align:left; padding:16px 18px; background:transparent; color:var(--text);
  border:0; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer;}
.acc-q:hover {background:#1a1c34;}
.acc-q .q {font-weight:600;}
.acc-q .ico {flex:0 0 auto; width:18px; height:18px; border:1px solid #2f3468; border-radius:6px;
  display:grid; place-items:center; font-size:12px; color:#c8cdfa;}
.acc-a {max-height:0; overflow:hidden; transition:max-height .25s ease; background:#11132a;}
.acc-a .inner {padding:0 18px 16px 18px; color:#cbd0ff;}
.acc-item[aria-expanded="true"] .acc-a {max-height:260px;}
/* Footer legal links */
.footer .links {display:flex; gap:14px; flex-wrap:wrap;}
.footer .links a {color:#a9aed9;}
.footer .links a:hover {text-decoration:underline;}

nav.top {
  background: var(--nav-bg, #0a0f1c);
  padding: 12px 0;
}

nav.top .logo-img {
  height: 50px; /* ajusta el tamaño */
  width: auto;
}

nav.top .brand-text {
  font-weight: 700;
  font-size: 1.3rem;
  color: #00c9ff; /* color cian eléctrico de tu branding */
  letter-spacing: .5px;
}

nav.top .links a {
  margin-left: 18px;
  color: #cbd0ff;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

nav.top .links a:hover {
  color: #00c9ff;
}

nav.top .links .badge {
  background: #00c9ff;
  color: #0a0f1c;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 600;
}

/* Widget flotante */
.widget-scan {
  position: fixed;
  right: 15px;
  bottom: 20px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #0f1020;
  border: 2px solid #2a2f51;
  box-shadow: 0 0 12px rgba(0,0,0,.5);
  cursor: pointer;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform .2s ease;
}
.widget-scan:hover { transform: scale(1.07); }

/* Animación pulso */
.widget-scan::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(122,40,255,0.2);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: .6; }
  70% { transform: scale(1.4); opacity: 0; }
  100% { opacity: 0; }
}

/* Iconos dentro */
.scan-icon {
  width: 70%;
  height: auto;
  z-index: 2;
}
.wa-icon {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: #25D366;
  border-radius: 50%;
  padding: 2px;
}

/* Tooltip */
.widget-scan::after {
  content: "¿Dudas? Escríbenos en WhatsApp";
  position: absolute;
  right: 80px;
  bottom: 20px;
  background: #fff;
  color: #000;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 10;
}
.widget-scan:hover::after { opacity: 1; }