/* Buscador del catálogo — MABATEC (html{font-size:75%}: se usan píxeles) */

.buscador{
    width:100%; max-width:1440px; margin:0 auto;
    padding: 20px 4% 4px;
}
.buscador *{ text-transform:none; }
.buscador__titulo{
    font-family:'Roboto',sans-serif; font-weight:900;
    font-size:clamp(28px,3.6vw,42px); color:#fff;
    text-align:center; margin:0 0 10px; line-height:1.1;
    text-shadow:0 2px 12px rgba(0,0,0,.45);
}
.buscador__ayuda{
    font-family:'Roboto',sans-serif; font-size:17px; line-height:1.55;
    color:#22301b; background:rgba(255,255,255,.92); border-radius:12px;
    padding:12px 20px; max-width:64ch; margin:0 auto 20px; text-align:center;
}
.buscador__ayuda em{ font-style:normal; font-weight:700; color:#2f5d22; }

.buscador input[type=search]{
    display:block; width:100%; max-width:680px; margin:0 auto;
    padding:16px 22px; font-size:19px; font-family:'Roboto',sans-serif;
    border:2px solid #cfd8c4; border-radius:40px; background:#fff; color:#1a2715;
}
.buscador input[type=search]:focus{ outline:3px solid #8fc74a; outline-offset:2px; border-color:#4a8b34; }

.filtros{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-bottom:14px; }
.filtros .f{
    font-family:'Roboto',sans-serif; font-size:14.5px; font-weight:600;
    padding:9px 18px; border-radius:30px; cursor:pointer;
    background:rgba(255,255,255,.92); color:#33402c; border:1px solid #cfd8c4;
}
.filtros .f:hover{ border-color:#4a8b34; color:#2f5d22; }
.filtros .f.on{ background:#2f5d22; color:#fff; border-color:#2f5d22; }
.filtros .f:focus-visible{ outline:3px solid #8fc74a; outline-offset:2px; }

.conteo{
    font-family:'Roboto',sans-serif; font-size:15px; color:#fff;
    text-align:center; margin:0 0 22px; text-shadow:0 1px 8px rgba(0,0,0,.5);
}
.sin-resultados{
    font-family:'Roboto',sans-serif; font-size:18px; color:#33402c;
    background:rgba(255,255,255,.92); border-radius:12px;
    padding:26px; text-align:center; margin:20px auto 0; max-width:60ch;
}

@media (max-width:640px){
    .buscador{ padding:14px 5% 4px; }
    .buscador input[type=search]{ font-size:17px; padding:13px 18px; }
    .filtros .f{ font-size:13px; padding:7px 13px; }
    .buscador__ayuda{ font-size:15px; }
}

/* ---------- buscador dentro de una sección ---------- */
.buscar-seccion{ margin: 0 0 20px; text-align:center; }
.buscar-seccion input[type=search]{
    display:block; width:100%; max-width:520px; margin:0 auto 8px;
    padding:13px 20px; font-size:17px; font-family:'Roboto',sans-serif;
    border:2px solid #cfd8c4; border-radius:40px; background:#fff; color:#1a2715;
}
.buscar-seccion input[type=search]:focus{ outline:3px solid #8fc74a; outline-offset:2px; border-color:#4a8b34; }
.buscar-seccion .conteo{ margin:0; min-height:20px; }
.catalogo .sin-resultados a{ color:#2f5d22; font-weight:700; }

/* ---------- título de sección ---------- */
.titulo-seccion{
    font-family:'Roboto',sans-serif; font-weight:900;
    font-size:clamp(30px,4vw,46px); color:#1a2715;
    line-height:1.08; margin:0 0 18px; letter-spacing:-.015em;
    text-align:center; text-transform:none;
    background:rgba(255,255,255,.92); border-radius:14px; padding:14px 22px;
}
.titulo-seccion--claro{
    background:none; color:#fff; padding:0; margin-bottom:12px;
    text-shadow:0 2px 14px rgba(0,0,0,.5);
}

/* Título que leen los buscadores y los lectores de pantalla, pero no se ve. */
.solo-lectores{
    position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- resultados de la búsqueda ---------- */
/* Los productos salen de aquí, no de .buscador, así que necesitan su propio
   ancho y su propia anulación del text-transform:capitalize global del sitio. */
.resultados{
    width:100%; max-width:1440px; margin:0 auto;
    padding: 8px 4% 60px;
}
.resultados *{ text-transform:none; }
/* El contador venia en blanco con sombra, pensado para ir sobre una foto de fondo.
   Ahora cae sobre el crema del sitio y asi no se leia. */
.resultados .conteo{ color:#33402c; text-shadow:none; }

@media (max-width:640px){
    .resultados{ padding:6px 5% 40px; }
}

/* El atributo hidden tiene que ganarle al display:flex que .hero-section
   trae de la hoja vieja del sitio; si no, ocultar las categorias no surte efecto. */
.hero-section[hidden],
.resultados[hidden]{ display:none !important; }

/* Las tarjetas tienen display:flex en catalogo.css, que le gana al atributo
   hidden. Sin esto el buscador marcaba las tarjetas como ocultas pero
   seguian dibujandose: el contador decia "0 productos" con todo a la vista. */
.tarjeta[hidden]{ display:none !important; }

/* En productos.html el buscador va arriba y las categorías debajo. La hoja vieja
   le pone flex:1 y justify-content:center a .hero-section, asi que en pantallas
   altas las tarjetas se iban al medio dejando un hueco enorme bajo el buscador.
   (Esta hoja no la carga pruebas.html, que es la otra pagina con .hero-section.) */
.hero-section{ flex:0 0 auto; justify-content:flex-start; }

/* ---------- tarjetas de categoría: que quepan en un teléfono ---------- */
/* La hoja vieja les da columnas de ancho fijo (600px y 300px), asi que en
   pantallas chicas el grid se salia de la pantalla. Se pasan a fracciones. */
.card-grid-2{
    grid-template-columns: repeat(2, minmax(0,1fr));
    margin-right: 0;
}
.card-grid{
    grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width:1000px){
    .card-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
    .card-grid-2,
    .card-grid{ grid-template-columns: minmax(0,1fr); }
    /* En una sola columna las tarjetas anchas quedaban demasiado bajas. */
    .card-grid-2 .card:before{ padding-bottom: 42%; width: 100%; }
    .card:before{ padding-bottom: 48%; }
    .hero-section{ margin: 14px; }
}