/* ══════════════════════════════════════════════════════════════════
   Fichas de caso · overrides compartidos sobre main.css
   Las proporciones salen de los archivos reales, no al revés:
   así ninguna foto se recorta mal.
   ══════════════════════════════════════════════════════════════════ */



/* ── sección a sangre completa (reemplaza al video del original) ── */
.fullbleed{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100svh;min-height:640px;padding:48px 0;
}
.fullbleed .media_c{width:100%;height:100%}
.fullbleed .lazy_wrapper{width:100%;height:100%}
.fullbleed img{width:100%;height:100%;object-fit:cover}

/* ── los pares grande+chico toman el aspecto real de cada archivo ── */
/* El reset va con especificidad MENOR que la regla --ar de abajo: si empatan,
   gana el orden y los slots colapsan a altura 0. */
.left>*,.right>*{aspect-ratio:auto}
/* main.css fija height:100% acá; con aspect-ratio eso se vuelve circular */
.left .media_c,.right .media_c{height:auto}

/* cada slot respeta el aspecto de su propia imagen */
.media_c[style*="--ar"]{aspect-ratio:var(--ar)}

.left>:first-child{flex:0 0 58%}
.left>:last-child{flex:0 0 30%}
.right>:first-child{flex:0 0 30%}
.right>:last-child{flex:0 0 58%}
.left,.right{align-items:center}

/* ── FICHA (ocupa el lugar de CREDITS) ── */
.ficha_row h4{color:#6d6f68}
.ficha_row ul{font-weight:500}

/* ── el slot alto de la galería es el único retrato del set ── */
.v1v{aspect-ratio:786/1184}
.v2v{aspect-ratio:1172/666}
.v3v{aspect-ratio:1920/1440}

/* ── logo de Team: el SVG viene blanco, blend difference lo resuelve ── */
@media(max-width:768px){.main_logo img{width:74px}}

/* ── galería completa dentro del overlay ── */
.bs_grid{grid-template-columns:repeat(2,1fr)}
.bs_item .lazy_wrapper{aspect-ratio:var(--ar,3/2)}
.bs_item.wide{grid-column:1 / -1}

@media(max-width:768px){
  .fullbleed{height:auto;min-height:auto;padding:12px 0}
  .left>:first-child,.left>:last-child,
  .right>:first-child,.right>:last-child{flex:auto;width:100%}
}

/* ── pares verticales: sin esto, flex estira ambos a la altura del más alto
   y el de aspecto más ancho se recorta ── */
.portrait{align-items:flex-start}
.portrait .media_c[style*="--ar"]{aspect-ratio:var(--ar);height:auto}

/* ══════════════════════════════════════════════════════════════════
   Imágenes a tamaño completo en las fichas de proyecto
   Cada pieza ocupa el ancho de la ventana y conserva su proporción
   real vía --ar: nada se recorta ni se deforma.
   ══════════════════════════════════════════════════════════════════ */
.content > section{padding:0}
.content .left,.content .right,.content .portrait{
  flex-direction:column;align-items:stretch;gap:0;padding:0;width:100%;
}
.content .left > *,.content .right > *,
.content .portrait > *{flex:auto;width:100%;height:auto}
.content .media_c{width:100%;height:auto}
.content .lazy_wrapper{width:100%;height:100%}

/* la sección a sangre deja de estar atada a la altura de la ventana:
   manda la proporción del archivo */
.fullbleed{height:auto;min-height:0;padding:0}
.fullbleed .media_c{height:auto}
.fullbleed .lazy_wrapper{aspect-ratio:var(--ar,3/2)}