/* Pagina de cada seccion (categoria): banner, buscador, grilla de productos y paginacion. Va ultimo. */
#vistaSeccion:not([hidden]){animation:aparece .4s ease backwards}
#vistaSeccion .wrap{padding-bottom:44px}

.sec-banner{position:relative;margin:0 0 18px;border-radius:12px;overflow:hidden;height:clamp(170px,27vw,340px);background:linear-gradient(160deg,var(--azul),var(--azul-osc));box-shadow:0 4px 14px rgba(0,0,0,.18)}
.sec-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.sec-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,42,116,.82) 0%,rgba(8,42,116,.4) 45%,rgba(0,0,0,0) 78%)}
.sec-banner-txt{position:absolute;z-index:2;left:clamp(16px,4vw,44px);top:50%;transform:translateY(-50%);color:#fff;max-width:min(560px,72%)}
.sec-banner h1{font:700 clamp(26px,4vw,46px)/1.02 'Roboto Condensed',sans-serif;text-transform:uppercase;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.sec-banner p{margin-top:8px;font-size:clamp(13px,1.6vw,17px);opacity:.93;text-shadow:0 1px 4px rgba(0,0,0,.4)}

.sec-barra{display:flex;gap:12px 20px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:20px}
.sec-buscar{display:flex;align-items:center;gap:10px;border:1px solid #CFD3D9;border-radius:30px;background:#fff;padding:9px 16px;flex:1 1 280px;max-width:460px}
.sec-buscar svg{width:18px;height:18px;stroke:var(--gris);fill:none;stroke-width:2;flex:none}
.sec-buscar input{border:0;outline:0;background:none;font:inherit;font-size:14px;width:100%;color:var(--texto)}
.sec-volver{color:var(--azul);font-weight:500;font-size:14px}
.sec-volver:hover{text-decoration:underline}

.sec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.sec-grid .prod{flex:none;width:auto}
.sec-grid .prod-img:empty::after{content:'Sin imagen';position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:#9AA0A8}
.sec-grid .estado{grid-column:1/-1}

.sec-pag{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:28px 0 8px}
.sec-pag button{min-width:38px;height:38px;padding:0 10px;border:1px solid var(--linea);border-radius:8px;background:#fff;font-weight:500;color:var(--texto);transition:border-color .2s,background .2s}
.sec-pag button:hover:not(.on){border-color:var(--azul)}
.sec-pag button.on{background:var(--azul);border-color:var(--azul);color:#fff}
.sec-pag .pg-et{align-self:center;color:var(--gris);font-size:13px;margin-right:4px}

@media (max-width:640px){
  .sec-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .sec-banner{height:150px}
  .sec-banner-txt{max-width:86%}
}