/* Componentes añadidos al prototipo configurable. */
.faq { padding-top: 45px; }
.faq-layout { max-width: 850px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); padding: 0 4px; }
.faq-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 24px 0; font: normal 1.5rem var(--serif); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { font: 400 1.2rem var(--sans); transition: transform .25s; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { margin: -8px 0 25px; max-width: 650px; color: rgba(35, 51, 45, .72); }
.attendance-field { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.attendance-field legend { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin-bottom: 8px; }
.attendance-field label { cursor: pointer; position: relative; }
.attendance-field input { position: absolute; opacity: 0; pointer-events: none; }
.attendance-field span { display: block; padding: 13px 10px; border: 1px solid var(--line); text-align: center; font-size: .78rem; transition: background .2s, color .2s, border .2s; }
.attendance-field input:checked + span { background: var(--forest); border-color: var(--forest); color: var(--paper); }
#attending-fields { display: grid; gap: 20px; }
.demo-notice { border-left: 2px solid #f6dcc5; padding-left: 14px; font-size: .78rem !important; }
.text-button { margin-top: 20px; background: transparent; border: 0; border-bottom: 1px solid var(--clay); padding: 5px 0; color: var(--clay); cursor: pointer; font: 700 .68rem var(--sans); letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 500px) { .attendance-field { grid-template-columns: 1fr; } .faq-list summary { font-size: 1.3rem; } }

/* Portada inspirada en la referencia: sobre azul, sello y apertura ceremonial. */
.opening {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .96), rgba(236, 231, 220, .9) 58%, #dcd6ca 100%);
}
.opening-light {
  position: absolute;
  width: 42vw;
  height: 75vh;
  background: rgba(41, 65, 55, .11);
  filter: blur(55px);
  border-radius: 50%;
  transform: rotate(26deg);
}
.opening-light--one { left: -24vw; bottom: -30vh; }
.opening-light--two { right: -28vw; top: -32vh; }
.envelope-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(92vw, 560px);
  text-align: center;
}
.envelope-stage > .eyebrow { margin-bottom: 55px; color: var(--forest); }
.lux-envelope {
  position: relative;
  width: min(78vw, 390px);
  height: min(50vw, 250px);
  min-height: 205px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  perspective: 1100px;
  filter: drop-shadow(0 25px 25px rgba(16, 41, 35, .22));
}
.lux-envelope:focus-visible { outline: 2px solid var(--clay); outline-offset: 12px; }
.lux-envelope:disabled { cursor: default; }
.envelope-back,
.envelope-front,
.envelope-flap,
.envelope-card,
.wax-seal {
  position: absolute;
  display: block;
}
.envelope-back {
  inset: 0;
  z-index: 1;
  border-radius: 4px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .05), transparent 38%),
    #172f4d;
  border: 1px solid rgba(255, 255, 255, .11);
}
.envelope-card {
  z-index: 2;
  left: 8%;
  bottom: 7%;
  width: 84%;
  height: 82%;
  padding: 28px 18px;
  background: #f7f1e7;
  color: var(--forest);
  border: 1px solid rgba(24, 52, 45, .18);
  transition: transform .8s cubic-bezier(.2, .7, .2, 1) .35s;
}
.envelope-card small,
.envelope-card em { display: block; font: 700 .54rem var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.envelope-card .opening-monogram { display: block; margin: 18px 0; font-size: 3.4rem; font-weight: 400; }
.envelope-front {
  inset: 0;
  z-index: 3;
  border-radius: 4px;
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(150deg, transparent 49.5%, rgba(255, 255, 255, .07) 50%),
    linear-gradient(210deg, transparent 49.5%, rgba(0, 0, 0, .08) 50%),
    #1c3a5e;
}
.envelope-flap {
  inset: 0;
  z-index: 4;
  clip-path: polygon(0 0, 100% 0, 50% 59%);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .08), transparent 45%),
    #142d4a;
  transform-origin: top center;
  transition: transform .8s cubic-bezier(.3, .7, .2, 1), z-index .1s .55s;
  backface-visibility: hidden;
}
.wax-seal {
  z-index: 5;
  left: 50%;
  top: 50%;
  width: 74px;
  height: 74px;
  transform: translate(-50%, -27%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #f3d9b7;
  font: normal 1.05rem var(--serif);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .2), transparent 23%),
    #8e3f39;
  border: 5px double rgba(69, 20, 20, .38);
  box-shadow: 0 7px 13px rgba(33, 11, 11, .32);
  transition: opacity .25s, transform .4s;
}
.wax-seal span { margin: 0 3px; font: 400 .7em var(--sans); }
.opening.is-opening .envelope-flap { z-index: 1; transform: rotateX(180deg); }
.opening.is-opening .envelope-card { transform: translateY(-48%); }
.opening.is-opening .wax-seal { opacity: 0; transform: translate(-50%, -27%) scale(.72); }
.opening-hint { margin: 45px 0 4px; font: normal 1.35rem var(--serif); color: var(--forest); }
.opening-private { margin: 0; color: rgba(35, 51, 45, .58); font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; }
.hero-guest {
  margin: 0 0 26px;
  padding: 7px 14px;
  border: 1px solid rgba(201, 209, 196, .35);
  color: var(--sage);
  font-size: .64rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.gift .button { margin-top: 28px; }
@media (max-width: 500px) {
  .envelope-stage > .eyebrow { margin-bottom: 45px; }
  .lux-envelope { width: 86vw; height: 56vw; min-height: 195px; }
  .wax-seal { width: 64px; height: 64px; }
  .opening-hint { margin-top: 38px; }
}

/* Dirección artística: tinta, marfil y oro viejo. */
:root { --forest: #17313a; --forest-deep: #0b1e27; --sage: #dce1dc; --paper: #fbfaf6; --ink: #1c2b33; --clay: #ad8656; --line: rgba(28, 43, 51, .18); }
.section { padding-top: 128px; padding-bottom: 128px; }
.hero {
  background:
    radial-gradient(circle at 82% 20%, rgba(198, 174, 132, .12), transparent 27%),
    linear-gradient(125deg, #0b1e27 0%, #17313a 58%, #21414a 100%);
}
.hero-content { align-items: flex-start; text-align: left; }
.hero .ornament { margin-left: 0; }
.hero .text-link { color: #f3eadb; }
.hero-art { opacity: .2; filter: sepia(.2); }
.section--sage, .photos { background: #e3e6e1; }
.photo { box-shadow: 0 18px 40px rgba(11, 30, 39, .12); }
.details { background: #f5f4ef; }
.details-grid { gap: 1px; border: 0; background: rgba(28, 43, 51, .16); box-shadow: 0 20px 45px rgba(11, 30, 39, .06); }
.detail-card { min-height: 295px; border: 0; background: var(--paper); }
.detail-card h3 { color: var(--forest-deep); }
.attire { background: #102b36; }
.attire h2 em, .attire .eyebrow, .attire-copy > p:last-child, .palette p { color: #d8c39d; }
.gift { background: #fbfaf6; }
.faq { background: #edf0eb; padding-top: 110px; padding-bottom: 120px; }
.rsvp { background: radial-gradient(circle at 12% 15%, rgba(192, 161, 108, .2), transparent 28%), #102b36; }
.rsvp .eyebrow, .rsvp-copy > p { color: #e3d1ad; }
.rsvp .form-wrap { border: 1px solid rgba(221, 205, 172, .5); box-shadow: 0 24px 50px rgba(0, 0, 0, .16); }
.rsvp .button--light { background: #17313a; }
.rsvp .button--light:hover { background: #0b1e27; }

.opening { background: radial-gradient(circle at 50% 38%, #fbfaf6 0%, #ede9df 55%, #d9d5ca 100%); }
.opening-light { background: rgba(173, 134, 86, .14); }
.envelope-stage { width: min(94vw, 720px); }
.envelope-stage > .eyebrow { color: #53616a; margin-bottom: 42px; }
.lux-envelope { width: min(88vw, 620px); height: min(56vw, 380px); min-height: 260px; filter: drop-shadow(0 32px 31px rgba(11, 30, 39, .28)); }
.envelope-back { background: linear-gradient(145deg, rgba(255, 255, 255, .1), transparent 40%), #1a3540; }
.envelope-card { padding: 40px 20px; background: #fbfaf6; color: #17313a; border-color: rgba(173, 134, 86, .43); }
.envelope-card .opening-monogram { margin: 24px 0; font-size: 4.35rem; }
.envelope-front { background: linear-gradient(150deg, transparent 49.5%, rgba(255, 255, 255, .1) 50%), linear-gradient(210deg, transparent 49.5%, rgba(0, 0, 0, .1) 50%), #21414a; }
.envelope-flap { background: linear-gradient(160deg, rgba(255, 255, 255, .12), transparent 45%), #162f39; }
.wax-seal { width: 86px; height: 86px; color: #fff5e4; background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .25), transparent 23%), #a97d4c; border-color: rgba(85, 55, 24, .42); box-shadow: 0 9px 17px rgba(42, 27, 14, .3); }
.opening-hint { margin: 40px 0 2px; color: #17313a; }
.opening-private { color: rgba(28, 43, 51, .58); }

@media (max-width: 700px) {
  .section { padding-top: 84px; padding-bottom: 84px; }
  .hero-content { align-items: center; text-align: center; }
  .hero .ornament { margin-left: auto; }
  .details-grid { gap: 1px; }
  .detail-card { border-top: 0; }
  .lux-envelope { width: 90vw; height: 58vw; min-height: 220px; }
  .envelope-card { padding: 27px 16px; }
  .envelope-card .opening-monogram { margin: 15px 0; font-size: 3.5rem; }
  .wax-seal { width: 70px; height: 70px; }
}

/* Línea de tiempo del día. */
.details-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
  background: transparent;
  box-shadow: none;
}
.details-grid::before {
  content: '';
  position: absolute;
  top: 28px;
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(23, 49, 58, .32);
}
.detail-card {
  min-height: 265px;
  margin-top: 28px;
  padding: 39px 19px 18px;
  position: relative;
  background: transparent;
  border-top: 0;
}
.detail-card::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 19px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #a97d4c;
  border: 3px solid #f5f4ef;
}
.detail-card h3 { margin: 21px 0 5px; font-size: 1.72rem; }
.detail-card .detail-time { color: #53616a; font-size: .68rem; }
.detail-card p:not(.detail-time) { line-height: 1.55; }

/* La tarjeta empieza dentro del sobre y pasa delante solo cuando ya ha salido. */
.envelope-card { transition: transform .8s cubic-bezier(.2, .7, .2, 1) .35s, z-index 0s linear .58s, box-shadow .25s; }
.opening.is-opening .envelope-card {
  z-index: 6;
  transform: translateY(-48%);
  box-shadow: 0 19px 27px rgba(11, 30, 39, .2);
}
.wax-seal {
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .25), transparent 23%), #9c3d42;
  border-color: rgba(75, 18, 24, .52);
  box-shadow: 0 9px 17px rgba(58, 14, 19, .34);
}

@media (max-width: 900px) {
  .details-grid { grid-template-columns: 1fr; gap: 0; }
  .details-grid::before {
    display: block;
    top: 24px;
    bottom: 26px;
    left: 38px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .detail-card {
    min-height: 0;
    margin: 0;
    padding: 13px 0 34px 68px;
    border-top: 0;
    border-left: 0;
  }
  .detail-card::before { top: 17px; left: 32px; border-color: #f5f4ef; }
  .detail-card h3 { margin: 2px 0 5px; }
}

/* Safari/iPhone: la portada y la cabecera cubren también el área del notch. */
@supports (padding: env(safe-area-inset-top)) {
  .opening {
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
  }
  .hero {
    padding-top: env(safe-area-inset-top);
    padding-right: max(24px, env(safe-area-inset-right));
    padding-left: max(24px, env(safe-area-inset-left));
  }
}

/* La página ocupa la pantalla completa; cada sección conserva su propio fondo. */
html,
body {
  min-height: 100%;
}
.opening,
.invitation {
  min-height: 100dvh;
}
@supports (-webkit-touch-callout: none) {
  html,
  body { min-height: -webkit-fill-available; }
  .opening,
  .invitation { min-height: -webkit-fill-available; }
}