/* =========================================================
   LAYOUT.CSS — Grid, secciones y espaciado
   EcoAnalítica
   ========================================================= */

/* ---------- Contenedor y secciones ---------- */
.container { max-width: var(--max-ancho); margin: 0 auto; padding: 0 24px; }

section { padding: 104px 0; }
.hero   { padding: 0; }

/* ---------- Fondos por sección ---------- */
.about        { background: var(--color-arena); }
.problem      { background: var(--color-blanco); }
.solutions    { background: var(--color-bosque); }
.why          { background: var(--color-arena); }
.tools        { background: var(--color-arena-claro); }
.contact      { background: var(--color-bosque); }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--color-bosque);
  overflow: hidden;
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.hero-content { position: relative; z-index: 2; max-width: 820px; padding-top: 80px; padding-bottom: 80px; }

/* ---------- QUIÉNES SOMOS ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
}

/* ---------- PROBLEMA ---------- */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 56px;
}

/* ---------- SOLUCIONES ---------- */
.solutions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 56px;
}

/* ---------- POR QUÉ ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 56px;
}

/* ---------- HERRAMIENTAS ---------- */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 48px;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- CONTACTO ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}

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

/* Tablet */
@media (max-width: 1024px) {
  .about-grid,
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .problem-grid,
  .why-grid     { grid-template-columns: 1fr 1fr; }
  .solutions-grid { grid-template-columns: 1fr; }
  section { padding: 80px 0; }
}

/* Móvil */
@media (max-width: 640px) {
  .problem-grid,
  .why-grid,
  .tools-grid { grid-template-columns: 1fr; }
  section { padding: 64px 0; }
  .hero-content { padding-top: 110px; }
}