/* ==========================================================================
   Anaí & Galo — hoja de estilos única
   HTML + CSS sin framework ni paso de build. El orden sigue al del documento.
   ========================================================================== */

:root {
  --navy:       #004A8F;
  --navy-deep:  #003468;
  --cream:      #F8F5F1;
  --cream-dark: #F0EDE7;
  --ink:        #1A1A1A;
  --stone:      #6A6A6A;

  --serif: "Cormorant Garamond", Georgia, serif;

  --shell: 1300px;
  --gutter: 1rem;
}

@media (min-width: 768px) {
  :root { --gutter: 2rem; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* El hueco de la barra de scroll se reserva siempre. Sin esto, al soltar el
     bloqueo aparecía la barra, el viewport se estrechaba de golpe y la foto
     del hero daba un salto justo al arrancar la animación. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.22rem;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* `height: auto` es obligatorio: las <img> llevan width/height en el HTML para
   reservar espacio, y sin esto una regla de CSS que fije sólo el ancho deja la
   altura del atributo intacta y deforma la imagen. */
img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--navy); color: var(--cream); }

/* --- Utilidades compartidas -------------------------------------------- */

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Rótulo versaleado. Cormorant pesa poco: necesita cuerpo y peso extra. */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  line-height: 1.6;
  margin: 0;
}

.rule {
  width: 2.5rem;
  height: 1px;
  border: 0;
  margin: 2.25rem auto;
  background: currentColor;
  opacity: 0.4;
}

