/* =========================
   VARIABLES + RESET
========================= */
:root{
  --black:#001A00;
  --moss:#076E32;
  --bg:#f8f8ff;
  --muted:#666666;
  --white:#ffffff;
  --gold:#ffd700;
}

*{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
html, body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:#111;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
a{color:var(--moss);text-decoration:none}

/* =========================
   LAYOUT BASE
========================= */
.container{max-width:1100px;margin:0 auto;padding:18px;}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
  align-items:stretch;
}

#grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:14px !important;
  align-items:stretch !important;
}

@media (max-width: 980px){
  #grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px){
  #grid{ grid-template-columns:1fr !important; }
}

#grid .card{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}

.card{
  border:1px solid #eee;
  border-radius:14px;
  padding:14px;
  box-shadow:0 1px 6px rgba(0,0,0,.04);
  height:100%;
}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
hr{border:none;border-top:1px solid #eee;margin:16px 0}
.small{font-size:12px;color:var(--muted)}

/* =========================
   FORM + BUTTONS
========================= */
.btn{
  background:var(--moss);
  border:none;
  color:#fff;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  display:inline-block;
}
.btn.secondary{background:#111}
.btn:disabled{opacity:.6;cursor:not-allowed}
input,select,textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:12px}
label{font-size:13px;color:#333;margin-top:10px;display:block}

/* =========================
   BADGE (GTQ)
========================= */
.badge{
  background: rgba(0,0,0,0.2);
  color:#ffffff;
  border:1px solid rgba(255,255,255,0.2);
  font-weight:800;
  padding:4px 10px;
  border-radius:999px;
}

/* =========================
   HEADER
========================= */
.site-header{
  background: var(--moss);
  color:#f0f8ff;
  padding:12px 0;
}

.header-flex{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.brand{display:flex;align-items:center;gap:10px;}
.brand-name{color:#d9d9d9;font-weight:900;font-size:18px;letter-spacing:.2px;}

.search-box{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  max-width:520px;
}
.search-box input{
  flex:1;
  border-radius:12px;
  border:1px solid #ddd;
  background:#ffffff;
  color:#333;
  padding:10px 12px;
}
.search-box input::placeholder{ color:#888; }

.search-box .btn{
  background:#ffffff;
  color:var(--moss);
  border:2px solid var(--moss);
  font-weight:700;
  padding:9px 16px;
  border-radius:12px;
  transition: all .2s ease;
}
.search-box .btn:hover{
  background:var(--moss);
  color:#ffffff;
}

.header-right{display:flex;align-items:center;gap:10px;}
.icon-circle{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background: rgba(255,255,255,0.2);
  color:#fff;
  text-decoration:none;
  transition:.2s;
}
.icon-circle:hover{background: rgba(255,255,255,0.35);}

.icon-circle.instagram{ background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4); }
.icon-circle.facebook{ background:#1877F2; }
.icon-circle.tiktok{ background:#000000; }
.icon-circle.whatsapp{ background:#25D366; }

.icon-circle.instagram:hover,
.icon-circle.facebook:hover,
.icon-circle.tiktok:hover,
.icon-circle.whatsapp:hover{
  transform: translateY(-2px);
  filter: brightness(1.08);
  background: inherit;
}

.cart-pill{
  display:flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:20px;
  background: rgba(0,0,0,0.2);
  color:#fff;text-decoration:none;
  font-weight:800;
}
.cart-pill:hover{background: rgba(0,0,0,0.35);}

@media (max-width: 820px){
  .header-flex{flex-wrap:wrap;}
  .search-box{flex-basis:100%;max-width:none;}
}

/* =========================
   FOOTER
========================= */
footer{
  background: var(--black);
  color:#fff;
  padding:0;
  margin-top:auto; /* clave: siempre al fondo cuando hay poco contenido */
}

.footer-premium{
  background: var(--black);
  color:#fff;
  padding:34px 0 18px;
  border-top: 1px solid rgba(255,255,255,.14);
  position: static !important; /* nunca flotando encima */
  width: 100%;
  clear: both;
  margin-top: 24px !important;
}

.footer-top{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap:18px;
  align-items:start;
}

.footer-brand .footer-logo{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}

.footer-mark{
  font-weight:900;
  letter-spacing:.3px;
  font-size:20px;
}

.footer-tagline{
  margin:0 0 12px;
  max-width:42ch;
  color:#fff !important;
}

.footer-col h3{
  margin:0 0 10px;
  color:#ffd700;
  font-size:15px;
}

.footer-link{
  color:rgba(255,255,255,.92);
  text-decoration:none;
}
.footer-link:hover{ text-decoration:underline; }

.footer-social{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.footer-icon{
  width:40px;height:40px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:#fff;
  background:#ffffff22;
  border: 1px solid rgba(255,255,255,.20);
  transition: transform .15s ease, filter .15s ease;
}
.footer-icon:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.footer-icon.instagram{ background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4); }
.footer-icon.facebook{ background:#1877F2; }
.footer-icon.tiktok{ background:#000000; }
.footer-icon.whatsapp{ background:#25D366; }

.footer-form{ display:flex; gap:10px; flex-wrap:wrap; }
.footer-form input{
  flex:1 1 180px;
  background:#ffffff;
  border:1px solid #ccc;
  color:#111;
  padding:10px 12px;
  border-radius:12px;
}
.footer-form input::placeholder{ color:#777; }
.footer-form input:focus{
  outline:none;
  border-color: var(--moss);
  box-shadow:0 0 0 3px rgba(7,110,50,.2);
}

.footer-bottom{
  margin-top:18px;
  padding-top:14px;
  border-top: 1px solid rgba(255,255,255,.14);
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color:rgba(255,255,255,.85);
}

@media (max-width: 980px){
  .footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-top{ grid-template-columns: 1fr; }
}

.footer-premium,
.footer-premium p,
.footer-premium span,
.footer-premium .small,
.footer-premium .footer-link{
  color:#fff !important;
}

/* =========================
   MODAL / PRODUCTO
========================= */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:18px;z-index:50}
.modal.hidden{display:none}
.modal-card{background:#fff;border-radius:18px;max-width:560px;width:100%;padding:18px;box-shadow:0 10px 40px rgba(0,0,0,.2)}
.thumb{width:70px;height:70px;object-fit:cover;border-radius:12px;border:1px solid #eee;cursor:pointer}
.main-img{max-width:420px;width:100%;border-radius:16px;border:1px solid #eee;object-fit:cover}

/* =========================
   TABLES
========================= */
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid #eee;padding:8px;text-align:left;font-size:14px;vertical-align:top}

/* =========================
   5 NOTICIAS TOP
========================= */
.news-top{
  background:#ffffff;
  border-radius:18px;
  padding:26px;
  box-shadow:0 12px 35px rgba(0,0,0,.07);
  border:1px solid #e9e9ee;
  margin-bottom:30px;
}

.news-top-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
  border-bottom:2px solid var(--moss);
  padding-bottom:8px;
}

.news-top-title{
  font-size:20px;
  font-weight:900;
}

.news-top-src{
  font-size:13px;
  color:#777;
  font-weight:600;
}

.news-ol{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:news-counter;
}

.news-ol li{
  counter-increment:news-counter;
  padding:16px 0;
  border-bottom:1px solid #f0f0f0;
}

.news-ol li:last-child{
  border-bottom:none;
}

.news-ol li a{
  display:flex;
  align-items:flex-start;
  gap:14px;
  text-decoration:none;
  color:#111;
  font-weight:600;
  line-height:1.4;
  transition: all .2s ease;
}

.news-ol li::before{
  content: counter(news-counter);
  font-size:28px;
  font-weight:900;
  color:var(--moss);
  min-width:34px;
  display:inline-block;
}

.news-ol li a:hover{
  color:var(--moss);
  transform:translateX(4px);
}

.arrow{
  margin-left:6px;
  opacity:.5;
  font-weight:900;
}

/* Solo pagina registro vendedor */
.vend-wrap{
  margin-bottom:24px !important;
}

/* FIX DEFINITIVO: footer nunca superpuesto */
html, body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px;
}

/* fuerza footer a flujo normal */
footer,
.footer-premium,
.site-footer {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;
  transform: none !important;
  width: 100% !important;
  clear: both;
}

/* pega al fondo cuando hay poco contenido */
footer {
  margin-top: auto !important;
}
.registro-vendedor-page .rv-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:900px){
  .registro-vendedor-page .rv-grid{grid-template-columns:1fr;}
}
.registro-vendedor-page .rv-card{height:auto!important;}
.registro-vendedor-page .rv-error{
  margin:8px 0 12px;
  color:#b00020;
  font-weight:700;
}

/*logo*/
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-start;
}

.brand-link{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}

.brand-name{
  color:#d9d9d9;
  font-weight:900;
  font-size:clamp(16px, 2.4vw, 22px);
  letter-spacing:.2px;
}


.brand-logo{
  height:clamp(52px, 5vw, 64px);
  width:auto;
  display:block;
  object-fit:contain;
}