/* ============================================================
   05-HERO.css — SECCIÓN HERO ("Nos casamos" + nombres)
   ============================================================
   Pantalla principal después de abrir la portada. Muestra los
   nombres de los novios, la fecha y un mensaje de bienvenida.

   La decoración floral del hero vive en 02-fondo.css.
   ============================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem;
  overflow: hidden;
}

/* Contenido central del hero por encima del fondo */
.hero > *:not(.hero__floral) {
  position: relative;
  z-index: 2;
  max-width: 520px;
}

/* Título "¡Nos casamos!" en script */
.hero__title {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1;
  color: var(--accent);
  margin-bottom: 2.5rem;
}

/* Bloque con nombres de los novios */
.hero__couple {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2.5rem;
  color: var(--accent);
}
.hero__name-first {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.4vw, 4.4rem);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.2;
  padding-left: 0.25em;
  display: block;
  text-align: center;
  width: 100%;
}
.hero__name-last {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(3.4rem, 8.2vw, 5.4rem);
  color: var(--accent);
  line-height: 0.9;
  margin: -0.05em 0 0.6rem;
  display: block;
  text-align: center;
  width: 100%;
}
.hero__amp {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(2rem, 3.8vw, 3rem);
  color: var(--accent);
  line-height: 1;
  margin: 0.4rem 0 0.6rem;
  display: block;
  text-align: center;
  width: 100%;
}

/* Mobile: bajamos los font-sizes para que los nombres largos quepan
   centrados en el viewport sin desbordar. */
@media (max-width: 760px) {
  .hero { padding: 3rem 1rem; }
  .hero__title { font-size: clamp(1.5rem, 6vw, 2.2rem); margin-bottom: 1.8rem; }
  .hero__name-first {
    font-size: clamp(1.6rem, 7.5vw, 2.6rem);
    letter-spacing: 0.18em;
    padding-left: 0.18em;
  }
  .hero__name-last { font-size: clamp(2.2rem, 11vw, 3.6rem); }
  .hero__amp { font-size: clamp(1.4rem, 5vw, 2rem); }
  .hero__couple { margin-bottom: 1.8rem; }
}

.hero__intro {
  max-width: 520px;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--accent);
  line-height: 1.8;
  letter-spacing: 0.03em;
  margin: 1rem auto 0;
}
.hero__intro strong {
  font-weight: 700;
  display: block;
  margin-top: 0.5rem;
}
.hero__date {
  font-size: 0.9rem;
  letter-spacing: 0.4em;
  margin-bottom: 3rem;
}

/* ============================================================
   ARCO DECORATIVO DORADO — solo mobile
   ------------------------------------------------------------
   Marco arqueado (techo redondeado + patas rectas, abierto
   abajo) que enmarca título, nombres e intro. Trazo con
   degradado dorado (--accent). En desktop no se renderiza.

   La regla genérica `.hero > *:not(.hero__floral)` sube todo
   a z-index:2 / position:relative / max-width:520px, por eso
   el override usa `.hero .hero__arch` (misma especificidad,
   declarado después) para devolverlo al fondo.
   ============================================================ */
.hero .hero__arch { display: none; }

@media (max-width: 760px) {
  .hero .hero__arch {
    display: block;
    position: absolute;
    z-index: 0;            /* detrás del texto (z:2); las flores (z:0) van encima por orden del DOM */
    max-width: none;
    left: 50%;
    transform: translate(-50%, var(--arch-y, 0%));  /* --arch-y mueve el arco ↕ sin redimensionar */
    pointer-events: none;

    /* Posición / tamaño del marco (% del alto del hero) */
    top:    var(--arch-top, 8%);
    bottom: var(--arch-bottom, 22%);
    width:  var(--arch-w, 94vw);

    /* Línea dorada: borde sólido en 3 lados, abierto abajo */
    border: var(--arch-stroke, 1.6px) solid var(--accent);
    border-bottom: none;
    background: none;

    /* Domo superior: radio horizontal 50% (los dos lados se juntan en el
       centro formando una cúpula continua) + radio vertical = altura del domo.
       Menor --arch-dome = arco más achatado arriba. */
    border-top-left-radius:  50% var(--arch-dome, 120px);
    border-top-right-radius: 50% var(--arch-dome, 120px);
  }
}