/* ==========================================================================
   Tema RETRO / VINTAGE naranja (referencia de Peter, 2026-10-13)
   Fondo naranja pleno; paneles crema con borde negro grueso, esquinas pildora y
   sombra solida desplazada; titulos display condensados en mayusculas; acentos
   en script. Todos los colores/fuentes/radios vienen de TiendaConfig (:root).
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--f-cuerpo);color:var(--c-texto);background:var(--c-fondo);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--f-titulos);text-transform:uppercase;letter-spacing:.02em;font-weight:400;color:var(--c-texto);line-height:1.05;margin:0 0 .5rem}
h1{font-size:clamp(2.2rem,4.5vw,3.6rem)}h2{font-size:clamp(1.8rem,3.2vw,2.6rem)}h5,h6{font-size:1.2rem}
a{color:inherit;text-decoration:none}
a:hover{color:inherit;text-decoration:underline;text-underline-offset:3px}
img{max-width:100%;display:block}
.container{max-width:1280px}
.fw-500{font-weight:500}
.script{font-family:var(--f-script);text-transform:none;letter-spacing:0;font-weight:400}
.text-muted{color:inherit!important;opacity:.75}

/* ---- Panel crema (bloque base del tema) ---- */
.panel,.caja,.resumen,.card-producto,.categoria-card,.coleccion-banner,.filtros,.checkout-paso,.marco,.tabla-panel{
  background:var(--c-fondo-alt);color:var(--c-secundario);border:var(--borde) solid var(--c-secundario);
  border-radius:var(--radio);box-shadow:var(--sombra) var(--sombra) 0 var(--c-secundario)}
.panel h1,.panel h2,.panel h3,.caja h6,.resumen h5,.checkout-paso h2,.coleccion-banner h1,.categoria-titulo{color:var(--c-primario)}
.panel .text-muted,.caja .text-muted,.resumen .text-muted,.checkout-paso .text-muted{opacity:.7}
.caja{padding:1.2rem 1.4rem}
.caja h6{font-size:1.1rem;margin-bottom:.8rem}

