/* ═══════════════════════════════════════════════════════════
   La Chinita Comercial · capa de diseño
   Se carga después de style.css y mejoras.css. Mantiene la marca (azul + amarillo).
═══════════════════════════════════════════════════════════ */
:root {
  --az: #2a5caa; --az-osc: #1c3f7a; --az-claro: #eaf1fb; --am: #f2b705;
  --tinta: #1b2a41; --gris: #5b6470; --linea: #e3e9f3;
  --sombra-1: 0 1px 2px rgba(20,40,80,.06), 0 6px 16px -8px rgba(20,40,80,.16);
  --sombra-2: 0 2px 4px rgba(20,40,80,.06), 0 22px 40px -18px rgba(20,40,80,.30);
  --radio: 16px;
}
body { color: var(--tinta); background: #f6f8fc; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { letter-spacing: -.01em; }

/* ── Cabecera ── */
/* OJO: sin backdrop-filter aquí; crea un "bloque contenedor" y rompe el menú móvil (position: fixed) */
.header { background: rgba(255,255,255,.98) !important; box-shadow: 0 1px 0 var(--linea), 0 8px 24px -16px rgba(20,40,80,.35); }
.header .logo-img { border-radius: 10px; }
.search-container .form-control, .search-bar input { border-radius: 999px; border: 1.5px solid var(--linea); background: #f3f6fb; transition: border-color .2s, box-shadow .2s, background .2s; }
.search-container .form-control:focus, .search-bar input:focus { background: #fff; border-color: var(--az); box-shadow: 0 0 0 4px rgba(42,92,170,.14); }
.nav a { position: relative; font-weight: 600; color: var(--tinta); transition: color .2s; }
.nav > a::after, .nav > .dropdown > .dropdown-toggle::before { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; border-radius: 3px; background: var(--am); transform: scaleX(0); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.nav > a:hover, .nav > a:focus-visible { color: var(--az); }
.nav > a:hover::after { transform: scaleX(1); }
.nav .dropdown-toggle::after { content: "\f078"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 900; border: 0; font-size: .6em; margin-left: 7px; vertical-align: middle; display: inline-block; }
.nav .dropdown-menu { border: 0; border-radius: 14px; box-shadow: var(--sombra-2); padding: 8px; }
.nav .dropdown-menu a { border-radius: 10px; }
.nav .dropdown-menu a:hover { background: var(--az-claro); color: var(--az-osc); }
.carrito-icono-link { position: relative; transition: transform .15s; } .carrito-icono-link:hover { transform: translateY(-1px); }
.carrito-badge { background: var(--am) !important; color: #1b2a41 !important; font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,.25); }

/* ── Portada (hero) ── */
.hero { position: relative; overflow: hidden; padding: clamp(48px, 8vw, 96px) 16px clamp(56px, 9vw, 104px) !important;
  background: radial-gradient(900px 420px at 85% -20%, rgba(255,255,255,.18), transparent 60%),
              radial-gradient(700px 380px at 5% 110%, rgba(242,183,5,.22), transparent 60%),
              linear-gradient(135deg, #17356a 0%, #2a5caa 55%, #3f78cf 100%) !important; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 38px; background: #f6f8fc; clip-path: ellipse(60% 100% at 50% 100%); }
.hero-title { font-weight: 800 !important; font-size: clamp(1.9rem, 5vw, 3.2rem) !important; line-height: 1.08; text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.hero-subtitle { font-size: clamp(1rem, 2.2vw, 1.25rem) !important; opacity: .95; max-width: 640px; margin-left: auto; margin-right: auto; }
.hero-confianza span { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 6px 14px; backdrop-filter: blur(4px); }

/* ── Títulos de sección ── */
main h2, .container > h2, section > .container > h2, .seccion-titulo { position: relative; text-align: center; font-weight: 800; color: var(--az-osc); margin-bottom: 28px !important; }
main h2::after, .container > h2::after, section > .container > h2::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 4px; margin: 10px auto 0; background: linear-gradient(90deg, var(--az), var(--am)); }

/* ── Tarjetas de producto ── */
.col-productos { margin-bottom: 4px; }
.producto-card { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--linea) !important; border-radius: var(--radio) !important; overflow: hidden; box-shadow: var(--sombra-1) !important; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s !important; }
.producto-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-2) !important; }
.producto-imagen { position: relative; background: #fff; aspect-ratio: 1 / 1; overflow: hidden; display: grid; place-items: center; }
.producto-imagen a { display: block; width: 100%; height: 100%; }
.producto-imagen img { width: 100%; height: 100%; object-fit: contain; padding: 10px; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.producto-card:hover .producto-imagen img { transform: scale(1.06); }
.badge-destacado { position: absolute; z-index: 2; top: 12px; left: 12px; background: linear-gradient(135deg, #f2b705, #ffcf3f) !important; color: #1b2a41 !important; font-weight: 800; border-radius: 999px; padding: 5px 12px; font-size: .78rem; box-shadow: 0 6px 14px -6px rgba(242,183,5,.9); }
.producto-info { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px 16px 16px !important; }
.producto-titulo { font-size: 1rem !important; font-weight: 700 !important; line-height: 1.3; margin: 0; min-height: 2.6em; }
.producto-titulo a { color: var(--tinta) !important; text-decoration: none; } .producto-titulo a:hover { color: var(--az) !important; }
.producto-precio { font-size: 1.45rem !important; font-weight: 800 !important; color: var(--az) !important; margin-top: auto !important; }
.producto-info .btn-agregar-carrito { width: 100%; border: 0; border-radius: 12px; background: linear-gradient(180deg, #3a70c6, var(--az)); color: #fff; font-weight: 700; padding: 11px 14px; box-shadow: 0 8px 16px -10px rgba(42,92,170,.9); }
.producto-info .btn-agregar-carrito:hover { background: linear-gradient(180deg, #2f66bb, var(--az-osc)); transform: translateY(-1px); }
.producto-info .btn-agregar-carrito:active { transform: translateY(1px); }

/* ── Avisos, paginación, botones ── */
.alert-info { background: var(--az-claro); border: 0; border-left: 4px solid var(--az); color: var(--az-osc); border-radius: 12px; font-weight: 600; }
.page-link { border: 0; margin: 0 3px; border-radius: 10px !important; color: var(--az-osc); font-weight: 700; min-width: 42px; text-align: center; }
.page-item.active .page-link { background: var(--az); color: #fff; box-shadow: 0 8px 16px -8px rgba(42,92,170,.8); }
.page-link:hover { background: var(--az-claro); }
.btn-primary { background: var(--az); border-color: var(--az); } .btn-primary:hover { background: var(--az-osc); border-color: var(--az-osc); }

/* ── Páginas internas: tarjetas, formularios ── */
.card { border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra-1); }
.form-control, .form-select { border-radius: 12px; border: 1.5px solid #d6deec; padding: .7rem .9rem; }
.form-control:focus, .form-select:focus { border-color: var(--az); box-shadow: 0 0 0 4px rgba(42,92,170,.14); }
.login-container, .registro-container, .auth-card, .login-card { margin-top: 28px; }
.login-card, .registro-card, .auth-card { border-radius: 22px !important; box-shadow: var(--sombra-2) !important; border: 1px solid var(--linea) !important; }

/* ── Botón flotante de WhatsApp ── */
.whatsapp-flotante-btn { box-shadow: 0 10px 24px -8px rgba(11,122,62,.8); position: relative; }
.whatsapp-flotante-btn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(11,122,62,.45); animation: lcPulso 2.4s ease-out infinite; z-index: -1; }
@keyframes lcPulso { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }

/* ── Pie de página ── */
.footer { background: linear-gradient(170deg, #12295a 0%, #1c3f7a 60%, #24508f 100%) !important; color: #e8eefb; position: relative; margin-top: 56px; }
.footer::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 30px; background: #f6f8fc; clip-path: ellipse(60% 100% at 50% 0); }
.footer h3, .footer h4, .footer .footer-titulo { color: #fff; font-weight: 800; }
.footer a { color: #dbe6fb; text-decoration: none; transition: color .2s, padding .2s; } .footer a:hover { color: #ffd24a; }
.footer-link-legal { opacity: .95; }

/* ── Detalles móviles ── */
@media (max-width: 576px) {
  .producto-info { padding: 10px 12px 12px !important; }
  .producto-titulo { font-size: .92rem !important; }
  .producto-precio { font-size: 1.2rem !important; }
  .hero-ctas .btn-cta, .hero-ctas .btn-cta-sec { width: 100%; }
}

/* Fila de ofertas destacadas: centrada aunque haya 1-3 tarjetas */
.row:has(> .col-productos .producto-card.destacado) { justify-content: center; }