/* Catálogo público · mobile-first */
*{box-sizing:border-box}
:root{
  --pri:#c2410c; --sec:#1c1917; --bg:#f6f1ea;
  --action:#9f350a;
  --accent-text:#9f350a;
  --on-action:#fff;
  --on-sec:#fff;
  --wa:#0f7a41;
  --paper:#f4ede2;
  --paper-2:#efe6d8;
  --card:#fffdf9;
  --ink:#211b16;
  --ink-soft:#65594c;
  --line:#e4d8c6;
  --line-soft:#ede3d5;
  --ok:#397239;
  --err:#b3261e;

  --serif:"Iowan Old Style","Palatino Linotype","URW Palladio L",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radio:10px;
  --sombra:0 2px 9px rgba(60,40,20,.09);
  --max:1120px;
}
.tipografia-moderna{
  --serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.tipografia-amable{
  --serif:"Trebuchet MS","Segoe UI",Arial,sans-serif;
  --sans:"Trebuchet MS","Segoe UI",Arial,sans-serif;
}
.bordes-rectos{--radio:3px}
.bordes-redondeados{--radio:18px;--sombra:0 4px 14px rgba(60,40,20,.10)}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:16px}
a{color:var(--accent-text)}
.hide{display:none!important}
:where(a,button,input,textarea,select):focus-visible{outline:3px solid var(--accent-text);outline-offset:2px}

#app{max-width:var(--max);min-height:100vh;margin:0 auto;padding-bottom:104px;background:var(--paper)}

/* ---------- Encabezado ---------- */
.topbar{
  background:var(--card);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px;border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:13px;min-width:0}
a.brand{color:inherit;text-decoration:none;cursor:pointer}
a.brand:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px;border-radius:8px}
@media(hover:hover){a.brand:hover .brand-nombre{color:var(--accent-text)}}
.brand-logo{width:52px;height:48px;border-radius:10px;object-fit:contain;flex:none;border:1px solid var(--line);padding:3px;background:#fff}
.brand-ph{padding:0;background:var(--sec);color:var(--on-sec);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:23px;font-family:var(--serif)}
.brand-info{min-width:0}
.brand-nombre{font-family:var(--serif);font-size:23px;font-weight:700;letter-spacing:-.01em;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1}
.brand-sub{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-soft);margin-top:3px}
.estado{display:inline-flex;align-items:center;gap:6px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:10.5px}
.estado .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.estado.abierto{color:var(--ok)}
.estado.cerrado{color:var(--err)}
.horario{position:relative;padding-left:11px}
.horario:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:3px;border-radius:50%;background:var(--ink-soft);opacity:.5}
.icon-btn{width:42px;height:42px;background:transparent;border:1px solid var(--line);color:var(--ink-soft);padding:0;border-radius:10px;display:flex;align-items:center;justify-content:center}
.icon-btn:active{background:var(--paper-2)}

.aviso-cerrado{background:#fbeee0;color:#8a4b16;border-bottom:1px solid #ecd6bb;padding:11px 18px;font-size:13px;text-align:center;font-weight:500}

/* ---------- Portada / banner ---------- */
.banner{margin:0;border:0;border-bottom:1px solid var(--line);overflow:hidden;background:var(--sec) center/cover no-repeat;color:var(--on-sec);min-height:184px;display:flex;align-items:flex-end}
.banner-con-portada{color:#fff}
.banner-inner{position:relative;z-index:1;padding:27px 20px 24px;max-width:560px}
.banner-inner h2{font-family:var(--serif);margin:0 0 6px;font-size:29px;font-weight:700;line-height:1.05;text-shadow:0 1px 10px rgba(0,0,0,.34)}
.banner-inner p{margin:0;font-size:14.5px;line-height:1.45;max-width:38ch;text-shadow:0 1px 7px rgba(0,0,0,.42)}

/* ---------- Barra pegajosa (buscador + categorías) ---------- */
.subnav{position:sticky;top:0;z-index:26;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 4px 12px -12px rgba(33,27,22,.5)}
.subnav-tools{display:flex;align-items:center;min-width:0}

/* ---------- Buscador ---------- */
.searchbar{position:relative;background:var(--paper);display:flex;align-items:center;gap:8px;flex:1;min-width:0;margin:0;padding:13px 12px 8px 16px;color:var(--ink-soft)}
.searchbar input{flex:1;min-width:0;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:12px 38px 12px 40px;outline:none;color:var(--ink)}
.searchbar input::placeholder,.form-group input::placeholder,.form-group textarea::placeholder,.pd-aclaracion textarea::placeholder{color:var(--ink-soft);opacity:1}
.searchbar input:focus{border-color:var(--pri);box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 16%,transparent)}
.searchbar svg{position:absolute;margin-left:14px;pointer-events:none}
#buscar-limpiar{position:absolute;right:21px;background:transparent;border:none;color:var(--ink-soft);font-size:15px}
.vista-selector{display:flex;flex:none;align-items:center;gap:2px;margin:13px 16px 8px 0;padding:3px;border:1px solid var(--line);border-radius:11px;background:var(--card)}
.vista-btn{height:44px;border:0;border-radius:7px;background:transparent;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;font-size:12.5px;font-weight:700;white-space:nowrap}
.vista-btn:hover{color:var(--ink);background:var(--paper-2)}
.vista-btn.activo{color:var(--on-action);background:var(--action);box-shadow:0 1px 4px color-mix(in srgb,var(--pri) 28%,transparent)}

/* ---------- Categorías (estilo pestañas de carta) ---------- */
.catnav{position:relative;background:var(--paper);display:flex;gap:25px;overflow-x:auto;padding:6px 16px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.catnav::-webkit-scrollbar{display:none}
.catnav-chip{position:relative;white-space:nowrap;border:none;background:transparent;color:var(--ink-soft);padding:6px 2px 12px;font-size:14.5px;font-weight:600;letter-spacing:.01em}
.catnav-chip .cnt{color:var(--ink-soft);font-size:11px;margin-left:2px;font-variant-numeric:tabular-nums}
.catnav-chip:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--pri);transform:scaleX(0);transition:transform .2s ease}
.catnav-chip.activo{color:var(--ink)}
.catnav-chip.activo:after{transform:scaleX(1)}

/* ---------- Secciones y grilla ---------- */
.contenido{padding:8px 16px 0}
.seccion{margin-top:26px;scroll-margin-top:118px}
.seccion-titulo{display:flex;align-items:center;gap:14px;font-family:var(--serif);font-size:21px;font-weight:700;letter-spacing:-.01em;margin:0 0 15px}
.seccion-titulo:after{content:"";flex:1;height:1px;background:var(--line)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px}
.media-horizontal .catalog-grid .card-media{aspect-ratio:4/3}
.media-vertical .catalog-grid .card-media{aspect-ratio:4/5}

/* Destacados */
.rail{display:flex;gap:14px;overflow-x:auto;padding:2px 16px 10px;margin:0 -16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding:16px}
.rail::-webkit-scrollbar{display:none}
.rail .card{flex:0 0 76%;max-width:300px;flex-direction:column;scroll-snap-align:start}
@media(min-width:560px){.rail .card{flex-basis:300px}}

/* ---------- Tarjeta de producto ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radio);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sombra);transition:transform .14s ease,box-shadow .14s ease}
.card:active{transform:scale(.98)}
.card-nd{opacity:1}
.card-nd .card-media img,.card-nd .card-ph{filter:saturate(.55);opacity:.62}
.card-media{position:relative;aspect-ratio:1/1;background:var(--paper-2);cursor:pointer;overflow:hidden}
.rail .card-media{aspect-ratio:4/3}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
@media(hover:hover){.card:hover{box-shadow:0 5px 16px rgba(60,40,20,.12)}.card:hover .card-media img{transform:scale(1.025)}}
.card-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:48px;font-weight:700;color:color-mix(in srgb,var(--c,#94a3b8) 42%,var(--ink));background:color-mix(in srgb,var(--c,#94a3b8) 10%,var(--paper-2))}
.badges{position:absolute;top:10px;left:10px;display:flex;flex-wrap:wrap;gap:5px;max-width:82%}
.badge{font-size:9.5px;font-weight:800;padding:4px 7px;border-radius:5px;background:rgba(33,27,22,.86);color:#fff;text-transform:uppercase;letter-spacing:.075em}
.badge-promo,.badge-mas_vendido{background:var(--ink);box-shadow:inset 3px 0 0 var(--pri)}
.chip-nd{position:absolute;bottom:10px;left:10px;background:rgba(33,27,22,.88);color:#fff;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 8px;border-radius:5px}
.chip-retiro{position:absolute;top:38px;left:10px;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;font-size:10px;font-weight:800;letter-spacing:.02em;padding:4px 8px;border-radius:5px;box-shadow:0 1px 6px rgba(154,52,18,.10);z-index:1}
.vista-lista .catalog-grid .chip-retiro,.grid.forzar-lista .chip-retiro{top:30px;left:7px;font-size:9px;padding:3px 6px}
.card-body{padding:12px 13px 13px;display:flex;flex-direction:column;flex:1;gap:5px}
.card-nombre{font-family:var(--sans);font-size:15px;font-weight:720;letter-spacing:-.01em;margin:0;cursor:pointer;line-height:1.25}
.card-desc{font-size:12.5px;color:var(--ink-soft);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{margin-top:auto;padding-top:6px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.card-precio{display:flex;flex-direction:column;line-height:1.05}
.precio{font-family:var(--sans);font-size:16.5px;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.precio-viejo{font-size:11.5px;color:var(--ink-soft);text-decoration:line-through}
.btn-add{flex:none;width:39px;height:39px;border-radius:9px;border:none;background:var(--action);color:var(--on-action);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px color-mix(in srgb,var(--pri) 35%,transparent);transition:transform .12s ease,filter .12s ease}
.btn-add:active{transform:scale(.9)}
.btn-add:disabled{background:var(--line);color:var(--ink-soft);box-shadow:none;font-size:10px;width:auto;padding:0 9px;height:34px;border-radius:8px;font-weight:700;text-transform:uppercase;letter-spacing:.035em}

/* Vista alternativa: un producto por fila, sin alterar la separacion por rubros. */
.vista-lista .catalog-grid{display:flex;flex-direction:column;gap:10px}
.vista-lista .catalog-grid .card{display:grid;grid-template-columns:108px minmax(0,1fr);min-height:108px}
.vista-lista .catalog-grid .card-media{aspect-ratio:auto;min-height:108px;height:100%}
.vista-lista .catalog-grid .card-body{min-width:0;padding:12px 13px}
.vista-lista .catalog-grid .card-nombre{font-size:16px}
.vista-lista .catalog-grid .card-desc{-webkit-line-clamp:2}
.vista-lista .catalog-grid .badges{top:7px;left:7px;gap:3px;max-width:90%}
.vista-lista .catalog-grid .badge{font-size:8px;padding:3px 5px}
.vista-lista .catalog-grid .chip-nd{bottom:7px;left:7px;font-size:8.5px;padding:3px 6px}

/* ---------- Estados vacíos ---------- */
.vacio,.sin-resultados{text-align:center;padding:56px 22px;color:var(--ink-soft)}
.vacio-ico{width:46px;height:46px;margin:0 auto 8px;color:var(--ink-soft);opacity:.8}
.vacio-ico svg{width:100%;height:100%;display:block}
.vacio h3,.sin-resultados h3{font-family:var(--serif);margin:0 0 4px;color:var(--ink);font-size:20px}
.pie{padding:34px 16px 16px;text-align:center;color:var(--ink-soft);font-size:12.5px}
.pie-mini{margin-top:3px;letter-spacing:.02em}

/* ---------- Carrito flotante ---------- */
.fab-cart{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:35;
  display:flex;align-items:center;gap:12px;background:var(--sec);color:var(--on-sec);border:none;
  border-radius:12px;padding:13px 13px 13px 18px;font-weight:650;font-size:14.5px;
  box-shadow:0 12px 28px -10px rgba(28,20,14,.62);max-width:calc(100vw - 32px)}
.fab-count{background:var(--on-sec);color:var(--sec);border-radius:5px;min-width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;padding:0 7px}
.fab-total{font-family:var(--sans);font-size:15px;font-weight:750;font-variant-numeric:tabular-nums}
.fab-cta{font-size:13px;white-space:nowrap;border-left:1px solid color-mix(in srgb,currentColor 30%,transparent);padding-left:12px}

/* ---------- Flotantes: ir arriba + WhatsApp ---------- */
.flotante{position:fixed;bottom:18px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:34;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;box-shadow:0 8px 20px rgba(28,20,14,.18),0 2px 6px rgba(28,20,14,.10);cursor:pointer;transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .16s ease,opacity .18s ease,background-color .16s ease;text-decoration:none}
.flotante svg{width:22px;height:22px;display:block}
.flotante-arriba{left:16px;background:var(--card);color:var(--ink);border:1px solid var(--line)}
.flotante-wa{right:16px;background:#25D366;color:#fff;border:1px solid #1fb256}
.flotante-wa svg{width:24px;height:24px}
@media(hover:hover){
  .flotante-arriba:hover{background:var(--paper-2);border-color:color-mix(in srgb,var(--pri) 26%,var(--line));transform:translateY(-2px);box-shadow:0 12px 24px rgba(28,20,14,.16)}
  .flotante-wa:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 12px 24px rgba(37,211,102,.28)}
}
.flotante:active{transform:scale(.96)}
.flotante[hidden]{display:none!important}
/* En el catálogo móvil el dock ocupa el pie, así que suben un poco */
@media(max-width:760px){
  .catalogo-vitrina .flotante{bottom:calc(72px + env(safe-area-inset-bottom))}
  .catalogo-vitrina .flotante-arriba{left:12px}
  .catalogo-vitrina .flotante-wa{right:12px}
}
/* Ir arriba aparece solo al scrollear */
.flotante-arriba{opacity:0;pointer-events:none;transform:translateY(8px)}
.flotante-arriba.visible{opacity:1;pointer-events:auto;transform:none}
@media(prefers-reduced-motion:reduce){.flotante{transition:none!important}}

/* ---------- Overlays / hojas ---------- */
.overlay{position:fixed;inset:0;z-index:60;background:rgba(28,20,14,.58);display:flex;align-items:flex-end;justify-content:center;animation:fade .18s ease}
.overlay[hidden]{display:none!important}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{background:var(--card);width:100%;max-width:620px;border:1px solid var(--line);border-bottom:0;border-radius:16px 16px 0 0;max-height:94vh;max-height:94dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative;animation:up .24s cubic-bezier(.22,1,.36,1)}
@keyframes up{from{transform:translateY(30px)}to{transform:translateY(0)}}
.sheet-full{max-height:100vh;max-height:100dvh;min-height:82vh}
.sheet-head{position:sticky;top:0;background:var(--card);display:flex;align-items:center;gap:10px;padding:18px 20px;border-bottom:1px solid var(--line);z-index:2}
.sheet-head h2{font-family:var(--serif);margin:0;font-size:20px;font-weight:700;flex:1}
.sheet-cerrar{border:1px solid var(--line);background:var(--card);width:38px;height:38px;border-radius:9px;font-size:16px;color:var(--ink-soft);flex:none;display:flex;align-items:center;justify-content:center}
#detalle-sheet>.sheet-cerrar{position:absolute;top:14px;right:14px;z-index:4;background:rgba(255,253,249,.94);box-shadow:0 3px 10px rgba(28,20,14,.16)}

