/* ============================================================
   INVITATION THEME — "Renata" blue + gold (azul marino & dorado)
   Scoped to .inv-renata so it ONLY restyles the invitation
   content inside the phone mockups, never the landing chrome.
   Look: alternating navy "starry" sections + white/soft-blue
   sections — the "secciones separadas" rhythm.
   ============================================================ */

.inv-renata {
  --rd:#8A1342;   /* deep burgundy (era navy)   */
  --rm:#B91E5A;   /* accent rose                */
  --rs:#C16389;   /* rose medium                */
  --rl:#E3A9C0;   /* rose light                 */
  --rp:#F4D9E4;   /* rose pale (accent-soft)    */
  --rx:#FAF1F5;   /* rose mist / crema rosada   */
  --rgold:#B89968;
  --rgl:#E7D9C2;
  --rcr:#FAF7F4;  /* crema (bg del sitio)       */
  --rtd:#1A1418;
  --rtm:#5A4A52;
  --rtl:#A89BA3;
  --rplay:'Playfair Display', Georgia, serif;
  --rcor:'Cormorant Garamond', 'Times New Roman', serif;
  --rjos:'Josefin Sans', system-ui, sans-serif;
}

/* ---- Section shell ------------------------------------- */
.inv-renata .inv-section {
  background: var(--rcr);
  color: var(--rtd);
  border-bottom: none;
  overflow: hidden;
}
.inv-renata .inv-section > * { position: relative; z-index: 1; }

/* gold hairline at the top edge — the "separator" */
.inv-renata .inv-section:not(.cover)::before {
  content: '';
  position: absolute;
  top: 0; left: 28%; right: 28%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rgold), transparent);
  z-index: 2;
}

/* ---- Dark / starry sections --------------------------- */
.inv-renata .inv-section.dark {
  background: linear-gradient(160deg, #140a10 0%, #3a1526 55%, #1c0e15 100%);
  color: #fff;
}
.inv-renata .inv-section.cover {
  background: linear-gradient(165deg, #1a0d14 0%, #46182f 60%, #190c13 100%);
}
.inv-renata .inv-section.dark::after,
.inv-renata .inv-section.cover::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.3px 1.3px at 20% 28%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 68% 18%, rgba(255,255,255,.42), transparent),
    radial-gradient(1.4px 1.4px at 82% 58%, rgba(231,217,194,.55), transparent),
    radial-gradient(1px 1px at 33% 74%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 54% 46%, rgba(231,217,194,.55), transparent),
    radial-gradient(1.3px 1.3px at 14% 82%, rgba(184,153,104,.6), transparent),
    radial-gradient(1px 1px at 88% 84%, rgba(255,255,255,.32), transparent);
}

/* ---- Soft (light-blue) sections ----------------------- */
.inv-renata .inv-section.soft {
  background: linear-gradient(180deg, var(--rx) 0%, #fff 100%);
}

/* ---- Eyebrow + heading -------------------------------- */
.inv-renata .inv-eye {
  font-family: var(--rjos);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--rgold);
  margin-bottom: 12px;
}
.inv-renata .inv-section.dark .inv-eye,
.inv-renata .inv-section.cover .inv-eye { color: var(--rgl); }

