/* 🎨 Paleta monocromática (blanco & negro) */
:root {
  --gray: #4A4A4A;      /* gris medio */
  --black: #121212;     /* negro base */
  --snow: #FAFAFA;      /* blanco suave */
  --cream: #F0F0F0;     /* gris muy clllaro */

  /* “blues” convertidos a grises para compatibilidad con tus estilos */
  --blue-100: #E6E6E6;  /* claro */
  --blue-200: #D4D4D4;  /* claro medio (accent) */
  --blue-300: #9B9B9B;  /* medio */
  --blue-400: #3F3F3F;  /* oscuro */

  --bg: var(--black);
  --fg: var(--snow);
  --muted: #BFBFBF;
  --accent: var(--blue-200);
  --accent-2: var(--blue-300);
  --card: #0F0F0F;      /* tarjeta/dark */
  /* ajusta estos 3 valores si lo necesitas */
  --header-h: 72px;                               /* alto de tu header sticky */
  --section-gap: clamp(56px, 7vw, 120px);         /* padding vertical por sección */
  --edge-gap: clamp(32px, 5vw, 80px);             /* espacio adicional contra bordes */
}

* { box-sizing: border-box }

html { scroll-behavior: smooth }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
  background:
    /* antes tinte azulado -> brillo neutro */
    radial-gradient(900px 600px at 80% -10%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, var(--black), var(--card) 60%, var(--card));
  color: var(--fg);
  line-height: 1.6;
}

/* Header & nav */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(18, 16, 16, .72);
  backdrop-filter: blur(8px) saturate(1.2);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.container { max-width: 1100px; margin: auto; padding: 0 16px }

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0
}

.brand a {
  color: var(--fg);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .3px
}

.menu { display: flex; gap: 12px; flex-wrap: wrap }

.menu a {
  color: var(--fg);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.menu a:hover { border-color: rgba(255, 255, 255, .18) }

.menu .cta {
  /* degradado gris */
  background: linear-gradient(90deg, var(--accent), var(--blue-100));
  color: var(--black);
  font-weight: 700
}

/* Layout */
section {
  padding-block: var(--section-gap);
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 12px }
h1 { font-size: clamp(28px, 4vw, 44px) }
h2 { font-size: clamp(22px, 3vw, 32px) }

p.lead {
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 65ch
}

.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .015));
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 20px;
  padding: 20px;
}

.grid { display: grid; gap: 16px }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }

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

/* Forms */
input, textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .15);
  background: var(--card);
  color: var(--fg);
  outline: none;
}

textarea { min-height: 120px; resize: vertical }

label { font-size: .92rem; color: var(--muted) }

.row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr }
@media (max-width:700px){ .row { grid-template-columns: 1fr } }

button {
  padding: 12px 16px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(90deg, var(--accent), var(--blue-200)); /* gris a gris */
  color: var(--black);
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

/* Pricing */
.pricing { gap: 22px }
.price-card { position: relative }

.badge {
  position: absolute;
  top: -12px;
  left: 16px;
  background: #EAEAEA;      /* antes verde neón -> neutro */
  color: #111;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .15);
}

.price { font-size: 2rem; font-weight: 900 }

.ul-check { list-style: none; padding: 0; margin: 0 }

.ul-check li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0
}

.icon-ok, .icon-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-weight: 900;
}

.icon-ok { background: #EAEAEA; color: #111 }
.icon-no { background: #2B2B2B; color: #E6E6E6 }

/* Feature grid */
.feature { display: flex; gap: 12px; align-items: flex-start }
.feature .icon { font-size: 26px }

/* Footer */
footer {
  color: var(--muted);
  font-size: .9rem;
  padding: 0px 0;
  border-top: 0px solid rgba(255, 255, 255, .08)
}

.social a { color: var(--fg); opacity: .9; margin-right: 10px }
.social a:hover { opacity: 1 }

.hero-cta a {
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, .2)
}

.hero-cta a.primary {
  background: linear-gradient(90deg, var(--accent), var(--blue-100)); /* gris */
  color: var(--black);
  border: 0
}

/* --- Carrito modal simple --- */
#cart-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: none; z-index: 80 }

#cart {
  position: fixed;
  right: 0; top: 0;
  height: 100%;
  width: min(420px, 100%);
  background: var(--card);
  color: var(--snow);
  border-left: 1px solid rgba(255, 255, 255, .12);
  transform: translateX(100%);
  transition: transform .3s ease;
  z-index: 90;
  display: flex; flex-direction: column
}

#cart.open { transform: translateX(0) }

#cart-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px; border-bottom: 1px solid rgba(255, 255, 255, .12)
}

#cart-body { padding: 16px; flex: 1; overflow: auto }

#cart-footer { padding: 16px; border-top: 1px solid rgba(255, 255, 255, .12) }