/* ---------- Detalle de producto ---------- */
.skeleton-detalle{height:340px;margin:0;background:linear-gradient(90deg,var(--paper-2),var(--paper),var(--paper-2));background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
.pd-hero{position:relative;aspect-ratio:16/11;background:var(--paper-2);overflow:hidden}
.pd-hero img{width:100%;height:100%;object-fit:cover}
.pd-hero .pd-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:76px;font-weight:700;color:color-mix(in srgb,var(--pd-cat,#94a3b8) 46%,var(--ink));background:color-mix(in srgb,var(--pd-cat,#94a3b8) 14%,var(--paper-2))}
.pd-body{padding:20px 20px 8px}
.pd-nombre{font-family:var(--serif);font-size:26px;font-weight:700;letter-spacing:-.01em;margin:0 0 6px;line-height:1.1}
.pd-precio{font-family:var(--sans);font-size:20px;font-weight:760;color:var(--accent-text);margin:0 0 12px;font-variant-numeric:tabular-nums}
.pd-precio .viejo{color:var(--ink-soft);text-decoration:line-through;font-size:14px;font-weight:600;margin-left:9px}
.pd-desc{color:var(--ink-soft);font-size:14.5px;margin:0 0 16px}
.grupo{border-top:1px solid var(--line);padding:15px 0}
.grupo-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.grupo-titulo{font-family:var(--serif);font-weight:700;font-size:16px}
.grupo-req{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:3px 7px;border-radius:5px}
.grupo-req.obl{background:color-mix(in srgb,var(--accent-text) 12%,transparent);color:var(--accent-text)}
.grupo-req.opc{background:var(--paper-2);color:var(--ink-soft)}
.opcion{display:flex;align-items:center;gap:12px;padding:11px 2px;cursor:pointer;border-bottom:1px solid var(--line-soft)}
.opcion:last-child{border-bottom:none}
.opcion input{width:21px;height:21px;accent-color:var(--pri);flex:none}
.opcion .op-nombre{flex:1;font-size:15px}
.opcion .op-precio{color:var(--ink-soft);font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.pd-aclaracion label{display:block;font-family:var(--serif);font-weight:700;font-size:15px;margin:10px 0 7px}
.pd-aclaracion textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:11px;resize:vertical;background:var(--paper)}
.pd-footer{position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--line);padding:13px 18px calc(13px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px}
.qty{display:flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:10px;padding:4px}
.qty-btn{width:36px;height:36px;border:none;background:var(--paper-2);border-radius:7px;font-size:20px;font-weight:700;color:var(--ink);display:flex;align-items:center;justify-content:center}
.qty-val{min-width:26px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.btn-confirmar{flex:1;border:none;background:var(--action);color:var(--on-action);border-radius:9px;padding:15px;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-confirmar .sub{font-family:var(--sans);font-variant-numeric:tabular-nums}

/* ---------- Carrito (cajón) ---------- */
.carrito-items{padding:6px 20px}
.cart-item{display:flex;gap:12px;padding:15px 0;border-bottom:1px solid var(--line-soft)}
.cart-item-main{flex:1;min-width:0}
.cart-item-nombre{font-family:var(--sans);font-weight:720;font-size:15.5px}
.cart-item-extra{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.cart-item-acl{font-size:12.5px;color:var(--ink-soft);font-style:italic;margin-top:2px}
.cart-item-precio{font-family:var(--sans);font-weight:750;white-space:nowrap;font-variant-numeric:tabular-nums}
.cart-item-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.cart-qty{display:flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:9px;padding:2px}
.cart-qty button{width:32px;height:32px;border:none;background:var(--paper-2);border-radius:6px;font-size:18px;font-weight:700}
.cart-del{background:transparent;border:none;color:var(--err);font-size:12.5px;font-weight:600}
.carrito-vacio{text-align:center;padding:48px 20px;color:var(--ink-soft)}
.carrito-foot{position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--line);padding:16px 20px calc(16px + env(safe-area-inset-bottom));display:grid;grid-template-columns:auto 1fr;gap:10px 14px;align-items:center}
.link-vaciar{grid-row:1;background:transparent;border:none;color:var(--err);font-weight:600;justify-self:start;font-size:13.5px}
.carrito-total{grid-row:1;justify-self:end;text-align:right}
.carrito-total span{display:block;font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
.carrito-total strong{font-family:var(--sans);font-size:21px;font-weight:760;font-variant-numeric:tabular-nums}
.btn-primary{grid-column:1/3;border:none;background:var(--action);color:var(--on-action);border-radius:9px;padding:16px;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.btn-primary:disabled{background:var(--line);color:var(--ink-soft)}
.btn-wa{background:var(--wa);color:#fff}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:14px;font-weight:600;width:100%;margin-top:14px}

/* ---------- Checkout ---------- */
.checkout{padding:18px 20px 44px}
.co-tit{font-family:var(--serif);font-size:17px;font-weight:700;margin:22px 0 12px}
.co-resumen{background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:13px 15px;font-size:13.5px}
.co-resumen .cr-linea{display:flex;justify-content:space-between;padding:3px 0}
.form-group{margin-bottom:13px}
.form-group label{display:block;font-weight:600;font-size:13.5px;margin-bottom:6px}
.form-group input,.form-group textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:13px;outline:none;background:var(--paper);color:var(--ink)}
.form-group input:focus,.form-group textarea:focus{border-color:var(--pri);background:var(--card);box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 14%,transparent)}
.opts{display:flex;flex-direction:column;gap:9px}
.radio-card{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:9px;padding:14px 15px;font-weight:600}
.radio-card input{width:21px;height:21px;accent-color:var(--pri)}
.radio-card:has(input:checked){border-color:var(--pri);background:color-mix(in srgb,var(--pri) 6%,transparent)}
.co-cond{margin-top:11px}
.co-cambio{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok);border-radius:8px;padding:11px 13px;font-weight:700;font-size:14px}
.co-errores{background:color-mix(in srgb,var(--err) 8%,transparent);color:var(--err);border:1px solid color-mix(in srgb,var(--err) 25%,transparent);border-radius:8px;padding:12px 14px;font-size:13.5px;margin:14px 0}
.co-errores ul{margin:0;padding-left:18px}
.co-totales{margin:18px 0;border-top:1px dashed var(--line);padding-top:14px}
.co-totales .ct-linea{display:flex;justify-content:space-between;padding:3px 0;font-size:14px}
.co-totales .ct-total{font-family:var(--sans);font-size:20px;font-weight:760;border-top:1px solid var(--line);margin-top:8px;padding-top:9px;font-variant-numeric:tabular-nums}
.co-nota{text-align:center;color:var(--ink-soft);font-size:12px;margin-top:12px}

/* ---------- Pago: transferencia / Mercado Pago ---------- */
.pago-box{margin-top:11px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px 15px}
.pago-tit{font-family:var(--serif);font-size:15.5px;font-weight:700;margin:0 0 10px}
.pago-aviso{color:var(--ink-soft);font-size:13.5px;line-height:1.45}
.pago-fila{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--line-soft)}
.pago-fila:last-child{border-bottom:none}
.pago-fila-info{min-width:0;display:flex;flex-direction:column;gap:1px}
.pago-lbl{font-size:11.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-soft)}
.pago-val{font-size:15px;font-weight:650;color:var(--ink);word-break:break-word;font-variant-numeric:tabular-nums}
.pago-fila-monto{margin-top:2px}
.pago-fila-monto .pago-val{font-family:var(--sans);font-size:18px;font-weight:760;color:var(--accent-text)}
.pago-copy{flex:none;border:1px solid var(--pri);background:transparent;color:var(--accent-text);border-radius:8px;
  padding:9px 14px;font-weight:700;font-size:13px;min-height:40px;cursor:pointer}
.pago-copy:active{background:color-mix(in srgb,var(--pri) 10%,transparent)}
.pago-nota{margin:11px 0 0;color:var(--ink-soft);font-size:12.5px;line-height:1.45}
.pago-mp-monto{margin:0 0 13px;color:var(--ink);font-size:14px;line-height:1.5}
.pago-mp-monto .pago-monto{font-family:var(--sans);font-size:19px;font-weight:760;color:var(--accent-text);font-variant-numeric:tabular-nums}
.btn-mp{background:#009ee3;color:#fff}
/* Declaracion "Ya realicé el pago" + comprobante */
.pago-declara{margin-top:14px;text-align:left}
.pago-declara-tit{font-family:var(--serif);font-size:15.5px;font-weight:700;margin:0 0 10px}
.pago-file{display:inline-flex;align-items:center;gap:0;cursor:pointer}
.pago-file input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.pago-file-btn{display:inline-block;border:1px dashed var(--line);border-radius:9px;padding:12px 14px;
  font-weight:600;font-size:13.5px;color:var(--ink);background:var(--card)}
.pago-file input[type=file]:focus + .pago-file-btn{border-color:var(--pri);box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 14%,transparent)}
.pago-file-name{display:block;margin:8px 0 0;font-size:12.5px;color:var(--ink-soft);word-break:break-word}
.pago-declara-btn{margin-top:14px}
.pago-declarado{display:flex;gap:11px;align-items:flex-start;text-align:left;margin-top:13px;
  background:color-mix(in srgb,var(--ok) 12%,transparent);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);
  border-radius:10px;padding:13px 15px;font-size:13.5px;line-height:1.45;color:var(--ink)}
.pago-declarado em{color:var(--accent-text);font-style:normal;font-weight:700}
.pago-declarado-ico{flex:none;width:26px;height:26px;border-radius:50%;background:var(--ok);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}

/* ---------- Confirmación ---------- */
.confirm{text-align:center;padding:40px 24px 44px}
.confirm-check{width:76px;height:76px;border-radius:50%;background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);font-size:38px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-weight:700}
.confirm h2{font-family:var(--serif);margin:0 0 6px;font-size:26px}
.confirm-num{font-family:var(--sans);font-weight:750;color:var(--accent-text);font-size:16px;margin:0 0 6px;font-variant-numeric:tabular-nums}
.confirm-msg{color:var(--ink-soft);margin:0 0 22px}
.confirm .btn-primary{max-width:360px;margin:0 auto}
.sugeridos{margin:32px 0 10px;text-align:left}
.sugeridos h3{font-family:var(--serif);font-size:17px;margin:0 0 13px}
.sug-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.sug-scroll::-webkit-scrollbar{display:none}
.sug-card{flex:none;width:128px;background:var(--card);border:1px solid var(--line);border-radius:9px;overflow:hidden;text-align:left}
.sug-img{aspect-ratio:1/1;background:color-mix(in srgb,var(--c,#94a3b8) 16%,var(--paper-2));display:flex;align-items:center;justify-content:center;color:color-mix(in srgb,var(--c,#94a3b8) 46%,var(--ink));font-family:var(--serif);font-size:34px;font-weight:700}
.sug-img img{width:100%;height:100%;object-fit:cover}
.sug-nombre{font-size:12.5px;font-weight:700;padding:9px 9px 2px;line-height:1.2}
.sug-precio{font-family:var(--sans);font-size:14px;font-weight:750;color:var(--accent-text);padding:0 9px 9px;font-variant-numeric:tabular-nums}

/* ---------- Información ---------- */
.info-body{padding:18px 20px 36px}
.info-body>p:first-child{font-family:var(--serif);font-size:19px;font-weight:700}
.info-list{list-style:none;padding:0;margin:14px 0}
.info-list li{padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.info-redes{display:flex;gap:12px;margin-top:12px}
.info-redes a{background:var(--paper-2);padding:10px 17px;border-radius:8px;text-decoration:none;font-weight:600}
.muted{color:var(--ink-soft)}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(20px);z-index:90;background:var(--sec);color:var(--on-sec);padding:13px 20px;border-radius:9px;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:all .25s ease;max-width:90%;text-align:center;box-shadow:0 10px 26px -10px rgba(0,0,0,.5)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--err);color:#fff}
.toast.ok{background:var(--wa);color:#fff}

/* ---------- Escritorio / tablet ---------- */
@media(min-width:768px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
  .vista-lista .catalog-grid .card{grid-template-columns:140px minmax(0,1fr);min-height:132px}
  .vista-lista .catalog-grid .card-media{min-height:132px}
  .banner{min-height:230px}
  .banner-inner h2{font-size:34px}
  .searchbar{padding-top:16px}
  .sheet{border-radius:20px;margin:auto}
  .overlay{align-items:center;padding:22px}
  .sheet-full{max-height:92vh;min-height:auto}
  .brand-nombre{font-size:26px}
  #app{box-shadow:0 0 0 1px color-mix(in srgb,var(--line) 60%,transparent)}
}

@media(min-width:1024px){
  .rail{scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding-bottom:12px}
  .rail::-webkit-scrollbar{display:block;height:5px}
  .rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
}

@media(hover:hover) and (pointer:fine){
  .mouse-drag-scroll{cursor:grab;overscroll-behavior-inline:contain}
  .mouse-drag-scroll .card,.mouse-drag-scroll .card-media,.mouse-drag-scroll .card-nombre,.mouse-drag-scroll .sug-card{cursor:grab}
  .mouse-drag-scroll img{-webkit-user-drag:none}
  .mouse-drag-scroll.is-dragging{scroll-snap-type:none}
  .mouse-drag-scroll.is-dragging,.mouse-drag-scroll.is-dragging *{cursor:grabbing!important;user-select:none!important}
}

@media(max-width:380px){
  .contenido{padding-left:12px;padding-right:12px}
  .rail{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px;scroll-padding:12px}
  .grid{gap:11px}
  .card-body{padding:11px}
  .vista-lista .catalog-grid .card{grid-template-columns:94px minmax(0,1fr);min-height:102px}
  .vista-lista .catalog-grid .card-media{min-height:102px}
}

@media(max-width:560px){
  .vista-selector{margin-right:12px}
  .vista-btn{width:44px;padding:0}
  .vista-btn span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ===================================================================
   Tienda configurable · disposición, secciones y cuentas de cliente
   Bloque agregado al final: pisa a propósito los valores de arriba
   cuando la configuración lo pide, sin tocar las reglas originales.
   =================================================================== */

/* --- Ancho del contenido --- */
.ancho-1320{--max:1320px}
.ancho-full{--max:100%}

/* --- Densidad y tamaño de foto: mueven el ancho mínimo de columna --- */
:root{--col-min:158px}
.img-grande{--col-min:196px}
.img-media{--col-min:158px}
.img-chica{--col-min:136px}
.dens-compacta{--col-min:132px}
.dens-compacta.img-grande{--col-min:170px}
.grid{grid-template-columns:repeat(auto-fill,minmax(var(--col-min),1fr))}
.dens-compacta .grid{gap:10px}
.dens-compacta .card-body{padding:9px 10px 10px;gap:3px}
.dens-compacta .card-nombre{font-size:14px}

/* Cantidad fija de productos por fila (la elige el comercio). */
.cols-fijas .catalog-grid{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}

/* Fotos chicas o sin foto. */
.img-chica .catalog-grid .card-media{aspect-ratio:4/3}
.card-sin-media .card-body{padding-top:12px}
.badges-inline{position:static;display:flex;flex-wrap:wrap;gap:4px;margin-bottom:2px}

/* --- Listado forzado por sección (independiente del selector del cliente) --- */
.grid.forzar-lista{display:flex;flex-direction:column;gap:10px}
.grid.forzar-lista .card{display:grid;grid-template-columns:108px minmax(0,1fr);min-height:108px}
.grid.forzar-lista .card.card-sin-media{display:block;min-height:0}
.grid.forzar-lista .card-media{aspect-ratio:auto;min-height:108px;height:100%}
.grid.forzar-lista .card-body{min-width:0;padding:12px 13px}
.grid.forzar-lista .card-nombre{font-size:16px}
.grid.forzar-lista .badges{top:7px;left:7px;gap:3px;max-width:90%}
.grid.forzar-lista .badge{font-size:8px;padding:3px 5px}
.grid.forzar-lista .chip-nd{bottom:7px;left:7px;font-size:8.5px;padding:3px 6px}

/* --- Datos extra de la tarjeta --- */
.card-meta{margin:0;font-size:11.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-soft)}
.card-unidad{margin:0;font-size:12px;color:var(--ink-soft)}
.precio-oculto{font-size:12.5px;font-weight:600;color:var(--accent-text)}
.btn-add-texto{width:auto;padding:0 14px;font-size:13px;font-weight:700}
.seccion-mas{margin:10px 0 0;font-size:12.5px;color:var(--ink-soft);text-align:center}

/* --- Encabezado con acciones (buscador / cuenta / info) --- */
.topbar-acciones{display:flex;align-items:center;gap:8px;min-width:0}
.searchbar-top{padding:0;flex:1;min-width:120px;max-width:280px}
.searchbar-top input{padding:9px 32px 9px 36px}
.searchbar-top svg{margin-left:11px}
a.icon-btn{text-decoration:none}

/* --- Buscador protagonista en la portada --- */
.buscador-hero{padding:16px 16px 4px;max-width:var(--max);margin:0 auto}
.searchbar-hero{padding:0}
.searchbar-hero input{padding:16px 40px 16px 46px;font-size:16px;border-radius:12px}
.searchbar-hero svg{margin-left:16px}

/* --- Aviso de estado de la cuenta --- */
.aviso-cuenta{background:var(--paper-2);color:var(--ink);border-bottom:1px solid var(--line);padding:11px 18px;font-size:13px;text-align:center}

/* --- Bloque de categorías en la portada --- */
.catnav-portada{overflow-x:auto;padding:0;gap:18px;flex-wrap:nowrap}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
.cat-tile{display:flex;flex-direction:column;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:var(--radio);padding:12px 8px;color:var(--ink);text-align:center}
.cat-tile-img{width:58px;height:58px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c,#94a3b8) 14%,var(--paper-2));color:color-mix(in srgb,var(--c,#94a3b8) 55%,var(--ink));font-family:var(--serif);font-size:24px;font-weight:700}
.cat-tile-img img{width:100%;height:100%;object-fit:cover}
.cat-tile-nombre{font-size:13px;font-weight:650;line-height:1.2}
.cat-tile-cant{font-size:11px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.cat-lista{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radio);overflow:hidden;background:var(--card)}
.cat-lista li+li{border-top:1px solid var(--line-soft)}
.cat-lista button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:transparent;border:none;padding:14px 15px;color:var(--ink);font-size:14.5px;font-weight:600;text-align:left}
.cat-lista button:active{background:var(--paper-2)}
.cat-lista .cnt{color:var(--ink-soft);font-size:12px;font-variant-numeric:tabular-nums}

/* --- Bloque de marcas --- */
.marca-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.marca-tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radio);padding:13px 10px;color:var(--ink);font-size:13.5px;font-weight:650}
.marca-tile .cnt{color:var(--ink-soft);font-size:11px;margin-left:4px;font-variant-numeric:tabular-nums}

/* --- Carrusel de banners --- */
.carrusel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory}
.carrusel-item{position:relative;flex:0 0 84%;max-width:560px;scroll-snap-align:center;border:1px solid var(--line);border-radius:var(--radio);overflow:hidden;background:var(--paper-2);min-height:150px;display:flex;align-items:flex-end;text-decoration:none;color:#fff}
@media(min-width:720px){.carrusel-item{flex-basis:60%}}
.carrusel-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.carrusel-texto{position:relative;z-index:1;width:100%;padding:16px;background:linear-gradient(0deg,rgba(18,20,19,.78),rgba(18,20,19,0))}
.carrusel-texto strong{display:block;font-family:var(--serif);font-size:20px;line-height:1.15}
.carrusel-texto span{display:block;font-size:13px;margin-top:3px;opacity:.94}

/* --- Checkout: cuenta requerida --- */
.co-bloqueo{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radio);padding:14px;margin-bottom:16px}
.co-bloqueo p{margin:0 0 10px;font-size:14px}
.co-bloqueo .btn-primary,.co-bloqueo .btn-ghost{text-decoration:none;max-width:280px}
.co-aviso-retiro{display:flex;gap:10px;align-items:flex-start;background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:12px 14px;margin:12px 0;font-size:13px;line-height:1.45;color:#7c2d12}
.co-aviso-retiro:before{content:"⚠";flex:none;font-size:16px;line-height:1}
.co-aviso-retiro strong{font-weight:800}
.co-aviso-retiro.hide{display:none!important}
.pd-retiro-aviso{display:flex;gap:8px;align-items:center;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:10px 12px;margin:10px 0;font-size:13px;color:#7c2d12;line-height:1.4}
.cart-item-retiro{margin-top:6px;display:flex;gap:6px;align-items:center;font-size:11px;color:#92400e}
.confirm-cuenta{margin:12px 0 0;font-size:13.5px}
.form-group select{width:100%;border:1px solid var(--line);border-radius:9px;padding:13px;outline:none;background:var(--paper);color:var(--ink)}

/* ===================================================================
   Panel del cliente (mi cuenta)
   =================================================================== */
.cuenta{max-width:var(--max);margin:0 auto;padding:18px 16px 60px}
.cuenta-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.cuenta-head h1{font-family:var(--serif);font-size:23px;margin:0}
.cuenta-volver{font-size:13.5px;color:var(--accent-text);text-decoration:none;font-weight:600}
.cuenta-caja{background:var(--card);border:1px solid var(--line);border-radius:var(--radio);padding:16px;margin-bottom:14px}
.cuenta-caja h2{font-family:var(--serif);font-size:17px;margin:0 0 10px}
.cuenta-menu{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.cuenta-menu a{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radio);padding:15px;color:var(--ink);text-decoration:none;font-weight:650}
.cuenta-menu a span{display:block;font-weight:400;font-size:12.5px;color:var(--ink-soft);margin-top:3px}
.cuenta-estado{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px;text-transform:uppercase;letter-spacing:.03em}
.cuenta-estado.aprobado{background:#e2f0e2;color:#2f6b2f}
.cuenta-estado.pendiente{background:#fbeee0;color:#8a4b16}
.cuenta-estado.rechazado,.cuenta-estado.bloqueado{background:#f6dedc;color:#8f2b23}
.cuenta-tabla{width:100%;border-collapse:collapse;font-size:13.5px}
.cuenta-tabla th,.cuenta-tabla td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line-soft)}
.cuenta-tabla th{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft)}
.cuenta-tabla a{color:var(--accent-text);font-weight:600;text-decoration:none}
.cuenta-vacio{color:var(--ink-soft);font-size:13.5px;margin:0}
.cuenta-msg{border-radius:var(--radio);padding:12px 14px;margin-bottom:14px;font-size:13.5px}
.cuenta-msg.ok{background:#e2f0e2;color:#2f6b2f}
.cuenta-msg.err{background:#f6dedc;color:#8f2b23}
.cuenta-acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.cuenta-acciones .btn-primary,.cuenta-acciones .btn-ghost{width:auto;margin:0;padding:12px 20px;text-decoration:none}
.cuenta-dir{border:1px solid var(--line);border-radius:var(--radio);padding:13px;margin-bottom:10px;background:var(--paper)}
.cuenta-dir strong{display:block;font-size:14px}
.cuenta-dir p{margin:3px 0 0;font-size:13px;color:var(--ink-soft)}
.cuenta-linea{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.cuenta-linea:last-child{border-bottom:none}
/* Cuenta — formularios pulidos (datos, registro, direcciones) */
.cuenta-caja--form{padding:20px 18px}
.cuenta-caja--estrecha{max-width:520px;margin-left:auto;margin-right:auto}
.cuenta-caja-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line-soft)}
.cuenta-caja-head h2{margin:0;font-family:var(--sans);font-size:18px;letter-spacing:-.02em}
.cuenta-caja-sub{margin:4px 0 0;color:var(--ink-soft);font-size:13px;line-height:1.4}
.cuenta-avatar--sm{width:44px;height:44px;border-radius:10px;font-size:18px}
.cuenta-form{display:block}
.cuenta-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cuenta-form-grid--wide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:1024px){
  .cuenta-form-grid--wide{grid-template-columns:1fr 1fr}
}
.form-group{display:flex;flex-direction:column;gap:5px;margin:0}
.form-group--full{grid-column:1/-1}
.form-group label{font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.form-group label .req{color:var(--err);font-weight:800}
.form-group input[type=text],.form-group input[type=email],.form-group input[type=tel],.form-group input[type=password],.form-group input[type=number],.form-group input[type=date],.form-group select,.form-group textarea{width:100%;height:46px;padding:0 12px;border:1.5px solid var(--line);border-radius:10px;background:#f8fafc;color:var(--ink);font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.form-group textarea{height:auto;min-height:80px;padding:10px 12px;resize:vertical}
.form-group select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2368707b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:34px}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--ink-soft);opacity:.9}
.form-group input:hover,.form-group select:hover,.form-group textarea:hover{border-color:#cbd5e1;background:#fff}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--pri);background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 14%,transparent)}
.form-help{font-size:11.5px;color:var(--ink-soft);line-height:1.4;margin:0}
.input-con-accion{position:relative;display:flex;align-items:center}
.input-con-accion input{flex:1;padding-right:42px}
.input-ver{position:absolute;right:6px;width:32px;height:32px;border:1px solid var(--line);background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-soft);font-size:14px}
.input-ver:hover{background:var(--paper-2);color:var(--ink)}
.check-suave{display:flex;align-items:center;gap:8px;margin-top:10px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:10px;background:#f8fafc;font-size:13px;font-weight:600}
.check-suave input{width:18px;height:18px;accent-color:var(--pri)}
.cuenta-aviso-suave{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:12px}
.cuenta-ayuda{margin-top:12px;text-align:center;color:var(--ink-soft);font-size:13px}
.cuenta-ayuda a{color:var(--accent-text);font-weight:700}
.cuenta-dirs{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){
  .cuenta-dirs{grid-template-columns:1fr}
}
.cuenta-dir--mejor{border-radius:10px;transition:border-color .15s,box-shadow .15s}
.cuenta-dir--mejor:hover{border-color:color-mix(in srgb,var(--pri) 18%,var(--line));box-shadow:0 4px 14px rgba(0,0,0,.04)}
.cuenta-dir-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cuenta-dir-addr{margin:6px 0 0;font-size:13px;color:var(--ink)}
.cuenta-dir-ref{margin:6px 0 0;font-size:12px;color:var(--ink-soft);font-style:italic}
@media(max-width:760px){
  .cuenta-form-grid{grid-template-columns:1fr}
  .cuenta-form-grid--wide{grid-template-columns:1fr}
  .cuenta-caja--form{padding:16px}
  .cuenta-caja-head{flex-direction:column}
}
@media(min-width:1024px){
  .cuenta-caja--form{padding:24px 26px}
  .cuenta-form-grid{column-gap:16px;row-gap:14px}
  .cuenta-form-grid--wide{column-gap:16px}
}

/* ==========================================================================
   Refinamiento visual del catálogo.
   Bloque final: ajusta valores definidos arriba, sin reescribir esas reglas.
   ========================================================================== */

/* ---------- Marca: la inicial queda de respaldo si el logo no carga ---------- */
.brand-logo.brand-ph{position:relative;overflow:hidden;background:var(--sec);color:var(--on-sec)}
.brand-logo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:3px;background:#fff;border-radius:inherit}

/* ---------- Encabezado ---------- */
.topbar{position:relative;z-index:27}
.topbar:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.brand-nombre{font-size:22px}
.icon-btn{transition:background-color .14s ease,border-color .14s ease,color .14s ease}
@media(hover:hover){.icon-btn:hover{background:var(--paper-2);color:var(--ink);border-color:color-mix(in srgb,var(--pri) 30%,var(--line))}}

/* Estado abierto/cerrado: un punto que respira cuando está abierto. */
.estado.abierto .dot{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent);animation:latido 2.4s ease-out infinite}
@keyframes latido{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}
  70%{box-shadow:0 0 0 6px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
@media(prefers-reduced-motion:reduce){.estado.abierto .dot{animation:none}}

.aviso-cerrado,.aviso-cuenta{display:flex;align-items:center;justify-content:center;gap:8px;line-height:1.45}

/* ---------- Barra fija ---------- */
/* Fondo sólido a propósito: una barra translúcida sobre contenido que se
   desplaza provoca repintados raros en varios navegadores móviles. */
.subnav{box-shadow:0 1px 0 var(--line),0 6px 16px -14px rgba(33,27,22,.55)}
.catnav-chip{transition:color .14s ease}
.catnav-chip:after{height:2.5px;border-radius:2px 2px 0 0}
@media(hover:hover){.catnav-chip:hover{color:var(--ink)}}
.vista-btn{transition:background-color .14s ease,color .14s ease}

/* ---------- Secciones ---------- */
.seccion-titulo{gap:12px}
.seccion-titulo:after{background:linear-gradient(90deg,var(--line),transparent)}

/* ---------- Tarjeta ---------- */
.card{transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .16s ease,border-color .16s ease}
@media(hover:hover){
  .card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--pri) 24%,var(--line));box-shadow:0 10px 24px -14px rgba(40,26,14,.5)}
}
.card-nombre{transition:color .14s ease}
@media(hover:hover){.card-nombre:hover{color:var(--accent-text)}}
.precio{letter-spacing:-.02em}
.btn-add{transition:transform .12s ease,filter .12s ease,box-shadow .12s ease}
@media(hover:hover){.btn-add:hover{filter:brightness(1.07);box-shadow:0 4px 10px color-mix(in srgb,var(--pri) 40%,transparent)}}

/* Descuento calculado del precio, no de una etiqueta cargada a mano. */
.chip-off{position:absolute;top:10px;right:10px;background:var(--action);color:var(--on-action);font-size:11px;font-weight:800;letter-spacing:.02em;padding:4px 8px;border-radius:999px;box-shadow:0 2px 8px -2px rgba(0,0,0,.35)}
.vista-lista .catalog-grid .chip-off,.grid.forzar-lista .chip-off{top:7px;right:7px;font-size:9.5px;padding:3px 6px}

/* ---------- Bloques de la portada ---------- */
.cat-tile{transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}
@media(hover:hover){.cat-tile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--pri) 28%,var(--line));box-shadow:0 8px 18px -14px rgba(40,26,14,.55)}}
.cat-tile:active{transform:scale(.98)}
.marca-tile{transition:border-color .14s ease,background-color .14s ease}
@media(hover:hover){.marca-tile:hover{border-color:color-mix(in srgb,var(--pri) 30%,var(--line));background:var(--paper-2)}}
.cat-lista button{transition:background-color .14s ease,padding-left .14s ease}
@media(hover:hover){.cat-lista button:hover{background:var(--paper-2);padding-left:19px}}
.cat-lista button:after{content:"›";color:var(--ink-soft);font-size:19px;line-height:1;margin-left:auto;padding-left:8px}
.carrusel-item{transition:transform .16s ease,box-shadow .16s ease}
@media(hover:hover){.carrusel-item:hover{transform:translateY(-2px);box-shadow:0 12px 26px -18px rgba(40,26,14,.6)}}
.seccion-carrusel .carrusel{padding:2px 16px 10px;margin:0 -16px;scroll-padding:16px}

