/* ==========================================================================
   MediaLab — /programa-ia-nativa
   Servicio «Programa IA-Nativa» para estudios de diseño y agencias de
   branding. Se apoya en curso.css, sitiosweb.css y contenido.css. Acá solo
   va la maqueta de la tapa (fases + ingresos), la regla 20/60/20 y el
   antes/después. Prefijo «pi-».
   ========================================================================== */

.pi-maqueta { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--e4); padding: var(--e5); }

/* Fases */
.pi-fases-mini { margin: 0; padding: var(--e4); list-style: none; background: var(--gris-claro); display: grid; gap: var(--e2); align-content: center; }
.pi-fases-mini li {
  display: flex; align-items: center; gap: var(--e2);
  padding: 7px var(--e2); background: var(--blanco); border: 1px solid var(--linea);
  font-size: 11px; font-weight: 700; line-height: 1.2; color: var(--tinta); white-space: nowrap;
}
.pi-fases-mini b { font-size: 10px; color: var(--texto-tenue); letter-spacing: .08em; }
.pi-fases-mini em { margin-left: auto; font-style: normal; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--azul); }
.pi-fases-mini li.pi-activo { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.pi-fases-mini li.pi-activo b { color: var(--sobre-tinta); }
.pi-fases-mini li.pi-activo em { color: var(--naranja); }

/* Ingresos: proyectos sueltos sobre una base mensual fija */
.pi-ingresos { display: grid; gap: var(--e2); padding: var(--e4); background: var(--tinta); }
.pi-ingresos small { color: var(--sobre-tinta); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.pi-barras { display: flex; align-items: flex-end; gap: 6px; height: 92px; }
/* --p: lo que suman los proyectos ese mes (0 a 100). La base mensual es fija. */
.pi-barras i {
  flex: 1; height: calc(34px + var(--p) * .58px);
  background: linear-gradient(to top, var(--naranja-boton) 0 34px, rgba(255, 255, 255, .28) 34px);
}
.pi-leyenda { display: flex; gap: var(--e3); color: var(--sobre-tinta); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pi-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.pi-leyenda i { width: 8px; height: 8px; }
.pi-l-proy { background: rgba(255, 255, 255, .28); }
.pi-l-mes { background: var(--naranja-boton); }

/* Regla 20/60/20: el ancho de cada tramo es su porcentaje */
.pi-regla { display: grid; grid-template-columns: 2fr 6fr 2fr; gap: var(--e2); margin-top: var(--e8); }
.pi-regla li { display: grid; align-content: start; gap: var(--e2); padding: var(--e5); border-top: 6px solid var(--tinta); background: var(--gris-claro); }
.pi-regla li.pi-regla-maquina { border-top-color: var(--azul); background: var(--azul-suave); }
.pi-regla b { font-family: Anton, "Arial Narrow", Impact, sans-serif; font-weight: 400; font-size: var(--t-titulo); line-height: 1; color: var(--tinta); }
.pi-regla-maquina b { color: var(--azul); }
.pi-regla strong { color: var(--tinta); font-size: var(--t-base); }
.pi-regla p { margin: 0; color: var(--texto-tenue); font-size: var(--t-menor); }
.pi-regla-maquina p { max-width: 44ch; }

/* Hoy / con el programa */
.pi-antes .w-antes > div:first-child { background: var(--gris-claro); }
.pi-antes .w-antes > div:first-child h3 { color: var(--texto-tenue); }
.pi-antes .w-antes > div:first-child li::before { background: var(--texto-tenue); }
.pi-antes .w-antes > div:last-child { border-color: var(--naranja); border-width: 2px; }

@media (max-width: 899px) {
  .pi-regla { grid-template-columns: 1fr; }
}
@media (max-width: 699px) {
  .pi-maqueta { grid-template-columns: 1fr; }
}