/* ========================================
   ESTILOS COMPARTIDOS - index.html y usuario.html
   Código extraído sin modificaciones
   ======================================== */

:root{
  --accent:#00a8ff;
  --green:#00b050;
  --bg:#fdfbf6;
  --card:#ffffff;
  --muted:#666;
}

*{box-sizing:border-box}

body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg); 
  margin:0; 
  color:#111;
  line-height:1.4;
  overflow-x: hidden;

}


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

/* ========== HEADER ========== */
header.top{
  position:sticky; 
  top:0; 
  z-index:90;
  background:var(--bg); 
  padding:10px 0 8px; 
  backdrop-filter:saturate(120%);
  border-bottom:1px solid rgba(0,0,0,0.04)
}

.top-inner{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
  width:100%;
}

h1{
  margin:6px 0 0;
  font-size:20px;
  color:var(--accent);
  letter-spacing:0.2px
}

.subtop{
  font-size:13px;
  color:var(--green);
  display:flex;
  align-items:center;
  gap:8px
}

.subtop img{
  width:18px;
  height:18px
}

/* ================= BUSCADOR + FILTRO ================= */

.search-row{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  margin:12px auto;
}

/* Caja del input */
.search-box{
  flex:1;
  position:relative;
}

/* Input buscador */
.search-box input{
  width:100%;
  height:40px;
  padding:0 44px 0 12px;
  border-radius:10px;
  border:1px solid #dcdcdc;
  font-size:14px;
  background:#fff;
  outline:none;
}

/* Icono lupa */
.search-box img.icon{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  opacity:.85;
  cursor:pointer;
}

/* Select categorías */
.select-wrap{
  flex-shrink:0;
}

select#categoriaFiltro{
  height:40px;
  min-width:160px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid #dcdcdc;
  font-size:14px;
  background:#fff;
  cursor:pointer;
}

/* ================= MOBILE ================= */
@media (max-width: 768px){
  .search-row{
    flex-direction:column;
    gap:10px;
  }

  .select-wrap,
  select#categoriaFiltro{
    width:100%;
  }
}



/* ========== CONTENIDO PRINCIPAL ========== */
main{
  padding:18px 16px 40px
}

.grid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(2,1fr)
}

@media(min-width:900px){ 
  .grid{
    grid-template-columns:repeat(6,1fr)
  } 
}

/* ========== CARDS DE PRODUCTOS ========== */
.card{
  background:var(--card);
  border-radius:12px;
  padding:10px;
  box-shadow:0 6px 18px rgba(10,10,10,0.04);
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:260px
}

.thumb{
  width:100%;
  height:140px;
  border-radius:8px;
  object-fit:cover;
  background:#f3f3f3;
  cursor:pointer
}

.title{
  font-weight:700;
  font-size:14px;
  line-height:1.15;
  min-height:40px
}

.meta{
  font-size:12px;
  color:var(--muted)
}

/* ========== PRECIOS (INDEX.HTML) ========== */
.price-row{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:flex-start;
  font-size:12px
}

.price{
  font-weight:800;
  font-size:13px
}

.fake{
  font-size:12px;
  color:#888;
  text-decoration:line-through
}

.pct{
  background:#ff4d4f;
  color:#fff;
  padding:3px 6px;
  border-radius:6px;
  font-size:11px;
  font-weight:700
}

.free{
  color:var(--green);
  font-weight:700;
  font-size:12px;
  margin-top:4px
}

/* ========== BOTONES ========== */
.btn{
  background:var(--accent);
  color:#fff;
  border:none;
  padding:6px 10px;
  border-radius:5px;
  cursor:pointer;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  line-height:1.1;   /* 👈 clave */
}

.btn.secondary{
  background:transparent;
  color:var(--accent);
  border:1px solid rgba(0,160,255,0.12);
  padding:6px 10px;
  font-size:13px;
  line-height:1.1;
}

