:root{
  /* Paleta clara + acento naranja */
  --bg:#ffffff;
  --card:#ffffff;
  --line:#eceff3;
  --txt:#0f1720;
  --muted:#6b7280;

  --primary:#FF7A00;            /* naranja */
  --primary-strong:#E96E00;
  --ink:#111111;                 /* acento negro */
  --chip:#f6f7f9;

  --radius:18px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

:root.dark{
  /* Tema oscuro opcional */
  --bg:#000000;
  --card:#0f1a2e;
  --line:#1c2c4c;
  --txt:#e9f0ff;
  --muted:#a3b5d6;
  --primary:#FF7A00;
  --primary-strong:#E96E00;
  --chip:#0f1a2e;
  --ink:#ffffff;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
}
.container{width:min(1120px, 92%); margin-inline:auto}
.muted{color:var(--muted)}

/* ===== Botones ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.8rem 1.1rem; border-radius:12px;
  border:1px solid transparent; cursor:pointer; font-weight:600;
  box-shadow:none; transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--primary); color:#fff}
.btn.primary:hover{background:var(--primary-strong)}
.btn.outline{background:transparent; border-color:var(--line); color:var(--ink)}
.btn.outline:hover{border-color:var(--primary); color:#fff; background:color-mix(in srgb, var(--primary) 14%, transparent)}
.btn.ghost{background:transparent; border-color:var(--line); color:var(--muted)}
.btn.ghost:hover{color:var(--ink)}

/* ===== Header ===== */
.header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);
  background:color-mix(in srgb, var(--bg) 70%, transparent);
  border-bottom:1px solid var(--line);
}

.nav{ display:flex; align-items:center; justify-content:space-between; padding:.8rem 0; }
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink)}
.logo{width:34px; height:34px}
.brand-name{font-weight:700; letter-spacing:.4px}

.nav-links{display:flex; gap:1rem}
.nav-links a{
  color:var(--muted); text-decoration:none; padding:.6rem .7rem; border-radius:8px; position:relative;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a::after{
  content:""; position:absolute; left:.7rem; right:.7rem; bottom:.2rem; height:2px;
  background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.nav-links a:hover::after{transform:scaleX(1)}

.nav-actions{display:flex; align-items:center; gap:.6rem}

/* ===== Buscador con botón ===== */
.search-wrap{display:flex; align-items:center; gap:.4rem}
.search{
  background:var(--chip); border:1px solid var(--line); color:var(--ink);
  padding:.6rem .8rem; border-radius:10px; min-width:220px;
}
.search-btn{
  background:var(--chip); color:var(--ink); border:1px solid var(--line);
  padding:.55rem .7rem; border-radius:10px;
}
.search-btn:hover{border-color:var(--primary); color:#fff; background:color-mix(in srgb, var(--primary) 14%, transparent)}

.hamburger{display:none}

/* =========================================================
   MOBILE MENU — SOLO AQUÍ APLICAMOS EFECTO “VIDRIO” TRANSLÚCIDO
   ========================================================= */
.mobile-menu{
  position:sticky; top:58px; z-index:40;

  /* Vidrio translúcido neutro (blanco) */
  background: rgba(255,255,255,0.58);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);

  border: 1px solid rgba(255,255,255,0.42);
  display:flex; flex-direction:column; gap:8px;
  padding:.8rem; box-shadow:0 8px 22px rgba(0,0,0,.08);
  border-radius:14px;
}

/* Enlaces dentro del panel: transiciones suaves y hover translúcido */
.mobile-menu a{
  color:var(--ink); text-decoration:none; padding:.6rem .7rem; border-radius:10px;
  transition:background .25s ease, color .25s ease;
}
.mobile-menu a:hover{
  /* Tinte leve naranja con transparencia para conservar el “glass” */
  background: color-mix(in srgb, var(--primary) 99%, transparent);
  color: var(--ink);
  backdrop-filter: blur(6px);
}

/* Fallback si el navegador no soporta backdrop-filter: usa un color sólido muy claro */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .mobile-menu{
    background: #ffffffE6; /* casi blanco sólido */
    border:1px solid var(--line);
  }
  .mobile-menu a:hover{ background: var(--chip); }
}

/* ===== HERO ===== */
.hero{
  position:relative;
  min-height:clamp(520px, 72vh, 760px);
  background-position:right center; background-size:cover; background-repeat:no-repeat;
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.86) 28%,
    rgba(255,255,255,.38) 52%,
    rgba(255,255,255,0) 74%);
  pointer-events:none;
}
.hero-overlay{ position:relative; height:100%; }

