@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#2c3a1e;
  --ink2:#4a6741;
  --verde:#4a6741;
  --verde2:#6b8f5e;
  --hoja:#8aab7a;
  --crema:#f5f0e8;
  --dorado:#9a7c3a;
  --dorado2:#b89848;
}
html{scroll-behavior:smooth}
body{
  background:radial-gradient(ellipse at center,#d8e0cc 0%,#c4cdb8 100%);
  min-height:100vh;display:flex;justify-content:center;
  padding:20px 0;font-family:'Cormorant Garamond',serif;
}

/* ═══ PAPER ═══ */
.wrap{
  width:100%;max-width:430px;background:var(--crema);
  position:relative;overflow:hidden;
  box-shadow:0 18px 80px rgba(40,60,20,0.22),0 4px 20px rgba(40,60,20,0.10);
}
#grain-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;mix-blend-mode:multiply;opacity:0.55;}
.wrap::before{content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='350' height='350'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.28 0 0 0 0 0.38 0 0 0 0 0.18 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='350' height='350' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:350px 350px;pointer-events:none;z-index:4;mix-blend-mode:multiply;}

/* Manchas de acuarela verde */
.wc-blob{position:absolute;pointer-events:none;z-index:1;border-radius:62% 38% 55% 45%/48% 58% 42% 52%;}
.wb1{width:340px;height:250px;top:-40px;right:-90px;background:radial-gradient(ellipse,rgba(106,143,94,0.18) 0%,rgba(106,143,94,0.08) 45%,transparent 70%);transform:rotate(16deg);}
.wb2{width:290px;height:210px;top:300px;left:-95px;background:radial-gradient(ellipse,rgba(74,103,65,0.16) 0%,rgba(74,103,65,0.06) 45%,transparent 70%);transform:rotate(-22deg);}
.wb3{width:310px;height:230px;top:700px;right:-75px;background:radial-gradient(ellipse,rgba(138,171,122,0.15) 0%,transparent 65%);transform:rotate(9deg);}
.wb4{width:290px;height:220px;top:1080px;left:-85px;background:radial-gradient(ellipse,rgba(106,143,94,0.14) 0%,transparent 65%);transform:rotate(-14deg);}
.wb5{width:330px;height:240px;top:1540px;right:-95px;background:radial-gradient(ellipse,rgba(74,103,65,0.13) 0%,transparent 65%);transform:rotate(20deg);}
.wb6{width:310px;height:230px;top:2050px;left:-75px;background:radial-gradient(ellipse,rgba(138,171,122,0.13) 0%,transparent 65%);transform:rotate(-9deg);}
.wb7{width:360px;height:250px;top:2500px;right:-85px;background:radial-gradient(ellipse,rgba(106,143,94,0.12) 0%,transparent 65%);transform:rotate(15deg);}

.content{position:relative;z-index:2;}

/* ═══ HERO ═══ */
.hero{padding:56px 32px 28px;min-height:300px;position:relative;}
.hero-names{position:relative;z-index:4;}
.name-line{
  font-family:'Pinyon Script',cursive;font-size:58px;line-height:1.25;
  color:var(--ink);display:block;overflow:hidden;white-space:nowrap;padding-bottom:8px;
}
.name-amp{
  font-family:'Cormorant Garamond',serif;font-size:22px;font-style:italic;
  color:var(--verde2);display:block;margin:2px 50px;overflow:hidden;opacity:0;
  letter-spacing:3px;
}
.hero-date{
  font-family:'Cormorant Garamond',serif;font-size:14px;
  color:var(--verde2);letter-spacing:3px;margin-top:12px;opacity:0;
  text-transform:uppercase;
}

@keyframes reveal{from{width:0}to{width:100%}}
@keyframes fadein{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.name1{animation:reveal 1.1s steps(22,end) 0.4s forwards;width:0;}
.name-amp{animation:fadein 0.5s ease 1.6s forwards;}
.name2{animation:reveal 1.1s steps(22,end) 2.2s forwards;width:0;}
.hero-date{animation:fadein 0.6s ease 3.4s forwards;}

/* Mariposa */
.butterfly-wrap{position:absolute;top:80px;right:18px;width:130px;z-index:5;opacity:0;}
@keyframes butterflyFloat{
  0%{transform:translate(120px,-20px) rotate(-8deg);opacity:0;}
  15%{opacity:1;}
  35%{transform:translate(0px,0px) rotate(4deg);opacity:1;}
  55%{transform:translate(0px,0px) rotate(-2deg);opacity:1;}
  70%{transform:translate(0px,0px) rotate(2deg);opacity:1;}
  100%{transform:translate(0px,0px) rotate(0deg);opacity:1;}
}
@keyframes butterflyRest{
  0%,100%{transform:translateY(0px) rotate(-1deg);}
  50%{transform:translateY(-4px) rotate(1deg);}
}
@keyframes wingFlapL{
  0%,100%{transform:rotateY(0deg);}
  50%{transform:rotateY(65deg);}
}
@keyframes wingFlapR{
  0%,100%{transform:rotateY(0deg);}
  50%{transform:rotateY(-65deg);}
}
.butterfly-wrap{animation:butterflyFloat 5s ease-in-out 0.8s forwards, butterflyRest 3s ease-in-out 5.8s infinite;}
.butterfly-wrap svg{transform-style:preserve-3d;}
.bfly-wing-l{animation:wingFlapL 0.5s ease-in-out infinite;transform-origin:right center;transform-style:preserve-3d;}
.bfly-wing-r{animation:wingFlapR 0.5s ease-in-out infinite;transform-origin:left center;transform-style:preserve-3d;}

/* ═══ DIVISOR BOTÁNICO ═══ */
.leaf-divider{display:block;width:100%;text-align:center;margin:6px 0;}
.leaf-divider svg{opacity:0.55;}

/* ═══ SECTIONS ═══ */
.nos-casamos{padding:18px 36px 8px;text-align:center;position:relative;}
.venue{text-align:center;padding:6px 36px 22px;position:relative;}
.programa{padding:18px 10px 18px 36px;position:relative;text-align:center;}
.faltan{text-align:center;padding:14px 36px 18px;position:relative;}
.obsequios{text-align:center;padding:6px 36px 18px;}
.confirma{text-align:center;padding:6px 48px 22px;position:relative;}
.garden-footer{position:relative;padding:0;min-height:200px;text-align:center;}

.script-title{
  font-family:'Pinyon Script',cursive;font-size:38px;
  color:var(--ink);display:block;margin-bottom:10px;
}
.script-title--sm{font-size:30px;}
.script-title--xs{font-size:28px;}
.italic-text{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:15px;color:var(--ink2);line-height:1.90;
}
.datetime-text{
  font-family:'Cormorant Garamond',serif;font-size:13px;
  letter-spacing:2.5px;text-transform:uppercase;
  color:var(--ink);line-height:2;margin:12px 0 8px;
}
.venue-name{
  font-family:'Cormorant Garamond',serif;font-size:13px;
  letter-spacing:3px;text-transform:uppercase;
  color:var(--ink);line-height:2;
}
.pill-btn{
  display:inline-block;margin-top:12px;padding:7px 22px;
  border:1px solid rgba(74,103,65,0.45);border-radius:20px;
  background:rgba(106,143,94,0.12);
  font-family:'Cormorant Garamond',serif;font-size:14px;
  color:var(--verde);cursor:pointer;text-decoration:none;
  transition:background 0.2s;
}
.pill-btn:hover{background:rgba(106,143,94,0.25);}

/* ═══ TIMELINE CON PÉTALOS ═══ */
.tl-map{position:relative;width:100%;min-height:430px;padding-left:38px;}
.path-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2;}
#map-fp-track{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;}
.fp{opacity:0;transition:opacity 0.6s ease;will-change:opacity;}
.tl-item{position:absolute;display:flex;align-items:center;z-index:3;}
.tl-icon-w{width:38px;height:38px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.tl-label{font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--ink2);line-height:1.3;white-space:nowrap;font-style:italic;}
.tl-time{font-family:'Cormorant Garamond',serif;font-size:12px;color:var(--dorado);display:block;letter-spacing:1px;font-style:normal;}

.tl0{top:8px;left:58%;}
.tl1{top:100px;left:60%;}
.tl2{top:145px;left:-7%;}
.tl3{top:278px;left:60%;}
.tl4{top:372px;left:2%;}

/* ═══ COUNTDOWN ═══ */
.faltan-title{
  font-family:'Pinyon Script',cursive;font-size:42px;
  color:var(--ink);display:inline-block;margin-right:6px;
}
.faltan-header{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:4px;}
/* Mariposa pequeña countdown */
.butterfly-small{display:inline-block;vertical-align:middle;position:relative;top:-4px;width:44px;}
@keyframes bflySmall{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-7px) rotate(3deg);}}
.butterfly-small{animation:bflySmall 2.2s ease-in-out infinite;}
.bfly-sm-l{animation:wingFlapL 0.55s ease-in-out infinite;transform-origin:right center;}
.bfly-sm-r{animation:wingFlapR 0.55s ease-in-out infinite;transform-origin:left center;}

