:root {
    --ink: #0E1726;
    --blue: #717f8c;
    --blue-acc: #113B7A;
    --bg: #FFFFFF;
    --muted: #97A3B6;
    --section-gap: 28px;
}

* {
    box-sizing: border-box
}

html,
body {
    height: 100%
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: 'Playfair Display', serif;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overscroll-behavior-y: contain
}

/* PRELOADER */
#preloader {
    position: fixed;
    inset: 0;
    background: #ffffff;
    z-index: 50;
    display: grid;
    place-items: center;
    transition: opacity .6s, visibility .6s
}

#preloader.hide {
    opacity: 0;
    visibility: hidden
}

.pre-inner {
    text-align: center
}

.pre-stroke .stroked {
    fill: none;
    stroke: url(#gfoil);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 460;
    stroke-dashoffset: 460;
    animation: draw 1.1s cubic-bezier(.2, .6, .2, 1) forwards
}

.pre-note {
    color: #64748b;
    font-size: 14px;
    margin-top: 8px
}

@keyframes draw {
    to {
        stroke-dashoffset: 0
    }
}

/* Partículas */
#particles {
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: .92
}

/* Contenido sobre partículas */
.panel {
    position: relative;
    z-index: 6;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 24px
}

.content {
    max-width: 920px;
    width: min(92vw, 920px);
    text-align: center
}

.content.narrow {
    max-width: 740px
}

.content.wide {
    max-width: 1100px
}

@media (min-width:480px) {
    body {
        scroll-snap-type: y mandatory
    }

    .panel {
        scroll-snap-align: start
    }
}

/* Dots & música */
.dots {
    position: fixed;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 25
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    transition: transform .2s, background .2s
}

.dot:hover {
    transform: scale(1.2)
}

.dot.active {
    background: var(--blue-acc);
    border-color: var(--blue-acc)
}

.music-toggle {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 30;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: var(--blue);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    cursor: pointer
}

.music-toggle .icon {
    font-size: 20px;
    line-height: 44px
}

.music-toggle.is-playing {
    background: var(--blue);
    color: #fff
}



/* Tipografía portada */
.monogram {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
    filter: url(#soft-glow)
}

.mono {
    display: inline-flex;
    gap: .08em;
    font-size: clamp(36px, 6.5vw, 56px);
    font-family: 'Cinzel', serif;
    font-weight: 600;
    letter-spacing: .04em
}

.mono span {
    background: linear-gradient(135deg, #A9B8FF, #274690 50%, #001F3F);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.couple {
    font-family: 'Cinzel', serif;
    font-size: clamp(40px, 8vw, 72px);
    letter-spacing: .02em;
    color: var(--blue)
}

.couple span {
    color: var(--blue-acc)
}

.foil {
    background: linear-gradient(135deg, #e3e3e7, #cbced3 50%, #e7e8ea);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.date {
    margin-top: 6px;
    color: var(--muted)
}

.hero-cta {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 16px
}

.btn {
    padding: 12px 22px;
    border-radius: 999px;
    border: 1px solid var(--blue);
    color: #fff;
    background: var(--blue);
    cursor: pointer;
    display: inline-block;
    box-shadow: 0 6px 18px rgba(0, 31, 63, .18)
}

.btn.ghost {
    background: transparent;
    color: var(--blue);
    border-color: var(--blue)
}

.scroll-cue {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    color: #A9B8FF;
    animation: bob 1.6s ease-in-out infinite
}

@keyframes bob {

    0%,
    100% {
        transform: translate(-50%, 0)
    }

    50% {
        transform: translate(-50%, 6px)
    }
}

/* Fondos + parallax */
.bg {
    position: absolute;
    inset: 0;
    z-index: -1
}

.bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.96) contrast(1.02);
    transition: opacity 1s
}

.panel--image {
    color: #fff;
    margin-block: var(--section-gap)
}

.panel--image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 31, 63, .10), rgba(0, 31, 63, .24));
    z-index: -1
}

.parallax {
    perspective: 1px;
    transform-style: preserve-3d
}