.section-title {
  font-size: clamp(2.25rem, 5vw, 3rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.15;
  margin: 0.75rem 0 0;
}

.section { padding-block: clamp(5rem, 12vw, 10rem); }

.section--light { background: var(--cream); }
.section--alt   { background: var(--cream-dark); }

/* Color plano: las texturas en relieve de la identidad se retiraron porque los
   originales eran de baja resolución y el pixelado se notaba a pantalla
   completa. */
.section--navy {
  background: var(--navy);
  color: var(--cream);
}

.section--navy .eyebrow      { color: rgba(248, 245, 241, 0.6); }
.section--navy .section-title,
.section--navy h2            { color: var(--cream); }
.section--navy p             { color: rgba(248, 245, 241, 0.85); }
.section--navy strong        { color: var(--cream); font-weight: 500; }
.section--navy .rule         { color: var(--cream); }

.section--light .eyebrow,
.section--alt .eyebrow       { color: var(--navy); }
.section--light .section-title,
.section--alt .section-title { color: var(--navy); }
.section--light .rule,
.section--alt .rule          { color: var(--navy); }

.center  { text-align: center; }
.measure { max-width: 36rem; margin-inline: auto; }
.measure p { margin: 0 0 1.25rem; }
.measure p:last-child { margin-bottom: 0; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 50;
  background: var(--navy);
  color: var(--cream);
  padding: 0.75rem 1.25rem;
  font-size: 0.85rem;
}

/* --- Aparición al hacer scroll ----------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-1 { transition-delay: 0.15s; }
.reveal-2 { transition-delay: 0.30s; }
.reveal-3 { transition-delay: 0.45s; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 3rem var(--gutter);
  overflow: hidden;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* El encuadre se corre a la pareja, que ocupa el tercio izquierdo: en el estado
   cerrado quedan a la vista, con el botón centrado a su derecha. */
@media (min-width: 768px) {
  .hero__media img { object-position: 45% center; }
}

/* Al abrir, la fotografía pasa a segundo plano. El `scale` compensa los bordes
   que el desenfoque deja translúcidos.

   El estado de partida se declara explícito (`blur(0)`, `scale(1)`) en vez de
   dejarlo en `none`: la interpolación desde `none` no siempre arranca limpia y
   se veía un tirón en el primer fotograma. La curva sale despacio y entra
   despacio, para que el fondo se aleje en lugar de saltar. */
.hero__media img {
  filter: blur(0);
  transform: scale(1);
  transition:
    filter 1.1s cubic-bezier(0.4, 0, 0.2, 1),
    transform 1.1s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: filter, transform;
}
.hero.is-open .hero__media img {
  filter: blur(7px);
  transform: scale(1.045);
}

/* En móvil la fotografía horizontal se recorta a vertical: se ve completa en
   altura y recortada a los lados. El encuadre se centra en la pareja, que es
   lo que se ve mientras la invitación está cerrada. */
@media (max-width: 767px) {
  .hero__media img { object-position: 38% center; }
}

/* Velo tenue: sube el contraste del recuadro sin apagar la fotografía. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(26, 26, 26, 0.22),
    rgba(26, 26, 26, 0.10) 40%,
    rgba(26, 26, 26, 0.28)
  );
}

/* ---- Estado cerrado: sólo la fotografía y un botón --------------------- */

/* El estado cerrado y el panel comparten celda de la rejilla: se cruzan sin
   saltos de maquetación, porque ninguno de los dos entra o sale del flujo. */
.hero__opener,
.hero > .glass {
  grid-area: 1 / 1;
}

.hero__opener {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.hero__open {
  font-family: var(--serif);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--navy);
  cursor: pointer;
  padding: 1.05rem 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 2px;
  background: rgba(248, 245, 241, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 12px 40px rgba(0, 30, 60, 0.25);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.hero__open:hover { background: rgba(248, 245, 241, 0.97); transform: translateY(-1px); }
.hero__open:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero__open { background: rgba(248, 245, 241, 0.97); }
}

/* En pantallas estrechas el interletraje estiraba el botón casi de borde a
   borde y parecía una franja, no un botón. */
@media (max-width: 480px) {
  .hero__open {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    padding: 1rem 1.75rem;
  }
}

/* Sin JavaScript el panel se ve siempre y el botón nunca aparece: el estado
   cerrado sólo existe si el script corrió y añadió `.hero--js`. */
.hero__opener { display: none; }
.hero--js .hero__opener { display: flex; }

/* `animation: none` es lo que hace que el panel anime al ABRIRSE y no al
   cargar: mientras está cerrado no hay animación, y al quitarse esta regla
   vuelve la de `.glass`, que arranca de cero por el cambio de nombre. */
.hero--js:not(.is-open) > .glass,
.hero--js:not(.is-open) > .glass > * {
  animation: none;
}

.hero--js:not(.is-open) > .glass {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px) scale(0.985);
}

.hero--js.is-open .hero__opener {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.97);
}

.hero__cue { transition: opacity 0.6s ease; }
.hero--js:not(.is-open) .hero__cue { opacity: 0; }

/* Mientras la invitación está cerrada la página no se desplaza: obliga a
   abrirla antes de seguir. La clase la pone y la quita el JS, así que sin
   script no hay bloqueo posible. No se toca `touch-action` para no impedir
   el zoom de accesibilidad. */
.is-locked,
.is-locked body {
  overflow: hidden;
  overscroll-behavior: none;
}
/* Mientras está bloqueado, cualquier reposicionamiento debe ser instantáneo:
   con `smooth` el salto al hero se anima y se queda a medias. */
.is-locked { scroll-behavior: auto; }

/* Recuadro de vidrio. La legibilidad NO depende del desenfoque: el color de
   fondo ya da contraste suficiente por sí solo y el blur sólo suma. */
.glass {
  position: relative;
  width: min(100%, 34rem);
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  background: rgba(248, 245, 241, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 20px 60px rgba(0, 30, 60, 0.22);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);

  /* Entrada: el panel se posa sobre la fotografía. `both` mantiene el estado
     inicial durante el retardo, para que no destelle antes de empezar. */
  animation: glass-in 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s both;
}

/* Sólo opacidad y transform: son las dos propiedades que el compositor puede
   animar sin repintar. Animar `backdrop-filter` obliga a recalcular el
   desenfoque en cada fotograma y en móviles se nota. */
