/* ===== Tokens base (Light) ===== */
  :root{
    --bg:rgba(247, 248, 249,0.8); --text:#121416; --muted:#6a7681; --surface:#ffffff; --titulo:rgba(46, 52, 57,1);
    --border:rgba(241,242,244,0.5); --glass:rgba(255,255,255,0.8);
    --icon-muted:#9095A4; --img-bg:#F5F5F5; --btn-overlay:rgba(85,92,96,0.75);
    --bg-image:url(https://mercadogratis.com/iv2/bg-light.png);
    --op-bg:rgba(19,21,23,0.04); --op-tx:#121416; --op-bg-o:rgba(19,21,23,0.7); --op-tx-o:rgba(255,255,255,0.7);
  }
  
  /* ===== Overrides Dark ===== */
  body[data-theme="dark"]{
    --bg:rgba(19,21,23,0.8); --text:#e7eaf0; --muted:#a8b3bf; --surface:#000000; --titulo:rgba(255, 255, 255,1);
    --border:rgba(120,130,140,0.35); --glass:rgba(13,17,23,0.70);
    --icon-muted:#9aa3ad; --img-bg:#111418; --btn-overlay:rgba(255,255,255,0.7);
    --bg-image:url(https://mercadogratis.com/iv2/bg-dark.png);
    --op-bg:rgba(255,255,255,0.08); --op-tx:rgba(255,255,255,0.64); --op-bg-o:rgba(255,255,255,0.7); --op-tx-o:rgba(19,21,23,0.7);
  }
  
  
  111body[data-theme="glass"]{
  --bg:rgba(19, 44, 84,.5); --text:#EEF2F6; --muted:#AEB7C2; --surface:rgba(255,255,255,0.12); --titulo:rgba(255,255,255,1);
  --border:rgba(255,255,255,0.18); --glass:rgba(255,255,255,0.14);
  --icon-muted:#B3BBC6; --img-bg:rgba(255,255,255,0.06); --btn-overlay:rgba(15,18,24,0.55);
  --bg-image:radial-gradient(120% 140% at 0% 0%, rgba(92,163,255,.28) 0%, rgba(161,132,255,.24) 35%, rgba(255,166,158,.20) 70%, rgba(255,255,255,.10) 100%);
  --op-bg:rgba(255,255,255,0.07); --op-tx:rgba(255,255,255,0.78); --op-bg-o:rgba(255,255,255,0.28); --op-tx-o:rgba(19,21,23,0.85);
}


 body[data-theme="glass"]{
 --bg:radial-gradient(60% 70% at 18% 20%, rgba(0,180,190,.22), transparent 60%),
    radial-gradient(60% 70% at 82% 30%, rgba(140,60,255,.18), transparent 65%),
    linear-gradient(180deg, #0b1220, #0f1a2b);
    --bg-speed:3s;
  --text:#EEF2F6; --muted:#AEB7C2; --surface:rgba(255,255,255,0.12); --titulo:rgba(255,255,255,1);
  --border:rgba(255,255,255,0.18); --glass:rgba(0,0,5,0.5);
  --icon-muted:#B3BBC6; --img-bg:rgba(255,255,255,0.1); --btn-overlay:rgba(15,18,24,0.55);
  --bg-image:radial-gradient(120% 140% at 0% 0%, rgba(92,163,255,.28) 0%, rgba(161,132,255,.24) 35%, rgba(255,166,158,.20) 70%, rgba(255,255,255,.10) 100%);
  --bg-image:url(https://mercadogratis.com/iv2/bg-dark.png);
  --op-bg:rgba(255,255,255,0.07); --op-tx:rgba(255,255,255,0.78); --op-bg-o:rgba(255,255,255,0.28); --op-tx-o:rgba(19,21,23,0.85);
  .boton-icono, .enlaces-nav a {box-shadow:inset 0 0 9px rgba(255,255,255,.25),0 0px 5px rgba(0,0,0,.05);}
    .product-grid .product-item a::before {
    border-radius: 30px;
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    backdrop-filter: blur(20px) saturate(110%);
    -webkit-backdrop-filter: blur(20px) saturate(110%);
    -moz-backdrop-filter: blur(20px) saturate(110%);
    -ms-backdrop-filter: blur(20px) saturate(110%);
    -o-backdrop-filter: blur(20px) saturate(110%);
    box-shadow: inset 0 0 9px rgba(255, 255, 255, .20), 0 0px 4px rgba(0, 0, 0, .05);
    /* transition: background .35s, box-shadow .35s; */
 }
.product-title, .product-subtitle,.product-meta{padding:0 10px 0;}
.product-img .btn {background:transparent;color:#fff;backdrop-filter: blur(50px)}
}


body[data-theme="glass"]::before{
  content:"";
  position:fixed; inset:0;
  z-index:-2; pointer-events:none;
  background-image: var(--bg-image);
  background-position:center;
  background-size:cover;
  opacity:.9;
  -webkit-filter: blur(72px);
  filter: blur(72px);
}

/* Capa 2: la misma --bg pero animada con hue-rotate */
body[data-theme="glass"]::after{
  content:"";
  position:fixed; inset:0;
  z-index:-1; pointer-events:none;
  background: var(--bg);
  filter:hue-rotate(0deg);
  animation: hueCycle var(--bg-speed) linear infinite;
  will-change: filter;
}

@keyframes hueCycle { to { filter:hue-rotate(360deg); } }

  /* ===== Tu CSS (manteniendo estructura) ===== */
  body {
    margin: 0;
    font-family: 'Work Sans','Noto Sans',-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
    background-color: var(--bg);
    color: var(--text);
  }
  body::before{
    content:''; position:fixed; inset:0;
    background-image:var(--bg-image); background-position:center; background-size:cover;
    opacity:0.9; z-index:-1; 
   -webkit-filter: blur(72px);
  -moz-filter: blur(72px);
  -o-filter: blur(72px);
  -ms-filter: blur(72px);
  filter: blur(72px); pointer-events:none;
  }
  body a {text-decoration:none;}
  .layout-container{display:flex;flex-direction:column;min-height:100vh;padding:0 40px;}
/* ====== BASE ====== */







header{
  width:100%;
  padding:10px 40px;
  z-index:3;
  position:fixed; left:0; right:0;
  box-sizing:border-box;
  background-color:transparent;
  transition:background-color .5s ease;

  /* Layout DESKTOP por áreas: logo | nav (cabecera-izquierda) | search (cabecera-derecha) | opciones */
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  grid-template-areas:"logo nav search opciones";
  column-gap:10px;
  align-items:center;
}
header.scrolled{background-color:var(--glass); -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px);border-bottom: 1px solid var(--op-tx-o);}

/* Aplano el contenedor izquierdo para posicionar sus hijos en el grid del header */
.cabecera-izquierda{display:contents}

/* Áreas del grid (respetan el orden solicitado) */
.logo-titulo{grid-area:logo; display:flex; align-items:center; gap:8px;cursor:pointer;}
.enlaces-nav{grid-area:nav; display:flex; align-items:center;justify-content:end; gap:6px}
.cabecera-derecha{grid-area:search; display:flex; align-items:center; justify-content: flex-end; gap:10px; min-width:0; width:100%}
.opciones{grid-area:opciones; display:flex; align-items:center; gap:8px;color:yellow;}

/* Estilos existentes */
.logo-titulo img{height:20px}
.enlaces-nav a{min-width:20px;
  text-transform:uppercase; display:flex; align-items:center; gap:4px;
  text-decoration:none; color:var(--op-tx); font-size:12px; font-weight:500; padding:8px 12px;
  background:var(--op-bg);border-radius:8px;
  
}
.enlaces-nav a:hover, .enlaces-nav a:active {background:var(--op-bg-o);color:var(--op-tx-o);}
.enlaces-nav i{font-size:18px; color:var(--icon-muted);}
.enlaces-nav a:hover i {color:#fff;}


.barra-busqueda{max-width:450px;
  display:flex; align-items:center; 
  background:var(--surface); border-radius:20px; overflow:hidden;
  flex:1 1 auto; min-width:0;box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.barra-busqueda form {width: 100%;}

.barra-busqueda input{
  border:0; outline:0; background:transparent;
  padding:10px; font-size:1rem; flex:1; color:var(--text);
  width:100%; min-width:0;
}
.icono-busqueda,.boton-icono{
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border-radius:9999px; cursor:pointer;
  border:0; padding:0 10px; height:35px; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}
.icono-busqueda:hover, .boton-icono:hover, .icono-busqueda:active, .boton-icono:active {background:var(--op-bg-o);color:var(--op-tx-o);}

.boton-icono{gap:3px; padding:0 8px; color:var(--op-tx);}

.contenido-principal{padding:32px 40px; flex:1; margin-top:80px}




    .main-content {margin-top:20px;}
  .grid-title{font-size:2rem;font-weight:bold;margin-bottom:10px}
  .grid-description{color:var(--muted);font-size:.875rem;margin-bottom:24px}
  .filters{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:10px}
  .filters select{padding:8px 12px;font-size:.875rem;border-radius:9999px;border:none;background-color:var(--surface);color:var(--text)}
  .product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px 21px}
  main{padding:50px 0 0 0}

  @keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
  .product-grid .product-item a{padding: 0 0 6px 0;color:var(--muted);display:flex;flex-direction:column;gap:2px;text-decoration:none;border-radius:12px;transition:padding .2s ease, background-color .1s, transform .2s cubic-bezier(.25,.1,.25,1);}

  
  
  .product-grid .product-item a:active,.product-grid .product-item a:focus{transform:scale(.97)}
  .product-grid .product-item:focus-within a{background-color:var(--surface); padding:2px;}

  .product-item{border-radius:12px;transition:padding .2s ease, transform .2s ease, background-color .1s ease;opacity:0;animation:fadeUp .6s cubic-bezier(.4,0,.2,1) forwards}
  .product-img{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:25px;background:url('https://mercadogratis.com/i/fw/mg-logo-70x50.png') center no-repeat;background-size:70px 50px;background-color:var(--img-bg); box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;}
  .product-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .5s ease, transform .2s cubic-bezier(.25,.1,.25,1);filter:url(#sharpen) contrast(1.05) brightness(1.1) saturate(1.1);image-rendering:auto;image-rendering:crisp-edges;image-rendering:-webkit-optimize-contrast}
  .product-item:hover .btn{opacity:1;right:8px}
  .product-item:hover .product-img img{transform:scale(1.08)}
  .product-item .product-img img:first-child{opacity:1;z-index:1}
  .product-item .product-img img:nth-child(2){opacity:0;z-index:2;pointer-events:none}
  .product-item:hover .product-img img:nth-child(2):not([src=""]):not([src=" "]){opacity:1}
  .product-item:hover .product-img img:nth-child(2):not([src=""]):not([src=" "])~img:first-child{opacity:0}
  .product-img .btn{height:32px;width:32px;position:absolute;opacity:.1;top:8px;right:-32px;cursor:pointer;background:var(--btn-overlay);color:var(--surface);rgba(255,255,255,.9);text-shadow:1px 1px 2px rgba(0,0,0,.5);padding:2px 6px;border:none;border-radius:10px;transition:.15s;z-index:3;font-size:18px}
  .product-img .similar{top:5px}.product-img .compartir{top:42px}.product-img .comparar{top:80px}.product-img .vista_rapida{top:117px}
  .product-img .btn:hover,.product-img .btn:active{background:#000;color:#fff}

  .product-title{font-size:16px;color:var(--titulo);font-weight:500;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  @supports (line-clamp:2){.product-title{display:block;line-clamp:2;block-overflow:ellipsis}}
  .product-title:first-letter{text-transform:uppercase}
  .product-title:not(first-letter){text-transform:lowercase}
  .product-subtitle,.product-meta{font-size:13px;color:var(--muted);margin:0}
  .product-subtitle span {color:#E3BE2B}

  @keyframes slide-in{from{right:-32px}to{right:8px}}

@media (max-width:1080px){
    .enlaces-nav a {padding:7px;}
}
@media (max-width:920px){.product-item{animation-duration:1s}.product-img{aspect-ratio:6/6}.product-item .btn{opacity:1;background:var(--btn-overlay);animation:slide-in .8s ease-out forwards}}
/* ====== RESPONSIVE MÓVIL ====== */
/* Móvil: 1ª fila = logo-titulo → cabecera-izquierda(nav) → opciones; 2ª fila = cabecera-derecha(100%) */
@media (max-width:768px){
  header{
    grid-template-columns:auto 1fr auto;         /* logo | nav | opciones */
    grid-template-areas:
      "logo nav opciones"
      "search search search";                    /* cabecera-derecha ocupa 100% en la 2ª fila */
    row-gap:12px;
    padding:8px 10px 8px 14px;
  }
  .layout-container{padding:0 14px}.product-grid{grid-template-columns:repeat(3,1fr);gap:14px}
  .logo-marca {display:none;}
  .main-content {margin-top:60px;}

  .cabecera-derecha{width:100%; min-width:0; flex-wrap:nowrap}
  .cabecera-derecha > *{flex:0 0 auto}

  .barra-busqueda{flex:1 1 auto; width:100%; max-width:100%; min-width:0}
  .barra-busqueda input{width:100%; min-width:0: font-size:1.25rem;}
  .filters{gap:6px;margin-bottom:18px}
  .filters select {padding:8px 5px;border-radius:12px;width:23.7%;}
}

@media (max-width:605px){.enlaces-nav span{display:none}}
@media (max-width:440px){.layout-container{padding:0 16px}.product-grid{grid-template-columns:repeat(2,1fr);gap:16px}.boton-icono .comenzar {display:none;}.cabecera-derecha{ gap:6px; }}
@media (max-width:375px){.layout-container{padding:0 18px}.product-grid{grid-template-columns:repeat(2,1fr);gap:15px}.filters{gap:4px;margin-bottom:18px} .filters select {padding:8px 3px;border-radius:12px;width:23.8%;}.enlaces-nav a {padding:7px 6px;}}
@media (max-width:275px){.layout-container{padding:0 18px}.product-grid{grid-template-columns:repeat(1,1fr);gap:25px} header{padding:10px 12px;column-gap:4px;}.pais {display:none;}.filters{gap:2px;margin-bottom:18px}.filters select {padding:8px 2px;border-radius:12px;width:24%;}  }

  /* ===== Switch único ===== */
  .theme-switch{display:flex;
  #themeToggle{box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    border:0; background:var(--surface); color:var(--text);
    width:35px; height:35px; border-radius:50%; cursor:pointer;
    display:grid; place-items:center; font-size:18px; transition:transform .1s ease, background-color .15s ease;
  }
  #themeToggle:active{transform:scale(.95)}
#themeToggle:hover, #themeToggle:active {background:var(--op-bg-o);color:var(--op-tx-o);}