/* ============================================
   COMERINTELIGENTE - DISEÑO DEFINITIVO v4.2
   (Header fijo + Menú móvil fullscreen + Componentes)
   ============================================ */

:root{
  --primary:#0b6b3a;
  --primary-dark:#064023;
  --primary-light:#e8f5e9;
  --accent:#e8f5e9;
  --highlight:#ff6b35;
  --highlight-dark:#e55a2b;
  --text-main:#1a1a1a;
  --text-muted:#555555;
  --bg-body:#fdfdfd;
  --bg-card:#ffffff;

  --max-width:1200px;
  --header-height:70px;
  --border-radius:12px;

  --shadow-sm:0 2px 8px rgba(0,0,0,0.05);
  --shadow-md:0 8px 24px rgba(0,0,0,0.08);
  --transition:all 0.3s ease;

  --macro-prot:#ff6b35;
  --macro-fat:#fbc02d;
  --macro-carb:#1976d2;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg-body);
  color:var(--text-main);
  line-height:1.6;
  padding-top:var(--header-height);
}
a{color:inherit;text-decoration:none;transition:var(--transition)}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}

/* =========================================
   HEADER FIJO
   ========================================= */
header{
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(10px);
  position:fixed;
  top:0;left:0;right:0;
  height:var(--header-height);
  z-index:2000;
  border-bottom:1px solid rgba(0,0,0,.05);
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.nav-wrap{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 20px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.nav-brand{
  font-size:1.3rem;
  font-weight:800;
  color:var(--primary);
  letter-spacing:-.5px;
  display:flex;
  align-items:center;
  z-index:2001;
}
.nav-brand span{color:var(--text-main)}

/* Desktop menu container */
.nav-menu-desktop{
  display:flex;
  align-items:center;
  gap:30px;
}

.nav-links{
  display:flex;
  gap:25px;
  align-items:center;
}

.nav-links a{
  color:var(--text-muted);
  font-weight:600;
  font-size:.95rem;
  line-height:1.2;
}
.nav-links a:hover,
.nav-links a.active{color:var(--primary)}

/* Botón Premium */
.btn-nav{
  background:var(--highlight);
  color:#fff !important;
  padding:10px 24px;
  border-radius:999px;
  font-weight:800;
  font-size:.95rem;
  box-shadow:var(--shadow-sm);
  display:inline-block;
}
.btn-nav:hover{background:var(--highlight-dark);transform:translateY(-2px)}

/* Hamburguesa */
.hamburger{
  display:none;
  cursor:pointer;
  z-index:3001;
}
.hamburger span{
  display:block;
  width:26px;
  height:3px;
  background:var(--text-main);
  margin:5px 0;
  transition:var(--transition);
}

/* Overlay (compatibilidad; en móvil no lo usamos) */
.nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  opacity:0;
  visibility:hidden;
  transition:var(--transition);
  z-index:2500;
}
.nav-overlay.active{opacity:1;visibility:visible}

/* =========================================
   LAYOUT / TIPOGRAFÍA
   ========================================= */
.main{max-width:var(--max-width);margin:0 auto;padding:40px 20px}
.section-header{text-align:center;margin-bottom:50px}
.section-header .icon-header{font-size:3rem;display:block;margin-bottom:10px}
.section-header h1{font-size:2.2rem;margin-bottom:15px;letter-spacing:-.5px}
.section-header p{color:var(--text-muted);max-width:780px;margin:0 auto;font-size:1.1rem}

.logo-central{
  display:block;
  max-width:320px;
  width:90%;
  margin:40px auto 50px;
}

/* Grid cards */
.category-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:25px;
  margin:40px 0;
}

/* Cards */
.article-card{
  background:var(--bg-card);
  border-radius:var(--border-radius);
  padding:30px;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
  border-top:5px solid var(--primary);
}
.article-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.article-card h2{font-size:1.6rem;font-weight:800;margin-bottom:15px;letter-spacing:-.4px}
.article-card h3{font-size:1.35rem;font-weight:800;margin-bottom:10px;letter-spacing:-.3px}
.article-card p{color:var(--text-muted);margin-bottom:16px}
.card-footer{color:var(--primary);font-weight:800}

/* Links visibles en cuerpo */
.article-card a{color:var(--primary);font-weight:800}
.article-card a:hover{text-decoration:underline}

/* Botones */
.btn-primary{
  background:var(--highlight);
  color:#fff;
  padding:12px 28px;
  border-radius:999px;
  font-weight:800;
  display:inline-block;
  box-shadow:var(--shadow-sm);
}
.btn-primary:hover{background:var(--highlight-dark);transform:translateY(-2px)}
.btn-mega{
  background:var(--highlight);
  color:#fff;
  padding:16px 44px;
  border-radius:999px;
  font-weight:900;
  font-size:1.1rem;
  display:inline-block;
  margin-top:18px;
  box-shadow:0 10px 22px rgba(0,0,0,.12);
}
.btn-mega:hover{background:var(--highlight-dark);transform:translateY(-2px)}

