/* ===========================================================================
   Portada — la bienvenida de alvaroyanabel.com (plan portada-y-diseno)
   Boceto elegido: «Portada A · Foto fundida». Usa la paleta de styles.css.
   Reglas de Álvaro: ningún rótulo partido a medias (cada trozo con sentido va
   en su propio nowrap) y ningún número en la letra de los títulos (van en Jost).
   =========================================================================== */

.portada__col{
  padding-bottom:calc(40px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;
}
/* El texto nunca se estira: columna de lectura cómoda, centrada. */
.portada__contenido{width:100%;max-width:480px;margin:0 auto}

/* La foto se deshace en el fondo: ni bordes ni recuadros. */
.portada__foto{
  display:block;width:100%;
  height:clamp(300px, 88vw, 520px);
  object-fit:cover;object-position:center 78%;
  filter:saturate(.85) sepia(.06);
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,rgba(0,0,0,.5) 80%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 60%,rgba(0,0,0,.5) 80%,transparent 100%);
}

/* Al entrar, la foto se descubre: un velo de borde suave se retira de arriba
   abajo (en el ordenador, de izquierda a derecha) mientras la imagen se asienta
   y se enfoca. El velo va en el marco y el fundido en la foto: se suman.
   Al acabar, el velo queda del todo retirado. */
.portada__marco{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent 60%);
          mask-image:linear-gradient(to bottom,#000 40%,transparent 60%);
  -webkit-mask-size:100% 300%;mask-size:100% 300%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:0 0;mask-position:0 0;
  animation:portadaVelo 3s cubic-bezier(.45,.05,.3,1) both;
}
.portada__marco .portada__foto{animation:portadaFoto 3.4s cubic-bezier(.25,.6,.25,1) both}
.portada__marco.espera,.portada__marco.espera .portada__foto{animation-play-state:paused}
@keyframes portadaVelo{
  from{-webkit-mask-position:0 100%;mask-position:0 100%}
  to  {-webkit-mask-position:0 0;mask-position:0 0}
}
@keyframes portadaVeloLado{
  from{-webkit-mask-position:100% 0;mask-position:100% 0}
  to  {-webkit-mask-position:0 0;mask-position:0 0}
}
@keyframes portadaFoto{
  from{transform:scale(1.08);filter:saturate(.85) sepia(.06) blur(10px)}
  to  {transform:none;filter:saturate(.85) sepia(.06) blur(0)}
}
/* El texto aparece suave cuando el velo llega a él; este no espera a la foto. */
.portada__contenido{animation:portadaTexto 1.2s .8s ease-out both}
@keyframes portadaTexto{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* «Reducir movimiento» activado en el móvil: todo sale ya puesto. */
@media (prefers-reduced-motion:reduce){
  .portada__marco,.portada__marco .portada__foto,.portada__contenido{animation:none}
}

.portada__cab{
  position:relative;margin-top:-40px;padding:0 24px;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
}
.portada__kicker{
  margin:0;font-size:12px;font-weight:400;letter-spacing:.32em;text-transform:uppercase;
  color:var(--acento-osc);white-space:nowrap;
}
.portada__nombres{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(38px, 11vw, 50px);line-height:1.05;white-space:nowrap;
}
.portada__nombres em{font-style:italic;color:var(--acento)}
.portada__fecha{
  margin:0;font-size:clamp(13px, 3.8vw, 15px);font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;
}
.portada__lugar{margin:0;font-size:15px;color:#6b675e}
.nw{white-space:nowrap}

/* Cuenta atrás: números en Jost, con cifras del mismo ancho para que no bailen. */
.cuenta{
  margin:24px 24px 0;padding:14px 0;
  border-top:1px solid #e0dacd;border-bottom:1px solid #e0dacd;
  display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));
}
.cuenta__celda{display:flex;flex-direction:column;align-items:center;gap:2px}
.cuenta__celda + .cuenta__celda{border-left:1px solid #e0dacd}
.cuenta__num{
  font-family:var(--sans);font-weight:300;font-size:40px;line-height:1.1;
  font-variant-numeric:tabular-nums lining-nums;color:var(--tinta);
}
.cuenta__lbl{font-size:12px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:#6b675e}

.portada__btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:58px;margin:22px 24px 0;padding:0 20px;border-radius:14px;
  background:var(--acento-osc);color:#fffdfa;text-decoration:none;
  font-size:18px;font-weight:500;letter-spacing:.02em;
  -webkit-tap-highlight-color:transparent;transition:background .15s, transform .06s;
}
.portada__btn:hover{background:#4a5842}
.portada__btn:active{transform:scale(.985)}
.portada__btn:focus-visible{outline:3px solid rgba(125,143,112,.45);outline-offset:3px}

/* El día de la boda y después (lo rellena portada.js con lo que diga el servidor). */
.portada__titulo{
  margin:22px 24px 0;text-align:center;font-family:var(--serif);font-weight:400;
  font-size:clamp(34px, 10vw, 46px);line-height:1.1;
}
.portada__texto{margin:10px 28px 0;text-align:center;font-size:17px;line-height:1.5;color:#4a4740}

/* En el ordenador: la foto ocupa la mitad izquierda de arriba abajo y se
   deshace hacia la derecha en el fondo; a la derecha, el contenido centrado.
   Sin marcos ni recuadros (lo pidió Álvaro: «que no parezca una web de móvil»). */
@media (min-width:900px){
  .portada__col{
    display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    align-items:center;min-height:100vh;padding-bottom:0;
  }
  .portada__marco{
    position:sticky;top:0;height:100vh;
    -webkit-mask-image:linear-gradient(to right,#000 40%,transparent 60%);
            mask-image:linear-gradient(to right,#000 40%,transparent 60%);
    -webkit-mask-size:300% 100%;mask-size:300% 100%;
    animation-name:portadaVeloLado;
  }
  .portada__foto{
    height:100%;width:100%;
    object-position:center 72%;
    -webkit-mask-image:linear-gradient(to right,#000 68%,rgba(0,0,0,.45) 86%,transparent 100%);
            mask-image:linear-gradient(to right,#000 68%,rgba(0,0,0,.45) 86%,transparent 100%);
  }
  .portada__contenido{max-width:540px;padding:56px 48px 56px 24px}
  .portada__cab{margin-top:0;gap:10px}
  .portada__kicker{font-size:13px}
  .portada__nombres{font-size:clamp(52px, 5vw, 72px)}
  .portada__fecha{font-size:16px}
  .portada__lugar{font-size:16px}
  .cuenta{margin:36px 0 0}
  .cuenta__num{font-size:48px}
  .portada__btn{margin:32px 0 0}
  .portada__titulo{margin:32px 0 0;font-size:52px}
  .portada__texto{margin:12px 0 0;font-size:18px}
}