/* =========================================================
   PMM CIEx
   Se apoya en chronicle.css (rejilla, tipografía, contenedores,
   tarjetas, separadores). Aquí sólo lo que esta página añade:
   la ficha con varias etiquetas en fila, las baldosas de valores,
   la caja con el símbolo en tres colores y las tarjetas de logros.
   Figma 1213:145799.
   ========================================================= */

/* Ficha · varias etiquetas en la misma fila (Rebranding · Web Design) */
.meta .badges--row { flex-direction: row; flex-wrap: wrap; gap: 4px; }
.meta .badges--row .badge + .badge { margin-top: 0; }

/* Valores · cuatro baldosas con foto y el nombre encima (241,5 × 320) */
.values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.value {
  position: relative;
  aspect-ratio: 241.5 / 320;
  border-radius: 23px;
  overflow: hidden;
  background: var(--c-a);
}
.value img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.value span {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  color: #fff;
}
@media (max-width: 720px) {
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .value span { left: 16px; right: 16px; bottom: 16px; font-size: 20px; }
}

/* Símbolo · las tres baldosas vienen en una imagen con fondo
   transparente; el gris lo pone la caja */
.box--logos { --c: #ededed; }
.cv2.dark .box--logos { --c: var(--c-a); }

/* Logros · como las tarjetas del resumen, pero más bajas y con h3 */
.card--logro { min-height: 350px; gap: 32px; }
.card--logro h3 { font-size: 22px; line-height: 1.2; }
.card--logro p { margin-top: 16px; font-size: 15px; }
/* El círculo del icono lleva su color; el trazo del icono, el suyo */
.card__icon--ring {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ring);
  color: var(--ink);
}
.card__icon--ring svg { width: 30px; height: 30px; }
@media (max-width: 1100px) { .card--logro { min-height: 0; } }

/* Resultado · la grabación de la web dentro de su marco (818 de 1026,
   esquinas de 12) sobre la caja de 1026 × 651, como en el Figma.
   El botón de pausa y el autoplay son los de Dots (chronicle.js). */
.box--screen {
  container-type: inline-size;
  aspect-ratio: 1026 / 651;
  display: grid;
  place-items: center;
}
.screen {
  width: 79.8cqw;
  aspect-ratio: 1636 / 869;
  border-radius: 1.2cqw;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 12px 40px rgba(0, 0, 0, 0.10);
}
.screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.box--video { position: relative; }
.vbtn {
  position: absolute;
  right: 27px; bottom: 27px;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--badge);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  color: rgba(0, 0, 0, 0.85);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.vbtn:hover { background: rgba(140, 140, 140, 0.18); }
.vbtn:active { transform: scale(0.94); }
.vbtn:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.vbtn svg { grid-area: 1 / 1; display: block; }
.vbtn .vbtn__play { display: none; }
.box--video.is-paused .vbtn .vbtn__play { display: block; }
.box--video.is-paused .vbtn .vbtn__pause { display: none; }
@media (max-width: 720px) { .vbtn { right: 16px; bottom: 16px; } }