/* Jesús & Thalía. Fuente editable: tokens, secciones, responsive y movimiento. */
@font-face {
  font-family:WeddingSerif;
  src:local('Bodoni 72'),local('Didot')
}

@font-face {
  font-family:WeddingSans;
  src:local('Avenir Next'),local('Avenir')
}

:root {
  --ink:#0a1c27;
  --deep:#07151e;
  --navy:#12314a;
  --paper:#faf7f0;
  --mist:#eaf0f3;
  --sand:#f6efe2;
  --gold:#ddc396;
  --gold-dark:#8b6739;
  --muted:#656a66;
  --line:rgba(139,103,57,.24);
  --serif:'Cormorant Garamond',WeddingSerif,'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --sans:'Jost',WeddingSans,'Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:80px
}

body {
  margin:0;
  background:var(--ink);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased
}

body:has(dialog[open]) {
  overflow:hidden
}

a {
  color:inherit;
  text-decoration:none
}

button,input {
  font:inherit
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

button:disabled {
  opacity:.35;
  cursor:default
}

button:focus-visible,a:focus-visible,input:focus-visible,.gallery:focus-visible {
  outline:2px solid #aa7e43;
  outline-offset:5px
}

img {
  display:block;
  width:100%;
  height:auto
}

figure,p,h1,h2,h3 {
  margin:0
}

h1,h2,h3 {
  font-weight:400
}

h1,h2,h3,.signature {
  font-family:var(--serif)
}

p+p {
  margin-top:20px
}

h2 {
  font-size:clamp(44px,5.2vw,82px);
  line-height:1.08;
  letter-spacing:-.045em
}

h2 em {
  font-weight:400
}

h3 {
  font-size:27px;
  line-height:1.25;
  letter-spacing:-.015em
}

em {
  font-weight:400
}

strong {
  font-weight:600
}

[hidden] {
  display:none!important
}

.eyebrow {
  font-size:12px;
  letter-spacing:.2em;
  font-weight:500;
  line-height:1.7
}

.section-number {
  display:block;
  font-size:12px;
  letter-spacing:.18em;
  margin-bottom:50px;
  opacity:.65
}

.small-note {
  font-size:14px;
  color:var(--muted)
}

.section-light {
  background:var(--paper)
}

.section-dark {
  background:var(--ink);
  color:var(--paper)
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  padding:16px 26px;
  min-height:54px;
  font-size:14px;
  font-weight:500;
  border:1px solid transparent;
  border-radius:3px;
  line-height:1.4;
  transition:background .3s,transform .4s var(--ease),box-shadow .3s
}

.button:hover {
  transform:translateY(-3px)
}

.button span {
  font-size:20px
}

.button-glass {
  color:#fff;
  background:rgba(9,23,31,.28);
  border-color:rgba(255,255,255,.5);
  backdrop-filter:blur(12px)
}

.button-glass:hover {
  background:rgba(9,23,31,.6)
}

.button-ink {
  background:var(--ink);
  color:var(--paper)
}

.button-ink:hover {
  background:#1e3a48
}

.button-gold {
  background:var(--gold);
  color:var(--ink)
}

.button-outline {
  background:transparent;
  border-color:var(--line)
}

.text-link {
  font-size:14px;
  text-decoration:underline;
  text-underline-offset:5px
}

.tiny-star {
  display:block;
  color:var(--gold-dark);
  font-size:45px;
  line-height:1;
  margin:25px 0 36px
}

.reading-progress {
  position:fixed;
  top:0;
  left:0;
  z-index:100;
  width:100%;
  height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left
}

.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:150;
  background:var(--paper);
  padding:12px 18px
}

.skip-link:focus {
  top:10px
}

.topbar {
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:10;
  height:105px;
  padding:0 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--paper);
  border-bottom:1px solid rgba(255,255,255,.15)
}

.monogram {
  font-family:var(--serif);
  font-size:30px;
  letter-spacing:-.07em;
  white-space:nowrap
}

.monogram span {
  font-size:19px;
  margin:0 4px;
  font-style:italic;
  color:var(--gold)
}

.desktop-nav {
  display:flex;
  gap:35px;
  font-size:13px
}

.desktop-nav a {
  position:relative
}

.desktop-nav a:after {
  content:'';
  position:absolute;
  bottom:-7px;
  left:0;
  width:100%;
  height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transition:transform .3s;
  transform-origin:left
}

.desktop-nav a:hover:after {
  transform:scaleX(1)
}

.topbar-right {
  display:flex;
  align-items:center;
  gap:24px
}

.header-date {
  font-size:12px;
  letter-spacing:.17em
}

.icon-button {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  color:inherit;
  background:transparent;
  border:1px solid #ffffff40;
  border-radius:50%;
  font-size:18px
}

.hero {
  min-height:900px;
  height:100svh;
  max-height:1400px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:white;
  display:flex;
  align-items:center
}

.hero-image,.hero-shade,.light-haze {
  position:absolute;
  inset:0;
  z-index:-3
}

.hero-image img {
  height:100%;
  object-fit:cover;
  object-position:50% 58%;
  animation:hero-drift 26s ease-in-out infinite alternate;
  will-change:transform
}

.hero-shade {
  z-index:-2;
  background:linear-gradient(90deg,rgba(4,18,29,.8),rgba(4,18,29,.35) 46%,rgba(4,18,29,.08)),linear-gradient(180deg,rgba(4,18,29,.26),transparent 30%,rgba(4,18,29,.14) 60%,rgba(4,18,29,.8))
}

.light-haze {
  z-index:-1;
  opacity:.23;
  background:radial-gradient(ellipse at 75% 25%,#f3ca8844,transparent 60%);
  animation:haze 14s ease-in-out infinite alternate
}

.hero-content {
  padding:130px 8% 100px;
  max-width:1000px;
  text-align:center
}

.hero-intro {
  animation:enter 1.5s var(--ease) both
}

.hero h1 {
  font-size:clamp(90px,10.5vw,172px);
  line-height:.95;
  letter-spacing:-.05em;
  margin:26px 0 25px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  column-gap:.15em;
  animation:enter 1.7s .15s var(--ease) both
}

.hero h1 i {
  font-size:.48em;
  font-weight:400;
  color:var(--gold);
  line-height:1.5
}

.hero h1 span:last-child {
  flex-basis:100%
}

.hero-poem {
  font-family:var(--serif);
  font-size:24px;
  animation:enter 1.7s .25s var(--ease) both;
  letter-spacing:-.015em
}

.hero-date {
  margin:34px 0 29px;
  display:grid;
  gap:5px;
  animation:enter 1.7s .4s var(--ease) both
}

.hero-date>span {
  font-size:12px;
  letter-spacing:.19em
}

.hero-date strong {
  font-size:24px;
  letter-spacing:.19em;
  font-weight:400
}

.hero-date i {
  font-size:14px;
  color:var(--gold);
  margin:0 7px
}

.hero .button {
  animation:enter 1.7s .55s var(--ease) both
}

.hero-bottom {
  position:absolute;
  bottom:29px;
  left:5%;
  right:5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  letter-spacing:.18em
}

.scroll-cue {
  width:1px;
  height:40px;
  background:rgba(255,255,255,.2);
  overflow:hidden;
  position:relative
}

.scroll-cue:after {
  content:'';
  position:absolute;
  top:-50%;
  width:100%;
  height:50%;
  background:var(--gold);
  animation:scroll-line 2.6s ease-in-out infinite
}

.invitation {
  padding:125px max(7%,calc((100vw - 1260px)/2));
  display:grid;
  grid-template-columns:1.1fr .85fr;
  gap:10%;
  align-items:center
}

.invitation-copy {
  max-width:590px
}

.invitation .section-number {
  margin-bottom:33px
}

.invitation .tiny-star {
  margin:20px 0 32px
}

.invitation h2 {
  font-size:clamp(39px,4.3vw,66px);
  margin:24px 0 30px;
  overflow-wrap:anywhere
}

.invitation-copy>p:not(.eyebrow) {
  font-size:16px;
  line-height:1.9;
  color:#555c59
}

.signature {
  display:block;
  font-size:26px;
  font-style:italic;
  color:var(--gold-dark);
  margin-top:28px
}

.portrait-frame {
  position:relative;
  padding:14px;
  border:1px solid var(--line);
  transform:rotate(2deg)
}

.portrait-frame img {
  aspect-ratio:2/3;
  object-fit:cover
}

.portrait-frame figcaption {
  font-family:var(--serif);
  font-style:italic;
  text-align:center;
  font-size:19px;
  padding:20px 2px 8px
}

.photo-corner {
  position:absolute;
  top:-13px;
  right:32px;
  background:#a48d6b40;
  width:80px;
  height:30px;
  transform:rotate(28deg)
}

.countdown-section {
  text-align:center;
  padding:15px 24px 100px
}

.countdown {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:27px;
  margin:25px 0 22px
}

.countdown strong {
  display:block;
  font-family:var(--serif);
  font-size:clamp(46px,5vw,72px);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
  min-width:1.3em
}

.countdown span {
  font-size:12px;
  letter-spacing:.18em
}

.countdown>i {
  font-family:var(--serif);
  font-size:28px;
  color:#aa8a5f;
  transform:translateY(-12px)
}

.evening {
  padding:110px max(7%,calc((100vw - 1260px)/2)) 80px;
  position:relative;
  overflow:hidden
}

.section-heading>.eyebrow {
  color:var(--gold);
  margin-bottom:20px
}

.section-heading>p:not(.eyebrow) {
  max-width:530px;
  margin-top:28px;
  color:#b9c2c5;
  line-height:1.9
}

.evening .section-heading {
  max-width:680px
}

.evening-grid {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:9%;
  align-items:start;
  margin-top:65px
}

.timeline {
  padding-top:0
}

.timeline-row {
  display:grid;
  grid-template-columns:140px 1fr;
  gap:20px;
  position:relative;
  padding:0 0 40px 28px;
  border-left:1px solid #ddc39640
}

.timeline-row:last-child {
  border-left-color:transparent;
  padding-bottom:0
}

.timeline-point {
  position:absolute;
  left:-4px;
  top:11px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gold)
}

.timeline-row .time {
  color:var(--gold);
  font-family:var(--serif);
  font-size:23px;
  line-height:1.4;
  white-space:nowrap
}

.time small {
  display:block;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.12em;
  margin-top:6px
}

.timeline-row h3 {
  font-size:25px
}

.timeline-row p {
  font-size:15px;
  color:#bac3c5;
  margin-top:12px;
  line-height:1.8
}

.departure .timeline-point {
  box-shadow:0 0 0 5px #ddc39620
}

.essential-tag {
  font-size:12px;
  letter-spacing:.14em;
  color:var(--gold);
  display:block;
  margin-bottom:8px
}

.departure .time {
  margin-top:25px
}

.departure .timeline-point {
  top:36px
}

.evening-photo {
  position:relative;
  margin-top:-180px
}

.evening-photo img {
  aspect-ratio:3/5;
  object-fit:cover;
  border-radius:220px 220px 2px 2px
}

.evening-photo figcaption {
  position:absolute;
  bottom:35px;
  left:27px;
  right:27px;
  z-index:2;
  color:#fff;
  font-family:var(--serif);
  font-style:italic;
  font-size:26px;
  line-height:1.25
}

