/* ─────────────────────────────────────────────────────────────────
   CONTOTO — hoja del caso.

   Reusa la de Tu Box, que es la plantilla de ficha de proyecto, y le
   apaga lo que este caso no tiene: no hay portadas de reels ni pista
   de audio. El acento se corre al magenta del producto.
   ───────────────────────────────────────────────────────────────── */
@import url('tubox.css');

/* el acento del caso es el del producto, no el de la agencia */
.bloque_head,
.etapas_lista button{
  --neon:#FF0057;
  --brillo:0 0 9px rgba(255,0,87,.5), 0 0 24px rgba(255,0,87,.28);
}
/* la fila de cierre no se realza con color: hereda el oscuro de la tabla */

/* el riel sí va: son las capturas de la app. Lo que no hay es pista de audio */
.hero_vibe{display:none}

/* el fondo y el radio de la galería los pone tubox.css para las cuatro */
/* la portada es 1512x982, no 1512x945 */
.sitio_visor{aspect-ratio:1512/982}

/* el visualizador es la pieza principal: es una webapp, no un sitio
   institucional, así que se le da más aire y más alto */
.sitio{padding:14vh 0 4vh}
@media(max-width:768px){.sitio{padding:9vh 0 2vh}}


/* ── PORTADA · el mockup sobre el color del producto ──────────────
   No es una foto a sangre como los otros casos: es una pieza centrada
   sobre el magenta de la marca. Por eso el contenedor deja de estirar
   la imagen y pasa a centrarla con aire arriba y abajo. */
.hero{background-color:#FF0058}
/* el scale_w viene con scale(1.2) para el parallax de una foto a sangre;
   acá recortaría el mockup */
.hero .scale_w{transform:none !important}
.hero .wrapper,
.hero .scale_w{width:100%;height:100%}
.hero .media_c{
  display:grid;place-items:center;
  width:100%;height:100%;
  padding:100px 40px;
}
/* el tope va en calc y no en un 100%: como porcentaje no resolvía contra
   la celda del grid y la imagen se dibujaba a su alto natural, saliéndose
   de la portada por abajo */
.hero img{
  width:auto;height:auto;
  max-width:100%;max-height:min(calc(100svh - 260px), 470px);
  object-fit:contain;
}

/* ── LEGIBILIDAD SOBRE LA PORTADA ─────────────────────────────────
   Las etiquetas del hero usan mix-blend-mode:difference, que sobre un
   fondo oscuro devuelve blanco. Esta portada es magenta saturado y la
   inversión da otro magenta: quedan casi ilegibles. Acá se apaga la
   mezcla y se apoyan sobre una sombra de contacto. */
.hero_etiquetas,
.hero_ficha{
  mix-blend-mode:normal;
  color:var(--color-light);
  text-shadow:0 1px 12px rgba(6,4,3,.55), 0 0 2px rgba(6,4,3,.4);
}
/* sin franja: sobre un color plano leería como una viñeta suelta.
   Alcanza con la sombra de contacto del texto. */

@media(max-width:768px){
  .hero .media_c{padding:100px 20px}
  .hero img{max-height:calc(100svh - 240px)}
}