/* =====================================================================
   12 · CAFÉ EN GRANO (id="cafe-grano")
   Foto a la izquierda, texto y selector de tamaño a la derecha.
   El selector de tamaño funciona con js/cafe-grano.js
   ===================================================================== */

.cafe-grano {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--carbon);
}

.cafe-grano__foto { min-height: 540px; }   /* alto de la sección en escritorio (antes 780px) */
.cafe-grano__foto img { width: 100%; height: 100%; object-fit: cover; }

.cafe-grano__texto {
  padding: 80px clamp(24px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
}

.cafe-grano__descripcion { font-size: 18px; line-height: 1.6; color: var(--texto-2); max-width: 460px; }

/* Botones de tamaño (100 g · 250 g · 1 kg) */
.cafe-grano__tamanos { display: flex; gap: 14px; flex-wrap: wrap; max-width: 520px; }

.tamano {
  flex: 1;            /* los 3 cuadritos en una fila, del mismo ancho */
  min-width: 120px;   /* tamaño mínimo de cada cuadrito */
  max-width: 170px;
  min-height: 84px;
  padding: 12px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  color: var(--texto);
  border: 1px solid #6E6660;
  font-family: var(--fuente);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.tamano__peso   { font-size: 23px; font-weight: 700; white-space: nowrap; }
.tamano__precio { font-size: 16px; opacity: .85; }

/* Tamaño seleccionado (clase que pone el JS) */
.tamano--activo { background: var(--texto); color: var(--negro); border-color: var(--texto); }

.cafe-grano__boton { align-self: flex-start; }


/* ---------- Tablet y celular ---------- */
@media (max-width: 1024px) {
  .cafe-grano__foto { min-height: 440px; }
  .cafe-grano__texto { padding: 64px 40px; }
}

@media (max-width: 700px) {
  .cafe-grano { grid-template-columns: 1fr; }
  .cafe-grano__foto { min-height: 320px; height: 320px; }
  .cafe-grano__texto { padding: 48px var(--margen) 56px; gap: 22px; }
  .tamano { min-width: 0; max-width: none; flex: 1; padding: 12px 8px; }
  .tamano__peso { font-size: 20px; }
  .cafe-grano__boton { align-self: stretch; }
}