/* Versión con fotos de mar (generadas con IA, aprobado por Sandra el 4 nov 2026).
   Va encima de tema-a.css: los azules y el blanco cal salen de las propias fotos. */
.tema-fotos {
  --terracota: #1f5f8b;
  --terracota-text: #184d72;
  --oliva: #23807c;
  --mar: #143d5c;
  --tinta: #10263d;
  --arena-2: #ecd9b8;
}

/* Portada: la foto del acantilado a pantalla completa */
.photo-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(100svh - 6rem);
  padding: clamp(3rem, 9svh, 6rem) var(--gutter) 2.5rem;
  overflow: hidden;
  color: #fff;
  text-align: center;
  isolation: isolate;
}
.photo-hero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* En el móvil se recorta a lo alto: cielo arriba, horizonte y mar abajo */
  object-position: 38% 50%;
}
/* Velo para leer los textos: oscurece un poco el cielo y el mar, no el horizonte */
.photo-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(16, 38, 61, 0.38) 0%, rgba(16, 38, 61, 0.08) 45%, rgba(16, 38, 61, 0.1) 60%, rgba(16, 38, 61, 0.55) 100%);
}
.photo-hero__kicker { margin: 0 0 0.75rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; }
.photo-hero__names { margin: 0; font: 400 clamp(3.6rem, 17vw, 7.5rem)/0.95 var(--display); text-shadow: 0 2px 24px rgba(16, 38, 61, 0.35); }
.photo-hero__names span { display: block; font-size: 0.45em; color: var(--arena-2); }
.photo-hero__date { margin: 1.1rem 0 0.25rem; font: 400 1.35rem/1.25 var(--display); }
.photo-hero__place { margin: 0; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.photo-hero .countdown div + div { border-color: rgba(255, 255, 255, 0.35); }
.photo-hero .countdown strong { color: #fff; }
.photo-hero .countdown span { color: rgba(255, 255, 255, 0.9); }

/* Respiros: fotos a sangre entre secciones */
.photo-band {
  position: relative;
  margin: 0;
  height: clamp(16rem, 55svh, 34rem);
  overflow: hidden;
}
.photo-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-band figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 2rem var(--gutter) 1.5rem;
  color: #fff;
  font: 400 clamp(1.6rem, 6vw, 2.6rem)/1.15 var(--display);
  text-align: center;
  background: linear-gradient(to top, rgba(16, 38, 61, 0.55), transparent);
}

/* La confirmación sobre el azul del atardecer */
.tema-fotos .rsvp { background: var(--mar); }
.tema-fotos .wave { display: none; }

/* Textos sobre las fotos */
/* Orilla: el texto va sobre la arena, en azul oscuro y sin velo */
.photo-band--arena img { object-position: 50% 35%; }
.photo-band--arena figcaption {
  padding-bottom: 2rem;
  background: none;
  color: var(--tinta);
  text-shadow: 0 1px 18px rgba(236, 217, 184, 0.9);
}
/* Cala: el texto en el centro, sobre el agua, con un velo suave */
.photo-band--centro::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(16, 38, 61, 0.28);
}
.photo-band--centro figcaption {
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 1.5rem var(--gutter);
  background: none;
  text-shadow: 0 2px 20px rgba(16, 38, 61, 0.5);
}