/**
 * DIGART Studio — HOME Refinement
 * Sprint HOME-08 — Certificación final
 *
 * Archivo de refinamiento: normaliza los bloques HOME-02 a HOME-07
 * para alinearlos al Design System existente de home.css.
 *
 * Carga después de home.css. No modifica variables globales.
 * Solo sobrescribe propiedades de bloque donde hay inconsistencia.
 *
 * Principios aplicados:
 *   - padding de sección: 96px / 72px (1024) / 56px (640) — alineado al sistema
 *   - border-radius de tarjetas: 16px uniforme
 *   - breakpoints: 1024px tablet, 640px móvil — sin breakpoints ad hoc
 *   - font-size de body de tarjeta: 14px uniforme
 *   - gap de grids: 20px uniforme
 */

/* ═══════════════════════════════════════════════════════════════════
   HOME-02 — ¿Qué necesitas hoy?
   ═══════════════════════════════════════════════════════════════════ */
.needs-block { padding: 96px 0; }

.express-card  { border-radius: 16px; }
.vertical-card { border-radius: 14px; } /* menor porque es compacta — se mantiene */

/* Alinear breakpoint al sistema */
@media (max-width: 1024px) {
  .needs-block  { padding: 72px 0; }
  .needs-grid   { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .needs-block  { padding: 56px 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   HOME-03 — ¿Cómo podemos ayudarte?
   ═══════════════════════════════════════════════════════════════════ */
.how-block { padding: 96px 0; }

/* Altura uniforme de tarjetas */
.how-grid   { align-items: stretch; }
.how-card   { border-radius: 16px; }

@media (max-width: 1024px) {
  .how-block { padding: 72px 0; }
}
@media (max-width: 640px) {
  .how-block  { padding: 56px 0; }
  .how-grid   { grid-template-columns: 1fr; }
  .how-card__body { padding: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════
   HOME-04 — ¿Por qué DIGART Studio?
   ═══════════════════════════════════════════════════════════════════ */
.why4-block { padding: 96px 0; }

.why4-grid  { align-items: stretch; }
.why4-card  { border-radius: 16px; }

@media (max-width: 1024px) {
  .why4-block { padding: 72px 0; }
}
@media (max-width: 640px) {
  .why4-block { padding: 56px 0; }
  .why4-grid  { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   HOME-05 — Proyectos Destacados
   ═══════════════════════════════════════════════════════════════════ */
.proj5-block { padding: 96px 0; }

/* Altura uniforme — aspect-ratio en media garantiza proporciones */
.proj5-grid  { align-items: stretch; }
.proj5-card  { border-radius: 16px; }

@media (max-width: 1024px) {
  .proj5-block { padding: 72px 0; }
  .proj5-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .proj5-block { padding: 56px 0; }
  .proj5-grid  { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   HOME-06 — Método DIGART
   ═══════════════════════════════════════════════════════════════════ */
.method-block { padding: 96px 0; }

/* Uniformar border-radius del grid contenedor */
.method-grid  { border-radius: 16px; }

@media (max-width: 1024px) {
  .method-block { padding: 72px 0; }
  /* Forzar 3×2 en tablet (eliminar el 1-col del sprint) */
  .method-grid  { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .method-block { padding: 56px 0; }
  .method-grid  { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   HOME-07 — CTA Final
   Usa clases existentes de home.css — sin cambios de padding.
   Solo asegurar coherencia de botones.
   ═══════════════════════════════════════════════════════════════════ */
/* .cta-final ya está definido en home.css — sin overrides necesarios */

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL — Consistencia entre bloques adyacentes
   ═══════════════════════════════════════════════════════════════════ */

/* Eliminar doble borde visual entre bloques oscuros contiguos */
.h02 + .how-block,
.proj5-block + .method-block {
  border-top: 1px solid rgba(255,255,255,.04);
}

/* Asegurar que section--light no colisione con fondos blancos */
.how-block + .why4-block {
  border-top: 1px solid rgba(0,0,0,.05);
}

/* Footer de bloques (botón central): espaciado uniforme */
.how-block__footer,
.why4-footer,
.proj5-footer,
.method-footer {
  margin-top: 48px;
}

/* ═══════════════════════════════════════════════════════════════════
   HOME-09 — Ajustes de integración entre bloques
   ═══════════════════════════════════════════════════════════════════ */

/* H04(#fff) → H05(dark): el cambio drástico ya es visualmente limpio */

/* H05(dark bg-primary) + H06(dark bg-elevated): separador sutil */
.proj5-block + .method-block {
  border-top: 1px solid rgba(255,255,255,.08);
}

/* H06(dark bg-elevated) + H07 CTA(dark): separador sutil */
.method-block + .cta-final {
  border-top: 1px solid rgba(255,255,255,.06);
}