.cd-box{
  border:1px solid rgba(74,103,65,0.35);border-radius:10px;
  display:inline-flex;align-items:stretch;
  padding:10px 12px 8px;margin-top:10px;
  background:rgba(235,242,228,0.55);gap:0;
}
.cd-unit{text-align:center;padding:0 8px;min-width:52px;}
.cd-unit .cd-num{
  display:block;font-family:'Cormorant Garamond',serif;
  font-size:34px;font-weight:400;color:var(--ink);
  letter-spacing:1px;line-height:1;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.cd-unit.secs-unit .cd-num{color:var(--dorado);}
.cd-unit .cd-lbl{
  display:block;font-family:'Cormorant Garamond',serif;
  font-size:9px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--verde2);margin-top:4px;
}
.cd-sep{
  font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:300;
  color:rgba(74,103,65,0.45);align-self:flex-start;padding-top:2px;
}

.te-esperamos{
  font-family:'Pinyon Script',cursive;font-size:40px;
  color:var(--ink);position:relative;z-index:2;
  padding:18px 0 10px;
}
.reveal{opacity:0;transform:translateY(22px);transition:opacity 0.75s ease,transform 0.75s ease;}
.reveal.visible{opacity:1;transform:none;}
.section-gap{height:28px;}
.end-line{margin-bottom:0;}

/* Títulos de sección */
.section-ornament{display:block;text-align:center;margin:0 auto 4px;opacity:0.5;}

/* Caja IBAN */
.iban-box{
  font-family:'Cormorant Garamond',serif;font-size:14px;
  letter-spacing:1.5px;color:var(--ink);
  margin-top:10px;padding:8px 18px;
  border:1px solid rgba(74,103,65,0.32);border-radius:10px;
  display:inline-block;background:rgba(220,232,210,0.38);
}
/* Imagen obsequios */
.obsequios-img{width:100%;max-width:320px;display:block;margin:0 auto 14px;}
/* Imagen footer */
.end-garden-img{width:100%;height:auto;display:block;margin:0 auto;opacity:0.95;object-fit:cover;}

@media(max-width:430px){
  .wrap{max-width:100%;}
  .name-line{font-size:48px;}
}
a[x-apple-data-detectors]{
  color:inherit!important;text-decoration:none!important;
  font-size:inherit!important;font-family:inherit!important;
  font-weight:inherit!important;line-height:inherit!important;
  pointer-events:none;
}