html { scroll-behavior: smooth; }

:root{
  --bg:#0b0d14; --fg:#e8ecf1; --muted:#b7c2d0; --card:#141826; --border:#1f2434;
  --accent:#f6b63b; /* cambia a rojo en Combo Profético con PHP si quieres */
  --accent-light: #ffd27a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);
  font-family:"Montserrat",sans-serif;line-height:1.6}
.container{max-width:1120px;margin:auto;padding:24px}

/* ===== Header sticky con blur ===== */
.site-header{
  position: sticky; top: 0; z-index: 80;
  background: rgba(11,13,20,.65);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
}
.site-header.is-scrolled{
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  background: rgba(11,13,20,.85);
  border-color:#202534;
}

.header{display:flex;align-items:center;justify-content:space-between;gap:16px}

/* Marca */
.brand{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none}
.logo{width:90px;height:auto;display:block}
h1{font-size:1.4rem;margin:0;color:var(--accent)}
.tagline{margin:0;color:var(--muted)}

/* Navegación desktop */
.nav{display:flex;align-items:center}
.nav a{
  color:var(--fg); text-decoration:none; margin-left:16px; opacity:.9; position:relative;
  padding:6px 2px; border-radius:8px;
}
/* debajo de .nav a */
.nav a.is-active::after{ transform: scaleX(1); }

.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:linear-gradient(90deg, var(--accent), transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.nav a:hover{opacity:1}
.nav a:hover::after{transform:scaleX(1)}
.nav a.is-active{opacity:1}
.nav a.is-active::after{transform:scaleX(1)}


.btn-cta-small{
  background:linear-gradient(90deg,var(--accent), var(--accent-light));
  color:#111;padding:8px 12px;border-radius:10px;font-weight:800;margin-left:18px;
}

/* ===== Hero y demás (sin cambios funcionales) ===== */
.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:500px;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), var(--accent-light));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}

/* Carrusel */
.carousel{position:relative;overflow:hidden;background:transparent;padding:8px}
.track{display:flex;gap:10px;scroll-behavior:smooth;overflow-x:auto;overflow-y:hidden;width:100%;
  -ms-overflow-style:none; scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.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}
.section-title{
  text-align:center;font-size:1.8rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  margin:40px 0 20px;color:var(--fg);position:relative;padding-bottom:8px;
}
.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;
}
@keyframes glowline{
  0%{box-shadow:0 0 4px var(--accent);opacity:.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, box-shadow .2s}
.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)}

/* ===== Sticky bar (opcional) ===== */
.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), var(--accent-light));
  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)}

/* ===== Responsive ===== */
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero__cover{order:-1}
}
/* --- Botón hamburguesa: por defecto oculto en desktop --- */
.nav-toggle{
  display:none; background:transparent; border:0; cursor:pointer; outline:0;
  width:40px; height:40px; border-radius:10px; position:relative; color:var(--fg); z-index:70;
}
.nav-toggle span{
  position:absolute; left:9px; right:9px; height:2px; background:currentColor; border-radius:2px; transition:.25s;
}
.nav-toggle span:nth-child(1){ top:12px }
.nav-toggle span:nth-child(2){ top:19px }
.nav-toggle span:nth-child(3){ top:26px }

/* ✅ Cuando el menú está abierto, las líneas forman la X */
.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) }

/* --- Navegación desktop normal --- */
.nav{ display:flex; align-items:center }

/* --- Móvil: panel full-screen deslizante --- */
@media (max-width: 768px){
  .nav-toggle{ display:block }               /* muestra hamburguesa en móvil */

  .nav{
    position: fixed; inset: 0;
    background: rgba(11,13,20,.95);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    padding: 24px;
    display: flex; flex-direction: column; gap: 14px;
    align-items: flex-start; justify-content: center;
    transform: translateX(-100%);            /* fuera de pantalla a la izquierda */
    transition: transform .35s ease; z-index: 60;
    height: 100vh;
  }
  .nav--open{ transform: translateX(0) }     /* entra desde la izquierda */

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

/* Accesibilidad / helpers */
body.no-scroll{ overflow: hidden }


.nav a:focus-visible,
.nav-toggle:focus-visible,
.btn-cta-small:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 10px;
}

/* ====== Cards Grid ====== */
.cards{
  display:grid;
  grid-template-columns:repeat( auto-fit, minmax(260px, 1fr) );
  gap:16px;
  margin: 18px 0 34px;
}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

/* Portada */
.card__cover{
  position: relative;
  display:block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.card__cover img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1.02);
  transition: transform .35s ease, filter .35s ease;
}
.card:hover .card__cover img{ transform: scale(1.06); }