/* Bloque copy */
.hero-copy{
  max-width:min(620px, 92%); padding:2rem 2rem; margin-top:3rem;
  margin-left:clamp(-160px, -10vw, -24px);
  backdrop-filter:saturate(140%) blur(2px);
  background:rgba(255,255,255,.65);
  border:1px solid rgba(0,0,0,.04);
  border-radius:16px; box-shadow:var(--shadow); z-index:1;
}
.hero-copy h1{ font:700 clamp(2rem, 4vw, 3.1rem)/1.1 "Sora", sans-serif; margin:0 0 .8rem; color:var(--ink) }
.accent{ color:#fff; background:var(--primary); padding:0 .4rem; border-radius:10px }
.hero-copy p{ color:var(--muted); margin:0 0 1rem }
.hero-cta{ display:flex; gap:.6rem; flex-wrap:wrap }
.badges{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem }
.badges span{ border:1px dashed var(--line); padding:.4rem .6rem; border-radius:999px; color:var(--muted); font-size:.92rem }

/* ===== Filtros ===== */
.filters{padding:1.2rem 0}
.filters-row{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.chips{display:flex; gap:.5rem; flex-wrap:wrap}
.chips button{
  background:var(--chip); border:1px solid var(--line); color:var(--ink);
  padding:.5rem .8rem; border-radius:999px; cursor:pointer;
}
.chips button.active{border-color:var(--primary); color:#fff; background:var(--primary)}
.sort select{background:var(--chip); border:1px solid var(--line); color:var(--ink); padding:.55rem .7rem; border-radius:10px}

/* ===== Grid ===== */
.catalogo{padding:1rem 0 3rem}
.grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
  transform:translateY(8px); opacity:0; transition:transform .45s ease, opacity .45s ease, box-shadow .2s ease;
}
.card.revealed{transform:translateY(0); opacity:1}
.card:hover{box-shadow:0 12px 34px rgba(0,0,0,.12)}
.card img{width:100%; aspect-ratio:1/1; object-fit:cover; background:#f1f2f4}
.card .body{padding:.9rem}
.card h3{margin:0 0 .2rem; font-size:1.07rem; color:var(--ink)}
.card p{margin:0; color:var(--muted); font-size:.95rem}
.card .row{display:flex; justify-content:space-between; align-items:center; margin-top:.7rem}
.price{font-weight:700; color:var(--ink)}
.sku{color:var(--muted); font-size:.9rem}
.card .tags{display:flex; gap:.3rem; flex-wrap:wrap; margin-top:.7rem}
.tag{font-size:.78rem; padding:.25rem .5rem; border:1px solid var(--line); color:var(--muted); border-radius:999px; background:var(--chip)}
.card .actions{display:flex; gap:.5rem; margin-top:.8rem}
.card .actions .btn{flex:1}

/* ===== Empty ===== */
.empty{display:grid; place-items:center; background:transparent; border:1px dashed var(--line); border-radius:var(--radius); padding:2rem; margin-top:1rem}

/* ===== Modal ===== */
.modal{
  width:min(960px, 92%); border:none; border-radius:var(--radius); padding:0; background:var(--card); color:var(--txt);
  box-shadow:var(--shadow);
}
.modal::backdrop{background:rgba(0,0,0,.35)}
.modal-body{display:grid; grid-template-columns:1fr 1fr; gap:1rem; padding:1rem}
.modal-img{width:100%; border-radius:12px; aspect-ratio:1/1; object-fit:cover; background:#f1f2f4}
.modal-info h3{margin:.4rem 0; color:var(--ink)}
.price-row{display:flex; gap:1rem; align-items:center}
.badge-row{display:flex; gap:.4rem; flex-wrap:wrap; margin:.6rem 0}
.badge-row .tag{border-style:solid}
.variant-row,.qty-row{display:flex; align-items:center; gap:.6rem; margin:.6rem 0}
.modal-close{
  position:absolute; right:.6rem; top:.6rem; background:transparent; border:1px solid var(--line); color:var(--muted);
  border-radius:10px; padding:.3rem .5rem; cursor:pointer;
}
.actions{display:flex; gap:.6rem; margin-top:.6rem}

/* ===== About + Footer ===== */
.about{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fafafa}
.about-inner{display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; padding:2.2rem 0}
.features{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2, 1fr); gap:.6rem}
.features li{background:var(--card); border:1px solid var(--line); padding:.7rem .9rem; border-radius:12px}

.footer{padding:2.2rem 0}
.footer-grid{display:grid; grid-template-columns:1.1fr .9fr 1.2fr; gap:1.2rem}
.list{list-style:none; padding:0; margin:0}
.list a{color:var(--muted); text-decoration:none}
.newsletter{display:flex; gap:.5rem}
.newsletter input{
  flex:1; background:var(--chip); border:1px solid var(--line); color:var(--ink);
  padding:.6rem .8rem; border-radius:10px;
}
.footer-bottom{border-top:1px solid var(--line); margin-top:1.4rem; padding-top:1rem; color:var(--muted); font-size:.95rem}

/* ===== WhatsApp FAB ===== */
.whatsapp-fab{
  position:fixed; right:18px; bottom:18px; z-index:60; width:56px; height:56px; display:grid; place-items:center;
  background:var(--primary); color:#fff; border-radius:50%; text-decoration:none; font-size:28px; box-shadow:var(--shadow);
}
.whatsapp-fab:hover{filter:brightness(.95)}

/* ===== Responsive ===== */
@media (max-width:980px){
  .grid{grid-template-columns:repeat(2, 1fr)}
  .about-inner{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr; gap:1rem}
  .search{min-width:0; width:160px}
  .hero{min-height:58vh; background-position:center}
  .hero-copy{margin-top:1.6rem; margin-left:0; padding:1.2rem 1.2rem}
}
@media (max-width:720px){
  .nav-links{display:none}
  .hamburger{display:inline-flex; background:transparent; border:1px solid var(--line); color:var(--muted); padding:.5rem .6rem; border-radius:10px}
  .grid{grid-template-columns:1fr}
}

/* ===== Hero controls (por si los usas) ===== */
.hero{ position:relative; min-height:clamp(520px,72vh,760px); overflow:hidden; }
.hero-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 40%;
  transition:opacity .6s ease; opacity:1; z-index:0;
}
.hero-img.is-fading{ opacity:0; }
.hero-overlay{ position:relative; height:100%; z-index:1; }
.hero-controls{
  position:absolute; left:50%; bottom:1rem; transform:translateX(-50%);
  display:flex; align-items:center; gap:.6rem; padding:.35rem .55rem;
  background:rgba(255,255,255,.65); border:1px solid var(--line); border-radius:999px;
  backdrop-filter:saturate(140%) blur(4px); box-shadow:var(--shadow);
}
.hero-controls .nav{
  appearance:none; display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; padding:0 .2rem; border:1px solid var(--line);
  border-radius:10px; background:var(--chip); color:var(--ink); font-weight:700; line-height:1; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.hero-controls .nav:hover{ border-color:var(--primary); background:color-mix(in srgb, var(--primary) 18%, transparent); color:#fff }
.hero-controls .nav:active{ transform:translateY(1px) }
.hero-controls .dots{ display:flex; gap:.4rem; padding:0 .2rem }
.hero-controls .dots button{
  appearance:none; width:9px; height:9px; border-radius:50%;
  border:1px solid var(--line); background:var(--chip); opacity:.7; cursor:pointer;
  transition:transform .2s ease, opacity .2s ease, background .2s ease, border-color .2s ease;
}
.hero-controls .dots button:hover{ opacity:1; border-color:var(--primary) }
.hero-controls .dots button.active{ background:var(--primary); border-color:var(--primary); opacity:1; transform:scale(1.15) }

/* ===== Chips / Orden (si los usas) ===== */
.filters{ padding:1.1rem 0 }
.filters-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.chips{ display:flex; gap:.5rem; flex-wrap:wrap }
.chips button{
  appearance:none; border:1px solid var(--line); background:var(--chip);
  color:var(--muted); padding:.45rem .75rem; border-radius:999px; cursor:pointer;
  font-weight:700; transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.chips button:hover{ border-color:var(--primary); color:var(--ink) }
.chips button.active{ background:var(--primary); border-color:var(--primary); color:#fff; transform:translateY(-1px) }

.sort{ display:flex; align-items:center; gap:.5rem }
.sort label{ color:var(--muted) }
.sort select{
  appearance:none; padding:.5rem .9rem; border-radius:12px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease; box-shadow:0 0 0 0 rgba(244,143,177,0);
}
.sort select:hover{ border-color:var(--primary) }
.sort select:focus{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent) }

/* ===== Badges del hero ===== */
.badges span{
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--primary) 10%, var(--chip));
  color:var(--ink);
}
/* Oculta por completo los controles del hero */
.hero-controls{ display:none !important; }