/* main.css — MundObra Styles */
/* Extraído de index.html */


*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#0e0e0e;color:#e5e2e1;font-family:'Manrope',sans-serif;min-height:100vh;overflow-x:hidden;padding-top:56px;-webkit-text-size-adjust:100%}
.ms{font-family:'Material Symbols Outlined';font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;vertical-align:middle;line-height:1}
.ms-fill{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}

/* ── CATALOGUE LEVEL BUTTONS ─────────────────── */
.cat-level0-btn:hover,.cat-level1-btn:hover{border-color:rgba(255,192,129,.45)!important;transform:translateY(-2px)}
.cat-todos-btn:hover{background:rgba(255,152,0,.14)!important}

.page{display:none!important;min-height:100vh}
.page.active{display:block!important}

/* ── NAV ─────────────────────────── */
#top-nav{position:fixed;top:0;width:100%;z-index:200;background:rgba(10,10,10,.96);backdrop-filter:blur(20px);border-bottom:1px solid #1a1a1a;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;gap:8px;box-sizing:border-box;overflow:visible}
/* Logo: nunca se achica */
.nav-logo{flex-shrink:0;white-space:nowrap;z-index:1;font-size:20px;font-weight:900;color:#ff9800;letter-spacing:-.04em;text-transform:uppercase;text-decoration:none}
/* Buscador: crece en el espacio disponible, min-width para que no desaparezca */
.nav-search-wrap{flex:1;min-width:80px;max-width:320px;position:relative;z-index:201}
.nav-search-wrap input{width:100%;background:#1c1b1b;border:1px solid #2a2a2a;border-radius:8px;padding:8px 12px 8px 36px;color:#e5e2e1;font-family:Manrope,sans-serif;font-size:13px;outline:none;transition:border-color .2s;box-sizing:border-box}
.nav-search-wrap input:focus{border-color:rgba(255,192,129,.4)}
.nav-search-wrap .search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#6b5a4e;font-size:17px;pointer-events:none}
/* Botones derecha: nunca se achican, sin overflow que corte */
.nav-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
#search-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#1c1b1b;border:1px solid #2a2a2a;border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.7);z-index:600;display:none;max-height:70vh;overflow-y:auto}
.nav-logo{font-size:20px;font-weight:900;color:#ff9800;letter-spacing:-.04em;text-transform:uppercase;text-decoration:none;flex-shrink:0}
.nav-search-wrap{flex:1;max-width:320px;position:relative}
.nav-search-wrap input{width:100%;background:#1c1b1b;border:1px solid #2a2a2a;border-radius:8px;padding:8px 12px 8px 36px;color:#e5e2e1;font-family:Manrope,sans-serif;font-size:13px;outline:none;transition:border-color .2s}
.nav-search-wrap input:focus{border-color:rgba(255,192,129,.4)}
.nav-search-wrap .search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#6b5a4e;font-size:17px;pointer-events:none}
#search-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#1c1b1b;border:1px solid #2a2a2a;border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.7);z-index:600;display:none;max-height:70vh;overflow-y:auto}
/* Nav right: scroll lateral en mobile para que quepan los botones */
.nav-right{display:flex;align-items:center;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-shrink:0;max-width:calc(100vw - 120px)}
.nav-right::-webkit-scrollbar{display:none}
.search-section-label{padding:8px 14px 4px;font-size:10px;font-weight:700;color:#6b5a4e;text-transform:uppercase;letter-spacing:.12em;border-bottom:1px solid #2a2a2a}
.search-row{padding:10px 14px;display:flex;gap:10px;align-items:center;cursor:pointer;transition:background .15s;border-bottom:1px solid #131313}
.search-row:hover{background:rgba(255,192,129,.06)}
.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-btn{background:none;border:1px solid #2a2a2a;border-radius:8px;padding:7px 10px;cursor:pointer;font-family:Manrope,sans-serif;font-size:11px;font-weight:700;color:#6b5a4e;text-transform:uppercase;transition:all .2s;display:flex;align-items:center;gap:5px}
.nav-btn:hover{border-color:rgba(255,192,129,.4);color:#ffc081}
.nav-btn.primary{background:linear-gradient(135deg,#ffc081,#ff9800);border:none;color:#4a2800}
.nav-btn.primary:hover{opacity:.9}
#cart-btn{position:relative}
#cart-badge{position:absolute;top:-6px;right:-6px;background:#ff9800;color:#4a2800;font-size:9px;font-weight:900;width:18px;height:18px;border-radius:50%;display:none;align-items:center;justify-content:center}

/* ── CATEGORY SUB-NAV ────────────── */
.cat-subnav{position:fixed;top:56px;width:100%;z-index:190;background:rgba(14,14,14,.97);border-bottom:1px solid #1a1a1a;display:none;overflow-x:auto;scrollbar-width:none}
.cat-subnav.visible{display:flex}
.cat-subnav-inner{display:flex;gap:0;min-width:max-content;padding:0 12px}
.cat-tab{padding:10px 16px;font-size:11px;font-weight:700;color:#6b5a4e;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:all .2s;background:none;border-top:none;border-left:none;border-right:none;font-family:Manrope,sans-serif}
.cat-tab:hover{color:#ffc081}
.cat-tab.active{color:#ff9800;border-bottom-color:#ff9800}

/* ── MOBILE BOTTOM NAV ───────────── */
#bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:200;background:rgba(10,10,10,.97);border-top:1px solid #1a1a1a}
.bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;padding:6px 4px;min-height:44px;border:none;background:none;color:#6b5a4e;font-family:Manrope,sans-serif;font-size:9px;font-weight:700;text-transform:uppercase;transition:color .2s}
.bnav-item.active,.bnav-item:hover{color:#ff9800}

/* ── CARDS ───────────────────────── */
.prod-card{background:#1c1b1b;border:1px solid #2a2a2a;border-radius:10px;overflow:hidden;cursor:pointer;transition:border-color .2s,transform .2s;display:flex;flex-direction:column}
.prod-card:hover{border-color:rgba(255,192,129,.3);transform:translateY(-2px)}
/* Imagen cuadrada — igual en todas las cards */
.prod-card-img-wrap{aspect-ratio:1/1;overflow:hidden;background:#141414;flex-shrink:0}
.prod-card-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
/* Cuerpo de la card */
.prod-card-body{flex:1;display:flex;flex-direction:column;padding:10px;gap:4px}
/* Nombre: máximo 2 líneas */
.prod-nombre{font-size:12px;font-weight:800;color:#e5e2e1;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}
/* Grilla 2 col mobile, más en desktop */
.cat-prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:480px){.cat-prod-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:768px){.cat-prod-grid{grid-template-columns:repeat(4,1fr);gap:14px}}
@media(min-width:1024px){.cat-prod-grid{grid-template-columns:repeat(5,1fr)}}
/* Nombre: 2 líneas máx con ellipsis — mismo alto en todas las cards */
.store-card{background:#1c1b1b;border:1px solid #2a2a2a;border-radius:12px;overflow:hidden;cursor:pointer;transition:border-color .2s}
.store-card:hover{border-color:rgba(255,192,129,.25)}
.cat-accordion{transition:border-color .2s}.cat-accordion:hover{border-color:#2a2a2a!important}
.cat-acc-header:focus{outline:none}
html.light .cat-accordion{border-color:#e0ddd9!important}
html.light .cat-acc-header{background:#f5f4f2!important}
html.light .cat-acc-header:hover{background:#ede9e4!important}
html.light .cat-accordion > div{background:#e8e4de!important}

/* ── BUTTONS ─────────────────────── */
.btn-orange{background:linear-gradient(135deg,#ffc081,#ff9800);color:#4a2800;border:none;border-radius:8px;padding:11px 20px;font-family:Manrope,sans-serif;font-size:13px;font-weight:900;text-transform:uppercase;cursor:pointer;transition:opacity .2s;display:inline-flex;align-items:center;gap:8px}
.btn-orange:hover{opacity:.9}
.btn-wa{background:rgba(37,211,102,.08);border:1px solid rgba(37,211,102,.25);border-radius:8px;padding:11px 20px;font-family:Manrope,sans-serif;font-size:13px;font-weight:800;color:#34d399;text-transform:uppercase;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:8px}
.btn-wa:hover{background:rgba(37,211,102,.15)}
.btn-ghost{background:transparent;border:1px solid #2a2a2a;border-radius:8px;padding:11px 20px;font-family:Manrope,sans-serif;font-size:13px;font-weight:700;color:#6b5a4e;text-transform:uppercase;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:8px}
.btn-ghost:hover{border-color:rgba(255,192,129,.3);color:#ffc081}
.btn-back{background:rgba(255,152,0,.12);border:1.5px solid rgba(255,152,0,.35);color:#ffc081;cursor:pointer;font-family:Manrope,sans-serif;font-size:12px;font-weight:800;text-transform:uppercase;display:flex;align-items:center;gap:6px;padding:9px 16px;border-radius:8px;transition:all .2s;letter-spacing:.04em}
.btn-back:hover{background:rgba(255,152,0,.22);border-color:rgba(255,152,0,.6);color:#ff9800}ing:6px 0;transition:color .2s}
.btn-back:hover{color:#ffc081}

/* ── CART ────────────────────────── */
#cart-panel{position:fixed;top:0;right:0;bottom:0;width:min(100vw,400px);background:#131313;border-left:1px solid #2a2a2a;z-index:300;transform:translateX(100%);transition:transform .3s;display:flex;flex-direction:column}
#cart-panel.open{transform:translateX(0)}
#cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:299;display:none}
#cart-overlay.visible{display:block}

/* ── PRODUCT MODAL ───────────────── */
#prod-modal{position:fixed;inset:0;z-index:400;display:none;align-items:flex-end;justify-content:center}
#prod-modal.open{display:flex}
#prod-modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(4px)}
#prod-modal-box{position:relative;background:#1c1b1b;border:1px solid rgba(255,192,129,.15);border-radius:24px 24px 0 0;width:100%;max-width:600px;max-height:92vh;overflow-y:auto;box-shadow:0 -8px 40px rgba(0,0,0,.6)}

/* ── LOCATION GATE ───────────────── */
#location-gate{position:fixed;inset:0;z-index:500;background:#0e0e0e;display:none;align-items:center;justify-content:center;padding:24px}

/* ── SECTION HEADER ──────────────── */
.section-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px}
.section-title{font-size:clamp(18px,3vw,24px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:#e5e2e1}
.section-sub{font-size:10px;font-weight:700;color:#6b5a4e;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}
.see-all-btn{background:rgba(255,152,0,.08);border:1px solid rgba(255,192,129,.2);border-radius:6px;padding:7px 14px;font-family:Manrope,sans-serif;font-size:11px;font-weight:800;color:#ffc081;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .2s}
.see-all-btn:hover{background:rgba(255,152,0,.16)}

/* ── TOAST ───────────────────────── */
#toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:#ffc081;color:#4a2800;font-weight:800;font-size:13px;padding:10px 20px;border-radius:999px;opacity:0;transition:all .3s;z-index:9999;pointer-events:none;white-space:nowrap}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── PILL ────────────────────────── */
.pill{background:rgba(255,152,0,.08);color:#ffc081;border:1px solid rgba(255,192,129,.18);border-radius:4px;padding:3px 10px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}


/* ── AUTH MODAL ─────────────────── */
#auth-modal{position:fixed;inset:0;z-index:600;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.85);backdrop-filter:blur(6px)}
#auth-modal.open{display:flex}
#auth-box{background:#131313;border:1px solid #2a2a2a;border-radius:16px;width:100%;max-width:400px;overflow:hidden}
.auth-tab-btn{flex:1;padding:14px;font-family:Manrope,sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;border:none;cursor:pointer;background:#0e0e0e;color:#6b5a4e;border-bottom:2px solid transparent;transition:all .2s}
.auth-tab-btn.active{color:#ffc081;border-bottom-color:#ffc081;background:#131313}
.auth-input{width:100%;background:#0e0e0e;border:1px solid #2a2a2a;border-radius:8px;padding:12px 14px;color:#e5e2e1;font-family:Manrope,sans-serif;font-size:14px;outline:none;transition:border-color .2s;margin-bottom:12px}
.auth-input:focus{border-color:rgba(255,192,129,.4)}
.auth-input::placeholder{color:#6b5a4e}

/* ── WA FLOAT BUTTON ─────────────── */


/* ── PROMOS PAGE ─────────────────── */
.promo-card{background:#1c1b1b;border:1px solid #2a2a2a;border-radius:12px;overflow:hidden;transition:border-color .2s}
.promo-card:hover{border-color:rgba(255,192,129,.3)}
.bank-chip{background:rgba(255,152,0,.08);border:1px solid rgba(255,192,129,.2);border-radius:6px;padding:4px 10px;font-size:10px;font-weight:700;color:#ffc081;text-transform:uppercase;display:inline-flex;align-items:center;gap:4px}

/* ── MEMBERSHIP BANNER ───────────── */
.memb-banner{background:linear-gradient(135deg,rgba(255,152,0,.1),rgba(255,152,0,.04));border:1px solid rgba(255,192,129,.2);border-radius:12px;padding:16px;margin-bottom:20px}

/* ── GUEST FORM ──────────────────── */
#guest-modal{position:fixed;inset:0;z-index:650;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.85);backdrop-filter:blur(6px)}
#guest-modal.open{display:flex}

/* ── LIGHT MODE ──────────────────── */
html.light body{background:#f5f4f2;color:#1a1a1a}
html.light #top-nav,html.light .cat-subnav,html.light #bottom-nav{background:rgba(245,244,242,.97);border-color:#e0ddd9}
html.light .prod-card,html.light .store-card,html.light #cart-panel,html.light #prod-modal-box{background:#fff;border-color:#e0ddd9}
html.light .nav-search-wrap input,html.light #search-dropdown{background:#fff;border-color:#e0ddd9;color:#1a1a1a}
html.light .section-title{color:#1a1a1a}
html.light .btn-ghost{border-color:#e0ddd9;color:#5a4a3a}
html.light [style*="background:#1c1b1b"]{background:#fff!important}
html.light [style*="background:#141414"]{background:#f0ede8!important}
html.light [style*="background:#0e0e0e"]{background:#f5f4f2!important}
html.light [style*="background:#131313"]{background:#f5f4f2!important}
html.light [style*="color:#6b5a4e"]{color:#5a4a3a!important}
html.light [style*="color:#e5e2e1"]{color:#1a1a1a!important}
html.light [style*="border-color:#2a2a2a"],[style*="border:1px solid #2a2a2a"]{border-color:#e0ddd9!important}
html.light #location-gate{background:#f5f4f2}
html.light [style*="color:#a38d7a"]{color:#4a3728!important}
html.light [style*="color:#ffc081"]{color:#b85c00!important}
html.light [style*="color:#ff9800"]{color:#c56000!important}
html.light [style*="color:#6b5a4e"]{color:#4a3728!important}
html.light [style*="color:#2a2a2a"]{color:#3a3a3a!important}
html.light [style*="color:#e5e2e1"]{color:#1a1a1a!important}
html.light [style*="color:#1a1a1a"]{color:#1a1a1a}
html.light input,html.light select,html.light textarea{background:#fff!important;color:#1a1a1a!important;border-color:#c0bab4!important}
html.light .card{background:#fff!important;border-color:#e0ddd9!important}
html.light .btn-back{color:#4a3728!important}
html.light .section-sub{color:#5a4a3a!important}
html.light .cat-tab{color:#4a3728!important}
html.light .cat-tab.active{color:#c56000!important;border-bottom-color:#c56000!important}
html.light .fade-up h1,.light .fade-up h2{color:#1a1a1a}
html.light code{background:#f0ede8!important;color:#b85c00!important}
html.light #auth-box{background:#fff!important;border-color:#e0ddd9!important}
html.light .auth-input{background:#f5f4f2!important;color:#1a1a1a!important;border-color:#c0bab4!important}
html.light [style*="background:rgba(255,152,0"]{background:rgba(180,100,0,.06)!important}
html.light [style*="color:#34d399"]{color:#057a55!important}
html.light [style*="color:#25d366"]{color:#057a55!important}
html.light [style*="color:#f4d73f"]{color:#7a5c00!important}
html.light [style*="color:#ff7351"]{color:#c0392b!important}
html.light [style*="color:#a38d7a"]{color:#4a3728!important}
html.light .pill{background:rgba(74,55,40,.08)!important;color:#4a3728!important;border-color:rgba(74,55,40,.2)!important}
html.light .section-title{color:#1a1a1a!important}
html.light h1,html.light h2,html.light h3,html.light h4{color:#1a1a1a}
  html.light #page-home button{background:linear-gradient(135deg,#fff,#f5f2ee)!important;border-color:#ddd8d0!important}
  html.light #page-home button h2{color:#1a1200!important}
  html.light #page-home button p{color:#5a4a3a!important}
html.light p{color:#3a3232}
html.light .nav-logo{color:#c56000!important}
html.light #mundobra-footer{background:#f0ede8!important;border-color:#e0ddd9!important}
html.light #mundobra-footer p,html.light #mundobra-footer button{color:#6b5040!important}
html.light .btn-orange{background:linear-gradient(135deg,#e07000,#c56000)!important;color:#fff!important}
html.light .see-all-btn{background:#f0ede8!important;border-color:#c0bab4!important;color:#4a3728!important}
html.light .prod-card p{color:#1a1a1a!important}
html.light .store-card p{color:#1a1a1a!important}
html.light #cart-panel{background:#fff!important}
html.light #cart-panel p,html.light #cart-panel span{color:#1a1a1a!important}
html.light #global-spinner{background:rgba(0,0,0,.5)!important}
html.light [style*="color:#4a2800"]{color:#4a2800!important}
html.light .btn-wa{background:#25d366!important;color:#fff!important;border:none!important}
html.light .btn-wa:hover{opacity:.85}
html.light .cat-tab{color:#4a3728!important}
html.light .cat-tab.active{color:#c56000!important;border-bottom-color:#c56000!important}
html.light .fade-up h1,.light .fade-up h2{color:#1a1a1a}
html.light code{background:#f0ede8!important;color:#b85c00!important}
html.light #auth-box{background:#fff!important;border-color:#e0ddd9!important}
html.light .auth-input{background:#f5f4f2!important;color:#1a1a1a!important;border-color:#c0bab4!important}
html.light [style*="background:rgba(255,152,0"]{background:rgba(180,100,0,.06)!important}
html.light [style*="background:rgba(52,211,153"]{background:rgba(0,120,80,.06)!important}
html.light #modal-reg-local>div{background:#fff!important}
html.light .cat-bento{background:#fff!important;border-color:#e0ddd9!important}
html.light .cat-bento p,html.light .cat-bento h2,html.light .cat-bento h3,html.light .cat-bento span:not(.ms){color:#1a1a1a!important}
html.light .cat-bento .ms{color:#c56000!important}
html.light [style*="color:#e5e2e1"]{color:#1a1a1a!important}
html.light [style*="color:#fff"]{color:#1a1a1a!important}
html.light [style*="background:#0a0a0a"]{background:#f0ede8!important}
html.light .section-header .section-sub{color:#5a4a3a!important}
html.light .section-header .section-title{color:#1a1a1a!important}
html.light .cat-subnav .cat-tab{background:transparent!important;color:#4a3728!important}
html.light .cat-subnav .cat-tab.active{color:#c56000!important;border-bottom-color:#c56000!important}
html.light #page-home *[style*="color:#e5e2e1"]{color:#1a1a1a!important}
html.light #page-home *[style*="color:#a38d7a"]{color:#4a3728!important}
html.light #page-corralones *[style*="color:#e5e2e1"],html.light #page-ferreterias *[style*="color:#e5e2e1"],html.light #page-pinturias *[style*="color:#e5e2e1"]{color:#1a1a1a!important}
html.light #page-corralones *[style*="color:#a38d7a"],html.light #page-ferreterias *[style*="color:#a38d7a"],html.light #page-pinturias *[style*="color:#a38d7a"]{color:#4a3728!important}
html.light .chat-semanal-btn p{color:#1a1a1a!important}
html.light [style*="background:rgba(37,211,102"]{background:rgba(0,100,50,.06)!important;border-color:rgba(0,100,50,.2)!important}
html.light [style*="background:rgba(52,211,153"]{background:rgba(0,100,60,.06)!important}
html.light #page-perfil *[style*="color:#e5e2e1"]{color:#1a1a1a!important}
html.light #page-perfil *[style*="color:#6b5a4e"]{color:#5a4a3a!important}
html.light #page-calculadora-materiales *,html.light #page-calculadora-pintura *{color-scheme:light}
html.light #page-calculadora-materiales [style*="color:#e5e2e1"],html.light #page-calculadora-pintura [style*="color:#e5e2e1"]{color:#1a1a1a!important}
html.light #page-calculadora-materiales [style*="color:#ffc081"],html.light #page-calculadora-pintura [style*="color:#ffc081"]{color:#b85c00!important}

/* ── RESPONSIVE ──────────────────── */
/* ══════════════════════════════════════════════════════════════
   MOBILE-FIRST — iOS / Android / Desktop
   ══════════════════════════════════════════════════════════════ */

/* ── 1. iOS zoom fix: inputs con 16px mínimo ─────────────────── */
input, select, textarea {
  font-size: 16px !important; /* previene zoom automático en iOS */
}

/* ── 2. Viewport con safe areas (notch + home bar) ──────────── */
:root {
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);
  --nav-h: 56px;
  --bnav-h: 60px;
}

/* ── 3. Touch targets mínimo 44×44px ────────────────────────── */
button, a, [onclick], .nav-btn, .btn-orange, .btn-wa, .btn-ghost,
.btn-back, .see-all-btn, .cat-tab, .bnav-item, .tab-btn,
.prod-card, .store-card {
  min-height: 44px;
  min-width:  44px;
}
/* Íconos pequeños dentro de botones NO heredan el min-width */
button .ms, button span.material-symbols-outlined { min-width: unset; min-height: unset; }

/* ── 4. Nav superior con safe area ───────────────────────────── */
#top-nav {
  padding-top: var(--safe-top);
  height: calc(var(--nav-h) + var(--safe-top));
}

/* ── 5. Bottom nav con home bar iOS ─────────────────────────── */
#bottom-nav {
  display:    none;
  position:   fixed;
  bottom:     0;
  left:       0;
  right:      0;
  z-index:    200;
  background: rgba(10,10,10,.97);
  border-top: 1px solid #1a1a1a;
  padding:    6px var(--safe-right) 0 var(--safe-left);
  padding-bottom: max(6px, var(--safe-bottom));
}
.bnav-item { padding: 6px 4px; }

/* ── 6. Body offsets según nav ───────────────────────────────── */
body {
  padding-top: calc(var(--nav-h) + var(--safe-top));
}

/* ── 7. Store cards — 1 col mobile, 2 tablet, 3 desktop ──────── */
#list-corralones, #list-ferreterias, #list-pinturias {
  display: grid;
  grid-template-columns: 1fr;          /* mobile: 1 columna */
  gap: 12px;
}

/* ── 8. Prod cards — 2 col mobile, 3 tablet, 4 desktop ─────── */
#grid-corr-productos,
#grid-ferr-productos,
#grid-pint-productos {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* mobile: 2 columnas */
  gap: 10px;
}

/* ── 9. Calc cards — 2 col mobile ──────────────────────────── */
#calc-menu-cards {
  grid-template-columns: 1fr 1fr;
}

/* ── 10. Animations ──────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.fade-up{animation:fadeUp .4s ease both}
.fade-up-2{animation:fadeUp .4s .1s ease both}
.fade-up-3{animation:fadeUp .4s .2s ease both}

/* ═══════════════════════════════════════════════════════════════
   BREAKPOINTS
   ═══════════════════════════════════════════════════════════════ */

/* ── Mobile ≤767px ───────────────────────────────────────────── */
@media (max-width: 767px) {
  #bottom-nav { display: flex; }
  body { padding-bottom: calc(var(--bnav-h) + var(--safe-bottom) + 8px); }
  .cat-subnav { top: calc(var(--nav-h) + var(--safe-top)); }
  .nav-search-wrap { display: none; }
  /* Texto de nav en mobile: más compacto */
  .nav-btn { font-size: 10px; padding: 6px 8px; }
  /* Tarjetas de local — 1 col en mobile estrecho */
  #list-corralones, #list-ferreterias, #list-pinturias {
    grid-template-columns: 1fr;
  }
  /* Toast más abajo del bottom nav */
  #toast { bottom: calc(var(--bnav-h) + var(--safe-bottom) + 12px); }
  /* Modal de producto ocupa toda la pantalla */
  #prod-modal-box { border-radius: 20px 20px 0 0; max-height: 90vh; }
  /* Cart panel full width en mobile */
  #cart-panel { width: 100vw; }
  /* Secciones: padding lateral más pequeño */
  .section-wrap, .page > div { padding-left: 14px; padding-right: 14px; }
}

/* ── Mobile pequeño ≤480px ───────────────────────────────────── */
@media (max-width: 480px) {
  #nav-guest-btns { gap: 6px !important; }
  #nav-guest-btns button {
    font-size: 10px !important;
    padding: 6px 8px !important;
  }
  /* En mobile chico: ocultar el texto de los botones, solo íconos */
  #nav-guest-btns button span:not(.ms) { display: none; }
  #nav-guest-btns span[aria-hidden]    { display: none; }
  #grid-corr-productos, #grid-ferr-productos, #grid-pint-productos {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  #calc-menu-cards { gap: 8px; }
}

/* ── Mobile muy pequeño ≤360px ──────────────────────────────── */
@media (max-width: 360px) {
  .nav-search-wrap { display: none; }
  #nav-guest-btns { gap: 5px !important; }
  #nav-guest-btns button {
    font-size: 9px !important;
    padding: 5px 8px !important;
  }
  /* Store cards: 1 col */
  #list-corralones, #list-ferreterias, #list-pinturias {
    grid-template-columns: 1fr;
  }
}

/* ── Tablet ≥768px ───────────────────────────────────────────── */
@media (min-width: 768px) {
  #top-nav { padding: 0 24px; gap: 16px; }
  /* Store cards: 2 columnas */
  #list-corralones, #list-ferreterias, #list-pinturias {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Prod cards: 3 columnas */
  #grid-corr-productos, #grid-ferr-productos, #grid-pint-productos {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Calc cards: 2×2 ya está bien */
}

/* ── Desktop ≥1024px ─────────────────────────────────────────── */
@media (min-width: 1024px) {
  /* Store cards: 3 columnas */
  #list-corralones, #list-ferreterias, #list-pinturias {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Prod cards: 4 columnas */
  #grid-corr-productos, #grid-ferr-productos, #grid-pint-productos {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Desktop grande ≥1280px ──────────────────────────────────── */
@media (min-width: 1280px) {
  /* Store cards: 4 columnas */
  #list-corralones, #list-ferreterias, #list-pinturias {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════
   HOME — Above the fold compacto
   Objetivo: que las 3 category cards sean visibles sin scroll
   en mobile (≤767px, viewport ~700px libre)
═══════════════════════════════════════════════════════════ */

/* Wrapper del home: padding vertical reducido */
#page-home > div {
  padding-top:    20px;
  padding-bottom: 40px;
}

/* Hero: padding comprimido en mobile */
#home-hero {
  padding: 16px 0 20px;
  text-align: center;
}

/* H1 del hero más compacto en mobile */
#home-hero h1 {
  font-size: clamp(26px, 6vw, 64px);
  margin-bottom: 10px;
  line-height: .95;
}

/* Párrafo descriptor: oculto en mobile para ahorrar espacio */
#home-hero .hero-desc {
  display: none;
}

/* Botones hero: más chicos en mobile */
#home-hero .hero-btns {
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
#home-hero .hero-btns button,
#home-hero .hero-btns a {
  font-size: 12px !important;
  padding: 10px 16px !important;
}

/* Category cards: menos gap y menos padding interno en mobile */
#home-cat-grid {
  gap: 10px;
  margin-bottom: 20px;
}
#home-cat-grid button {
  padding: 18px !important;
}
/* Ícono de categoría: más pequeño */
#home-cat-grid .cat-icon-wrap {
  width: 40px !important;
  height: 40px !important;
  margin-bottom: 10px !important;
}
#home-cat-grid .cat-icon-wrap .ms {
  font-size: 22px !important;
}
/* Título de categoría: más compacto */
#home-cat-grid h2 {
  font-size: 17px !important;
  margin-bottom: 4px !important;
}
/* Descripción: oculta en mobile para ahorrar espacio */
#home-cat-grid .cat-desc {
  display: none;
}

/* Trust badges: menos padding */
#home-trust {
  padding-top: 16px;
  margin-bottom: 16px;
  gap: 14px;
}

/* Banner ¿Tenés un local?: más compacto */
#home-banner-local {
  margin-top: 16px;
  padding: 18px !important;
  gap: 14px !important;
}
#home-banner-local h3 {
  font-size: 15px !important;
  margin-bottom: 4px !important;
}
#home-banner-local p {
  font-size: 12px !important;
}

/* ── Nav: separar Soy Local / Soy Cliente ───────────────────── */
#nav-guest-btns {
  gap: 8px !important;       /* más separación entre los dos botones */
  max-width: none !important; /* quitar el max-width que los aplasta */
  flex-shrink: 1;
}

/* En desktop: restaurar espaciados normales del hero */
@media (min-width: 768px) {
  #page-home > div {
    padding-top: 40px;
    padding-bottom: 60px;
  }
  #home-hero {
    padding: 48px 0 40px;
  }
  #home-hero h1 {
    font-size: clamp(32px, 7vw, 64px);
    margin-bottom: 16px;
  }
  #home-hero .hero-desc {
    display: block;
    margin-bottom: 32px;
  }
  #home-hero .hero-btns button,
  #home-hero .hero-btns a {
    font-size: 14px !important;
    padding: 13px 22px !important;
  }
  #home-cat-grid {
    gap: 16px;
    margin-bottom: 48px;
  }
  #home-cat-grid button {
    padding: 28px !important;
  }
  #home-cat-grid .cat-icon-wrap {
    width: 52px !important;
    height: 52px !important;
    margin-bottom: 16px !important;
  }
  #home-cat-grid .cat-icon-wrap .ms {
    font-size: 28px !important;
  }
  #home-cat-grid h2 {
    font-size: 22px !important;
    margin-bottom: 6px !important;
  }
  #home-cat-grid .cat-desc {
    display: block;
  }
  #home-trust {
    padding-top: 24px;
    margin-bottom: 24px;
    gap: 24px;
  }
  #home-banner-local {
    margin-top: 32px;
    padding: 28px !important;
    gap: 20px !important;
  }
  #home-banner-local h3 {
    font-size: 18px !important;
  }
  #home-banner-local p {
    font-size: 13px !important;
  }
  #nav-guest-btns {
    gap: 6px !important;
  }
}

   Selectores con prefijo .geo- para no chocar con estilos
   existentes de MundObra
═══════════════════════════════════════════════════════════ */

/* Filter card */
.geo-filter-card {
  background: #1c1b1b;
  border: 1px solid rgba(255,152,0,.18);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,.45);
}

.geo-filter-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #ff9800;
  margin-bottom: 16px;
}

.geo-filter-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
@media (min-width: 560px) { .geo-filter-fields { grid-template-columns: 1fr 1fr; } }

.geo-field-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #6b5a4e;
  margin-bottom: 5px;
}

.geo-select-wrap { position: relative; }
.geo-select-wrap .ms {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #6b5a4e;
  pointer-events: none;
}

.geo-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 10px 36px 10px 12px;
  color: #e5e2e1;
  font-family: Manrope, sans-serif;
  font-size: 14px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: border-color .2s;
}
.geo-select:focus { border-color: #ff9800; }

.geo-barrio-wrap {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: max-height .3s, opacity .25s, transform .25s;
}
.geo-barrio-wrap.visible {
  max-height: 120px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Geo local card */
.geo-local-card {
  background: #1c1b1b;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .2s, transform .2s;
  animation: geoCardIn .3s ease both;
}
@keyframes geoCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.geo-local-card:hover {
  border-color: rgba(255,152,0,.35);
  transform: translateY(-2px);
}
.geo-local-card:nth-child(1) { animation-delay: .03s; }
.geo-local-card:nth-child(2) { animation-delay: .06s; }
.geo-local-card:nth-child(3) { animation-delay: .09s; }
.geo-local-card:nth-child(4) { animation-delay: .12s; }
.geo-local-card:nth-child(5) { animation-delay: .15s; }
.geo-local-card:nth-child(6) { animation-delay: .18s; }

.geo-card-header { display: flex; align-items: center; gap: 10px; }

.geo-card-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(255,152,0,.1);
  border: 1px solid rgba(255,152,0,.18);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.geo-card-icon .ms { font-size: 20px; color: #ffc081; }

.geo-card-name {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  color: #e5e2e1;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.geo-card-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,152,0,.1);
  color: #ff9800;
  border: 1px solid rgba(255,152,0,.2);
  margin-top: 3px;
}
.geo-card-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: #a38d7a;
}
.geo-card-row .ms { font-size: 14px; color: #6b5a4e; flex-shrink: 0; margin-top: 1px; }

.geo-card-actions { display: flex; gap: 8px; margin-top: 2px; }

.geo-btn-perfil {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px;
  background: linear-gradient(135deg, #ffc081, #ff9800);
  color: #4a2800;
  border: none;
  border-radius: 8px;
  font-family: Manrope, sans-serif;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  transition: filter .2s;
}
.geo-btn-perfil:hover { filter: brightness(1.1); }
.geo-btn-perfil .ms { font-size: 14px; }

.geo-btn-calc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 14px;
  background: transparent;
  color: #ff9800;
  border: 1px solid rgba(255,152,0,.4);
  border-radius: 8px;
  font-family: Manrope, sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.geo-btn-calc:hover { background: rgba(255,152,0,.1); }
.geo-btn-calc .ms { font-size: 14px; }

.geo-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .geo-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 800px) { .geo-grid { grid-template-columns: repeat(3,1fr); } }

.geo-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #2a2a2a;
}
.geo-results-count {
  font-size: 12px;
  font-weight: 800;
  color: #ff9800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.geo-results-zona { font-size: 11px; color: #6b5a4e; font-weight: 600; }


/* ── Padding dinámico cuando cat-subnav es visible ── */
/* cat-subnav tiene top:56px y ~44px de alto = total 100px */
#cat-subnav.visible ~ * #page-corralones,
#cat-subnav.visible ~ * #page-ferreterias,
#cat-subnav.visible ~ * #page-pinturias { padding-top: 100px; }

/* bottom-nav padding para no ocultar contenido */
.page.active { padding-bottom: 72px; }