/* Titulo en pildora con banda negra detras (estilo "HOW IT WORKS") */
.titulo-banda{position:relative;display:flex;align-items:center;margin:0 0 2rem}
.titulo-banda::before{content:"";position:absolute;left:0;right:0;top:50%;height:14px;transform:translateY(-50%);background:var(--c-secundario)}
.titulo-banda.derecha{justify-content:flex-end}
.titulo-banda .pildora{position:relative;display:inline-block;background:var(--c-fondo-alt);border:var(--borde) solid var(--c-secundario);border-radius:999px;box-shadow:var(--sombra) var(--sombra) 0 var(--c-secundario);padding:.35rem 2rem .25rem;max-width:100%}
.titulo-banda .pildora h1,.titulo-banda .pildora h2{margin:0;color:var(--c-primario);font-size:clamp(2rem,5vw,4rem);text-shadow:3px 3px 0 rgba(31,26,23,.18);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.titulo-banda .pildora .script{display:block;color:var(--c-secundario);font-size:clamp(1.4rem,3vw,2.4rem);margin-top:-.6em;text-align:right;padding-right:.5rem}
.titulo-banda .pildora h1.saludo{font-family:var(--f-cuerpo);text-transform:none;letter-spacing:0;font-weight:700;font-size:clamp(1.25rem,3.5vw,2rem);color:var(--c-secundario);text-shadow:none;padding:.35rem 0}
.titulo-banda .extra{position:relative;margin-left:auto;background:var(--c-fondo);padding:0 .6rem;font-size:.9rem;text-decoration:underline;text-underline-offset:3px}

/* ---- Botones ---- */
.btn-principal,.btn-secundario,.btn-agregar{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.8rem;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;border-radius:999px;cursor:pointer;transition:all .15s;text-decoration:none!important;line-height:1.2;border:2px solid var(--c-secundario)}
.btn-principal{background:var(--c-boton);color:var(--c-boton-texto);border-color:var(--c-boton)}
.btn-principal:hover{background:var(--c-boton-hover);border-color:var(--c-secundario);color:var(--c-boton-texto)}
.btn-principal:disabled{opacity:.5;cursor:default}
.btn-secundario,.btn-agregar{background:var(--c-fondo-alt);color:var(--c-secundario)}
.btn-secundario:hover,.btn-agregar:hover{background:var(--c-secundario);color:var(--c-fondo-alt)}
.btn-agregar{width:100%;padding:.55rem 1rem;font-size:.75rem;margin-top:.7rem}
.btn-icono{background:none;border:0;font-size:1.45rem;color:var(--c-texto);padding:.3rem .5rem;position:relative;line-height:1;display:inline-flex}
.btn-icono:hover{color:var(--c-secundario)}
.enlace-sutil{font-size:.85rem;text-decoration:underline;text-underline-offset:3px;color:inherit;opacity:.9}
.btn.btn-outline-dark{border:2px solid var(--c-secundario);color:var(--c-secundario);border-radius:999px;font-weight:600;background:var(--c-fondo-alt)}
.btn.btn-outline-dark:hover{background:var(--c-secundario);color:var(--c-fondo-alt)}
.btn.btn-outline-danger{border-radius:999px;font-weight:600;border-width:2px}

/* ---- Barra de anuncio + header ---- */
.anuncio{background:var(--c-anuncio-fondo);color:var(--c-anuncio-texto);text-align:center;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:.5rem 1rem}
.header{background:var(--c-fondo);border-bottom:var(--borde) solid var(--c-secundario);position:sticky;top:0;z-index:1020}
.header-fila{display:flex;align-items:center;gap:1.5rem;min-height:78px}
.logo{font-family:var(--f-titulos);font-size:2rem;text-transform:uppercase;letter-spacing:.03em;color:var(--c-fondo-alt);white-space:nowrap;text-shadow:3px 3px 0 var(--c-secundario)}
.logo:hover{text-decoration:none;color:var(--c-fondo-alt)}
.logo img{height:46px;width:auto}
.menu{gap:1.3rem;flex:1;justify-content:center;flex-wrap:wrap}
.menu a{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:.3rem 0;color:var(--c-texto);border-bottom:2px solid transparent;white-space:nowrap}
.menu a:hover{text-decoration:none;border-color:var(--c-secundario);color:var(--c-secundario)}
/* Enlaces del menu sobre el naranja: blancos (pedido de Peter), incluida la flecha del desplegable */
.menu>a,.menu .menu-trigger,.menu .menu-trigger i{color:#fff}
.menu>a:hover,.menu .menu-trigger:hover{color:#fff;border-color:#fff}
.menu-desplegable{position:relative}
.menu-desplegable .menu-trigger i{font-size:.7rem;margin-left:.15rem}
.menu-panel{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:var(--c-fondo-alt);color:var(--c-secundario);border:var(--borde) solid var(--c-secundario);box-shadow:var(--sombra) var(--sombra) 0 var(--c-secundario);padding:1.4rem 1.8rem;display:none;gap:2.5rem;min-width:420px;z-index:1030;margin-top:14px;border-radius:var(--radio)}
.menu-panel::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.menu-desplegable:hover .menu-panel,.menu-desplegable:focus-within .menu-panel{display:flex}
.menu-col{min-width:170px;max-height:60vh;overflow:auto}
.menu-col h6{font-size:1rem;color:var(--c-primario);margin-bottom:.6rem}
.menu-col a{display:block;padding:.28rem 0;border:0;font-size:.9rem;white-space:nowrap;color:var(--c-secundario);text-transform:none;letter-spacing:0;font-weight:500}
.header-acciones{display:flex;align-items:center;gap:.25rem;margin-left:auto}
/* Buscador colapsado: solo la lupa; al hacer click se despliega el input */
.buscador{position:relative;margin-right:.25rem;display:flex;align-items:center;justify-content:flex-end}
.buscador input{width:0;opacity:0;padding:.55rem 0;border:2px solid transparent;border-radius:999px;font-size:.9rem;background:var(--c-fondo-alt);color:var(--c-secundario);transition:width .25s ease,opacity .2s,padding .25s}
.buscador.abierto input{width:260px;opacity:1;padding:.55rem 2.6rem .55rem 1rem;border-color:var(--c-secundario)}

.buscador input:focus{outline:none;box-shadow:3px 3px 0 var(--c-secundario)}
.buscador button{background:none;border:0;font-size:1.45rem;padding:.3rem .5rem;color:var(--c-texto);line-height:1;display:inline-flex}
.buscador.abierto button{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);font-size:1.1rem;color:var(--c-secundario)}
.buscador button:hover{color:var(--c-secundario)}
.buscador-resultados{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--c-fondo-alt);color:var(--c-secundario);border:var(--borde) solid var(--c-secundario);box-shadow:var(--sombra) var(--sombra) 0 var(--c-secundario);display:none;z-index:1030;border-radius:20px;overflow:hidden}
.buscador-resultados.abierto{display:block}
.buscador-resultados a{display:flex;gap:.7rem;align-items:center;padding:.55rem .8rem;border-bottom:1px solid rgba(31,26,23,.12);font-size:.85rem}
.buscador-resultados a:hover{background:#fff;text-decoration:none}
.buscador-resultados img{width:40px;height:40px;object-fit:contain}
.buscador-resultados .precio{margin-left:auto;font-weight:600;white-space:nowrap}
.buscador-resultados .ver-todo{justify-content:center;font-weight:600;color:var(--c-primario)}
.carrito-contador{position:absolute;top:0;right:0;background:var(--c-secundario);color:var(--c-fondo-alt);font-size:.65rem;font-weight:700;min-width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 4px;border:1px solid var(--c-fondo-alt)}
.offcanvas{background:var(--c-fondo-alt);color:var(--c-secundario);border-left:var(--borde) solid var(--c-secundario)!important}
.offcanvas-start{border-left:0!important;border-right:var(--borde) solid var(--c-secundario)!important}
.menu-movil a{display:block;padding:.7rem 0;border-bottom:1px solid rgba(31,26,23,.12);font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.menu-movil-grupo summary{padding:.7rem 0;border-bottom:1px solid rgba(31,26,23,.12);cursor:pointer;font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;list-style:none;display:flex;justify-content:space-between}
.menu-movil-grupo summary::after{content:"+"}.menu-movil-grupo[open] summary::after{content:"−"}
.menu-movil-grupo a{padding:.5rem 0 .5rem 1rem;font-size:.92rem;border:0;text-transform:none;font-weight:500}

/* ---- Hero (compacto: pegado al header, titulo en una linea en desktop) ---- */
.hero{padding:clamp(1rem,2.2vw,1.8rem) 0 clamp(1rem,2vw,1.6rem);position:relative;background:var(--c-fondo) center/cover no-repeat}
.hero[style*="background-image"]::before{content:"";position:absolute;inset:0;background:rgba(221,113,51,.75)}
.hero .container{position:relative}
.hero-caja{max-width:none}
.hero-caja h1{font-size:clamp(2.2rem,6.4vw,5rem);line-height:.95;margin:0;color:var(--c-fondo-alt);text-shadow:4px 4px 0 var(--c-secundario)}
@media(min-width:768px){.hero-caja h1{white-space:nowrap}}
/* Titulo + script en la misma linea (alineados a la base); en movil el script baja si no entra */
.hero-titulo{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem 1.2rem;margin-bottom:.9rem}
.hero-caja .hero-acento{font-family:var(--f-script);font-size:clamp(1.6rem,3.6vw,3rem);color:var(--c-secundario);line-height:1;margin:0;display:inline-block;white-space:nowrap;transform:rotate(-3deg);transform-origin:left bottom}
.hero-caja p{font-size:1.05rem;margin:0 0 .9rem;max-width:560px}

/* ---- Secciones y pasos ---- */
.seccion{padding:3rem 0}
.seccion-alt{background:transparent}
.seccion-titulo{margin-bottom:1.6rem}
.seccion-cabecera{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1.6rem}
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;position:relative;text-align:center;max-width:960px;margin:0 auto}
.pasos::before{content:"";position:absolute;left:16.6%;right:16.6%;top:34px;height:3px;background:var(--c-secundario)}
.paso{position:relative;padding:0 .5rem}
.paso-num{width:70px;height:70px;border-radius:50%;background:var(--c-fondo-alt);border:var(--borde) solid var(--c-secundario);color:var(--c-primario);font-family:var(--f-titulos);font-size:2rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;position:relative;box-shadow:4px 4px 0 var(--c-secundario)}
.paso h6{font-size:1.15rem;margin-bottom:.3rem;color:var(--c-fondo-alt)}
.paso p{font-size:.9rem;margin:0;opacity:.9}
@media(max-width:575px){.pasos{grid-template-columns:1fr}.pasos::before{display:none}}

/* ---- Categorias y marcas ---- */
.colecciones-grid,.categorias-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.6rem 1.4rem}
.coleccion-card{aspect-ratio:4/3;background:var(--c-fondo-alt) center/cover;border:var(--borde) solid var(--c-secundario);border-radius:var(--radio);box-shadow:var(--sombra) var(--sombra) 0 var(--c-secundario);display:flex;align-items:flex-end;padding:1.2rem;position:relative;overflow:hidden;color:var(--c-primario)}
.coleccion-card span{position:relative;font-family:var(--f-titulos);font-size:1.6rem;text-transform:uppercase}
.coleccion-card:hover{text-decoration:none;transform:translate(-2px,-2px);box-shadow:calc(var(--sombra) + 2px) calc(var(--sombra) + 2px) 0 var(--c-secundario)}
.categoria-card{display:flex;flex-direction:column;overflow:hidden;transition:transform .15s,box-shadow .15s}
.categoria-card:hover{text-decoration:none;transform:translate(-2px,-2px);box-shadow:calc(var(--sombra) + 2px) calc(var(--sombra) + 2px) 0 var(--c-secundario)}
.categoria-imagen{display:flex;align-items:center;justify-content:center;aspect-ratio:1;padding:1.4rem;background:var(--c-fondo-alt)}
.categoria-imagen img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.categoria-card.es-marca .categoria-imagen{padding:2.2rem}
.categoria-card.es-marca .categoria-imagen img,.marca-chip img,.coleccion-banner.es-marca img{mix-blend-mode:normal}
.categoria-imagen i{font-size:3rem;opacity:.3}
.categoria-info{display:flex;flex-direction:column;flex:1;padding:1rem 1.2rem 1.2rem;border-top:var(--borde) solid var(--c-secundario)}
.categoria-tipo{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--c-secundario);opacity:.7}
.categoria-titulo{font-family:var(--f-titulos);font-size:1.6rem;text-transform:uppercase;line-height:1.05;margin:.15rem 0}
.categoria-texto{font-size:.86rem;opacity:.8}
.categoria-cta{font-size:.78rem;margin-top:.6rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* Marcas: cards crema con logo grande, nombre en display y cantidad */
.seccion-marcas{padding-top:1.2rem}
.marcas-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.4rem 1.2rem}
.marca-card{width:calc((100% - 6rem)/6);min-width:150px}
@media(max-width:575px){.marca-card{width:calc((100% - 1.2rem)/2);min-width:0}}
.marca-card{display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--c-fondo-alt);color:var(--c-secundario);border:var(--borde) solid var(--c-secundario);border-radius:var(--radio);box-shadow:var(--sombra) var(--sombra) 0 var(--c-secundario);padding:.8rem .8rem 1rem;transition:transform .15s,box-shadow .15s}
.marca-card:hover{text-decoration:none;color:var(--c-secundario);transform:translate(-3px,-3px);box-shadow:calc(var(--sombra) + 3px) calc(var(--sombra) + 3px) 0 var(--c-secundario)}
/* Logo como en el login del ERP (.brand-logo-item): fondo blanco, padding chico, esquinas 18px */
.marca-logo{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;background:#fff;border:2px solid var(--c-secundario);border-radius:18px;padding:5px;overflow:hidden}
.marca-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .3s}
.marca-card:hover .marca-logo img{transform:scale(1.08)}
.marca-inicial{font-family:var(--f-titulos);font-size:3rem;color:var(--c-primario)}
.marca-nombre{font-family:var(--f-titulos);text-transform:uppercase;font-size:1.25rem;line-height:1.1;color:var(--c-primario);margin-top:.8rem}
.marca-cant{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;opacity:.65;margin-top:.15rem}
.coleccion-banner{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:2rem;align-items:center;padding:1.5rem 2rem;margin-bottom:2rem}
.coleccion-banner-imagen{display:flex;align-items:center;justify-content:center;aspect-ratio:1;max-height:240px;padding:22% 14% 12%;background:#fff;border:var(--borde) solid var(--c-secundario);border-radius:999px 999px var(--radio) var(--radio);overflow:hidden}
.coleccion-banner-imagen img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.coleccion-banner h1{margin:.2rem 0 .4rem;font-size:clamp(2rem,4vw,3.4rem)}
.coleccion-banner p{margin:0 0 .4rem;max-width:560px}
.coleccion-banner .categoria-tipo{color:var(--c-secundario)}
@media(max-width:575px){.coleccion-banner{grid-template-columns:1fr;text-align:center;padding:1.2rem}.coleccion-banner-imagen{max-height:180px;margin:0 auto}}

/* ---- Grilla de productos y card ---- */
.productos-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.8rem 1.2rem}
@media(min-width:768px){.productos-grid{grid-template-columns:repeat(4,1fr);gap:2.2rem 1.6rem}.productos-grid.grid-3{grid-template-columns:repeat(3,1fr)}}
.card-producto{display:flex;flex-direction:column;overflow:hidden;transition:transform .15s,box-shadow .15s}
.card-producto:hover{transform:translate(-2px,-2px);box-shadow:calc(var(--sombra) + 2px) calc(var(--sombra) + 2px) 0 var(--c-secundario)}
.card-imagen{display:block;position:relative;aspect-ratio:1;background:var(--c-fondo-alt);overflow:hidden;padding:.9rem}
.card-imagen img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .35s,opacity .35s}
.card-producto:hover .card-imagen img{transform:scale(1.04)}
.card-imagen .img-hover{position:absolute;inset:.9rem;width:auto;height:auto;opacity:0}
.card-imagen.con-hover:hover .img-principal{opacity:0}
.card-imagen.con-hover:hover .img-hover{opacity:1}
.sin-imagen{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:rgba(31,26,23,.3);font-size:2.5rem}
.sin-imagen.grande{aspect-ratio:1}
.etiqueta{position:absolute;left:.7rem;top:.7rem;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:.3rem .7rem;border-radius:999px;background:var(--c-secundario);color:var(--c-fondo-alt);border:2px solid var(--c-fondo-alt)}
.etiqueta.oferta{background:var(--c-oferta)}
.etiqueta.pocas{left:auto;right:.7rem;background:var(--c-fondo-alt);color:var(--c-secundario);border-color:var(--c-secundario)}
.card-info{padding:0 .9rem 1rem;display:flex;flex-direction:column;flex:1}
.card-marca{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--c-primario);margin:.2rem 0 .3rem}
.card-titulo{display:block;background:var(--c-secundario);color:var(--c-fondo-alt);font-size:.78rem;line-height:1.3;padding:.45rem .7rem;border-radius:12px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;margin-bottom:.5rem;min-height:3.3em;display:flex;align-items:center}
.card-titulo:hover{color:var(--c-fondo-alt);text-decoration:none;background:var(--c-primario)}
.card-precio{font-size:1rem;display:flex;gap:.5rem;align-items:baseline;font-weight:700;margin-top:auto}
.card-precio s{opacity:.55;font-size:.85rem;font-weight:400}
.precio-oferta{color:var(--c-oferta)}