.evening-photo:after {
  content:'';
  position:absolute;
  bottom:0;
  height:45%;
  left:0;
  right:0;
  background:linear-gradient(transparent,#061722ce)
}

.boarding-note {
  display:flex;
  gap:23px;
  padding:29px 32px;
  border:1px solid #ddc39655;
  background:#ddc39608;
  margin:55px 0
}

.note-icon {
  font-size:32px;
  color:var(--gold);
  line-height:1.2
}

.boarding-note h3 {
  font-size:25px;
  color:var(--gold);
  margin-bottom:10px
}

.boarding-note p {
  color:#c6cdcf;
  max-width:950px;
  font-size:15px
}

.experience-row {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5%;
  padding-top:5px
}

.experience-row>div {
  border-top:1px solid #ffffff25;
  padding-top:25px
}

.experience-number {
  display:block;
  font-family:var(--serif);
  font-size:22px;
  font-style:italic;
  color:var(--gold);
  margin-bottom:24px
}

.experience-row h3 {
  font-size:29px
}

.experience-row p {
  color:#b9c2c5;
  font-size:15px;
  margin-top:10px;
  max-width:280px
}

.venue {
  padding:115px 0 80px;
  overflow:hidden
}

.venue-top {
  display:flex;
  justify-content:space-between;
  gap:60px;
  align-items:flex-end;
  padding:0 max(7%,calc((100vw - 1260px)/2)) 65px
}

.venue .section-heading>.eyebrow {
  color:var(--gold-dark)
}

.venue-address {
  padding-bottom:6px;
  min-width:285px
}

.venue-address h3 {
  font-size:29px
}

.venue-address p {
  margin-top:16px;
  line-height:1.9;
  color:var(--muted)
}

.venue-address .button {
  margin-top:25px
}

.gallery-topline {
  padding:0 7% 20px;
  display:flex;
  align-items:center;
  justify-content:space-between
}

.gallery-controls {
  display:flex;
  gap:20px;
  align-items:center
}

.gallery-controls>span {
  font-size:12px;
  letter-spacing:.1em
}

.round-button {
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent;
  color:var(--ink);
  font-size:19px;
  transition:background .3s
}

.round-button:hover {
  background:#dfc8a22a
}

.gallery {
  display:flex;
  gap:25px;
  padding:0 7% 15px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-left:7%;
  scrollbar-width:none;
  overscroll-behavior-x:contain
}

.gallery::-webkit-scrollbar {
  display:none
}

.gallery figure {
  flex:0 0 29%;
  scroll-snap-align:start;
  min-width:250px
}

.gallery img {
  aspect-ratio:3/4.3;
  object-fit:cover;
  transition:transform 1s var(--ease);
  border-radius:3px
}

.gallery figure:hover img {
  transform:translateY(-5px)
}

.gallery figcaption {
  padding:17px 0;
  font-family:var(--serif);
  font-size:23px
}

.gallery figcaption span {
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.12em;
  margin-right:18px;
  color:var(--gold-dark)
}

.gallery-hint {
  font-size:12px;
  letter-spacing:.18em;
  text-align:center;
  margin-top:24px;
  color:var(--muted)
}

.gallery-hint span {
  font-size:19px;
  margin-left:8px
}

.dress {
  padding:30px max(7%,calc((100vw - 1260px)/2)) 115px
}

.dress-intro {
  border-top:1px solid var(--line);
  padding-top:75px;
  max-width:100%
}

.dress-intro .eyebrow {
  color:var(--gold-dark);
  margin-bottom:22px
}

.dress-intro>p:last-child {
  max-width:650px;
  margin-top:25px;
  color:var(--muted);
  line-height:1.9
}

.dress-grid {
  display:grid;
  grid-template-columns:.9fr 1fr;
  gap:10%;
  align-items:center;
  margin-top:55px
}

.dress-image {
  position:relative;
  background:#fffaf1;
  padding:10px;
  border:1px solid var(--line)
}

.dress-image img {
  width:100%;
  height:auto
}

.image-expand {
  position:absolute;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  border:1px solid #ffffff99;
  background:#faf7f0ed;
  backdrop-filter:blur(10px);
  padding:12px 17px;
  border-radius:30px;
  font-size:13px;
  white-space:nowrap;
  box-shadow:0 3px 20px #00000015
}

.image-expand span {
  margin-left:12px
}

.dress-rule {
  padding:30px 0;
  border-bottom:1px solid var(--line)
}

.dress-rule:first-child {
  padding-top:0
}

.rule-label {
  font-size:12px;
  letter-spacing:.2em;
  color:var(--gold-dark);
  display:block;
  margin-bottom:16px
}

.dress-rule h3 {
  font-size:32px;
  max-width:360px
}

.dress-rule p {
  color:#5b625e;
  line-height:1.85;
  margin-top:17px
}

.dress-rule p.dress-detail {
  font-size:14px
}

.color-swatches {
  display:flex;
  gap:12px;
  margin-top:20px
}

.color-swatches i {
  width:27px;
  height:27px;
  border-radius:50%;
  background:var(--swatch);
  outline:1px solid #95806a40;
  outline-offset:4px
}

.inspiration-note {
  display:flex;
  gap:16px;
  padding-top:30px
}

.inspiration-note>span {
  color:var(--gold-dark);
  font-size:30px
}

.inspiration-note p {
  font-size:14px;
  line-height:1.85;
  color:#5b625e
}

.inspiration-note strong {
  font-weight:500;
  color:var(--ink)
}

.closing {
  position:relative;
  isolation:isolate;
  padding:110px 24px 95px;
  text-align:center;
  overflow:hidden
}

.closing-image {
  position:absolute;
  inset:0;
  z-index:-2
}

.closing-image img {
  height:100%;
  object-fit:cover;
  object-position:center 55%;
  opacity:.3
}

.closing:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(#0a1c27d9,#0a1c2799,#0a1c27f2);
  z-index:-1
}

.closing-content {
  max-width:780px;
  margin:auto
}

.closing .tiny-star {
  color:var(--gold);
  margin:0 0 25px
}

.closing .eyebrow {
  color:var(--gold)
}

.closing h2 {
  margin:23px 0 28px;
  font-size:clamp(40px,4.8vw,70px)
}

.closing-content>p:not(.eyebrow):not(.closing-signature) {
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
  color:#cad0d0;
  font-size:16px;
  line-height:1.9
}

.contact-box {
  margin:35px auto 40px;
  max-width:540px;
  padding:28px 32px;
  border:1px solid #ddc39655;
  background:#0a1c2744;
  backdrop-filter:blur(6px)
}

.contact-box h3 {
  font-size:27px
}

.contact-box p {
  margin:15px 0 22px;
  font-size:15px;
  color:#c9d0d2
}

.phone-link {
  display:block;
  font-size:14px;
  letter-spacing:.1em;
  margin-top:19px;
  line-height:2.5
}

.closing-signature {
  font-family:var(--serif);
  font-size:58px;
  line-height:1.2;
  margin:0 0 22px
}

.closing-signature i {
  font-size:.7em;
  color:var(--gold)
}

footer {
  padding:30px 7% 35px;
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:space-between;
  color:var(--paper);
  border-top:1px solid #ffffff15;
  background:var(--deep)
}

footer>span:nth-child(2) {
  font-family:var(--serif);
  font-size:18px;
  font-style:italic;
  color:#c2c5c3
}

footer>span:last-child {
  font-size:12px;
  letter-spacing:.15em
}

.mobile-nav {
  display:none
}

.reveal {
  transition:opacity 1.25s var(--ease),translate 1.25s var(--ease),filter 1.25s var(--ease)
}

.motion-ready .reveal:not(.visible) {
  opacity:0;
  translate:0 35px;
  filter:blur(5px)
}

.reveal.visible {
  opacity:1;
  translate:0 0;
  filter:blur(0)
}

.motion-paused * {
  animation-play-state:paused!important
}

.motion-paused .reveal {
  transition:none!important;
  opacity:1!important;
  translate:none!important;
  filter:none!important
}

.motion-paused {
  scroll-behavior:auto
}

.motion-paused .hero-intro,.motion-paused .hero h1,.motion-paused .hero-poem,.motion-paused .hero-date,.motion-paused .hero .button {
  animation:none;
  opacity:1;
  transform:none
}

.organizer {
  background:var(--paper);
  min-height:100vh;
  padding:0 max(6%,calc((100vw - 1150px)/2)) 75px
}

.organizer-header {
  height:110px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}

.organizer-heading {
  padding:60px 0 38px;
  max-width:700px
}

.organizer-heading .eyebrow {
  color:var(--gold-dark);
  margin-bottom:20px
}

.organizer-heading h1 {
  font-size:clamp(46px,5vw,70px);
  line-height:1.05;
  letter-spacing:-.04em
}

.organizer-heading p:last-child {
  margin-top:25px;
  color:var(--muted)
}

.organizer-grid {
  display:grid;
  grid-template-columns:1fr .85fr;
  gap:55px;
  align-items:start
}

.organizer form {
  padding:28px;
  border:1px solid var(--line);
  background:#fffdf9
}

.organizer label {
  display:block;
  font-size:14px;
  font-weight:500;
  margin-bottom:10px
}

.organizer input {
  width:100%;
  height:56px;
  padding:12px 14px;
  border:1px solid #bcbaaF;
  border-radius:3px;
  background:white;
  color:var(--ink);
  font-size:16px;
  min-width:0
}

.field-help {
  font-size:13px;
  color:var(--muted);
  margin:10px 0 25px
}

.organizer form .button {
  width:100%;
  gap:15px
}

.organizer-preview {
  padding:38px 30px;
  background:#eee8dc;
  border:1px solid var(--line);
  text-align:center
}

.organizer-preview h2 {
  font-size:39px;
  overflow-wrap:anywhere
}

.organizer-preview p {
  font-size:15px;
  margin-top:20px;
  color:#5f635d
}

.organizer-preview .tiny-star {
  margin:15px 0 23px
}

.organizer-preview .signature {
  font-size:24px
}

.generated-result {
  padding:30px 0
}

.generated-result h2 {
  font-size:32px;
  margin:13px 0 22px;
  overflow-wrap:anywhere
}

.generated-result p {
  font-size:13px;
  color:var(--muted);
  margin-top:14px
}

.result-actions {
  display:flex;
  gap:10px;
  margin-top:15px
}

.result-actions .button {
  padding:13px 16px;
  flex:1;
  gap:5px
}

.saved-invitations {
  border-top:1px solid var(--line);
  margin-top:55px;
  padding-top:30px
}

.saved-heading {
  display:flex;
  gap:15px;
  justify-content:space-between;
  align-items:center
}

.saved-heading h2 {
  font-size:34px
}

.saved-heading>span {
  font-size:13px;
  color:var(--muted)
}

.storage-note {
  font-size:13px;
  color:var(--muted);
  max-width:750px;
  margin:15px 0 30px
}

.invitation-item {
  border-bottom:1px solid var(--line);
  padding:18px 0;
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center
}

.invitation-item h3 {
  font-size:24px;
  overflow-wrap:anywhere
}

.invitation-item time {
  font-size:12px;
  color:var(--muted)
}

.item-actions {
  display:flex;
  gap:10px;
  flex-shrink:0
}

.item-actions button,.item-actions a {
  background:none;
  border:1px solid var(--line);
  border-radius:3px;
  color:var(--ink);
  padding:10px 14px;
  font-size:13px;
  line-height:1.4;
  min-height:42px
}

.item-actions .delete-link {
  border:0;
  color:#8e4b43;
  font-size:21px
}

.item-name {
  min-width:0
}

.organizer #empty-list {
  color:var(--muted);
  font-size:15px;
  padding:24px 0
}

#form-message {
  font-size:14px;
  margin-top:12px;
  color:#8a342d
}

#form-message:empty {
  display:none
}

.dress-dialog {
  max-width:min(95vw,660px);
  max-height:92dvh;
  background:var(--paper);
  border:0;
  padding:0 0 16px;
  color:var(--ink);
  overflow:auto;
  box-shadow:0 10px 100px #0007
}

.dress-dialog::backdrop {
  background:#020b12d9;
  backdrop-filter:blur(8px)
}

.dress-dialog img {
  width:100%
}

.dress-dialog p {
  font-size:14px;
  text-align:center;
  padding:15px 20px 0
}

.dialog-close {
  position:sticky;
  top:12px;
  float:right;
  margin:12px 12px -56px 0;
  z-index:2;
  border:1px solid var(--line);
  border-radius:50%;
  height:44px;
  width:44px;
  background:#faf7f0ee;
  color:var(--ink);
  font-size:27px
}

.dress-dialog[open] {
  animation:enter .4s var(--ease)
}

#toast {
  position:fixed;
  left:50%;
  bottom:100px;
  transform:translate(-50%,15px);
  background:var(--ink);
  color:white;
  padding:13px 24px;
  border:1px solid #ddc39655;
  border-radius:6px;
  box-shadow:0 5px 30px #0003;
  opacity:0;
  pointer-events:none;
  z-index:200;
  font-size:14px;
  transition:opacity .25s,transform .25s;
  max-width:90%;
  text-align:center
}

#toast.show {
  opacity:1;
  transform:translate(-50%,0)
}

@keyframes hero-drift {
  from {
    transform:scale(1.02)
  }
  to {
    transform:scale(1.1) translate3d(-.8%,.4%,0)
  }
}

@keyframes haze {
  from {
    transform:translateX(-5%);
    opacity:.1
  }
  to {
    transform:translateX(5%);
    opacity:.4
  }
}

@keyframes enter {
  from {
    opacity:0;
    transform:translateY(26px);
    filter:blur(5px)
  }
  to {
    opacity:1;
    transform:translateY(0);
    filter:blur(0)
  }
}

@keyframes scroll-line {
  0% {
    top:-50%
  }
  100% {
    top:120%
  }
}

@media(min-width:1600px) {
  .hero-content {
    margin-left:calc((100vw - 1500px)/2)
  }
  .hero-image img {
    object-position:50% 59%
  }
}

@media(max-width:1050px) {
  .desktop-nav {
    gap:22px
  }
  .hero {
    min-height:830px
  }
  .hero-content {
    padding-left:6%;
    padding-right:6%;
    max-width:680px
  }
  .hero h1 {
    font-size:125px
  }
  .invitation {
    gap:7%;
    padding:95px 7%
  }
  .timeline-row {
    grid-template-columns:110px 1fr;
    gap:14px
  }
  .evening-grid {
    gap:6%
  }
  .evening-photo {
    margin-top:-100px
  }
  .dress-grid {
    gap:6%
  }
  .organizer-grid {
    gap:30px
  }
}

@media(max-width:760px) {
  html {
    scroll-padding-top:26px
  }
  .topbar {
    height:82px;
    padding:0 25px
  }
  .desktop-nav {
    display:none
  }
  .topbar-right {
    gap:16px
  }
  .header-date {
    font-size:12px
  }
  .icon-button {
    width:38px;
    height:38px
  }
  .hero {
    height:100svh;
    min-height:820px;
    max-height:1100px;
    align-items:flex-start
  }
  .hero-image img {
    object-position:center 60%;
    animation-duration:22s
  }
  .hero-shade {
    background:linear-gradient(180deg,rgba(2,14,26,.52),rgba(2,14,26,.28) 35%,rgba(2,14,26,.02) 50%,rgba(2,14,26,.4) 67%,rgba(2,14,26,.86))
  }
  .hero-content {
    width:100%;
    padding:128px 25px 0;
    max-width:none
  }
  .hero-intro {
    font-size:12px;
    letter-spacing:.17em;
    max-width:310px;
    margin:0 auto
  }
  .hero h1 {
    font-size:clamp(77px,20vw,120px);
    margin:19px 0 17px;
    line-height:1;
    gap:0 .17em
  }
  .hero h1 span:last-child {
    flex-basis:auto
  }
  .hero h1 i {
    font-size:.4em
  }
  .hero-poem {
    font-size:22px;
    max-width:320px;
    margin:auto
  }
  .hero-date {
    position:absolute;
    bottom:173px;
    left:20px;
    right:20px;
    margin:0
  }
  .hero-date strong {
    font-size:26px
  }
  .hero-date>span {
    font-size:12px
  }
  .hero .button {
    position:absolute;
    bottom:93px;
    left:50%;
    transform:translateX(-50%);
    animation-name:mobile-button-enter;
    white-space:nowrap;
    padding:14px 24px;
    min-height:52px
  }
  .hero .button:hover {
    transform:translateX(-50%)
  }
  .hero-bottom {
    bottom:35px;
    left:25px;
    right:25px;
    font-size:12px;
    gap:12px
  }
  .hero-bottom>span:last-child {
    display:none
  }
  .scroll-cue {
    height:25px
  }
  .hero-bottom .scroll-cue {
    margin-left:auto
  }
  .invitation {
    padding:78px 28px 68px;
    grid-template-columns:1fr;
    gap:55px
  }
  .invitation-copy {
    max-width:530px;
    margin:auto;
    text-align:center
  }
  .section-number {
    font-size:12px;
    margin-bottom:33px
  }
  .invitation .section-number {
    margin-bottom:25px
  }
  .invitation .tiny-star {
    margin-bottom:25px
  }
  .invitation .eyebrow {
    font-size:12px;
    letter-spacing:.16em
  }
  .invitation h2 {
    font-size:43px;
    line-height:1.15;
    letter-spacing:-.045em;
    margin:22px 0 25px
  }
  .invitation-copy>p:not(.eyebrow) {
    font-size:16px;
    line-height:1.9
  }
  .signature {
    font-size:26px
  }
  .portrait-frame {
    max-width:380px;
    width:88%;
    margin:auto;
    padding:10px;
    transform:rotate(-2deg)
  }
  .portrait-frame figcaption {
    font-size:19px
  }
  .countdown-section {
    padding:15px 18px 72px
  }
  .countdown-section .eyebrow {
    font-size:12px
  }
  .countdown {
    gap:12px;
    margin:22px 0 18px
  }
  .countdown strong {
    font-size:47px
  }
  .countdown span {
    font-size:12px;
    letter-spacing:.1em
  }
  .countdown>i {
    font-size:22px
  }
  .countdown-section .small-note {
    font-size:12px
  }
  .evening {
    padding:72px 28px 65px
  }
  .section-heading>.eyebrow {
    font-size:12px;
    letter-spacing:.16em
  }
  .section-heading h2 {
    font-size:52px
  }
  .section-heading>p:not(.eyebrow) {
    font-size:16px;
    margin-top:24px
  }
  .evening-grid {
    grid-template-columns:1fr;
    gap:44px;
    margin-top:46px
  }
  .timeline-row {
    grid-template-columns:102px 1fr;
    gap:12px;
    padding-left:19px;
    padding-bottom:38px
  }
  .timeline-row .time {
    font-size:23px
  }
  .timeline-row h3 {
    font-size:25px
  }
  .timeline-row p {
    font-size:14px;
    line-height:1.8
  }
  .time small {
    font-size:12px
  }
  .essential-tag {
    font-size:12px;
    letter-spacing:.1em
  }
  .evening-photo {
    margin:10px auto 0;
    width:100%;
    max-width:440px
  }
  .evening-photo img {
    aspect-ratio:3/4;
    object-position:center 63%;
    border-radius:180px 180px 2px 2px
  }
  .evening-photo figcaption {
    font-size:28px;
    left:25px;
    bottom:30px
  }
  .boarding-note {
    margin:35px 0 42px;
    padding:24px 20px;
    gap:14px
  }
  .note-icon {
    font-size:27px
  }
  .boarding-note h3 {
    font-size:25px
  }
  .boarding-note p {
    font-size:14px
  }
  .experience-row {
    grid-template-columns:1fr;
    gap:25px
  }
  .experience-row>div {
    display:grid;
    grid-template-columns:40px 1fr;
    gap:0 15px;
    padding-top:23px
  }
  .experience-number {
    grid-row:span 2;
    font-size:21px;
    margin-top:3px
  }
  .experience-row h3 {
    font-size:29px
  }
  .experience-row p {
    max-width:none;
    margin-top:8px;
    font-size:14px
  }
  .venue {
    padding:75px 0 55px
  }
  .venue-top {
    display:block;
    padding:0 28px 37px
  }
  .venue-address {
    padding-top:33px
  }
  .venue-address h3 {
    font-size:29px
  }
  .venue-address p {
    font-size:16px;
    margin-top:12px
  }
  .venue-address .button {
    margin-top:20px
  }
  .venue .section-heading .section-number {
    margin-bottom:30px
  }
  .gallery-topline {
    padding:0 28px 18px;
    gap:10px
  }
  .gallery-topline>.small-note {
    font-size:12px;
    max-width:140px
  }
  .gallery-controls {
    gap:10px
  }
  .gallery-controls>span {
    font-size:12px
  }
  .round-button {
    width:40px;
    height:40px
  }
  .gallery {
    padding-left:28px;
    padding-right:28px;
    gap:18px;
    scroll-padding-left:28px
  }
  .gallery figure {
    flex-basis:79%;
    min-width:0
  }
  .gallery img {
    aspect-ratio:3/4.2
  }
  .gallery figcaption {
    font-size:24px;
    padding-top:16px
  }
  .gallery-hint {
    font-size:12px;
    margin-top:15px
  }
  .dress {
    padding:0 28px 75px
  }
  .dress-intro {
    padding-top:60px
  }
  .dress-intro .eyebrow {
    font-size:12px
  }
  .dress-intro h2 {
    font-size:49px
  }
  .dress-intro>p:last-child {
    font-size:16px;
    line-height:1.9
  }
  .dress-grid {
    grid-template-columns:1fr;
    gap:40px;
    margin-top:35px
  }
  .dress-image {
    max-width:440px;
    margin:auto
  }
  .dress-rule {
    padding:26px 0
  }
  .dress-rule h3 {
    font-size:31px
  }
  .dress-rule p {
    font-size:16px
  }
  .rule-label {
    font-size:12px
  }
  .inspiration-note {
    padding-top:24px;
    gap:12px
  }
  .inspiration-note p {
    font-size:14px
  }
  .closing {
    padding:72px 28px 65px
  }
  .closing .eyebrow {
    font-size:12px;
    letter-spacing:.16em
  }
  .closing h2 {
    font-size:42px;
    line-height:1.15
  }
  .closing-content>p:not(.eyebrow):not(.closing-signature) {
    font-size:16px
  }
  .contact-box {
    padding:25px 20px;
    margin-top:28px
  }
  .contact-box h3 {
    font-size:26px
  }
  .contact-box p {
    font-size:14px
  }
  .contact-box .button {
    width:100%
  }
  .closing-signature {
    font-size:48px
  }
  .phone-link {
    font-size:15px
  }
  .closing .closing-signature+.eyebrow {
    font-size:12px
  }
  footer {
    padding:28px 28px 120px;
    flex-wrap:wrap;
    gap:15px
  }
  footer .monogram {
    font-size:27px
  }
  footer>span:nth-child(2) {
    font-size:16px
  }
  footer>span:last-child {
    flex-basis:100%;
    text-align:center;
    font-size:12px
  }
  .mobile-nav {
    display:flex;
    position:fixed;
    bottom:max(17px,env(safe-area-inset-bottom));
    left:50%;
    transform:translate(-50%,100px);
    width:calc(100% - 32px);
    max-width:480px;
    z-index:50;
    justify-content:space-between;
    gap:2px;
    padding:7px;
    background:#0a1c27e8;
    border:1px solid #ddc39644;
    border-radius:100px;
    color:#d5dad9;
    backdrop-filter:blur(20px);
    box-shadow:0 8px 30px #0004;
    transition:transform .7s var(--ease)
  }
  .mobile-nav.shown {
    transform:translate(-50%,0)
  }
  .mobile-nav a {
    font-size:12px;
    padding:12px 10px;
    border-radius:50px;
    flex:1;
    text-align:center;
    line-height:1.5;
    transition:color .3s,background .3s
  }
  .mobile-nav a.active {
    background:var(--gold);
    color:var(--ink)
  }
  .organizer {
    padding:0 23px 45px
  }
  .organizer-header {
    height:85px
  }
  .organizer-heading {
    padding:38px 0 30px
  }
  .organizer-heading h1 {
    font-size:45px
  }
  .organizer-heading .eyebrow {
    font-size:12px
  }
  .organizer-heading p:last-child {
    font-size:15px
  }
  .organizer-grid {
    grid-template-columns:1fr;
    gap:28px
  }
  .organizer form {
    padding:22px
  }
  .organizer form .button {
    padding:14px;
    font-size:13px
  }
  .organizer-preview {
    padding:30px 25px
  }
  .organizer-preview h2 {
    font-size:34px
  }
  .saved-heading {
    align-items:flex-start
  }
  .saved-heading h2 {
    font-size:27px;
    max-width:210px
  }
  .saved-heading>span {
    white-space:nowrap;
    font-size:12px;
    padding-top:7px
  }
  .invitation-item {
    display:block
  }
  .item-actions {
    margin-top:14px
  }
  .invitation-item h3 {
    font-size:24px
  }
  .result-actions .button {
    font-size:12px;
    padding:13px 10px
  }
  .generated-result h2 {
    font-size:30px
  }
  .organizer .signature {
    font-size:24px
  }
  .organizer-preview .eyebrow {
    font-size:12px
  }
  .dress-dialog {
    max-width:96vw;
    max-height:94dvh
  }
  .dress-dialog p {
    font-size:12px
  }
}

