/* ===== PIEL · RETRATO ===============================================
   La foto de la pareja es la pagina. Es lo que hace el 90 % de las
   webs de boda que estan bien, y es lo que pide el §8 paso 5 —«subir
   fotos propias»— y decidio el D-02.2, que nunca se construyo.

   LA DECISION QUE LO HACE ROBUSTO: el texto NUNCA toca la foto. Va en
   un tarjeton de color solido apoyado sobre ella. Asi da igual si la
   foto sale oscura, clara, a contraluz o en blanco y negro — que es
   exactamente donde Bodas.net falla en publico (§14) y donde WithJoy
   solo da un consejo escrito. Sin tarjeton habria que validar el
   contraste contra los pixeles de una foto que no hemos visto; con
   el, no hay nada que validar.
   ==================================================================== */

.m-retrato{--medida:940px}

/* ── la portada ── */

/* El tarjeton va centrado, en el mismo eje que la columna de contenido
   de abajo.

   Antes estaba apoyado en el margen izquierdo, con un `max()` que lo
   alineaba con esa columna. Funcionaba, pero la pagina entera iba a la
   izquierda y el resultado se leia como descuadrado: el cuerpo al
   margen y el formulario de confirmacion y el pie centrados, que son
   de la base. La pareja lo dijo mirandolo, no midiendolo, y tenia
   razon — lo que fallaba no era el margen, era que habia dos ejes. */
.m-retrato .hero{
  min-height:90vh;
  display:flex;align-items:flex-end;justify-content:center;
  padding:clamp(1.5rem,4vw,3rem)
          clamp(1.5rem,4vw,3rem)
          clamp(2.5rem,7vh,4.5rem);
}
.m-retrato .hero .foto{
  position:absolute;inset:0;
  background:var(--foto) center 30%/cover no-repeat;
}
/* Un velo muy leve, solo para que el tarjeton no flote sobre un
   blanco puro y se pierda el borde. No es para legibilidad: de eso se
   encarga el tarjeton. */
.m-retrato .hero .foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,19,15,.22),transparent 55%);
}
.m-retrato .hero .tarjeton{
  position:relative;
  background:var(--blanco);
  padding:clamp(2.2rem,5vw,3.4rem) clamp(2rem,5vw,3.6rem);
  max-width:min(560px,100%);
}
.m-retrato .hero .tarjeton{text-align:center}
.m-retrato .hero .nombres{font-size:clamp(2.6rem,6vw,4.2rem);line-height:1}
.m-retrato .hero .cd{justify-content:center;gap:clamp(1.4rem,4vw,2.4rem)}

/* ── el cuerpo: un solo eje, el del centro ── */
/*
   Aqui habia veintitantas reglas llevando cada pieza al margen
   izquierdo. Se han quitado en vez de anularse una por una: la base ya
   centra, y dejar `text-align:left` peleandose con un `center` de
   arriba es como acaban las hojas de estilo que nadie se atreve a
   tocar. Lo que queda es lo que la base NO centra sola.
*/
.m-retrato .pagina{text-align:center}
.m-retrato .sec-head p,
.m-retrato .cabecera .bajada{margin-left:auto;margin-right:auto;max-width:56ch}
.m-retrato .puertas{width:100%}

/* La segunda foto, a toda pagina, cortando el recorrido: es lo que
   impide que a partir del primer scroll esto vuelva a ser un
   formulario. Si la pareja solo ha subido una, aqui no hay nada. */
.m-retrato .franja{
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  height:clamp(220px,34vh,380px);
  margin-top:clamp(2rem,5vw,3.5rem);
  overflow:hidden;
}
.m-retrato .franja img{display:block;width:100%;height:100%;object-fit:cover}

@media (max-width:640px){
  .m-retrato .hero{min-height:82vh;padding-left:clamp(1.3rem,5vw,2rem)}
}