/* Banner contenido centrado */
.banner-frame {
    position: relative;
    width: min(92vw, 1100px);
    margin: 0 auto;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 31, 63, .16);
    display: grid;
    place-items: center;
    padding: 18px
}

.banner-frame .image-banner {
    width: 100%;
    aspect-ratio: 16/9;
    background: center/cover no-repeat;
    filter: saturate(.96) contrast(1.02);
    grid-area: 1/1
}

@media (max-width:720px) {
    .banner-frame .image-banner {
        aspect-ratio: 4/3
    }
}

.banner-frame .overlay {
    position: relative;
    grid-area: 1/1;
    max-width: min(860px, 92%);
    margin: 0 auto;
    padding: 28px 24px 22px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(1.1) blur(4px);
    box-shadow: 0 12px 40px rgba(0, 31, 63, .16)
}

/* Icono sobre el recuadro */
.section-icon {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    opacity: .95;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .28));
    border-radius: 14px;
    background: rgba(0, 31, 63, .85);
    display: grid;
    place-items: center
}

.section-icon svg {
    width: 30px;
    height: 30px;
    display: block
}

/* Ornamentos */
.ornament {
    height: 26px;
    width: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(0, 31, 63, .14), transparent 44%);
    mask: linear-gradient(#000 40%, transparent 100%)
}

.ornament--stars::after {
    content: "✶ ✷ ✸ ✹";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    letter-spacing: 10px;
    color: #A9B8FF;
    opacity: .35
}

.ornament--leaf::after {
    content: "❧";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    color: #7aa2ff;
    opacity: .35
}

/* Tipos / listas */
.panel h2 {
    font-family: 'Cinzel', serif;
    color: var(--blue);
    margin: 10px 0 6px;
    letter-spacing: .02em
}

.muted {
    color: #64748b;
    margin-bottom: 12px
}

.signature {
    margin-top: 8px;
    color: #334155
}

.note-list {
    list-style: none;
    padding: 6px 0 0;
    margin: 0 0 10px;
    display: grid;
    gap: 6px
}

.note-list li {
    position: relative;
    padding-left: 18px;
    color: #334155
}

.note-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: -1px;
    color: var(--blue-acc)
}

/* Galería Masonry */
.gallery.masonry {
    column-count: 2;
    column-gap: 12px
}

.gallery-item {
    break-inside: avoid;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
    margin: 0 0 12px
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transform: translateZ(0);
    transition: transform .35s ease
}

.gallery-item:hover img {
    transform: scale(1.03)
}

@media(min-width:900px) {
    .gallery.masonry {
        column-count: 3
    }
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(7, 14, 26, .86);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 40;
    padding: 18px
}

.lightbox.active {
    display: flex
}

.lb-figure {
    position: relative;
    max-width: 92vw;
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px
}

.lightbox img {
    max-width: 92vw;
    max-height: 72vh;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .4)
}

#lbCap {
    color: #e2e8f0;
    font-size: .95rem
}

.lb-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #0b1a37;
    color: #e2e8f0;
    border: 1px solid #1e293b;
    border-radius: 20px;
    padding: 6px 10px;
    font-size: .8rem
}

.lb-close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer
}

.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer
}

.lb-prev {
    left: 18px
}

.lb-next {
    right: 18px
}

/* Paleta (visible) */
#dresscode .content {
    background: linear-gradient(180deg, rgba(0, 31, 63, .02), transparent 20%);
    border-radius: 16px;
    padding-top: 8px
}

.palette--cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(90px, 1fr));
    gap: 18px;
    justify-items: center;
    align-items: end;
    margin-top: 18px
}

.palette--cards .tone {
    position: relative;
    width: 120px;
    height: 240px;
    border-radius: 24px;
    background: var(--c);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 10px 24px rgba(0, 0, 0, .08);
    display: grid;
    place-items: end center;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s
}

.palette--cards .tone::after {
    content: attr(data-name) "" attr(data-hex);
    white-space: pre;
    text-align: center;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
    width: 100%;
    padding: 18px 10px 16px;
    background: rgba(255, 255, 255, .88);
    color: #0E1726;
    font-size: 12px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    backdrop-filter: saturate(1.05) blur(2px);
    border-top: 1px solid rgba(0, 0, 0, .06)
}

