/* =========================================================
   Consultoría y diagnóstico — estilos específicos de página
   Extiende styles.css, sigue misma paleta/tipografía/tokens.
   ========================================================= */

/* ---------- Hero partido (texto + imagen) ---------- */
.hero-split-grid {
  display: grid;
  grid-template-columns: minmax(300px, 440px) 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.hero-split-grid h1 { text-transform: uppercase; max-width: none; }
.hero-split-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* ---------- Grid de puntos rojos (¿Qué analizamos?) ---------- */
.dot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: clamp(20px, 3vw, 34px);
}
.dot-item {
  padding: 4px clamp(14px, 2vw, 26px);
  border-left: 1px solid var(--line);
}
.dot-item:first-child { padding-left: 0; border-left: 0; }
.dot-label {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: 14.5px;
  letter-spacing: .01em; text-transform: uppercase; margin-bottom: 8px;
}
.dot-label::before {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
}
.dot-item p { font-size: 14px; color: var(--text-muted); }

/* ---------- Proceso horizontal numerado ---------- */
.process-row {
  display: flex; flex-wrap: wrap; gap: 24px 0;
  margin-top: clamp(20px, 3vw, 34px);
}
.process-step { flex: 1 1 180px; padding-right: 20px; position: relative; }
.process-num {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(26px, 2.6vw, 32px); color: var(--accent); margin-bottom: 10px;
}
.process-step h3 { font-size: 16px; margin-bottom: 6px; }
.process-step p { font-size: 13.8px; color: var(--text-muted); }
.process-chevron {
  flex: none; align-self: center; color: var(--line-strong);
  margin: 20px -4px 0;
}

/* ---------- Bloques texto + imagen alternos ---------- */
.media-row {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(320px, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.media-row img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-lg);
}
.media-row .lead-p { color: var(--text-muted); max-width: 52ch; }
.media-row .lead-p strong { color: var(--text); }

/* Subcolumnas dentro del bloque de texto (factsheet ligero, sin caja) */
.sub-cols {
  display: grid; gap: 0;
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.sub-cols.cols-4 { grid-template-columns: repeat(4, 1fr); }
.sub-cols.cols-3 { grid-template-columns: repeat(3, 1fr); }
.sub-col { padding-left: 16px; border-left: 1px solid var(--line); }
.sub-col:first-child { padding-left: 0; border-left: 0; }
.sub-col h4 { font-size: 13.8px; margin-bottom: 6px; letter-spacing: -0.01em; }
.sub-col p { font-size: 13px; color: var(--text-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-split-grid { grid-template-columns: 1fr; }
  .hero-split-media { order: -1; aspect-ratio: 16/10; }
  .media-row { grid-template-columns: 1fr; }
  .media-row img { order: -1; aspect-ratio: 16/10; }
  .dot-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .dot-item:nth-child(2) { padding-left: clamp(14px, 2vw, 26px); border-left: 1px solid var(--line); }
  .dot-item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .sub-cols.cols-4, .sub-cols.cols-3 { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .sub-col:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
  .sub-col:nth-child(odd) { padding-left: 0; border-left: 0; }
  .process-chevron { display: none; }
  .process-step { flex: 1 1 45%; }
}
@media (max-width: 560px) {
  .dot-grid, .sub-cols.cols-4, .sub-cols.cols-3 { grid-template-columns: 1fr; }
  .dot-item, .sub-col { padding-left: 0 !important; border-left: 0 !important; }
  .process-step { flex: 1 1 100%; }
}