/* Acciones */
.row-actions{
  display:flex;
  gap:8px;
  align-items:stretch;
  width:100%;
  flex-wrap: nowrap;
}

.row-actions button,
.row-actions a {
  flex: 1 1 0;
  width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}




/* ========== PAGINACIÓN ========== */
.pagination{
  display:flex;
  justify-content:center;
  margin:20px 0;
  gap:8px;
  flex-wrap:wrap
}

.pagination button {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

.pagination button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.pagination button:hover:not(.active) {
  background: rgba(0,168,255,0.12);
}

/* ========== MODAL ========== */
.modal-bg{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:200;
  background:rgba(0,0,0,0.18);
  backdrop-filter:blur(4px)
}

.modal{
  width:100%;
  max-width:780px;
  background:#fff;
  border-radius:12px;
  padding:12px;
  display:grid;
  grid-template-columns:1fr;
  gap:10px
}

@media(min-width:900px){ 
  .modal{
    grid-template-columns:420px 1fr
  } 
}

.modal img{
  width:100%;
  height:360px;
  object-fit:cover;
  border-radius:8px
}

.modal .m-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}

.m-title{
  font-weight:700;
  font-size:18px
}

.m-price{
  font-size:18px;
  font-weight:800;
  color:#111
}

.m-old{
  font-size:13px;
  color:#888;
  text-decoration:line-through
}

.m-variants{
  margin-top:8px;
  font-size:13px;
  color:#333
}

.m-desc{
  margin-top:10px;
  color:#444;
  line-height:1.3
}

.modal .m-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
  align-items:center
}

.modal .m-nav{
  display:flex;
  gap:8px;
  align-items:center
}

/* ========== ELEMENTOS ADICIONALES ========== */
.pay-logos{
  display:flex;
  justify-content:center;
  margin-top:12px
}

.steps{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
  margin-top:12px
}

.step{
  width:110px;
  text-align:center;
  font-size:13px;
  color:#333
}

.step img{
  width:42px;
  height:42px
}

footer{
  margin-top:30px;
  padding:20px 0;
  text-align:center;
  color:#444;
  font-size:13px
}

/* ========== LOADER ========== */
.loader{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:38vh;
  color:var(--accent)
}

.spinner{
  width:36px;
  height:36px;
  border-radius:50%;
  border:4px solid #eee;
  border-top-color:var(--accent);
  animation:spin 1s linear infinite;
  margin-bottom:10px
}

@keyframes spin{
  to{transform:rotate(360deg)}
}

/* ========== SUGERENCIAS ========== */
.sugg-list{
  position:absolute;
  left:0;
  right:0;
  top:42px;
  background:#fff;
  border-radius:8px;
  box-shadow:0 6px 24px rgba(10,10,10,0.08);
  z-index:80;
  padding:8px;
  display:none;
  max-height:260px;
  overflow:auto
}

.sugg-item{
  padding:8px;
  border-radius:6px;
  cursor:pointer;
  font-size:14px;
  color:#333
}

.sugg-item:hover{
  background:#f3f7ff
}

/* ========== UTILIDADES ========== */
.muted{
  color:#777;
  font-size:13px
}

/* ========== RESPONSIVE ========== */
@media(min-width:900px){
  .top-inner{
    max-width:100%;
    padding:0 28px
  }
  .search-box input{
    font-size:16px;
    padding:12px 48px 12px 14px
  }
  .subtop{
    font-size:13px;
    color:var(--green)
  }
}

@media(max-width:899px){
  .subtop{
    color:#000
  }
}
/* ========================================
   MEJORAS HEADER MINIMAL / PROFESIONAL
   ======================================== */

header.top{
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,0.06);
}

.top-inner{
  gap:16px;
}

/* Título más sobrio */
h1{
  font-size:18px;
  font-weight:800;
  letter-spacing:.3px;
}

/* Subtexto más discreto */
.subtop{
  font-size:12px;
  font-weight:600;
  opacity:.85;
}
/* ========================================
   BUSCADOR ESTILO MARKETPLACE
   ======================================== */