/* CTA */
.calc-cta-section{
  background:linear-gradient(135deg,var(--text-main) 0%,#000 100%);
  color:#fff;
  padding:50px 20px;
  border-radius:16px;
  text-align:center;
  margin-top:60px;
  position:relative;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.calc-cta-title{font-size:2rem;font-weight:900;margin-bottom:12px;letter-spacing:-.5px}
.calc-cta-desc{font-size:1.1rem;color:#ccc;max-width:620px;margin:0 auto 18px}

/* Tablas genéricas */
.table-container{overflow-x:auto;margin:24px 0}
.table, .comparison-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
}
.table th, .comparison-table th{
  background:var(--primary);
  color:#fff;
  padding:14px 16px;
  text-align:left;
  font-weight:900;
}
.table td, .comparison-table td{
  padding:14px 16px;
  border-bottom:1px solid #eee;
}

/* Tabs */
.tabs-container{margin:26px 0}
.tabs-header{display:flex;gap:10px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}
.tabs-header::-webkit-scrollbar{display:none}
.tab-btn{
  background:#f4f4f4;
  border:none;
  padding:12px 18px;
  border-radius:999px;
  font-weight:900;
  color:#666;
  cursor:pointer;
  white-space:nowrap;
}
.tab-btn.active{background:#fff;color:var(--primary);border:2px solid var(--primary)}
.tab-content{display:none;animation:fadeIn .45s}
.tab-content.active{display:block}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ================================
   SUPLEMENTOS / ARTÍCULOS
   ================================ */
.section-divider{margin:26px 0}
.divider-title{font-weight:900;color:var(--text-main)}
.divider-line{height:2px;background:#eee;margin-top:10px;border-radius:2px}

.badges-container{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.scope-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:.85rem;
  background:#f4f4f4;
  color:var(--text-main);
}
.badge-performance{background:#e8f5e9;color:var(--primary)}
.badge-health{background:#e3f2fd;color:#1565c0}
.badge-universal{background:#fff3e0;color:#e65100}

.protocol-box{
  background:#fff3e0;
  border-left:5px solid var(--highlight);
  padding:18px;
  border-radius:10px;
  margin:18px 0;
}
.protocol-item{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.protocol-item:last-child{border-bottom:none}
.protocol-label{font-weight:900;color:var(--text-main)}
.protocol-val{color:var(--text-muted);font-weight:700}

.notice{
  background:#f7f7f7;
  border:1px solid #eee;
  border-radius:12px;
  padding:16px;
  margin:18px 0;
}

.product-spotlight{
  background:#111;
  color:#fff;
  border-radius:16px;
  padding:26px;
  margin:22px 0 30px;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}
.spotlight-title{
  font-weight:900;
  font-size:1.15rem;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.spotlight-desc{color:#d7d7d7;margin-bottom:18px}
.spotlight-actions{display:flex;flex-wrap:wrap;gap:12px}

.btn-buy{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 18px;
  border-radius:999px;
  font-weight:900;
  box-shadow:0 10px 22px rgba(0,0,0,.15);
  border:1px solid rgba(255,255,255,.08);
}
.btn-lifepro{background:var(--highlight);color:#fff}
.btn-lifepro:hover{background:var(--highlight-dark);transform:translateY(-2px)}
.btn-amazon{background:#fff;color:#111}
.btn-amazon:hover{transform:translateY(-2px)}

.teaser-black{
  background:#111;
  color:#fff;
  border-radius:16px;
  padding:26px;
  margin:26px 0;
}
.teaser-black p{color:#d0d0d0}

/* Footer */
footer{
  text-align:center;
  padding:40px 20px;
  border-top:1px solid #eee;
  color:#888;
  font-size:.9rem;
  margin-top:50px;
}
.legal-disclaimer{color:#9a9a9a;margin-bottom:10px}

/* =========================================
   RESPONSIVE (MÓVIL)
   ========================================= */
@media (max-width: 950px){
  .hamburger{display:block}

  .nav-menu-desktop{
    position:fixed;
    inset:0;
    width:100%;
    height:100vh;
    background:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:40px;
    padding:40px 20px;
    transform:translateY(-100%);
    transition:transform .35s ease;
    z-index:3000;
  }
  .nav-menu-desktop.active{transform:translateY(0)}

  .nav-links{
    flex-direction:column;
    align-items:center;
    gap:26px;
    text-align:center;
  }
  .nav-links a{
    font-size:1.9rem;
    font-weight:900;
    color:var(--text-main);
  }

  .btn-nav{
    font-size:1.25rem;
    padding:16px 56px;
  }

  .nav-overlay{display:none !important}
  body.menu-open{overflow:hidden}

  .hamburger span{width:32px;height:4px;margin:7px 0}
  .hamburger.active span:nth-child(1){transform:translateY(11px) rotate(45deg)}
  .hamburger.active span:nth-child(2){opacity:0}
  .hamburger.active span:nth-child(3){transform:translateY(-11px) rotate(-45deg)}

  .category-grid{grid-template-columns:1fr}
  .spotlight-actions{flex-direction:column}
  .section-header h1{font-size:2rem}
}