/* =========================================================
   Productos (productos.html)
   ========================================================= */

.productos { display: flex; flex-direction: column; gap: 32px; }
.producto {
    background: linear-gradient(180deg, rgba(255, 180, 35, 0.07), var(--superficie) 40%);
    border: 1px solid rgba(255, 180, 35, 0.4); border-radius: 24px;
    padding: 44px;
    display: flex; flex-direction: column; gap: 28px;
}
.producto__cabecera { display: flex; align-items: center; gap: 20px; }
.producto__tipo { display: block; color: var(--naranja); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px; }
.producto__cabecera h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
.producto__descripcion { color: var(--texto-suave); font-size: 1.12rem; max-width: 820px; }
.producto__grupos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.producto__grupos > div {
    padding: 26px;
    background: var(--negro-2); border: 1px solid var(--borde); border-radius: var(--radio);
}
.producto__grupos h3 { font-size: 1.1rem; margin-bottom: 16px; }
.producto__botones { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Datos clave ---------- */
.datos-clave {
    display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start;
}
.datos-clave h2 { margin: 18px 0 16px; }
.datos-clave > div > p { color: var(--texto-suave); font-size: 1.12rem; }
.datos-clave__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dato {
    padding: 22px;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px;
}
.dato strong { display: block; color: var(--blanco); font-size: 1.08rem; margin-bottom: 6px; }
.dato span { color: var(--texto-suave); font-size: 0.96rem; }

@media (max-width: 960px) {
    .producto__grupos { grid-template-columns: 1fr; }
    .datos-clave { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 560px) {
    .producto { padding: 28px 20px; gap: 22px; }
    .producto__grupos > div { padding: 20px; }
    .producto__botones .boton { flex: 1 1 100%; }
    .datos-clave__lista { grid-template-columns: 1fr; }
}