.search-row{
  background:#f6f7f9;
  padding:8px;
  border-radius:12px;
}

.search-box input{
  border:none;
  background:#fff;
  border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  font-weight:500;
}

.search-box input:focus{
  box-shadow:0 0 0 2px rgba(0,168,255,.15);
}

/* icono más sutil */
.search-box img.icon{
  opacity:.6;
}
/* ========================================
   SELECT CATEGORÍAS MINIMAL
   ======================================== */

select#categoriaFiltro{
  border:none;
  background:#fff;
  border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  font-weight:600;
  cursor:pointer;
}

select#categoriaFiltro:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(0,168,255,.15);
}
/* ========================================
   CARDS MÁS PREMIUM
   ======================================== */

.card{
  transition:transform .15s ease, box-shadow .15s ease;
}

.card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(10,10,10,0.08);
}

.thumb{
  transition:transform .2s ease;
}

.card:hover .thumb{
  transform:scale(1.03);
}
/* ========================================
   MENÚ HEADER MINIMAL (TIPO MARKETPLACE)
   ======================================== */

.menu{
  display:flex;
  gap:18px;
  align-items:center;
  font-size:13px;
  font-weight:600;
  margin-top:6px;
  flex-wrap:wrap;
}

.menu a{
  text-decoration:none;
  color:#333;
  padding:6px 2px;
  position:relative;
  opacity:.85;
}

.menu a:hover{
  opacity:1;
}

.menu a.active{
  color:var(--accent);
  opacity:1;
}

.menu a.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-4px;
  height:2px;
  background:var(--accent);
  border-radius:2px;
}
/* ===============================
   MODO APP (MÓVIL)
   =============================== */

@media(max-width:720px){

  header.top{
    padding:8px 0;
  }

  h1{
    font-size:18px;
  }

  .menu{
    overflow-x:auto;
    white-space:nowrap;
    gap:14px;
    padding-bottom:6px;
  }

  .menu::-webkit-scrollbar{
    display:none;
  }

  .search-row{
    flex-direction:column;
    gap:8px;
  }

  select#categoriaFiltro{
    width:100%;
  }

  .grid{
    grid-template-columns:repeat(2,1fr);
  }
}
/* ===============================
   BARRA PROMOCIONAL
   =============================== */

.promo-bar{
  background:#111;
  color:#fff;
  text-align:center;
  font-size:12px;
  padding:6px 10px;
  letter-spacing:.3px;
}
/* ===== LOGO / MARCA ===== */
.brand img{
  height:32px;
  width:auto;
  display:block;
}
/* ===== HAMBURGUESA ===== */
.menu-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  border:none;
  background:none;
  cursor:pointer;
  padding:6px;
}

.menu-toggle span{
  width:22px;
  height:2px;
  background:#111;
  border-radius:2px;
}

/* ===== MENÚ ===== */
.menu{
  display:flex;
  gap:16px;
}

.menu a{
  font-size:14px;
  font-weight:600;
  color:#111;
  text-decoration:none;
  position:relative;
}

.menu a.active::after{
  content:"";
  position:absolute;
  bottom:-6px;
  left:0;
  width:100%;
  height:2px;
  background:var(--accent);
  border-radius:2px;
}

/* ===== MÓVIL ===== */
@media(max-width:768px){

  .menu-toggle{
    display:flex;
  }

  .menu{
    position:absolute;
    top:56px;
    right:16px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 12px 32px rgba(0,0,0,.12);
    flex-direction:column;
    gap:10px;
    padding:14px;
    display:none;
    animation:menuFade .25s ease;
  }

  .menu.show{
    display:flex;
  }

  .menu a{
    font-size:15px;
  }

  /* logo más pequeño */
  .brand img{
    height:26px;
  }

  /* header compacto */
  header.top{
    padding:8px 0;
  }
}