.cart-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0 }

.btn-link {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .2);
  color: var(--snow);
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer
}

.btn-primary {
  background: linear-gradient(90deg, var(--accent), var(--blue-100)); /* gris */
  color: var(--black);
  border: 0;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800
}

.badge-plan {
  background: #EAEAEA; /* neutro */
  color: #111;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px
}

/* === Carrito Culqi/Checkout === */
.overlay-cart { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: none; z-index: 80 }

.cart {
  position: fixed; right: 0; top: 0;
  height: 100vh; width: min(420px, 92vw);
  background: var(--card);
  color: var(--snow);
  border-left: 1px solid rgba(255, 255, 255, .1);
  z-index: 90; transform: translateX(100%); transition: .25s;
}

.cart.open { transform: translateX(0) }
.overlay-cart.open { display: block }

.cart header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.cart .body { padding: 16px; display: grid; gap: 12px }

.cart .item {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px; padding: 12px 14px
}

.qty { display: flex; align-items: center; gap: 8px }

.qty button {
  width: 28px; height: 28px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: transparent; color: var(--snow); cursor: pointer
}

.cart .footer { padding: 16px; border-top: 1px solid rgba(255, 255, 255, .1) }

.btn { padding: 12px 16px; border: 0; border-radius: 12px; cursor: pointer; font-weight: 800 }

.btn-primary { background: linear-gradient(90deg, var(--blue-200), var(--blue-100)); color: var(--black) }

.btn-outline { background: transparent; color: var(--snow); border: 1px solid rgba(255, 255, 255, .2) }

/* Acciones debajo de cada tarjeta */
.actions { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }

/* Botón base */
.btn {
  padding: 12px 16px; border: 0; border-radius: 14px; cursor: pointer;
  font-weight: 800; position: relative; overflow: hidden; outline: 0
}

.btn-primary {
  background: linear-gradient(90deg, var(--blue-200), var(--blue-100));
  color: var(--black);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

/* Hover: leve elevación y glow */
.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
  filter: saturate(1.02);
}

/* Active: “click” */
.btn-primary:active {
  transform: translateY(0) scale(.98);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
}

/* Focus accesible */
.btn-primary:focus-visible {
  box-shadow: 0 0 0 3px var(--black), 0 0 0 6px rgba(255, 255, 255, .35);
}

/* Shine effect */
.btn-pay::after {
  content: "";
  position: absolute; top: -100%; left: -30%;
  width: 60%; height: 300%; transform: rotate(25deg);
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
  opacity: .0; pointer-events: none; transition: opacity .25s ease, left .6s ease;
}

.btn-pay:hover::after { opacity: .5; left: 110%; }

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, .18) }
  50% { box-shadow: 0 10px 28px rgba(0, 0, 0, .28) }
}

.btn-pay { animation: pulseGlow 2.4s ease-in-out infinite }

/* === Barra de cupones (placeholder) === */
.coupon-bar {
  display: grid; gap: 10px; margin: 12px 0 6px; grid-template-columns: 1fr auto;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px; padding: 12px;
}

.coupon-bar input {
  background: var(--card);
  color: var(--snow);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px; padding: 10px 12px;
}

.coupon-bar button {
  border-radius: 10px; padding: 10px 12px; font-weight: 800;
  border: 1px dashed rgba(255, 255, 255, .25);
  background: transparent; color: var(--muted);
  cursor: not-allowed;
}

/* === Línea de producto estilo "tile" === */
.product-card {
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px; padding: 14px;
}

.product-head { font-weight: 800 }
.product-sub { opacity: .8; font-size: .95rem }

.benefits { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px }

.benefits li { display: flex; align-items: center; gap: 8px }

.benefits .dot {
  width: 16px; height: 16px; border-radius: 999px;
  background: #EAEAEA; color: #111;   /* neutro */
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 12px;
}

.price-block { min-width: 130px; display: grid; justify-items: end; align-content: center; gap: 10px }
.unit { opacity: .85; font-size: .95rem }
.total-strong { font-weight: 900; font-size: 1.1rem }

