/* Rejilla de productos y tarjeta ampliada — MABATEC
   OJO: el sitio define html{font-size:75%}, así que 1rem = 12px.
   Por eso aquí se usan píxeles: para que los tamaños sean predecibles. */

/* ---------- estructura ---------- */
/* El pie quedaba a media página cuando el contenido era corto. */
body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.footer-07{ margin-top: auto; }

.catalogo{
    flex: 1 0 auto;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 34px 4% 60px;
}

/* El sitio aplica text-transform:capitalize a TODO con el selector *,
   lo que rompía los textos ("NPK 20-20-20 Con Vit. B1"). */
.catalogo *, .modal *{ text-transform: none; }
.catalogo .etiqueta,
.modal .etiqueta,
.modal .bloque__titulo,
.catalogo .tabla-pest th,
.modal .tabla-comp caption{ text-transform: uppercase; }

/* ---------- volver ---------- */
.volver{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.94);
    color: #2f5d22;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 11px 22px;
    border-radius: 40px;
    border: 1px solid #cfd8c4;
    margin-bottom: 20px;
}
.volver:hover{ background:#2f5d22; color:#fff; border-color:#2f5d22; }
.volver:focus-visible{ outline:3px solid #8fc74a; outline-offset:2px; }

.catalogo__intro{
    font-family: 'Roboto', sans-serif;
    font-size: 19px;
    line-height: 1.55;
    color: #23301d;
    background: rgba(255,255,255,.9);
    border-radius: 12px;
    padding: 14px 22px;
    margin: 0 auto 28px;
    max-width: 62ch;
    text-align: center;
}

/* ---------- rejilla ---------- */
.rejilla{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.tarjeta{
    background: #fff;
    border: 1px solid #e3ddcc;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0;
    font: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tarjeta:hover, .tarjeta:focus-visible{
    transform: translateY(-5px);
    box-shadow: 0 14px 32px rgba(20,45,10,.20);
    border-color: #4a8b34;
}
.tarjeta:focus-visible{ outline: 3px solid #4a8b34; outline-offset: 3px; }

.tarjeta__foto{
    background: #fff;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.tarjeta__foto img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0;          /* anula el border-radius:80px global */
}
.tarjeta__cuerpo{
    padding: 4px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}
.tarjeta__nombre{
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #1a2715;
    line-height: 1.25;
}
.tarjeta__sub{
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #5f6b58;
    line-height: 1.45;
}
.tarjeta__pie{
    margin-top: auto;
    padding-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.etiqueta{
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 5px 12px;
    border-radius: 30px;
    background: #eef4e6;
    color: #3f6b2c;
}
.etiqueta--ficha{ background:#4a8b34; color:#fff; }
.vermas{
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #4a8b34;
    white-space: nowrap;
}

/* ---------- tabla de pesticidas ---------- */
.tabla-envoltura{ overflow-x:auto; border-radius:16px; border:1px solid #e3ddcc; background:#fff; }
.tabla-pest{ border-collapse:collapse; width:100%; min-width:520px; font-family:'Roboto',sans-serif; }
.tabla-pest th, .tabla-pest td{ padding:14px 22px; text-align:left; border-bottom:1px solid #ece7d9; }
.tabla-pest th{ background:#2f5d22; color:#fff; font-size:14px; font-weight:700; letter-spacing:.06em; }
.tabla-pest td{ font-size:17px; color:#2c3a26; }
.tabla-pest tbody tr:nth-child(even){ background:#faf8f2; }
.tabla-pest tbody tr:last-child td{ border-bottom:0; }
.tabla-pest td:first-child{ font-weight:700; color:#1a2715; }

/* ---------- tarjeta ampliada ---------- */
.modal[hidden]{ display:none; }
.modal{
    position: fixed; inset: 0; z-index: 999;
    background: rgba(12,27,0,.74);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    overflow-y: auto;
}
.modal__caja{
    background:#fff; border-radius:22px; max-width:1020px; width:100%;
    max-height:92vh; overflow-y:auto; position:relative;
    padding: 34px 40px 40px;
    font-family:'Roboto',sans-serif;
}
.modal__cerrar{
    position: sticky; top: 0; float: right;
    background:#2f5d22; color:#fff; border:0; cursor:pointer;
    width: 46px; height: 46px; border-radius: 50%;
    font-size: 26px; line-height:1; display:grid; place-items:center;
}
.modal__cerrar:hover{ background:#4a8b34; }
.modal__cerrar:focus-visible{ outline:3px solid #8fc74a; outline-offset:2px; }

.modal__cabecera{ display:flex; gap:38px; flex-wrap:wrap; align-items:flex-start; }
.modal__texto{ flex:1 1 380px; min-width:0; }
.modal__imagen{ flex:0 0 290px; display:grid; place-items:center; }
.modal__imagen img{ max-width:100%; border-radius:16px; }

.modal h2{
    font-family:'Roboto',sans-serif; font-weight:900;
    font-size: clamp(30px, 3.4vw, 44px);
    color:#1a2715; margin:6px 0 8px; line-height:1.08; letter-spacing:-.01em;
}
.modal__sub{ color:#4a8b34; font-weight:700; font-size:19px; margin:0 0 16px; line-height:1.35; }
.modal__meta{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.modal p{ color:#33402c; font-size:18px; line-height:1.65; margin:0 0 14px; }

.bloque{ margin-top:26px; }
.bloque__titulo{
    font-size:14px; font-weight:700; letter-spacing:.12em;
    color:#6a7563; margin:0 0 10px;
}
.dosis{
    background:#eef4e6; border-left:5px solid #4a8b34; border-radius:0 12px 12px 0;
    padding:16px 22px;
}
.dosis p{ margin:0; color:#22301b; font-weight:500; font-size:19px; }

.tabla-comp{ border-collapse:collapse; width:100%; border:2px solid #c0392b; border-radius:12px; overflow:hidden; }
.tabla-comp caption{
    background:#c0392b; color:#fff; font-weight:700; padding:10px; font-size:15px; letter-spacing:.1em;
}
.tabla-comp td{ padding:9px 20px; font-size:17px; border-bottom:1px solid #f2e8e6; color:#2c3a26; }
.tabla-comp td:last-child{ text-align:right; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tabla-comp tr:last-child td{ border-bottom:0; }
.tabla-comp tr:nth-child(even){ background:#fdf7f6; }

.aviso-ficha{
    margin-top:22px; padding:14px 20px; border:1px dashed #c9b98f;
    border-radius:12px; background:#fdfaf0; color:#7a6a3f; font-size:16px;
}

/* ---------- ficha técnica ---------- */
.ficha-bloque{ border-top:1px solid #ece7d9; padding-top:22px; }
.btn-ficha{
    display:inline-flex; align-items:center; gap:10px;
    background:#2f5d22; color:#fff; text-decoration:none;
    padding:14px 26px; border-radius:40px;
    font-family:'Roboto',sans-serif; font-size:17px; font-weight:700;
    transition:background .18s ease;
}
.btn-ficha:hover{ background:#4a8b34; }
.btn-ficha:focus-visible{ outline:3px solid #8fc74a; outline-offset:2px; }
.btn-ficha__icono{
    display:grid; place-items:center; width:26px; height:26px;
    border-radius:50%; background:rgba(255,255,255,.22); font-size:15px; font-weight:700;
}

/* ---------- pantallas grandes ---------- */
@media (min-width: 1500px){
    .catalogo{ max-width:1600px; }
    .rejilla{ grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap:28px; }
    .tarjeta__nombre{ font-size:21px; }
    .tarjeta__sub{ font-size:15.5px; }
}

/* ---------- móvil ---------- */
@media (max-width: 640px){
    .catalogo{ padding:22px 5% 40px; }
    .rejilla{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:14px; }
    .tarjeta__cuerpo{ padding:2px 13px 14px; gap:5px; }
    .tarjeta__nombre{ font-size:15.5px; }
    .tarjeta__sub{ font-size:13px; }
    .vermas{ font-size:13px; }
    .etiqueta{ font-size:11px; padding:4px 9px; }
    .catalogo__intro{ font-size:16px; padding:12px 16px; }
    .modal__caja{ padding:20px 18px 26px; border-radius:16px; }
    .modal__imagen{ flex-basis:100%; order:-1; }
    .modal__imagen img{ max-height:230px; }
    .modal p, .tabla-comp td{ font-size:16px; }
    .dosis p{ font-size:17px; }
}

@media (prefers-reduced-motion: reduce){
    .tarjeta{ transition:none; }
    .tarjeta:hover{ transform:none; }
}

/* Botón para pedir cotización desde la ficha del producto. */
.cotiza-bloque{ text-align:center; }
.btn-cotiza{
    display:inline-block; text-decoration:none;
    font-family:'Roboto',sans-serif; font-size:16px; font-weight:700;
    background:#25d366; color:#0b2b14;
    border-radius:30px; padding:13px 24px;
}
.btn-cotiza:hover{ background:#1fbb59; }
.btn-cotiza:focus-visible{ outline:3px solid #4a8b34; outline-offset:3px; }