/* ===== ANIMACIÓN ===== */
@keyframes menuFade{
  from{
    opacity:0;
    transform:translateY(-6px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
.modal{
  animation:modalIn .25s ease;
}

@keyframes modalIn{
  from{
    opacity:0;
    transform:scale(.96);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

.announcement{
  background:#000;
  color:#fff;
  overflow:hidden;
  height:36px;
  display:flex;
  align-items:center;
  font-size:13px;
}

.announcement-track{
  display:flex;
  gap:40px;
  white-space:nowrap;
  animation: marquee 18s linear infinite;
}


/* ======================================
   HEADER MÓVIL LIMPIO (SOLO LOGO + MENU)
   ====================================== */
@media (max-width: 768px){

  .top-inner{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
  }


  /* ELIMINAR texto de envíos */
  .subtop,
  .envios,
  .shipping,
  .envio-info{
    display: none !important;
  }

  /* Menú hamburguesa a la IZQUIERDA */
  .menu-toggle{
    order: 1;
    margin: 0 !important;
  }

  /* Logo a la DERECHA */
  header img{
    order: 3;
    height: 26px !important;
    width: auto !important;
  }

  /* Espacio vacío al centro */
  .top-inner > div:empty{
    order: 2;
    flex: 1;
  }

  /* NO tocar buscador ni categorías */
  .search-row,
  .search-box,
  #buscar,
  #categoriaFiltro{
    display: block !important;
    width: 100%;
  }

  /* Menú desplegable móvil */
  nav.menu{
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    background: #fff;
    transform: translateY(-120%);
    transition: transform .25s ease;
    z-index: 999;
  }

  nav.menu.show{
    transform: translateY(0);
  }

  nav.menu a{
    padding: 14px 18px;
    border-bottom: 1px solid #eee;
  }
}
.site-footer{
  font-family:inherit;
  color:#555;
  background:#fff;
  border-top:1px solid #eee;
}

.footer-seo{
  max-width:1200px;
  margin:auto;
  padding:20px;
  font-size:12px;
  color:#888;
}

.footer-seo h4{
  font-size:13px;
  margin-bottom:6px;
  font-weight:600;
}

.footer-main{
  max-width:1200px;
  margin:auto;
  padding:30px 20px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:20px;
}

.footer-main h5{
  font-size:13px;
  margin-bottom:10px;
  color:#111;
}

.footer-main a,
.footer-main span{
  display:block;
  font-size:12px;
  color:#666;
  margin-bottom:6px;
  text-decoration:none;
}

.footer-main a:hover{
  color:#000;
}

.footer-legal{
  border-top:1px solid #eee;
  text-align:center;
  padding:15px;
  font-size:11px;
  color:#999;
}

/* MÓVIL */
@media(max-width:768px){
  .footer-seo{display:none;}
}
/* ============================= */
/* FOOTER MOBILE – 3 COLUMNAS */
/* ============================= */
@media (max-width: 768px) {

  .site-footer{
    width:100%;
  }

  .footer-main{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:12px;
    padding:16px 10px;
    text-align:left;
  }

  .footer-main h5{
    font-size:10.5px;
    margin-bottom:5px;
  }

  .footer-main a,
  .footer-main span{
    font-size:10px;
    margin-bottom:3px;
    line-height:1.25;
  }

  .footer-legal{
    font-size:9.5px;
    padding:10px 8px;
    text-align:center;
  }
}
/* === FIX MODAL CONTACTO (PC + MÓVIL) === */

#contactModal .modal {
  position: relative;
  width: 90%;
  max-width: 420px;
  box-sizing: border-box;
}

#contactModal .m-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

#contactModal .m-h button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}

#contactModal .muted {
  text-align: center;
  word-wrap: break-word;
}
/* === FIX DEFINITIVO MODAL CONTACTO (PC) === */

#contactModal .modal {
  position: relative;
}

#contactModal .m-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

#contactModal .m-h button {
  position: static !important;
  margin-left: auto;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
/* ===== FIX DEFINITIVO MODAL CONTACTO (PC Y MÓVIL) ===== */

#contactModal .modal {
  position: relative;
  overflow: hidden;
}

