/* ==========================================================================
   Boda Adriana & Edgardo — Castillo Barakah
   Borrador visual. Paleta y tipografía ya decididas (ver datos.md).
   Pendiente: textura de piedra (todavía no llega, ver TODO abajo).
   ========================================================================== */

:root {
  /* Base terrosa */
  --color-parchment:      #f2e8d0;
  --color-parchment-dark: #ddc9a0;
  --color-earth:          #6b4a2f;
  --color-stone:          #463c34; /* provisional: tono liso mientras llega la textura real */

  /* Acentos brillantes, tipo escudo heráldico */
  --color-crimson: #a3222a;
  --color-gold:    #c9a227;
  --color-blue:    #1f3a63;

  --color-ink: #2b1d12;

  --font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;
}

body {
  font-family: var(--font-serif);
  color: var(--color-ink);
  background-color: var(--color-parchment);
}

/* Fondo de pergamino real en las secciones "claras" */
.bg-pergamino {
  background-image: linear-gradient(rgba(242, 232, 208, 0.88), rgba(242, 232, 208, 0.88)),
                     url('../img/textura_pergamino_1.jpg');
  background-size: cover;
  background-position: center;
}

/* Textura de piedra real: piedraObscura.jpg (roca oscura, sin marca de agua). */
.bg-piedra {
  background-color: var(--color-stone); /* respaldo mientras carga la imagen */
  background-image: linear-gradient(rgba(20, 16, 14, 0.55), rgba(20, 16, 14, 0.55)),
                     url('../img/textura_piedra.jpg');
  background-size: cover;
  background-position: center;
  color: var(--color-parchment);
}

.icono {
  width: 1.3em;
  height: 1.3em;
  vertical-align: -0.2em;
  fill: currentColor;
}

.text-crimson { color: var(--color-crimson); }
.text-gold    { color: var(--color-gold); }
.text-blue    { color: var(--color-blue); }
.bg-crimson   { background-color: var(--color-crimson); }
.bg-gold      { background-color: var(--color-gold); }

h1, h2, h3, .monograma-titulo {
  font-family: var(--font-serif);
  font-weight: 700;
}

.seccion {
  padding: 4rem 1rem;
}

.hero {
  min-height: 100svh;
  background-image: linear-gradient(rgba(20, 14, 8, 0.35), rgba(20, 14, 8, 0.55)), url('../img/novios.jpeg');
  background-size: cover;
  background-position: top center;
  color: #f7efdc;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
  padding: 2rem 1rem 3rem;
}

/*
  novios.jpeg es una foto vertical (576x1024) usada de fondo a pantalla completa.
  En mobile casi no se recorta (proporción parecida). En desktop, el hero es mucho
  más ancho que alto: "cover" agranda la imagen y con "top" solo se ve la parte de
  arriba (el escudo/la pared), los novios quedan fuera de cuadro más abajo.
  Mientras no haya una versión panorámica de mejor resolución (ver pendiente en
  datos.md), se limita la altura del hero y se mueve el encuadre hacia donde están
  sentados, para que al menos no desaparezcan.
*/
@media (min-width: 768px) {
  .hero {
    min-height: 60vh;
    max-height: 720px;
    background-position: center 62%;
  }
}

.hero .monograma {
  width: 110px;
  height: auto;
  margin: 0 auto 1rem;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}

.hero h1 {
  font-size: clamp(1.8rem, 6vw, 3rem);
  letter-spacing: .02em;
}

.hero .subtitulo {
  font-style: italic;
  max-width: 34rem;
  margin: 0 auto 1.5rem;
}

.cuenta-regresiva {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.cuenta-regresiva .unidad {
  background: rgba(0,0,0,.35);
  border: 1px solid var(--color-gold);
  border-radius: .5rem;
  padding: .5rem .9rem;
  min-width: 4.2rem;
}

.cuenta-regresiva .numero {
  font-size: 1.6rem;
  font-weight: 700;
  display: block;
  color: var(--color-gold);
}

.cuenta-regresiva .etiqueta {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.escudo-familia img {
  max-width: 110px;
  height: auto;
}

.badge-pendiente {
  font-size: .7rem;
  background: var(--color-gold);
  color: var(--color-ink);
  padding: .15rem .5rem;
  border-radius: .3rem;
  vertical-align: middle;
}

.mapa-embed {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
}

@media (min-width: 768px) {
  .mapa-embed { aspect-ratio: 16 / 7; }
}

.qr-marco {
  background-image: url('../img/scroll.png');
  background-size: cover;
  background-position: center;
  width: min(320px, 80vw);
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.qr-caja {
  background: #fff;
  padding: .6rem;
  border-radius: .25rem;
  line-height: 0; /* evita espacio extra alrededor del <canvas> del QR */
}

footer {
  background: var(--color-stone);
  color: var(--color-parchment-dark);
  text-align: center;
  padding: 2rem 1rem;
}

footer img { width: 60px; margin-bottom: .5rem; }