@media(max-width:370px) {
  .hero h1 {
    font-size:74px
  }
  .hero-content {
    padding-left:18px;
    padding-right:18px
  }
  .hero-poem {
    font-size:20px
  }
  .timeline-row {
    grid-template-columns:89px 1fr;
    gap:9px
  }
  .timeline-row .time {
    font-size:20px
  }
  .timeline-row h3 {
    font-size:23px
  }
  .countdown {
    gap:8px
  }
  .countdown strong {
    font-size:41px
  }
  .mobile-nav a {
    font-size:12px;
    padding:12px 7px
  }
  .closing h2 {
    font-size:37px
  }
  .invitation h2 {
    font-size:37px
  }
  .dress-intro h2 {
    font-size:43px
  }
}

@keyframes mobile-button-enter {
  from {
    opacity:0;
    translate:0 20px;
    filter:blur(5px)
  }
  to {
    opacity:1;
    translate:0 0;
    filter:blur(0)
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .motion-ready .reveal:not(.visible) {
    opacity:1;
    translate:none;
    filter:none
  }
}

/* Keep frequently used controls and supporting text comfortable on phones. */
.mobile-nav a,.image-expand,.field-help,.item-actions button,.item-actions a,.result-actions .button,.organizer form .button {
  font-size:14px
}

.timeline-row p,.boarding-note p,.experience-row p,.contact-box p {
  font-size:16px
}

.storage-note {
  font-size:14px
}

@media(max-width:760px) {
  .motion-paused .hero .button {
    transform:translateX(-50%)
  }
}

@media(max-width:370px) {
  .mobile-nav {
    width:calc(100% - 18px);
    padding:5px
  }
  .mobile-nav a {
    padding:12px 6px;
    font-size:12px
  }
}

/* Movimiento adicional, diseñado para pantallas táctiles.
   Los fondos tienen margen de sobra: su desplazamiento no descubre los bordes. */
.hero-image,.closing-image {
  inset:-32px;
  transform:translate3d(0,var(--depth-y,0px),0)
}

.reveal {
  transition-delay:var(--reveal-delay,0ms)
}

.hero.media-offscreen .hero-image img,.hero.media-offscreen .light-haze {
  animation-play-state:paused
}

.tab-hidden *,.tab-hidden *::before,.tab-hidden *::after {
  animation-play-state:paused!important
}

/* Un destello breve al tocar los botones; nunca se reproduce en bucle. */
.button {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  touch-action:manipulation
}




/* Mantener estos overrides al añadir efectos. Reducir movimiento es obligatorio. */
.motion-paused .hero-image,.motion-paused .closing-image {
  transform:none
}

.motion-paused .button::after {
  display:none
}

.motion-paused *::before,.motion-paused *::after {
  animation-play-state:paused!important
}

@media(prefers-reduced-motion:reduce) {
  .hero-image,.closing-image {
    transform:none!important
  }
  .button::after {
    display:none
  }
  .reveal {
    transition-delay:0ms!important
  }
}

/* ============================================================
   Capa 2026: tipografía nueva, fondos claros, fotografías más
   vivas, apertura animada, idioma y ampliación de imágenes.
   Se añade al final para no alterar la base ya aprobada.
   ============================================================ */

/* El fondo del documento evita franjas oscuras al rebotar el scroll. */
html {
  background:var(--ink);
  overflow-x:clip
}

body {
  overflow-x:clip;
  background:var(--paper)
}

/* Cormorant tiene un ojo pequeño: se compensa con peso y tamaño. */
h1,h2,h3,.signature,.closing-signature,.monogram,.intro-name {
  font-weight:500
}

h2 {
  font-size:clamp(46px,5.6vw,88px);
  letter-spacing:-.03em
}

h3 {
  font-size:29px;
  letter-spacing:-.01em
}

.hero-poem,.portrait-frame figcaption,.gallery figcaption,.evening-photo figcaption,.timeline-row .time,.experience-number {
  font-weight:500
}

.eyebrow,.section-number,.header-date,.essential-tag,.rule-label,.hero-date>span,.countdown span {
  font-weight:400
}

/* --- Fondos: la invitación alterna claro, bruma, oro suave y navy. --- */
.section-mist {
  background:linear-gradient(180deg,var(--paper),var(--mist) 45%,var(--paper))
}

.section-gold {
  background:linear-gradient(170deg,var(--sand),#fdf8ef 55%,var(--sand));
  color:var(--ink)
}

.section-dark {
  background:linear-gradient(180deg,var(--deep),var(--navy) 55%,var(--ink))
}

/* Transición suave entre una sección clara y la siguiente oscura. */
.evening:before,.closing:before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:120px;
  background:linear-gradient(var(--paper),transparent);
  opacity:.14;
  pointer-events:none;
  z-index:1
}

.guestlist-note {
  padding:0 max(7%,calc((100vw - 1260px)/2)) 90px
}

.named-card {
  display:flex;
  gap:20px;
  align-items:flex-start;
  max-width:920px;
  margin:auto;
  padding:30px 34px;
  border:1px solid var(--line);
  border-radius:4px;
  background:linear-gradient(135deg,#fffdf8,#f4eee1);
  box-shadow:0 20px 50px -40px #0a1c2799
}

.named-icon {
  color:var(--gold-dark);
  font-size:26px;
  line-height:1.3
}

.named-card h3 {
  font-size:28px;
  margin-bottom:10px
}

.named-card p {
  color:#5b625e;
  font-size:16px;
  line-height:1.85
}

.named-soft {
  margin-top:14px;
  font-size:14px;
  color:var(--muted)
}

/* --- Todo incluido --- */
.included {
  padding:95px max(7%,calc((100vw - 1260px)/2))
}

.included-heading {
  max-width:640px
}

.included-heading .eyebrow {
  color:var(--gold-dark);
  margin-bottom:18px
}

.included-heading h2 {
  font-size:clamp(42px,4.6vw,66px)
}

.included-heading>p {
  margin-top:24px;
  color:#5b625e;
  line-height:1.9
}

.included-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  margin-top:55px
}

.included-grid>div {
  padding:26px 24px;
  background:#fffdf8cc;
  border:1px solid var(--line);
  border-radius:4px;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)
}

.included-grid>div:hover {
  transform:translateY(-5px);
  box-shadow:0 26px 50px -38px #0a1c27aa
}

.included-icon {
  display:block;
  color:var(--gold-dark);
  font-size:20px;
  margin-bottom:16px
}

.included-grid h3 {
  font-size:26px
}

.included-grid p {
  margin-top:10px;
  font-size:15px;
  line-height:1.8;
  color:#5b625e
}

/* --- Fotografías: más contraste, marco fino y entrada con acercamiento. --- */
.portrait-frame,.evening-photo,.gallery figure,.dress-image {
  position:relative
}

.portrait-frame img,.evening-photo img,.gallery img,.dress-image img,.closing-image img,.hero-image img {
  filter:saturate(1.08) contrast(1.04)
}

.portrait-frame img,.gallery img,.dress-image img {
  box-shadow:0 26px 60px -34px #0a1c27b3
}

.gallery figure {
  transition:transform .7s var(--ease)
}

.gallery img {
  border-radius:4px;
  transition:transform 1.1s var(--ease),filter .6s
}

.gallery figure:hover img,.gallery figure:focus-within img {
  transform:scale(1.03);
  filter:saturate(1.16) contrast(1.06)
}

.gallery figcaption b {
  font-weight:500
}

/* Acercamiento suave al entrar en pantalla: solo transform, nunca layout. */
.motion-ready .reveal:not(.visible) img {
  transform:scale(1.06)
}

.reveal img {
  transition:transform 1.6s var(--ease)
}

.reveal.visible img {
  transform:scale(1)
}

.portrait-frame:after,.dress-image:after {
  content:'';
  position:absolute;
  inset:5px;
  border:1px solid #ffffff4d;
  pointer-events:none
}

.evening-photo img {
  box-shadow:0 40px 80px -50px #000
}

/* Botón para ampliar cada fotografía. */
.expand-dot {
  position:absolute;
  right:16px;
  bottom:16px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid #ffffff73;
  background:#0a1c27a6;
  color:#fff;
  font-size:17px;
  backdrop-filter:blur(8px);
  transition:background .3s,transform .4s var(--ease);
  z-index:3
}

.expand-dot:hover {
  background:#0a1c27e0;
  transform:scale(1.06)
}

.portrait-frame .expand-dot {
  right:24px;
  bottom:86px
}

.evening-photo .expand-dot {
  bottom:auto;
  top:22px;
  right:22px
}

.gallery figure .expand-dot {
  bottom:80px
}

.gallery img,.portrait-frame img,.evening-photo img,.dress-image img {
  cursor:zoom-in
}

/* La vestimenta deja claro en la propia foto que es solo una idea. */
.dress-image figcaption {
  position:absolute;
  top:22px;
  left:22px;
  right:22px;
  z-index:2;
  font-family:var(--serif);
  font-style:italic;
  font-size:19px;
  color:#fff;
  text-shadow:0 2px 18px #0a1c27cc;
  pointer-events:none
}

.dress-image .image-expand {
  z-index:3
}

/* --- Diálogo de fotografía a pantalla casi completa. --- */
.photo-dialog {
  max-width:min(96vw,720px);
  max-height:94dvh;
  padding:0 0 14px;
  border:0;
  border-radius:6px;
  background:var(--ink);
  color:var(--paper);
  overflow:auto;
  box-shadow:0 30px 120px #000a
}

.photo-dialog::backdrop {
  background:#020b12e6;
  backdrop-filter:blur(10px)
}

.photo-dialog img {
  width:100%;
  border-radius:6px 6px 0 0
}

.photo-dialog p {
  padding:16px 22px 0;
  text-align:center;
  font-family:var(--serif);
  font-style:italic;
  font-size:19px
}

.photo-dialog p:empty {
  display:none
}

.photo-dialog .dialog-close {
  background:#0a1c27e6;
  color:var(--paper);
  border-color:#ffffff4d
}

.photo-dialog[open],.dress-dialog[open] {
  animation:dialog-in .45s var(--ease)
}

@keyframes dialog-in {
  from {
    opacity:0;
    transform:translateY(22px) scale(.97)
  }
  to {
    opacity:1;
    transform:none
  }
}

/* --- Selector de idioma --- */
.lang-switch {
  display:flex;
  padding:3px;
  border:1px solid #ffffff40;
  border-radius:100px;
  gap:2px
}

.lang-option {
  min-width:40px;
  min-height:34px;
  padding:4px 10px;
  border:0;
  border-radius:100px;
  background:transparent;
  color:inherit;
  font-size:12px;
  letter-spacing:.1em;
  transition:background .3s,color .3s
}

.lang-option[aria-pressed="true"] {
  background:var(--gold);
  color:var(--ink)
}

/* --- Apertura para los invitados --- */
.intro-active,.intro-active body {
  overflow:hidden
}