/* ---------- Pie ---------- */
.pie{border-top:1px solid var(--line-soft);margin-top:36px;padding-top:26px}
.pie p{margin:0}
.pie-mini a{font-weight:600;border-bottom:1px solid color-mix(in srgb,currentColor 35%,transparent)}
@media(hover:hover){.pie-mini a:hover{border-bottom-color:currentColor}}

/* ---------- Carrito flotante ---------- */
.fab-cart{transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .16s ease}
@media(hover:hover){.fab-cart:hover{transform:translateX(-50%) translateY(-2px);box-shadow:0 16px 34px -12px rgba(28,20,14,.68)}}
.fab-cart:active{transform:translateX(-50%) scale(.97)}

/* ---------- Hojas / overlays ---------- */
@media(min-width:760px){
  .overlay{align-items:center;padding:24px}
  .sheet{border-radius:16px;border-bottom:1px solid var(--line);max-height:88vh;max-height:88dvh;box-shadow:0 30px 70px -30px rgba(20,14,8,.7)}
  .sheet-full{min-height:0;max-height:88vh;max-height:88dvh}
  @keyframes up{from{transform:translateY(14px);opacity:.6}to{transform:translateY(0);opacity:1}}
}

/* ---------- Escritorio: más aire ---------- */
@media(min-width:1024px){
  .topbar{padding:18px 26px}
  .brand-logo{width:56px;height:52px}
  .brand-nombre{font-size:26px}
  .contenido{padding:10px 26px 0}
  .seccion{margin-top:34px}
  .seccion-titulo{font-size:23px;margin-bottom:18px}
  .searchbar{padding:15px 14px 10px 26px}
  .vista-selector{margin-right:26px}
  .catnav{padding:8px 26px 0;gap:28px}
  .rail,.seccion-carrusel .carrusel{padding-left:26px;padding-right:26px;margin-left:-26px;margin-right:-26px;scroll-padding:26px}
  .banner{min-height:264px}
  .banner-inner{padding:34px 30px 30px}
  .pie{padding-left:26px;padding-right:26px}
  .buscador-hero{padding:22px 26px 6px}
}

/* ---------- Accesibilidad / movimiento ---------- */
@media(prefers-reduced-motion:reduce){
  .card,.cat-tile,.carrusel-item,.fab-cart,.btn-add,.sheet{transition:none!important;animation:none!important}
  .card:hover,.cat-tile:hover,.carrusel-item:hover,.fab-cart:hover{transform:none}
}

/* Clases propias de los bloques nuevos: sin regla quedaban sin efecto. */
.icon-btn-cuenta{position:relative}
.icon-btn-cuenta.con-sesion:after{content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px var(--card)}
.seccion-categorias,.seccion-marcas{margin-top:22px}
.seccion-categorias .seccion-titulo,.seccion-marcas .seccion-titulo{font-size:19px}

/* ==========================================================================
   Refinamiento visual 2 · prolijidad, aire y arreglos de encimado.
   Bloque final: solo ajusta valores ya definidos arriba. No renombra clases
   ni toca el contrato de DOM que usa public/assets/js/app.js.
   ========================================================================== */

/* ---------- Piezas compartidas: sombras, radios y anillo de foco ---------- */
:root{
  --radio-btn:11px;
  --grid-gap:14px;
  --sombra-1:0 1px 2px rgba(40,26,14,.05), 0 1px 3px rgba(40,26,14,.06);
  --sombra-2:0 2px 6px -2px rgba(40,26,14,.10), 0 8px 20px -12px rgba(40,26,14,.28);
  --sombra-3:0 18px 44px -20px rgba(28,20,14,.50);
  --foco:0 0 0 3px color-mix(in srgb,var(--pri) 24%,transparent);
  --trans:.16s cubic-bezier(.22,1,.36,1);
}
.bordes-rectos{--radio-btn:4px}
.bordes-redondeados{--radio-btn:14px}
@media(max-width:380px){:root{--grid-gap:11px}}
@media(min-width:768px){:root{--grid-gap:20px}}
.dens-compacta{--grid-gap:10px}
.grid{gap:var(--grid-gap)}

/* ---------- Botones: una sola familia, misma altura y mismo radio ---------- */
/* El arreglo importante: .btn-ghost se usa tambien como <a>, y un enlace es
   de linea, asi que su relleno vertical no empujaba nada y se montaba encima
   del boton anterior. Pasarlo a caja lo alinea con el resto. */
.btn-primary,.btn-ghost{
  display:flex;align-items:center;justify-content:center;gap:9px;
  box-sizing:border-box;text-align:center;line-height:1.25;
  border-radius:var(--radio-btn);
  transition:filter var(--trans),box-shadow var(--trans),background-color var(--trans),border-color var(--trans);
}
a.btn-primary,a.btn-ghost{text-decoration:none}
.btn-primary{min-height:52px;padding:14px 20px;box-shadow:0 2px 6px -1px color-mix(in srgb,var(--pri) 30%,transparent)}
.btn-ghost{min-height:48px;padding:13px 20px}
.btn-primary:disabled{box-shadow:none;cursor:not-allowed}
.btn-confirmar{border-radius:var(--radio-btn);min-height:52px;transition:filter var(--trans),box-shadow var(--trans)}
@media(hover:hover){
  .btn-primary:not(:disabled):hover{filter:brightness(1.07);box-shadow:0 6px 16px -4px color-mix(in srgb,var(--pri) 42%,transparent)}
  .btn-wa:not(:disabled):hover{box-shadow:0 6px 16px -4px color-mix(in srgb,var(--wa) 45%,transparent)}
  .btn-ghost:hover{background:var(--paper-2);border-color:color-mix(in srgb,var(--pri) 26%,var(--line))}
  .btn-confirmar:hover{filter:brightness(1.07)}
  .sheet-cerrar:hover{background:var(--paper-2);color:var(--ink);border-color:color-mix(in srgb,var(--pri) 26%,var(--line))}
}
.btn-primary:not(:disabled):active,.btn-ghost:active,.btn-confirmar:active{transform:scale(.985)}
.sheet-cerrar{border-radius:var(--radio-btn);transition:background-color var(--trans),color var(--trans),border-color var(--trans)}

/* ---------- Checkout: aviso de cuenta necesaria ---------- */
/* Antes los dos botones caian uno sobre el otro; ahora van en una fila que
   se parte sola cuando la pantalla es angosta. */
.co-bloqueo{
  display:flex;align-items:flex-start;gap:13px;
  background:color-mix(in srgb,var(--pri) 5%,var(--paper));
  border:1px solid color-mix(in srgb,var(--pri) 22%,var(--line));
  border-radius:var(--radio-btn);padding:15px 16px;margin:14px 0 4px;
}
.co-bloqueo-ico{
  flex:none;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--pri) 13%,transparent);color:var(--accent-text);
}
.co-bloqueo-cuerpo{flex:1;min-width:0}
.co-bloqueo p{margin:0;font-size:14px;line-height:1.5}
.co-bloqueo-acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:13px}
.co-bloqueo-acciones .btn-primary,
.co-bloqueo-acciones .btn-ghost{
  width:auto;max-width:none;flex:1 1 150px;margin:0;
  min-height:46px;padding:12px 18px;font-size:14.5px;
}

/* ---------- Carrito flotante ---------- */
/* El texto era un ::after sin ancho propio: se partia en dos renglones y en
   escritorio el boton entero se corria al pasar el mouse. Ahora es un <span>
   que no se parte, y el mouse solo cambia la sombra. */
.fab-cart{
  gap:11px;padding:12px 16px 12px 17px;border-radius:calc(var(--radio-btn) + 3px);
  white-space:nowrap;box-shadow:var(--sombra-3);
  transition:box-shadow var(--trans),filter var(--trans);
}
.fab-cart svg{flex:none}
.fab-total{white-space:nowrap}
.fab-cta{font-weight:700;letter-spacing:.005em}
@media(hover:hover){
  .fab-cart:hover{transform:translateX(-50%);filter:brightness(1.12);box-shadow:0 20px 40px -14px rgba(28,20,14,.72)}
}
.fab-cart:active{transform:translateX(-50%) scale(.975)}
@media(max-width:360px){
  .fab-cart{padding-left:14px;padding-right:14px;gap:9px;font-size:13.5px}
  .fab-cta{padding-left:9px;font-size:12.5px}
}

/* ---------- Tarjeta: que el pie nunca se desborde ---------- */
/* Con muchas columnas la tarjeta queda angosta y el boton se salia del borde.
   Al permitir que el pie se parta, el boton baja en vez de desbordar. */
