/* ══════════════════════════════════════════════════════════════════
   MONZZA · neumáticos
   Hereda de tubox.css. La portada es una pieza de feed de 1080x1350
   —diseñada, no fotografiada—, así que va entera y centrada como en
   Feed Preview: recortarla a sangre le corta el titular y el logo.
   ══════════════════════════════════════════════════════════════════ */
@import url('tubox.css?v=2e57a6ac');

/* el rojo de la marca, muestreado de las propias piezas */
.caso{--acento:#DC1414}
.etapas{--hecho:#DC1414}

.hero{background-color:#141414}
.hero .scale_w{transform:none !important}
.hero .media_c{display:grid;place-items:center;width:100%;height:100%;padding:88px 40px}
/* El <picture> es el ítem de la grilla, no la imagen: place-items lo
   centraba a él, y la imagen quedaba pegada a la izquierda de su caja.
   Con display:contents el picture desaparece del layout y la que se
   centra es la imagen. */
.hero picture{display:contents}
.hero img{
  width:auto;height:auto;
  max-width:min(100%,760px);max-height:calc(100svh - 220px);
  object-fit:contain;
}
/* sobre una pieza de diseño el grano se lee como ruido de compresión,
   no como textura */
.hero .grano{display:none}

/* La proporción de cada tira la lleva el --ar de su .lazy_wrapper, que
   es el mecanismo que ya usaban las demás fichas: las piezas de feed van
   1080/1350 y los anuncios 9/16. Antes le ponía aspect-ratio al .reel y
   metía la imagen suelta adentro, sin lazy_wrapper: sin él no hay alto
   —lo da `height:min(70svh,660px)`—, no hay carga diferida y no hay
   radio de 15px. Las piezas quedaban de 160px y sin esquinas.

   El epígrafe va sólo en las piezas, y por eso se le da estilo: el
   componente no traía ninguno, así que sumaba 21px crudos al alto de la
   figura y descuadraba la caja. */
.reels_pieza .reel figcaption{
  margin-top:12px;
  font-family:var(--sans);font-size:var(--fontXXS);
  letter-spacing:.13em;text-transform:uppercase;color:#6d6f68;
}

@media(max-width:900px){
  .hero .media_c{padding:74px 20px}
}