.intro {
  position:fixed;
  inset:0;
  z-index:300;
  display:grid;
  place-items:center;
  background:radial-gradient(ellipse at 50% 40%,#173650,#07151e 70%);
  color:var(--paper);
  text-align:center;
  padding:30px;
  transition:opacity .85s var(--ease),transform .85s var(--ease)
}

.intro-glow {
  position:absolute;
  inset:-20%;
  background:radial-gradient(circle at 50% 45%,#ddc39633,transparent 55%);
  animation:intro-glow 3.4s var(--ease) both
}

.intro-inner {
  position:relative;
  max-width:520px
}

.intro-monogram {
  display:block;
  font-family:var(--serif);
  font-size:44px;
  letter-spacing:-.06em;
  animation:intro-rise 1.1s var(--ease) both
}

.intro-monogram i {
  color:var(--gold);
  font-size:.62em;
  margin:0 4px
}

.intro-rule {
  display:block;
  width:120px;
  height:1px;
  margin:22px auto 26px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform-origin:center;
  animation:intro-rule 1.2s .35s var(--ease) both
}

.intro-eyebrow {
  font-size:12px;
  letter-spacing:.24em;
  color:#c9d3d6;
  animation:intro-rise 1.1s .5s var(--ease) both
}

.intro-name {
  font-family:var(--serif);
  font-size:clamp(38px,9vw,64px);
  line-height:1.15;
  letter-spacing:-.03em;
  margin:16px 0 20px;
  overflow-wrap:anywhere;
  animation:intro-rise 1.3s .7s var(--ease) both
}

.intro-date {
  font-size:12px;
  letter-spacing:.3em;
  color:var(--gold);
  animation:intro-rise 1.2s .95s var(--ease) both
}

.intro-skip {
  position:absolute;
  bottom:max(34px,env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  min-height:46px;
  padding:12px 30px;
  border-radius:100px;
  border:1px solid #ffffff4d;
  background:#ffffff14;
  color:var(--paper);
  font-size:13px;
  letter-spacing:.12em;
  backdrop-filter:blur(8px);
  animation:intro-rise 1s 1.5s var(--ease) both
}

.intro.leaving {
  opacity:0;
  transform:scale(1.06);
  pointer-events:none
}

@keyframes intro-rise {
  from {
    opacity:0;
    transform:translateY(20px);
    filter:blur(6px)
  }
  to {
    opacity:1;
    transform:none;
    filter:blur(0)
  }
}

@keyframes intro-rule {
  from {
    transform:scaleX(0);
    opacity:0
  }
  to {
    transform:scaleX(1);
    opacity:1
  }
}

@keyframes intro-glow {
  from {
    opacity:0;
    transform:scale(.8)
  }
  to {
    opacity:1;
    transform:scale(1)
  }
}

/* Chispas muy tenues sobre la portada; seis elementos, sin bucle en JS. */
.hero-sparks {
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden
}

.hero-sparks i {
  position:absolute;
  bottom:-10px;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#f4dcae;
  opacity:0;
  animation:spark 13s linear infinite
}

.hero-sparks i:nth-child(1) { left:12%; animation-delay:0s }
.hero-sparks i:nth-child(2) { left:29%; animation-delay:2.5s }
.hero-sparks i:nth-child(3) { left:47%; animation-delay:5s; width:2px; height:2px }
.hero-sparks i:nth-child(4) { left:66%; animation-delay:7.5s }
.hero-sparks i:nth-child(5) { left:81%; animation-delay:10s; width:2px; height:2px }
.hero-sparks i:nth-child(6) { left:93%; animation-delay:12s }

@keyframes spark {
  0% { transform:translateY(0) scale(.6); opacity:0 }
  12% { opacity:.75 }
  80% { opacity:.35 }
  100% { transform:translateY(-78vh) scale(1); opacity:0 }
}

/* --- Lugar: dirección y mapa --- */
.address-copy {
  display:block;
  margin-top:18px;
  padding:6px 0;
  min-height:40px;
  background:none;
  border:0;
  color:var(--gold-dark);
  text-align:left
}

.gallery-hint {
  letter-spacing:.16em
}

/* --- Panel de Jesús: creación por lotes, filtro y aviso de origen. --- */
.origin-warning {
  margin:0 0 26px;
  padding:14px 18px;
  border:1px solid #c58a3f66;
  border-left-width:3px;
  background:#f8efdd;
  font-size:14px;
  line-height:1.7;
  color:#6b4a1c
}

.bulk-panel {
  margin-top:18px;
  padding:18px 22px;
  border:1px solid var(--line);
  background:#fffdf9
}

.bulk-panel summary {
  cursor:pointer;
  font-size:15px;
  font-weight:500;
  min-height:32px;
  padding:4px 0
}

.bulk-panel[open] summary {
  margin-bottom:16px
}

.bulk-panel textarea {
  width:100%;
  font:inherit;
  font-size:16px;
  padding:12px 14px;
  border:1px solid #bcbaaf;
  border-radius:3px;
  background:#fff;
  color:var(--ink);
  resize:vertical;
  min-height:120px
}

.bulk-actions {
  display:flex;
  gap:10px;
  margin-top:14px
}

.bulk-actions .button {
  flex:1;
  padding:13px 14px;
  gap:6px
}

.filter-label {
  display:block;
  font-size:13px;
  color:var(--muted);
  margin-bottom:8px
}

#filter-input {
  width:100%;
  max-width:420px;
  height:48px;
  margin-bottom:22px;
  padding:10px 14px;
  border:1px solid #bcbaaf;
  border-radius:3px;
  background:#fff;
  color:var(--ink);
  font-size:16px
}

.result-actions {
  flex-wrap:wrap
}

.result-actions .button {
  min-width:130px
}

/* --- Ajuste móvil de todo lo nuevo --- */
@media(max-width:760px) {
  .topbar {
    padding:0 18px
  }
  .topbar-right {
    gap:10px
  }
  .header-date {
    display:none
  }
  .lang-option {
    min-width:36px;
    padding:4px 8px
  }
  .guestlist-note {
    padding:0 22px 60px
  }
  .named-card {
    flex-direction:column;
    gap:12px;
    padding:24px 22px
  }
  .named-card h3 {
    font-size:26px
  }
  .named-card p {
    font-size:15px
  }
  .included {
    padding:70px 22px
  }
  .included-heading h2 {
    font-size:42px
  }
  .included-heading>p {
    font-size:16px
  }
  .included-grid {
    grid-template-columns:1fr;
    gap:14px;
    margin-top:34px
  }
  .included-grid>div {
    padding:22px 20px
  }
  .included-grid h3 {
    font-size:24px
  }
  .included-icon {
    margin-bottom:10px
  }
  .invitation,.evening,.dress,.closing {
    padding-left:22px;
    padding-right:22px
  }
  .venue-top,.gallery-topline {
    padding-left:22px;
    padding-right:22px
  }
  .gallery {
    padding-left:22px;
    padding-right:22px;
    scroll-padding-left:22px
  }
  .expand-dot {
    width:42px;
    height:42px;
    right:12px;
    bottom:12px
  }
  .portrait-frame .expand-dot {
    right:18px;
    bottom:78px
  }
  .gallery figure .expand-dot {
    bottom:72px
  }
  .dress-image figcaption {
    font-size:17px;
    top:18px;
    left:18px;
    right:18px
  }
  .photo-dialog {
    max-width:96vw
  }
  .photo-dialog p {
    font-size:16px
  }
  .intro-monogram {
    font-size:38px
  }
  .intro-eyebrow {
    letter-spacing:.2em
  }
  .address-copy {
    font-size:15px
  }
  .bulk-panel {
    padding:16px
  }
  .bulk-actions {
    flex-direction:column
  }
  .result-actions {
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .result-actions .button {
    min-width:0
  }
  .result-actions .button:last-child {
    grid-column:span 2
  }
}

@media(max-width:370px) {
  .topbar {
    padding:0 14px
  }
  .monogram {
    font-size:26px
  }
  .lang-option {
    min-width:32px;
    padding:4px 6px;
    font-size:11px
  }
  .icon-button {
    width:34px;
    height:34px
  }
  .included-heading h2 {
    font-size:37px
  }
  .named-card h3 {
    font-size:24px
  }
}

/* El movimiento reducido y la pausa manual también gobiernan lo nuevo. */
.motion-paused .hero-sparks,.motion-paused .intro {
  display:none
}

.motion-paused .reveal img,.motion-paused .gallery img {
  transform:none!important;
  transition:none!important
}

.hero.media-offscreen .hero-sparks i {
  animation-play-state:paused
}

@media(prefers-reduced-motion:reduce) {
  .hero-sparks,.intro {
    display:none!important
  }
  .reveal img,.gallery img {
    transform:none!important
  }
}

/* Correcciones tras la revisión en Edge (móvil, tablet y PC). */

/* El pie sobre la vestimenta se lee sobre cualquier zona de la foto. */
.dress-image figcaption {
  display:inline-block;
  left:18px;
  right:auto;
  max-width:calc(100% - 36px);
  padding:8px 16px;
  border-radius:100px;
  background:#0a1c27d9;
  backdrop-filter:blur(6px);
  font-size:16px;
  text-shadow:none
}

/* Tablet: nada de columnas estrechas heredadas del escritorio. */
@media(max-width:1100px) {
  .included-grid {
    grid-template-columns:repeat(2,1fr);
    gap:20px
  }
}

@media(min-width:761px) and (max-width:900px) {
  .invitation {
    grid-template-columns:1fr;
    gap:50px
  }
  .invitation-copy {
    max-width:none
  }
  .portrait-frame {
    max-width:420px;
    margin:auto
  }
  .evening-grid {
    grid-template-columns:1fr;
    gap:42px
  }
  .evening-photo {
    margin:0 auto;
    max-width:480px
  }
  .venue-top {
    display:block
  }
  .venue-address {
    padding-top:30px
  }
  .dress-grid {
    grid-template-columns:1fr;
    gap:40px
  }
  .dress-image {
    max-width:460px;
    margin:auto
  }
  .organizer-grid {
    grid-template-columns:1fr
  }
}

/* La aclaración viaja con el botón, al pie de la foto: siempre se ve junta. */
.dress-image figcaption {
  top:auto;
  bottom:84px;
  left:50%;
  right:auto;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100% - 32px);
  text-align:center
}

@media(max-width:760px) {
  .dress-image figcaption {
    bottom:78px;
    font-size:15px
  }
}

/* Selector de idioma del pie: mismo control, alcanzable al final de la página. */
.footer-lang {
  border-color:#ffffff33
}

@media(max-width:760px) {
  .footer-lang {
    order:-1
  }
  footer>span:last-of-type {
    flex-basis:100%;
    text-align:left
  }
}

/* ============================================================
   Capa de movimiento y acabado. Todo se apoya en transform,
   opacity y clip-path, comparte el observador de entradas y
   se apaga con el botón de pausa y con movimiento reducido.
   ============================================================ */

body {
  text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%
}

/* Títulos palabra por palabra: 55 ms entre palabras, tope de 255 ms. */
.word {
  display:inline-block;
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
  transition-delay:var(--word-delay,0ms)
}

.motion-ready .reveal:not(.visible) .word {
  opacity:0;
  transform:translateY(24px) rotate(1.2deg);
  filter:blur(6px)
}

.reveal.visible .word {
  opacity:1;
  transform:none;
  filter:blur(0)
}

/* Las fotografías se descubren de arriba abajo al entrar en pantalla. */
.portrait-frame img,.evening-photo img,.dress-image img,.included-grid img {
  transition:transform 1.6s var(--ease),clip-path 1.4s var(--ease),filter .6s
}

.motion-ready .portrait-frame:not(.visible) img,.motion-ready .evening-photo:not(.visible) img,.motion-ready .dress-image:not(.visible) img {
  clip-path:inset(0 0 100% 0)
}

.portrait-frame.visible img,.evening-photo.visible img,.dress-image.visible img {
  clip-path:inset(0 0 0 0)
}

/* La línea del horario se dibuja hacia abajo y el punto aparece con ella. */
.timeline-row {
  border-left-color:transparent
}

.timeline-row:before {
  content:'';
  position:absolute;
  left:-1px;
  top:0;
  bottom:0;
  width:1px;
  background:linear-gradient(#ddc39655,#ddc39622);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform 1.2s var(--ease);
  transition-delay:var(--reveal-delay,0ms)
}

.timeline-row.visible:before {
  transform:scaleY(1)
}

.timeline-row:last-child:before {
  display:none
}

.timeline-row.visible .timeline-point {
  animation:point-pop .7s var(--ease) both;
  animation-delay:var(--reveal-delay,0ms)
}

@keyframes point-pop {
  from {
    transform:scale(0);
    opacity:0
  }
  60% {
    transform:scale(1.5)
  }
  to {
    transform:scale(1);
    opacity:1
  }
}

/* Un halo muy tenue señala la hora crítica del cierre de compuertas. */
.departure .timeline-point:after {
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:50%;
  border:1px solid var(--gold);
  animation:halo 3.4s var(--ease) infinite
}

@keyframes halo {
  0% { transform:scale(.7); opacity:.75 }
  70% { transform:scale(2.6); opacity:0 }
  100% { transform:scale(2.6); opacity:0 }
}

/* El número de sección estira su línea dorada al entrar. */
.section-number {
  position:relative;
  padding-bottom:14px
}

.section-number:after {
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:64px;
  height:1px;
  background:linear-gradient(90deg,var(--gold-dark),transparent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.1s .2s var(--ease)
}

.section-dark .section-number:after {
  background:linear-gradient(90deg,var(--gold),transparent)
}

.reveal.visible .section-number:after,.visible .section-number:after {
  transform:scaleX(1)
}

.invitation-copy .section-number:after {
  left:50%;
  transform:translateX(-50%) scaleX(0);
  transform-origin:center
}

.invitation-copy.visible .section-number:after {
  transform:translateX(-50%) scaleX(1)
}

/* La cuenta regresiva late brevemente cada vez que cambia un número. */
.countdown strong.tick {
  animation:tick .45s var(--ease)
}

@keyframes tick {
  from {
    transform:translateY(-6px) scale(1.04);
    opacity:.55;
    filter:blur(2px)
  }
  to {
    transform:none;
    opacity:1;
    filter:blur(0)
  }
}

/* Micro-respuestas al tocar: nada se mueve más de lo necesario. */
.button:not(.button-glass):active,.round-button:active,.expand-dot:active,.lang-option:active {
  transform:scale(.96)
}

.mobile-nav a {
  transition:color .3s,background .45s var(--ease),transform .3s var(--ease)
}

.mobile-nav a:active {
  transform:scale(.94)
}

.mobile-nav a.active {
  animation:pill-pop .55s var(--ease)
}

@keyframes pill-pop {
  from {
    transform:scale(.9);
    opacity:.6
  }
  to {
    transform:scale(1);
    opacity:1
  }
}

.named-card,.experience-row>div,.dress-rule {
  transition:transform .7s var(--ease)
}

.named-card:hover,.experience-row>div:hover {
  transform:translateY(-4px)
}

.included-icon {
  transition:transform .8s var(--ease)
}

.included-grid>div:hover .included-icon {
  transform:rotate(90deg) scale(1.15)
}

.dialog-close {
  transition:transform .5s var(--ease),background .3s
}

.dialog-close:hover {
  transform:rotate(90deg)
}

.monogram {
  transition:opacity .4s,transform .5s var(--ease)
}

.monogram:hover {
  transform:translateY(-2px)
}

#toast {
  transition:opacity .3s var(--ease),transform .45s var(--ease)
}

#toast.show {
  transform:translate(-50%,0) scale(1)
}

/* Firma y remates: una aparición un poco más lenta que el texto. */
.signature,.closing-signature {
  transition:opacity 1.4s .25s var(--ease),transform 1.4s .25s var(--ease)
}

.motion-ready .reveal:not(.visible) .signature,.motion-ready .reveal:not(.visible) .closing-signature {
  opacity:0;
  transform:translateY(14px)
}

/* Animaciones ligadas al scroll en los navegadores que las soportan
   (Edge y Chrome). No ocupan el hilo principal y se apagan igual que el resto. */
@supports (animation-timeline:view()) {
  @media (prefers-reduced-motion:no-preference) {
    html:not(.motion-paused) .gallery figure {
      animation:card-in linear both;
      animation-timeline:view(inline);
      animation-range:entry 5% entry 80%
    }
    html:not(.motion-paused) .included-grid>div {
      animation:card-rise linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 45%
    }
  }
}

@keyframes card-in {
  from {
    opacity:.25;
    transform:translateY(16px) scale(.95)
  }
  to {
    opacity:1;
    transform:none
  }
}

@keyframes card-rise {
  from {
    opacity:.35;
    transform:translateY(26px)
  }
  to {
    opacity:1;
    transform:none
  }
}

/* Texto un punto más contrastado en pantallas pequeñas. */
.invitation-copy>p:not(.eyebrow),.dress-rule p,.included-grid p,.named-card p,.inspiration-note p {
  color:#4f5653
}

/* Todo lo anterior obedece a la pausa manual y a movimiento reducido. */
.motion-paused .word,.motion-paused .signature,.motion-paused .closing-signature {
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  transition:none!important
}

.motion-paused .timeline-row:before {
  transform:scaleY(1)!important;
  transition:none!important
}

.motion-paused .section-number:after {
  transform:scaleX(1)!important
}

.motion-paused .invitation-copy .section-number:after {
  transform:translateX(-50%) scaleX(1)!important
}

.motion-paused .departure .timeline-point:after,.motion-paused .countdown strong.tick {
  animation:none!important
}

.motion-paused .portrait-frame img,.motion-paused .evening-photo img,.motion-paused .dress-image img {
  clip-path:none!important
}

@media (prefers-reduced-motion:reduce) {
  .word,.signature,.closing-signature {
    opacity:1!important;
    transform:none!important;
    filter:none!important
  }
  .timeline-row:before {
    transform:scaleY(1)!important
  }
  .section-number:after {
    transform:scaleX(1)!important
  }
  .invitation-copy .section-number:after {
    transform:translateX(-50%) scaleX(1)!important
  }
  .departure .timeline-point:after {
    animation:none!important
  }
  .portrait-frame img,.evening-photo img,.dress-image img {
    clip-path:none!important
  }
}

/* Cifras alineadas: horas y cuenta regresiva deben leerse de un vistazo. */
.countdown strong,.timeline-row .time,.hero-date strong,.gallery figcaption span,#gallery-counter,.intro-date,.header-date,.phone-link,.venue-address p {
  font-variant-numeric:lining-nums tabular-nums
}

/* ============================================================
   Capa WOW: bienvenida por telón, luces continuas, separadores
   que se dibujan y transiciones entre secciones.
   Todo vive en transform, opacity, clip-path y stroke-dashoffset.
   Cada efecto continuo se detiene fuera de pantalla, con el botón
   de pausa y con prefers-reduced-motion.
   ============================================================ */

/* ---------- 1. La bienvenida ----------
   Guion: una costura de luz cruza la pantalla, el telón respira, el
   sello dorado se dibuja alrededor del monograma, el nombre del
   invitado llega letra a letra y al final el telón se abre en dos. */
.intro {
  background:transparent;
  padding:30px
}

.intro-panel {
  position:absolute;
  left:0;
  right:0;
  background:linear-gradient(180deg,#05111a,#123249 65%,#07151e);
  transition:transform 1.25s var(--ease);
  will-change:transform
}

.intro-panel-top {
  top:0;
  bottom:50%;
  animation:panel-settle 1.6s var(--ease) both
}

.intro-panel-bottom {
  top:50%;
  bottom:0;
  animation:panel-settle 1.6s var(--ease) both reverse
}

@keyframes panel-settle {
  from { transform:translateY(-1.5%) }
  to { transform:translateY(0) }
}

/* La costura de luz que abre la escena. */
.intro-seam {
  position:absolute;
  top:50%;
  left:50%;
  width:min(76vw,560px);
  height:1px;
  transform:translate(-50%,-50%) scaleX(0);
  background:linear-gradient(90deg,transparent,#ffe7b9,#ddc396,#ffe7b9,transparent);
  box-shadow:0 0 22px 2px #ddc39666;
  animation:seam 2.4s var(--ease) both
}

@keyframes seam {
  0% { transform:translate(-50%,-50%) scaleX(0); opacity:0 }
  22% { transform:translate(-50%,-50%) scaleX(1); opacity:1 }
  70% { opacity:.5 }
  100% { transform:translate(-50%,-50%) scaleX(1); opacity:0 }
}

.intro-glow {
  animation:intro-glow 3.4s var(--ease) both
}

.intro-inner {
  transition:opacity .55s var(--ease),transform 1s var(--ease)
}

/* El sello: el anillo se dibuja alrededor del monograma, nunca lo tapa. */
.intro-mark {
  position:relative;
  display:inline-grid;
  place-items:center;
  width:190px;
  height:190px;
  margin-bottom:-14px
}

.intro-ring {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:rotate(-90deg);
  overflow:visible;
  pointer-events:none
}

.intro-ring circle {
  fill:none;
  stroke:#ddc396;
  stroke-width:.8;
  stroke-linecap:round;
  stroke-dasharray:390;
  stroke-dashoffset:390;
  opacity:.55;
  animation:ring-draw 2.2s .5s var(--ease) both
}

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

/* Brillo dorado que cruza el monograma de la apertura. */
.intro-monogram {
  background:linear-gradient(100deg,#faf7f0 30%,#ffe9bb 45%,#ddc396 52%,#faf7f0 68%);
  background-size:280% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:intro-rise 1.2s .35s var(--ease) both,sheen 5s 1.4s var(--ease) infinite
}

.intro-monogram i {
  -webkit-text-fill-color:var(--gold)
}

@keyframes sheen {
  0% { background-position:120% 0 }
  55%,100% { background-position:-60% 0 }
}

.intro-rule {
  animation-delay:1.1s
}

.intro-eyebrow {
  animation-delay:1.35s
}

.intro-date {
  animation-delay:2.4s
}

.intro-skip {
  animation-delay:2.9s
}

/* El nombre del invitado entra letra a letra: es el corazón de la apertura. */
.intro-name {
  animation:none
}

.intro-name .ltr {
  display:inline-block;
  font-style:normal;
  animation:letter-in 1s var(--ease) both;
  animation-delay:calc(1.6s + var(--letter-delay,0ms))
}

@keyframes letter-in {
  from {
    opacity:0;
    transform:translateY(38px) rotate(7deg) scale(.82);
    filter:blur(10px)
  }
  60% {
    filter:blur(0)
  }
  to {
    opacity:1;
    transform:none;
    filter:blur(0)
  }
}

.intro-dust {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none
}

.intro-dust i {
  position:absolute;
  bottom:-12px;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#f0d9a8;
  opacity:0;
  animation:dust 7s linear infinite
}

.intro-dust i:nth-child(1) { left:8%;  animation-delay:.1s }
.intro-dust i:nth-child(2) { left:19%; animation-delay:1.4s; width:2px; height:2px }
.intro-dust i:nth-child(3) { left:29%; animation-delay:.7s }
.intro-dust i:nth-child(4) { left:38%; animation-delay:2.2s; width:2px; height:2px }
.intro-dust i:nth-child(5) { left:52%; animation-delay:.4s }
.intro-dust i:nth-child(6) { left:61%; animation-delay:1.8s; width:4px; height:4px }
.intro-dust i:nth-child(7) { left:72%; animation-delay:1s }
.intro-dust i:nth-child(8) { left:81%; animation-delay:2.6s; width:2px; height:2px }
.intro-dust i:nth-child(9) { left:89%; animation-delay:.2s }
.intro-dust i:nth-child(10){ left:95%; animation-delay:1.6s }

@keyframes dust {
  0% { transform:translateY(0) scale(.5); opacity:0 }
  15% { opacity:.85 }
  85% { opacity:.2 }
  100% { transform:translateY(-92vh) translateX(14px) scale(1); opacity:0 }
}

/* Salida: el telón se abre en dos y deja ver la portada. */
.intro.leaving {
  opacity:1;
  transform:none
}

.intro.leaving .intro-panel-top {
  transform:translateY(-101%);
  animation:none
}

.intro.leaving .intro-panel-bottom {
  transform:translateY(101%);
  animation:none
}

.intro.leaving .intro-inner,.intro.leaving .intro-skip {
  opacity:0;
  transform:scale(1.12);
  transition:opacity .45s var(--ease),transform .9s var(--ease)
}

.intro.leaving .intro-glow,.intro.leaving .intro-dust {
  opacity:0;
  transition:opacity .5s var(--ease)
}

.intro.leaving .intro-seam {
  animation:seam-flash .9s var(--ease) both
}

@keyframes seam-flash {
  0% { transform:translate(-50%,-50%) scaleX(1); opacity:1; width:min(76vw,560px) }
  100% { transform:translate(-50%,-50%) scaleX(1.6); opacity:0 }
}

/* La portada respira al descubrirse. Solo opacity: ni transform ni filter,
   porque ambos convertirían .hero-content en contenedor de los elementos
   absolutos (fecha y botón) y los descolocarían en el teléfono. */
.intro-done .hero-content {
  animation:hero-settle 1.3s var(--ease) both
}

@keyframes hero-settle {
  from { opacity:.35 }
  to { opacity:1 }
}

/* ---------- 2. Luz continua sobre la portada ---------- */
.hero-bokeh,.hero-pointer {
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none
}



.hero-bokeh i {
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle,#ffe2ac55,transparent 70%);
  filter:blur(1px);
  animation:bokeh 18s ease-in-out infinite alternate
}

.hero-bokeh i:nth-child(1) { width:90px;  height:90px;  left:6%;  top:58%; animation-delay:0s }
.hero-bokeh i:nth-child(2) { width:54px;  height:54px;  left:26%; top:70%; animation-delay:-4s }
.hero-bokeh i:nth-child(3) { width:120px; height:120px; left:58%; top:62%; animation-delay:-8s }
.hero-bokeh i:nth-child(4) { width:44px;  height:44px;  left:78%; top:74%; animation-delay:-12s }
.hero-bokeh i:nth-child(5) { width:70px;  height:70px;  left:90%; top:55%; animation-delay:-16s }

@keyframes bokeh {
  from { transform:translate3d(0,0,0) scale(.85); opacity:.35 }
  to { transform:translate3d(18px,-26px,0) scale(1.1); opacity:.75 }
}

/* Resplandor que sigue al ratón, solo en PC. */
.hero-pointer {
  background:radial-gradient(240px circle at var(--pointer-x,50%) var(--pointer-y,50%),#ffdfa233,transparent 70%);
  opacity:0;
  transition:opacity .6s var(--ease)
}

.hero.pointer-on .hero-pointer {
  opacity:1
}

/* Pétalos de luz muy lentos en el cierre. */
.closing-petals {
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none
}

.closing-petals i {
  position:absolute;
  top:-16px;
  width:7px;
  height:11px;
  border-radius:60% 40% 60% 40%;
  background:linear-gradient(#ffe9c0aa,#ddc39633);
  opacity:0;
  animation:petal 16s linear infinite
}

.closing-petals i:nth-child(1) { left:10%; animation-delay:0s }
.closing-petals i:nth-child(2) { left:24%; animation-delay:-3s }
.closing-petals i:nth-child(3) { left:38%; animation-delay:-6s }
.closing-petals i:nth-child(4) { left:53%; animation-delay:-9s }
.closing-petals i:nth-child(5) { left:67%; animation-delay:-11s }
.closing-petals i:nth-child(6) { left:81%; animation-delay:-13s }
.closing-petals i:nth-child(7) { left:93%; animation-delay:-15s }

@keyframes petal {
  0% { transform:translateY(0) rotate(0); opacity:0 }
  10% { opacity:.65 }
  90% { opacity:.2 }
  100% { transform:translateY(105vh) rotate(260deg); opacity:0 }
}

.closing.media-offscreen .closing-petals i {
  animation-play-state:paused
}

.hero.media-offscreen .hero-bokeh i {
  animation-play-state:paused
}

/* Las estrellitas parpadean como la luz de una vela. */
.tiny-star,.named-icon,.included-icon,.note-icon {
  animation:twinkle 6s var(--ease) infinite
}

@keyframes twinkle {
  0%,100% { opacity:1; transform:scale(1) }
  45% { opacity:.62; transform:scale(.94) }
}

/* Brillo que cruza el monograma de la cabecera y del pie. */
.monogram {
  background:linear-gradient(100deg,currentColor 35%,#ffeec6 48%,currentColor 62%);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:sheen 7s 2s var(--ease) infinite
}

.monogram span {
  -webkit-text-fill-color:var(--gold)
}

/* ---------- 3. Separadores que se dibujan entre secciones ---------- */
.flourish {
  background:var(--paper);
  padding:18px 24px 6px;
  display:flex;
  justify-content:center
}

.flourish svg {
  width:min(300px,72%);
  height:40px;
  overflow:visible
}

.flourish path,.flourish circle {
  fill:none;
  stroke:var(--gold-dark);
  stroke-width:1;
  opacity:.75
}

.flourish .fl-line {
  stroke-dasharray:110;
  stroke-dashoffset:110;
  transition:stroke-dashoffset 1.4s var(--ease)
}

.flourish .fl-leaf {
  stroke-dasharray:70;
  stroke-dashoffset:70;
  transition:stroke-dashoffset 1.2s .5s var(--ease)
}

.flourish .fl-dot {
  fill:var(--gold-dark);
  stroke:none;
  opacity:0;
  transition:opacity .7s .9s var(--ease)
}

.flourish.visible .fl-line,.flourish.visible .fl-leaf {
  stroke-dashoffset:0
}

.flourish.visible .fl-dot {
  opacity:.8
}

/* ---------- 4. Transición entre secciones ---------- */
.section-light,.section-mist,.section-gold,.section-dark {
  position:relative
}

.section-gold:before,.section-mist:before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#ddc39688,transparent);
  transform:scaleX(.2);
  opacity:0;
  transition:transform 1.6s var(--ease),opacity 1.2s var(--ease)
}

.section-gold.in-view:before,.section-mist.in-view:before {
  transform:scaleX(1);
  opacity:1
}

/* ---------- 5. Animaciones ligadas al scroll (Edge y Chrome) ---------- */
@supports (animation-timeline:view()) {
  @media (prefers-reduced-motion:no-preference) {
    html:not(.motion-paused) .evening-photo img,
    html:not(.motion-paused) .portrait-frame img,
    html:not(.motion-paused) .dress-image img {
      animation:photo-breathe linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%
    }
    html:not(.motion-paused) .gallery figure {
      animation:card-tilt linear both;
      animation-timeline:view(inline);
      animation-range:entry 0% entry 55%
    }
    html:not(.motion-paused) .timeline-row {
      animation:row-slide linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 45%
    }
    html:not(.motion-paused) .named-card,
    html:not(.motion-paused) .boarding-note,
    html:not(.motion-paused) .contact-box {
      animation:card-rise linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 42%
    }
    html:not(.motion-paused) .flourish svg {
      animation:flourish-open linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 50%
    }
  }
}

@keyframes photo-breathe {
  from { transform:scale(1.07) }
  to { transform:scale(1) }
}

@keyframes card-tilt {
  from { opacity:.5; transform:translateY(18px) scale(.95) rotate(1deg) }
  to { opacity:1; transform:none }
}

@keyframes row-slide {
  from { opacity:.5; transform:translateX(-12px) }
  to { opacity:1; transform:none }
}

@keyframes flourish-open {
  from { transform:scaleX(.55); opacity:.2 }
  to { transform:scaleX(1); opacity:1 }
}

/* ---------- 6. Navegación inferior con pastilla deslizante ---------- */
.mobile-nav {
  isolation:isolate
}

.nav-indicator {
  position:absolute;
  left:0;
  top:7px;
  bottom:7px;
  width:0;
  border-radius:50px;
  background:linear-gradient(120deg,var(--gold),#f0dcb4);
  box-shadow:0 6px 18px -8px #ddc396cc;
  opacity:0;
  z-index:-1;
  transition:transform .6s var(--ease),width .6s var(--ease),opacity .4s
}

.nav-indicator.ready {
  opacity:1
}

.mobile-nav a.active {
  background:transparent;
  color:var(--ink);
  animation:none
}

/* ---------- 7. Botones y tarjetas con más vida ---------- */
.button-gold,.button-ink {
  box-shadow:0 14px 34px -22px #000
}

/* El latido del botón vive en un pseudo-elemento: tocar su propiedad
   animation borraría la entrada que lo mantiene centrado en el teléfono. */
.hero .button-glass:before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(circle at 50% 130%,#ddc39666,transparent 72%);
  opacity:0;
  animation:cta-pulse 5s 2.4s ease-in-out infinite
}

@keyframes cta-pulse {
  0%,100% { opacity:0 }
  50% { opacity:1 }
}

.included-grid>div,.named-card {
  position:relative;
  overflow:hidden
}



.experience-row>div {
  position:relative
}

.experience-row>div:before {
  content:'';
  position:absolute;
  top:-1px;
  left:0;
  width:100%;
  height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.2s var(--ease);
  transition-delay:var(--reveal-delay,0ms)
}

.experience-row>div.visible:before {
  transform:scaleX(1)
}

/* La cuenta regresiva gira en 3D al cambiar. */
.countdown strong.tick {
  animation:flip .5s var(--ease)
}

@keyframes flip {
  from {
    opacity:.35;
    transform:perspective(400px) rotateX(-72deg) translateY(-4px);
    filter:blur(3px)
  }
  to {
    opacity:1;
    transform:none;
    filter:blur(0)
  }
}

.gallery figure:active img {
  transform:scale(.985)
}

/* ---------- 8. Pausa manual y movimiento reducido mandan sobre todo ---------- */
.motion-paused .hero-bokeh,.motion-paused .closing-petals,.motion-paused .intro-dust,.motion-paused .hero-pointer {
  display:none
}

.motion-paused .monogram,.motion-paused .intro-monogram {
  animation:none;
  background:none;
  -webkit-text-fill-color:currentColor
}

.motion-paused .tiny-star,.motion-paused .named-icon,.motion-paused .included-icon,.motion-paused .note-icon,.motion-paused .hero .button-glass:before {
  animation:none
}

.motion-paused .flourish .fl-line,.motion-paused .flourish .fl-leaf {
  stroke-dashoffset:0!important
}

.motion-paused .flourish .fl-dot {
  opacity:.8!important
}

.motion-paused .experience-row>div:before,.motion-paused .section-gold:before,.motion-paused .section-mist:before {
  transform:scaleX(1)!important;
  opacity:1!important
}

.motion-paused .nav-indicator {
  transition:none
}

@media (prefers-reduced-motion:reduce) {
  .hero-bokeh,.closing-petals,.intro-dust,.hero-pointer {
    display:none!important
  }
  .monogram,.intro-monogram {
    animation:none!important;
    background:none!important;
    -webkit-text-fill-color:currentColor!important
  }
  .tiny-star,.named-icon,.included-icon,.note-icon {
    animation:none!important
  }
  .flourish .fl-line,.flourish .fl-leaf {
    stroke-dashoffset:0!important
  }
  .flourish .fl-dot {
    opacity:.8!important
  }
  .experience-row>div:before,.section-gold:before,.section-mist:before {
    transform:scaleX(1)!important;
    opacity:1!important
  }
  .intro-name .ltr {
    animation:none!important;
    opacity:1!important
  }
}

/* ---------- 9. Ajustes móviles de la capa WOW ---------- */
@media (max-width:760px) {
  .intro-mark {
    width:164px;
    height:164px
  }
  .flourish {
    padding:10px 24px 0
  }
  .flourish svg {
    height:32px
  }
  .hero-bokeh i:nth-child(3) {
    width:90px;
    height:90px
  }
}

/* Aniversario: el 6 de noviembre también cumplen trece años juntos. */
.anniversary {
  padding:0 max(7%,calc((100vw - 1260px)/2)) 34px
}

.anniversary-card {
  position:relative;
  display:flex;
  gap:26px;
  align-items:center;
  max-width:920px;
  margin:auto;
  padding:32px 36px;
  border:1px solid var(--line);
  border-radius:4px;
  background:linear-gradient(120deg,#0f2b3f,#173b52 55%,#0d2334);
  color:var(--paper);
  overflow:hidden;
  box-shadow:0 30px 60px -45px #0a1c27
}

.anniversary-card:after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 12% 30%,#ddc39633,transparent 60%)
}

.anniversary-years {
  font-family:var(--serif);
  font-size:82px;
  line-height:1;
  font-weight:500;
  color:var(--gold);
  font-variant-numeric:lining-nums;
  flex-shrink:0;
  animation:twinkle 7s var(--ease) infinite
}

.anniversary-card .eyebrow {
  color:var(--gold);
  margin-bottom:12px
}

.anniversary-card h3 {
  font-size:30px;
  margin-bottom:14px
}

.anniversary-card p {
  color:#c8d2d6;
  font-size:16px;
  line-height:1.85
}

.anniversary-soft {
  margin-top:12px;
  font-family:var(--serif);
  font-style:italic;
  font-size:19px;
  color:#e7d9bd
}

@media(max-width:760px) {
  .anniversary {
    padding:0 22px 28px
  }
  .anniversary-card {
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    padding:26px 22px
  }
  .anniversary-years {
    font-size:64px
  }
  .anniversary-card h3 {
    font-size:27px
  }
  .anniversary-card p {
    font-size:15px
  }
  .anniversary-soft {
    font-size:18px
  }
}

/* ============================================================
   Pulido final: cielo estrellado sobre las fotos de noche,
   brillo en los nombres, imanes en los botones y foto que
   crece desde la miniatura. Sin botón de pausa: el sistema
   operativo sigue mandando con prefers-reduced-motion.
   ============================================================ */

/* ---------- Estrellas sobre las fotografías nocturnas ---------- */
.stars {
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:62%;
  z-index:2;
  pointer-events:none;
  overflow:hidden
}

.closing .stars {
  height:70%;
  z-index:-1
}

.stars i {
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 6px 1px #ffeec688;
  opacity:0;
  animation:star-twinkle 5.5s ease-in-out infinite
}

.stars i:nth-child(1)  { left:8%;  top:14%; animation-delay:0s }
.stars i:nth-child(2)  { left:17%; top:32%; animation-delay:-.9s; width:1.5px; height:1.5px }
.stars i:nth-child(3)  { left:26%; top:8%;  animation-delay:-1.8s }
.stars i:nth-child(4)  { left:34%; top:24%; animation-delay:-2.6s; width:3px; height:3px }
.stars i:nth-child(5)  { left:44%; top:11%; animation-delay:-3.4s }
.stars i:nth-child(6)  { left:52%; top:29%; animation-delay:-4.2s; width:1.5px; height:1.5px }
.stars i:nth-child(7)  { left:61%; top:6%;  animation-delay:-.5s }
.stars i:nth-child(8)  { left:69%; top:21%; animation-delay:-1.4s; width:3px; height:3px }
.stars i:nth-child(9)  { left:77%; top:35%; animation-delay:-2.2s }
.stars i:nth-child(10) { left:85%; top:12%; animation-delay:-3s; width:1.5px; height:1.5px }
.stars i:nth-child(11) { left:92%; top:27%; animation-delay:-3.8s }
.stars i:nth-child(12) { left:97%; top:17%; animation-delay:-4.6s; width:1.5px; height:1.5px }

@keyframes star-twinkle {
  0%,100% { opacity:0; transform:scale(.6) }
  18% { opacity:.95; transform:scale(1) }
  45% { opacity:.35; transform:scale(.85) }
  70% { opacity:.8; transform:scale(1) }
}

/* Una estrella fugaz muy de vez en cuando. */
.stars:after {
  content:'';
  position:absolute;
  top:12%;
  left:-10%;
  width:70px;
  height:1px;
  background:linear-gradient(90deg,transparent,#fff,transparent);
  opacity:0;
  animation:shooting 17s linear infinite
}

.closing .stars:after {
  animation-delay:8s
}

@keyframes shooting {
  0%,88% { opacity:0; transform:translate3d(0,0,0) rotate(14deg) }
  90% { opacity:.9 }
  97% { opacity:0; transform:translate3d(60vw,22vh,0) rotate(14deg) }
  100% { opacity:0 }
}

.evening-photo.media-offscreen .stars i,.evening-photo.media-offscreen .stars:after,
.closing.media-offscreen .stars i,.closing.media-offscreen .stars:after {
  animation-play-state:paused
}

/* ---------- Los nombres de la portada con brillo de oro ---------- */
.hero h1 span {
  background:linear-gradient(100deg,#fff 34%,#ffeec6 47%,#ddc396 53%,#fff 66%);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:sheen 9s 3s var(--ease) infinite
}

.hero h1 span:last-child {
  animation-delay:3.6s
}

/* Los remates en cursiva de los títulos llevan un punto de oro. */
h2 em {
  background:linear-gradient(100deg,currentColor 40%,#b98f4d 52%,currentColor 64%);
  background-size:260% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent
}

.section-dark h2 em,.closing h2 em,.anniversary-card h2 em {
  background-image:linear-gradient(100deg,currentColor 40%,#ffe2ab 52%,currentColor 64%)
}

.reveal.visible h2 em {
  animation:sheen 6s 1s var(--ease) 2
}

/* ---------- Botones magnéticos y foco más fino ---------- */
.button-ink,.button-gold,.round-button,.expand-dot {
  transform:var(--magnet,none);
  transition:background .3s,transform .45s var(--ease),box-shadow .3s
}

.button-ink:hover,.button-gold:hover {
  transform:var(--magnet,none) translateY(-3px)
}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,.gallery:focus-visible {
  outline:2px solid #c39a55;
  outline-offset:4px;
  border-radius:3px
}

/* ---------- Diálogo de foto: crece desde la miniatura ---------- */
.photo-dialog img,.dress-dialog img {
  transform-origin:center center;
  will-change:transform
}

.photo-dialog[open],.dress-dialog[open] {
  animation:dialog-fade .35s var(--ease)
}

@keyframes dialog-fade {
  from { opacity:0 }
  to { opacity:1 }
}

/* ---------- Ritmo y nitidez ---------- */
.intro {
  overflow:hidden
}

.eyebrow,.section-number,.rule-label,.essential-tag {
  letter-spacing:.22em
}

.hero-bottom,.header-date,.gallery-hint {
  letter-spacing:.2em
}

/* Los separadores ya no cargan con tanto aire: la página queda más corta. */
.flourish {
  padding:6px 24px 0
}

.guestlist-note {
  padding-bottom:70px
}

.evening {
  padding-bottom:95px
}

.countdown-section {
  padding-top:30px
}

/* Sombras algo más definidas para que las tarjetas se despeguen del fondo. */
.named-card,.included-grid>div,.anniversary-card {
  box-shadow:0 26px 48px -38px #0a1c2799
}

.timeline-row .time {
  letter-spacing:.01em
}

@media(max-width:760px) {
  .stars {
    height:58%
  }
  .evening {
    padding-bottom:78px
  }
}

/* ---------- El sistema operativo sigue mandando ---------- */
.motion-paused .stars,.motion-paused .stars:after {
  display:none
}

.motion-paused .hero h1 span,.motion-paused h2 em {
  animation:none;
  background:none;
  -webkit-text-fill-color:currentColor
}

.motion-paused .button-ink,.motion-paused .button-gold,.motion-paused .round-button,.motion-paused .expand-dot {
  transform:none!important
}

@media (prefers-reduced-motion:reduce) {
  .stars,.stars:after {
    display:none!important
  }
  .hero h1 span,h2 em {
    animation:none!important;
    background:none!important;
    -webkit-text-fill-color:currentColor!important
  }
}

/* Todo incluido en 2x2 también en el teléfono: cuatro frases de una línea. */
@media(max-width:760px) {
  .included-grid {
    grid-template-columns:1fr 1fr;
    gap:12px
  }
  .included-grid>div {
    padding:18px 16px
  }
  .included-grid h3 {
    font-size:22px;
    line-height:1.15
  }
  .included-grid p {
    font-size:14px;
    margin-top:8px
  }
  .included-icon {
    font-size:17px;
    margin-bottom:8px
  }
}

@media(max-width:370px) {
  .included-grid h3 {
    font-size:20px
  }
  .included-grid p {
    font-size:13px
  }
}

/* Ajustes de acabado: fundido entre la sección oscura y la dorada, y un brillo
   en los nombres que se repite pocas veces para no repintar texto grande sin fin. */
.section-gold {
  background-image:linear-gradient(180deg,#dfd2b9,#f3ead9 70px,transparent 130px),linear-gradient(170deg,var(--sand),#fdf8ef 55%,var(--sand))
}

.hero h1 span {
  animation-iteration-count:3
}

/* Capitán Bruno y la nota de a bordo: dos tarjetas breves y cálidas. */
.captain-card {
  display:flex;
  gap:22px;
  align-items:flex-start;
  margin-top:46px;
  padding:26px 30px;
  border:1px solid #ddc39655;
  border-radius:4px;
  background:linear-gradient(120deg,#ffffff0d,#ddc3960f);
  backdrop-filter:blur(4px)
}

.captain-wheel {
  font-size:34px;
  line-height:1.1;
  color:var(--gold);
  animation:wheel 22s linear infinite
}

@keyframes wheel {
  to { transform:rotate(360deg) }
}

.captain-card .eyebrow {
  color:var(--gold);
  margin-bottom:10px
}

.captain-card h3 {
  font-size:28px;
  color:var(--paper)
}

.captain-card p:last-child {
  margin-top:10px;
  color:#bcc6c9;
  font-size:16px;
  line-height:1.85
}

.onboard-note {
  display:flex;
  gap:20px;
  align-items:flex-start;
  max-width:920px;
  margin:46px auto 0;
  padding:26px 30px;
  border:1px solid var(--line);
  border-radius:4px;
  background:#fffdf8
}

.onboard-icon {
  font-size:26px;
  color:var(--gold-dark);
  line-height:1.3
}

.onboard-note .eyebrow {
  color:var(--gold-dark);
  margin-bottom:10px
}

.onboard-note h3 {
  font-size:27px
}

.onboard-note p:not(.eyebrow) {
  margin-top:10px;
  color:#4f5653;
  font-size:16px;
  line-height:1.85
}

.onboard-note p:last-child {
  font-size:15px;
  color:var(--muted)
}

@media(max-width:760px) {
  .captain-card,.onboard-note {
    flex-direction:column;
    gap:10px;
    margin-top:34px;
    padding:22px
  }
  .captain-card h3,.onboard-note h3 {
    font-size:25px
  }
  .captain-card p:last-child,.onboard-note p:not(.eyebrow) {
    font-size:15px
  }
  .onboard-note {
    margin-left:22px;
    margin-right:22px
  }
}

.motion-paused .captain-wheel {
  animation:none
}

@media (prefers-reduced-motion:reduce) {
  .captain-wheel {
    animation:none!important
  }
}

/* ============================================================
   Estilo royal: se retira el brillo diagonal (envejecía la
   página) y la apertura pasa a ser una tarjeta de invitación
   en marfil con escudo, orla dorada y salida en dos hojas.
   ============================================================ */

/* ---------- Fuera el barrido diagonal en textos ---------- */
.monogram,.hero h1 span,h2 em,.intro-monogram,
.section-dark h2 em,.closing h2 em,.anniversary-card h2 em,
.reveal.visible h2 em {
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  animation:none
}

/* El acento de los títulos pasa a ser color sólido, más noble. */
h2 em,h3 em {
  color:#9c7434
}

.section-dark h2 em,.closing h2 em,.anniversary-card h2 em,.evening h2 em {
  color:#e6d0a4
}

.hero h1 span {
  color:#fff;
  text-shadow:0 2px 30px rgba(4,18,29,.45)
}

.monogram span {
  -webkit-text-fill-color:var(--gold);
  color:var(--gold)
}

/* ---------- La apertura: una tarjeta de invitación ---------- */
.intro {
  padding:0;
  place-items:center;
  overflow:hidden
}

.intro-panel {
  background:linear-gradient(180deg,#fbf7ee,#f2ead9 62%,#efe6d2);
  box-shadow:none
}

.intro-panel-top {
  border-bottom:1px solid #c9a86740
}

.intro-seam {
  width:min(88vw,720px);
  background:linear-gradient(90deg,transparent,#c9a867,#8b6739,#c9a867,transparent);
  box-shadow:0 0 18px 1px #c9a86755
}

.intro-card {
  position:relative;
  z-index:1;
  width:min(86vw,520px);
  max-height:88svh;
  padding:clamp(34px,7vw,58px) clamp(24px,6vw,48px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  color:var(--ink);
  transition:opacity .6s var(--ease),transform 1s var(--ease)
}

/* Orla doble que se dibuja sola alrededor de la tarjeta. */
.intro-frame {
  position:absolute;
  inset:0;
  border:1px solid #b9924f80;
  outline:1px solid #b9924f40;
  outline-offset:7px;
  clip-path:inset(0 0 100% 0);
  animation:frame-draw 1.5s .25s var(--ease) both
}

@keyframes frame-draw {
  from { clip-path:inset(0 0 100% 0); opacity:0 }
  to { clip-path:inset(0 0 0 0); opacity:1 }
}

.intro-mark {
  width:clamp(128px,34vw,168px);
  height:clamp(128px,34vw,168px);
  margin:0 0 6px
}

.intro-crest {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible
}

.crest-ring,.crest-leaf,.crest-sprig {
  fill:none;
  stroke:#b9924f;
  stroke-width:1;
  stroke-linecap:round
}

.crest-ring {
  stroke-dasharray:470;
  stroke-dashoffset:470;
  animation:ring-draw 1.9s .5s var(--ease) both
}

.crest-ring-inner {
  stroke-dasharray:420;
  stroke-dashoffset:420;
  opacity:.5;
  animation:ring-draw-inner 1.9s .65s var(--ease) both
}

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

.crest-leaf,.crest-sprig {
  stroke-dasharray:60;
  stroke-dashoffset:60;
  animation:ring-draw 1.1s 1.15s var(--ease) both
}

.intro-monogram {
  position:relative;
  font-family:var(--serif);
  font-size:clamp(34px,9vw,44px);
  font-weight:500;
  letter-spacing:-.05em;
  color:var(--ink);
  animation:intro-rise 1.2s .55s var(--ease) both
}

.intro-monogram i {
  -webkit-text-fill-color:#a8823f;
  color:#a8823f;
  font-size:.62em;
  margin:0 3px
}

.intro-eyebrow {
  margin-top:18px;
  font-size:clamp(10px,2.6vw,12px);
  letter-spacing:.32em;
  color:#7b6a4e;
  animation:intro-rise 1.1s 1.25s var(--ease) both
}

.intro-name {
  margin:12px 0 0;
  font-family:var(--serif);
  font-size:clamp(34px,8.6vw,58px);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--ink);
  overflow-wrap:anywhere
}

.intro-name .ltr {
  animation-delay:calc(1.5s + var(--letter-delay,0ms))
}

@keyframes letter-in {
  from { opacity:0; transform:translateY(26px); filter:blur(7px) }
  to { opacity:1; transform:none; filter:blur(0) }
}

.intro-rule {
  width:clamp(120px,40%,190px);
  margin:22px 0 18px;
  height:1px;
  background:linear-gradient(90deg,transparent,#b9924f,transparent);
  animation:intro-rule 1.2s 2.1s var(--ease) both
}

.intro-date {
  font-size:clamp(10px,2.7vw,12px);
  letter-spacing:.3em;
  color:#8b7959;
  animation:intro-rise 1.1s 2.35s var(--ease) both
}

/* El botón: sobrio, en el flujo de la tarjeta y con área amplia. */
.intro-skip {
  position:static;
  transform:none;
  margin-top:clamp(26px,5vw,36px);
  min-height:52px;
  padding:14px 40px;
  border-radius:0;
  border:1px solid #a8823f;
  background:transparent;
  color:#6b5124;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.26em;
  text-transform:uppercase;
  backdrop-filter:none;
  transition:background .4s var(--ease),color .4s var(--ease),letter-spacing .4s var(--ease);
  animation:intro-rise 1s 2.6s var(--ease) both
}

.intro-skip:hover {
  background:#a8823f;
  color:#fdfaf3;
  letter-spacing:.3em
}

.intro-skip:active {
  transform:scale(.98)
}

/* Polvo de oro muy tenue sobre el marfil. */
.intro-dust i {
  background:#c9a867;
  opacity:0
}

/* Salida: las dos hojas se separan y la tarjeta se desvanece. */
.intro.leaving .intro-card {
  opacity:0;
  transform:translateY(-10px) scale(.97)
}

@media (max-height:680px) {
  .intro-card {
    padding-top:26px;
    padding-bottom:26px
  }
  .intro-mark {
    width:104px;
    height:104px
  }
  .intro-rule {
    margin:16px 0 12px
  }
  .intro-skip {
    margin-top:20px
  }
}

.motion-paused .intro-frame,.motion-paused .crest-ring,.motion-paused .crest-leaf,.motion-paused .crest-sprig {
  animation:none;
  clip-path:none;
  stroke-dashoffset:0
}

@media (prefers-reduced-motion:reduce) {
  .intro-frame {
    animation:none!important;
    clip-path:none!important
  }
  .crest-ring,.crest-leaf,.crest-sprig {
    animation:none!important;
    stroke-dashoffset:0!important
  }
}

/* El nombre de la apertura se parte solo entre palabras, nunca dentro de una. */
.intro-name .wrd {
  display:inline-block;
  white-space:nowrap
}

.intro-name {
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none
}

/* Las dos hojas forman un solo degradado: la costura deja de notarse. */
.intro-panel {
  background-image:linear-gradient(180deg,#fdfaf3,#f6efe0 50%,#efe6d2);
  background-size:100% 200vh;
  background-repeat:no-repeat
}

.intro-panel-top {
  background-position:0 0;
  border-bottom:0
}

.intro-panel-bottom {
  background-position:0 -100vh
}

/* Iconos dibujados a trazo, a juego con el escudo de la apertura. */
.ico {
  width:34px;
  height:34px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.1;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible
}

.ico-estrella {
  width:30px;
  height:30px;
  fill:currentColor;
  stroke:none
}

.tiny-star .ico-estrella {
  width:38px;
  height:38px;
  margin:auto
}

.included-icon,.named-icon,.onboard-icon,.captain-wheel,.inspiration-note>span {
  font-size:0;
  line-height:0
}

.included-icon .ico {
  width:30px;
  height:30px
}

.captain-wheel .ico {
  width:38px;
  height:38px;
  animation:wheel 34s linear infinite
}

.captain-wheel {
  animation:none;
  color:var(--gold)
}

.onboard-icon .ico,.named-icon .ico {
  width:30px;
  height:30px
}

.inspiration-note>span .ico-estrella {
  width:24px;
  height:24px
}

/* Los trazos se dibujan solos cuando la tarjeta entra en pantalla. */
.reveal .ico:not(.ico-estrella) path,.reveal .ico:not(.ico-estrella) circle,.reveal .ico:not(.ico-estrella) ellipse {
  stroke-dasharray:190;
  stroke-dashoffset:190;
  transition:stroke-dashoffset 1.5s var(--ease);
  transition-delay:var(--reveal-delay,0ms)
}

.reveal.visible .ico path,.reveal.visible .ico circle,.reveal.visible .ico ellipse {
  stroke-dashoffset:0
}

.motion-paused .ico path,.motion-paused .ico circle,.motion-paused .ico ellipse {
  stroke-dashoffset:0!important;
  transition:none!important
}

.motion-paused .captain-wheel .ico {
  animation:none
}

@media (prefers-reduced-motion:reduce) {
  .ico path,.ico circle,.ico ellipse {
    stroke-dashoffset:0!important
  }
  .captain-wheel .ico {
    animation:none!important
  }
}

/* Iconos: trazo algo mas presente y tamano que se lee en el telefono. */
.ico {
  stroke-width:1.6
}

.included-icon .ico,.onboard-icon .ico,.named-icon .ico {
  width:36px;
  height:36px
}

.captain-wheel .ico {
  width:42px;
  height:42px
}

.included-icon,.onboard-icon {
  color:#a8823f
}

.included-icon .ico {
  transition:transform .8s var(--ease)
}

.included-grid>div:hover .included-icon {
  transform:none
}

.included-grid>div:hover .included-icon .ico {
  transform:translateY(-3px) scale(1.06)
}

/* Trazo normalizado: ninguna figura se queda a medio dibujar. */
.reveal .ico:not(.ico-estrella) path,.reveal .ico:not(.ico-estrella) circle,.reveal .ico:not(.ico-estrella) ellipse {
  stroke-dasharray:1;
  stroke-dashoffset:1
}

.reveal.visible .ico path,.reveal.visible .ico circle,.reveal.visible .ico ellipse {
  stroke-dashoffset:0
}

.ico:not(.ico-estrella) path,.ico:not(.ico-estrella) circle,.ico:not(.ico-estrella) ellipse {
  stroke-dasharray:1
}

/* Flechas dibujadas: mismo aspecto en iPhone, Android y PC. */
.arw {
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}

.arw-slot {
  display:inline-flex;
  align-items:center;
  font-size:0
}

.button .arw-slot {
  margin-left:2px
}

.round-button {
  display:grid;
  place-items:center
}

.round-button .arw {
  width:17px;
  height:17px
}

.expand-dot .arw {
  width:16px;
  height:16px
}

.image-expand .arw {
  width:15px;
  height:15px
}

.hero .button .arw-down {
  animation:nudge 2.8s var(--ease) infinite
}

@keyframes nudge {
  0%,72%,100% { transform:translateY(0) }
  82% { transform:translateY(4px) }
}

.motion-paused .arw-down {
  animation:none
}

@media (prefers-reduced-motion:reduce) {
  .arw-down {
    animation:none!important
  }
}

/* Bruno, el capitán: retrato circular con aro dorado y el timón de insignia. */
.captain-card {
  align-items:center
}

.captain-photo {
  position:relative;
  flex-shrink:0;
  width:clamp(104px,26vw,132px);
  aspect-ratio:1;
  margin:0
}

.captain-photo img {
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  object-position:50% 30%;
  border:1px solid #ddc39680;
  outline:1px solid #ddc39640;
  outline-offset:5px;
  box-shadow:0 18px 38px -22px #000;
  cursor:zoom-in;
  clip-path:none!important
}

.captain-badge {
  position:absolute;
  right:-6px;
  bottom:-2px;
  width:40px;
  height:40px;
  padding:0;
  border-radius:50%;
  border:1px solid #ddc39673;
  background:#0d2333;
  color:var(--gold);
  display:grid;
  place-items:center;
  backdrop-filter:none
}

.captain-badge .ico {
  width:26px;
  height:26px;
  animation:wheel 26s linear infinite
}

.captain-badge:hover {
  background:#12314a;
  transform:scale(1.06)
}

/* Pie que solo se usa al ampliar la imagen. */
.only-dialog {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}

@media(max-width:760px) {
  .captain-card {
    flex-direction:row;
    align-items:center;
    gap:16px;
    flex-wrap:wrap
  }
  .captain-card>div {
    flex:1 1 100%
  }
}

.motion-paused .captain-badge .ico {
  animation:none
}

@media (prefers-reduced-motion:reduce) {
  .captain-badge .ico {
    animation:none!important
  }
}

/* Encuadre del retrato: la gorra de capitán entra completa. */
.captain-photo img {
  object-position:50% 18%
}

/* ============================================================
   LA APERTURA: un sobre lacrado que se abre.
   Guion, en segundos:
   0.0  el marfil entra y el sobre aparece
   0.7  el lacre late y se desprende
   1.2  la solapa gira hacia atrás en 3D
   1.9  la tarjeta sale del sobre
   2.3  escudo, nombre letra a letra, regla, fecha y botón
   Salida: la tarjeta se acerca, el marfil se disuelve y la
   portada aparece con un acercamiento lento.
   ============================================================ */

.intro {
  background:transparent;
  padding:24px;
  place-items:center;
  overflow:hidden;
  perspective:1600px
}

.intro-bg {
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 38%,#fffdf8,#f6efe0 55%,#eadfc8);
  animation:bg-in .9s var(--ease) both;
  transition:opacity 1s var(--ease)
}

@keyframes bg-in {
  from { opacity:0 }
  to { opacity:1 }
}

.intro-stage {
  position:relative;
  width:min(84vw,430px);
  transform-style:preserve-3d;
  animation:stage-in 1s var(--ease) both
}

@keyframes stage-in {
  from { opacity:0; transform:translateY(24px) scale(.94) }
  to { opacity:1; transform:none }
}

/* ---------- El sobre ---------- */
.envelope {
  position:absolute;
  inset:auto 0 0;
  height:min(58vh,340px);
  transform-style:preserve-3d;
  pointer-events:none
}

.env-back,.env-pocket,.env-flap {
  position:absolute;
  left:0;
  right:0
}

.env-back {
  top:0;
  bottom:0;
  background:linear-gradient(160deg,#f3ead8,#e6d9bd);
  border:1px solid #c9a86766;
  box-shadow:0 40px 70px -40px #7a6033aa
}

/* El bolsillo delantero tapa la tarjeta hasta que sale. */
.env-pocket {
  bottom:0;
  height:58%;
  z-index:3;
  background:linear-gradient(175deg,#efe4cd,#e3d4b4);
  border:1px solid #c9a86766;
  border-top:0;
  clip-path:polygon(0 12%,50% 0,100% 12%,100% 100%,0 100%);
  box-shadow:0 -12px 24px -18px #8a6c3a88
}

/* La solapa gira sobre su borde superior. */
.env-flap {
  top:0;
  height:46%;
  z-index:4;
  transform-origin:top center;
  transform:rotateX(0deg);
  background:linear-gradient(185deg,#f7efdd,#e8dabb);
  border:1px solid #c9a86766;
  clip-path:polygon(0 0,100% 0,50% 100%);
  animation:flap-open 1.25s 1.15s var(--ease) both;
  backface-visibility:hidden
}

@keyframes flap-open {
  from { transform:rotateX(0deg) }
  to { transform:rotateX(-172deg) }
}

/* El lacre, en el centro de la solapa. */
.env-seal {
  position:absolute;
  left:50%;
  top:62%;
  width:74px;
  height:74px;
  margin:-37px 0 0 -37px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#b8923f,#8a6524 62%,#6d4d18);
  box-shadow:0 8px 18px -8px #5a3f1499,inset 0 1px 2px #ffffff55;
  animation:seal-break 1.1s .75s var(--ease) both
}

.env-seal b {
  position:relative;
  font-family:var(--serif);
  font-size:21px;
  font-weight:500;
  letter-spacing:-.04em;
  color:#fdf6e6
}

.env-seal b i {
  font-size:.62em;
  color:#f0dcb0;
  margin:0 2px
}

.env-seal svg {
  position:absolute;
  inset:6px;
  width:calc(100% - 12px);
  height:calc(100% - 12px)
}

.seal-edge {
  fill:none;
  stroke:#f2dfb4;
  stroke-width:1;
  opacity:.45
}

@keyframes seal-break {
  0% { transform:scale(1) rotate(0); opacity:1 }
  45% { transform:scale(1.12) rotate(-4deg); opacity:1 }
  100% { transform:scale(1.5) rotate(9deg) translateY(-14px); opacity:0 }
}

/* ---------- La tarjeta que sale del sobre ---------- */
.intro-card {
  position:relative;
  z-index:2;
  width:100%;
  padding:clamp(28px,6vw,44px) clamp(20px,5vw,36px) clamp(26px,5vw,38px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  color:var(--ink);
  background:linear-gradient(175deg,#fffdf8,#fdf8ee);
  border:1px solid #c9a86740;
  box-shadow:0 30px 60px -36px #6d552c88;
  animation:card-out 1.5s 1.85s var(--ease) both
}

@keyframes card-out {
  from { transform:translateY(44%) scale(.93); opacity:.35 }
  to { transform:translateY(-14%) scale(1); opacity:1 }
}

.intro-frame {
  position:absolute;
  inset:9px;
  border:1px solid #b9924f6e;
  clip-path:inset(0 0 100% 0);
  animation:frame-draw 1.3s 2.5s var(--ease) both;
  outline:none
}

.intro-mark {
  width:clamp(104px,26vw,132px);
  height:clamp(104px,26vw,132px);
  margin-bottom:2px
}

.crest-ring {
  animation-delay:2.55s
}

.crest-ring-inner {
  animation-delay:2.7s
}

.crest-leaf,.crest-sprig {
  animation-delay:3.05s
}

.intro-monogram {
  animation-delay:2.6s
}

.intro-eyebrow {
  margin-top:14px;
  animation-delay:3s
}

.intro-name .ltr {
  animation-delay:calc(3.2s + var(--letter-delay,0ms))
}

.intro-rule {
  margin:18px 0 14px;
  animation-delay:3.9s
}

.intro-date {
  animation-delay:4.1s
}

.intro-skip {
  margin-top:clamp(20px,4vw,28px);
  animation-delay:4.35s
}

/* ---------- Salida: nada de telones, una disolución con acercamiento ---------- */
.intro.leaving {
  pointer-events:none
}

.intro.leaving .intro-bg {
  opacity:0
}

.intro.leaving .intro-stage {
  animation:stage-out 1.1s var(--ease) both
}

@keyframes stage-out {
  from { opacity:1; transform:none }
  to { opacity:0; transform:translateY(-26px) scale(1.14) }
}

/* La portada se descubre con un acercamiento lento y sus textos entran detrás. */
.intro-done .hero-image img {
  animation:hero-zoom 2.4s var(--ease) both,hero-drift 26s 2.4s ease-in-out infinite alternate
}

@keyframes hero-zoom {
  from { transform:scale(1.16) }
  to { transform:scale(1.02) }
}

.intro-done .hero-content {
  animation:hero-settle 1.6s var(--ease) both
}

@keyframes hero-settle {
  from { opacity:0 }
  to { opacity:1 }
}

.intro-done .topbar,.intro-done .hero-bottom {
  animation:hero-settle 1.6s .5s var(--ease) both
}

/* ---------- Caben pantallas bajas ---------- */
@media (max-height:720px) {
  .intro-stage {
    width:min(78vw,380px)
  }
  .envelope {
    height:min(52vh,280px)
  }
  .intro-mark {
    width:92px;
    height:92px
  }
  .intro-rule {
    margin:12px 0 10px
  }
  .intro-skip {
    margin-top:16px
  }
}

@media (min-width:900px) {
  .intro-stage {
    width:460px
  }
  .envelope {
    height:360px
  }
}

/* ---------- Sin movimiento: se ve la tarjeta, sin sobre ni animación ---------- */
.motion-paused .envelope,
.motion-paused .intro-dust {
  display:none
}

.motion-paused .intro-card,.motion-paused .intro-stage,.motion-paused .intro-bg,
.motion-paused .intro-frame,.motion-paused .intro-monogram,.motion-paused .intro-eyebrow,
.motion-paused .intro-rule,.motion-paused .intro-date,.motion-paused .intro-skip {
  animation:none;
  transform:none;
  opacity:1;
  clip-path:none
}

@media (prefers-reduced-motion:reduce) {
  .envelope,.intro-dust {
    display:none!important
  }
  .intro-card,.intro-stage,.intro-bg,.intro-frame,.intro-monogram,
  .intro-eyebrow,.intro-rule,.intro-date,.intro-skip {
    animation:none!important;
    transform:none!important;
    opacity:1!important;
    clip-path:none!important
  }
  .intro-done .hero-image img,.intro-done .hero-content,.intro-done .topbar,.intro-done .hero-bottom {
    animation:none!important
  }
}

/* ------------------------------------------------------------
   Sobre, corrección de geometría y de salida.
   El sobre se mide en porcentajes de la tarjeta: la solapa y el
   bolsillo la tapan hasta que sale, y al final el marfil se
   disuelve de verdad (la animación ya no pisa la transición).
   ------------------------------------------------------------ */

.intro-stage {
  width:min(84vw,410px)
}

.envelope {
  position:absolute;
  inset:0 -16px -11% -16px;
  height:auto
}

.env-back {
  top:26%;
  bottom:0;
  background:linear-gradient(162deg,#f0e6d2,#e2d3b4);
  border:1px solid #c9a86773;
  box-shadow:0 46px 80px -48px #6a5228cc
}

.env-pocket {
  top:56%;
  bottom:0;
  height:auto;
  clip-path:polygon(0 0,50% 16%,100% 0,100% 100%,0 100%);
  background:linear-gradient(178deg,#ece0c6,#dfcfab);
  border:1px solid #c9a86773;
  border-top:0
}

.env-flap {
  top:26%;
  height:36%;
  clip-path:polygon(0 0,100% 0,50% 100%);
  background:linear-gradient(186deg,#f6eeda,#e6d7b6);
  border:1px solid #c9a86773;
  animation:flap-open 1.3s 1.1s var(--ease) both
}

.env-seal {
  top:auto;
  bottom:-34px;
  width:72px;
  height:72px;
  margin:0 0 0 -36px
}

/* La tarjeta nace dentro del sobre y sube hasta quedar por delante. */
.intro-card {
  animation:card-out 1.6s 1.8s var(--ease) both
}

@keyframes card-out {
  0% { transform:translateY(64%) scale(.94); opacity:0 }
  18% { opacity:1 }
  100% { transform:translateY(-16%) scale(1); opacity:1 }
}

/* El polvo de oro solo aparece cuando el sobre ya está abierto. */
.intro-dust i {
  animation-delay:2.4s
}

/* Salida: el marfil se disuelve. La animación de entrada se anula aquí,
   porque una animación con fill:both gana siempre a una transición. */
.intro.leaving .intro-bg {
  animation:none;
  opacity:0;
  transition:opacity .9s var(--ease)
}

.intro.leaving .intro-dust {
  animation:none;
  opacity:0;
  transition:opacity .5s
}

.intro.leaving .envelope {
  animation:envelope-out 1s var(--ease) both
}

@keyframes envelope-out {
  from { opacity:1; transform:translateY(0) }
  to { opacity:0; transform:translateY(26px) }
}

@media (max-height:720px) {
  .intro-stage {
    width:min(76vw,340px)
  }
  .env-seal {
    width:60px;
    height:60px;
    bottom:-28px;
    margin-left:-30px
  }
  .env-seal b {
    font-size:18px
  }
}

/* ------------------------------------------------------------
   Sobre: el lacre va suelto (la solapa lo recortaba) y el papel
   gana definición para que se lea como un sobre de verdad.
   ------------------------------------------------------------ */
.env-seal {
  z-index:5;
  top:58%;
  bottom:auto;
  margin-top:-36px
}

.env-back {
  background:linear-gradient(162deg,#efe3cc,#ddcba6);
  border-color:#bf9c5a99
}

.env-pocket {
  background:linear-gradient(178deg,#e7d9ba,#d8c69a);
  border-color:#bf9c5a99;
  box-shadow:0 -14px 26px -20px #6d5222aa
}

.env-flap {
  background:linear-gradient(186deg,#f7efdc,#e3d2ac);
  border-color:#bf9c5a99;
  filter:drop-shadow(0 6px 10px #6d522233)
}

/* Los cantos del bolsillo se insinúan como dobleces de papel. */
.env-pocket:after {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom right,transparent calc(50% - 1px),#ffffff99 50%,transparent calc(50% + 1px)),
    linear-gradient(to bottom left,transparent calc(50% - 1px),#ffffff99 50%,transparent calc(50% + 1px));
  opacity:.5;
  pointer-events:none
}

/* ------------------------------------------------------------
   Sobre aplanado: fondo, tarjeta, bolsillo y solapa son hermanos,
   así el papel del sobre puede quedar por delante de la tarjeta.
   ------------------------------------------------------------ */
.intro-stage {
  perspective:1200px;
  transform-style:flat
}

.env-back,.env-pocket,.env-flap {
  position:absolute;
  left:-16px;
  right:-16px
}

.env-back {
  top:26%;
  bottom:-11%;
  z-index:1
}

.intro-card {
  z-index:2
}

.env-pocket {
  top:56%;
  bottom:-11%;
  height:auto;
  z-index:3
}

.env-flap {
  top:26%;
  height:36%;
  bottom:auto;
  z-index:4;
  transform-origin:top center
}

.env-seal {
  z-index:5
}

/* ------------------------------------------------------------
   Física del sobre: la tarjeta cabe dentro (nunca asoma por
   debajo), la solapa monta sobre el bolsillo como en un sobre
   real y al abrirse se queda vista por detrás.
   ------------------------------------------------------------ */
.env-back {
  top:8%;
  bottom:-11%
}

.env-flap {
  top:8%;
  height:46%;
  backface-visibility:visible;
  box-shadow:0 10px 16px -12px #6d522255
}

.env-pocket {
  top:50%;
  bottom:-11%
}

.env-seal {
  top:52%;
  margin-top:-34px
}

@keyframes card-out {
  0% { transform:translateY(8%) scale(.985); opacity:1 }
  100% { transform:translateY(-22%) scale(1); opacity:1 }
}

/* La solapa abierta proyecta su sombra sobre la tarjeta que sale. */
@keyframes flap-open {
  0% { transform:rotateX(0deg) }
  55% { transform:rotateX(-104deg) }
  100% { transform:rotateX(-168deg) }
}

/* Al salir, la tarjeta pasa por delante del sobre: mientras está dentro va
   entre el fondo y el bolsillo, y en cuanto asoma se pone delante de todo. */
@keyframes card-out {
  0% { transform:translateY(8%) scale(.985); opacity:1; z-index:2 }
  38% { z-index:2 }
  39% { z-index:6 }
  100% { transform:translateY(-22%) scale(1); opacity:1; z-index:6 }
}

.intro-card {
  box-shadow:0 34px 60px -34px #6d552caa
}

/* ------------------------------------------------------------
   Salida: la tarjeta se acerca hasta ocupar la vista y se
   disuelve en la portada, con un destello dorado muy breve.
   ------------------------------------------------------------ */
.intro-flash {
  position:absolute;
  inset:0;
  z-index:7;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 50% 46%,#fff6e2,#f3e4c2 38%,transparent 72%)
}

.intro.leaving .intro-flash {
  animation:flash .85s var(--ease) both
}

@keyframes flash {
  0% { opacity:0; transform:scale(.8) }
  28% { opacity:.85 }
  100% { opacity:0; transform:scale(1.5) }
}

.intro.leaving .intro-stage {
  animation:stage-out 1.05s cubic-bezier(.55,0,.35,1) both
}

@keyframes stage-out {
  0% { opacity:1; transform:none }
  35% { opacity:.92 }
  100% { opacity:0; transform:translateY(-42px) scale(2.05) }
}

.intro.leaving .env-back,.intro.leaving .env-pocket,.intro.leaving .env-flap,.intro.leaving .env-seal {
  animation:envelope-out .7s var(--ease) both
}

@keyframes envelope-out {
  from { opacity:1 }
  to { opacity:0 }
}

/* La portada se abre con un acercamiento largo, no con un corte. */
@keyframes hero-zoom {
  from { transform:scale(1.22) }
  to { transform:scale(1.02) }
}

.intro-done .hero-image img {
  animation:hero-zoom 2.8s var(--ease) both,hero-drift 26s 2.8s ease-in-out infinite alternate
}

.intro-done .hero-content {
  animation:hero-settle 1.9s .25s var(--ease) both
}

/* La tarjeta se va antes de crecer del todo: así no compite con la portada. */
@keyframes stage-out {
  0% { opacity:1; transform:none; filter:blur(0) }
  22% { opacity:.9 }
  58% { opacity:0; filter:blur(7px) }
  100% { opacity:0; transform:translateY(-38px) scale(1.9); filter:blur(10px) }
}

.intro.leaving .intro-stage {
  animation:stage-out 1.15s cubic-bezier(.5,0,.3,1) both
}

@keyframes flash {
  0% { opacity:0; transform:scale(.85) }
  30% { opacity:.6 }
  100% { opacity:0; transform:scale(1.45) }
}

/* ============================================================
   Vida en el scroll. Todo va ligado a la posición de la página
   (animation-timeline: view()), así que el navegador lo resuelve
   fuera del hilo principal y se detiene solo fuera de pantalla.
   Solo se animan transform, opacity y clip-path.
   ============================================================ */

@supports (animation-timeline:view()) {
  @media (prefers-reduced-motion:no-preference) {

    /* Los párrafos llegan un poco después que su título. */
    html:not(.motion-paused) .section-heading>p:not(.eyebrow),
    html:not(.motion-paused) .invitation-copy>p,
    html:not(.motion-paused) .included-heading>p,
    html:not(.motion-paused) .dress-intro>p:last-child,
    html:not(.motion-paused) .closing-content>p:not(.eyebrow):not(.closing-signature),
    html:not(.motion-paused) .venue-address,
    html:not(.motion-paused) .dress-rule {
      animation:text-rise linear both;
      animation-timeline:view();
      animation-range:entry 6% entry 46%
    }

    /* El número de sección entra desde el margen. */
    html:not(.motion-paused) .section-number {
      animation:number-in linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 38%
    }

    /* La cuenta regresiva se acerca al entrar. */
    html:not(.motion-paused) .countdown {
      animation:count-zoom linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 55%
    }

    /* Los pies de la galería aparecen con su foto. */
    html:not(.motion-paused) .gallery figcaption {
      animation:text-rise linear both;
      animation-timeline:view(inline);
      animation-range:entry 12% entry 68%
    }

    /* Los círculos de color del vestuario entran en cascada. */
    html:not(.motion-paused) .color-swatches i {
      animation:swatch-in linear both;
      animation-timeline:view();
      animation-range:entry 10% entry 60%
    }

    html:not(.motion-paused) .color-swatches i:nth-child(2) { animation-range:entry 14% entry 64% }
    html:not(.motion-paused) .color-swatches i:nth-child(3) { animation-range:entry 18% entry 68% }
    html:not(.motion-paused) .color-swatches i:nth-child(4) { animation-range:entry 22% entry 72% }
    html:not(.motion-paused) .color-swatches i:nth-child(5) { animation-range:entry 26% entry 76% }

    /* La firma y el cierre respiran al llegar. */
    html:not(.motion-paused) .signature,
    html:not(.motion-paused) .closing-signature,
    html:not(.motion-paused) .anniversary-soft {
      animation:text-rise linear both;
      animation-timeline:view();
      animation-range:entry 10% entry 52%
    }

    /* El retrato de la pareja se endereza despacio. */
    html:not(.motion-paused) .portrait-frame {
      animation:portrait-settle linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 45%
    }

    /* El aro del capitán gira un poco al pasar. */
    html:not(.motion-paused) .captain-photo {
      animation:count-zoom linear both;
      animation-timeline:view();
      animation-range:entry 5% entry 55%
    }
  }
}

@keyframes text-rise {
  from { opacity:.25; transform:translateY(16px) }
  to { opacity:1; transform:none }
}

@keyframes number-in {
  from { opacity:0; transform:translateX(-14px) }
  to { opacity:.65; transform:none }
}

@keyframes count-zoom {
  from { opacity:.4; transform:scale(.93) }
  to { opacity:1; transform:none }
}

@keyframes swatch-in {
  from { opacity:0; transform:scale(.4) }
  to { opacity:1; transform:none }
}

@keyframes portrait-settle {
  from { transform:rotate(3.4deg) scale(.97) }
  to { transform:rotate(1.4deg) scale(1) }
}

/* El contador del aniversario sube de 0 a 13 al entrar en pantalla. */
.anniversary-years {
  font-variant-numeric:lining-nums tabular-nums;
  min-width:1.6em;
  display:inline-block;
  text-align:center
}

/* Sin movimiento: todo queda en su estado final. */
.motion-paused .section-number,
.motion-paused .countdown,
.motion-paused .color-swatches i,
.motion-paused .portrait-frame,
.motion-paused .captain-photo {
  animation:none!important;
  opacity:1;
  transform:none
}

.motion-paused .portrait-frame {
  transform:rotate(2deg)
}

@media (prefers-reduced-motion:reduce) {
  .section-number,.countdown,.color-swatches i,.captain-photo {
    animation:none!important;
    opacity:1!important;
    transform:none!important
  }
  .portrait-frame {
    animation:none!important;
    transform:rotate(2deg)!important
  }
}

/* ------------------------------------------------------------
   Nombres largos: la tarjeta encoge lo justo para caber siempre
   en pantalla, y una palabra sin espacios puede partirse.
   ------------------------------------------------------------ */
.intro-card {
  max-height:none
}

.wrd-larga {
  white-space:normal;
  overflow-wrap:anywhere
}

.intro-card[data-name="medio"] .intro-name {
  font-size:clamp(25px,6.2vw,40px);
  line-height:1.16
}

.intro-card[data-name="medio"] .intro-mark {
  width:clamp(88px,22vw,112px);
  height:clamp(88px,22vw,112px)
}

.intro-card[data-name="largo"] .intro-name {
  font-size:clamp(19px,4.6vw,28px);
  line-height:1.3;
  margin-top:8px
}

.intro-card[data-name="largo"] .intro-mark {
  width:clamp(68px,17vw,88px);
  height:clamp(68px,17vw,88px)
}

.intro-card[data-name="largo"] .intro-eyebrow {
  margin-top:8px;
  font-size:10px;
  letter-spacing:.24em
}

.intro-card[data-name="largo"] .intro-rule {
  margin:12px 0 10px
}

.intro-card[data-name="largo"] .intro-skip {
  margin-top:16px
}

.intro-card[data-name="largo"] .intro-date {
  font-size:10px
}