.card{box-shadow:var(--sombra-1)}
.card-foot{flex-wrap:wrap;row-gap:8px}
.card-precio{min-width:0;flex:1 1 auto}
.precio,.precio-viejo,.precio-oculto,.card-meta{overflow-wrap:anywhere}
.btn-add{flex:none;border-radius:var(--radio-btn);max-width:100%}
.btn-add-texto{white-space:nowrap}
.btn-add:disabled{white-space:nowrap;cursor:not-allowed}
.card-media img{background:var(--paper-2)}
@media(hover:hover){.card:hover{box-shadow:var(--sombra-2)}}

/* Columnas fijas: se respetan mientras entren. Si la pantalla no da, manda
   el ancho minimo de tarjeta para que el contenido siga siendo legible. */
.cols-fijas .catalog-grid{
  grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
}

/* ---------- Banner de portada: menos plomo encima de la foto ---------- */
.banner-con-portada .banner-inner{
  width:100%;max-width:none;
  background:linear-gradient(0deg,rgba(14,12,10,.72) 10%,rgba(14,12,10,.30) 62%,transparent);
  padding-top:54px;
}
.banner-con-portada .banner-inner h2,
.banner-con-portada .banner-inner p{max-width:38ch}

/* ---------- Barra fija y rubros ---------- */
.searchbar input{border-radius:var(--radio-btn);transition:border-color var(--trans),box-shadow var(--trans),background-color var(--trans)}
@media(hover:hover){.searchbar input:hover{border-color:color-mix(in srgb,var(--pri) 24%,var(--line))}}
.searchbar input:focus{box-shadow:var(--foco)}
.vista-selector{border-radius:calc(var(--radio-btn) + 2px)}
.vista-btn{border-radius:calc(var(--radio-btn) - 3px)}
.catnav-chip{border-radius:7px 7px 0 0}

/* ---------- Formularios ---------- */
.form-group{margin-bottom:14px}
.form-group label{font-size:13px;font-weight:650;letter-spacing:.015em;color:var(--ink-soft);margin-bottom:7px}
.form-group input,.form-group textarea,.form-group select{
  min-height:50px;border-radius:var(--radio-btn);padding:13px 14px;
  transition:border-color var(--trans),box-shadow var(--trans),background-color var(--trans);
}
@media(hover:hover){
  .form-group input:hover,.form-group textarea:hover,.form-group select:hover{border-color:color-mix(in srgb,var(--pri) 24%,var(--line))}
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{box-shadow:var(--foco)}

/* Opciones de modalidad y pago: tarjetas que se ven elegibles. */
.opts{gap:10px}
.radio-card{
  border-radius:var(--radio-btn);padding:14px 16px;min-height:56px;cursor:pointer;background:var(--card);
  transition:border-color var(--trans),background-color var(--trans),box-shadow var(--trans);
}
@media(hover:hover){
  .radio-card:hover{border-color:color-mix(in srgb,var(--pri) 34%,var(--line));background:var(--paper)}
}
.radio-card:has(input:checked){box-shadow:0 0 0 1px var(--pri) inset}
.radio-card:has(input:checked):after{
  content:"\2713";margin-left:auto;flex:none;
  width:22px;height:22px;border-radius:50%;
  background:var(--action);color:var(--on-action);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;
}

/* ---------- Checkout: jerarquia de bloques ---------- */
.checkout{padding:16px 18px 40px}
.co-tit{display:flex;align-items:center;gap:12px;margin:26px 0 12px}
.co-tit:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.co-resumen{border-radius:var(--radio-btn);padding:14px 16px}
.co-resumen .cr-linea{gap:14px;padding:5px 0}
.co-resumen .cr-linea+.cr-linea{border-top:1px dashed var(--line-soft)}
.co-cond{margin-top:12px}
.co-cambio,.co-errores{border-radius:var(--radio-btn)}
.co-totales{
  margin:22px 0 4px;border:1px solid var(--line);border-top:1px solid var(--line);
  border-radius:var(--radio-btn);background:var(--paper);padding:14px 16px;
}
.co-totales .ct-linea{padding:4px 0}
.co-nota{margin-top:14px;line-height:1.5}

/* ---------- Pago: transferencia y Mercado Pago ---------- */
.pago-box{border-radius:var(--radio-btn);padding:15px 16px}
.pago-copy{border-radius:var(--radio-btn);transition:background-color var(--trans),box-shadow var(--trans)}
@media(hover:hover){.pago-copy:hover{background:color-mix(in srgb,var(--pri) 9%,transparent)}}
.pago-file-btn{border-radius:var(--radio-btn);transition:border-color var(--trans),background-color var(--trans)}
@media(hover:hover){.pago-file-btn:hover{border-color:var(--pri);background:var(--paper)}}
.confirm-pago{margin:0 0 20px;text-align:left}

/* ---------- Hojas y fondos ---------- */
.overlay{background:rgba(24,17,11,.52);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.sheet{
  box-shadow:0 -14px 42px -20px rgba(20,14,8,.55);
  scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink-soft) 30%,transparent) transparent;
}
.sheet-bottom{max-height:88vh;max-height:88dvh}
.sheet-head{padding:16px 18px}
.sheet-head h2{font-size:19px;letter-spacing:-.01em}
.sheet::-webkit-scrollbar{width:9px}
.sheet::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink-soft) 28%,transparent);border-radius:9px;border:2px solid transparent;background-clip:padding-box}

/* ---------- Detalle de producto ---------- */
.pd-body{padding:20px 20px 10px}
.grupo-titulo{font-size:16.5px}
.opcion{border-radius:8px;padding:12px 8px;margin:0 -8px;transition:background-color var(--trans)}
@media(hover:hover){.opcion:hover{background:var(--paper)}}
.opcion:has(input:checked) .op-nombre{font-weight:650}
.pd-aclaracion textarea{border-radius:var(--radio-btn);transition:border-color var(--trans),box-shadow var(--trans)}
.pd-aclaracion textarea:focus{border-color:var(--pri);box-shadow:var(--foco)}
.pd-footer{gap:13px;box-shadow:0 -8px 18px -16px rgba(33,27,22,.7)}
.qty,.cart-qty{border-radius:var(--radio-btn);background:var(--card)}
.qty-btn,.cart-qty button{border-radius:calc(var(--radio-btn) - 3px);transition:background-color var(--trans),color var(--trans)}
@media(hover:hover){
  .qty-btn:hover,.cart-qty button:hover{background:color-mix(in srgb,var(--pri) 14%,var(--paper-2));color:var(--accent-text)}
}

/* ---------- Carrito ---------- */
.cart-item{gap:14px}
.carrito-foot{box-shadow:0 -8px 18px -16px rgba(33,27,22,.7)}
.link-vaciar,.cart-del{border-radius:7px;padding:4px 6px;transition:background-color var(--trans)}
.link-vaciar{margin-left:-6px}
@media(hover:hover){
  .link-vaciar:hover,.cart-del:hover{background:color-mix(in srgb,var(--err) 10%,transparent)}
}

/* ---------- Confirmacion ---------- */
.confirm-check{box-shadow:0 0 0 8px color-mix(in srgb,var(--ok) 8%,transparent)}
.confirm h2{letter-spacing:-.01em}
.sug-card{transition:transform var(--trans),border-color var(--trans),box-shadow var(--trans)}
@media(hover:hover){
  .sug-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--pri) 26%,var(--line));box-shadow:var(--sombra-2)}
}
.confirm .btn-ghost{max-width:360px;margin:16px auto 0}

/* ---------- Informacion ---------- */
.info-list li{display:flex;flex-wrap:wrap;gap:6px}
.info-list li b{color:var(--ink-soft);font-weight:650}
.info-redes a{border-radius:var(--radio-btn);transition:background-color var(--trans),color var(--trans)}
@media(hover:hover){.info-redes a:hover{background:color-mix(in srgb,var(--pri) 12%,var(--paper-2));color:var(--accent-text)}}

/* ---------- Avisos y toast ---------- */
.aviso-cerrado,.aviso-cuenta{font-size:13.5px;padding:12px 18px}
.toast{border-radius:var(--radio-btn);padding:14px 20px;box-shadow:var(--sombra-3)}

/* ---------- Panel del cliente ---------- */
.cuenta-caja{box-shadow:var(--sombra-1)}
.cuenta-menu a{transition:transform var(--trans),border-color var(--trans),box-shadow var(--trans)}
@media(hover:hover){
  .cuenta-menu a:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--pri) 26%,var(--line));box-shadow:var(--sombra-2)}
}
.cuenta-acciones .btn-primary,.cuenta-acciones .btn-ghost{min-height:46px;flex:0 1 auto}

/* ---------- Movimiento reducido ---------- */
@media(prefers-reduced-motion:reduce){
  .btn-primary,.btn-ghost,.btn-confirmar,.sug-card,.cuenta-menu a,.opcion,.radio-card{transition:none!important}
  .btn-primary:active,.btn-ghost:active,.btn-confirmar:active,.sug-card:hover,.cuenta-menu a:hover{transform:none}
}

/* ---------- Detalle: la hoja se completa de arriba a abajo ---------- */
/* Con productos sin foto y sin opciones quedaba una franja blanca debajo del
   pie. El cuerpo crece y el pie se apoya siempre en el borde inferior. */
#detalle-sheet{display:flex;flex-direction:column}
#detalle-cuerpo{flex:1 0 auto;display:flex;flex-direction:column;min-height:0}
#detalle-cuerpo .pd-body{flex:1 0 auto}
#detalle-cuerpo .skeleton-detalle{flex:1 0 auto;height:auto;min-height:340px}

/* Sin foto la inicial no necesita media pantalla. */
.pd-hero:has(.pd-ph){aspect-ratio:12/5}
.pd-hero .pd-ph{font-size:58px}

/* ---------- Estados vacios ---------- */
.vacio,.sin-resultados{padding:60px 22px}
.vacio-ico{width:52px;height:52px;margin-bottom:12px}
.vacio p,.sin-resultados p{margin:0;font-size:14px}

/* ---------- Encabezado: el titulo tampoco tiene que desbordar ---------- */
.topbar{gap:12px}
.brand-nombre{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.brand-sub{flex-wrap:wrap;row-gap:2px}
.topbar-acciones{flex:none}

/* ---------- Detalles finos de toda la tienda ---------- */
::selection{background:color-mix(in srgb,var(--pri) 26%,transparent);color:var(--ink)}

/* La barra de rubros se desvanece en los bordes: se nota que sigue. */
.catnav{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 26px),transparent 100%);
}

/* Panel del cliente: solo el formulario de ingreso usa una columna angosta. */
.cuenta{max-width:min(var(--max),880px)}
.cuenta:has(> .cuenta-caja--estrecha){max-width:min(var(--max),520px)}
.cuenta-head h1{letter-spacing:-.01em}
.cuenta-caja form .btn-primary{margin-top:4px}
.cuenta-tabla tbody tr{transition:background-color var(--trans)}
@media(hover:hover){.cuenta-tabla tbody tr:hover{background:var(--paper)}}
.cuenta-dir{border-radius:var(--radio-btn)}
.cuenta-msg{display:flex;align-items:center;gap:9px;line-height:1.45}

/* Pie: un poco mas de aire y separacion clara del contenido. */
.pie{padding-bottom:22px}
.seccion-mas{margin-top:14px;padding:10px 12px;background:var(--paper-2);border-radius:var(--radio-btn)}

/* ---------- Vista de lista: la foto no puede pisar al texto ---------- */
/* El tamano de foto elegido por el comercio (img-chica, media-horizontal,
   media-vertical) fija una proporcion que, en fila, hacia la imagen mas ancha
   que su columna y se montaba arriba del nombre y del precio. En lista la
   foto ocupa exactamente su columna y listo. */
.vista-lista .catalog-grid .card-media,
.grid.forzar-lista .card-media{aspect-ratio:auto;width:100%;height:100%}
.vista-lista .catalog-grid .card-body,
.grid.forzar-lista .card-body{justify-content:center}

/* La foto va arriba de la inicial (que queda de respaldo si no carga). */
.card-media img{position:relative;z-index:1}

/* Si el total es largo, el que se recorta es el texto de accion, nunca la plata. */
.fab-cart{overflow:hidden}
.fab-total{flex:none}
.fab-cta{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* El aviso previo al alta necesita aire antes del primer campo. */
.cuenta-caja > .cuenta-vacio + form{margin-top:16px}

/* ==========================================================================
   El pedido siempre a la vista.
   El carrito vive en el navegador del visitante: sigue armado aunque se vaya
   a iniciar sesion, a crear la cuenta o a mirar sus datos. Estas piezas lo
   hacen visible en todas esas pantallas, no solo en la portada.
   ========================================================================== */

/* ---------- Atajo del encabezado, con el numero de articulos ---------- */
.icon-btn-carrito{position:relative;overflow:visible}
.carrito-badge{
  position:absolute;top:-6px;right:-6px;
  min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--action);color:var(--on-action);
  font-size:11px;font-weight:800;line-height:20px;text-align:center;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  box-shadow:0 0 0 2px var(--card);
}
@media(hover:hover){
  .icon-btn-carrito:hover{border-color:color-mix(in srgb,var(--pri) 40%,var(--line));color:var(--accent-text)}
}
/* Late una vez cuando entra un articulo nuevo: se nota sin molestar. */
.carrito-badge.pulso{animation:badge-pulso .5s ease}
@keyframes badge-pulso{
  0%{transform:scale(1)}
  40%{transform:scale(1.32)}
  100%{transform:scale(1)}
}

/* ---------- Aviso de pedido pendiente en las pantallas de cuenta ---------- */
.retomar{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;text-decoration:none;color:var(--ink);font-size:14px;
  background:color-mix(in srgb,var(--pri) 8%,var(--paper));
  border-bottom:1px solid color-mix(in srgb,var(--pri) 22%,var(--line));
  transition:background-color var(--trans);
}
.retomar-ico{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--pri) 14%,transparent);color:var(--accent-text);
}
.retomar-txt{flex:1;min-width:0;line-height:1.35}
.retomar-txt strong{font-weight:750}
.retomar-cta{flex:none;font-weight:700;color:var(--accent-text);white-space:nowrap}
.retomar-cta:after{content:"\203A";margin-left:7px;font-size:18px;line-height:1}
@media(hover:hover){
  .retomar:hover{background:color-mix(in srgb,var(--pri) 13%,var(--paper))}
}
@media(max-width:420px){
  .retomar{gap:10px;padding:11px 14px;font-size:13.5px}
  .retomar-cta{font-size:0}
  .retomar-cta:after{margin-left:0;font-size:20px}
}
@media(min-width:1024px){.retomar{padding-left:26px;padding-right:26px}}

/* ---------- "No perdes el pedido" ---------- */
.cuenta-retomar{
  margin:0 0 16px;padding:12px 15px;border-radius:var(--radio-btn);
  background:color-mix(in srgb,var(--ok) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--ok) 28%,transparent);
  font-size:13.5px;line-height:1.45;
}
.co-bloqueo-tranqui{margin:7px 0 0;font-size:13px;color:var(--ink-soft);line-height:1.45}

/* ---------- Carrito vacio: con salida, no solo con la mala noticia ---------- */
.carrito-vacio .btn-ghost{max-width:250px;margin:18px auto 0}

/* ---------- Encabezado con buscador: que nada quede aplastado ---------- */
/* Con el buscador arriba, la marca, el buscador y los iconos se peleaban el
   ancho y en el celular el nombre del comercio quedaba cortado en tres
   renglones. Ahora el buscador se toma un renglon propio cuando hace falta. */
.topbar{flex-wrap:wrap;row-gap:11px}
.brand{flex:1 1 auto;min-width:0}
.brand-sub .horario{white-space:nowrap}
.topbar>.searchbar-top{order:2;flex:1 1 190px;max-width:320px;min-width:150px}
.topbar>.topbar-acciones{order:3;flex:none}
@media(max-width:680px){
  .topbar>.searchbar-top{order:3;flex:1 1 100%;max-width:none}
  .topbar>.topbar-acciones{order:2}
}

/* ========================================================================== 
   Vidriera comercial. La composición es común a todos los rubros; la paleta,
   la foto, la densidad y las secciones siguen saliendo de la configuración.
   Se limita a la portada para no cambiar las pantallas de cuenta ni el panel.
   ========================================================================== */
