/* ===== REMEDIA — página: El Sistema =====
   Solo secciones de esta página.
   Todo selector prefijado con .page-el-sistema o .sec--*
   ===================================== */

/* ===== 00 · INTRO (hero) =======================================
   H1 + 2 párrafos, alineados a la izquierda — mismo criterio que
   .sec--intro de "La Firma" / "¿Esto Es Para Ti?", pero sin eyebrow
   (esta página no tiene un dato tipo "Desde 2009" que mostrar). */

.sec--intro__title {
  margin-bottom: var(--sp-3);
}

.sec--intro__subtitle {
  font-family: var(--f-ui);
  font-size: var(--fs-body-xl);
  color: var(--c-text-muted);
}

.sec--intro__subtitle + .sec--intro__subtitle {
  margin-top: var(--sp-3);
}

/* ===== 01 · BANDA (degradado propio, morado) ====================
   Usa el componente compartido .sec--banda/.grad (ver main.css) —
   solo se sobreescriben --g1..--g4 con el morado de esta página
   (--c-accent = #A6B0FF), mismo criterio que indica CLAUDE.md.
   ⚠️ CONFIRMAR: paradas intermedias (--g2/--g3) aproximadas a partir
   del acento — Abel las genera con su herramienta, esto es mientras
   tanto un degradado razonable hacia el morado real de la página. */

.sec--banda {
  --g1: #0B0B0B;
  --g2: #1B1830;
  --g3: #4C4FA6;
  --g4: #A6B0FF;
}

/* ===== 02 · UNIDADES (las 4 unidades de servicio) ===============
   Mismo criterio que ".perfil" en esto-es-para-ti.css: imagen +
   texto alternados, con "Entregables estructurales" como único
   elemento colapsable (<details>/<summary> nativo, ícono +/− puro
   CSS sobre [open]). Diagramas más anchos que los de "El público"
   (645×483 vs. 257×303), así que llevan su propio ancho máximo. */

.sec--unidades__list {
  border-top: 1px solid var(--c-line);
}

.unidad {
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--c-line);
}

.unidad__row {
  align-items: flex-start;   /* texto siempre arriba: al abrir "Entregables
                                 estructurales" la fila crece hacia abajo,
                                 pero la imagen no se reacomoda ni se mueve */
}

.unidad__media {
  display: flex;
  justify-content: center;   /* imagen centrada horizontalmente en su columna */
  position: sticky;
  top: var(--sp-6);   /* la imagen se queda fija a la altura del título al abrir el expandible */
}

.unidad__diagram {
  width: 100%;
  max-width: 548px;   /* 645px del SVG − 15%, a pedido de Abel */
  margin-inline: auto;
}

.unidad__title {
  font-style: italic;   /* mismo tratamiento que .perfil__title */
  margin-bottom: var(--sp-3);
}

.unidad__desc {
  font-family: var(--f-ui);
  font-size: var(--fs-body-m);
  color: var(--c-text-muted);
}

.unidad__desc + .unidad__desc {
  margin-top: var(--sp-3);
}

.unidad__desc strong {
  color: var(--c-text);
  font-weight: var(--fw-medium);
}

/* Sellos de certificación (Comunicación y marketing) — placeholders
   de posición mientras Abel sube los sellos reales. */
.unidad__sellos {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.unidad__sellos img {
  width: 64px;
  height: 64px;
}

/* --- "Entregables estructurales": único elemento colapsable --- */
.unidad__entregables {
  margin-top: var(--sp-5);
}

.unidad__entregables-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-line);
  cursor: pointer;
  list-style: none;
}

.unidad__entregables-toggle::-webkit-details-marker { display: none; }
.unidad__entregables-toggle::marker { content: none; }

.unidad__entregables-title {
  flex: 1;
  font-style: italic;
  font-size: var(--fs-h4);
}

/* Ícono +/-: mismas dos barras superpuestas que .perfil__icon */
.unidad__icon {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.unidad__icon::before,
.unidad__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--c-text);
  transform: translate(-50%, -50%);
}
.unidad__icon::before { width: 16px; height: 1px; }
.unidad__icon::after  { width: 1px; height: 16px; }
.unidad__entregables[open] .unidad__icon::after { display: none; }

.unidad__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: var(--sp-4);
}

.unidad__bullets li {
  position: relative;
  padding-left: var(--sp-4);
  font-family: var(--f-ui);
  font-size: var(--fs-body-m);
  color: var(--c-text-muted);
}

.unidad__bullets li + li {
  margin-top: var(--sp-2);
}

.unidad__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--c-accent);
}

@media (max-width: 991.98px) {
  .unidad__media { margin-bottom: var(--sp-4); }
}

/* ===== 03 · PRINCIPIOS ==========================================
   Título + párrafo a la izquierda; lista de 4 principios a la
   derecha — mismo criterio que .prueba (main.css), pero sin número:
   solo título + descripción, separados por línea. */

.sec--principios__row {
  align-items: flex-start;
}

.sec--principios__title {
  margin-bottom: var(--sp-3);
}

.sec--principios__desc {
  font-family: var(--f-ui);
  font-size: var(--fs-body-m);
  color: var(--c-text-muted);
}

.sec--principios__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.principio {
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--c-line);
}

.sec--principios__list .principio:first-child {
  padding-top: 0;
}

.principio__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-2);
}

.principio__desc {
  font-family: var(--f-ui);
  font-size: var(--fs-body-m);
  color: var(--c-text-muted);
  margin: 0;
}

@media (max-width: 991.98px) {
  .sec--principios__text { margin-bottom: var(--sp-5); }
}

/* ===== 04 · KPI =================================================
   Título + subtítulo centrados (mismo criterio que .sec--frenos en
   el-problema.css); debajo, 3 columnas con etiqueta en itálica +
   descripción, alineadas a la izquierda dentro de cada columna. */

.sec--kpi__text {
  max-width: 640px;   /* ⚠️ CONFIRMAR: sin anotación en la imagen, mismo criterio que .sec--frenos__title */
  margin-inline: auto;
  margin-bottom: var(--sp-6);
  text-align: center;
}

.sec--kpi__title {
  margin-bottom: var(--sp-3);
}

.sec--kpi__subtitle {
  font-family: var(--f-ui);
  font-size: var(--fs-body-m);
  color: var(--c-text-muted);
}

.sec--kpi__row {
  --bs-gutter-x: var(--sp-5);   /* separa las 3 columnas más que el gutter default */
}

/* Sin max-width: la 1ª columna queda al borde izquierdo del contenedor
   y la 3ª al borde derecho — el espacio va SOLO entre columnas (el
   gutter de arriba), no como aire sobrante después de "Operación". */

.sec--kpi__label {
  font-style: italic;   /* mismo tratamiento que .perfil__title / .unidad__title */
  margin-bottom: var(--sp-2);
}

.sec--kpi__desc {
  font-family: var(--f-ui);
  font-size: var(--fs-body-m);
  color: var(--c-text-muted);
  margin: 0;
}

@media (max-width: 767.98px) {
  .sec--kpi__col { margin-bottom: var(--sp-4); }
  .sec--kpi__col:last-child { margin-bottom: 0; }
}