.inv-renata .inv-section h4.inv-h {
  font-family: var(--rplay);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--rd);
  margin-bottom: 18px;
}
.inv-renata .inv-section.dark h4.inv-h { color: #fff; }

/* ---- Cover -------------------------------------------- */
.inv-renata .inv-cover-eyebrow {
  font-family: var(--rjos);
  font-weight: 300;
  font-size: 0.55rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--rgl);
  margin-bottom: 18px;
}
.inv-renata .inv-cover-name {
  font-family: var(--rplay);
  font-style: italic;
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 4px;
  background: linear-gradient(180deg, #fff 10%, rgba(231,217,194,.92) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.inv-renata .inv-cover-and {
  font-family: var(--rcor);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--rgl);
  margin: 4px 0;
}
.inv-renata .inv-cover-date {
  font-family: var(--rcor);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: none;
  color: rgba(255,255,255,.9);
  margin-top: 20px;
  padding: 8px 18px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50px;
  background: rgba(27,58,107,.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ---- Countdown ---------------------------------------- */
.inv-renata .cd-cell {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(201,169,110,.22);
  border-radius: 10px;
  min-width: 52px;
}
.inv-renata .inv-section:not(.dark) .cd-cell {
  background: var(--rx);
  border-color: var(--rp);
}
.inv-renata .cd-cell .n {
  font-family: var(--rcor);
  font-weight: 300;
  font-size: 1.7rem;
  color: var(--rd);
}
.inv-renata .inv-section.dark .cd-cell .n {
  background: linear-gradient(180deg, #fff, var(--rl));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.inv-renata .cd-cell .l {
  font-family: var(--rjos);
  font-weight: 300;
  letter-spacing: 0.22em;
  color: var(--rgold);
}

/* ---- Quote -------------------------------------------- */
.inv-renata .inv-quote {
  font-family: var(--rcor);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--rtm);
  max-width: 230px;
}
.inv-renata .inv-section.dark .inv-quote { color: rgba(255,255,255,.62); }

/* ---- Story (nuestra historia) ------------------------- */
.inv-renata .inv-story .st-item { border-bottom-color: var(--rp); }
.inv-renata .inv-story .st-y {
  font-family: var(--rplay);
  font-style: italic;
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--rm);
}
.inv-renata .inv-story .st-t { color: var(--rtm); }

/* ---- Cuándo y dónde ----------------------------------- */
.inv-renata .wh-card { background: var(--rx); border-color: var(--rp); }
.inv-renata .wh-card .wh-t {
  font-family: var(--rjos);
  font-weight: 300;
  letter-spacing: 0.24em;
  color: var(--rgold);
}
.inv-renata .wh-card .wh-time {
  font-family: var(--rplay);
  font-style: italic;
  font-weight: 500;
  color: var(--rd);
}
.inv-renata .wh-card .wh-pl { color: var(--rtm); }
.inv-renata .inv-map { background: linear-gradient(135deg, var(--rx), var(--rp)); }
.inv-renata .placeholder-tag {
  font-family: var(--rjos);
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--rtl);
}

/* ---- Vestimenta --------------------------------------- */
.inv-renata .inv-dress {
  background: linear-gradient(135deg, var(--rx), var(--rp));
  border-color: var(--rl);
}
.inv-renata .dr-label {
  font-family: var(--rcor);
  font-style: italic;
  color: var(--rd);
}
.inv-renata .dr-note {
  font-family: var(--rcor);
  font-style: italic;
  color: var(--rtl);
}

/* ---- Galería ------------------------------------------ */
.inv-renata .inv-gallery .tile {
  background: linear-gradient(135deg, var(--rl), var(--rs));
  border-radius: 8px;
}
.inv-renata .inv-gallery .tile:nth-child(3n+2) {
  background: linear-gradient(135deg, var(--rs), var(--rd));
}
.inv-renata .inv-gallery .tile:nth-child(3n) {
  background: linear-gradient(135deg, var(--rp), var(--rl));
}

