/* =========================================================
   La Chopin · «Tu barrio, tu mercado» (dueño, 24 oct 2026, sobre el prototipo
   que probó: «el diseño azul ese me encanta con el amarillo, ese es el diseño
   nuestro»). Azul noche, amarillo y crema; letra gruesa en los títulos.
   Va DESPUÉS de lachopincuba.css, del <style> de store/base.html y de
   tienda.css, y les gana. La mecánica de la tienda no cambia.
   ========================================================= */
:root{
  --mc-noche:#13234F; --mc-noche2:#1D3270; --mc-amarillo:#F6B800; --mc-amarillo2:#FFC929; --mc-amarillo-s:#FFF2C4;
  --mc-crema:#FBF8F1; --mc-linea:#ECE7DB; --mc-gris:#5E6681; --mc-curva:cubic-bezier(.19,.91,.38,1);
  --mc-titulo:'Archivo','Manrope',system-ui,sans-serif; --mc-letra:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* lo de antes, con los colores de la marca */
  --t2-noche:#13234F; --t2-banner:#13234F; --t2-banner2:#13234F; --t2-barra:#FFFFFF; --t2-fondo:#FBF8F1;
  --t2-oro:#F6B800; --t2-oro2:#FFC929; --t2-enlace:#1D3270; --t2-gris:#5E6681;
  --lc-navy:#13234F; --lc-red:#13234F; --lc-red-dark:#0E1A3D; --lc-gold:#F6B800; --lc-bg:#FBF8F1; --lc-border:#ECE7DB;
}
body{font-family:var(--mc-letra);background:var(--mc-crema);color:var(--mc-noche)}
input,select,textarea,button{font-family:inherit}
body:has(.lc-portada){background:var(--mc-crema)}