#contactModal .m-h {
  position: relative;
  padding-right: 40px; /* espacio para la X */
}

#contactModal .m-h button {
  position: absolute !important;
  top: 10px;
  right: 12px;
  background: none !important;
  border: none !important;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  z-index: 10;
}
/* ===== AJUSTE FINAL CONTENIDO MODAL CONTACTO ===== */

#contactModal .modal {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

/* Texto descriptivo */
#contactModal .modal .muted {
  display: block;
  font-size: 14px;
  color: #555;
  text-align: center;
  margin: 8px 0 12px;
}

/* Botón WhatsApp centrado */
#contactModal .modal .btn {
  align-self: center;
  width: 100%;
  max-width: 260px;
  text-align: center;
  border-radius: 10px;
  padding: 12px 16px;
}

.announcement-bar{
  background:#000;
  color:#fff;
  overflow:hidden;
  height:34px;
  display:flex;
  align-items:center;
}

.announcement-track{
  display:flex;
  gap:48px;
  white-space:nowrap;
  will-change:transform;
  animation: marquee 18s linear infinite;
}

.announcement-track span{
  font-size:13px;
  opacity:.95;
}

/* animación limpia */
@keyframes marquee{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-50%);
  }
}

/* móvil */
@media(max-width:768px){
  .announcement-bar{ height:28px; }
  .announcement-track span{ font-size:11px; }
}

@media (max-width: 768px){
  .brand img{
    height: 28px;   /* Móvil limpio y minimalista */
  }
}
/* ===== MÉTODOS DE PAGO FOOTER ===== */
.footer-payments{
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.payment-img{
  width: 100%;
  max-width: 220px;   /* PC */
  height: auto;
  object-fit: contain;
}

/* Móvil */
@media (max-width: 768px){
  .payment-img{
    max-width: 180px;
  }
}
.legal-page{
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  line-height: 1.6;
}

.legal-header{
  padding: 15px;
}

.back-link{
  text-decoration: none;
  color: #000;
  font-size: 14px;
}
/* =========================
   PAGINACIÓN – GLOBAL
========================= */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;

  margin: 32px auto;
  padding: 8px 12px;

  width: fit-content;          /* ⬅️ NO ocupa toda la pantalla */
  max-width: 100%;
  white-space: nowrap;         /* ⬅️ nunca baja a otra fila */

  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

/* BOTONES */
.pagination button {
  min-width: 36px;
  height: 36px;

  padding: 0 10px;
  border-radius: 10px;
  border: none;

  background: #f2f2f2;
  color: #333;
  font-size: 14px;
  font-weight: 500;

  cursor: pointer;
  transition: all .2s ease;
}

.pagination button:hover:not(:disabled) {
  background: #e0e0e0;
}

.pagination button.active {
  background: #1e88e5;
  color: #fff;
  font-weight: 600;
}

.pagination button:disabled {
  opacity: .4;
  cursor: default;
}

/* =========================
   📱 MÓVIL
========================= */
@media (max-width: 600px) {
  .pagination {
    gap: 4px;
    padding: 6px 10px;
    margin: 24px auto;
  }

  .pagination button {
    min-width: 32px;
    height: 32px;
    font-size: 13px;
    border-radius: 8px;
  }
}

/* FIX REAL: centrar tarjetas en móvil */
@media (max-width: 1024px){
  .main-content,
  .content,
  .container{
    margin: 0 auto !important;
    padding: 16px !important;
  }
}

/* ===== FIX DEFINITIVO DESBORDE HORIZONTAL ===== */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  
}

/* =========================
   SELECT CATEGORÍAS – MODERNO
========================= */

#categoriaFiltro{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  min-width: 180px;
  padding: 11px 40px 11px 14px;

  border-radius: 12px;
  border: 1px solid #e2e2e2;
  background-color: #fff;

  font-size: 14px;
  font-weight: 600;
  color: #111;

  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* FOCUS */