.palette--cards .tone:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 14px 34px rgba(0, 0, 0, .12)
}

@media (max-width:900px) {
    .palette--cards {
        grid-template-columns: repeat(3, minmax(88px, 1fr));
        gap: 14px
    }

    .palette--cards .tone {
        width: 110px;
        height: 220px
    }
}

@media (max-width:480px) {
    .palette--cards {
        grid-template-columns: repeat(2, minmax(88px, 1fr))
    }

    .palette--cards .tone {
        width: 104px;
        height: 200px
    }

    .palette--cards .tone::after {
        font-size: 11px;
        padding: 14px 8px
    }
}

/* RSVP glam */
.rsvp-card {
    position: relative;
    padding: 22px;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff, #f7f9ff);
    box-shadow: 0 18px 44px rgba(0, 31, 63, .12), inset 0 0 0 1px rgba(17, 59, 122, .08)
}

.rsvp-card .rsvp-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px
}

.rsvp-card .rsvp-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #A9B8FF, #113B7A);
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 31, 63, .18)
}

.rsvp-card .rsvp-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    color: var(--blue)
}

#rsvp .content {
    width: min(92vw, 740px)
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    align-items: start;
    margin-top: 8px
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0
}

.field label {
    font-weight: 600;
    color: #334155
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    color: #0f172a;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .04)
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: 2px solid rgba(17, 59, 122, .35);
    outline-offset: 2px
}

.field.full {
    grid-column: 1/-1
}

.actions {
    grid-column: 1/-1;
    margin-top: 8px;
    display: flex;
    gap: 10px;
    justify-content: flex-start
}

.form-msg {
    grid-column: 1/-1;
    margin-top: 8px;
    color: #0a7a2e
}

@media(min-width:900px) {
    .form-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:700px) {
    .form-grid {
        grid-template-columns: 1fr
    }
}

/* Animación */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.content {
    animation: fadeUp .7s ease both
}

.reveal-up {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .6s, transform .6s
}

.reveal-up.is-in {
    opacity: 1;
    transform: translateY(0)
}

/* Créditos */
.credit-novio {
    margin-top: 22px;
    font-size: .9rem;
    color: #6b7a90;
    font-style: italic;
    opacity: .9
}

.credit-novio:hover {
    opacity: 1;
    transition: opacity .3s
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    #preloader {
        display: none
    }

    #particles {
        display: none
    }

    .reveal-up {
        opacity: 1;
        transform: none
    }
}

/* ===== Countdown (formato bonito, restaurado) ===== */
#contador .countdown {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

#contador .countdown div {
    min-width: 120px;
    padding: 16px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .05);
}

#contador .countdown span {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: clamp(28px, 6vw, 40px);
    color: var(--blue-acc);
    line-height: 1;
}

#contador .countdown small {
    display: block;
    color: #475569;
    margin-top: 4px;
}

/* ===== Familia (cards + listas limpias, restaurado) ===== */
.cards-family {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 8px;
}

