/* ═══════════════════════════════════════════════════════════════════
   FOTOS COMPLETAS (<main class="ed-page ed-page--completa">)
   El modo editorial (04-paquete.css) mete cada foto en un marco de
   proporción fija con object-fit: cover: portada 16:10, divisor 21:9,
   galería 4:5. Con fotos de grupo eso corta manos y cabezas. Aquí el
   marco toma la proporción de la foto y la foto se ve entera.
   Nació para /paquete/profesional y el 2026-10-26 el dueño pidió llevarlo
   a todas las páginas de paquete («en casi todas cortas las fotos»): las
   seis lo cargan después de 04-paquete.css y llevan la clase en <main>.
   ═══════════════════════════════════════════════════════════════════ */

/* Portada, carta, divisor de cada grupo y cierre: el marco mide lo que la
   foto. Mismo número de clases que las reglas .is-portrait de 04-paquete.css
   y este archivo carga después, así que aquí gana. Los verticales conservan
   su ancho máximo para no ocupar dos pantallas. */
.ed-page--completa .ed-frame { aspect-ratio: auto; }
.ed-page--completa .ed-frame img { height: auto; object-fit: contain; }

/* Una vertical entera a 560-620 px de ancho mide ~900 px: más que la pantalla
   de una laptop. Se le da un ALTO y el ancho sale de su proporción, que el
   navegador ya conoce por width/height del <img> antes de que llegue la foto.
   (Con width:auto + max-height el ancho dependía de la foto ya cargada: el
   marco nacía en 22 px y empujaba la página al llegar — CLS 0.18 medido en
   producción el 2026-10-27.) El marco se ciñe a la foto; contain es la red si
   una casi cuadrada no cabe en el ancho máximo del marco. */
.ed-page--completa .ed-frame.is-portrait { width: fit-content; max-width: 100%; }
.ed-page--completa .ed-frame.is-portrait img { height: min(80vh, 820px); width: auto; max-width: 100%; object-fit: contain; }
/* La de la carta vive en una columna angosta: ahí el ancho de la columna
   manda y el alto sale de la proporción (con alto fijo quedaba con franjas). */
.ed-page--completa .ed-frame--tall.is-portrait { width: auto; }
.ed-page--completa .ed-frame--tall.is-portrait img { width: 100%; height: auto; }

/* Galería: misma altura para todas y cada una con su ancho, así una vertical
   y una horizontal se ven completas una junto a la otra. */
.ed-page--completa .ed-slides__track { grid-auto-columns: max-content; align-items: start; }
.ed-page--completa .ed-slide img { width: auto; height: clamp(280px, 30vw, 400px); }

/* Mini-foto de cada paquete: entera dentro del cuadro, sin recorte. */
.ed-page--completa .ed-mini img { object-fit: contain; }

@media (max-width: 760px) {
  /* En el teléfono la altura fija dejaría las horizontales más anchas que la
     pantalla: cada foto ocupa el 82 % del ancho con su alto natural. */
  .ed-page--completa .ed-slides__track { grid-auto-columns: 82%; align-items: center; }
  .ed-page--completa .ed-slide img { width: 100%; height: auto; }
  /* En el teléfono el ancho manda (el alto fijo la haría más ancha que la
     pantalla): todo el ancho, con tope de alto. */
  .ed-page--completa .ed-frame.is-portrait { width: auto; }
  .ed-page--completa .ed-frame.is-portrait img { width: 100%; height: auto; max-height: 80vh; }
}