#categoriaFiltro:focus{
  outline: none;
  border-color: #00a8ff;
  box-shadow: 0 0 0 3px rgba(0,168,255,.15);
}

/* ===========================
   SELECT CATEGORÍAS — LIMPIO
   =========================== */

.select-wrap{
  position: relative;
  width: 100%;
  max-width: 220px; /* PC */
}

.select-wrap select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 100%;
  padding: 10px 38px 10px 14px;
  border-radius: 12px;

  border: 1px solid #e1e1e1;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: #111;

  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

/* Flecha minimal */
.select-wrap::after{
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: #555;
  pointer-events: none;
}

/* Hover */
.select-wrap select:hover{
  border-color: #ccc;
}

/* Focus */
.select-wrap select:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,168,255,.15);
}

/* 📱 MÓVIL */
@media (max-width: 768px){
  .select-wrap{
    max-width: 100%;
  }

  .select-wrap select{
    font-size: 15px;
    padding: 12px 40px 12px 14px;
  }
}

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
@media (max-width: 768px){
  .grid{
    margin: 0 auto;
    width: 100%;
  }
}
/* === FIX DEFINITIVO: CENTRAR CARDS EN MÓVIL === */
@media (max-width: 768px){
  .grid{
    justify-items: center;
  }

  .card{
    width: 100%;
    max-width: 100%;
  }
}
/* === FIX DEFINITIVO: CENTRAR CARDS EN MÓVIL === */
@media (max-width: 768px){
  .grid{
    justify-items: center;
  }

  .card{
    width: 100%;
    max-width: 100%;
  }
}
/* ===============================
   FIX DEFINITIVO ESPACIOS EN CARDS
================================ */

/* Quitar espacios forzados */
.card .meta,
.card .free,
.card .price-row,
.card .row-actions {
  margin-top: 0 !important;
}

/* Control fino del espacio interno */
.card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* ===============================
   FIX REAL ESPACIADO INTERNO CARD
================================ */

/* La card controla TODO el espaciado */
.card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px !important;
}

/* Todos los hijos SIN margen */
.card > * {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25;
}

/* Ajustes finos */
.card .title {
  line-height: 1.3;
}

.card .meta {
  font-size: 12px;
}

.card .free {
  margin: 0 !important;
}

.card .price-row {
  margin: 0 !important;
}

.card .row-actions {
  margin-top: 6px !important; /* SOLO botones */
}

.product-actions {
  display: flex;
  gap: 8px;              /* espacio entre botones */
  width: 100%;
}

.product-actions .btn {
  flex: 1;               /* 50% cada botón */
  height: 44px;          /* mismo alto */
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}

/* === FIX DEFINITIVO SIN ROMPER DISEÑO === */ /* Evita scroll horizontal SOLO si algo se desborda */
html, body { 
 max-width: 100%; 
 overflow-x: clip; 
 
             
/* mejor que hidden, no rompe sticky */ } /* Reserva espacio real para el header sticky 
*/ body{
  scroll-padding-top: 72px;
}

/* BOTÓN REGISTRAR PEDIDO - HEADER */
.btn-pedido {
  margin-left: 16px;
  padding: 8px 14px;
  background: #0d99ff;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.btn-pedido:hover {
  background: #0077cc;
}
@media (max-width: 768px) {
  .btn-pedido {
    padding: 6px 10px;
    font-size: 14px;
    margin-left: 8px;
  }
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
@media (max-width: 768px) {
  .btn-pedido {
    order: 3;           /* se queda visible */
    margin-left: auto;
    padding: 6px 10px;
    font-size: 14px;
  }

  .menu {
    order: 2;           /* sigue siendo menú */
  }
}
/* =========================
   BLOQUEO SCROLL BODY (MODAL)
   ========================= */
body.modal-open {
  overflow: hidden;
  height: 100vh;
}