/* =====================================================================
   05 · RETRATOS Y FOTOS DE PERSONAS
   NUNCA altura fija + object-fit:cover (en móvil se pierde la cara).
   aspect-ratio por breakpoint: 4/5 → 3/4 → 1/1.15
   object-position por breakpoint: cara en el tercio superior.
   Marco: contenedor isolation:isolate, marco z1, imagen z2 (nunca z-index:-1).

   <figure class="retrato retrato--izq" style="--pos:50% 22%">
     <img src="…" alt="Marinella en su cabina" width="800" height="1000">
     <figcaption>Marinella · fundadora</figcaption>
   </figure>
   --pos permite afinar el encuadre de cada foto sin tocar el CSS.
   ===================================================================== */

.retrato{ position:relative; isolation:isolate; margin:0; }
.retrato img{
  position:relative; z-index:2;
  width:100%; height:auto; aspect-ratio:4/5; max-height:600px;
  object-fit:cover; object-position:var(--pos, 50% 20%);
  border-radius:var(--_r);
  background:var(--c-fondo-alt);
}
/* Esquinas asimétricas: una muy redondeada, la opuesta recta. Alternar entre secciones */
.retrato--izq{ --_r:var(--radio-grande) var(--radio) var(--radio-grande) var(--radio); }
.retrato--der{ --_r:var(--radio) var(--radio-grande) var(--radio) var(--radio-grande); }
.retrato--arco{ --_r:999px 999px var(--radio) var(--radio); }
.retrato:not(.retrato--izq):not(.retrato--der):not(.retrato--arco){ --_r:var(--radio); }

/* Marco desplazado (opcional): .retrato--marco */
.retrato--marco::before{
  content:""; position:absolute; z-index:1; inset:18px -18px -18px 18px;
  border:1px solid var(--c-linea-acento); border-radius:var(--_r); pointer-events:none;
}
.retrato--der.retrato--marco::before{ inset:18px 18px -18px -18px; }

.retrato figcaption{
  position:absolute; z-index:3; left:20px; bottom:20px;
  padding:8px 14px; border-radius:var(--radio-pill);
  background:rgba(255,255,255,.9); color:#141414; backdrop-filter:blur(6px);
  font-size:.78rem; font-weight:600; letter-spacing:.04em;
}

/* Tablet: una columna, retrato centrado a ~440px */
@media (max-width:960px) and (min-width:701px){
  .retrato{ max-width:440px; margin-inline:auto; }
  .retrato img{ max-height:none; object-position:var(--pos-tablet, var(--pos, 50% 20%)); }
}
/* Móvil: 3/4 */
@media (max-width:700px){
  :root{ --radio-grande:var(--radio-grande-movil); }
  .retrato img{ aspect-ratio:3/4; max-height:none; object-position:var(--pos-movil, 50% 18%); }
  .retrato--marco::before{ inset:12px -12px -12px 12px; }
  .retrato--der.retrato--marco::before{ inset:12px 12px -12px -12px; }
}
/* Muy estrecho: ~1/1.15 */
@media (max-width:420px){
  .retrato img{ aspect-ratio:1/1.15; object-position:var(--pos-estrecho, 50% 16%); }
}

/* Placeholder de desarrollo cuando aún no hay foto (parche, no sustituto) */
.retrato--pendiente img{ object-fit:contain; background:var(--c-fondo-alt); }