/* ── Franja de aviso ── */
.lc-promise{background:var(--mc-noche);color:#fff;font-weight:700}
.lc-promise .bi{color:var(--mc-amarillo)}

/* ── Cabecera blanca con el logo ── */
.lc-hd{background:#fff;box-shadow:0 1px 0 var(--mc-linea)}
.lc-hd-marca{padding:2px 4px;border:0}
.lc-hd-marca:hover{border-color:transparent}
.lc-hd-marca img{height:44px;width:auto;background:none;padding:0;border-radius:0;display:block}
.lc-hd-entrega{color:var(--mc-noche)}
.lc-hd-entrega small{color:var(--mc-gris)}
.lc-hd-entrega i{color:var(--mc-amarillo)}
.lc-hd-search{background:var(--mc-crema);border-radius:999px;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .2s var(--mc-curva)}
.lc-hd-search:focus-within{box-shadow:inset 0 0 0 2px var(--mc-amarillo)}
.lc-hd-sec{background:transparent;border-right:1px solid var(--mc-linea);border-radius:999px 0 0 999px;color:var(--mc-noche)}
.lc-hd-sec:hover{background:var(--mc-amarillo-s)}
.lc-hd-search input{background:transparent}
.lc-hd-search input:focus{background:transparent}
.lc-hd-go{border-radius:999px;margin:4px;flex:0 0 46px;background:var(--mc-amarillo);color:var(--mc-noche)}
.lc-hd-go:hover{background:var(--mc-amarillo2)}
.lc-hd-cart{background:var(--mc-noche);color:#fff;border-radius:999px;padding:8px 16px;align-items:center;border:0;transition:transform .12s var(--mc-curva),background .2s}
.lc-hd-cart:hover{background:var(--mc-noche2);color:#fff;border-color:transparent}
.lc-hd-cart:active{transform:scale(.96)}
.lc-hd-cart-ic{font-size:22px}
.lc-hd-cart .lc-cart-badge{background:var(--mc-amarillo);color:var(--mc-noche);border:2px solid var(--mc-noche);font-weight:900}
.lc-cart-badge.pop{animation:mc-salta .45s var(--mc-curva)}
@keyframes mc-salta{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}

/* ── Barra de departamentos: blanca, el activo en amarillo ── */
.lc-deptnav{background:#fff;border-top:1px solid var(--mc-linea)}
.lc-deptnav a{color:var(--mc-noche);font-weight:700;border-bottom:3px solid transparent;transition:color .2s,border-color .2s}
.lc-deptnav a:hover{color:var(--mc-noche2);border-bottom-color:var(--mc-amarillo-s)}
.lc-deptnav a.active{color:var(--mc-noche);border-bottom-color:var(--mc-amarillo)}
.lc-deptnav-fl{color:var(--mc-noche)}
.lc-deptnav-fl.izq{background:linear-gradient(90deg,#fff 55%,rgba(255,255,255,0))}
.lc-deptnav-fl.der{background:linear-gradient(270deg,#fff 55%,rgba(255,255,255,0))}
.lc-deptnav-fl:hover{color:var(--mc-amarillo)}

/* ── Portada: azul noche con la bolsa amarilla ── */
.lc-banner{background:var(--mc-noche);overflow:hidden}
.lc-banner::after{content:"";position:absolute;right:-60px;top:24px;width:360px;height:360px;opacity:.95;pointer-events:none;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M58 70 v-16 a30 30 0 0 1 60 0 v16' fill='none' stroke='%23F6B800' stroke-width='16' stroke-linecap='round'/%3E%3Cpath d='M160 90 H84 a30 30 0 0 0 -30 30 v26 a30 30 0 0 0 30 30 H160' fill='none' stroke='%23F6B800' stroke-width='40'/%3E%3C/svg%3E");
  animation:mc-flota 6s ease-in-out infinite}
@keyframes mc-flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.lc-banner:has(.lc-slide-prod:not([hidden]))::after{opacity:.18}
.lc-banner-in{position:relative;z-index:1}
.lc-slide-eti{color:var(--mc-amarillo);letter-spacing:.16em}
.lc-slide-tit{font-family:var(--mc-titulo);font-weight:900;letter-spacing:-.01em;line-height:1}
.lc-slide-sub{color:rgba(255,255,255,.82)}
.lc-slide-btn{background:var(--mc-amarillo);color:var(--mc-noche);font-weight:900;box-shadow:0 10px 24px -12px rgba(246,184,0,.8);transition:transform .12s var(--mc-curva),background .2s}
.lc-slide-btn:hover{background:var(--mc-amarillo2);color:var(--mc-noche);transform:translateY(-1px)}
.lc-banner-puntos button[aria-current="true"]{background:var(--mc-amarillo)}
.lc-hoy-card{border-radius:18px}

/* ── Paneles y títulos ── */
.lc-portada{background:var(--mc-crema)}
.lc-panel{border-radius:24px;box-shadow:0 1px 0 var(--mc-linea)}
.lc-panel-tit{font-family:var(--mc-titulo);font-weight:900;color:var(--mc-noche);letter-spacing:-.01em}
.lc-panel-link{color:var(--mc-noche2);font-weight:800}
.lc-panel-link:hover{color:var(--mc-noche);text-decoration:underline;text-decoration-color:var(--mc-amarillo);text-decoration-thickness:3px}
.lc-cuatro-it:hover .lc-cuatro-nom{color:var(--mc-noche2)}
.lc-foto{border-radius:14px;background:var(--mc-crema)}

/* ── Tarjeta de producto: redonda, foto sobre crema, botón azul ── */
.lc-product-card{border-radius:20px;box-shadow:0 1px 0 var(--mc-linea);transition:transform .18s var(--mc-curva),box-shadow .2s;animation:mc-aparece .35s var(--mc-curva) both}
@keyframes mc-aparece{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:none}}
.lc-product-card:hover{transform:translateY(-2px);box-shadow:0 16px 30px -18px rgba(19,35,79,.45)}
.lc-card-img-wrap{padding:8px 8px 0}
.lc-product-img{background:var(--mc-crema);border-radius:14px;overflow:hidden}
.lc-product-img img{transition:transform .3s var(--mc-curva)}
.lc-product-card:hover .lc-product-img img{transform:scale(1.04)}
.lc-product-name{font-weight:700;color:var(--mc-noche)}
.lc-price-usd{font-family:var(--mc-titulo);font-weight:900;color:var(--mc-noche)}
.lc-price-cup{color:var(--mc-gris);font-weight:700}
.lc-add-btn.lc-add,.lc-product-footer .lc-add-btn{background:var(--mc-noche);color:#fff;border-radius:999px;font-weight:800;transition:background .2s,transform .12s var(--mc-curva)}
.lc-add-btn.lc-add:hover,.lc-add-btn:hover:not(:disabled){background:var(--mc-noche2);color:#fff}
.lc-add-btn:active{transform:scale(.97)}
.lc-stepper{background:var(--mc-amarillo-s);border-radius:999px;overflow:hidden;animation:mc-abre .25s var(--mc-curva)}
@keyframes mc-abre{from{transform:scale(.9);opacity:.5}to{transform:none;opacity:1}}
.lc-stepper .lc-st-btn{background:var(--mc-amarillo);color:var(--mc-noche);font-weight:900}
.lc-stepper .lc-st-btn:hover{background:var(--mc-amarillo2)}
.lc-stepper .lc-st-qty{color:var(--mc-noche);font-weight:900}
.lc-stepper.sm{background:var(--mc-amarillo-s)}
.lc-stepper.sm .lc-st-btn{background:var(--mc-amarillo);color:var(--mc-noche)}
.lc-tag-oferta{background:var(--mc-amarillo);color:var(--mc-noche)}
.lc-tag-libreta{background:var(--mc-noche);color:var(--mc-amarillo)}
.lc-llega{color:#1F6B4A}

/* ── Departamentos ── */
.lc-dept-tile,.lc-portada .lc-dept-tile{border:0;border-radius:20px;background:#fff;box-shadow:0 1px 0 var(--mc-linea);transition:transform .18s var(--mc-curva),box-shadow .2s}
.lc-dept-tile:hover{transform:translateY(-3px);box-shadow:0 14px 26px -16px rgba(19,35,79,.45)}
.lc-dept-tile-img{border-radius:14px;margin:8px 8px 0;width:auto;background:var(--mc-crema)}
.lc-dept-tile-name{font-weight:800;color:var(--mc-noche)}

/* ── Botones y filtros ── */
.lc-btn-primary,.lc-cart-btn{background:var(--mc-amarillo);color:var(--mc-noche);border-color:var(--mc-amarillo);border-radius:999px;font-weight:900}
.lc-btn-primary:hover,.lc-cart-btn:hover{background:var(--mc-amarillo2);color:var(--mc-noche)}
.lc-filtro.on{background:var(--mc-noche)}
.lc-nav-link:hover,.lc-nav-link.active,.lc-cat-card:hover,.lc-cat-card.active{background:var(--mc-amarillo-s)}

/* ── Carrito lateral ── */
.lc-drawer{background:var(--mc-crema);transition:transform .32s var(--mc-curva)}
.lc-dw-head{background:#fff;font-family:var(--mc-titulo)}
.lc-dw-item{background:#fff;border-radius:16px;animation:mc-aparece .25s var(--mc-curva) both}
.lc-dw-bar-fill{background:var(--mc-amarillo)}

/* ── La bolita que vuela al carrito ── */
.mc-vuela{position:fixed;z-index:400;width:16px;height:16px;border-radius:50%;background:var(--mc-amarillo);box-shadow:0 0 0 3px var(--mc-noche);pointer-events:none}

/* ── Pie ── */
.lc-footer,body:has(.lc-portada) .lc-footer{background:var(--mc-noche);color:rgba(255,255,255,.8)}
.lc-arriba{background:var(--mc-noche2)}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--mc-amarillo);outline-offset:2px}

@media (max-width:900px){.lc-banner::after{width:220px;height:220px;right:-50px;top:auto;bottom:210px;opacity:.25}}
@media (max-width:640px){.lc-banner::after{width:150px;height:150px;right:-40px;top:12px;bottom:auto;opacity:.14}}
@media (max-width:640px){.lc-hd-marca img{height:36px}.lc-hd-cart{padding:8px 12px}}
@media (prefers-reduced-motion:reduce){
  .lc-banner::after,.lc-product-card,.lc-stepper,.lc-dw-item,.lc-cart-badge.pop{animation:none!important}
  .lc-product-card,.lc-product-img img,.lc-dept-tile,.lc-drawer{transition:none!important}
}