/* Badge */
.card__badge{
  position:absolute; top:10px; left:10px;
  background: linear-gradient(90deg, var(--accent), #ffd27a);
  color:#111; font-weight:800; font-size:.8rem;
  padding:6px 10px; border-radius:12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

/* Cuerpo */
.card__body{ padding:14px; display:flex; flex-direction:column; gap:8px; }
.card__title{ margin:2px 0 0; font-size:1.05rem; }
.card__title a{ color: var(--fg); text-decoration:none; }
.card__title a:hover{ text-decoration: underline; }

.card__desc{ color: var(--muted); margin:0; }

/* Meta (precio + botón) */
.card__meta{
  margin-top: 8px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.card__price{
  color: var(--accent);
  font-weight: 800;
}
.card__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 14px; border-radius:12px; white-space:nowrap;
  transition: transform .2s ease, filter .2s ease;
}
.card__btn:hover{ filter:brightness(1.05); transform: translateY(-1px); }


.logo .st1 {
  fill: var(--accent);
}
.logo .st0 {
  stroke: var(--accent);
  fill: none;
  stroke-miterlimit: 10;
  stroke-width: 21.63px;
}


/* ===== Hero con grid areas ===== */
.hero{
  display: grid;
  gap: 24px;
  align-items: center;
}

/* 📱 MÓVIL: Logo → Imagen → Textos */
@media (max-width: 900px){
  .hero{
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "cover"
      "text";
  }

  .hero__logo-wrap{ grid-area: logo; text-align: center; }
  .hero__logo{ display:block; margin:0 auto 12px; }

  .hero__cover{ grid-area: cover; display:flex; justify-content:center; }
  .hero__cover img{ width:100%; border-radius:16px; }

  .hero__text{ grid-area: text; text-align: center; }
  .btn-cta{ width:100%; text-align:center; }

  /* anula el order viejo */
  .hero__cover, .hero__logo-wrap, .hero__text{ order: initial !important; }
}

/* 💻 ESCRITORIO: 2 columnas, imagen ocupa 2 filas */
@media (min-width: 901px){
  .hero{
    grid-template-columns: 1.2fr .8fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "logo cover"
      "text cover";
  }

  .hero__logo-wrap{ grid-area: logo; }
  .hero__text{ grid-area: text; }

  .hero__cover{
    grid-area: cover;
    display:flex; align-items:center; justify-content:center;
  }
  .hero__cover img{ width:100%; border-radius:16px; }
}



/* Tarjetas con mockup */
.grid-cards-with-mockups { gap: 18px; }
.kpi--withmock {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  padding: 0; /* la imagen se pega al borde */
}
.kpi--withmock .mockup {
  position: relative;
  aspect-ratio: 3 / 2; /* 600x400 */
  overflow: hidden;
  margin: 0;
  background: #0d111b;
  border-bottom: 1px solid var(--border);
}
.kpi--withmock .mockup img {
  width: 100%;
  height: 100%;
  object-fit:contain;
  display:block;
  transform: scale(1.02);
  transition: transform .35s ease, filter .35s ease;
}
.kpi--withmock:hover .mockup img {
  transform: scale(1.06);
  filter: saturate(1.05);
}
.kpi--withmock .kpi__text {
  padding: 14px 16px 16px;
}
.kpi--withmock h4 { margin: 6px 0 6px; }
.kpi--withmock p  { margin: 0; color: var(--muted); }

/* Responsive */
@media (max-width: 900px){
  .grid4.grid-cards-with-mockups { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .grid4.grid-cards-with-mockups { grid-template-columns: 1fr; }
  .kpi--withmock .mockup { aspect-ratio: 16 / 9; } /* más apaisado en móvil */
}


/* Bonos con mockup */
.grid-bonos { gap: 16px; }
.bono-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
}
.bono-figure{
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;           /* 800x534 aprox */
  background: #0d111b;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.bono-figure img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform: scale(1.02);
  transition: transform .35s ease, filter .35s ease;
}
.bono-card:hover .bono-figure img{
  transform: scale(1.06);
  filter: saturate(1.05);
}
.bono-tag{
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 10px;
  font-size: .85rem;
  border-radius: 999px;
  background: rgba(246,182,59,.12);
  color: var(--accent);
  border: 1px solid var(--border);
  backdrop-filter: blur(4px);
}
.bono-ribbon{
  position: absolute;
  left: 0;
  top: 12px;
  padding: 6px 12px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  color: #1a1200;
  font-weight: 700;
  font-size: .8rem;
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
  box-shadow: 0 2px 10px rgba(246,182,59,.25);
}
.bono-card .kpi__text{ padding: 14px 16px 16px; }
.bono-card h4{ margin: 6px 0 6px; }
.bono-card p { margin: 0; color: var(--muted); }

/* Responsive */
@media (max-width: 900px){
  .grid-bonos{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .grid-bonos{ grid-template-columns: 1fr; }
  .bono-figure{ aspect-ratio: 16 / 9; }
}