html {
  scroll-behavior: smooth;
}

:root{
  --bg:#0b0d14; --fg:#e8ecf1; --muted:#b7c2d0; --card:#141826; --border:#1f2434;
  --accent: #f6b63b; /* dorado */
}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
.container{max-width:1120px;margin:auto;padding:24px}

.header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;gap:12px;align-items:center}
.logo{
    width: 90px;
}
h1{
    font-size:1.4rem;
    margin:0;
    color: var(--accent);
}
.tagline{margin:0;color:var(--muted)}
.nav a{color:var(--fg);text-decoration:none;margin-left:16px;opacity:.85}
.nav a:hover{opacity:1}
.btn-cta-small{background:var(--accent);color:#111;padding:8px 12px;border-radius:10px;font-weight:700}

.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.hero__text h2{font-size:2.1rem;margin:.2rem 0 8px}
.hero__text p{color:var(--muted);margin:.25rem 0 1rem}
.hero__logo{max-width:340px;display:block;margin:0 0 10px 0}
.hero__cover img{width:100%;border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.price{font-size:1.1rem;margin:.5rem 0 1rem}
.btn-cta{display:inline-block;background:linear-gradient(90deg,var(--accent),#ffd27a);color:#111;font-weight:800;padding:12px 20px;border-radius:14px;text-decoration:none}
.btn-cta:hover{filter:brightness(1.05);transform:translateY(-1px)}

.section-title{text-align:center;font-size:1.6rem;margin:34px 0 10px}
.lead{text-align:center;color:var(--muted);margin:12px auto 24px;max-width:900px}
.cta-center{text-align:center;margin:12px 0 28px}

.carousel{position:relative;overflow:hidden;background:transparent;padding:8px}
/* viewport scrollable del carrusel */
.track{
  display:flex;
  gap:10px;
  scroll-behavior:smooth;
  overflow-x: auto;      /* << clave */
  overflow-y: hidden;
  width: 100%;
  -ms-overflow-style: none;       /* oculta scrollbar en IE/Edge */
  scrollbar-width: none;          /* oculta en Firefox */
}
.track::-webkit-scrollbar{ display:none; }  /* oculta en WebKit */

.slide{min-width:240px;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:10px;box-shadow:0 8px 22px rgba(0,0,0,.25)}
.slide img{width:100%;height:320px;object-fit:cover;border-radius:14px}
.slide figcaption{text-align:center;margin-top:8px;color:var(--muted);font-weight:600}
.cbtn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.45);border:1px solid var(--border);color:#fff;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.cbtn:hover{background:rgba(0,0,0,.6)}
.prev{left:10px} .next{right:10px}

.grid6{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:16px;
    /* margin:10px 0 40px; */
}
.section-title {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;   /* 🔥 título en mayúscula */
  margin: 40px 0 20px;
  color: var(--fg);
  position: relative;
  /* display: inline-block; */
  padding-bottom: 8px;
}

/* Línea decorativa debajo */
.section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius: 2px;
  animation: glowline 2.5s infinite alternate;
}

/* Animación suave de brillo */
@keyframes glowline {
  0% { box-shadow: 0 0 4px var(--accent); opacity: 0.6; }
  100% { box-shadow: 0 0 12px var(--accent); opacity: 1; }
}

.benefit{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;transition:transform .2s ease, box-shadow .2s ease}
.benefit:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.35), 0 0 0 1px var(--accent) inset}
.benefit__icon {
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.benefit__icon i {
  font-size: 2rem;
}

.benefit h4{margin:.4rem 0 .2rem}
.benefit p{color:var(--muted)}

.footer{border-top:1px solid var(--border);margin-top:24px;padding-top:16px;color:var(--muted)}
@media (max-width:900px){ .hero{grid-template-columns:1fr} .hero__cover{order:-1} }
@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }


/* Sticky Bar */
.stickbar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: rgba(11,13,20,.7);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 30px rgba(0,0,0,.35);
  padding: max(10px, env(safe-area-inset-bottom));
  transform: translateY(0);
  transition: transform .35s ease;
}
.stickbar--hide{ transform: translateY(110%); }