.card-f {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 18px;
    background: linear-gradient(180deg, #fff, #f9fbff);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .05);
}

.card-f.wide {
    grid-column: 1/-1;
}

.card-f header h3 {
    margin: 0 0 8px;
    color: var(--blue-acc);
    /* subtítulos en azul marino */
}

.people {
    list-style: none;
    /* quita viñetas • */
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.people.two-cols {
    grid-template-columns: 1fr 1fr;
}

.people li {
    font-size: 1.02rem;
    color: #334155;
}

@media(min-width:900px) {
    .cards-family {
        grid-template-columns: 1fr 1fr;
    }

    .card-f.wide {
        grid-column: auto / span 2;
    }
}

/* ===== Fondos para 'Palabras del novio/novia' ===== */
/* Asignación de imágenes al contenedor interno del banner */
.bg-novio .image-banner{
    background-image: url('images/novio.jpg');   /* <-- cambia si usas otra ruta */
  }
  .bg-novia .image-banner{
    background-image: url('images/novia.jpg');   /* <-- cambia si usas otra ruta */
  }
  
  /* (Opcional) Si por cualquier motivo no hay imagen disponible,
     usa un degradado elegante como fallback: */
  .bg-novio .image-banner:empty,
  .bg-novia .image-banner:empty{
    background-image: linear-gradient(135deg, rgba(0,31,63,.20), rgba(0,31,63,.05));
  }
  
  /* El resto del layout (banner-frame, image-banner, overlay, section-icon)
     ya lo tienes definido y reutilizamos el mismo patrón que en Ceremonia/Recepción */

     /* === Colores solo para Palabras del novio === */
#palabras-novio .overlay h2{
    color: #0B2A4A;              /* título */
  }
  #palabras-novio .overlay .quote{
    color: #1E293B;              /* texto de la cita */
  }
  #palabras-novio .overlay{
    color: #1E293B;              /* color por defecto dentro del overlay */
  }
  
  /* === Colores solo para Palabras de la novia === */
  #palabras-novia .overlay h2{
    color: #09315A;              /* título */
  }
  #palabras-novia .overlay .quote{
    color: #243041;              /* texto de la cita */
  }
  #palabras-novia .overlay{
    color: #243041;              /* color por defecto dentro del overlay */
  }

  /* Preset A: Navy suave y cálido */
.preset-a#portada{ background:
    radial-gradient(1200px 60% at 50% 0%, rgba(255,245,230,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 50%),
    linear-gradient(180deg, #123261, #0A1E3C) }
  
  /* Preset B: Navy con toque verdoso (más “bosque”) */
  .preset-b#portada{ background:
    radial-gradient(1100px 55% at 50% 0%, rgba(227,245,239,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 50%),
    linear-gradient(180deg, #114556, #0A2C3C) }
  
  /* Preset C: Navy azulado con luz central (más romántico) */
  .preset-c#portada{ background:
    radial-gradient(800px 50% at 50% 20%, rgba(240,245,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 50%),
    linear-gradient(180deg, #153B78, #0A1E3C) }

    /* Eleva un poco el contenido de portada y define un ancho */
#portada .content{
    width: min(92vw, 1100px);
    margin: 0 auto;
    padding-inline: 10px;
    position: relative;
    z-index: 2;        /* sobre la imagen */
  }
  
  /* Botones: aseguremos contraste al variar el fondo */
  #portada .btn{
    box-shadow: 0 10px 28px rgba(10,31,63,.20);
  }

  /* === Fondo portada 'navy cálido + luz' === */
:root{
    --navy-1: #11284B;   /* base un poco más clara */
    --navy-2: #173863;   /* navy medio para el gradiente */
    --navy-3: #1E4B82;   /* acento suave */
  }
  
  #portada{
    background:
      /* luz cenital suave centrada en el título */
      radial-gradient(900px 55% at 50% 10%, rgba(245,250,255,.22), transparent 60%),
      /* viñeta muy ligera para dar forma sin “oscurecer” en exceso */
      radial-gradient(1400px 80% at 50% 120%, rgba(0,0,0,.10), transparent 60%),
      /* navy cálido */
      linear-gradient(180deg, var(--navy-2), var(--navy-1));
  }
  
  /* Ruido ultra sutil (menos visible que antes) */
  #portada::before{
    content:"";
    position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.035), transparent 60%),
      radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.03),  transparent 60%),
      radial-gradient(1px 1px at 75% 30%, rgba(255,255,255,.03),  transparent 60%),
      radial-gradient(1px 1px at 90% 60%, rgba(255,255,255,.035), transparent 60%);
    background-size: 360px 360px, 440px 440px, 520px 520px, 660px 660px;
    mix-blend-mode: overlay;
    opacity:.35; /* ↓ antes .55 */
  }

  /* Marco de la imagen (misma lógica que tus banners) */