@keyframes glass-in {
  from { opacity: 0; transform: translateY(22px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* El contenido interior entra escalonado, un punto después del panel. */
.glass > * {
  animation: glass-content-in 1s ease both;
}
.glass > *:nth-child(1) { animation-delay: 0.55s; }
.glass > *:nth-child(2) { animation-delay: 0.68s; }
.glass > *:nth-child(3) { animation-delay: 0.81s; }
.glass > *:nth-child(4) { animation-delay: 0.94s; }
.glass > *:nth-child(5) { animation-delay: 1.02s; }
.glass > *:nth-child(6) { animation-delay: 1.10s; }
.glass > *:nth-child(7) { animation-delay: 1.18s; }
.glass > *:nth-child(8) { animation-delay: 1.30s; }

@keyframes glass-content-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Sin backdrop-filter el panel se vería translúcido sobre la foto y el texto
   perdería contraste: se compensa subiendo la opacidad del fondo. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(248, 245, 241, 0.96); }
}

/* El texto secundario del sitio es --stone (#6A6A6A). Sobre el panel de vidrio
   eso da 3,3:1 en el peor caso —foto oscura detrás—, por debajo del mínimo AA.
   Dentro del recuadro se oscurece a #4A4A4A, que sube a 5,4:1 aun en ese peor
   caso, así la lectura no depende de qué fotografía haya debajo. */
.glass .hero__kicker,
.glass .hero__weekday,
.glass .hero__place,
.glass .countdown__label {
  color: #4A4A4A;
}

.hero__monogram {
  width: clamp(6.5rem, 16vw, 9rem);
  height: auto;
  margin: 0 auto 1.5rem;
}

.hero__kicker {
  font-style: italic;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  color: var(--stone);
  margin: 0 0 1rem;
  line-height: 1.4;
}

.hero__names {
  font-weight: 300;
  color: var(--navy);
  line-height: 1.05;
  letter-spacing: 0.06em;
  margin: 0;
  font-size: clamp(1.85rem, 6vw, 3.2rem);
}
.hero__names .amp {
  display: block;
  font-style: italic;
  font-size: 0.5em;
  letter-spacing: 0.2em;
  color: rgba(0, 74, 143, 0.6);
  margin: 0.3rem 0;
}

.hero__rule { margin: 1.5rem auto; color: var(--navy); }

.hero__weekday { color: var(--stone); margin-bottom: 0.75rem; }

/* Números romanos, al 60 % del tamaño que tuvo la versión en dígitos
   (clamp(2.1rem, 6vw, 3.4rem) → 60 %). */
.hero__date {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  line-height: 1;
  letter-spacing: 0.14em;
  margin: 0;
  font-size: clamp(1.26rem, 3.6vw, 2.04rem);
  font-variant-numeric: lining-nums;
}

.hero__place { color: var(--stone); margin-top: 1.15rem; }

.countdown {
  display: flex;
  justify-content: center;
  gap: clamp(1.1rem, 4vw, 2.25rem);
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.countdown__value {
  display: block;
  font-size: clamp(1.75rem, 4.5vw, 2.35rem);
  font-weight: 300;
  color: var(--navy);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.countdown__label {
  display: block;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 0.5rem;
}

.hero__cue {
  position: absolute;
  bottom: 1.75rem;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.hero__cue .eyebrow {
  font-size: 0.6rem;
  color: rgba(248, 245, 241, 0.9);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.hero__cue i {
  width: 1px;
  height: 2.5rem;
  background: rgba(248, 245, 241, 0.7);
  animation: pulse 2.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.35; transform: scaleY(1); }
  50%      { opacity: 0.9;  transform: scaleY(1.15); }
}

/* ==========================================================================
   Bienvenida
   ========================================================================== */

/* Dos columnas: fotografía a la izquierda, contenido a la derecha. El corte se
   hace a 900px y no a los 768px habituales porque, con una foto vertical al
   lado, por debajo de eso la columna de texto queda demasiado estrecha para el
   titular grande. */
.welcome__grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 900px) {
  .welcome__grid {
    grid-template-columns: 0.85fr 1fr;
    gap: 4.5rem;
  }
}

.welcome__photo { display: block; }
.welcome__photo img { width: 100%; height: auto; }

.welcome__mark {
  width: 5rem;
  margin: 0 auto 2.5rem;
  opacity: 0.7;
  mix-blend-mode: screen;
}

.welcome__lead {
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  font-weight: 300;
  line-height: 1.35;
  margin: 0;
  text-wrap: balance;
  color: var(--cream);
}

/* Van con `.measure` delante a propósito: son <p> dentro de `.measure`, y
   `.measure p` (0,1,1) le gana a una clase suelta (0,1,0). Sin esto sus
   márgenes superiores no se aplicaban. */
.measure .welcome__cheer {
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-style: italic;
  margin: 4.75rem 0 0;
  color: var(--cream);
}

.measure .welcome__sign {
  font-style: italic;
  font-size: 1.15rem;
  margin: 2.25rem 0 0;
  opacity: 0.75;
}

/* ==========================================================================
   Fotografías: divisores y galería
   ========================================================================== */

.divider { background: var(--cream); }

.gallery__rows,
.gallery__row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.gallery__rows { margin-top: 3.5rem; }

/* Mosaico justificado: dentro de cada fila el flex-grow de cada foto es su
   relación de aspecto y la base es 0, así todas comparten altura exacta, los
   anchos quedan proporcionales y ninguna se recorta. */
@media (min-width: 768px) {
  .gallery__rows,
  .gallery__row { gap: 0.75rem; }
  .gallery__row { flex-direction: row; }
  .gallery__row picture {
    flex-basis: 0;
    min-width: 0;
    flex-grow: var(--ratio);
  }
}

.gallery picture,
.divider picture { display: block; overflow: hidden; }

.gallery picture img,
.divider picture img { width: 100%; height: auto; }

/* ==========================================================================
   Ubicación
   ========================================================================== */

.venue__grid { display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 768px) {
  .venue__grid { grid-template-columns: 1fr 1fr; gap: 5rem; }
}

.venue__title {
  font-size: clamp(2.75rem, 6.5vw, 3.75rem);
  font-weight: 300;
  font-style: italic;
  color: var(--navy);
  line-height: 1.05;
  margin: 0.5rem 0 0;
}

/* En móvil la columna va centrada, así que la regla también; en escritorio,
   junto a la fotografía, se alinea a la izquierda con el resto del texto. */
.venue__rule { margin: 1.75rem auto; color: var(--navy); }

@media (min-width: 768px) {
  .venue__rule { margin-inline: 0; }
}

/* Apilado en móvil: el texto se centra para no quedar descolgado a la
   izquierda bajo una fotografía que ocupa todo el ancho. */
@media (max-width: 767px) {
  .venue__grid > div { text-align: center; }
  .venue address { margin-inline: auto; }
}

.venue address {
  font-style: normal;
  color: var(--stone);
  margin-bottom: 1rem;
}
.venue__when { margin: 0 0 2rem; }
.venue__when span { color: var(--stone); }

/* Sin recorte: la fotografía se muestra en su proporción natural. */
.venue picture { display: block; }
.venue picture img { width: 100%; height: auto; }

.actions { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 480px) { .actions { flex-direction: row; } }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  white-space: nowrap;
  font-family: var(--serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 1.75rem;
  border: 1px solid transparent;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.btn--solid { background: var(--navy); color: var(--cream); }
.btn--solid:hover { background: var(--navy-deep); }
.btn--ghost { border-color: rgba(0, 74, 143, 0.4); color: var(--navy); }
.btn--ghost:hover { border-color: var(--navy); background: rgba(0, 74, 143, 0.05); }

.venue__fallback {
  font-size: 0.95rem;
  color: rgba(106, 106, 106, 0.85);
  margin: 1rem 0 0;
}
.venue__fallback a { color: var(--navy); text-underline-offset: 4px; }

/* ==========================================================================
   Vestimenta y solo adultos
   ========================================================================== */

.dress__grid { display: grid; gap: 4rem; }
@media (min-width: 768px) {
  .dress__grid { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .dress__grid > div + div {
    border-left: 1px solid rgba(248, 245, 241, 0.15);
    padding-left: 5rem;
  }
}

.swatches {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}
.swatches li { text-align: center; }
.swatches i {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  margin: 0 auto 0.75rem;
  box-shadow: 0 0 0 1px rgba(248, 245, 241, 0.3);
}
.swatch--white  { background: #FFFFFF; }
.swatch--cobalt { background: #0047AB; }
.swatches .eyebrow { font-size: 0.6rem; }

.dress__note {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(248, 245, 241, 0.45) !important;
  margin-top: 1rem;
}

.dress__mark {
  width: 6rem;
  margin: 3rem auto 0;
  opacity: 0.6;
  mix-blend-mode: screen;
}

/* ==========================================================================
   Regalos
   ========================================================================== */

.accounts {
  display: grid;
  gap: 1.25rem;
  margin: 3.5rem 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
@media (min-width: 768px) { .accounts { grid-template-columns: 1fr 1fr; } }

.account {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid rgba(0, 74, 143, 0.2);
  padding: 2rem 1.75rem;
}
.account__holder {
  font-size: 1.5rem;
  font-style: italic;
  color: var(--navy);
  margin: 0 0 0.25rem;
  line-height: 1.2;
}
.account__bank { color: var(--stone); margin: 0 0 1.5rem; }
.account__type {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(106, 106, 106, 0.8);
  margin: 0 0 0.5rem;
}

.account__row {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(0, 74, 143, 0.25);
  background: rgba(240, 237, 231, 0.5);
  margin-top: auto;
}
.account__number {
  flex: 1;
  font-size: 1.55rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  margin: 0;
  padding: 0.6rem 1rem;
  line-height: 1.4;
}

.copy {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 3.25rem;
  border: 0;
  border-left: 1px solid rgba(0, 74, 143, 0.25);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.copy:hover { background: var(--navy); color: var(--cream); }
.copy:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.account__status {
  font-size: 0.95rem;
  color: var(--navy);
  min-height: 1.5rem;
  margin: 0.5rem 0 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  background: var(--cream);
  text-align: center;
  padding-block: clamp(4rem, 9vw, 7rem);
}
.footer__mark { width: 7rem; margin: 0 auto 2.5rem; }
.footer__cheer {
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  font-style: italic;
  color: var(--navy);
  margin: 0;
}
.footer__meta { color: var(--stone); margin: 2rem 0 3rem; }
.footer__top {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(106, 106, 106, 0.6);
  text-decoration: none;
  transition: color 0.3s;
}
.footer__top:hover { color: var(--navy); }

/* Cierre: una fotografía pequeña al final de todo. Deliberadamente discreta
   —no compite con nada— y con mucho aire por encima. */
.footer__photo {
  display: block;
  width: min(380px, 100%);
  margin: clamp(4rem, 9vw, 6.5rem) auto 0;
}
.footer__photo img { width: 100%; height: auto; }

.footer__credit {
  font-size: 0.85rem;
  color: rgba(106, 106, 106, 0.75);
  margin: 2.5rem 0 0;
}
.footer__credit a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 74, 143, 0.3);
  padding-bottom: 1px;
  transition: border-color 0.3s ease;
}
.footer__credit a:hover { border-color: var(--navy); }
.footer__credit span { font-size: 0.8em; }

/* ==========================================================================
   Movimiento reducido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__cue i { animation: none; }
  .glass,
  .glass > * { animation: none; opacity: 1; transform: none; }
  .hero__media img,
  .hero__opener { transition: none; }
  /* El desenfoque del fondo se mantiene: es un cambio de estado, no movimiento. */
}