/* ==================================================
   DAMERO VERTICAL · SAN FRANCISCO
   SISTEMA DEFINITIVO · SIN PARCHES
================================================== */

.sf-damero {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  width: 100%;
  align-items: stretch; /* todas las celdas respetan la fila */
}

/* =========================
   CELDAS
========================= */

.sf-damero-item {
  padding: 32px;
  box-sizing: border-box;
}

/* =========================
   FONDOS
========================= */

.sf-bg-claro {
  background-color: var(--fondo-base);
  color: var(--texto-oscuro);
}

.sf-bg-verde {
  background-color: var(--verde-sec);
  color: var(--texto-claro);

  /* SOLO las celdas visuales usan flex */
  display: flex;
  align-items: center;     /* centra vertical respecto al texto */
  justify-content: center; /* centra horizontal */
}

/* =========================
   TEXTO
========================= */

.sf-damero-item h3 {
  margin-bottom: 12px;
  font-size: 1.25rem;
}

.sf-damero-item ul {
  padding-left: 18px;
}

.sf-damero-item li {
  margin-bottom: 6px;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* =========================
   IMÁGENES VERTICALES
========================= */

.sf-damero-item img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px) {
  .sf-damero {
    grid-template-columns: 1fr;
  }

  .sf-damero-item {
    padding: 24px;
  }

  .sf-bg-verde {
    display: block; /* vuelve a flujo natural en mobile */
    text-align: center;
  }

  .sf-damero-item img {
    max-height: none;
    width: 100%;
  }
}