#portada .bg{
    width: min(92vw, 1100px);
    margin: 12px auto 0;    /* un poco de aire bajo el título */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(10,31,63,.16);
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  }
  
  /* La foto dentro del marco: centrada, contenida y sin “salirse” */
  #portada .bg img{
    display:block;
    width: 100%;
    height: auto;           /* contain efectivo sin deformar */
    max-height: min(78vh, 860px);
    object-fit: contain;
    margin: 0 auto;         /* centra la imagen si sobra aire lateral */
    background: transparent;
  }
  
  /* El contenido de portada (título/botones) alineado al mismo ancho */
  #portada .content{
    width: min(92vw, 1100px);
    margin: 0 auto;
    padding-inline: 8px;
    position: relative;
    z-index: 2;
  }
  
  /* Botones con contraste consistente sobre el nuevo fondo */
  #portada .btn{
    box-shadow: 0 10px 28px rgba(10,31,63,.20);
  }

  /* Bisel de luz sutil para los encabezados de portada */
#portada .couple,
#portada .mono span{
  text-shadow: 0 1px 0 rgba(255,255,255,.10);
}

/* ===============================
   PORTADA – Tamaño & Justificación
   =============================== */

/* 1) Perillas de tamaño (ajústalas si quieres aún más grande) */
:root{
    /* ancho máximo del marco */
    --hero-max-w: 1200px;         /* antes ~1100px */
    /* alto máximo de la imagen visible */
    --hero-max-h: 86vh;           /* antes ~78vh */
    --hero-max-h-px: 980px;       /* tope en px para pantallas grandes */
    /* respiración superior/inferior de la sección */
    --hero-pad-top: 18px;         /* antes 16-24px */
    --hero-pad-bottom: 8px;       /* ↓ reduce espacio sobrante */
  }
  
  /* 2) La sección portada apila contenido + imagen en la misma celda (overlay real) */
  #portada{
    position: relative;
    display: grid;
    place-items: start center;      /* centra horizontalmente el overlay */
    padding-top: var(--hero-pad-top);
    padding-bottom: var(--hero-pad-bottom);
  }
  
  /* 3) Marco (recuadro) más grande y centrado al ancho deseado */
  #portada .bg{
    grid-area: 1 / 1;
    width: min(96vw, var(--hero-max-w));  /* ↑ ancho visible */
    margin: 10px auto 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(10,31,63,.18);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  }
  
  /* 4) La imagen crece más y se mantiene contenida (sin salirse) */
  #portada .bg img{
    display:block;
    width: 100%;
    height: auto;
    max-height: min(var(--hero-max-h), var(--hero-max-h-px)); /* ↑ alto útil */
    object-fit: contain;
    margin: 0 auto;
  }
  
  /* 5) El overlay (título, fecha, botones) va encima, centrado y sin empujar hacia abajo */
  #portada .content{
    grid-area: 1 / 1;
    width: min(96vw, var(--hero-max-w));
    margin: 0 auto;
    padding: 12px 10px 0;          /* ↓ padding inferior para quitar hueco extra */
    position: relative;
    z-index: 2;
    text-align: center;
  }
  
  /* 6) Mejor contraste sutil */
  #portada .couple{
    text-shadow: 0 1px 0 rgba(255,255,255,.10), 0 8px 24px rgba(0,0,0,.25);
  }
  #portada .date{
    color: #E6ECF5;
    text-shadow: 0 1px 2px rgba(0,0,0,.22);
  }
  
  /* 7) Botones con presencia sobre la imagen */
  #portada .btn{
    box-shadow: 0 10px 28px rgba(10,31,63,.20);
  }
  
  /* 8) En pantallas altas, ocupa mejor el espacio vertical (sin dejar "pozo" abajo) */
  @media (min-height: 820px){
    #portada{
      align-items: start;          /* alinea arriba el grid */
    }
    #portada .bg img{
      max-height: min(90vh, 1040px); /* aún más alto si hay espacio */
    }
  }

  /* === Portada: Fecha más grande y con mejor contraste === */