/* ---- Mesa de regalos ---------------------------------- */
.inv-renata .inv-gifts .gf { background: var(--rx); border-color: var(--rp); }
.inv-renata .inv-section.dark .inv-gifts .gf {
  background: rgba(255,255,255,.05);
  border-color: rgba(201,169,110,.22);
}
.inv-renata .inv-gifts .gf-n {
  font-family: var(--rcor);
  font-style: italic;
  color: var(--rd);
}
.inv-renata .inv-section.dark .inv-gifts .gf-n { color: #fff; }
.inv-renata .inv-gifts .gf-c {
  font-family: var(--rjos);
  font-weight: 300;
  color: var(--rgold);
}

/* ---- Hospedaje ---------------------------------------- */
.inv-renata .inv-hotel { border-color: var(--rp); }
.inv-renata .inv-hotel .ht-img { background: linear-gradient(135deg, var(--rl), var(--rs)); }
.inv-renata .inv-hotel .ht-name {
  font-family: var(--rcor);
  font-style: italic;
  color: var(--rd);
}
.inv-renata .inv-hotel .ht-note {
  font-family: var(--rjos);
  font-weight: 300;
  color: var(--rgold);
}

/* ---- Música y video ----------------------------------- */
.inv-renata .md-player { background: var(--rx); border-color: var(--rp); }
.inv-renata .md-play { border-left-color: var(--rm); }
.inv-renata .md-bar { background: var(--rp); }
.inv-renata .md-bar span { background: var(--rm); }
.inv-renata .md-song {
  font-family: var(--rjos);
  font-weight: 300;
  color: var(--rtl);
}
.inv-renata .md-video { background: linear-gradient(135deg, var(--rl), var(--rs)); }

/* ---- RSVP (light blue form, Renata style) ------------- */
.inv-renata .inv-rsvp {
  background: var(--rx);
  border: 1px solid var(--rp);
  color: var(--rtd);
}
.inv-renata .inv-rsvp .hi {
  font-family: var(--rplay);
  font-style: italic;
  color: var(--rd);
}
.inv-renata .inv-rsvp .who {
  font-family: var(--rjos);
  font-weight: 300;
  letter-spacing: 0.18em;
  color: var(--rgold);
}
.inv-renata .inv-rsvp .qty-l {
  font-family: var(--rjos);
  font-weight: 300;
  color: var(--rtl);
}
.inv-renata .inv-rsvp .qty-ctrl { background: #fff; border: 1px solid var(--rp); }
.inv-renata .inv-rsvp .qty-ctrl span { color: var(--rm); }
.inv-renata .inv-rsvp .qty-ctrl b { color: var(--rd); }
.inv-renata .inv-rsvp .opt.yes {
  background: linear-gradient(135deg, var(--rm), var(--rd));
  color: #fff;
}
.inv-renata .inv-rsvp .opt.no {
  background: #fff;
  color: var(--rtl);
  border: 1px solid var(--rp);
}
.inv-renata .inv-rsvp .msg-field {
  background: #fff;
  border: 1px solid var(--rp);
  color: var(--rtl);
}

/* ---- Pase QR ------------------------------------------ */
.inv-renata .inv-pass-mock { background: var(--rx); }
.inv-renata .inv-section.dark .inv-pass-mock {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(201,169,110,.25);
}
.inv-renata .qr-box {
  border-color: var(--rd);
  background:
    linear-gradient(45deg, var(--rd) 25%, transparent 25%, transparent 75%, var(--rd) 75%) 0 0/12px 12px,
    linear-gradient(45deg, var(--rd) 25%, transparent 25%, transparent 75%, var(--rd) 75%) 6px 6px/12px 12px,
    #fff;
}
.inv-renata .inv-pass-mock .info .nm {
  font-family: var(--rplay);
  font-style: italic;
  color: var(--rd);
}
.inv-renata .inv-section.dark .inv-pass-mock .info .nm { color: #fff; }
.inv-renata .inv-pass-mock .info .pl {
  font-family: var(--rjos);
  font-weight: 300;
  color: var(--rgold);
}

/* ---- Caption ------------------------------------------ */
.inv-renata .inv-cap {
  font-family: var(--rjos);
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--rtl);
}
.inv-renata .inv-section.dark .inv-cap { color: var(--rgl); }

/* ============================================================
   CallAgent — demo CTA block (lives in the dark .flow section)
   ============================================================ */
.flow-cta {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
}
.flow-cta p {
  max-width: 54ch;
  margin: 0 auto 22px;
  color: rgba(255,255,255,0.66);
  font-size: 0.98rem;
  line-height: 1.65;
}
.flow-cta p em { color: var(--accent-soft); font-style: italic; }