/* ==========================================================================
   CASE STUDY HEADER (Módulo Minimalista)
   ========================================================================== */


main {
  width: var(--nav-container-width);
  margin: 0 auto;
}

/* =========================
   HERO / INTRODUCCIÓN
========================= */
.case-study-header {
  /* Rompe el contenedor estrecho del main para ir full-width */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  background-color: var(--color-bg-secondary);
  border-bottom: var(--border-1) solid var(--color-border-default);
  padding-top: var(--space-12);
  padding-bottom: var(--space-10);
  padding-left: 5vw;
  padding-right: 5vw;
}

.case-study-header__container {
  display: grid;
  grid-template-columns: 1.8fr 1.2fr;
  gap: var(--space-9);
  align-items: start;
  width: var(--nav-container-width);
  margin: 0 auto;
}

.case-study-intro__titles {
  margin-bottom: var(--space-6);
}

.case-study-intro__description {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--color-text-secondary);
}

/* --- Metadatos Técnicos (Lateral) --- */
.case-study-details {
  background-color: var(--color-bg-primary);
  /* Removido fondo secundario para más limpieza */
  padding: var(--space-7) 0;
  border-left: var(--border-1) solid var(--color-border-subtle);
  padding-left: var(--space-7);
  position: sticky;
  top: 120px;
}

.case-study-details__title {
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-2) solid var(--color-border-subtle);
}

.case-study-details__items {
  display: grid;
  gap: var(--space-6);
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.detail-item__label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.detail-item__value {
  font-size: 1rem;
  color: var(--color-text-primary);
  font-weight: 500;
  line-height: 1.4;
}

/* Neutraliza el color azul que about.css le da a .text-caption
   dentro del CTA, para que coincida con el del index */
.cta__box .text-caption {
  color: var(--color-text-muted);
}

/* =========================
   BLOQUES DE CONTENIDO (EDITORIAL GRID)
========================= */
.cs-section {
  border-bottom: var(--border-1) solid var(--color-border-default);
  padding: var(--space-8) 0;
}

.cs-section:last-of-type {
  border-bottom: none;
}

.cs-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-9);
  /* 64px — equilibrio entre editorial y compacto */
  align-items: start;
}

/* Columna izquierda: número + título */
.cs-grid__title {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Número de sección pequeño sobre el título */
.cs-grid__title .cs-index {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-action-primary);
  margin-bottom: var(--space-1);
}

.cs-grid__title h2 {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

/* Columna derecha: cuerpo de texto */
.cs-grid__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* 12px — más compacto */
  color: var(--color-text-secondary);
  font-size: 1.05rem;
  line-height: 1.75;
  padding-top: var(--space-1);
}

.cs-grid__content p {
  color: var(--color-text-secondary);
}

/* Listas Premium */
.cs-grid__content ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-left: 2px solid var(--color-border-default);
  padding-left: var(--space-5);
  margin: var(--space-1) 0;
}

.cs-grid__content li {
  position: relative;
  color: var(--color-text-primary);
  font-weight: 500;
  font-size: 1rem;
}

.cs-grid__content li::before {
  content: "";
  display: none;
  /* Reemplazado por borde izquierdo en el ul */
}

/* ============================================================
   SECCIÓN DE PROCESO / FASES (Dentro de la cuadrícula editorial)
   ============================================================ */
.skills-detailed__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-2);
}

.skills-detailed__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-6);
  border-bottom: var(--border-1) solid var(--color-border-subtle);
}

.skills-detailed__item:nth-last-child(-n+2) {
  border-bottom: none;
  padding-bottom: 0;
}

.skills-detailed__number {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-action-primary);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
}

.skills-detailed__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.skills-detailed__content p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* ============================================================
   RESPONSIVIDAD (TABLET & MOBILE)
   ============================================================ */

@media (max-width: 1024px) {
  .skills-detailed__grid {
    gap: var(--space-7);
  }
}

@media (max-width: 768px) {
  .skills-detailed__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .skills-detailed__item {
    border-bottom: var(--border-1) solid var(--color-border-subtle);
    padding-bottom: var(--space-6);
  }

  .skills-detailed__item:last-child {
    border-bottom: none;
  }
}

@media (max-width: 1024px) {
  .case-study-header {
    padding-top: var(--space-11);
    padding-bottom: var(--space-9);
  }

  .case-study-header__container {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .case-study-details {
    position: static;
    order: 2;
    border-left: none;
    border-top: var(--border-1) solid var(--color-border-subtle);
    padding-left: 0;
    padding-top: var(--space-7);
  }

  .cs-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .cs-grid__title {
    position: static;
  }
}

@media (max-width: 768px) {
  .case-study-header {
    padding-top: var(--space-12);
    padding-bottom: var(--space-7);
  }

  .case-study-intro__titles {
    margin-bottom: var(--space-4);
  }

  .case-study-details__items {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}

@media (max-width: 480px) {
  .case-study-details__items {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .cs-grid__content {
    font-size: 1rem;
  }
}