/* Color y sombra para legibilidad sobre foto/fondo */
#portada .date{
    /* Elige uno: */
    /* Opción A: navy claro (recomendado para consistencia con tu tema) */
    color: #fec7c7;               /* azul muy claro, NO blanco puro */
    /* Opción B: gris cálido si prefieres menos saturación */
    /* color: #E5E7EB; */
  
    text-shadow: 0 1px 2px rgba(0,0,0,.28);  /* refuerza lectura */
    letter-spacing: .02em;
    font-weight: 400;
  
    /* Tamaño más grande y responsivo */
    font-size: clamp(56px, 2.4vw, 20px);
    line-height: 1.25;
  
    /* Ubicación y respiración */
    margin-top: 8px;              /* espacio bajo el título */
    margin-bottom: 8px;           /* antes de los botones */
  }
  
  /* Si quieres aún más presencia en pantallas grandes, sube un poco: */
  @media (min-width: 1200px){
    #portada .date{ font-size: 22px; }
  }

  /* 1) Convierte el contenedor de portada en columna */
#portada .content{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;               /* separación vertical */
  }
  
  /* 2) Orden deseado (de arriba hacia abajo) */
  #portada .monogram{ order: 1; }  /* P & D */
  #portada .couple{   order: 2; }  /* Paty & Diego */
  #portada .hero-cta{ order: 3; }  /* Botones */
  #portada .date{     order: 4; }  /* Fecha (debajo de los botones) */

  /* =========================
   PORTADA – FECHA EN RECUADRO
   ========================= */
:root{
    /* Colores y tamaño de la fecha */
    --date-bg: rgba(255,255,255,.86);  /* fondo del recuadro */
    --date-color: #0B2A4A;             /* texto (contraste sobre navy) */
    --date-size: clamp(46px, 2.2vw, 20px); /* tamaño responsivo */
    --date-pad-y: 8px;                 /* alto del recuadro (padding vertical) */
    --date-pad-x: 14px;                /* ancho del recuadro (padding horizontal) */
    --date-radius: 999px;              /* bordes redondeados tipo pill */
  }
  
  /* Asegura el orden: monograma, título, botones y luego fecha */
  #portada .content{
    display:flex; flex-direction:column; align-items:center; gap:10px;
  }
  #portada .monogram{ order:1; }
  #portada .couple  { order:2; }
  #portada .hero-cta{ order:3; }
  #portada .date    { order:4; }
  
  /* La fecha como recuadro (pill) centrado */
  #portada .date{
    display:inline-block;
    background: var(--date-bg);
    color: var(--date-color);
    font-size: var(--date-size);
    line-height: 1.15;
    font-weight: 500;
    padding: var(--date-pad-y) var(--date-pad-x);
    border-radius: var(--date-radius);
    border: 1px solid rgba(0,0,0,.06);           /* línea finita */
    box-shadow:
      0 8px 22px rgba(10,31,63,.18),             /* sombra externa */
      inset 0 1px 0 rgba(255,255,255,.55);       /* brillo sutil */
    backdrop-filter: saturate(1.05) blur(2px);   /* efecto glass si está sobre foto */
    -webkit-backdrop-filter: saturate(1.05) blur(2px);
    margin-top: 2px;    /* separa un poco de los botones */
  }
  
  /* Si usas modo muy oscuro de portada y quieres aún más contraste:
  #portada .date{ background: rgba(250,252,255,.92); }
  */
  
  /* Ajustes en pantallas grandes (aún más legible) */
  @media (min-width: 1200px){
    #portada .date{ font-size: 22px; }
  }

  
#ceremonia .overlay > p {
    color: #0B2A4A;   /* ← reemplaza con el color que quieras */
    font-weight: 1000; /* opcional: lo hace más legible */
    font-size: 20px;
  }

#recepcion .overlay > p {
color: #0B2A4A;   /* ← reemplaza con el color que quieras */
font-weight: 1000; /* opcional: lo hace más legible */
font-size: 20px;
}
  
#portada {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
  }

  #portada .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px; /* espacio uniforme entre elementos */
  }
  
  /* Monograma */
  #portada .monogram {
    margin-bottom: 0;
  }
  
  /* Nombre */
  #portada .couple {
    font-size: clamp(42px, 6vw, 72px);
    margin: 0;
  }
  
  /* Botones */
  #portada .hero-cta {
    margin: 10px 0;
  }
  
  /* Fecha */
  #portada .date {
    margin: 0;
    font-size: 16px;
    letter-spacing: 2px;
    opacity: 0.85;
  }

  #portada {
    background: radial-gradient(circle at top, #000022, #010121);
  }