/* ===========================
   RESET Y BASE
=========================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Nunito', system-ui, sans-serif;
  background-color: #f9f9f9;
  color: #111;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Identidad configurable y tienda pública: amarillo + contenido centrado. */
.store-brand { display:flex; align-items:center; min-width:0; }.store-logo { display:block; width:auto; max-width:160px; height:44px; object-fit:contain; border-radius:8px; background:#fff; }.search-wrap { position:relative; }.search-clear { align-self:center; border:0; background:transparent; color:#667085; width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:1.35rem; line-height:1; }.search-clear:hover { background:#fff3b0; color:#1f2937; }.search-clear.hidden { display:none; }
body { background:#f4f5f6; }.header { background:#f5d90a; border-bottom:0; box-shadow:0 2px 12px rgba(30,41,59,.12); }.header-top, .header-nav { max-width:1200px; margin:0 auto; }.header-nav { background:transparent; border:0; justify-content:center; }.header-nav a { color:#1f2937; font-weight:800; }.header-nav a:hover { color:#111; }.logo { color:#172033; }.logo span { color:#172033; font-weight:800; }.search-wrap { max-width:590px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.12); }.search-btn { background:#fff; color:#334155; border-left:1px solid #e5e7eb; }.search-btn:hover { background:#fff6b7; color:#111; }.btn-login { border-color:rgba(31,41,55,.25); background:rgba(255,255,255,.45); color:#1f2937; }.btn-cart { background:#1e2d4a; }.btn-dashboard { border-color:rgba(31,41,55,.25); color:#1f2937; background:rgba(255,255,255,.45); }.hero, .section { max-width:1200px; margin-left:auto; margin-right:auto; }.hero { margin-top:28px; }.hero-main { background:linear-gradient(115deg,#1e2d4a,#294875); }.section { background:transparent; }.section-header h2 { color:#1e2d4a; }
@media (max-width:767px) { .header-top { padding:12px 16px; gap:10px; }.store-logo { width:auto; max-width:112px; height:36px; }.store-brand .logo { font-size:1.25rem; }.search-wrap { order:3; flex-basis:100%; max-width:none; }.mobile-menu { top:118px; background:#fffbe6; }.hero { margin:16px 12px 0; }.section { margin-left:12px; margin-right:12px; }.header-actions { margin-left:auto; }.btn-dashboard { display:none; } }

/* Banner final: evita que reglas heredadas devuelvan el azul y los emojis. */
.hero-main { min-height:270px; background:linear-gradient(115deg,#f8df12 0%,#f5c518 72%,#ebbd06 100%) !important; color:#172033; box-shadow:0 12px 28px rgba(133,104,0,.14); }.hero-label { display:inline-flex; align-items:center; gap:8px; background:#172033; color:#fff; border:0; text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; }.hero-label::before { content:''; width:7px; height:7px; border-radius:50%; background:#f8df12; box-shadow:0 0 0 4px rgba(248,223,18,.25); }.hero-main h2 { color:#172033; max-width:520px; }.hero-categories { color:#344054 !important; font-weight:800; letter-spacing:.01em; }.btn-hero { background:#172033; color:#fff; border:0; box-shadow:0 5px 12px rgba(23,32,51,.18); }.btn-hero:hover { background:#263957; transform:translateY(-1px); }.hero-img { display:flex; align-items:flex-end; gap:10px; right:42px; bottom:38px; width:170px; height:105px; opacity:1; font-size:0; }.hero-img::before { content:''; position:absolute; inset:10px 0 0 18px; border:4px solid rgba(23,32,51,.17); border-radius:20px 20px 34px 34px; transform:skewY(-8deg); }.hero-img span { position:relative; display:block; width:30px; border-radius:6px 6px 0 0; background:#172033; opacity:.18; }.hero-img span:nth-child(1) { height:42px; }.hero-img span:nth-child(2) { height:72px; }.hero-img span:nth-child(3) { height:55px; }.hero-side .hero-sm { min-height:270px; justify-content:center; }.hero-icon { width:46px; height:38px; margin:0 auto 13px; border:3px solid #172033; border-radius:8px; position:relative; font-size:0; }.hero-icon::before, .hero-icon::after { content:''; position:absolute; bottom:-9px; width:10px; height:10px; border-radius:50%; background:#172033; }.hero-icon::before { left:5px; }.hero-icon::after { right:5px; }
@media (max-width:767px) { .hero-main { min-height:250px; }.hero-side .hero-sm { min-height:150px; }.hero-img { opacity:.55; right:16px; bottom:18px; transform:scale(.72); transform-origin:bottom right; } }

/* Banner comercial sin emojis: color de marca e iconografía geométrica. */
.hero-main { min-height:270px; background:linear-gradient(115deg,#f8df12 0%,#f5c518 72%,#ebbd06 100%); color:#172033; box-shadow:0 12px 28px rgba(133,104,0,.14); }.hero-label { display:inline-flex; align-items:center; gap:8px; background:#172033; color:#fff; border:0; text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; }.hero-label::before { content:''; width:7px; height:7px; border-radius:50%; background:#f8df12; box-shadow:0 0 0 4px rgba(248,223,18,.25); }.hero-main h2 { color:#172033; max-width:520px; }.hero-categories { color:#344054; font-weight:800; letter-spacing:.01em; }.btn-hero { background:#172033; color:#fff; border:0; box-shadow:0 5px 12px rgba(23,32,51,.18); }.btn-hero:hover { background:#263957; transform:translateY(-1px); }.hero-img { display:flex; align-items:flex-end; gap:10px; right:42px; bottom:38px; width:170px; height:105px; opacity:1; font-size:0; }.hero-img::before { content:''; position:absolute; inset:10px 0 0 18px; border:4px solid rgba(23,32,51,.17); border-radius:20px 20px 34px 34px; transform:skewY(-8deg); }.hero-img span { position:relative; display:block; width:30px; border-radius:6px 6px 0 0; background:#172033; opacity:.18; }.hero-img span:nth-child(1) { height:42px; }.hero-img span:nth-child(2) { height:72px; }.hero-img span:nth-child(3) { height:55px; }.hero-side .hero-sm { min-height:270px; justify-content:center; }.hero-icon { width:46px; height:38px; margin:0 auto 13px; border:3px solid #172033; border-radius:8px; position:relative; font-size:0; }.hero-icon::before, .hero-icon::after { content:''; position:absolute; bottom:-9px; width:10px; height:10px; border-radius:50%; background:#172033; }.hero-icon::before { left:5px; }.hero-icon::after { right:5px; }
@media (max-width:767px) { .hero-main { min-height:250px; }.hero-side .hero-sm { min-height:150px; }.hero-img { opacity:.55; right:16px; bottom:18px; transform:scale(.72); transform-origin:bottom right; } }

:focus-visible { outline: 3px solid #f5b700; outline-offset: 3px; }
button, input, textarea, select { transition: border-color .2s, background-color .2s, transform .2s, box-shadow .2s; }
button:disabled { opacity: .65; cursor: wait; }

.search-empty { margin: 0 32px 20px; padding: 14px 16px; border-radius: 10px; background: #fff8e1; color: #795548; font-weight: 700; }

/* ===========================
   HEADER
=========================== */
.header {
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid #e0e0e0;
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  gap: 16px;
}

.logo {
  font-size: 1.5rem;
  font-weight: 900;
  color: #111;
  white-space: nowrap;
  letter-spacing: -0.5px;
}

.logo span {
  color: #555;
  font-weight: 400;
}

.search-wrap {
  flex: 1;
  display: flex;
  max-width: 480px;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid #ddd;
  transition: border 0.2s;
}

.search-wrap:focus-within {
  border-color: #111;
}

.search-wrap input {
  flex: 1;
  padding: 10px 16px;
  border: none;
  outline: none;
  font-size: 0.92rem;
  font-family: 'Nunito', sans-serif;
  background: #fff;
  color: #111;
}

.search-btn {
  background: #111;
  border: none;
  padding: 0 16px;
  font-size: 1rem;
  cursor: pointer;
  color: #fff;
  transition: background 0.2s;
}

.search-btn:hover {
  background: #333;
}

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

.btn-login {
  background: transparent;
  border: 1.5px solid #ddd;
  color: #333;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  transition: all 0.2s;
}

.btn-login:hover {
  border-color: #111;
  color: #111;
}

.btn-cart {
  background: #111;
  border: none;
  color: #fff;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-cart:hover {
  background: #333;
}

.cart-badge {
  background: #fff;
  color: #111;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 900;
}

.btn-dashboard {
  background: transparent;
  border: 1.5px solid #ddd;
  color: #333;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.88rem;
  transition: all 0.2s;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
}

.btn-dashboard:hover {
  border-color: #111;
  color: #111;
}

.header-nav {
  display: flex;
  padding: 0 32px;
  border-top: 1px solid #f0f0f0;
  overflow-x: auto;
}

.header-nav a {
  color: #777;
  padding: 10px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
}

.header-nav a:hover {
  color: #111;
  border-bottom: 2px solid #111;
}

/* ===========================
   HERO
=========================== */
.hero {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  padding: 24px 32px;
  background: #fff;
  border-bottom: 1px solid #ebebeb;
}

.hero-main {
  background: #111;
  border-radius: 12px;
  padding: 48px 40px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.hero-label {
  font-size: 0.82rem;
  font-weight: 700;
  background: rgba(255,255,255,0.15);
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  width: fit-content;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.hero-main h2 {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.15;
}

.btn-hero {
  background: #fff;
  color: #111;
  border: none;
  padding: 12px 28px;
  border-radius: 8px;
  font-weight: 900;
  font-size: 0.95rem;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  width: fit-content;
  transition: all 0.2s;
}

.btn-hero:hover {
  background: #e0e0e0;
}

.hero-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-sm {
  background: #f4f4f4;
  border-radius: 12px;
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  border: 1px solid #ebebeb;
}

.hero-sm2 {
  background: #fff;
  border: 1.5px solid #111;
}

.hero-icon {
  font-size: 1.8rem;
}

.hero-sm p {
  font-size: 0.85rem;
  font-weight: 600;
  color: #444;
}

/* ===========================
   SECCIONES
=========================== */
.section {
  padding: 32px;
}

.section-header {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-header h2 {
  font-size: 1.2rem;
  font-weight: 900;
  color: #111;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.section-ofertas {
  background: #f4f4f4;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}

/* ===========================
   GRID
=========================== */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* ===========================
   TARJETA PRODUCTO
=========================== */
.item {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
  position: relative;
}

.item:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.item-img {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  border-bottom: 1px solid #f0f0f0;
}

.item-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.item-body h3 {
  font-size: 0.9rem;
  font-weight: 800;
  color: #111;
  line-height: 1.3;
}

.price {
  font-size: 1.15rem;
  font-weight: 900;
  color: #111;
}

.price-old {
  font-size: 0.8rem;
  color: #aaa;
  text-decoration: line-through;
}

.price-lg {
  font-size: 1.5rem;
}

.points {
  font-size: 0.75rem;
  color: #888;
  font-weight: 600;
}

.discount-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #111;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.item-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.btn-ver {
  flex: 1;
  padding: 7px 6px;
  border-radius: 6px;
  border: 1.5px solid #ddd;
  background: transparent;
  color: #333;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-ver:hover {
  border-color: #111;
  color: #111;
}

.btn-add {
  flex: 1;
  padding: 7px 6px;
  border-radius: 6px;
  border: none;
  background: #111;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-add:hover {
  background: #333;
}

.btn-buy {
  width: 100%;
  padding: 9px;
  border-radius: 6px;
  border: none;
  background: #111;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 4px;
}

.btn-buy:hover {
  background: #333;
}

.btn-primary {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: none;
  background: #111;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary:hover {
  background: #333;
}

.btn-primary:disabled {
  background: #aaa;
  cursor: not-allowed;
}

/* ===========================
   FOOTER
=========================== */
.footer {
  background: #111;
  color: #aaa;
  padding: 40px 32px 20px;
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 24px;
}

.footer .logo {
  color: #fff;
}

.footer .logo span {
  color: #aaa;
}

.footer-brand p {
  margin-top: 8px;
  font-size: 0.85rem;
  color: #666;
}

.hero-side .hero-sm { min-height: 128px; }
.delivery-promise-card { border-left: 4px solid #f5c518 !important; }
.delivery-promise-label { display:inline-flex; padding:4px 8px; border-radius:999px; background:#fff5b8; color:#705800; font-size:.65rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.delivery-promise-card p { margin:0; line-height:1.45; }

.combo-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #1e2d4a;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 999px;
  letter-spacing: .06em;
}

.section-combos { background: #f5f8fc; border-block: 1px solid #e2e8f0; }
.combos-store-header p { margin: 5px 0 0; color: #64748b; font-size: .88rem; text-transform: none; letter-spacing: 0; }
.combos-store-header > span { color: #1e2d4a; background: #e8eef8; border-radius: 999px; padding: 6px 10px; font-size: .75rem; font-weight: 800; }

/* Modal de cierre de sesión */
.logout-modal-content { position: relative; padding: 30px; text-align: center; overflow: hidden; }.logout-modal-content::before { content: ''; position: absolute; width: 180px; height: 180px; top: -110px; right: -70px; border-radius: 50%; background: #fff3c4; }.logout-close { position: absolute; z-index: 1; top: 14px; right: 14px; }.logout-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 17px; background: #fff3c4; color: #725500; font-size: 1.75rem; font-weight: 900; transform: rotate(180deg); }.logout-kicker { position: relative; margin: 0 0 5px; color: #8a6700; font-size: .72rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }.logout-modal-content h2 { position: relative; margin: 0; color: #172033; font-size: 1.4rem; }.logout-description { position: relative; max-width: 310px; margin: 9px auto 18px; color: #667085; font-size: .9rem; line-height: 1.5; }.logout-account { position: relative; display: flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 11px 13px; border: 1px solid #e5eaf1; border-radius: 13px; background: #f8fafc; text-align: left; }.logout-account strong, .logout-account small { display: block; }.logout-account strong { color: #1e293b; font-size: .9rem; }.logout-account small { margin-top: 2px; color: #64748b; font-size: .75rem; }.logout-initial { display: grid; flex: 0 0 36px; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #1e2d4a; color: #fff; font-size: .9rem; font-weight: 900; }.logout-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; }.logout-actions button { min-height: 43px; }.logout-actions .btn-primary { background: #1e2d4a; }.logout-actions .btn-primary:hover { background: #2a4068; }
@media (max-width: 420px) { .logout-modal-content { padding: 27px 20px 20px; }.logout-actions { grid-template-columns: 1fr; }.logout-actions .btn-primary { order: -1; } }

/* PQRSD */
.pqrs-modal { width: min(100% - 28px, 620px); }.pqrs-intro { margin: 4px 0 18px; color: #64748b; line-height: 1.5; }.pqrs-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }.pqrs-form input, .pqrs-form select, .pqrs-form textarea { width: 100%; min-height: 43px; padding: 10px 12px; border: 1.5px solid #d9e2ee; border-radius: 9px; background: #fff; font: inherit; }.pqrs-form textarea, .pqrs-form .pqrs-consent, .pqrs-form .pqrs-actions { grid-column: 1 / -1; }.pqrs-form textarea { min-height: 115px; resize: vertical; }.pqrs-form input:focus, .pqrs-form select:focus, .pqrs-form textarea:focus { outline: 0; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.11); }.pqrs-consent { display: flex; gap: 8px; align-items: flex-start; color: #475569; font-size: .82rem; line-height: 1.4; }.pqrs-consent input { width: auto; min-height: auto; margin-top: 2px; accent-color: #1e2d4a; }.pqrs-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }.pqrs-honeypot { position: absolute !important; left: -10000px !important; opacity: 0 !important; }.pqrs-success { display: grid; gap: 6px; padding: 24px; border: 1px solid #a7f3d0; border-radius: 13px; background: #ecfdf5; color: #065f46; text-align: center; }.pqrs-success strong { font-size: 1.05rem; }.pqrs-success span { color: #047857; line-height: 1.5; }.pqrs-success b { display: inline-block; padding: 2px 5px; border-radius: 5px; background: #d1fae5; }
.client-order-card { position: relative; }.btn-repeat-order { width: 100%; margin-top: 12px; min-height: 38px; border: 1px solid #cbd5e1; border-radius: 9px; background: #fff; color: #1e3a5f; font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }.btn-repeat-order:hover { border-color: #f5c518; background: #fffbea; }
.app-version { display:inline-block; margin-left:6px; padding:2px 7px; border-radius:999px; background:#e8eef8; color:#355074; font-size:.68rem; font-weight:800; }
@media (max-width: 560px) { .pqrs-form { grid-template-columns: 1fr; }.pqrs-form textarea, .pqrs-form .pqrs-consent, .pqrs-form .pqrs-actions { grid-column: auto; }.pqrs-actions { display: grid; grid-template-columns: 1fr; }.pqrs-actions .btn-primary { order: -1; } }

.footer-business-detail {
  display: block;
  margin-top: 6px;
  color: #777;
  font-size: .82rem;
  line-height: 1.45;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links h4 {
  color: #fff;
  font-size: 0.88rem;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-links a {
  font-size: 0.82rem;
  color: #666;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: #fff;
}

.footer-links .footer-business-detail { max-width: 240px; }

.footer-copy {
  text-align: center;
  font-size: 0.78rem;
  color: #444;
  border-top: 1px solid #222;
  padding-top: 16px;
}

/* ===========================
   CONFIRMACIÓN PASO 3
=========================== */
.confirm-section {
  background: #f9f9f9;
  border-radius: 10px;
  padding: 14px 16px;
  border: 1px solid #ebebeb;
}

.confirm-section h4 {
  font-size: 0.88rem;
  font-weight: 900;
  color: #111;
  margin-bottom: 8px;
}

.confirm-section p {
  font-size: 0.85rem;
  color: #444;
  margin: 3px 0;
}

.confirm-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.confirm-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #444;
  padding: 3px 0;
  border-bottom: 1px solid #f0f0f0;
}

.confirm-total {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #111 !important;
  margin-top: 6px !important;
}

.confirm-pts {
  color: #f57f17 !important;
  font-weight: 700 !important;
}

.btn-confirm {
  background: #2e7d32 !important;
}

.btn-confirm:hover {
  background: #1b5e20 !important;
}

/* ===========================
   MODAL ÉXITO
=========================== */
.modal-exito {
  text-align: center;
  gap: 12px;
}

.exito-icon {
  font-size: 3.5rem;
  line-height: 1;
}

.modal-exito h2 {
  font-size: 1.4rem;
  font-weight: 900;
  color: #111;
}

.modal-exito p {
  font-size: 0.92rem;
  color: #444;
  line-height: 1.6;
}

.exito-pts {
  background: #f1f8e9;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.92rem !important;
  color: #2e7d32 !important;
  font-weight: 700 !important;
}

/* ===========================
   SCROLLBAR
=========================== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f4f4f4; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #aaa; }

/* ===========================
   HIDDEN
=========================== */
.hidden { display: none !important; }

.mobile-menu-btn,
.mobile-menu { display: none; }
@media (max-width: 768px) {
  .header-top { position: relative; }
  .mobile-menu-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 8px; background: #111; color: #fff; font-size: 1.25rem; }
  .header-actions { display: none; }
  .search-wrap { display: flex; }
  .mobile-menu { display: grid; gap: 8px; padding: 12px 16px; border-top: 1px solid #eee; background: #fff; }
  .mobile-menu button, .mobile-menu a { width: 100%; text-align: left; padding: 11px 12px; border: 0; border-radius: 8px; background: #f4f4f5; color: #111; font: inherit; font-weight: 800; }
}

@media (max-width: 768px) {
  .header-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 10px 16px; }
  .logo { grid-column: 1; }
  .search-wrap { order: initial; grid-column: 2; width: 100%; max-width: none; }
  .mobile-menu-btn { grid-column: 3; }
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .header-top { flex-wrap: wrap; padding: 10px 16px; }
  .search-wrap { order: 3; max-width: 100%; width: 100%; }
  .hero { grid-template-columns: 1fr; padding: 16px; }
  .hero-side { flex-direction: row; }
  .footer-content { grid-template-columns: 1fr; gap: 20px; }
  .section { padding: 20px 16px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .modal-checkout { max-width: 100%; }
  .modal { padding: 12px; align-items: center; overflow-y: auto; }
  .modal-content { width: min(100%, 620px); max-height: calc(100vh - 24px); }
  .cart-item-row { grid-template-columns: auto 1fr; }
  .cart-item-controls { grid-column: 2; justify-content: flex-start; }
}

/* El bloque anterior es una regla heredada; esta regla final conserva la búsqueda al centro. */
@media (max-width: 768px) {
  .header-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; flex-wrap: nowrap; }
  .search-wrap { grid-column: 2; grid-row: 1; order: initial; width: 100%; max-width: none; }
  .mobile-menu-btn { grid-column: 3; grid-row: 1; }
}

@media (max-width: 480px) {
  .header-actions { gap: 6px; }
  .btn-login { display: none; }
  .hero-main h2 { font-size: 1.5rem; }
  .hero-side { flex-direction: column; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .modal-content { padding: 20px 16px; }
  .checkout-actions-row { flex-direction: column; gap: 8px; }
  .checkout-actions-row .btn-secondary,
  .checkout-actions-row .btn-primary { width: 100%; }
}

/* ===========================
   MODALES BASE
=========================== */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #111;
  text-align: left;
}

.form-grid-checkout {
  display: grid;
  gap: 14px;
}

.form-grid-checkout textarea {
  min-height: 100px;
  resize: vertical;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 16px;
}

.modal.hidden { display: none; }

.modal-content {
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  max-height: 90vh;
  overflow-y: auto;
}

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

.modal-header h2 {
  font-size: 1.1rem;
  font-weight: 900;
  color: #111;
}

.modal-close {
  background: #f4f4f4;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  color: #111;
  flex-shrink: 0;
}

.modal-close:hover { background: #e0e0e0; }

.modal-content input {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1.5px solid #ddd;
  font-size: 0.92rem;
  font-family: 'Nunito', sans-serif;
  outline: none;
  transition: border 0.2s;
  color: #111;
  width: 100%;
}

.modal-content input:focus { border-color: #111; }

.modal-sub {
  text-align: center;
  font-size: 0.82rem;
  color: #888;
}

.modal-sub a {
  color: #111;
  font-weight: 700;
  text-decoration: underline;
}

.modal-sm {
  max-width: 360px;
  text-align: center;
}

#ofertas { scroll-margin-top: 112px; }

/* Inicio y registro */
.auth-modal { max-width: 420px; text-align: left; }
.auth-modal-register { max-width: 460px; }
.auth-intro { margin: 0 0 18px; color: #667085; font-size: .92rem; line-height: 1.5; }
.auth-form { gap: 14px; }
.auth-form .field-group { display: grid; gap: 7px; font-weight: 700; font-size: .84rem; color: #344054; }
.auth-form .field-group em { color: #98a2b3; font-style: normal; font-weight: 500; }
.auth-form input { width: 100%; min-height: 44px; border: 1.5px solid #d0d5dd; border-radius: 10px; padding: 10px 12px; font: inherit; font-weight: 500; color: #1d2939; }
.auth-form input:focus { outline: none; border-color: #f5c518; box-shadow: 0 0 0 3px rgba(245,197,24,.18); }
.password-control { position: relative; display: block; }
.password-control input { padding-right: 82px; }
.password-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #475467; font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; padding: 8px; }
.auth-submit { width: 100%; min-height: 46px; font-weight: 800; }
.modal-exito { border-top: 5px solid #22c55e; }
.exito-title:focus { outline: none; }

.modal-msg {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.5;
}

.modal-btns-row {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.btn-secondary {
  padding: 10px 20px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #555;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary:hover { border-color: #111; color: #111; }

.btn-danger {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background: #e53935;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-danger:hover { background: #b71c1c; }

/* ===========================
   MODAL PRODUCTO
=========================== */
.modal-product { max-width: 460px; }

.modal-img {
  height: 160px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  background: #f4f4f4;
  border: 1px solid #ebebeb;
}

.prod-desc {
  font-size: 0.88rem;
  color: #666;
  line-height: 1.6;
  border-top: 1px solid #f0f0f0;
  padding-top: 10px;
}

.modal-btns { display: flex; gap: 10px; }

.modal-btns .btn-add,
.modal-btns .btn-buy {
  flex: 1;
  padding: 12px;
  font-size: 0.88rem;
  border-radius: 8px;
  margin-top: 0;
}

/* ===========================
   CARRITO
=========================== */
.modal-cart { max-width: 480px; }

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 4px;
}

.cart-empty {
  text-align: center;
  color: #aaa;
  font-size: 0.92rem;
  padding: 24px 0;
}

.cart-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f9f9f9;
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid #ebebeb;
}

.cart-item-emoji {
  font-size: 1.8rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  flex-shrink: 0;
}

.cart-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cart-item-info strong { font-size: 0.88rem; color: #111; }
.cart-item-info span  { font-size: 0.8rem; color: #555; font-weight: 600; }
.cart-item-pts        { font-size: 0.75rem !important; color: #f57f17 !important; }

.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid #ddd;
  background: #fff;
  color: #111;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  padding: 0;
  font-family: 'Nunito', sans-serif;
}

.qty-btn:hover { background: #111; color: #fff; border-color: #111; }

.qty-num {
  min-width: 20px;
  text-align: center;
  font-weight: 800;
  font-size: 0.9rem;
  color: #111;
}

.cart-item-remove {
  background: none;
  border: none;
  color: #ccc;
  font-size: 0.95rem;
  cursor: pointer;
  transition: color 0.2s;
  padding: 4px;
}

.cart-item-remove:hover { color: #e53935; }

.cart-summary {
  border-top: 1.5px solid #f0f0f0;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  color: #555;
}

.cart-summary-row strong { color: #111; font-size: 1rem; }

/* ===========================
   TOAST
=========================== */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #111;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.88rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  z-index: 9999;
}

.toast.hidden { display: none; }

/* ===========================
   CHECKOUT STEPPER
=========================== */
.modal-checkout { max-width: 500px; }

.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0 8px;
}

.step { display: flex; flex-direction: column; align-items: center; gap: 4px; }

.step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e0e0e0;
  color: #999;
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.step-label { font-size: 0.7rem; color: #bbb; font-weight: 700; }
.step.active .step-num   { background: #111; color: #fff; }
.step.active .step-label { color: #111; }
.step.done   .step-num   { background: #c8e6c9; color: #2e7d32; }
.step.done   .step-label { color: #2e7d32; }

.step-line {
  flex: 1;
  height: 2px;
  background: #e0e0e0;
  margin: 0 6px 18px;
  min-width: 24px;
}

/* ===========================
   CHECKOUT FORMULARIO
=========================== */
.checkout-form { display: flex; flex-direction: column; gap: 12px; }

.checkout-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #444;
}

.checkout-form input {
  padding: 11px 14px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 0.92rem;
  font-family: 'Nunito', sans-serif;
  outline: none;
  transition: border 0.2s;
  background: #fafafa;
  color: #111;
  width: 100%;
}

.checkout-form input:focus { border-color: #111; background: #fff; }

.checkout-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.checkout-actions-row { justify-content: space-between; }

/* ===========================
   BANCO
=========================== */
.bank-info {
  background: #f9f9f9;
  border-radius: 10px;
  padding: 16px;
  border: 1.5px solid #e0e0e0;
}

.bank-info > p:first-child {
  font-size: 0.88rem;
  font-weight: 700;
  color: #555;
  margin-bottom: 10px;
}

.bank-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.88rem;
  color: #444;
}

.bank-list li { display: flex; align-items: center; gap: 6px; }

.bank-total {
  text-align: right;
  font-size: 1rem;
  font-weight: 700;
  color: #111;
  border-top: 1.5px solid #e0e0e0;
  padding-top: 10px;
  margin-top: 4px;
}

/* ===========================
   UPLOAD COMPROBANTE
=========================== */
.upload-area {
  border: 2px dashed #ddd;
  border-radius: 10px;
  padding: 20px 16px;
  text-align: center;
  background: #fafafa;
  transition: border-color 0.2s, background 0.2s;
}

.upload-area.upload-error {
  border-color: #e53935;
  background: #fff5f5;
  animation: shake 0.35s ease;
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

.upload-label {
  display: inline-block;
  cursor: pointer;
  background: #111;
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 8px;
  transition: background 0.2s;
  font-family: 'Nunito', sans-serif;
}

.upload-label:hover { background: #333; }
.upload-input  { display: none; }
.upload-hint   { font-size: 0.75rem; color: #aaa; margin-top: 4px; }
.upload-nombre { font-size: 0.82rem; font-weight: 700; color: #2e7d32; margin-top: 6px; }

#uploadPreview img {
  display: block;
  max-width: 100%;
  max-height: 140px;
  margin: 10px auto 0;
  border-radius: 8px;
  object-fit: contain;
  border: 1.5px solid #e0e0e0;
}

.item-img img,
.modal-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ── Actualización visual tienda y checkout ─────────────────── */
.header-actions { gap: 12px; }
.btn-dashboard { background: transparent; border: 1.5px solid #222; color: #222; }
.btn-dashboard:hover { background: #f5f5f5; color: #222; }
.btn-dashboard::before { content: ''; border-left: 1px solid #ddd; margin-right: 12px; height: 28px; }
.search-wrap { max-width: 480px; }
.search-wrap input { border: 1.5px solid #e0e0e0; border-radius: 999px 0 0 999px; }
.search-wrap input:focus { border-color: #f5c518; }
.search-btn { border-radius: 0 999px 999px 0; }
.hero-main { position: relative; overflow: hidden; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%); }
.hero-img { position: absolute; right: 18px; bottom: -18px; font-size: 100px; opacity: .15; pointer-events: none; }
.hero-categories { margin: 12px 0; color: rgba(255,255,255,.6); font-size: 13px; }
.btn-hero { display: inline-block; text-decoration: none; }
.hero-sm, .hero-sm2 { background: #fff; border: 1.5px solid #f0f0f0; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.hero-icon { display: block; font-size: 2.5rem; text-align: center; }
.categoria-pills { display: flex; gap: 9px; margin: 0 0 18px; }
.pill { border: 0; border-radius: 999px; padding: 6px 16px; background: #f0f0f0; color: #333; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.pill:hover, .pill.active { background: #f5c518; color: #111; font-weight: 700; }
.item { border: 1.5px solid #ebebeb; border-radius: 16px; transition: box-shadow .2s ease, transform .2s ease; overflow: hidden; }
.catalog-empty { grid-column: 1 / -1; display: grid; gap: 6px; place-items: center; min-height: 180px; padding: 28px; border: 1.5px dashed #d6dbe3; border-radius: 16px; background: #f8fafc; color: #64748b; text-align: center; }.catalog-empty strong { color: #1e2d4a; font-size: 1.05rem; }
.item:hover { box-shadow: 0 6px 20px rgba(0,0,0,.10); transform: translateY(-2px); }
.item-img { background: #f8f9fa !important; }
.discount-tag { background: #e53935; color: #fff; border-radius: 6px; font-size: 11px; font-weight: 700; z-index: 1; }
.price-old { font-size: 12px; color: #999; text-decoration: line-through; }
.price { font-size: 20px; font-weight: 800; color: #1a1a1a; }
.points { display: inline-block; width: fit-content; padding: 3px 10px; border: 1px solid #f5c518; border-radius: 999px; background: #fff8e1; color: #856404; font-size: 11px; }
.item-actions { align-items: center; }
.btn-ver { padding: 0; border: 0; background: transparent; color: #555; font-size: 13px; text-decoration: underline; }
.btn-add { flex: 1; background: #1a1a1a; color: #fff; border-radius: 8px; padding: 10px; }
.section-ofertas .section-header { align-items: center; }
.section-ofertas h2 { color: #e65100; }
.ofertas-line { display: block; width: 100%; height: 4px; margin-top: 5px; border-radius: 99px; background: linear-gradient(90deg, #f5c518, #ff8f00); }
.offer-countdown { color: #e53935; font-size: 13px; white-space: nowrap; }
.footer { border-top: 3px solid #f5c518; }.footer-payments { text-align: center; font-size: .85rem; margin: 16px 0 6px; }
.footer-links a { cursor: pointer; }
.modal-cart .modal-header { border-bottom: 2px solid #f5c518; }
.cart-item { border-radius: 12px; background: #f9fafb; padding: 12px; margin-bottom: 8px; }
.cart-qty-btn { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #f0f0f0; font-size: 16px; cursor: pointer; }.cart-qty-btn:hover { background: #e0e0e0; }
.cart-item-emoji img { width:100%; height:100%; object-fit:contain; display:block; }
.cart-payment-status { margin:8px 0; padding:10px 12px; border:1px solid #f0d450; border-radius:10px; background:#fff9d8; color:#664d03; font-size:.82rem; line-height:1.4; }
.cart-summary .btn-primary:disabled { background:#cbd5e1; color:#475569; cursor:not-allowed; box-shadow:none; }
.cart-summary p:first-child { font-size: 20px; font-weight: 800; }.cart-summary p:nth-child(2) strong { display: inline-block; border-radius: 999px; padding: 3px 10px; background: #fff8e1; color: #856404; }
.btn-primary { border-radius: 12px; }
.step.active .step-num { background: #f5c518; color: #111; border: 3px solid #f5c518; }.step.done .step-num { background: #22c55e; color: transparent; border-color: #22c55e; position: relative; }.step.done .step-num::after { content: '✓'; color: white; position: absolute; }.step.done + .step-line { background: #22c55e; }
.form-grid-checkout input, .form-grid-checkout textarea { border: 1.5px solid #e0e0e0; border-radius: 10px; padding: 12px 16px; font-size: 15px; }.form-grid-checkout input:focus, .form-grid-checkout textarea:focus { outline: none; border-color: #f5c518; box-shadow: 0 0 0 3px rgba(245,197,24,.15); }
.bank-info { border: 2px solid #e0e0e0; border-radius: 16px; padding: 20px; background: #f8f9fa; }.bank-list li { display: grid; grid-template-columns: 30px 1fr; }.bank-total { border-radius: 10px; padding: 10px 16px; background: #f5c518; color: #1a1a1a; font-weight: 800; }
.upload-area { border: 2px dashed #ccc; border-radius: 12px; padding: 24px; text-align: center; cursor: pointer; }.upload-area:hover { border-color: #f5c518; background: #fffdf0; }.upload-label::before { content: '📎'; display: block; font-size: 2rem; margin-bottom: 8px; }
.upload-remove { border: 0; border-radius: 50%; width: 28px; height: 28px; background: #fff0f0; color: #dc2626; font-size: 20px; cursor: pointer; }
/* Refuerzos para componentes heredados */
.search-wrap { border: 1.5px solid #e0e0e0 !important; border-radius: 999px !important; overflow: hidden; }.search-wrap:focus-within { border-color: #f5c518 !important; }.search-wrap input { border: 0 !important; border-radius: 0 !important; }.search-btn { border-radius: 0 !important; }.hero-side .hero-sm { background: #fff !important; border: 1.5px solid #f0f0f0 !important; border-radius: 16px !important; box-shadow: 0 2px 8px rgba(0,0,0,.08) !important; }
.search-wrap input { background:#fff !important; color:#111 !important; caret-color:#111; }.search-wrap input::placeholder { color:#737373 !important; }.modal-img { background:#f8f9fa !important; }.modal-btns .btn-add { width:100%; }.bank-list li { display:block !important; white-space:normal; overflow-wrap:normal; word-break:normal; line-height:1.55; }.bank-list strong { white-space:nowrap; }.cart-item-emoji { background:#f8f9fa !important; }.search-highlight { outline:3px solid rgba(245,197,24,.75); outline-offset:3px; }
.modal-orders { width: min(100% - 32px, 620px); }.modal-kicker { margin: 0 0 3px; color: #8a6700; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.orders-description { margin: 4px 0 18px; color: #667085; }.mis-pedidos-list { display: grid; gap: 10px; max-height: min(52vh, 430px); overflow: auto; padding-right: 2px; }.client-order-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid #e8eaed; border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(17,24,39,.05); }.client-order-card > div { display: grid; gap: 5px; }.client-order-card > div > span:not(.order-state) { color: #667085; font-size: .82rem; }.client-order-summary { justify-items: end; text-align: right; }.order-state { display: inline-flex; width: fit-content; border-radius: 999px; padding: 4px 9px; background: #fff7d6; color: #795900; font-size: .73rem; font-weight: 800; }.order-state.state-en_camino { background: #e8f1ff; color: #1d4f91; }.order-state.state-entregado { background: #e6f7ed; color: #18743a; }.order-state.state-cancelado { background: #ffebeb; color: #b42318; }.orders-empty, .orders-loading { display: grid; gap: 6px; place-items: center; min-height: 160px; padding: 24px; text-align: center; color: #667085; border: 1.5px dashed #d8dde6; border-radius: 14px; background: #f8fafc; }.orders-empty strong { color: #1f2937; }.orders-error { border-color: #fecaca; background: #fff7f7; }

.modal-rating { width:min(100% - 28px,560px); }.rating-stars { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:0 0 18px; padding:0; border:0; }.rating-stars legend { margin-bottom:10px; font-weight:900; }.rating-stars label { display:grid; justify-items:center; gap:3px; padding:10px 4px; border:1px solid #e4e7ec; border-radius:12px; cursor:pointer; }.rating-stars input { position:absolute; opacity:0; }.rating-stars span { color:#d0d5dd; font-size:1.8rem; line-height:1; }.rating-stars small { color:#667085; font-size:.68rem; }.rating-stars label:has(input:checked) { border-color:#f5c518; background:#fff9d9; box-shadow:0 0 0 3px rgba(245,197,24,.14); }.rating-stars label:has(input:checked) span { color:#d9a900; }.rating-comment { display:grid; gap:7px; font-weight:800; }.rating-comment em { color:#667085; font-style:normal; font-weight:500; }.rating-comment textarea { min-height:110px; padding:12px; border:1.5px solid #d0d5dd; border-radius:12px; resize:vertical; }.btn-rate-order { border:0; border-radius:10px; padding:10px 13px; background:#f5c518; color:#17233b; font-weight:900; cursor:pointer; }.order-rating-sent strong { color:#d9a900; letter-spacing:2px; }.order-rating-sent span { font-size:.75rem; color:#667085; }
@media (max-width:640px) { .rating-stars { gap:4px; }.rating-stars label { padding:9px 2px; }.rating-stars small { display:none; }.client-order-card { align-items:stretch; }.btn-rate-order { width:100%; } }
@media (max-width: 767px) {
  .account-label { display: none; }
  .header-nav { display: none; }
  .mobile-menu { display: grid; gap: 8px; position: absolute; top: 70px; left: 12px; right: 12px; padding: 14px; background: #fff; z-index: 20; box-shadow: 0 10px 24px rgba(0,0,0,.12); border-radius: 14px; }
  .mobile-menu.hidden { display: none; }.mobile-menu a, .mobile-menu button { padding: 10px; text-align: left; border: 0; background: #f8f9fa; border-radius: 8px; color: #222; font: inherit; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.item-body { padding: 12px; }.item-actions { flex-direction: column; align-items: stretch; gap: 10px; }.btn-ver { text-align: left; }.btn-add { font-size: 12px; }
  .hero { grid-template-columns: 1fr; }.hero-main h2 { font-size: 24px; }.hero-side { display: flex; overflow-x: auto; }.hero-sm { min-width: 250px; }
  .client-order-card { align-items: flex-start; flex-direction: column; }.client-order-summary { width: 100%; grid-template-columns: 1fr auto; align-items: center; justify-items: initial; text-align: left; }
  .categoria-pills { overflow-x: auto; white-space: nowrap; padding-bottom: 8px; }.section-ofertas .section-header { align-items: flex-start; gap: 8px; flex-direction: column; }
}

/* Sobrescribe los estilos heredados con la identidad pública configurable. */
.header { background:#f5d90a; border-bottom:0; box-shadow:0 2px 12px rgba(30,41,59,.12); }.header-top, .header-nav { max-width:1200px; margin:0 auto; }.header-nav { background:transparent; border:0; justify-content:center; }.header-nav a { color:#1f2937; font-weight:800; }.header-nav a:hover { color:#111; }.logo, .logo span { color:#172033; font-weight:900; }.search-wrap { max-width:590px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.12); }.search-btn { background:#fff; color:#334155; border-left:1px solid #e5e7eb; }.search-btn:hover { background:#fff6b7; color:#111; }.btn-login { border-color:rgba(31,41,55,.25); background:rgba(255,255,255,.45); color:#1f2937; }.btn-cart { background:#1e2d4a; }.btn-dashboard { border-color:rgba(31,41,55,.25); color:#1f2937; background:rgba(255,255,255,.45); }.hero, .section { max-width:1200px; margin-left:auto; margin-right:auto; }.hero { margin-top:28px; }.hero-main { background:linear-gradient(115deg,#1e2d4a,#294875); }.section { background:transparent; }.section-header h2 { color:#1e2d4a; }
@media (max-width:767px) { .header-top { padding:12px 16px; gap:10px; }.store-logo { width:auto; max-width:112px; height:36px; }.store-brand .logo { font-size:1.25rem; }.search-wrap { order:3; flex-basis:100%; max-width:none; }.mobile-menu { top:118px; background:#fffbe6; }.hero { margin:16px 12px 0; }.section { margin-left:12px; margin-right:12px; }.header-actions { margin-left:auto; }.btn-dashboard { display:none; } }

/* Banner sobrio sobre superficie blanca, igual al tono de la tarjeta de envío. */
.hero-main { min-height:270px; background:#fff !important; color:#172033; border:1.5px solid #eef0f2; box-shadow:0 6px 20px rgba(23,32,51,.07); }.hero-label { display:inline-flex; align-items:center; gap:8px; background:#fff3b0; color:#6d5400; border:1px solid #f0d450; text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; }.hero-label::before { content:''; width:7px; height:7px; border-radius:50%; background:#d4a700; box-shadow:none; }.hero-main h2 { color:#172033; max-width:520px; }.hero-categories { color:#667085 !important; font-weight:800; letter-spacing:.01em; }.btn-hero { background:#172033; color:#fff; border:0; box-shadow:0 5px 12px rgba(23,32,51,.18); }.btn-hero:hover { background:#263957; transform:translateY(-1px); }.hero-img { display:none; }.hero-side .hero-sm { min-height:270px; justify-content:center; }.hero-icon { width:46px; height:38px; margin:0 auto 13px; border:3px solid #172033; border-radius:8px; position:relative; font-size:0; }.hero-icon::before, .hero-icon::after { content:''; position:absolute; bottom:-9px; width:10px; height:10px; border-radius:50%; background:#172033; }.hero-icon::before { left:5px; }.hero-icon::after { right:5px; }
.checkout-location-btn { width:100%; margin-top:8px; padding:10px 12px; border:1px solid #cbd5e1; border-radius:10px; background:#fff; color:#172033; font:inherit; font-size:.82rem; font-weight:800; cursor:pointer; }.checkout-location-btn:disabled { opacity:.65; cursor:wait; }.checkout-location-status { margin:7px 0 0; color:#64748b; font-size:.74rem; line-height:1.35; }.checkout-location-status.is-success { color:#15803d; }.checkout-location-status.is-error { color:#b45309; }

/* Sistema visual compartido para todos los modales */
.modal { padding:20px; background:rgba(15,23,42,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.modal-content { width:min(100%,620px); max-width:620px; max-height:calc(100dvh - 40px); padding:24px; gap:16px; overflow-y:auto; border:1px solid rgba(226,232,240,.9); border-radius:20px; background:#fff; box-shadow:0 26px 70px rgba(15,23,42,.28); animation:sharedModalEnter .24s cubic-bezier(.22,1,.36,1); }
.modal-content.modal-sm { max-width:440px; }
.modal-content.modal-wide { max-width:840px; }
.modal-header { min-height:42px; gap:18px; padding-bottom:14px; border-bottom:1px solid #e8edf3; }
.modal-header h2 { margin:0; color:#172033; font-size:1.18rem; line-height:1.25; }
.modal-close,.btn-close-modal { display:grid; flex:0 0 36px; width:36px; height:36px; place-items:center; padding:0; border:1px solid #e2e8f0; border-radius:50%; background:#f8fafc; color:#475569; font:inherit; font-size:1rem; line-height:1; cursor:pointer; transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease; }
.modal-close:hover,.btn-close-modal:hover { border-color:#cbd5e1; background:#eef2f7; color:#172033; transform:rotate(4deg); }
.modal-footer,.modal-btns-row { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding-top:14px; border-top:1px solid #e8edf3; }
.modal-footer button,.modal-btns-row button { min-height:44px; }
.modal-scroll-body { min-height:0; max-height:none; overflow-y:auto; }
@keyframes sharedModalEnter { from { opacity:0; transform:translateY(14px) scale(.975); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (max-width:600px) {
  .modal { align-items:flex-end; padding:10px; }
  .modal-content,.modal-content.modal-sm,.modal-content.modal-wide { width:100%; max-width:none; max-height:calc(100dvh - 20px); padding:20px 16px; border-radius:20px 20px 14px 14px; }
  .modal-footer,.modal-btns-row { display:grid; grid-template-columns:1fr; }
  .modal-footer button,.modal-btns-row button { width:100%; }
  .modal-footer .btn-primary,.modal-btns-row .btn-primary,.modal-btns-row .btn-danger { order:-1; }
}

/* Presentación uniforme de imágenes de producto */
.item-img {
  position:relative;
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  padding:14px;
  overflow:hidden;
  background:#fff !important;
}
.item-img img { transition:transform .22s ease; }
.item:hover .item-img img { transform:scale(1.025); }
.item-body .item-actions { margin-top:auto; padding-top:8px; }
.product-image-placeholder {
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  width:100%;
  height:100%;
  color:#94a3b8;
  background:linear-gradient(145deg,#f8fafc,#f1f5f9);
  border:1px dashed #d8e0ea;
  border-radius:12px;
}
.product-image-placeholder svg { width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.product-image-placeholder small { color:#64748b; font-size:.72rem; font-weight:800; letter-spacing:.02em; }
.modal-product { max-width:720px; }
.modal-product-body { display:grid; grid-template-columns:minmax(250px,.95fr) minmax(0,1.05fr); gap:24px; align-items:start; }
.modal-img { width:100%; height:auto; min-height:280px; aspect-ratio:1 / 1; padding:18px; overflow:hidden; border-radius:16px; background:#f8fafc !important; }
.modal-img img { border-radius:10px; }
.modal-product-info { display:flex; min-width:0; flex-direction:column; gap:8px; padding-top:4px; }
.modal-product-info h3 { margin:0; color:#172033; font-size:1.25rem; line-height:1.3; }
.modal-product-info p { margin:0; overflow-wrap:anywhere; }
.modal-product-info #prodDescription { color:#64748b; line-height:1.55; }
.modal-product-info .modal-btns { margin-top:16px; }
@media (max-width:720px) {
  .modal-product-body { grid-template-columns:1fr; gap:16px; }
  .modal-img { min-height:0; max-height:300px; aspect-ratio:4 / 3; padding:14px; }
}
@media (max-width:480px) {
  .item-img { aspect-ratio:1 / 1; padding:8px; }
  .product-image-placeholder svg { width:28px; height:28px; }
  .modal-img { max-height:250px; }
}

/* Alianza Óptica Kino */
.optica-alliance { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:34px; align-items:center; margin-top:22px; margin-bottom:22px; padding:34px; overflow:hidden; border:1px solid #e5e9ef; border-radius:22px; background:linear-gradient(135deg,#fff 0%,#fffdf2 100%); box-shadow:0 10px 30px rgba(23,32,51,.08); }
.optica-alliance-copy { display:flex; flex-direction:column; align-items:flex-start; }
.optica-kicker { display:inline-flex; align-items:center; gap:7px; margin-bottom:12px; padding:6px 11px; border-radius:999px; background:#fff3b0; color:#6d5400; font-size:.72rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.optica-kicker::before { content:''; width:7px; height:7px; border-radius:50%; background:#d4a700; }
.optica-alliance h2 { margin:0; color:#172033; font-size:clamp(2rem,4vw,3.1rem); line-height:1; }
.optica-lead { max-width:470px; margin:16px 0; color:#566176; font-size:1rem; line-height:1.65; }
.optica-features { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.optica-features span { padding:7px 11px; border:1px solid #e2e8f0; border-radius:999px; background:#fff; color:#31405a; font-size:.78rem; font-weight:800; }
.optica-cta { display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:11px 17px; border-radius:11px; background:#172033; color:#fff; font-weight:850; text-decoration:none; box-shadow:0 5px 12px rgba(23,32,51,.18); transition:background .18s ease,transform .18s ease; }
.optica-cta:hover { background:#263957; transform:translateY(-1px); }
.optica-alliance-copy small { margin-top:12px; color:#7b8494; line-height:1.45; }
.optica-gallery { display:grid; grid-template-columns:1.08fr .92fr; grid-template-rows:repeat(2,minmax(0,1fr)); gap:12px; min-height:390px; }
.optica-photo { position:relative; min-height:0; overflow:hidden; border-radius:16px; background:#f4f5f6; box-shadow:0 4px 14px rgba(23,32,51,.1); }
.optica-photo-main { grid-row:1 / 3; }
.optica-photo img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.optica-photo:hover img { transform:scale(1.035); }
.optica-photo span { position:absolute; right:10px; bottom:10px; left:10px; padding:9px 11px; border-radius:9px; background:rgba(23,32,51,.88); color:#fff; font-size:.77rem; font-weight:800; backdrop-filter:blur(4px); }
@media (max-width:900px) { .optica-alliance { grid-template-columns:1fr; }.optica-gallery { min-height:360px; } }
@media (max-width:600px) { .optica-alliance { margin:18px 12px; padding:22px 16px; border-radius:18px; }.optica-gallery { grid-template-columns:1fr 1fr; grid-template-rows:220px 150px; min-height:0; }.optica-photo-main { grid-column:1 / 3; grid-row:auto; }.optica-alliance h2 { font-size:2rem; }.optica-cta { width:100%; justify-content:center; text-align:center; } }

/* Auditoría UX/UI: semántica, contraste y adaptación */
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
body.modal-open { overflow:hidden; }
.store-logo { max-width:180px; height:50px; }
.hero-main { padding-right:48px; }
.hero-main h1 { max-width:560px; margin:12px 0; color:#172033; font-size:clamp(2rem,4vw,2.75rem); font-weight:900; line-height:1.08; }
.pill { display:inline-flex; align-items:center; gap:7px; min-height:38px; }
.categoria-pills { flex-wrap:wrap; }
.search-wrap input[type="search"]::-webkit-search-cancel-button { display:none; }
.pill span { display:inline-grid; min-width:22px; height:22px; place-items:center; padding:0 5px; border-radius:999px; background:rgba(255,255,255,.7); color:#475569; font-size:.7rem; font-weight:900; }
.pill.active span { background:#172033; color:#fff; }
.price-old { color:#6b7280; }
.optica-alliance-copy small { color:#596275; }
.footer { color:#d1d5db; }
.footer-content { grid-template-columns:minmax(0,1.4fr) minmax(220px,1fr); }
.footer-brand p,.footer-business-detail,.footer-links a,.footer-copy { color:#c2c8d0; }
.footer-links a:hover,.footer-links a:focus-visible { color:#fff; }
.footer-copy { border-top-color:#343a43; }
.footer .logo span { color:#fff; }
.footer-payments { color:#e5e7eb; }
.app-version { background:#f5d90a; color:#172033; }
.pqrs-field { display:flex; min-width:0; flex-direction:column; gap:6px; color:#334155; font-size:.8rem; font-weight:800; }
.pqrs-field em { color:#64748b; font-style:normal; font-weight:600; }
.pqrs-message { grid-column:1 / -1; }
.search-btn:focus-visible,.search-clear:focus-visible { outline:3px solid #172033; outline-offset:-3px; }

@media (max-width:767px) {
  .store-logo { height:40px; }
  .hero-main { padding-right:24px; }
  .hero-main h1 { font-size:2rem; }
  .categoria-pills { flex-wrap:nowrap; }
}
@media (max-width:560px) { .pqrs-message { grid-column:auto; } }
@media (max-width:420px) {
  .grid { grid-template-columns:1fr; }
  .item-img { aspect-ratio:4 / 3; padding:12px; }
  .categoria-pills { margin-right:-4px; }
}