.catalogo-vitrina #app{background:var(--paper);box-shadow:none}
.catalogo-vitrina .promo-ribbon{
  min-height:34px;padding:7px 18px;background:var(--sec);color:var(--on-sec);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:11px;font-weight:750;letter-spacing:.075em;text-transform:uppercase;
}
.catalogo-vitrina .topbar{
  z-index:27;gap:24px;padding:18px clamp(18px,3vw,52px);
  background:var(--card);border-bottom:1px solid var(--line);
}
.catalogo-vitrina .topbar:after{display:none}
.catalogo-vitrina .brand{flex:0 1 auto;gap:11px}
.catalogo-vitrina .brand-logo{width:52px;height:52px;border-radius:7px}
.catalogo-vitrina .brand-nombre{font-family:var(--sans);font-size:26px;font-weight:800;letter-spacing:-.045em}
.catalogo-vitrina .brand-sub{margin-top:4px}
.catalogo-vitrina .topbar>.searchbar-top{
  order:0;flex:1 1 320px;max-width:680px;min-width:180px;margin:0 auto;
}
.catalogo-vitrina .topbar>.searchbar-top input{
  height:50px;padding-left:44px;border-radius:5px;background:var(--card);
}
.catalogo-vitrina .topbar>.searchbar-top svg{margin-left:16px}
.catalogo-vitrina .topbar>.topbar-acciones{order:0;gap:9px}
.catalogo-vitrina .icon-btn{width:44px;height:44px;border-radius:7px;color:var(--ink);background:var(--card)}
.catalogo-vitrina .subnav{background:var(--card);box-shadow:0 2px 8px rgba(0,0,0,.05)}
.catalogo-vitrina .subnav-tools{max-width:1440px;margin:auto}
.catalogo-vitrina .subnav-tools .searchbar{background:var(--card);padding:11px clamp(18px,3vw,52px)}
.catalogo-vitrina .subnav-tools .searchbar input{height:48px;border-radius:5px}
.catalogo-vitrina .subnav-tools .searchbar svg{margin-left:17px}
.catalogo-vitrina .catnav{
  gap:27px;padding:0 clamp(18px,3vw,52px);background:var(--card);
  border-top:1px solid var(--line-soft);scroll-snap-type:x proximity;
  scroll-padding-inline:clamp(18px,3vw,52px);
}
.catalogo-vitrina .catnav-chip{
  flex:none;min-height:50px;padding:12px 0 13px;border-radius:0;
  color:var(--ink);font-size:12px;font-weight:750;letter-spacing:.055em;
  text-transform:uppercase;scroll-snap-align:start;
}
.catalogo-vitrina .catnav-chip .cnt{font-size:10px;font-weight:600;letter-spacing:0}
.catalogo-vitrina .catnav-chip:after{height:3px}
.catalogo-vitrina .benefits-bar{
  min-height:52px;padding:8px clamp(18px,3vw,52px);display:flex;align-items:center;
  justify-content:space-around;gap:24px;background:var(--paper-2);
  border-bottom:1px solid var(--line-soft);color:var(--ink);
}
.catalogo-vitrina .benefits-bar span{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:12px;font-weight:650;
}
.catalogo-vitrina .benefits-bar svg{flex:none;color:var(--accent-text)}
.catalogo-vitrina .contenido{padding:0 0 28px}
.catalogo-vitrina .banner{
  min-height:clamp(290px,32vw,465px);align-items:center;border:0;
  background:linear-gradient(115deg,var(--sec),var(--pri));
}
.catalogo-vitrina .banner:not(.banner-con-portada){color:var(--on-sec)}
.catalogo-vitrina .banner-inner{
  width:100%;max-width:850px;padding:42px clamp(22px,6vw,92px);
  background:none;
}
.catalogo-vitrina .banner-eyebrow{
  display:inline-block;margin-bottom:16px;font-size:12px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
}
.catalogo-vitrina .banner-inner h2{
  max-width:16ch;margin:0 0 15px;font-family:var(--sans);
  font-size:clamp(34px,4.4vw,66px);font-weight:850;
  letter-spacing:-.045em;line-height:1.06;
}
.catalogo-vitrina .banner-inner p{max-width:45ch;font-size:clamp(15px,1.4vw,18px);line-height:1.5}
.catalogo-vitrina .seccion{margin:34px 0 0;padding:0 clamp(16px,3vw,52px);scroll-margin-top:115px}
.catalogo-vitrina .seccion-titulo{
  gap:14px;margin:0 0 18px;font-family:var(--sans);
  font-size:clamp(21px,2vw,28px);font-weight:800;letter-spacing:-.035em;
}
.catalogo-vitrina .seccion-titulo:after{background:var(--line)}
.catalogo-vitrina .seccion-categorias{margin-top:32px}
.catalogo-vitrina .seccion-categorias .seccion-titulo{font-size:clamp(21px,2vw,28px)}
.catalogo-vitrina .cat-grid{
  display:flex;gap:18px;overflow-x:auto;margin:0 calc(-1 * clamp(16px,3vw,52px));
  padding:0 clamp(16px,3vw,52px) 10px;scroll-padding:clamp(16px,3vw,52px);
  scrollbar-width:none;scroll-snap-type:x proximity;
}
.catalogo-vitrina .cat-grid{justify-content:safe center}
.catalogo-vitrina .cat-grid::-webkit-scrollbar{display:none}
.catalogo-vitrina .cat-tile{
  flex:0 0 120px;min-width:0;gap:8px;padding:2px 0 8px;
  border:0;background:transparent;box-shadow:none;scroll-snap-align:start;
}
.catalogo-vitrina .cat-tile-img{
  width:102px;height:102px;border:2px solid var(--line-soft);
  box-shadow:0 3px 12px rgba(0,0,0,.06);font-size:38px;
}
.catalogo-vitrina .cat-tile-nombre{font-size:13px;font-weight:750;line-height:1.25}
.catalogo-vitrina .cat-tile-cant{font-size:11px}
.catalogo-vitrina .grid{gap:14px;grid-template-columns:repeat(auto-fill,minmax(max(175px,var(--col-min)),1fr))}
.catalogo-vitrina.cols-fijas .catalog-grid{
  grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
}
@media(max-width:1020px) and (min-width:761px){
  .catalogo-vitrina.cols-fijas .catalog-grid{grid-template-columns:repeat(var(--cols-tablet,4),minmax(0,1fr))}
}
.catalogo-vitrina .card{
  border:1px solid var(--line-soft);border-radius:6px;box-shadow:none;
}
.catalogo-vitrina .card-media{background:var(--paper-2)}
.catalogo-vitrina .card-ph{font-family:var(--sans);font-weight:750}
.catalogo-vitrina .card-body{padding:14px;gap:6px}
.catalogo-vitrina .card-nombre{font-size:14px;font-weight:700;line-height:1.35}
.catalogo-vitrina .card-meta{font-size:10px}
.catalogo-vitrina .card-foot{padding-top:9px;align-items:center}
.catalogo-vitrina .precio{font-size:17px}
.catalogo-vitrina .btn-add{width:38px;height:38px;border-radius:6px}
.catalogo-vitrina .btn-add:disabled{width:auto}
.catalogo-vitrina .rail{gap:14px}
.catalogo-vitrina .rail .card{flex-basis:225px;max-width:225px}
.catalogo-vitrina .pie{background:var(--card);margin-top:16px;padding:30px 18px 26px}
.catalogo-vitrina .fab-cart{border-radius:8px}
@media(hover:hover){
  .catalogo-vitrina .card:hover{box-shadow:0 8px 24px rgba(0,0,0,.1)}
  .catalogo-vitrina .cat-tile:hover{box-shadow:none}
}
@media(max-width:760px){
  .catalogo-vitrina .cat-grid{justify-content:flex-start}
  .catalogo-vitrina .promo-ribbon{min-height:30px;padding:6px 12px;font-size:10px}
  .catalogo-vitrina .topbar{gap:8px;row-gap:11px;padding:12px 15px}
  .catalogo-vitrina .brand{flex:1 1 auto;min-width:0;gap:9px}
  .catalogo-vitrina .brand-logo{width:44px;height:44px}
  .catalogo-vitrina .brand-nombre{font-size:21px}
  .catalogo-vitrina .brand-sub{font-size:11px;gap:6px}
  .catalogo-vitrina .icon-btn{width:42px;height:42px}
  .catalogo-vitrina .topbar>.topbar-acciones{order:2;gap:5px}
  .catalogo-vitrina .topbar>.searchbar-top{order:3;flex:1 1 100%;max-width:none;min-width:0}
  .catalogo-vitrina .topbar>.searchbar-top input{height:48px}
  .catalogo-vitrina .subnav-tools .searchbar{padding:9px 14px}
  .catalogo-vitrina .catnav{gap:22px;padding:0 15px;scroll-padding-inline:15px}
  .catalogo-vitrina .catnav-chip{min-height:44px;padding:10px 0;font-size:11px}
  .catalogo-vitrina .benefits-bar{
    justify-content:flex-start;gap:22px;min-height:44px;padding:7px 15px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .catalogo-vitrina .benefits-bar::-webkit-scrollbar{display:none}
  .catalogo-vitrina .benefits-bar span{font-size:11px}
  .catalogo-vitrina .benefits-bar svg{width:18px;height:18px}
  .catalogo-vitrina .banner{min-height:280px;align-items:flex-end;background-position:center}
  .catalogo-vitrina .banner-inner,
  .catalogo-vitrina .banner-con-portada .banner-inner{
    max-width:none;padding:52px 20px 26px;
    background:linear-gradient(0deg,rgba(10,12,16,.7),rgba(10,12,16,.14) 80%,transparent);
  }
  .catalogo-vitrina .banner:not(.banner-con-portada) .banner-inner{background:none}
  .catalogo-vitrina .banner-eyebrow{margin-bottom:9px;font-size:10px}
  .catalogo-vitrina .banner-inner h2{max-width:18ch;margin-bottom:8px;font-size:clamp(29px,8vw,42px)}
  .catalogo-vitrina .banner-inner p{font-size:13px}
  .catalogo-vitrina .seccion{margin-top:28px;padding:0 15px;scroll-margin-top:106px}
  .catalogo-vitrina .seccion-titulo{margin-bottom:14px;font-size:21px}
  .catalogo-vitrina .cat-grid{gap:10px;margin:0 -15px;padding:0 15px 8px;scroll-padding:15px}
  .catalogo-vitrina .cat-tile{flex-basis:90px}
  .catalogo-vitrina .cat-tile-img{width:76px;height:76px;font-size:29px}
  .catalogo-vitrina .cat-tile-nombre{font-size:11.5px}
  .catalogo-vitrina .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .catalogo-vitrina.cols-fijas .catalog-grid{grid-template-columns:repeat(var(--cols-mobile,2),minmax(0,1fr));gap:10px}
  .catalogo-vitrina .card-body{padding:10px;gap:4px}
  .catalogo-vitrina .card-nombre{font-size:13px;line-height:1.3}
  .catalogo-vitrina .card-meta{font-size:9px}
  .catalogo-vitrina .card-foot{gap:5px}
  .catalogo-vitrina .precio{font-size:14px}
  .catalogo-vitrina .precio-oculto{font-size:11px}
  .catalogo-vitrina .btn-add{width:36px;height:36px}
  .catalogo-vitrina .btn-add:disabled{height:32px;padding:0 7px;font-size:9px}
  .catalogo-vitrina .rail{margin:0 -15px;padding:2px 15px 10px;scroll-padding:15px}
  .catalogo-vitrina .rail .card{flex-basis:65vw;max-width:250px}
  .catalogo-vitrina .fab-cart{bottom:calc(10px + env(safe-area-inset-bottom));max-width:calc(100vw - 20px)}
}
@media(max-width:360px){
  .catalogo-vitrina .topbar{padding-left:11px;padding-right:11px}
  .catalogo-vitrina .brand-nombre{font-size:18px}
  .catalogo-vitrina .brand-logo{width:40px;height:40px}
  .catalogo-vitrina .icon-btn{width:38px;height:40px}
  .catalogo-vitrina .card-nombre{font-size:12.5px}
}
/* Las vistas de lista de cada rubro y el selector del cliente conservan su formato. */
.catalogo-vitrina .vista-lista .catalog-grid,
.catalogo-vitrina .grid.forzar-lista{display:flex}

/* ========================================================================== 
   Compra y navegación refinadas: una vidriera clara, sin grandes espacios
   vacíos en artículos sin foto, y compra guiada con resumen siempre a mano.
   ========================================================================== */
.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}
.catalogo-vitrina{--ui-shadow:0 10px 28px rgba(27,36,48,.08)}
.catalogo-vitrina .promo-ribbon{background:var(--sec);font-size:10px;letter-spacing:.11em}
.catalogo-vitrina .topbar{gap:30px;padding-top:20px;padding-bottom:20px}
.catalogo-vitrina .brand-logo{border:0;padding:0;background:transparent}
.catalogo-vitrina .brand-nombre{font-size:28px;letter-spacing:-.04em}
.catalogo-vitrina .topbar>.searchbar-top input{
  border:1px solid var(--line);border-radius:3px;box-shadow:none;
  font-size:14px;background:#fff;
}
.catalogo-vitrina .topbar>.searchbar-top input:focus{border-color:var(--accent-text);box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 13%,transparent)}
.catalogo-vitrina .topbar-acciones{gap:16px}
.catalogo-vitrina .topbar-acciones .icon-btn{
  width:auto;min-width:44px;height:46px;gap:8px;padding:0 4px;border:0;
  background:transparent;color:var(--ink);font-size:12px;font-weight:700;
}
.catalogo-vitrina .topbar-acciones .icon-btn svg{flex:none}
.catalogo-vitrina .accion-label{max-width:105px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.catalogo-vitrina .icon-btn-carrito{padding-right:15px!important}
.catalogo-vitrina .carrito-badge{top:0;right:0;min-width:18px;height:18px;line-height:18px;font-size:10px}
.catalogo-vitrina .benefits-bar{background:var(--card);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.catalogo-vitrina .benefits-bar span{font-weight:600;color:var(--ink-soft)}
.catalogo-vitrina .banner{min-height:clamp(275px,29vw,410px)}
.catalogo-vitrina .banner-inner h2{font-size:clamp(31px,4vw,53px);max-width:18ch;font-weight:800;letter-spacing:-.035em}
.catalogo-vitrina .banner-inner p{font-size:16px;max-width:48ch}
.catalogo-vitrina .seccion{margin-top:42px}
.catalogo-vitrina .seccion-titulo{font-size:clamp(20px,1.9vw,25px);letter-spacing:-.025em}
.catalogo-vitrina .cat-tile-img{border:1px solid var(--line-soft);box-shadow:none}
.catalogo-vitrina .cat-tile-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--ink-soft)}
.catalogo-vitrina .cat-tile-icon svg{width:44px;height:44px}
.catalogo-vitrina .cat-tile-nombre{font-weight:700}
.catalogo-vitrina .card{border:1px solid var(--line-soft);border-radius:4px;transition:border-color .18s ease,box-shadow .18s ease}
.catalogo-vitrina .card-body{padding:14px 15px 16px}
.catalogo-vitrina .card-nombre{font-size:14px;font-weight:650;line-height:1.38}
.catalogo-vitrina .card-meta{font-size:10px;font-weight:650;letter-spacing:.045em}
.catalogo-vitrina .card-desc{color:var(--ink-soft)}
.catalogo-vitrina .card-media img{object-fit:contain;background:#fff}
.catalogo-vitrina .card-sin-media{min-height:180px;border-top:3px solid color-mix(in srgb,var(--pri) 72%,var(--line))}
.catalogo-vitrina .card-sin-media .card-body{justify-content:space-between}
.catalogo-vitrina .card-sin-media .card-nombre{font-size:15px}
.catalogo-vitrina .card-sin-media .card-foot{margin-top:18px}
.catalogo-vitrina .btn-add{border-radius:3px;box-shadow:none}
.catalogo-vitrina .btn-add:disabled{background:var(--paper-2);color:var(--ink-soft)}
.catalogo-vitrina .search-results-head{
  display:flex;align-items:end;justify-content:space-between;gap:12px;
  padding:26px clamp(16px,3vw,52px) 0;
}
.catalogo-vitrina .search-results-head div{display:flex;flex-direction:column;gap:2px;min-width:0}
.catalogo-vitrina .search-results-head div span{font-size:11px;color:var(--ink-soft);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.catalogo-vitrina .search-results-head strong{font-size:24px;font-weight:800;line-height:1.15;overflow-wrap:anywhere}
.catalogo-vitrina .search-results-head>span{font-size:12px;color:var(--ink-soft);white-space:nowrap}
/* El buscador de portada NO se oculta al buscar: si desaparece, el campo pierde
   el foco y en el celular el teclado se cierra a la primera letra. */
.catalogo-vitrina.buscando .banner,.catalogo-vitrina.buscando .benefits-bar{display:none}
.catalogo-vitrina.buscando .seccion{margin-top:22px}
.catalogo-vitrina .mobile-dock{display:none}

/* Producto: foto amplia cuando existe, ficha limpia si no existe. */
.catalogo-vitrina #ov-detalle .sheet{max-width:960px}
.catalogo-vitrina #detalle-cuerpo{display:grid;grid-template-columns:minmax(0,45%) minmax(0,55%);align-items:start}
.catalogo-vitrina #detalle-cuerpo.pd-sin-foto{display:flex;flex-direction:column}
.catalogo-vitrina #detalle-cuerpo.pd-sin-foto .pd-hero{display:none}
.catalogo-vitrina .pd-hero{grid-column:1;grid-row:1/3;aspect-ratio:1;background:#fff}
.catalogo-vitrina .pd-hero img{object-fit:contain}
.catalogo-vitrina .pd-body{grid-column:2;padding:38px 36px 12px}
.catalogo-vitrina .pd-sin-foto .pd-body{width:100%;max-width:680px;margin:0 auto;padding-top:48px}
.catalogo-vitrina .pd-eyebrow{display:block;margin-bottom:10px;color:var(--accent-text);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.catalogo-vitrina .pd-nombre{font-family:var(--sans);font-size:clamp(24px,3vw,34px);line-height:1.13;letter-spacing:-.035em}
.catalogo-vitrina .pd-precio{margin:18px 0;font-size:26px;color:var(--ink)}
.catalogo-vitrina .pd-desc{font-size:14px;line-height:1.6}
.catalogo-vitrina .pd-footer{grid-column:2;padding:18px 36px 26px}
.catalogo-vitrina .pd-sin-foto .pd-footer{width:100%;max-width:680px;margin:0 auto}
.catalogo-vitrina .btn-confirmar{border-radius:3px}

/* Carrito lateral al estilo de una tienda moderna. */
.catalogo-vitrina #ov-carrito{align-items:stretch;justify-content:flex-end;padding:0;background:rgba(20,25,32,.47)}
.catalogo-vitrina #ov-carrito .sheet-carrito{
  display:flex;flex-direction:column;width:min(100%,470px);height:100dvh;max-height:100dvh;
  margin:0;border:0;border-radius:0;box-shadow:-20px 0 44px rgba(20,25,32,.13);
}
.catalogo-vitrina #ov-carrito .sheet-head{position:relative;flex:none;padding:23px 24px 18px;background:var(--card)}
.catalogo-vitrina #ov-carrito .sheet-head h2{font-family:var(--sans);font-size:21px;letter-spacing:-.025em}
.catalogo-vitrina #ov-carrito .sheet-head h2 small{font-size:14px;color:var(--ink-soft);font-weight:600}
.catalogo-vitrina .sheet-kicker{display:block;margin-bottom:2px;color:var(--accent-text);font-size:10px;font-weight:800;letter-spacing:.11em}
.catalogo-vitrina #ov-carrito .sheet-cerrar{margin-left:auto;border:0;background:transparent}
.catalogo-vitrina .carrito-items{flex:1;overflow-y:auto;padding:18px 22px 12px;background:#fbfbfc}
.catalogo-vitrina .cart-item{
  display:grid;grid-template-columns:74px minmax(0,1fr);gap:8px 14px;
  margin-bottom:12px;padding:14px;background:var(--card);
  border:1px solid var(--line-soft);border-radius:4px;box-shadow:0 2px 7px rgba(20,25,32,.035);
}
.catalogo-vitrina .cart-item-img{
  grid-column:1;grid-row:1/3;width:74px;height:74px;display:flex;align-items:center;
  justify-content:center;overflow:hidden;background:var(--paper-2);color:var(--ink-soft);
  border:1px solid var(--line-soft);border-radius:3px;font-size:25px;font-weight:750;
}
.catalogo-vitrina .cart-item-img img{width:100%;height:100%;object-fit:contain;background:#fff}
.catalogo-vitrina .cart-item-main{grid-column:2;min-width:0}
.catalogo-vitrina .cart-item-nombre{font-size:13px;font-weight:700;line-height:1.35}
.catalogo-vitrina .cart-item-unit{margin-top:5px;color:var(--ink-soft);font-size:11px}
.catalogo-vitrina .cart-item-foot{margin-top:10px;gap:8px}
.catalogo-vitrina .cart-qty{gap:0;padding:0;border-radius:3px}
.catalogo-vitrina .cart-qty button{width:32px;height:32px;background:#fff;border-radius:0}
.catalogo-vitrina .cart-qty span{min-width:24px;text-align:center;font-size:12px;font-weight:700}
.catalogo-vitrina .cart-del{color:var(--ink-soft);text-decoration:underline;font-size:11px}
.catalogo-vitrina .cart-item-precio{grid-column:2;justify-self:end;font-size:14px}
.catalogo-vitrina .carrito-vacio{margin:auto 0;padding:44px 28px}
.catalogo-vitrina .carrito-vacio h3{margin:10px 0 4px;color:var(--ink);font-size:20px}
.catalogo-vitrina .carrito-vacio p{margin:0;font-size:13px}
.catalogo-vitrina .carrito-vacio .btn-ghost{max-width:220px;margin:22px auto 0;border-radius:3px}
.catalogo-vitrina .carrito-foot{
  position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;
  flex:none;padding:18px 24px calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);box-shadow:0 -7px 20px rgba(20,25,32,.035);
}
.catalogo-vitrina .carrito-subtotal,.catalogo-vitrina .carrito-total{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  font-variant-numeric:tabular-nums;
}
.catalogo-vitrina .carrito-subtotal{font-size:14px}
.catalogo-vitrina .carrito-subtotal strong{font-weight:650}
.catalogo-vitrina .carrito-envio-nota{align-self:flex-start;margin:6px 0 16px;color:var(--ink-soft);font-size:11px}
.catalogo-vitrina .carrito-total{grid-row:auto;justify-self:auto;margin:3px 0 16px;padding-top:15px;border-top:1px solid var(--line-soft);text-align:left}
.catalogo-vitrina .carrito-total span{display:block;color:var(--ink);font-size:16px;font-weight:750;text-transform:none;letter-spacing:0}
.catalogo-vitrina .carrito-total strong{font-size:23px}
.catalogo-vitrina .carrito-foot .btn-primary{min-height:50px;border-radius:3px;text-transform:uppercase;letter-spacing:.065em;font-size:12px}
.catalogo-vitrina .carrito-links{display:flex;justify-content:space-between;gap:12px;margin-top:12px}
.catalogo-vitrina .carrito-links button{border:0;background:transparent;color:var(--ink-soft);font-size:12px;text-decoration:underline}
.catalogo-vitrina .carrito-links .link-vaciar{grid-row:auto;justify-self:auto;color:var(--ink-soft)}
.catalogo-vitrina .carrito-links .link-vaciar.confirmar-vaciado{color:var(--err);font-weight:800}

/* Finalización: página limpia, pasos reales y resumen lateral. */
.catalogo-vitrina #ov-checkout{display:block;padding:0;background:#fff}
.catalogo-vitrina #ov-checkout .sheet-checkout{
  display:block;width:100%;height:100dvh;max-width:none;max-height:100dvh;
  margin:0;border:0;border-radius:0;background:#fff;box-shadow:none;overflow-y:auto;
}
.catalogo-vitrina .checkout-head{
  height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px clamp(18px,4vw,52px);border-bottom:1px solid var(--line-soft);
}
.catalogo-vitrina .checkout-brand{display:flex;align-items:center;gap:10px;min-width:0;font-size:23px;letter-spacing:-.035em}
.catalogo-vitrina .checkout-brand-mark{
  position:relative;width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:var(--paper-2);border-radius:4px;font-weight:800;
}
.catalogo-vitrina .checkout-brand-mark img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.catalogo-vitrina .checkout-head .sheet-cerrar{border:0;background:transparent}
.catalogo-vitrina .checkout-resumen-toggle{display:none}
.catalogo-vitrina .checkout-progress{
  display:grid;grid-template-columns:repeat(3,1fr);max-width:830px;margin:20px auto 0;padding:0 30px;
}
.catalogo-vitrina .checkout-progress-step{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  color:var(--ink-soft);font-size:12px;text-align:center;
}
.catalogo-vitrina .checkout-progress-step:not(:last-child):after{
  content:"";position:absolute;top:16px;left:calc(50% + 18px);width:calc(100% - 36px);
  height:1px;background:var(--line);
}
.catalogo-vitrina .checkout-progress-step b{
  width:33px;height:33px;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:#fff;
  font-size:12px;font-weight:700;
}
.catalogo-vitrina .checkout-progress-step.activo{color:var(--ink);font-weight:750}
.catalogo-vitrina .checkout-progress-step.activo b{border-color:var(--action);background:var(--action);color:var(--on-action)}
.catalogo-vitrina .checkout-progress-step.completo b{border-color:var(--ok);color:var(--ok)}
.catalogo-vitrina .checkout-progress-step.completo b:after{content:"✓";font-size:13px}
.catalogo-vitrina .checkout-progress-step.completo b{font-size:0}
.catalogo-vitrina .checkout{
  max-width:1120px;margin:18px auto 0;padding:0 20px 60px;
}
.catalogo-vitrina .checkout-layout{display:grid;grid-template-columns:minmax(0,1fr) 345px;align-items:start;gap:56px}
.catalogo-vitrina .checkout-form-col{min-width:0;padding-top:6px}
.catalogo-vitrina .checkout-step{max-width:620px}
.catalogo-vitrina .checkout-step .co-tit{
  margin:26px 0 14px;font-family:var(--sans);font-size:12px;font-weight:800;
  letter-spacing:.075em;text-transform:uppercase;
}
.catalogo-vitrina .checkout-step .co-tit:first-child{margin-top:0}
.catalogo-vitrina .checkout-step .form-group{margin-bottom:18px}
.catalogo-vitrina .checkout-step .form-group label{font-size:12px;font-weight:650;color:var(--ink)}
.catalogo-vitrina .checkout-step .form-group input,
.catalogo-vitrina .checkout-step .form-group textarea,
.catalogo-vitrina .checkout-step .form-group select{
  min-height:51px;padding:13px 15px;border:1px solid var(--line);border-radius:3px;background:#fff;
}
.catalogo-vitrina .checkout-step .opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.catalogo-vitrina .checkout-step .radio-card{
  min-height:58px;padding:12px 14px;border:1px solid var(--line);border-radius:3px;
  background:#fff;font-size:13px;font-weight:600;cursor:pointer;
}
.catalogo-vitrina .checkout-step .radio-card:has(input:checked){border-color:var(--action);background:color-mix(in srgb,var(--pri) 5%,white)}
.catalogo-vitrina .checkout-step .radio-card input{accent-color:var(--action)}
.catalogo-vitrina .checkout-step .co-cond{margin-top:16px}
.catalogo-vitrina .checkout-continue{max-width:280px;min-height:50px;margin:27px 0 0 auto;border-radius:3px;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.catalogo-vitrina .checkout-back{margin:0 0 18px;padding:7px 0;border:0;background:transparent;color:var(--ink-soft);font-size:13px;text-decoration:underline}
.catalogo-vitrina #btn-confirmar-pedido{max-width:370px;min-height:52px;margin:28px 0 0 auto;border-radius:3px;background:var(--action);color:var(--on-action);font-size:13px}
.catalogo-vitrina .co-nota{max-width:370px;margin:10px 0 0 auto;font-size:11px}
.catalogo-vitrina .checkout-aside{
  position:sticky;top:20px;padding:20px 20px 14px;
  border:1px solid var(--line-soft);border-radius:4px;background:#fff;
  box-shadow:var(--ui-shadow);
}
.catalogo-vitrina .checkout-aside h3{margin:0 0 15px;font-size:17px;letter-spacing:-.02em}
.catalogo-vitrina .checkout-aside .co-resumen{padding:0;border:0;border-radius:0;background:transparent}
.catalogo-vitrina .checkout-aside .cr-linea{
  display:grid;grid-template-columns:55px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line-soft);
}
.catalogo-vitrina .cr-img{
  width:55px;height:55px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:var(--paper-2);border:1px solid var(--line-soft);
  color:var(--ink-soft);font-size:20px;font-weight:750;
}
.catalogo-vitrina .cr-img img{width:100%;height:100%;object-fit:contain;background:#fff}
.catalogo-vitrina .cr-descripcion{min-width:0;line-height:1.3}
.catalogo-vitrina .cr-descripcion strong{display:block;font-size:12px;font-weight:650;overflow-wrap:anywhere}
.catalogo-vitrina .cr-descripcion small{display:block;margin-top:4px;color:var(--ink-soft);font-size:11px}
.catalogo-vitrina .cr-precio{align-self:end;font-size:11px;font-weight:700;white-space:nowrap}
.catalogo-vitrina .checkout-aside .co-totales{margin:13px 0 0;padding:0;border:0}
.catalogo-vitrina .checkout-aside .ct-linea{font-size:13px;padding:5px 0}
.catalogo-vitrina .checkout-aside .ct-total{font-size:19px;padding-top:13px;margin-top:9px}
.catalogo-vitrina .ct-consulta{margin:0;color:var(--ink-soft);font-size:13px;line-height:1.45}
.catalogo-vitrina .co-bloqueo{margin:0 0 20px;border-radius:3px}
.catalogo-vitrina .co-errores{max-width:620px;border-radius:3px}
.catalogo-vitrina #ov-confirmacion .confirm h2{font-family:var(--sans);letter-spacing:-.025em}
.catalogo-vitrina #ov-confirmacion .sheet{border-radius:5px}

@media(max-width:760px){
  .catalogo-vitrina #app{padding-bottom:85px}
  .catalogo-vitrina .topbar{gap:8px;padding:11px 15px}
  .catalogo-vitrina .brand-nombre{font-size:21px}
  .catalogo-vitrina .topbar-acciones{gap:5px}
  .catalogo-vitrina .topbar-acciones .icon-btn{width:40px;min-width:40px;height:42px;padding:0}
  .catalogo-vitrina .accion-label{display:none}
  .catalogo-vitrina .banner{min-height:240px}
  .catalogo-vitrina .banner-inner h2{font-size:clamp(28px,7vw,37px)}
  .catalogo-vitrina .banner-inner p{font-size:13px}
  .catalogo-vitrina .seccion{margin-top:27px}
  .catalogo-vitrina .card-sin-media{min-height:156px}
  .catalogo-vitrina .cat-tile-icon svg{width:32px;height:32px}
  .catalogo-vitrina .card-sin-media .card-nombre{font-size:13px}
  .catalogo-vitrina .card-sin-media .card-foot{margin-top:14px}
  .catalogo-vitrina .search-results-head{padding:22px 15px 0}
  .catalogo-vitrina .search-results-head strong{font-size:20px}
  .catalogo-vitrina .mobile-dock{
    position:fixed;z-index:36;left:0;right:0;bottom:0;display:flex;align-items:stretch;
    min-height:61px;padding:5px 5px calc(5px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);background:#fff;box-shadow:0 -5px 18px rgba(20,25,32,.07);
  }
  .catalogo-vitrina .mobile-dock button{
    position:relative;flex:1;min-width:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:2px;border:0;background:transparent;
    color:var(--ink-soft);font-size:10px;font-weight:650;
  }
  .catalogo-vitrina .mobile-dock svg{width:22px;height:22px}
  .catalogo-vitrina .mobile-dock button:active{color:var(--accent-text)}
  .catalogo-vitrina .mobile-dock b{
    position:absolute;top:1px;left:calc(50% + 7px);min-width:17px;height:17px;
    padding:0 3px;border-radius:50%;background:var(--action);color:var(--on-action);
    font-size:10px;line-height:17px;text-align:center;
  }
  .catalogo-vitrina .fab-cart{display:none!important}
  .catalogo-vitrina #ov-carrito .sheet-carrito{width:100%;height:100dvh;max-height:100dvh;border-radius:0}
  .catalogo-vitrina #ov-carrito .sheet-head{padding:17px 18px 14px}
  .catalogo-vitrina .carrito-items{padding:13px 14px 8px}
  .catalogo-vitrina .carrito-foot{padding:14px 18px calc(14px + env(safe-area-inset-bottom))}
  .catalogo-vitrina #ov-detalle{align-items:flex-end;padding:0;background:rgba(20,25,32,.52)}
  .catalogo-vitrina #ov-detalle .sheet{width:100%;max-height:92dvh;height:auto;min-height:58dvh;border-radius:16px 16px 0 0;box-shadow:0 -12px 32px rgba(20,25,32,.18);overflow:hidden}
  .catalogo-vitrina #detalle-cuerpo{display:flex;flex-direction:column;max-height:92dvh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .catalogo-vitrina .pd-hero{aspect-ratio:auto;flex:none;background:#fff;overflow:hidden;border-radius:16px 16px 0 0;display:flex;align-items:center;justify-content:center;min-height:180px;max-height:52dvh;padding:12px}
  .catalogo-vitrina .pd-hero img{object-fit:contain;padding:0;width:auto;height:auto;max-width:100%;max-height:48dvh;display:block}
  .catalogo-vitrina .pd-hero .pd-ph{font-size:52px}
  .catalogo-vitrina .pd-body,.catalogo-vitrina .pd-sin-foto .pd-body{padding:20px 18px 12px}
  .catalogo-vitrina .pd-eyebrow{font-size:10px}
  .catalogo-vitrina .pd-nombre{font-size:22px;line-height:1.18}
  .catalogo-vitrina .pd-precio{font-size:22px;margin:12px 0}
  .catalogo-vitrina .pd-desc{font-size:13.5px;line-height:1.5}
  .catalogo-vitrina .grupo{margin:0 -2px;padding:14px 2px}
  .catalogo-vitrina .opcion{padding:11px 10px;border-radius:10px;border:1px solid transparent;margin-bottom:6px;background:#fff;transition:border-color .14s,background .14s}
  .catalogo-vitrina .opcion:has(input:checked){background:color-mix(in srgb,var(--pri) 7%,#fff);border-color:color-mix(in srgb,var(--pri) 22%,var(--line))}
  .catalogo-vitrina .pd-aclaracion{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
  .catalogo-vitrina .pd-aclaracion label{font-size:13px}
  .catalogo-vitrina .pd-aclaracion textarea{border-radius:10px;min-height:72px}
  .catalogo-vitrina .pd-footer,.catalogo-vitrina .pd-sin-foto .pd-footer{margin-top:auto;position:sticky;bottom:0;z-index:2;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(20,25,32,.07);padding:12px 16px calc(12px + env(safe-area-inset-bottom));gap:12px}
  .catalogo-vitrina .pd-footer .qty{border-radius:10px;padding:4px;gap:6px;background:var(--paper-2);border:1px solid var(--line)}
  .catalogo-vitrina .pd-footer .qty-btn{width:40px;height:40px;border-radius:8px;font-size:19px}
  .catalogo-vitrina .pd-footer .qty-val{min-width:32px;font-size:16px;font-weight:800}
  .catalogo-vitrina .pd-footer .btn-confirmar{flex:1;min-height:50px;border-radius:10px;font-size:15px;font-weight:750;letter-spacing:-.01em;box-shadow:0 4px 12px color-mix(in srgb,var(--pri) 22%,transparent)}
  .catalogo-vitrina #detalle-cuerpo.pd-sin-foto .pd-body{padding-top:22px}
  .catalogo-vitrina #detalle-sheet > .sheet-cerrar{top:10px;right:10px;width:36px;height:36px;border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 2px 10px rgba(0,0,0,.12);border:1px solid var(--line)}
}
@media(min-width:761px) and (max-width:1024px){
  .catalogo-vitrina #ov-detalle{align-items:center;padding:18px;background:rgba(20,25,32,.48)}
  .catalogo-vitrina #ov-detalle .sheet{max-width:720px;max-height:88dvh;height:auto;min-height:0;border-radius:16px;box-shadow:0 18px 40px rgba(20,25,32,.22)}
  .catalogo-vitrina #detalle-cuerpo{display:grid;grid-template-columns:42% 58%;max-height:88dvh}
  .catalogo-vitrina .pd-hero{aspect-ratio:auto;max-height:62vh;min-height:320px;display:flex;align-items:center;justify-content:center;background:#fff;border-right:1px solid var(--line-soft);border-bottom:0;border-radius:16px 0 0 16px;overflow:hidden;padding:14px}
  .catalogo-vitrina .pd-hero img{object-fit:contain;padding:0;width:auto;height:auto;max-width:100%;max-height:58vh;display:block}
  .catalogo-vitrina .pd-body{padding:24px 20px 14px;overflow-y:auto}
  .catalogo-vitrina .pd-footer{grid-column:2;position:sticky;bottom:0}
}
/* Compra en el celular. Este bloque habia quedado sin su @media (la llave
   de cierre estaba suelta): se aplicaba tambien en computadora, que perdia
   el resumen lateral, y la llave suelta anulaba la regla siguiente. */
@media(max-width:760px){
  .catalogo-vitrina .checkout-head{height:70px;justify-content:center;padding:10px 15px}
  .catalogo-vitrina .checkout-brand{font-size:21px}
  .catalogo-vitrina .checkout-brand-mark{width:34px;height:34px}
  .catalogo-vitrina .checkout-head .sheet-cerrar{position:absolute;right:12px;top:15px}
  .catalogo-vitrina .checkout-resumen-toggle{
    width:100%;min-height:50px;display:flex;align-items:center;justify-content:space-between;
    gap:10px;padding:11px 16px;border:0;border-bottom:1px solid var(--line);
    background:#fafbfc;color:var(--ink);font-size:12px;text-decoration:underline;
  }
  .catalogo-vitrina .checkout-resumen-toggle strong{font-size:14px;text-decoration:none;white-space:nowrap}
  .catalogo-vitrina .checkout-progress{margin:17px auto 0;padding:0 12px}
  .catalogo-vitrina .checkout-progress-step{font-size:11px}
  .catalogo-vitrina .checkout-progress-step b{width:29px;height:29px}
  .catalogo-vitrina .checkout-progress-step:not(:last-child):after{top:14px;left:calc(50% + 16px);width:calc(100% - 32px)}
  .catalogo-vitrina .checkout{margin:18px auto 0;padding:0 15px 40px}
  .catalogo-vitrina .checkout-layout{display:flex;flex-direction:column;gap:0}
  .catalogo-vitrina .checkout-form-col{width:100%;padding-top:0}
  .catalogo-vitrina .checkout-aside{display:none;position:static;order:-1;width:100%;margin:0 0 22px;box-shadow:none}
  .catalogo-vitrina .resumen-abierto .checkout-aside{display:block}
  .catalogo-vitrina .checkout-step .co-tit{margin-top:25px}
  .catalogo-vitrina .checkout-step .opts{grid-template-columns:1fr}
  .catalogo-vitrina .checkout-step .radio-card{min-height:54px}
  .catalogo-vitrina .checkout-continue,.catalogo-vitrina #btn-confirmar-pedido{max-width:none;width:100%;margin-top:24px}
  .catalogo-vitrina .co-nota{max-width:none;text-align:center}
  .catalogo-vitrina #ov-confirmacion .sheet{height:100dvh;max-height:100dvh;border-radius:0}
}
@media(max-width:360px){
  .catalogo-vitrina .topbar-acciones .icon-btn{width:36px;min-width:36px}
  .catalogo-vitrina .brand-nombre{font-size:18px}
  .catalogo-vitrina .checkout-brand{font-size:18px}
  .catalogo-vitrina .cart-item{grid-template-columns:58px minmax(0,1fr);padding:11px;gap:7px 10px}
  .catalogo-vitrina .cart-item-img{width:58px;height:58px}
}

/* Cuenta: panel claro, jerarquía de perfil y accesos rápidos */
body:not(.catalogo-vitrina){
  background:linear-gradient(180deg,#eef2f4 0,#f7f8f8 260px,var(--bg) 560px);
}
body:not(.catalogo-vitrina) #app{max-width:none;background:transparent}
body:not(.catalogo-vitrina) .topbar{
  background:rgba(255,255,255,.95);border-bottom:1px solid var(--line-soft);
  box-shadow:0 4px 22px rgba(20,25,32,.06);padding:16px clamp(18px,4vw,52px)
}
body:not(.catalogo-vitrina) .cuenta{max-width:1180px;padding:36px clamp(16px,2.2vw,28px) 72px}
body:not(.catalogo-vitrina) .cuenta-head{align-items:flex-start;margin-bottom:28px}
.cuenta-head-copy{min-width:0}
.cuenta-kicker{display:block;margin-bottom:7px;color:var(--accent-text);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.cuenta-head-copy h1{font-family:var(--sans);font-size:clamp(28px,4vw,42px);letter-spacing:-.045em;line-height:1.06;margin:0}
.cuenta-head-copy p{margin:8px 0 0;color:var(--ink-soft);font-size:14px}
.cuenta-salir{padding:10px 14px;border:1px solid var(--line);border-radius:var(--radio-btn);background:rgba(255,255,255,.7)}
.cuenta-caja{border:1px solid var(--line-soft);border-radius:12px;padding:24px;box-shadow:0 12px 30px rgba(20,25,32,.055)}
.cuenta-perfil-top{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line-soft)}
.cuenta-avatar{width:56px;height:56px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:16px;background:var(--sec);color:var(--on-sec);font-size:24px;font-weight:800}
.cuenta-perfil-top h2{margin:2px 0 8px;font-family:var(--sans);font-size:20px;letter-spacing:-.025em}
.cuenta-datos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 24px;margin-top:13px}
.cuenta-datos-grid .cuenta-linea{display:block;padding:10px 0}
.cuenta-datos-grid .cuenta-linea span{display:block;color:var(--ink-soft);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.cuenta-datos-grid .cuenta-linea strong{display:block;margin-top:3px;font-size:14px;overflow-wrap:anywhere}
.cuenta-menu-dashboard{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0 26px}
.cuenta-menu-dashboard a{position:relative;min-height:116px;padding:17px;border-radius:12px;box-shadow:0 8px 20px rgba(20,25,32,.045)}
.cuenta-menu-dashboard a strong{display:block;margin-top:14px;font-size:14px}
.cuenta-menu-dashboard a>span:not(.cuenta-menu-icon){margin-top:5px}
.cuenta-menu-icon{display:flex!important;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;background:color-mix(in srgb,var(--pri) 12%,white);color:var(--accent-text);font-size:20px!important;font-weight:700!important;line-height:1;margin:0!important}
.cuenta-menu-dashboard .cuenta-menu-destacado{background:var(--action);color:var(--on-action);border-color:var(--action)}
.cuenta-menu-dashboard .cuenta-menu-destacado>span:not(.cuenta-menu-icon){color:color-mix(in srgb,var(--on-action) 74%,transparent)}
.cuenta-menu-dashboard .cuenta-menu-destacado .cuenta-menu-icon{background:rgba(255,255,255,.15);color:var(--on-action)}
body:not(.catalogo-vitrina) .cuenta>.cuenta-caja:last-child{margin-top:14px}
body:not(.catalogo-vitrina) .cuenta-tabla{font-size:13px}
body:not(.catalogo-vitrina) .cuenta-tabla th{padding-top:4px}
body:not(.catalogo-vitrina) .cuenta-msg{border-radius:10px}
body:not(.catalogo-vitrina) .cuenta:has(> .cuenta-caja--estrecha){max-width:520px}
body:not(.catalogo-vitrina) .cuenta:has(> .cuenta-caja--estrecha) .cuenta-head{align-items:flex-end}
body:not(.catalogo-vitrina) .cuenta:has(> .cuenta-caja--estrecha) .cuenta-caja{padding:28px;box-shadow:0 16px 36px rgba(20,25,32,.08)}
body:not(.catalogo-vitrina) .cuenta:has(> .cuenta-caja--estrecha) .cuenta-caja form .btn-primary{width:100%;min-height:50px}
@media(max-width:760px){
  body:not(.catalogo-vitrina) .cuenta{padding:28px 15px 60px}
  body:not(.catalogo-vitrina) .cuenta-head{margin-bottom:22px}
  .cuenta-head-copy h1{font-size:30px}
  .cuenta-head-copy p{font-size:13px}
  .cuenta-salir{padding:8px 10px;font-size:12px}
  .cuenta-caja{padding:18px;border-radius:10px}
  .cuenta-datos-grid{display:block}
  .cuenta-menu-dashboard{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cuenta-menu-dashboard a{min-height:128px;padding:13px}
  .cuenta-menu-dashboard a strong{margin-top:11px}
}
@media(max-width:380px){
  .cuenta-head{gap:8px}
  .cuenta-salir{font-size:11px}
  .cuenta-menu-dashboard{grid-template-columns:1fr}
  .cuenta-menu-dashboard a{min-height:auto}
}

/* Mis pedidos: en celular no entra la tabla (numero, fecha, estado, items,
   total, comprobante y detalle). En escritorio queda la tabla con scroll; en
   celular se muestra como tarjetas. */
.cuenta-tabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -2px}
.cuenta-tabla-wrap .cuenta-tabla{min-width:480px}
.cuenta-tabla-wrap--pedidos .cuenta-tabla{min-width:660px}
.cuenta-pedidos-lista{display:none}
.cuenta-pedido-card{display:block;text-decoration:none;color:var(--ink);background:var(--paper);border:1px solid var(--line-soft);border-radius:10px;padding:14px 14px 12px}
.cuenta-pedido-card + .cuenta-pedido-card{margin-top:0}
.cuenta-pedido-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cuenta-pedido-card-head strong{font-size:15px;letter-spacing:-.02em}
.cuenta-pedido-card-fecha{display:block;margin-top:6px;font-size:13px;color:var(--ink-soft);line-height:1.35;overflow-wrap:anywhere}
.cuenta-pedido-card-datos{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:13.5px;color:var(--ink-soft);flex-wrap:wrap}
.cuenta-pedido-card-datos strong{color:var(--ink);font-size:14px;overflow-wrap:anywhere}
.cuenta-pedido-card-cta{display:inline-flex;align-items:center;margin-top:10px;font-size:13px;font-weight:700;color:var(--accent-text)}
.cuenta-pedido-card-cta:after{content:"›";margin-left:6px;font-size:16px;line-height:1}
@media(hover:hover){.cuenta-pedido-card:hover{border-color:color-mix(in srgb,var(--pri) 26%,var(--line));background:var(--card)}}
@media(max-width:640px){
  .cuenta-tabla-wrap--pedidos{display:none}
  .cuenta-pedidos-lista{display:grid;gap:10px}
  .cuenta-caja .cuenta-tabla-wrap .cuenta-tabla{min-width:340px}
}
/* La fila fecha/estado/etc no puede desbordar con direcciones o fechas largas */
.cuenta-caja .cuenta-linea span{flex:0 0 auto;max-width:38%}
.cuenta-caja .cuenta-linea strong{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word;text-align:right}
.cuenta-caja .cuenta-tabla td{overflow-wrap:anywhere;word-break:break-word}
@media(max-width:640px){
  .cuenta-caja .cuenta-linea{flex-wrap:wrap}
  .cuenta-caja .cuenta-linea span{max-width:100%}
  .cuenta-caja .cuenta-linea strong{text-align:left}
}

/* Tarjetas de artículos: jerarquía clara, mejor lectura y una acción de
   compra cómoda en cualquier tamaño de pantalla. */
.catalogo-vitrina .catalog-grid .card,
.catalogo-vitrina .rail .card{
  position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--line) 78%,white);
  border-radius:16px;background:linear-gradient(180deg,#fff 0%,color-mix(in srgb,var(--card) 90%,#f8fafc) 100%);
  box-shadow:0 5px 16px rgba(25,35,48,.055);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.catalogo-vitrina .catalog-grid .card-media,
.catalogo-vitrina .rail .card-media{background:linear-gradient(145deg,var(--paper-2),#fff);border-bottom:1px solid var(--line-soft)}
.catalogo-vitrina .catalog-grid .card-media img,
.catalogo-vitrina .rail .card-media img{padding:12px;object-fit:contain;transition:transform .35s ease}
.catalogo-vitrina .catalog-grid .card-ph,
.catalogo-vitrina .rail .card-ph{font-size:42px;font-weight:850;color:var(--accent-text);background:linear-gradient(145deg,color-mix(in srgb,var(--pri) 14%,#fff),#fff)}
.catalogo-vitrina .catalog-grid .card-body,
.catalogo-vitrina .rail .card-body{padding:15px 15px 16px;gap:7px}
.catalogo-vitrina .catalog-grid .card-meta,
.catalogo-vitrina .rail .card-meta{display:inline-flex;align-self:flex-start;max-width:100%;margin:0;padding:4px 8px;border-radius:999px;background:color-mix(in srgb,var(--pri) 8%,white);color:var(--accent-text);font-size:9px;font-weight:800;letter-spacing:.06em;line-height:1.2}
.catalogo-vitrina .catalog-grid .card-nombre,
.catalogo-vitrina .rail .card-nombre{min-height:2.65em;font-size:15px;font-weight:780;line-height:1.32;letter-spacing:-.015em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.catalogo-vitrina .catalog-grid .card-desc,
.catalogo-vitrina .rail .card-desc{min-height:2.75em;font-size:12px;line-height:1.42;color:var(--ink-soft)}
.catalogo-vitrina .catalog-grid .card-unidad,
.catalogo-vitrina .rail .card-unidad{margin:0;color:var(--ink-soft);font-size:11px}
.catalogo-vitrina .catalog-grid .card-foot,
.catalogo-vitrina .rail .card-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line-soft);align-items:center}
.catalogo-vitrina .catalog-grid .precio,
.catalogo-vitrina .rail .precio{font-size:19px;font-weight:850;letter-spacing:-.02em}
.catalogo-vitrina .catalog-grid .precio-viejo,
.catalogo-vitrina .rail .precio-viejo{font-size:11px}
.catalogo-vitrina .catalog-grid .precio-oculto,
.catalogo-vitrina .rail .precio-oculto{font-size:11px;font-weight:750;color:var(--ink-soft);line-height:1.25}
.catalogo-vitrina .catalog-grid .btn-add,
.catalogo-vitrina .rail .btn-add{width:43px;height:43px;border-radius:12px;background:var(--action);box-shadow:0 6px 12px color-mix(in srgb,var(--pri) 24%,transparent)}
.catalogo-vitrina .catalog-grid .btn-add-texto,
.catalogo-vitrina .rail .btn-add-texto{width:auto;height:39px;padding:0 15px;border-radius:10px;font-size:12px}
.catalogo-vitrina .catalog-grid .btn-add:disabled,
.catalogo-vitrina .rail .btn-add:disabled{width:auto;height:36px;border-radius:10px;box-shadow:none;background:color-mix(in srgb,var(--ink) 8%,white);color:var(--ink-soft)}
@media(hover:hover){
  .catalogo-vitrina .catalog-grid .card:hover,
  .catalogo-vitrina .rail .card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--pri) 38%,var(--line));box-shadow:0 14px 28px rgba(25,35,48,.12)}
  .catalogo-vitrina .catalog-grid .card:hover .card-media img,
  .catalogo-vitrina .rail .card:hover .card-media img{transform:scale(1.045)}
}
@media(max-width:760px){
  .catalogo-vitrina .catalog-grid .card,
  .catalogo-vitrina .rail .card{border-radius:14px}
  .catalogo-vitrina .catalog-grid .card-body,
  .catalogo-vitrina .rail .card-body{padding:12px 11px 13px;gap:6px}
  .catalogo-vitrina .catalog-grid .card-nombre,
  .catalogo-vitrina .rail .card-nombre{font-size:13.2px;min-height:2.62em}
  .catalogo-vitrina .catalog-grid .card-desc,
  .catalogo-vitrina .rail .card-desc{font-size:11px;min-height:2.8em}
  .catalogo-vitrina .catalog-grid .card-foot,
  .catalogo-vitrina .rail .card-foot{padding-top:9px}
  .catalogo-vitrina .catalog-grid .precio,
  .catalogo-vitrina .rail .precio{font-size:16px}
  .catalogo-vitrina .catalog-grid .btn-add,
  .catalogo-vitrina .rail .btn-add{width:39px;height:39px;border-radius:11px}
}

/* Cabecera fija en computadora, de ALTO CONSTANTE.
   Antes se achicaba al pasar los 72px de scroll: al cambiar de alto, el
   navegador corregia la posicion del scroll (volvia a menos de 72px), la
   cabecera crecia de nuevo y asi en bucle: se "abria y cerraba" sola. Ahora
   nunca cambia de tamaño y nada escucha el scroll para acomodarla.
   En tablet/celular (≤1023px) no es fija: ahi queda pegada la barra del
   buscador. «Encabezado fijo» apagado (.encabezado-suelto) la deja correr. */
@media(min-width:1024px){
  .topbar{position:sticky;top:0;z-index:27}
  .encabezado-suelto .topbar{position:relative}
  .catalogo-vitrina .topbar{padding-top:14px;padding-bottom:14px;gap:28px;box-shadow:0 1px 0 var(--line-soft),0 8px 22px -20px rgba(20,25,32,.45)}
  .catalogo-vitrina .brand-logo{width:56px;height:56px;border-radius:12px}
  .catalogo-vitrina .brand-nombre{font-size:26px}
  .catalogo-vitrina .brand-sub{margin-top:4px}
  body:not(.catalogo-vitrina) .topbar{padding:14px clamp(18px,4vw,52px)}
  body:not(.catalogo-vitrina) .brand-logo{width:52px;height:52px;border-radius:12px}
  body:not(.catalogo-vitrina) .brand-nombre{font-size:24px}
  /* La barra del buscador y los rubros queda pegada debajo de la cabecera.
     --topbar-h lo mide app.js al cargar (0 si la cabecera no es fija). */
  .catalogo-vitrina .subnav{top:var(--topbar-h,84px)}
  .catalogo-vitrina.encabezado-suelto .subnav{top:0}
}

/* Banner principal más alto */
.banner{min-height:230px}
.catalogo-vitrina .banner{min-height:clamp(340px,34vw,500px)}
.catalogo-vitrina .banner-inner{padding:36px 30px 34px}
/* Banners que se mueven (carrusel) más bajos */
.seccion-carrusel .carrusel{padding:2px 0 10px}
.seccion-carrusel .carrusel-item{flex:0 0 68%;max-width:460px;min-height:110px}
.seccion-carrusel .carrusel-item img{max-height:170px;height:170px}
@media(max-width:760px){
  .banner{min-height:190px}
  .catalogo-vitrina .banner{min-height:300px}
  .seccion-carrusel .carrusel-item{flex-basis:78%;max-width:340px;min-height:90px}
  .seccion-carrusel .carrusel-item img{max-height:140px;height:140px}
}
/* Carrusel: animación fluida, sin mostrar nombres de archivo, solo imagen */
.carrusel{
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.carrusel::-webkit-scrollbar{display:none}
.carrusel-item{
  scroll-snap-align:center;
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, filter .35s ease;
  will-change:transform;
}
.carrusel-item img{
  transition:transform .7s ease;
}
@media(hover:hover){
  .carrusel-item:hover img{transform:scale(1.03)}
}
/* El carrusel no muestra nunca el nombre del archivo: solo imagen */
.carrusel-item .carrusel-texto:empty{display:none}
.seccion-carrusel .carrusel-texto{display:none!important}
.seccion-carrusel .carrusel-item{border:none;background:transparent;min-height:0}
.seccion-carrusel .carrusel-item img{position:static;inset:auto;width:100%;height:auto;object-fit:cover;border-radius:10px}
/* Búsqueda backend: resultados adicionales */
.busqueda-backend{margin:22px 0 0;padding:18px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 16px rgba(27,31,38,.06)}
.busqueda-backend-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.busqueda-backend-head h3{margin:0;font-size:16px;font-weight:750;letter-spacing:-.01em}
.busqueda-backend-head span{font-size:12px;color:var(--ink-soft);font-weight:600}
.busqueda-backend-ayuda{margin:12px 0 0;color:var(--ink-soft);font-size:12.5px;text-align:center}
/* Tooltip solo retiro en tarjeta */
.chip-retiro[title]{cursor:help}
.card{position:relative}
.card .chip-retiro{cursor:help}
@media(hover:hover){.card .chip-retiro:hover{filter:brightness(1.05)}}
/* Checkout: aviso por línea */
.cr-linea small.solo-retiro{color:#92400e;font-weight:700}
@media(prefers-reduced-motion:reduce){
  .banner,.carrusel,.carrusel-item,.carrusel-item img{transition:none!important;scroll-behavior:auto!important}
}

/* ---------------------------------------------------------------------------
   Comprobantes del pedido (factura, ticket, proforma, presupuesto).
   Los publica el sistema de gestion: el chip avisa que el pedido ya tiene
   documento y el bloque del detalle permite bajarlo en PDF.
   --------------------------------------------------------------------------- */
.cuenta-doc-chip{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:4px 10px 4px 8px;border-radius:99px;font-size:12px;font-weight:700;line-height:1.25;background:#eef2f7;color:#1f3d63;border:1px solid #d9e2ec;max-width:100%}
.cuenta-doc-chip .cuenta-doc-ico{flex:0 0 auto;width:16px;height:16px}
.cuenta-doc-chip > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cuenta-tabla .cuenta-doc-chip{margin-top:0}
/* En la tarjeta el chip ocupa su propio renglon: asi no se pega al enlace de
   detalle cuando la etiqueta es larga (por ejemplo "Nota de credito"). */
.cuenta-pedido-card .cuenta-doc-chip{display:flex;width:-moz-max-content;width:max-content;max-width:100%}
.cuenta-doc-chip--presupuesto{background:#fdf3e3;color:#8a5212;border-color:#f0dcbb}
.cuenta-doc-chip--proforma{background:#eef0fb;color:#3b3c8f;border-color:#d9dcf3}
.cuenta-doc-chip--remito{background:#e9f5f1;color:#1d6150;border-color:#cbe6dd}
.cuenta-doc-chip--ticket{background:#eef6ef;color:#2f6b3d;border-color:#d7e7da}
.cuenta-doc-chip--nota_credito,.cuenta-doc-chip--nota_debito{background:#fbeeed;color:#8f3128;border-color:#f0d6d3}
.cuenta-doc-vacio{color:var(--ink-soft)}
.cuenta-doc-ayuda{margin:-4px 0 12px;font-size:12.5px;color:var(--ink-soft)}
.cuenta-doc-lista{display:grid;gap:10px}
.cuenta-doc{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line-soft);border-radius:10px;background:var(--paper)}
.cuenta-doc--anulado{opacity:.72}
.cuenta-doc-marca{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:#eef2f7;color:#1f3d63;border:1px solid #d9e2ec}
.cuenta-doc-marca .cuenta-doc-ico{width:20px;height:20px}
.cuenta-doc-datos{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cuenta-doc-datos strong{font-size:14px;letter-spacing:-.01em;overflow-wrap:anywhere}
.cuenta-doc-datos span{font-size:12.5px;color:var(--ink-soft);overflow-wrap:anywhere}
.cuenta-doc-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border-radius:9px;background:var(--action);color:var(--on-action);font-size:13px;font-weight:700;text-decoration:none;text-align:center}
@media(hover:hover){.cuenta-doc-btn:hover{filter:brightness(1.06)}}
@media(max-width:560px){
  .cuenta-doc{flex-wrap:wrap}
  .cuenta-doc-btn{width:100%}
}

/* ==========================================================================
   Refinamiento 3 (1.5.0) · tienda estable, prolija y fiel a la configuración.
   Bloque final: ajusta valores de arriba sin renombrar clases ni tocar el
   contrato de DOM que usa public/assets/js/app.js.
   ========================================================================== */

/* ---------- «Tipo de letra» y «Esquinas» se aplican en toda la tienda ----------
   Antes la vitrina fijaba sus títulos en sans y sus radios a mano (3px en la
   compra, 16px en las tarjetas), así que esas dos opciones casi no se notaban.
   Se declaran sobre <body>, donde está la clase de la configuración, para que
   var(--serif) tome el valor de esa clase y no el de :root. */
body{--titulos:var(--serif);--titulos-peso:700;--titulos-tracking:-.015em;--r-card:14px;--r-ctrl:10px}
body.tipografia-moderna{--titulos-peso:800;--titulos-tracking:-.035em}
body.tipografia-amable{--titulos-peso:700;--titulos-tracking:-.02em}
body.bordes-rectos{--r-card:4px;--r-ctrl:4px}
body.bordes-redondeados{--r-card:22px;--r-ctrl:14px}

.catalogo-vitrina .brand-nombre,
.catalogo-vitrina .seccion-titulo,
.catalogo-vitrina .banner-inner h2,
.catalogo-vitrina .pd-nombre,
.catalogo-vitrina .search-results-head strong,
.catalogo-vitrina .sheet-head h2,
.catalogo-vitrina #ov-carrito .sheet-head h2,
.catalogo-vitrina .checkout-brand strong,
.catalogo-vitrina .checkout-aside h3,
.catalogo-vitrina .vacio h3,
.catalogo-vitrina .sin-resultados h3,
.catalogo-vitrina #ov-confirmacion .confirm h2,
.pie-nombre,
body:not(.catalogo-vitrina) .brand-nombre,
.cuenta-head-copy h1{
  font-family:var(--titulos);font-weight:var(--titulos-peso);letter-spacing:var(--titulos-tracking);
}

/* ---------- Franja superior (texto configurable) ---------- */
.catalogo-vitrina .promo-ribbon{min-height:32px;padding:7px 16px;line-height:1.35}
.catalogo-vitrina .promo-ribbon span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:960px}

/* ---------- Encabezado ---------- */
.catalogo-vitrina .brand-logo{border-radius:var(--r-ctrl)}
.brand-eslogan{display:block;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--ink-soft)}

/* ---------- Buscador ---------- */
/* Una sola cruz para limpiar: el navegador sumaba la suya al lado de la nuestra. */
.searchbar input[type=search]::-webkit-search-cancel-button,
.searchbar input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.searchbar input{-webkit-appearance:none;appearance:none}
.catalogo-vitrina .topbar>.searchbar-top input,
.catalogo-vitrina .subnav-tools .searchbar input,
.catalogo-vitrina .searchbar-hero input{border-radius:var(--r-ctrl);background:var(--card)}
.catalogo-vitrina .topbar>.searchbar-top,
.catalogo-vitrina .searchbar-hero{background:transparent}
.catalogo-vitrina .subnav-tools .searchbar input:focus,
.catalogo-vitrina .searchbar-hero input:focus{border-color:var(--pri);box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 18%,transparent)}
#buscar-limpiar{
  width:30px;height:30px;padding:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper-2);color:var(--ink-soft);font-size:12px;line-height:1;
  transition:background-color .14s ease,color .14s ease;
}
@media(hover:hover){#buscar-limpiar:hover{background:color-mix(in srgb,var(--pri) 14%,var(--paper-2));color:var(--ink)}}
.catalogo-vitrina .subnav-tools .searchbar{padding:8px 14px}
.catalogo-vitrina .subnav-tools .searchbar input{height:46px}
.catalogo-vitrina .buscador-hero{padding:18px clamp(16px,3vw,52px) 4px;max-width:none}
.catalogo-vitrina .searchbar-hero input{height:56px;box-shadow:0 6px 20px -14px rgba(20,25,32,.5)}

/* ---------- Barra fija en computadora: buscador y rubros en una fila ----------
   Dos renglones fijos (buscador a todo el ancho + rubros) se comían casi un
   tercio de la pantalla. En una fila queda más contenido a la vista. */
@media(min-width:1024px){
  .catalogo-vitrina .subnav{display:flex;align-items:center;gap:0 14px;padding:0 clamp(18px,3vw,52px)}
  .catalogo-vitrina .subnav-tools{flex:0 1 480px;min-width:300px;max-width:none;margin:0}
  .catalogo-vitrina .subnav-tools:only-child{flex:1 1 auto;max-width:760px}
  .catalogo-vitrina .subnav-tools .searchbar{padding:10px 0}
  .catalogo-vitrina .subnav-tools .searchbar input{height:44px}
  .catalogo-vitrina .subnav-tools .searchbar svg{margin-left:14px}
  .catalogo-vitrina .subnav-tools #buscar-limpiar{right:8px}
  .catalogo-vitrina .subnav .vista-selector{margin:0 0 0 10px}
  /* El relleno lateral deja el primer y el último rubro fuera del degradé del borde. */
  .catalogo-vitrina .subnav .catnav{flex:1 1 auto;min-width:0;border-top:0;padding:0 18px;scroll-padding-inline:18px;background:transparent}
  .catalogo-vitrina .subnav .catnav-chip{min-height:64px}
}

/* ---------- Secciones: quedan justo debajo de las barras fijas ---------- */
/* --sticky-h lo mide app.js (encabezado fijo + barra del buscador). */
.catalogo-vitrina .seccion{scroll-margin-top:calc(var(--sticky-h,110px) + 14px)}
.ancla-productos{height:0;scroll-margin-top:calc(var(--sticky-h,110px) + 4px)}

/* ---------- Rubros: contador opcional ---------- */
.sin-contadores .catnav-chip .cnt,
.sin-contadores .cat-tile-cant,
.sin-contadores .cat-lista .cnt,
.sin-contadores .marca-tile .cnt{display:none}

/* ---------- Banner: alto configurable + botón opcional ---------- */
.catalogo-vitrina.banner-media .banner{min-height:clamp(250px,24vw,360px)}
.catalogo-vitrina.banner-baja .banner{min-height:clamp(170px,15vw,240px)}
.catalogo-vitrina.banner-baja .banner-inner{padding-top:26px;padding-bottom:24px}
.catalogo-vitrina.banner-baja .banner-inner h2{font-size:clamp(24px,2.8vw,38px);margin-bottom:8px}
.catalogo-vitrina.banner-baja .banner-eyebrow{margin-bottom:8px}
@media(max-width:760px){
  .catalogo-vitrina.banner-media .banner{min-height:230px}
  .catalogo-vitrina.banner-baja .banner{min-height:170px}
  .catalogo-vitrina.banner-baja .banner-inner{padding-top:34px;padding-bottom:18px}
}
.banner-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  min-height:46px;padding:0 20px;border:0;border-radius:var(--r-ctrl);
  background:#fff;color:#16181d;font-size:14.5px;font-weight:750;letter-spacing:-.005em;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.65);cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease;
}
@media(hover:hover){.banner-cta:hover{transform:translateY(-1px);box-shadow:0 14px 28px -12px rgba(0,0,0,.7)}}
.banner-cta:active{transform:scale(.98)}
.banner-cta span{transition:transform .16s ease}
@media(hover:hover){.banner-cta:hover span{transform:translateX(3px)}}

/* ---------- Tarjetas ---------- */
.catalogo-vitrina .catalog-grid .card,
.catalogo-vitrina .rail .card{border-radius:var(--r-card)}
/* Código · marca · rubro en un renglón: la pastilla se partía en dos líneas
   en el celular y empujaba el nombre hacia abajo. */
.catalogo-vitrina .catalog-grid .card-meta,
.catalogo-vitrina .rail .card-meta{
  display:block;align-self:stretch;max-width:100%;padding:0;border-radius:0;background:none;
  color:var(--accent-text);font-size:10.5px;font-weight:750;letter-spacing:.05em;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.catalogo-vitrina .card-unidad{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px}
.card-sep{opacity:.55}
.catalogo-vitrina .catalog-grid .btn-add,
.catalogo-vitrina .rail .btn-add{border-radius:var(--r-ctrl)}
.catalogo-vitrina .catalog-grid .btn-add:disabled,
.catalogo-vitrina .rail .btn-add:disabled{
  height:32px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-ctrl);
  background:transparent;color:var(--ink-soft);font-size:10px;letter-spacing:.06em;
}
/* Precio reservado: un candado chico dice por qué no se ve. */
.catalogo-vitrina .precio-oculto{display:inline-flex;align-items:center;gap:5px}
.catalogo-vitrina .precio-oculto:before{
  content:"";flex:none;width:12px;height:12px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.badge-retiro-inline{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;font-size:9.5px;font-weight:800;padding:4px 7px;border-radius:5px}
.card-body>.badges-inline{margin-bottom:2px}

/* ---------- Bloque de rubros ---------- */
.catalogo-vitrina .cat-tile-img{background:var(--card);transition:border-color .16s ease,box-shadow .16s ease}
@media(hover:hover){
  .catalogo-vitrina .cat-tile:hover .cat-tile-img{border-color:color-mix(in srgb,var(--pri) 45%,var(--line));box-shadow:0 8px 18px -12px rgba(20,25,32,.45)}
  .catalogo-vitrina .cat-tile:hover .cat-tile-nombre{color:var(--accent-text)}
}

/* ---------- Carrito, compra y hojas: mismas esquinas en todo ---------- */
.catalogo-vitrina .cart-item{border-radius:var(--r-ctrl)}
.catalogo-vitrina .cart-item-img,
.catalogo-vitrina .cr-img{border-radius:max(3px,calc(var(--r-ctrl) - 3px))}
.catalogo-vitrina .cart-qty{border-radius:var(--r-ctrl);overflow:hidden}
.catalogo-vitrina .carrito-foot .btn-primary,
.catalogo-vitrina .carrito-vacio .btn-ghost,
.catalogo-vitrina .checkout-continue,
.catalogo-vitrina #btn-confirmar-pedido,
.catalogo-vitrina .btn-confirmar,
.catalogo-vitrina .pd-footer .btn-confirmar,
.catalogo-vitrina .fab-cart{border-radius:var(--r-ctrl)}
.catalogo-vitrina .checkout-step .form-group input,
.catalogo-vitrina .checkout-step .form-group textarea,
.catalogo-vitrina .checkout-step .form-group select,
.catalogo-vitrina .checkout-step .radio-card,
.catalogo-vitrina .co-bloqueo,
.catalogo-vitrina .co-errores{border-radius:var(--r-ctrl)}
.catalogo-vitrina .checkout-aside{border-radius:var(--r-card)}
.catalogo-vitrina #ov-confirmacion .sheet{border-radius:var(--r-card)}
@media(max-width:760px){
  .catalogo-vitrina #ov-detalle .sheet{border-radius:calc(var(--r-card) + 2px) calc(var(--r-card) + 2px) 0 0}
  .catalogo-vitrina .pd-hero{border-radius:calc(var(--r-card) + 2px) calc(var(--r-card) + 2px) 0 0}
  .catalogo-vitrina #ov-confirmacion .sheet{border-radius:0}
}

/* Carrito vacío: el aviso queda centrado, no pegado al pie con un bloque gris arriba. */
.catalogo-vitrina .carrito-items:empty{display:none}
.catalogo-vitrina #ov-carrito .carrito-vacio{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0}

/* ---------- Pie de la tienda ---------- */
.catalogo-vitrina .pie-tienda{
  text-align:left;margin-top:44px;padding:34px clamp(16px,3vw,52px) 24px;
  background:var(--card);border-top:1px solid var(--line-soft);color:var(--ink);
}
.pie-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,1fr);gap:24px 44px;max-width:1440px;margin:0 auto}
.pie-nombre{display:block;font-size:20px;line-height:1.2;color:var(--ink)}
.pie-tienda .pie-eslogan{margin:5px 0 0;color:var(--ink-soft);font-size:13.5px;line-height:1.45}
.pie-tienda .pie-estado{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:12px 0 0;font-size:12.5px;color:var(--ink-soft)}
.pie-datos{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:13.5px;line-height:1.4}
.pie-datos li{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.pie-datos li span{font-size:10.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.pie-datos a{align-self:flex-start;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
/* El pie llega hasta abajo: el aire para los botones flotantes queda dentro
   del pie y no como una franja vacía debajo. */
.catalogo-vitrina #app{padding-bottom:0}
.catalogo-vitrina .pie-tienda{padding-bottom:88px}
@media(hover:hover){.pie-datos a:hover{border-bottom-color:currentColor}}
.pie-links{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:13.5px}
.pie-links a,.pie-link-btn{
  padding:0;border:0;background:none;font:inherit;font-weight:650;cursor:pointer;
  color:var(--accent-text);text-decoration:none;border-bottom:1px solid transparent;
}
@media(hover:hover){.pie-links a:hover,.pie-link-btn:hover{border-bottom-color:currentColor}}
.pie-tienda .pie-mini{max-width:1440px;margin:26px auto 0;padding-top:16px;border-top:1px solid var(--line-soft);font-size:11.5px;color:var(--ink-soft);text-align:center;letter-spacing:.02em}@media(max-width:760px){
  .pie-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .catalogo-vitrina .pie-tienda{margin-top:34px;padding:28px 18px calc(96px + env(safe-area-inset-bottom))}
}

/* ==========================================================================
   Catálogo de a tandas (1.5.1): cada rubro muestra sus primeros artículos y
   «Ver más»; la búsqueda la resuelve el servidor y también llega de a tandas.
   ========================================================================== */

/* Mientras se busca se ve solo el bloque de resultados. */
body.buscando .contenido > .seccion,
body.buscando .contenido > .banner,
body.buscando .ancla-productos{display:none}
.resultados-busqueda{margin-top:18px}
.catalogo-vitrina .resultados-busqueda{padding:0 clamp(16px,3vw,52px)}
@media(max-width:760px){.catalogo-vitrina .resultados-busqueda{padding:0 15px}}
.resultados-busqueda .grid{transition:opacity .15s ease}
/* Mientras llega la tanda nueva lo anterior queda atenuado (no parpadea). */
.resultados-busqueda.cargando .grid{opacity:.45}

/* Botón «Ver más» (rubros y búsqueda). */
.ver-mas{display:flex;flex-direction:column;align-items:center;gap:8px;margin:20px 0 4px}
.btn-ver-mas{
  min-width:220px;min-height:46px;padding:0 26px;border-radius:var(--r-ctrl,10px);
  border:1.5px solid color-mix(in srgb,var(--pri) 55%,var(--line));
  background:var(--card);color:var(--accent-text);
  font-size:14.5px;font-weight:750;letter-spacing:-.005em;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
}
@media(hover:hover){
  .btn-ver-mas:hover{background:var(--action);border-color:var(--action);color:var(--on-action);box-shadow:0 8px 18px -10px color-mix(in srgb,var(--pri) 70%,transparent)}
}
.btn-ver-mas:active{transform:scale(.98)}
.btn-ver-mas:disabled,.btn-ver-mas.cargando{cursor:progress;opacity:.7;transform:none}
.ver-mas-cuenta{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
@media(max-width:760px){.btn-ver-mas{width:100%;max-width:360px}}