.qty.round button {
  width: 32px; height: 32px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: transparent; color: var(--snow);
  cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

.qty.round { display: flex; align-items: center; gap: 8px }

.summary {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px; padding: 12px 14px; margin-top: 12px;
}

/* ===== Footer ampliado (neutro) ===== */
.pie-pagina {
  background: var(--blue-400);  /* gris oscuro */
  color: var(--snow);
  padding-top: 40px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.contenedor-footer {
  max-width: 1200px; margin: auto;
  display: grid; grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 20px; padding: 0 20px 40px 20px;
}

.marca { display: flex; align-items: center; gap: 15px; }
.marca .logo { width: auto; height: auto; border-radius: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
.marca .logo img{ display:block; max-height:72px; width:auto; object-fit:contain; }
.marca .texto h3 { margin: 0; font-size: 26px; font-weight: 800; }
.marca .texto h3 span{opacity:.95}
.marca .texto small { color: var(--muted); font-weight: 600; letter-spacing: .3px; }

.columna h4 {
  margin-bottom: 15px; font-size: 18px;
  border-bottom: 2px solid rgba(255,255,255,.12);
  padding-bottom: 5px;
}
.columna ul { list-style: none; padding: 0; margin: 0; }
.columna ul li { margin-bottom: 8px; }
.columna ul li a {
  text-decoration: none; color: var(--snow); opacity: 0.9; transition: all 0.3s;
}
.columna ul li a:hover { opacity: 1; text-decoration: underline; }

.redes { display:flex; gap:10px; margin-top:8px; }
.redes a {
  width:40px; height:40px; display:grid; place-items:center;
  color: var(--snow);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px; transition: .3s;
}
.redes a:hover { background: rgba(255,255,255,.06); }

.copy {
  border-top: 1px solid rgba(255,255,255,.12);
  text-align: center; padding: 15px; font-size: 14px; color: var(--muted);
}

/* Responsive */
@media (max-width: 900px) { .contenedor-footer { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .contenedor-footer { grid-template-columns: 1fr; text-align: center; }
  .marca { justify-content: center; }
  .redes { justify-content:center; }
}

/* ---------- base header tweaks ---------- */
.nav-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg); }
.brand img{ object-fit:contain; border-radius:10px; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-text strong{ font-size:18px; letter-spacing:.2px; }
.brand-text small{ color: var(--muted); font-weight:600; letter-spacing:.3px; }

/* acciones derecha como chips */
.actions{ display:flex; gap:10px; align-items:center; }
.actions a{ text-decoration:none; padding:8px 12px; border-radius:999px; border:1px solid transparent; color:var(--fg); }
.actions a:hover{ border-color:rgba(255,255,255,.18); }

/* ---------- hamburguesa ---------- */
.hamburger{
  display:none; width:42px; height:42px; border-radius:12px;
  border:1px solid rgba(255,255,255,.18); background:transparent; cursor:pointer;
  align-items:center; justify-content:center; position:relative;
}
.hamburger span, .hamburger::before, .hamburger::after{
  content:""; position:absolute; width:20px; height:2px; background:var(--fg); border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.hamburger span{ transform:translateY(0); }
.hamburger::before{ transform:translateY(-6px); }
.hamburger::after{ transform:translateY(6px); }
.hamburger.is-open span{ opacity:0; }
.hamburger.is-open::before{ transform:rotate(45deg); }
.hamburger.is-open::after{ transform:rotate(-45deg); }

/* ---------- overlay ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  backdrop-filter: blur(2px); opacity:0; visibility:hidden; transition:.25s ease; z-index:70;
}
.overlay.open{ opacity:1; visibility:visible; }

/* ---------- drawer móvil ---------- */
.mobile-drawer{
  position:fixed; inset:0 0 0 auto; width:min(380px,92vw); height:100vh;
  background:rgba(18,18,18,.95);  /* negro neutro */
  color:var(--fg);
  border-left:1px solid rgba(255,255,255,.08);
  transform:translateX(102%); transition:transform .28s cubic-bezier(.2,.8,.2,1);
  z-index:80; display:flex; flex-direction:column;
  backdrop-filter: blur(10px) saturate(1.1);
}
.mobile-drawer.open{ transform:translateX(0); }

/* cabecera del drawer */
.drawer-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.drawer-head .brand-text strong{ font-size:16px; }
.drawer-head .brand-text small{ font-size:12px; }
.close{
  width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:transparent; color:var(--fg); cursor:pointer;
}

/* enlaces dentro del drawer con animación escalonada */
.drawer-nav, .drawer-actions{ display:grid; gap:8px; padding:14px 16px; }
.drawer-nav a, .drawer-actions a{
  --delay: calc(var(--i,1) * 60ms);
  opacity:0; transform:translateX(12px);
  animation: slideFade .42s ease forwards; animation-delay: var(--delay);
  text-decoration:none; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.02); color:var(--fg);
}
.drawer-nav a.cta{ background:linear-gradient(90deg, var(--accent), var(--blue-100)); color:var(--black); border:0; }
@keyframes slideFade{ from{opacity:0; transform:translateX(12px)} to{opacity:1; transform:translateX(0)} }

/* ---------- responsivo ---------- */
@media (max-width: 900px){
  #menu-desktop, .actions{ display:none; }
  .hamburger{ display:inline-flex; }
}

/* Primer y último bloque un poco más holgados */
section:first-of-type { 
  padding-top: calc(var(--section-gap) + 12px);
}
section:last-of-type { 
  padding-bottom: calc(var(--section-gap) + 12px);
}