/* ============ Reset & Base ============ */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:#1E293B; background:#F8FAFC; line-height:1.5;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ line-height:1.2; }

/* ============ Layout Helpers ============ */
.container{ width:min(1240px,92%); margin:0 auto; }
.hidden{ display:none !important; }

/* ===== Navbar ===== */
.navbar{
  position:sticky; top:0; z-index:50;
  background:#ffffffcc; backdrop-filter:blur(8px);
  border-bottom:1px solid #E5E7EB;
}
.navbar-inner{
  display:flex; align-items:center; justify-content:flex-start;
  gap:28px; padding:10px 4%; flex-wrap:nowrap;
}
.logo{ flex:0 0 auto; }
.logo img{ height:90px; max-height:100px; width:auto; display:block; }
.nav-links{
  display:flex !important; align-items:center; gap:28px; font-weight:600;
  white-space:nowrap; flex:1 1 auto; min-width:0;
}
.nav-links a{ padding:10px 12px; border-radius:8px; color:#0F172A; transition:background .2s ease; }
.nav-links a:hover{ background:#F1F5F9; }
.menu-toggle{ display:none; }

/* Mobile menu */
.mobile-menu{ display:none; flex-direction:column; gap:8px; padding:8px 0 14px; }
.mobile-menu a{
  padding:12px; background:#fff; border:1px solid #E5E7EB; border-radius:12px; font-weight:600;
}
.mobile-menu a:active{ transform:scale(0.99); }

/* ============ Hero ============ */
:root{ --brand-green:#2FBF71; --brand-amber:#FF8A00; --ink:#0F172A; }
.hero{
  padding:clamp(40px,6vw,90px) 0;
  background:
    radial-gradient(60% 80% at 80% -10%, color-mix(in srgb, var(--brand-green) 18%, #fff) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(60% 80% at 10% -20%, color-mix(in srgb, var(--brand-amber) 14%, #fff) 0%, rgba(255,255,255,0) 60%),
    #F8FAFC;
  border-bottom:1px solid #E5E7EB;
}
.hero-inner{ display:grid; align-items:center; justify-items:center; gap:28px; text-align:center; }
.hero h1{ font-size:clamp(32px,5vw,54px); font-weight:900; color:var(--ink); letter-spacing:-.02em; }
.hero p{ color:#334155; max-width:720px; }
.hero-cta{ margin-top:14px; }
.btn{ display:inline-block; padding:12px 18px; border-radius:12px; font-weight:800; border:1px solid #E2E8F0; background:#fff; }
.btn.primary{ background:linear-gradient(90deg,var(--brand-green),var(--brand-amber)); color:#fff; border:none; box-shadow:0 12px 24px -12px rgba(15,23,42,.25); }
.btn.primary:hover{ filter:brightness(1.05); }

/* Hero media */
.hero-media{ position:relative; width:min(560px,90%); aspect-ratio:4/3; }
.hero-product{
  position:absolute; inset:0; margin:auto; max-width:100%; max-height:100%;
  filter:drop-shadow(0 18px 28px rgba(2,8,23,.20)); transform:translateZ(0);
}
.orbit{ position:absolute; inset:auto 10% 4% 10%; height:18px; border-radius:999px;
  background:radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,.18), rgba(0,0,0,0)); filter:blur(6px); pointer-events:none; }

@media (min-width:1024px){
  .hero-inner{ grid-template-columns:1.1fr 0.9fr; text-align:left; justify-items:start; }
}

/* ============ Categorías (mosaico) ============ */
.categorias{ padding:36px 0 48px; }
.categorias h2.section-title{
  font-size:clamp(22px,2.6vw,28px); font-weight:900; text-align:center; color:var(--ink); margin-bottom:26px;
}
.section-title .title-accent{ color:var(--brand-green); position:relative; padding:0 .15rem; }

@media (min-width:1024px){ .section-title .title-accent::after{ height:.55em; bottom:-.25em; } }

/* Grid: ancho propio + columnas y gap adaptables */
.grid-categorias{
  width:min(1240px,92%); margin:0 auto;
  display:grid; gap:14px; grid-template-columns:1fr;
}
@media (min-width:640px){
  .grid-categorias{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  .grid-categorias{
    grid-template-columns:repeat(5, minmax(200px,1fr));
    gap:clamp(22px,2.4vw,34px);
    padding-inline:clamp(6px,1vw,16px);
  }
}

/* ===== Cards (con fondo DIRECTO en la card; sin ::before) ===== */
.cat-card{
  position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column;
  min-height:160px; aspect-ratio:16/9; border-radius:18px; overflow:hidden;
  color:#fff; font-weight:700; text-align:center; cursor:pointer;
  transition:transform .3s ease, box-shadow .3s ease;
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 10px 22px -12px rgba(2,8,23,.28);

  /* Fondo SIEMPRE visible (móvil/desktop) */
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}

/* Quita cualquier rastro previo de ::before */
.cat-card::before{ content:none !important; }

/* Asignación de fondos por categoría (rutas relativas a este CSS) */
.cat-inmunologica{ background-image:url("../assets/inmunologia.jpg") !important; }
.cat-peso        { background-image:url("../assets/controlpeso.jpg") !important; }
.cat-antiedad    { background-image:url("../assets/antiedad.jpg")    !important; }
.cat-vigor       { background-image:url("../assets/vigormental.jpg") !important; }
.cat-sport       { background-image:url("../assets/deportes.jpg")    !important; }

.cat-card .overlay{ position:absolute; inset:0; z-index:1; background:rgba(0,0,0,.28); transition:background .3s ease; }
.cat-card h3, .cat-card .arrow{ position:relative; z-index:2; }
.cat-card h3{ margin-bottom:12px; font-size:18px; }
.cat-card .arrow{
  font-size:22px; background:#ffffffcc; color:#0F172A; border-radius:50%; width:42px; height:42px;
  display:flex; align-items:center; justify-content:center; transition:transform .3s ease, background .3s ease;
}

.cat-card:hover{ transform:translateY(-4px) scale(1.02); box-shadow:0 12px 26px -12px rgba(2,8,23,.34); }
.cat-card:hover .overlay{ background:rgba(0,0,0,.16); }

/* móvil: un pelo más alta y overlay más contrastado */
@media (max-width:640px){
  .cat-card{ min-height:200px; }
  .cat-card .overlay{ background:rgba(0,0,0,.35); }
}

/* ============ Botón flotante WhatsApp ============ */
.whatsapp-float{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  font-size:22px; font-weight:700; background:#25D366; color:#fff;
  box-shadow:0 12px 28px -10px rgba(37,211,102,.6);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.whatsapp-float:hover{ transform:translateY(-1px); box-shadow:0 14px 30px -10px rgba(37,211,102,.7); }
.whatsapp-float:active{ transform:translateY(0); }

/* ============ Desktop general ============ */
@media (min-width:1024px){
  .navbar-inner{ padding:12px 0; }
  .menu-toggle{ display:none; }
  .nav-links{ display:flex; }
  .mobile-menu{ display:none !important; }
  .hero{ padding:72px 0 84px; }
  .hero .container{ justify-items:center; }
  .hero p{ font-size:18px; }
}

/* ============ Accesibilidad ============ */
:focus-visible{ outline:3px solid #93C5FD; outline-offset:2px; border-radius:8px; }

/* ============ Utility ============ */
.section{ padding:40px 0; }
.mt-2{ margin-top:8px; } .mt-4{ margin-top:16px; } .mt-6{ margin-top:24px; }
.mb-2{ margin-bottom:8px; } .mb-4{ margin-bottom:16px; } .mb-6{ margin-bottom:24px; }

/* ===== Mobile (<=1023px) ===== */
@media (max-width:1023px){
  .logo img{ height:56px; max-height:64px; }
  .nav-links{ display:none !important; }
  .menu-toggle{
    display:inline-flex; width:42px; height:42px; align-items:center; justify-content:center;
    border:1px solid #E2E8F0; border-radius:12px; background:#fff; cursor:pointer; margin-left:auto;
  }
  .mobile-menu{ display:none; }
  .mobile-menu.hidden{ display:none; }
  .mobile-menu:not(.hidden){ display:flex; flex-direction:column; gap:8px; padding:8px 0 14px; }
}

/* ===== Footer oscuro ===== */
.site-footer{ background:#111827; color:#E5E7EB; padding:22px 0; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.by-gpos{ display:inline-flex; align-items:center; gap:10px; color:#fff; opacity:.9; text-decoration:none; }
.by-gpos:hover{ opacity:1; }
.by-gpos img{ height:28px; width:auto; display:block; }
@media (max-width:640px){ .footer-inner{ flex-direction:column; text-align:center; gap:8px; } }

/* Fallback si alguna página no usa la clase */
footer:not(.site-footer){ background:#111827; color:#E5E7EB; }