/* ============================================================================
   SECCIÓN · OVERVIEW 13 meses (sección clara) — las 2 FASES como black-cards
   Dos tarjetas negras premium sobre fondo crema (efecto "Amex sobre mármol").
   Mobile-first. Solo vars de tokens.css.
   ============================================================================ */

.sec-overview .s-head { margin-bottom: clamp(40px, 6vw, 68px); }
.sec-overview .ov-num { color: var(--red); font-style: italic; }
.sec-overview .ov-intro { color: var(--text-dim); max-width: 640px; margin-inline: auto; }

/* ---- Rejilla de fases ---- */
.sec-overview .ov-phases {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(18px, 3vw, 26px);
  max-width: 1040px; margin-inline: auto;
}
.sec-overview .ov-divider { display: none; }

/* ---- Tarjeta negra premium ---- */
.sec-overview .ov-phase {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(162deg, #232323 0%, #101010 52%, #070707 100%);
  border: 1px solid rgba(236, 68, 41, 0.22);
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 40px);
  color: var(--d-text);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 40px 80px -42px rgba(0, 0, 0, 0.85),
    0 0 72px -42px var(--red-glow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* brillo superior tipo tarjeta */
.sec-overview .ov-phase::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 42%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent);
  pointer-events: none;
}
.sec-overview .ov-phase:hover {
  transform: translateY(-4px);
  border-color: rgba(236, 68, 41, 0.4);
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 52px 96px -42px rgba(0,0,0,0.9), 0 0 90px -38px var(--red-glow);
}
.sec-overview .ov-phase > * { position: relative; z-index: 1; }

/* ---- Cabecera de la tarjeta ---- */
.sec-overview .ov-phase-icon { width: 38px; height: 38px; stroke: var(--red); stroke-width: 1.5; fill: none; margin-bottom: var(--s-4); }
.sec-overview .ov-phase-tag {
  font-family: var(--font-sans); font-weight: 900; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); margin-bottom: var(--s-2);
}
.sec-overview .ov-phase h3 { color: #fff; font-size: var(--fs-h3); margin-bottom: var(--s-3); }
.sec-overview .ov-desc { color: var(--d-text-dim); margin-bottom: var(--s-5); }
.sec-overview .ov-desc strong { color: var(--d-text-strong); font-weight: 700; }

/* ---- Lista (sobre oscuro: texto crema, check rojo) ---- */
.sec-overview .ov-phase .checklist { gap: var(--s-4); margin-top: auto; }
.sec-overview .ov-phase .checklist li { color: var(--d-text); }
.sec-overview .ov-phase .checklist li strong { color: #fff; font-weight: 700; }

/* ---- Tablet / desktop: dos columnas ---- */
@media (min-width: 860px) {
  .sec-overview .ov-phases { grid-template-columns: 1fr 1fr; gap: clamp(22px, 2.6vw, 30px); align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .sec-overview .ov-phase { transition: none; }
  .sec-overview .ov-phase:hover { transform: none; }
}