/* ==========================================================================
   MediaLab — /contenido-especializado
   Servicio «Contenido Especializado». Se apoya en curso.css y en
   ../sitiosweb/sitiosweb.css (tapa con palabra rotativa, ventana, pestañas,
   paquetes). Acá solo van las piezas propias. Prefijo «ce-».
   ========================================================================== */

/* Maqueta de un dossier dentro de la ventana de la tapa */
.ce-dossier { padding: var(--e5); display: grid; gap: var(--e4); }
.ce-dossier-tapa { padding: var(--e5); background: var(--tinta); }
.ce-dossier-tapa small {
  display: inline-block; margin-bottom: var(--e2); padding: 3px var(--e2);
  background: var(--naranja-boton); color: var(--blanco);
  font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.ce-dossier-tapa p {
  margin: 0; font-family: Anton, "Arial Narrow", Impact, sans-serif; text-transform: uppercase;
  color: var(--blanco); font-size: clamp(16px, 1.6vw, 24px); line-height: 1.02;
}
.ce-dossier-tapa p em { font-style: normal; color: var(--naranja); }
.ce-dossier-fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e3); }
.ce-dossier-fila i { display: block; height: 46px; background: var(--gris-claro); border-top: 3px solid var(--naranja); position: relative; }
.ce-dossier-fila i::after { content: ""; position: absolute; left: 8px; right: 30%; bottom: 10px; height: 5px; background: #D7D7E0; }
.ce-dossier-pie { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--e3); align-items: stretch; }
.ce-barras { display: flex; align-items: flex-end; gap: 6px; padding: var(--e3); height: 70px; background: var(--gris-claro); }
.ce-barras i { flex: 1; background: var(--azul); }
.ce-barras i:nth-child(1) { height: 40%; } .ce-barras i:nth-child(2) { height: 72%; }
.ce-barras i:nth-child(3) { height: 55%; background: var(--naranja); } .ce-barras i:nth-child(4) { height: 88%; }
.ce-ebook { display: flex; align-items: center; justify-content: center; background: var(--tinta); color: var(--blanco); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

/* Anatomía de un dossier: las cinco piezas */
.ce-anatomia {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--e4);
  margin: var(--e8) 0 var(--e6); padding: 0; list-style: none;
}
.ce-pieza { padding: var(--e5); background: var(--blanco); border: 1px solid var(--linea); border-top: 4px solid var(--naranja); }
.ce-pieza b { display: block; font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--acento); margin-bottom: var(--e2); }
.ce-pieza strong {
  display: block; font-family: Anton, "Arial Narrow", Impact, sans-serif; text-transform: uppercase; font-weight: 400;
  color: var(--tinta); font-size: var(--t-titulo-s); line-height: 1.08; margin-bottom: var(--e3);
}
.ce-pieza span { color: var(--texto-tenue); font-size: var(--t-menor); line-height: 1.5; }
.ce-ejemplo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e4) var(--e6);
  padding: var(--e5) var(--e6); background: var(--tinta); color: var(--blanco);
}
.ce-ejemplo p { margin: 0; color: var(--sobre-tinta); font-size: var(--t-menor); max-width: 60ch; }
.ce-ejemplo p b { display: block; color: var(--blanco); font-size: var(--t-mayor); margin-bottom: var(--e1); }
.ce-ejemplo a {
  color: var(--blanco); font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  padding: var(--e3) 0; border-bottom: 2px solid var(--naranja); white-space: nowrap;
}
.ce-ejemplo a:hover { color: var(--naranja); }

/* Paquetes: el destacado dice otra cosa y hay una segunda fila de formatos sueltos */
.ce-paquetes .w-paquete--destacado::before { content: "El más completo"; }
.ce-sueltos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e5); margin-top: var(--e5); }
.ce-sueltos .w-paquete { flex-direction: row; flex-wrap: wrap; gap: var(--e4) var(--e6); align-items: center; }
.ce-sueltos .w-paquete > div { flex: 1 1 260px; }
.ce-sueltos .w-paquete p { margin: 0; color: var(--texto-tenue); font-size: var(--t-menor); }
.ce-sueltos .w-paquete h3 { font-size: var(--t-titulo-s); }
.ce-sueltos .w-paquete .boton { width: auto; margin-top: 0; flex: 0 0 auto; }

@media (max-width: 1099px) {
  .ce-anatomia { grid-template-columns: repeat(2, 1fr); }
  .ce-anatomia .ce-pieza:last-child { grid-column: 1 / -1; }
  .ce-sueltos { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 699px) {
  .ce-anatomia { grid-template-columns: 1fr; }
  .ce-dossier-fila { grid-template-columns: repeat(2, 1fr); }
  .ce-dossier-fila i:nth-child(3) { display: none; }
  .ce-sueltos .w-paquete .boton { width: 100%; }
  .ce-ejemplo { padding: var(--e5); }
}