/* ═══════════════════════════════════════════════════════════
   Página /fotos — Boda Lidia & David
   ───────────────────────────────────────────────────────────
   Es la pantalla que abre el QR impreso. Se ve de pie, con una
   mano, con poca luz y prisa: por eso hay una sola cosa que
   pulsar, grande y en el centro. Todo lo demás es secundario.
   ═══════════════════════════════════════════════════════════ */

.fotos-body {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.2rem, 5vw, 2.5rem);
}

.fotos {
  width: 100%;
  max-width: 480px;
  text-align: center;
  padding: clamp(2rem, 7vw, 3rem) clamp(1.4rem, 6vw, 2.6rem);
  background: rgba(250, 246, 239, .94);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(197, 165, 90, .38);
  box-shadow: 0 30px 64px -34px rgba(62, 58, 51, .7);
}

.fotos__logo {
  width: clamp(140px, 34vw, 180px);
  height: auto;
  margin: 0 auto .4rem;
  display: block;
}

.fotos__titulo {
  font-family: var(--f-serif);
  font-size: clamp(1.8rem, 7vw, 2.4rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--verde-oscuro);
}

.fotos__texto {
  margin-top: .9rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinta-suave);
}

/* El botón: la única acción de la página, así que pesa lo suyo.
   Alto de sobra para el dedo y ancho completo en el móvil. */
.fotos__boton {
  display: block;
  margin: clamp(1.6rem, 5vw, 2.1rem) auto 0;
  padding: 1.05rem 2rem;
  font-size: .84rem;
  letter-spacing: .24em;
  background: var(--verde-oscuro);
  border-color: var(--verde-oscuro);
  color: var(--crema);
}

.fotos__boton:hover,
.fotos__boton:focus-visible {
  background: var(--dorado);
  border-color: var(--dorado);
  color: #fff;
}

.fotos__nota {
  margin-top: 1.5rem;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--tinta-suave);
}

/* ── El QR para enseñárselo a otro invitado ────────────────── */

.fotos__qr {
  margin-top: 1.6rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(197, 165, 90, .3);
}

/* Grande de verdad: se escanea desde la pantalla de otro móvil, y ahí
   se pierde nitidez. Por debajo de unos 150 px cuesta que enfoque. */
.fotos__qr img {
  width: clamp(150px, 46vw, 190px);
  height: auto;
  display: block;
  margin: 0 auto;
}

.fotos__qr-texto {
  margin-top: .8rem;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--tinta-suave);
}

.fotos__pie {
  margin-top: 1.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(197, 165, 90, .3);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.fotos__pie a {
  color: var(--tinta-suave);
  text-decoration: none;
}

.fotos__pie a:hover { color: var(--verde-oscuro); }

/* Mientras no haya enlace de subida, el botón se ve apagado y no
   lleva a ninguna parte. Sirve de aviso en las pruebas locales. */
.fotos__boton[href=""],
.fotos__boton[href="#"] {
  opacity: .45;
  pointer-events: none;
}