/* ---- Coleccion ---- */
.coleccion{padding-top:2rem;padding-bottom:4rem}
.coleccion-cabecera{margin-bottom:1.5rem}
.barra-filtros{display:flex;align-items:center;gap:1rem;padding:.6rem 0;margin-bottom:1.5rem;font-size:.9rem;font-weight:600}
.barra-filtros .orden{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.barra-filtros select{border:2px solid var(--c-secundario);border-radius:999px;background:var(--c-fondo-alt);color:var(--c-secundario);padding:.35rem 1rem;font-size:.85rem;font-weight:600}
.btn-filtros{border:2px solid var(--c-secundario);background:var(--c-fondo-alt);color:var(--c-secundario);padding:.4rem 1rem;font-size:.8rem;border-radius:999px;font-weight:700;text-transform:uppercase}
.filtros{font-size:.9rem;padding:1.2rem 1.4rem}
.offcanvas .filtros{border:0;box-shadow:none;padding:0}
.filtro-grupo{padding:.9rem 0;border-bottom:2px solid rgba(31,26,23,.15)}
.filtro-grupo:last-child{border-bottom:0}
.filtro-grupo h6{font-size:1.1rem;color:var(--c-primario);margin-bottom:.5rem}
.filtro-opcion{display:flex;justify-content:space-between;padding:.22rem 0;color:var(--c-secundario);opacity:.85}
.filtro-opcion span{opacity:.55;font-size:.8rem}
.filtro-opcion:hover,.filtro-opcion.activa{opacity:1;font-weight:700;text-decoration:none}
.filtro-opcion.activa::before{content:"✓ "}
/* Boton Ofertas (toggle del filtro solo ofertas) */
.btn-ofertas{display:flex;align-items:center;gap:.5rem;width:100%;padding:.6rem 1.1rem;border-radius:999px;border:2px solid var(--c-secundario);background:var(--c-secundario);color:var(--c-fondo-alt);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.85rem;margin-bottom:.4rem}
.btn-ofertas .bi-fire{font-size:1.1rem}
.btn-ofertas:hover{text-decoration:none;color:#fff;box-shadow:3px 3px 0 var(--c-fondo-alt)}
.btn-ofertas.activa{background:var(--c-fondo-alt);color:var(--c-secundario);box-shadow:3px 3px 0 var(--c-secundario)}
.btn-ofertas.activa .bi-fire{color:var(--c-oferta)}
.btn-ofertas.activa:hover{color:var(--c-secundario)}
/* Panel de filtros en desktop: fondo naranja del tema con letras blancas (blanco sobre crema no se lee),
   titulos en crema; sigue al usuario al hacer scroll (sticky bajo el header, con scroll interno). */
aside .filtros{background:var(--c-fondo);color:#fff;position:sticky;top:100px;max-height:calc(100vh - 124px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--c-secundario) transparent}
aside .filtros .filtro-grupo{border-bottom-color:rgba(31,26,23,.3)}
aside .filtros .filtro-grupo h6{color:var(--c-fondo-alt)}
aside .filtros .filtro-opcion,aside .filtros .filtro-opcion span{color:#fff;opacity:1}
aside .filtros .filtro-opcion:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
aside .filtros .filtro-opcion.activa{color:#fff;font-weight:700}
aside .filtros .precio-rango input{color:var(--c-secundario)}
.precio-rango{display:flex;gap:.4rem;flex-wrap:wrap}
.precio-rango input{width:calc(50% - .2rem);border:2px solid var(--c-secundario);padding:.4rem .7rem;font-size:.85rem;border-radius:999px;background:#fff}
.precio-rango .btn-secundario{width:100%;padding:.4rem;font-size:.72rem}
.filtros-activos{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1.2rem}
.chip{display:inline-flex;align-items:center;gap:.3rem;background:var(--c-secundario);color:var(--c-fondo-alt);padding:.3rem .8rem;font-size:.78rem;border-radius:999px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.chip:hover{background:var(--c-fondo-alt);color:var(--c-secundario);text-decoration:none;outline:2px solid var(--c-secundario)}
.paginacion{display:flex;justify-content:center;gap:.4rem;margin-top:2.5rem}
.paginacion a{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--c-secundario);background:var(--c-fondo-alt);color:var(--c-secundario);border-radius:50%;font-weight:700}
.paginacion a.activa{background:var(--c-secundario);color:var(--c-fondo-alt)}
.paginacion a:hover{text-decoration:none;box-shadow:3px 3px 0 var(--c-secundario)}
.vacio{text-align:center;padding:4rem 1rem}
.vacio i{font-size:3rem;opacity:.5;display:block;margin-bottom:1rem}

/* ---- Producto: marco en arco festoneado ---- */
.producto{padding-top:2rem;padding-bottom:4rem}
.migas{font-size:.8rem;opacity:.85;margin-bottom:1.5rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.marco-arco{position:relative;padding:1.2rem 1.2rem 3rem;margin:1.2rem 1.2rem 2.4rem}
.marco-arco::before,.marco-arco::after{content:"";position:absolute;top:30%;width:16%;height:36px;background:var(--c-secundario);z-index:0}
.marco-arco::before{left:-1.2rem;border-radius:4px 0 0 4px}.marco-arco::after{right:-1.2rem;border-radius:0 4px 4px 0}
.producto-galeria{position:relative;background:var(--c-fondo-alt);border:var(--borde) solid var(--c-secundario);border-radius:999px 999px 24px 24px;aspect-ratio:1/1.1;display:flex;align-items:center;justify-content:center;overflow:hidden;outline:14px dotted var(--c-fondo-alt);outline-offset:-3px;box-shadow:0 0 0 12px var(--c-fondo-alt),0 0 0 15px var(--c-secundario);z-index:1}
.producto-galeria img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:2.2rem 1.4rem 2.6rem}
.galeria-slide{position:absolute;inset:0;opacity:0;transition:opacity .25s;pointer-events:none}
.galeria-slide.activa{opacity:1;pointer-events:auto}
.galeria-flecha{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:2px solid var(--c-secundario);background:var(--c-fondo-alt);color:var(--c-secundario);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .2s;z-index:2}
.galeria-flecha.prev{left:.8rem}.galeria-flecha.next{right:.8rem}
.producto-galeria:hover .galeria-flecha{opacity:1}
.producto-galeria .etiqueta{top:auto;bottom:4.2rem;left:50%;transform:translateX(-50%)}
.marco-nombre{position:relative;z-index:2;margin:-1.6rem auto 0;width:max-content;max-width:90%;background:var(--c-secundario);color:var(--c-fondo-alt);border:3px solid var(--c-fondo-alt);border-radius:10px;padding:.5rem 1.4rem;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;text-align:center;box-shadow:0 0 0 2px var(--c-secundario)}
.galeria-miniaturas{display:flex;gap:.6rem;margin-top:1.2rem;justify-content:center;flex-wrap:wrap}
.galeria-mini{width:66px;height:66px;flex-shrink:0;border:2px solid var(--c-secundario);border-radius:50%;background:var(--c-fondo-alt);padding:6px;overflow:hidden;cursor:pointer;opacity:.75}
.galeria-mini img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.galeria-mini.activa,.galeria-mini:hover{opacity:1;box-shadow:3px 3px 0 var(--c-secundario)}
.producto-info{padding-top:.5rem}
.producto-marca{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--c-secundario)}
.producto-info h1{margin:.3rem 0 1rem;font-size:clamp(2rem,3.4vw,3rem);color:var(--c-fondo-alt);text-shadow:3px 3px 0 var(--c-secundario)}
.producto-precio{font-size:1.6rem;display:flex;gap:.7rem;align-items:baseline;margin-bottom:.3rem;font-weight:700}
.producto-precio s{font-size:1.1rem;opacity:.6;font-weight:400}
.badge-desc{font-size:.75rem;background:var(--c-secundario);color:var(--c-fondo-alt);padding:.2rem .6rem;border-radius:999px;letter-spacing:.05em;font-weight:700}
.producto-form label{display:block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:.5rem}
/* Celular: foto chica para que precio, cantidad y "Agregar al carrito" entren en la primera pantalla */
@media (max-width:767.98px){
  .producto{padding-top:.8rem}
  .producto .migas{display:none}
  .producto .marco-arco{max-width:150px;margin:.2rem auto .3rem;padding:.5rem .5rem .8rem}
  .producto .marco-arco::before,.producto .marco-arco::after{display:none}
  .producto .producto-galeria{outline-width:6px;box-shadow:0 0 0 5px var(--c-fondo-alt),0 0 0 7px var(--c-secundario)}
  .producto .producto-galeria img{padding:1rem .7rem 1.2rem}
  .producto .producto-galeria .etiqueta{bottom:1.4rem;font-size:.65rem}
  .producto .galeria-flecha{opacity:1;width:30px;height:30px;font-size:.8rem}
  .producto .galeria-flecha.prev{left:.2rem}.producto .galeria-flecha.next{right:.2rem}
  .producto .marco-nombre{display:none}
  .producto .galeria-miniaturas{margin-top:.6rem;gap:.4rem}
  .producto .galeria-mini{width:42px;height:42px;padding:3px}
  .producto-info{padding-top:0}
  .producto-info h1{font-size:1.5rem;margin:.1rem 0 .3rem}
  .producto-precio{font-size:1.4rem}
  .producto-info .text-muted.small.mb-3{margin-bottom:.6rem!important}
  .producto-form label{margin-bottom:.3rem}
  .producto .variantes{margin-bottom:.6rem}
  .producto .variantes-opciones{gap:.4rem}
  .producto .variante{padding:.45rem .9rem;font-size:.8rem}
}
.variantes{margin-bottom:1.2rem}
.variantes-opciones{display:flex;flex-wrap:wrap;gap:.6rem}
.variante{border:2px solid var(--c-secundario);background:var(--c-fondo-alt);color:var(--c-secundario);padding:.5rem 1rem;border-radius:999px;cursor:pointer;display:flex;flex-direction:column;text-transform:none;letter-spacing:0;font-size:.9rem;margin:0;font-weight:500}
.variante input{display:none}
.variante small{opacity:.7}
.variante.activa{background:var(--c-secundario);color:var(--c-fondo-alt);box-shadow:3px 3px 0 var(--c-fondo-alt)}
.cantidad-control{display:inline-flex;align-items:center;border:2px solid var(--c-secundario);background:var(--c-fondo-alt);color:var(--c-secundario);border-radius:999px;height:40px;overflow:hidden}
.cantidad-control.grande{height:48px}
.cantidad-control button{background:none;border:0;width:40px;height:100%;font-size:1.1rem;color:var(--c-secundario);cursor:pointer}
.cantidad-control button:hover{background:var(--c-secundario);color:var(--c-fondo-alt)}
.cantidad-control input{width:52px;text-align:center;border:0;background:transparent;font-size:.95rem;height:100%;-moz-appearance:textfield;color:var(--c-secundario);font-weight:700}
.cantidad-control input::-webkit-outer-spin-button,.cantidad-control input::-webkit-inner-spin-button{-webkit-appearance:none}
.cantidad-control .quitar{border-left:2px solid var(--c-secundario);font-size:.9rem;opacity:.8}
.cantidad-fila{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.stock-info{display:inline-flex;align-items:center;gap:.35rem;font-size:.9rem;font-weight:700;padding:.45rem .9rem;border-radius:999px;background:var(--c-fondo-alt);color:var(--c-secundario);border:2px solid var(--c-secundario)}
.stock-info.poco{background:#FFD23F}
.acordeon{margin-top:2rem;background:var(--c-fondo-alt);color:var(--c-secundario);border:var(--borde) solid var(--c-secundario);border-radius:var(--radio);box-shadow:var(--sombra) var(--sombra) 0 var(--c-secundario);padding:.4rem 1.4rem}
.acordeon details{border-bottom:2px solid rgba(31,26,23,.15)}
.acordeon details:last-child{border-bottom:0}
.acordeon summary{padding:.9rem 0;cursor:pointer;font-family:var(--f-titulos);text-transform:uppercase;font-size:1.15rem;color:var(--c-primario);list-style:none;display:flex;justify-content:space-between}
.acordeon summary::after{content:"+";font-size:1.3rem}
.acordeon details[open] summary::after{content:"−"}
.acordeon details>*:not(summary){padding-bottom:1rem;font-size:.9rem}
.tabla-detalles{width:100%;font-size:.88rem}
.tabla-detalles th{font-weight:700;padding:.3rem 1rem .3rem 0;opacity:.75;white-space:nowrap;width:40%}
.tabla-detalles td{padding:.3rem 0}

/* ---- Drawer carrito ---- */
.drawer-carrito{width:440px!important;max-width:100vw}
.drawer-cabecera{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.4rem;border-bottom:var(--borde) solid var(--c-secundario)}
.drawer-cabecera h5{margin:0;color:var(--c-primario);font-size:1.6rem}
.drawer-items{padding:.5rem 1.4rem;overflow:auto;max-height:calc(100vh - 270px)}
.drawer-item{display:flex;gap:.9rem;padding:1rem 0;border-bottom:2px solid rgba(31,26,23,.12)}
.drawer-item.no-disponible{background:rgba(194,65,12,.08)}
.drawer-img{width:70px;height:70px;background:#fff;border:2px solid var(--c-secundario);flex-shrink:0;border-radius:16px;overflow:hidden;padding:4px}
.drawer-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.drawer-datos{flex:1;min-width:0}
.drawer-titulo{font-size:.88rem;font-weight:700;display:block;line-height:1.3;text-transform:uppercase}
.drawer-variante{font-size:.78rem;opacity:.7}
.drawer-precio{font-size:.85rem;margin:.2rem 0 .5rem}
.drawer-total{font-size:.9rem;font-weight:700;white-space:nowrap}
.drawer-pie{padding:1.2rem 1.4rem;border-top:var(--borde) solid var(--c-secundario)}
.drawer-vacio{text-align:center;padding:4rem 1.5rem}
.drawer-vacio i{font-size:3rem;opacity:.4;display:block;margin-bottom:1rem}

/* ---- Pagina carrito / resumen ---- */
.pagina-carrito{padding-top:2rem;padding-bottom:4rem}
.tabla-panel{padding:.6rem 1.4rem 1rem}
.tabla-carrito{width:100%}
.tabla-carrito th{font-family:var(--f-titulos);font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;font-weight:400;color:var(--c-primario);padding:.8rem 0;border-bottom:var(--borde) solid var(--c-secundario)}
.tabla-carrito td{padding:1.2rem 0;border-bottom:2px solid rgba(31,26,23,.12);vertical-align:top}
.tabla-carrito tr:last-child td{border-bottom:0}
.carrito-img{width:90px;height:90px;background:#fff;border:2px solid var(--c-secundario);flex-shrink:0;border-radius:18px;overflow:hidden;display:block;padding:5px}
.carrito-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.resumen{padding:1.5rem}
.resumen h5{margin-bottom:1rem;font-size:1.6rem}
.resumen-item{display:flex;gap:.8rem;align-items:center;padding:.6rem 0;font-size:.88rem}
.resumen-img{width:56px;height:56px;background:#fff;border:2px solid var(--c-secundario);border-radius:14px;position:relative;flex-shrink:0;overflow:visible;padding:3px}
.resumen-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.resumen-img span{position:absolute;top:-9px;right:-9px;background:var(--c-secundario);color:var(--c-fondo-alt);font-size:.7rem;font-weight:700;min-width:21px;height:21px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--c-fondo-alt)}
.resumen hr{border-top:2px solid var(--c-secundario);opacity:1}
.resumen-total{font-family:var(--f-titulos);font-size:1.5rem;text-transform:uppercase;margin-top:.5rem;color:var(--c-primario)}

/* ---- Checkout ---- */
.checkout{padding-top:2rem;padding-bottom:4rem}
.checkout-paso{margin-bottom:2rem;padding:1.5rem 1.8rem 1.8rem}
.checkout-paso h2{font-size:1.9rem;margin-bottom:1rem;display:flex;align-items:center;gap:.8rem}
.checkout-paso h2::before{counter-increment:paso;content:counter(paso);width:44px;height:44px;border-radius:50%;background:var(--c-fondo-alt);border:var(--borde) solid var(--c-secundario);color:var(--c-primario);font-size:1.4rem;display:inline-flex;align-items:center;justify-content:center;box-shadow:3px 3px 0 var(--c-secundario);flex-shrink:0}
#formCheckout{counter-reset:paso}
.form-control,.form-select{border:2px solid var(--c-secundario);border-radius:14px;padding:.6rem .9rem;background:#fff;color:var(--c-secundario)}
.form-control:focus,.form-select:focus{border-color:var(--c-secundario);box-shadow:3px 3px 0 var(--c-secundario);background:#fff;color:var(--c-secundario)}
.form-control:disabled{background:rgba(255,255,255,.5)}
.form-label{font-size:.78rem;margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.form-text{color:inherit;opacity:.7}
.form-check-input{border:2px solid var(--c-secundario)}
.form-check-input:checked{background-color:var(--c-secundario);border-color:var(--c-secundario)}
.input-group .form-control{border-radius:14px 0 0 14px}
.input-group .btn{border-radius:0 14px 14px 0;border-width:2px}
.direcciones-guardadas{margin-bottom:1rem}
.direccion-opcion,.pago-opcion{display:flex;gap:.7rem;align-items:center;border:2px solid var(--c-secundario);background:#fff;padding:.8rem 1rem;border-radius:999px;margin-bottom:.5rem;cursor:pointer;font-size:.92rem;font-weight:500}
.direccion-opcion:has(input:checked),.pago-opcion:has(input:checked){background:var(--c-secundario);color:var(--c-fondo-alt);box-shadow:3px 3px 0 var(--c-primario)}
.direccion-opcion input,.pago-opcion input{accent-color:var(--c-primario)}
.mapa-wrap{border:var(--borde) solid var(--c-secundario);border-radius:20px;overflow:hidden;background:#fff}
.calle-cabecera{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.4rem}
.calle-cabecera .form-label{margin-bottom:0}
.calle-acciones{display:flex;gap:.4rem;flex-shrink:0}
.calle-acciones .btn{width:34px;height:34px;font-size:.9rem;border-width:2px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
#mapaEntrega{height:340px;width:100%}
/* Sugerencias de direcciones de Google (Places): mismo estilo de panel crema con borde */
.pac-container{z-index:2100;margin-top:6px;background:var(--c-fondo-alt);border:2px solid var(--c-secundario);border-radius:14px;box-shadow:4px 4px 0 var(--c-secundario);font-family:inherit;overflow:hidden}
.pac-item{padding:8px 12px;font-size:.95rem;color:var(--c-secundario);border-top:1px solid rgba(31,26,23,.15);cursor:pointer;line-height:1.4}
.pac-item:first-child{border-top:0}
.pac-item:hover,.pac-item-selected{background:#fff}
.pac-item-query{font-size:.95rem;color:var(--c-secundario);font-weight:700}
.pac-matched{font-weight:700}
.pac-icon{display:none}
.zona-resultado{font-size:.88rem;padding:.7rem 0;font-weight:600}
.zona-resultado.ok{color:var(--c-primario)}
.zona-resultado.error{color:var(--c-oferta)}
.resumen-checkout{position:sticky;top:100px}
.alert{border:var(--borde) solid var(--c-secundario);border-radius:20px;background:var(--c-fondo-alt);color:var(--c-secundario);box-shadow:4px 4px 0 var(--c-secundario);font-weight:600}
.alert-danger{color:var(--c-oferta)}
.invalid-feedback{color:var(--c-oferta);font-weight:600}
.campo-clave{position:relative}
.campo-clave .form-control{padding-right:2.9rem}
.campo-clave .ver-clave{position:absolute;top:0;right:0;height:100%;width:2.8rem;border:0;background:none;color:var(--c-secundario);font-size:1.15rem;display:flex;align-items:center;justify-content:center}
.campo-clave .ver-clave:focus-visible{outline:2px solid var(--c-secundario);outline-offset:-4px;border-radius:12px}

/* ---- Confirmacion / cuenta / paginas ---- */
.confirmacion{padding-top:2rem;padding-bottom:4rem;max-width:960px}
.confirmacion-cabecera{text-align:center;margin-bottom:2.5rem}
.confirmacion-cabecera i{font-size:3.5rem;color:var(--c-fondo-alt);text-shadow:3px 3px 0 var(--c-secundario)}
.confirmacion-cabecera h1{text-shadow:3px 3px 0 var(--c-secundario)}
.estado{display:inline-block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:.3rem .8rem;border-radius:999px;background:var(--c-secundario);color:var(--c-fondo-alt)}
.estado-nuevo{background:var(--c-primario)}.estado-confirmado{background:#1d5c8c}.estado-preparado{background:#6b4c8c}.estado-en-camino{background:#b8560f}.estado-entregado,.estado-recibido{background:#2f6b3a}.estado-anulado,.estado-error{background:var(--c-oferta)}
.cuenta{padding-top:2rem;padding-bottom:4rem}
.cuenta h5{font-size:1.7rem;text-shadow:2px 2px 0 var(--c-secundario)}
.cuenta-form{max-width:520px;padding-top:3rem;padding-bottom:4rem}
.cuenta-form.ancho{max-width:820px}
.cuenta-form h1{text-align:center;margin-bottom:2rem;text-shadow:3px 3px 0 var(--c-secundario)}
.cuenta-form form:not(.caja){background:var(--c-fondo-alt);color:var(--c-secundario);border:var(--borde) solid var(--c-secundario);border-radius:var(--radio);box-shadow:var(--sombra) var(--sombra) 0 var(--c-secundario);padding:1.6rem 1.8rem}
.tabla-pedidos{width:100%;font-size:.9rem}
.tabla-pedidos th{font-family:var(--f-titulos);font-weight:400;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c-primario);padding:.5rem 0;border-bottom:var(--borde) solid var(--c-secundario)}
.tabla-pedidos td{padding:.7rem 0;border-bottom:2px solid rgba(31,26,23,.12)}
.pagina-texto{max-width:860px;padding-top:2.5rem;padding-bottom:4rem}
.pagina-texto h1{text-shadow:3px 3px 0 var(--c-secundario)}
.pagina-texto .contenido{background:var(--c-fondo-alt);color:var(--c-secundario);border:var(--borde) solid var(--c-secundario);border-radius:var(--radio);box-shadow:var(--sombra) var(--sombra) 0 var(--c-secundario);padding:1.6rem 2rem}
.badge.text-bg-dark{background:var(--c-secundario)!important;color:var(--c-fondo-alt)!important;border-radius:999px}

/* ---- Footer ---- */
.footer{background:var(--c-secundario);color:var(--c-fondo-alt);padding:3.5rem 0 1.5rem;margin-top:3rem;font-size:.88rem;border-top:var(--borde) solid var(--c-fondo-alt)}
.footer h5{color:var(--c-primario);font-size:1.8rem}
.footer h6{color:var(--c-primario);font-size:1.1rem;margin-bottom:.9rem}
.footer a{display:block;padding:.2rem 0;opacity:.85}
.footer a:hover{opacity:1;color:var(--c-primario)}
.footer-logo{height:40px;margin-bottom:1rem}
.footer .redes{display:flex;gap:.8rem;margin-top:.8rem}
.footer .redes a{font-size:1.3rem;display:inline-block}
.footer-bajo{border-top:1px solid rgba(243,218,182,.25);margin-top:2.5rem;padding-top:1.2rem;font-size:.78rem;opacity:.7}
.wa-flotante{position:fixed;right:1.2rem;bottom:1.2rem;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;border:3px solid var(--c-secundario);display:flex;align-items:center;justify-content:center;font-size:1.7rem;box-shadow:4px 4px 0 var(--c-secundario);z-index:1010}
.wa-flotante:hover{color:#fff;text-decoration:none;transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--c-secundario)}


/* ---- Telefono con prefijo internacional (intl-tel-input v29) al estilo del tema ---- */
.iti{width:100%;display:block}
.iti input.form-control{width:100%}
.iti__selected-country{border-radius:12px 0 0 12px;border-right:2px solid var(--c-secundario);background:var(--c-fondo-alt)!important;color:var(--c-secundario);font-weight:700}
.iti__selected-country-primary{padding:0 .4rem 0 .8rem}
.iti__selected-dial-code{color:var(--c-secundario);padding-right:.5rem}
.iti__country-selector{border:var(--borde) solid var(--c-secundario)!important;border-radius:18px!important;box-shadow:var(--sombra) var(--sombra) 0 var(--c-secundario)!important;background:var(--c-fondo-alt)!important;color:var(--c-secundario);overflow:hidden;margin-top:6px}
.iti__search-input-wrapper{border-bottom:2px solid var(--c-secundario);background:#fff}
.iti__search-input{border:0!important;background:#fff;color:var(--c-secundario)}
.iti__country-list{background:var(--c-fondo-alt)}
.iti__country{padding:.45rem .9rem}
.iti__country.iti__highlight{background:var(--c-secundario)!important;color:var(--c-fondo-alt)}
.iti__country.iti__highlight .iti__dial-code{color:var(--c-fondo-alt)}
.iti__dial-code{color:var(--c-secundario);opacity:.75}

/* ---- Placeholders tenues: que no parezcan texto ya escrito (el texto tipeado sigue oscuro) ---- */
.form-control::placeholder,.form-select::placeholder,.iti input::placeholder,.precio-rango input::placeholder,.buscador input::placeholder,textarea::placeholder{color:#8a8178;opacity:.4;font-weight:400}

/* ---- Selector de ciudad: listado tipo select (combo propio, sin dependencias) ---- */
.combo{position:relative}
.combo-boton{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;text-align:left;cursor:pointer}
.combo-boton .bi{font-size:.85rem;transition:transform .15s}
.combo.abierto .combo-boton{box-shadow:3px 3px 0 var(--c-secundario)}
.combo.abierto .combo-boton .bi{transform:rotate(180deg)}
.combo-valor{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combo-valor.sin-valor{color:#8a8178;opacity:.7}
.combo-panel{position:absolute;left:0;right:0;top:calc(100% + 6px);min-width:240px;z-index:1100;background:var(--c-fondo-alt);color:var(--c-secundario);border:var(--borde) solid var(--c-secundario);border-radius:18px;box-shadow:var(--sombra) var(--sombra) 0 var(--c-secundario);overflow:hidden}
.combo-filtro-caja{display:flex;align-items:center;gap:.5rem;padding:.45rem .8rem;border-bottom:2px solid var(--c-secundario);background:#fff}
.combo-filtro-caja .bi{font-size:.85rem;opacity:.6}
.combo-filtro{border:0;outline:0;background:transparent;width:100%;font-size:.9rem;color:var(--c-secundario)}
.combo-lista{margin:0;padding:.3rem 0;list-style:none;max-height:280px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--c-secundario) transparent}
.combo-lista li{padding:.5rem 1rem;cursor:pointer;font-size:.92rem}
.combo-lista li.activo,.combo-lista li[data-i]:hover{background:var(--c-secundario);color:var(--c-fondo-alt)}
.combo-lista li.elegido{font-weight:700}
.combo-lista li.limpiar{opacity:.6;font-style:italic}
.combo-lista li.sin-resultados{cursor:default;opacity:.6}
@media(max-width:575px){.combo-lista{max-height:50vh}.combo-lista li{padding:.7rem 1rem}}

/* ---- Avisos (mensajes de toda la tienda): arriba y centrados, panel crema con contraste fuerte ---- */
.avisos{position:fixed;top:96px;left:50%;transform:translateX(-50%);z-index:2000;width:min(600px,calc(100vw - 24px));display:flex;flex-direction:column;gap:.7rem;pointer-events:none}
.aviso{pointer-events:auto;display:flex;align-items:center;gap:.9rem;background:var(--c-fondo-alt);color:var(--c-secundario);border:var(--borde) solid var(--c-secundario);border-left-width:14px;border-radius:20px;box-shadow:var(--sombra) var(--sombra) 0 var(--c-secundario),0 14px 30px rgba(0,0,0,.25);padding:.9rem 1rem .9rem 1.1rem;font-size:1.05rem;font-weight:500;line-height:1.35;animation:avisoEntra .5s cubic-bezier(.2,1.4,.4,1) both}
.aviso-icono{font-size:2rem;line-height:1;flex-shrink:0}
.aviso-texto{flex:1;min-width:0}
.aviso-cerrar{flex-shrink:0;width:38px;height:38px;border-radius:50%;border:2px solid var(--c-secundario);background:#fff;color:var(--c-secundario);display:flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer}
.aviso-cerrar:hover{background:var(--c-secundario);color:var(--c-fondo-alt)}
.aviso-error{border-left-color:#C62828}.aviso-error .aviso-icono{color:#C62828}.aviso-error .aviso-icono::before{content:"\f336"}
.aviso-aviso{border-left-color:#E0A100}.aviso-aviso .aviso-icono{color:#B27F00}.aviso-aviso .aviso-icono::before{content:"\f33a"}
.aviso-exito{border-left-color:#2E7D32}.aviso-exito .aviso-icono{color:#2E7D32}.aviso-exito .aviso-icono::before{content:"\f26a"}
.aviso-info{border-left-color:var(--c-secundario)}.aviso-info .aviso-icono{color:var(--c-secundario)}.aviso-info .aviso-icono::before{content:"\f430"}
.aviso-error{animation:avisoEntra .5s cubic-bezier(.2,1.4,.4,1) both,avisoSacude .45s .5s both}
.aviso.repite{animation:avisoSacude .45s both}
.aviso.saliendo{animation:avisoSale .25s ease-in both}
@keyframes avisoEntra{from{opacity:0;transform:translateY(-160%)}to{opacity:1;transform:translateY(0)}}
@keyframes avisoSale{to{opacity:0;transform:translateY(-60%)}}
@keyframes avisoSacude{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
@media(max-width:575px){.avisos{top:76px}.aviso{font-size:1rem;padding:.8rem .8rem .8rem .9rem;gap:.7rem}.aviso-icono{font-size:1.7rem}}
@media(prefers-reduced-motion:reduce){.aviso,.aviso-error,.aviso.repite,.aviso.saliendo{animation:none}}
/* Mensaje en linea junto al control afectado */
.aviso-linea{display:flex;align-items:center;gap:.5rem;margin:.5rem 0;padding:.5rem .8rem;border:2px solid var(--c-secundario);border-left-width:8px;border-radius:12px;background:#fff;color:var(--c-secundario);font-size:.92rem;font-weight:600}
.aviso-linea .bi{font-size:1.15rem}
.aviso-linea-error{border-left-color:#C62828}.aviso-linea-error .bi{color:#C62828}.aviso-linea-error .bi::before{content:"\f336"}
.aviso-linea-aviso{border-left-color:#E0A100}.aviso-linea-aviso .bi{color:#B27F00}.aviso-linea-aviso .bi::before{content:"\f33a"}
.aviso-linea-exito{border-left-color:#2E7D32}.aviso-linea-exito .bi::before{content:"\f26a"}
.aviso-linea-info .bi::before{content:"\f430"}
.calle-buscar+.aviso-linea{margin-top:.5rem;}
.form-text.ayuda-aviso{color:#8a5a00;opacity:1;font-weight:700}
.zona-resultado.error{color:#C62828;background:#fff;border:2px solid var(--c-secundario);border-left:8px solid #C62828;border-radius:12px;padding:.5rem .8rem;margin-top:.6rem}
/* Monto minimo de pedido (configurado en el ERP) */
.aviso-minimo{margin-top:1rem;padding:.75rem .9rem;background:#fff;border:2px solid var(--c-secundario);border-radius:14px;font-size:.88rem;color:var(--c-secundario)}
.aviso-minimo-texto i{margin-right:.25rem}
.aviso-minimo-barra{height:8px;margin-top:.55rem;background:rgba(31,26,23,.12);border-radius:999px;overflow:hidden}
.aviso-minimo-barra span{display:block;height:100%;max-width:100%;background:var(--c-primario);border-radius:999px}
.btn-principal.deshabilitado{opacity:.45;cursor:not-allowed;pointer-events:none}

/* ---- Seguimiento del pedido (cliente) ---- */
.seguimiento{list-style:none;padding:0;margin:.8rem 0 0;display:flex;flex-direction:column;gap:.15rem}
.seguimiento li{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;opacity:.45}
.seguimiento li.hecho{opacity:1}
.seguimiento li.actual{font-weight:700}
.seguimiento li i{font-size:1rem;color:var(--c-secundario)}
.seguimiento small{display:block;font-weight:400;opacity:.75}
.rastreo-mapa{height:320px;border:var(--borde) solid var(--c-secundario);border-radius:var(--radio);margin-top:.8rem}
.rastreo-estado{font-size:.85rem;margin-top:.5rem}
.pago-ok{color:#2f6b3a;font-weight:700}

/* ---- App de delivery (mobile first) ---- */
.app-delivery{background:var(--c-fondo)}
.dl-cabecera{position:sticky;top:0;z-index:1020;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;background:var(--c-secundario);color:var(--c-fondo-alt)}
.dl-marca{font-family:var(--f-titulos);text-transform:uppercase;font-size:1.4rem;color:var(--c-fondo-alt)!important;text-decoration:none!important}
.dl-usuario{display:flex;align-items:center;gap:.8rem;font-size:.85rem}
.dl-usuario form{margin:0}
.dl-salir{background:none;border:0;color:var(--c-fondo-alt);font-size:1.3rem;padding:0 .2rem}
.dl-gps{font-size:.75rem;font-weight:700;letter-spacing:.08em;padding:.2rem .6rem;border-radius:999px;background:rgba(243,218,182,.18)}
.dl-gps.ok{background:#2f6b3a}.dl-gps.error{background:var(--c-oferta)}.dl-gps.apagado{opacity:.5}
.dl-main{max-width:640px;margin:0 auto;padding:1rem 1rem 6rem}
.dl-login{max-width:420px;margin:2rem auto}
.dl-titulo{font-size:1.8rem;color:var(--c-primario)}
.dl-resumen{display:flex;gap:.5rem;align-items:stretch;margin-bottom:1rem}
.dl-resumen>div{flex:1;text-align:center;background:var(--c-fondo-alt);color:var(--c-secundario);border:2px solid var(--c-secundario);border-radius:var(--radio);padding:.5rem .3rem}
.dl-resumen strong{display:block;font-size:1.5rem;line-height:1}
.dl-resumen span{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.dl-refrescar{display:flex;align-items:center;justify-content:center;width:3rem;background:var(--c-fondo-alt);color:var(--c-secundario);border:2px solid var(--c-secundario);border-radius:var(--radio);font-size:1.3rem}
.dl-mapa{height:260px;border:var(--borde) solid var(--c-secundario);border-radius:var(--radio);margin-bottom:1rem}
.dl-mapa-chico{height:200px;margin-top:1rem}
/* Mientras el mapa no dibuja (o si no hay red) el recuadro no queda vacio */
.dl-mapa{position:relative;background:var(--c-fondo-alt)}
.dl-mapa:empty::before{content:"Cargando mapa...";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--c-secundario);opacity:.7}
.dl-mapa.sin-mapa::before{content:"No se pudo cargar el mapa. Usa el boton IR para navegar.";padding:1rem;text-align:center}
.dl-seccion h2{font-size:1.4rem;color:var(--c-fondo-alt);text-shadow:2px 2px 0 var(--c-secundario);margin:1.2rem 0 .6rem}
.dl-tarjeta{background:var(--c-fondo-alt);color:var(--c-secundario);border:2px solid var(--c-secundario);border-left-width:8px;border-radius:var(--radio);padding:.8rem .9rem;margin-bottom:.8rem;box-shadow:4px 4px 0 var(--c-secundario)}
.estado-borde-en-camino{border-left-color:#b8560f}.estado-borde-preparado{border-left-color:#6b4c8c}.estado-borde-entregado,.estado-borde-recibido{border-left-color:#2f6b3a;opacity:.8}
.dl-tarjeta-cab{display:flex;gap:.7rem;align-items:flex-start}
.dl-check{width:1.6rem;height:1.6rem;margin-top:.1rem;flex-shrink:0}
.dl-numero{font-size:.8rem;font-weight:700;display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.dl-numero .estado{font-size:.62rem;padding:.15rem .5rem}
.dl-cliente{font-weight:700;font-size:1.05rem;line-height:1.2;margin-top:.2rem}
.dl-total{font-weight:700;font-size:1.05rem;white-space:nowrap}
.dl-pagado{display:inline-block;font-size:.7rem;font-weight:700;color:#fff;background:#2f6b3a;border-radius:999px;padding:.15rem .5rem;white-space:nowrap}
.dl-cobrar{display:inline-block;font-size:.72rem;font-weight:700;color:var(--c-oferta);white-space:nowrap}
.dl-direccion{margin-top:.5rem;font-size:.92rem}
.dl-direccion small{display:block;opacity:.75;padding-left:1.2rem}
.dl-nota{font-size:.82rem;margin-top:.3rem;opacity:.85}
.dl-acciones{display:flex;gap:.4rem;margin-top:.7rem;flex-wrap:wrap}
.dl-btn{display:inline-flex;align-items:center;gap:.3rem;padding:.5rem .8rem;border:2px solid var(--c-secundario);border-radius:999px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--c-secundario);background:transparent;text-decoration:none!important;min-height:2.6rem}
.dl-btn-fuerte{margin-left:auto;background:var(--c-secundario);color:var(--c-fondo-alt)!important}
.dl-fijo{position:sticky;bottom:1rem;z-index:5;box-shadow:4px 4px 0 var(--c-secundario)}
.dl-volver{display:inline-block;margin-bottom:.8rem;font-weight:600}
.dl-items{margin-top:1rem;font-size:.9rem}
.dl-items>div{padding:.15rem 0}
.dl-ya-pagado{display:flex;gap:.8rem;align-items:center;background:#2f6b3a;color:#fff;border-radius:var(--radio);padding:1rem;margin-top:1rem;border:2px solid var(--c-secundario)}
.dl-ya-pagado i{font-size:2rem}
.dl-ya-pagado strong{display:block;font-size:1.3rem;letter-spacing:.06em}
.dl-form{margin-top:1rem}
.dl-form summary{cursor:pointer;list-style:none}
.dl-form summary::after{content:" +";font-weight:700}
.dl-form[open] summary::after{content:" −"}

/* Checkout sin sesion: ingreso o cuenta nueva segun el email */
.cuenta-checkout{background:#fff;border:2px solid var(--c-secundario);border-radius:14px;padding:.9rem 1rem}
.cuenta-checkout-texto{font-size:.9rem;margin-bottom:.6rem}
.aviso-recorte{background:#fff;border:2px solid var(--c-secundario);border-left:8px solid #E0A100;border-radius:14px;padding:.8rem 1rem;margin-bottom:1rem;color:var(--c-secundario)}
.aviso-recorte ul{padding-left:1.1rem;font-size:.92rem}

/* Boton de oferta del encabezado: llamativo, solo si hay productos en OUTLET */
.btn-oferta{position:relative;display:inline-flex;align-items:center;gap:.35rem;height:40px;padding:0 .8rem;border-radius:999px;background:#FFD23F;color:var(--c-secundario);border:2px solid var(--c-secundario);box-shadow:3px 3px 0 var(--c-secundario);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;text-decoration:none;animation:oferta-latido 2.4s ease-in-out infinite}
.btn-oferta:hover{color:var(--c-secundario);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--c-secundario)}
.btn-oferta i{font-size:1rem}
.btn-oferta-contador{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#C62828;color:#fff;font-size:.7rem;line-height:20px;text-align:center;border:2px solid var(--c-secundario);letter-spacing:0}
@keyframes oferta-latido{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(-8deg)}94%{transform:rotate(7deg)}97%{transform:rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){.btn-oferta{animation:none}}
@media (max-width:575.98px){.btn-oferta-texto{display:none}.btn-oferta{width:40px;padding:0;justify-content:center}}
.variante-stock{opacity:.85!important;font-size:.72rem;letter-spacing:.02em;margin-top:.1rem}
.card-stock{font-size:.78rem;font-weight:700;color:var(--c-secundario);margin:.25rem 0 .4rem}
.card-stock.poco{display:inline-block;background:#FFD23F;border:2px solid var(--c-secundario);border-radius:999px;padding:.1rem .55rem;align-self:flex-start}
.aviso-verificar{background:#fff;border:2px solid var(--c-secundario);border-left:8px solid #1565C0;border-radius:14px;padding:.8rem 1rem;margin-bottom:1rem;color:var(--c-secundario)}
.aviso-verificar p{font-size:.92rem}
.aviso-anulado{background:#fff;border:2px solid var(--c-secundario);border-left:8px solid #C62828;border-radius:14px;padding:.8rem 1rem;margin-bottom:1rem;color:var(--c-secundario)}
.aviso-anulado p{font-size:.92rem}
.aviso-nuevo{display:inline-block;background:#C62828;color:#fff;border-radius:999px;padding:0 .5rem;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
.dl-metodos{display:grid;gap:.35rem}
.dl-metodo{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:0;padding:.35rem .35rem .35rem .8rem;border:2px solid var(--c-secundario);border-radius:12px;background:#fff;font-weight:600;font-size:.9rem}
.dl-metodo small{font-weight:400;opacity:.7}
.dl-metodo input{max-width:9rem;height:38px;padding:.25rem .7rem;text-align:right;font-weight:700}
.dl-metodo.con-monto{background:var(--c-fondo-alt)}
.dl-suma{margin-top:.5rem;font-size:.9rem}
.dl-suma-estado{display:inline-block;margin-left:.3rem;padding:.05rem .55rem;border-radius:999px;font-weight:700;font-size:.8rem;border:2px solid var(--c-secundario)}
.dl-suma-estado.ok{background:#2E7D32;color:#fff}
.dl-suma-estado.mal{background:#FFD23F;color:var(--c-secundario)}