.stickbar__inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 6px 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}

.stickbar__text{
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--fg);
  font-weight: 600;
}
.stickbar__text i{ color: var(--accent); font-size: 1.2rem; }

.stickbar__btn{
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(90deg,var(--accent),#ffd27a);
  color: #111; text-decoration: none; font-weight: 800;
  padding: 10px 16px; border-radius: 12px;
  white-space: nowrap;
}
.stickbar__btn:hover{ filter: brightness(1.05); transform: translateY(-1px); }

/* Móvil: más compacta */
@media (max-width: 640px){
  .stickbar__text span{ font-size: .95rem; }
}


/* Toggle (hamburguesa) oculto en desktop */
.nav-toggle{
  display:none;
  background:transparent;border:0;cursor:pointer;outline:0;
  width:40px;height:40px;border-radius:10px;position:relative;
}
.nav-toggle span{
  position:absolute;left:9px;right:9px;height:2px;background:currentColor;border-radius:2px;transition:.25s;
  color: inherit;
}
.nav-toggle span:nth-child(1){top:12px}
.nav-toggle span:nth-child(2){top:19px}
.nav-toggle span:nth-child(3){top:26px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Responsive header/nav */
@media (max-width: 768px){
  .nav-toggle{display:block}
  .header{gap:10px}
  .brand{gap:8px}
  .logo{width: 80px}

  .nav{
    position:fixed; top:64px; right:16px; left:16px;
    background:rgba(20,24,38,.96);           /* usa transparencia, sin cambiar tu paleta */
    backdrop-filter: blur(8px);
    border:1px solid var(--border);
    border-radius:14px; padding:10px;
    display:none; flex-direction:column; gap:6px; z-index:60;
  }
  .nav--open{ display:flex; }
  .btn-cta-small{width:100%;text-align:center}

  /* Evita que la stickbar tape contenido en móvil (si la usas) */
  body{padding-bottom:72px}
}

/* Accesibilidad: sin animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .nav-toggle span{transition:none}
}


/* Asegura color y capas para el toggle */
.brand, .nav-toggle { color: var(--fg); }
.nav-toggle { z-index: 70; }

/* Menú full-screen deslizante en móviles */
@media (max-width: 768px){
  .nav-toggle{ display:block; }

  .nav{
    position: fixed;
    inset: 0;                    /* top:0; right:0; bottom:0; left:0 */
    width: 100vw;
    height: 100vh;
    background: rgba(11, 13, 20, 0.95);
     /* sin cambiar paleta */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;     /* centra verticalmente los enlaces */
    gap: 14px;
    padding: 24px;
    transform: translateX(-100%);/* fuera de pantalla a la izquierda */
    transition: transform .35s ease;
    z-index: 60;                 /* debajo del toggle */
  }
  .nav--open{
    transform: translateX(0);    /* entra desde la izquierda */
  }

  .nav a{
    display: block;
    width: 100%;
    font-size: 1.15rem;
    padding: 10px 6px;
    margin: 0;                   /* quita el margin-left de desktop */
    opacity: .95;
  }
  .btn-cta-small{
    width: 100%;
    text-align: center;
    font-size: 1.05rem;
    padding: 12px;
  }

  /* (Opcional) botón cerrar dentro del panel */
  .nav-close{
    position: absolute;
    top: 14px; right: 14px;
    background: transparent;
    border: 0;
    font-size: 2rem;
    line-height: 1;
    color: inherit;              /* usa tu color */
    cursor: pointer;
  }

  /* Evita que la stickbar tape contenido en móvil si la usas */
  body{ padding-bottom: 72px; }
}

/* Bloquear scroll del body cuando el menú esté abierto */
body.no-scroll{ overflow: hidden; }

/* Respeta accesibilidad de movimiento reducido */
@media (prefers-reduced-motion: reduce){
  .nav{ transition: none; }
  .nav-toggle span{ transition: none; }
}


/* El carrusel base ya existe: .carousel, .track, .slide ... */
/* Para este slider de bonos, hacemos las tarjetas un poco más grandes */
.slide--bonus{ min-width: 280px; }
.slide--bonus img{ height: 360px; }