/* ========================================================= V&G Mercado Total - Rediseno moderno (2026) Este archivo se agrega DESPUES de bootstrap.css / style.css en header.php, asi que solo necesita sobre-escribir lo necesario para el header, footer y home. El resto de paginas del sitio (no tocadas todavia) siguen usando Bootstrap normalmente. ========================================================= */ :root{ --vg-orange: #FF7A1A; --vg-orange-dark: #E4600A; --vg-orange-light: #FFF1E6; --vg-dark: #14213D; --vg-black: #14161A; --vg-gray-50: #F7F8FA; --vg-gray-100: #EEF0F3; --vg-gray-200: #E3E6EA; --vg-gray-400: #9AA1AC; --vg-gray-600: #5B6472; --vg-white: #FFFFFF; --vg-radius: 14px; --vg-shadow: 0 4px 18px rgba(20, 22, 26, 0.08); --vg-shadow-hover: 0 10px 28px rgba(20, 22, 26, 0.14); --vg-font: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } body{ background: var(--vg-gray-50) !important; font-family: var(--vg-font); color: var(--vg-black); } a{ text-decoration:none; } a:hover, a:focus{ text-decoration:none; } /* ---------- Layout wrapper ---------- */ .vg-shell{ background: var(--vg-gray-50); } /* ---------- Top utility bar ---------- */ .vg-topbar{ background: var(--vg-dark); color: #cfd6e6; font-size: 12.5px; padding: 6px 0; } .vg-topbar .vg-wrap{ max-width: 1220px; margin: 0 auto; padding: 0 20px; display:flex; justify-content:space-between; align-items:center; flex-wrap: wrap; gap: 6px; } .vg-topbar a{ color:#cfd6e6; } .vg-topbar a:hover{ color: var(--vg-orange); } .vg-topbar i{ margin-right:5px; } .vg-topbar span + span{ margin-left:18px; } /* ---------- Main header ---------- */ .vg-header{ background: var(--vg-white); box-shadow: 0 2px 10px rgba(20,22,26,0.06); position: sticky; top: 0; z-index: 1000; padding: 14px 0; } .vg-header .vg-wrap{ max-width: 1220px; margin: 0 auto; padding: 0 20px; display:flex; align-items:center; gap: 22px; flex-wrap: wrap; } .vg-logo img{ width: 168px; max-width: 40vw; display:block; } .vg-search{ flex: 1 1 380px; display:flex; min-width: 240px; } .vg-search select{ border: 1px solid var(--vg-gray-200); border-right: none; background: var(--vg-gray-50); color: var(--vg-gray-600); font-size: 13px; font-weight: 600; padding: 0 10px; border-radius: 999px 0 0 999px; max-width: 130px; height:46px; box-sizing:border-box; } .vg-search input[type="text"]{ flex:1; border: 1px solid var(--vg-gray-200); border-left: none; border-right: none; padding: 11px 14px; font-size: 14px; outline:none; height:46px; box-sizing:border-box; } .vg-search input[type="text"]:focus{ box-shadow:none; } .vg-search button{ background: var(--vg-orange); border: 1px solid var(--vg-orange); color: #fff; padding: 0 20px; border-radius: 0 999px 999px 0; font-weight:600; cursor:pointer; height:46px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; } .vg-search button:hover{ background: var(--vg-orange-dark); } .vg-header-actions{ display:flex; align-items:center; gap: 14px; margin-left:auto; } .vg-btn-publish{ background: var(--vg-orange); color:#fff !important; font-weight:700; font-size:13.5px; padding: 11px 20px; border-radius: 999px; white-space:nowrap; box-shadow: 0 6px 16px rgba(255,122,26,0.35); animation: vg-pulse 2.2s infinite; } .vg-btn-publish:hover{ background: var(--vg-orange-dark); color:#fff !important; } @keyframes vg-pulse{ 0%{ box-shadow: 0 0 0 0 rgba(255,122,26,0.45); } 70%{ box-shadow: 0 0 0 10px rgba(255,122,26,0); } 100%{ box-shadow: 0 0 0 0 rgba(255,122,26,0); } } .vg-nav-links{ list-style:none; display:flex; align-items:center; gap: 22px; margin:0; padding:0; font-size: 14px; font-weight: 600; color: var(--vg-black); } .vg-nav-links a{ color: var(--vg-black); } .vg-nav-links a:hover{ color: var(--vg-orange); } .vg-user-toggle{ background: var(--vg-gray-50) !important; border: 1px solid var(--vg-gray-200) !important; border-radius: 999px !important; padding: 8px 16px !important; font-weight:600; color: var(--vg-black) !important; } .vg-user-toggle i{ color: var(--vg-orange) !important; margin-right:6px; } .vg-navbar-toggle{ display:none; border: 1px solid var(--vg-gray-200); border-radius: 8px; background:#fff; padding: 8px 10px; } /* ---------- Category quick bar ---------- */ .vg-catbar{ background: var(--vg-white); border-top: 1px solid var(--vg-gray-100); border-bottom: 1px solid var(--vg-gray-100); } .vg-catbar .vg-wrap{ max-width: 1220px; margin:0 auto; padding: 10px 20px; display:flex; gap: 10px; overflow-x:auto; } .vg-catbar a{ display:flex; align-items:center; gap:7px; white-space:nowrap; font-size: 13.5px; font-weight:600; color: var(--vg-gray-600); background: var(--vg-gray-50); border: 1px solid var(--vg-gray-100); padding: 7px 16px; border-radius: 999px; } .vg-catbar a i{ color: var(--vg-orange); } .vg-catbar a:hover{ background: var(--vg-orange-light); color: var(--vg-orange-dark); border-color: var(--vg-orange-light); } /* ---------- Hero ---------- */ .vg-hero{ background: linear-gradient(120deg, var(--vg-dark) 0%, #1d2b52 55%, var(--vg-orange-dark) 130%); color:#fff; padding: 54px 20px 66px; text-align:center; } .vg-hero h1{ font-size: 34px; font-weight: 800; margin: 0 0 10px; } .vg-hero p{ font-size: 16px; color: #d8deed; margin: 0 auto 26px; max-width: 560px; } .vg-hero-search{ max-width: 640px; margin: 0 auto; background:#fff; border-radius: 999px; padding: 6px; box-shadow: var(--vg-shadow-hover); display:flex; } .vg-hero-search select{ border:none; background:transparent; font-weight:600; color:var(--vg-gray-600); padding: 0 12px; font-size:13.5px; max-width:130px; } .vg-hero-search input[type="text"]{ flex:1; border:none; outline:none; padding: 12px 10px; font-size:14.5px; } .vg-hero-search button{ background: var(--vg-orange); border:none; color:#fff; font-weight:700; padding: 0 26px; border-radius:999px; } .vg-hero-search button:hover{ background:var(--vg-orange-dark); } /* ---------- Section titles ---------- */ .vg-section{ padding: 34px 0 6px; } .vg-section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 18px; } .vg-section-head h2{ font-size: 21px; font-weight: 800; margin:0; color: var(--vg-black); } .vg-section-head h2 span{ color: var(--vg-orange); } .vg-section-head a{ font-size: 13px; font-weight:700; color: var(--vg-orange); } .vg-section-head a:hover{ color:var(--vg-orange-dark); } /* ---------- Cards ---------- */ .vg-cardgrid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 992px){ .vg-cardgrid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ .vg-cardgrid{ grid-template-columns: 1fr; } } .vg-card{ background:#fff; border-radius: var(--vg-radius); overflow:hidden; box-shadow: var(--vg-shadow); transition: transform .18s ease, box-shadow .18s ease; display:flex; flex-direction:column; height:100%; } .vg-card:hover{ transform: translateY(-4px); box-shadow: var(--vg-shadow-hover); } .vg-card-img{ position:relative; width:100%; padding-top: 68%; background: var(--vg-gray-100); overflow:hidden; } .vg-card-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .vg-card-badge{ position:absolute; top:10px; left:10px; background: rgba(20,22,26,0.72); color:#fff; font-size:11px; font-weight:700; padding: 4px 10px; border-radius: 999px; text-transform:uppercase; letter-spacing:.03em; } .vg-card-body{ padding: 14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1; } .vg-card-price{ font-size: 18px; font-weight:800; color: var(--vg-orange-dark); } .vg-card-title{ font-size: 13.5px; color: var(--vg-gray-600); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .vg-card-btn{ margin-top:auto; display:inline-block; text-align:center; background: var(--vg-gray-50); border: 1px solid var(--vg-gray-200); color: var(--vg-black) !important; font-weight:700; font-size:13px; padding: 9px 0; border-radius: 999px; } .vg-card-btn:hover{ background: var(--vg-orange); border-color:var(--vg-orange); color:#fff !important; } .vg-empty{ background:#fff; border:1px dashed var(--vg-gray-200); border-radius: var(--vg-radius); padding: 26px; text-align:center; color: var(--vg-gray-400); font-size:13.5px; } /* ---------- CTA banda ---------- */ .vg-cta{ margin: 46px 0 0; background: var(--vg-orange-light); border-radius: var(--vg-radius); padding: 30px 26px; display:flex; align-items:center; justify-content:space-between; gap: 20px; flex-wrap:wrap; } .vg-cta h3{ margin:0 0 4px; font-size:19px; font-weight:800; color: var(--vg-black); } .vg-cta p{ margin:0; color: var(--vg-gray-600); font-size:13.5px; } .vg-cta a{ background: var(--vg-black); color:#fff !important; font-weight:700; padding: 12px 26px; border-radius: 999px; white-space:nowrap; } .vg-cta a:hover{ background: var(--vg-orange-dark); } /* ---------- Footer ---------- */ .vg-footer{ background: var(--vg-black); color: #b7bcc6; margin-top: 54px; padding: 46px 0 20px; } .vg-footer .vg-wrap{ max-width:1220px; margin:0 auto; padding:0 20px; } .vg-footer h4{ color:#fff; font-size:14px; font-weight:700; margin-bottom:14px; text-transform:uppercase; letter-spacing:.03em; } .vg-footer ul{ list-style:none; margin:0; padding:0; } .vg-footer li{ margin-bottom:9px; } .vg-footer a{ color:#b7bcc6; font-size:13.5px; } .vg-footer a:hover{ color: var(--vg-orange); } .vg-footer p{ font-size:13.5px; line-height:1.6; } .vg-footer-grid{ display:grid; grid-template-columns: 1.3fr 1.1fr .9fr 1.4fr; gap: 26px; } @media (max-width: 900px){ .vg-footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .vg-footer-grid{ grid-template-columns: 1fr; } } .vg-newsletter{ display:flex; margin-top:12px; } .vg-newsletter input{ flex:1; border:none; border-radius:999px 0 0 999px; padding:10px 14px; font-size:13px; outline:none; height:44px; box-sizing:border-box; } .vg-newsletter button{ border:none; background:var(--vg-orange); color:#fff; font-weight:700; padding: 0 18px; border-radius:0 999px 999px 0; cursor:pointer; height:44px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; white-space:nowrap; font-size:13px; line-height:1; } .vg-newsletter button:hover{ background:var(--vg-orange-dark); } .vg-social{ display:flex; gap:10px; margin-top:6px; } .vg-social a{ width:34px; height:34px; border-radius:50%; background:#20232b; display:flex; align-items:center; justify-content:center; } .vg-social img{ width:16px; height:16px; filter: invert(85%); } .vg-copyright{ border-top: 1px solid #262a33; margin-top: 30px; padding-top: 16px; font-size: 12.5px; color:#6b7280; text-align:center; } /* ---------- WhatsApp float ---------- */ .vg-whatsapp{ position:fixed; right:20px; bottom:20px; z-index:998; width:60px; height:60px; border-radius:50%; box-shadow: 0 8px 22px rgba(0,0,0,0.28); display:flex; align-items:center; justify-content:center; background:#25D366; } .vg-whatsapp i{ color:#fff; font-size:30px; line-height:1; } /* ---------- Mobile nav ---------- */ @media (max-width: 900px){ .vg-navbar-toggle{ display:inline-flex; align-items:center; justify-content:center; } .vg-nav-links{ display:none; flex-direction:column; align-items:flex-start; width:100%; background:#fff; padding: 14px 20px 18px; gap: 14px; border-top: 1px solid var(--vg-gray-100); } .vg-nav-links.vg-open{ display:flex; } .vg-header .vg-wrap{ position:relative; } .vg-header-actions{ margin-left:0; } } /* ---------- Header search (mobile fix) ---------- */ @media (max-width: 600px){ .vg-search{ flex-basis:100%; min-width:0; order:3; } .vg-search select{ max-width:110px; } .vg-search input[type="text"]{ min-width:0; } } /* ---------- Auth modals (Ingresar / Registro / Recuperar contrasena) ---------- */ #ingresar .modal-content, #registro .modal-content, #reset_password .modal-content{ border:none; border-radius: var(--vg-radius); box-shadow: var(--vg-shadow-hover); padding: 30px 26px; font-family: var(--vg-font); } #ingresar .modal-title, #registro .modal-title, #reset_password .modal-title{ color: var(--vg-dark) !important; font-weight: 800; font-size: 20px; background: transparent !important; margin-bottom: 18px; } #ingresar .close, #registro .close, #reset_password .close{ opacity:1; color: var(--vg-gray-400); font-size: 22px; text-shadow:none; transition: color .15s ease; } #ingresar .close:hover, #registro .close:hover, #reset_password .close:hover{ color: var(--vg-orange); } #ingresar .form-control, #registro .form-control, #reset_password .form-control{ border:1px solid var(--vg-gray-200) !important; background: var(--vg-gray-50) !important; border-radius: 10px !important; height:46px; box-sizing:border-box; font-size:14px; color: var(--vg-black); box-shadow:none !important; transition: border-color .15s ease, box-shadow .15s ease; } #ingresar select.form-control, #registro select.form-control, #reset_password select.form-control{ height:46px; } #ingresar .form-control:focus, #registro .form-control:focus, #reset_password .form-control:focus{ border-color: var(--vg-orange) !important; box-shadow: 0 0 0 3px var(--vg-orange-light) !important; outline:none; } #ingresar label, #registro label, #reset_password label{ font-size:13px; font-weight:700; color: var(--vg-gray-600); margin-bottom:6px; display:inline-block; } #ingresar .btn-warning, #registro .btn-warning, #reset_password .btn-warning, #ingresar input[type="submit"], #registro input[type="submit"], #reset_password input[type="submit"]{ background: var(--vg-orange) !important; border:none !important; color:#fff !important; font-weight:700; border-radius:999px !important; height:46px; box-sizing:border-box; font-size:14px; transition: background .15s ease; box-shadow:none; } #ingresar .btn-warning:hover, #registro .btn-warning:hover, #reset_password .btn-warning:hover, #ingresar input[type="submit"]:hover, #registro input[type="submit"]:hover, #reset_password input[type="submit"]:hover{ background: var(--vg-orange-dark) !important; } #registro .btn-block{ border-radius:10px !important; font-weight:600; } #registro legend{ border:none; margin:0; } .vg-auth-dialog{ max-width:420px; } .vg-auth-links{ text-align:right; margin-top:-6px; margin-bottom:14px; } .vg-auth-links a, .vg-auth-switch a{ color: var(--vg-orange); font-weight:600; font-size:13px; text-decoration:none; } .vg-auth-links a:hover, .vg-auth-switch a:hover{ text-decoration:underline; } .vg-auth-footer{ border-top:none; padding:0; text-align:center; } .vg-auth-switch{ margin-top:14px; font-size:13px; color: var(--vg-gray-600); }