@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@400;600;700;800;900&display=swap');
:root{--ink:#073b4c;--aqua:#16cbd0;--deep:#009fc2;--pink:#ff3d86;--yellow:#ffd83d;--pale:#f4fdff;--white:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--pale);color:var(--ink);font:16px/1.55 Nunito,sans-serif}
button,input,textarea,select{font:inherit}
a{text-decoration:none;color:inherit}
h1,h2,h3,p{margin-top:0}
h2{font:800 clamp(2.2rem,6vw,4.2rem)/1 Baloo 2,sans-serif}
.hero{min-height:100svh;position:relative;overflow:hidden;isolation:isolate;padding:1.2rem 1.2rem 10rem;background:linear-gradient(160deg,#7ff4ef,#22cbd2 50%,#009fc2);color:white}
.hero:before{content:"";position:absolute;inset:0;z-index:-3;background:radial-gradient(circle at 50% 26%,#ffffff55,transparent 38%),repeating-linear-gradient(112deg,transparent 0 48px,#ffffff12 50px 52px)}
nav{max-width:1100px;margin:auto;padding:.75rem 1rem;display:flex;align-items:center;justify-content:space-between;border:1px solid #ffffff70;border-radius:99px;background:#ffffff22;backdrop-filter:blur(12px)}
nav div{display:flex;gap:1.5rem;font-weight:800;font-size:.9rem}
.logo{font:800 1.2rem Baloo 2}
.hero-copy{position:relative;z-index:3;max-width:760px;margin:clamp(3rem,8vh,5rem) auto 0;text-align:center}
.eyebrow{font-size:.78rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
.turns{font:800 clamp(1.8rem,5vw,3rem) Baloo 2;margin:1.2rem 0 0}
.hero h1{min-height:0;height:auto;overflow:visible;display:flex;justify-content:center;align-items:center;gap:.02em;margin:.1rem 0 .4rem;font:800 clamp(8.6rem,48vw,22rem)/.78 Baloo 2;letter-spacing:-.12em;text-shadow:0 14px #00698644}
.hero h1 span:first-child{color:var(--yellow);transform:rotate(-6deg)}
.hero h1 span:last-child{color:var(--pink);transform:rotate(5deg)}
.pool-title{display:inline-block;margin-top:-1rem;padding:.35rem 1.2rem;background:var(--ink);box-shadow:7px 7px var(--yellow);transform:rotate(-2deg);font-weight:900;font-size:clamp(1.1rem,4vw,2rem);letter-spacing:.18em}
.lead{max-width:570px;margin:1.6rem auto;font-size:clamp(1rem,2.5vw,1.25rem);font-weight:700}
.actions{display:flex;justify-content:center;flex-wrap:wrap;gap:.8rem}
.btn{min-height:3.1rem;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:99px;padding:0 1.5rem;font-weight:900;cursor:pointer}
.primary{background:var(--pink);color:white;box-shadow:0 10px 25px #77002f30}
.glass{border:1px solid white;background:#ffffff20;color:white}
.countdown{margin:2rem auto 0;display:flex;justify-content:center;gap:.55rem}
.time{width:clamp(4rem,15vw,5.5rem);aspect-ratio:1;border:1px solid #ffffff99;border-radius:50%;background:#ffffff28;backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;justify-content:center}
.time b{font-size:clamp(1.15rem,4vw,1.7rem)}
.time small{text-transform:uppercase;font-weight:800}
.sun{position:absolute;z-index:-1;width:110px;height:110px;right:7%;top:13%;border-radius:50%;background:#ffe26d;box-shadow:0 0 0 22px #ffe26d22}
.ring{position:absolute;width:150px;height:150px;border:32px solid var(--pink);border-radius:50%;filter:drop-shadow(0 15px 12px #00445b33);animation:float 5s ease-in-out infinite}
.r1{left:-55px;top:40%}
.r2{right:-65px;bottom:18%;border-color:var(--yellow);animation-delay:-2s}
.waves{position:absolute;left:-5%;bottom:-70px;width:110%;height:145px;border-radius:50% 50% 0 0;background:var(--pale);transform:rotate(2deg);box-shadow:0 -30px #ffffff55}
.details,.participate,.gallery-section{padding:clamp(4rem,9vw,7rem) 1.2rem}
.heading{max-width:720px;margin:0 auto 2.7rem;text-align:center}
.heading>p:last-child{font-size:1.08rem;color:#557986}
.pink{color:var(--pink)}
.cards{max-width:1050px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.cards article{min-height:240px;padding:2rem;border:1px solid #bde9ec;border-radius:2rem;background:white;box-shadow:0 20px 45px #00698212}
.cards article:nth-child(2){transform:translateY(-15px);background:var(--ink);color:white}
.cards b{display:block;color:var(--pink);font:800 2rem Baloo 2}
.cards small{color:#1aa4aa;text-transform:uppercase;font-weight:900;letter-spacing:.15em}
.cards h3{margin:.5rem 0;font-size:1.3rem}
.cards p{margin:0;color:#64828d}
.cards article:nth-child(2) p{color:#afd2d8}
.calendar-wrap{max-width:1050px;margin:1.4rem auto 0;text-align:center}
.calendar-btn{box-shadow:0 10px 25px #77002f24}
.dress{padding:clamp(4rem,8vw,6rem) 1.2rem;background:var(--yellow)}
.dress-card{max-width:950px;margin:auto;padding:clamp(2rem,5vw,4rem);display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2rem;border:2px dashed var(--pink);border-radius:2.5rem;background:#fff8d8}
.dress-icons{display:flex;align-items:flex-end;justify-content:flex-start;gap:.45rem;width:max-content;max-width:100%}
.dress-icon{margin:0;width:4.1rem;flex:0 0 auto;text-align:center}
.dress-icon img{display:block;width:64px;height:64px;max-width:64px;margin:0 auto .15rem;object-fit:contain;background:#eaf8ff;border-radius:.8rem}
.dress-icon figcaption{font-size:.68rem;font-weight:900;letter-spacing:.04em;color:var(--ink)}
.dress-card .eyebrow{text-align:left}
.dress-card p:last-child{font-size:1.08rem}
.quote{padding:clamp(5rem,10vw,8rem) 1.2rem;text-align:center;background:var(--ink);color:white}
.quote p{max-width:850px;margin:0 auto 1.3rem;font:700 clamp(1.7rem,4vw,3rem)/1.35 Baloo 2}
.quote strong{color:#63dfdc}
.live-section{padding:clamp(4rem,9vw,7rem) 1.2rem;background:linear-gradient(180deg,#e7fbfc,#fff)}
.live-card{max-width:960px;margin:auto;padding:1rem;border-radius:2rem;background:#052f3d;box-shadow:0 25px 60px #00698225;color:white}
.live-screen{position:relative;overflow:hidden;border-radius:1.35rem;background:#01171f;aspect-ratio:16/9}
.live-screen video{width:100%;height:100%;display:block;object-fit:cover}
.live-badge{position:absolute;top:1rem;left:1rem;padding:.45rem .7rem;border-radius:99px;background:#d91e50;font-size:.75rem;font-weight:900;letter-spacing:.08em}
.live-badge i{display:inline-block;width:8px;height:8px;margin-right:.35rem;border-radius:50%;background:white;animation:livepulse 1.4s infinite}
.live-controls{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem .5rem .4rem}
.live-controls strong{font:800 1.3rem Baloo 2}.live-controls p{margin:.1rem 0;color:#b7dfe3}.camera-buttons{display:flex;gap:.6rem}.privacy-note{margin:.8rem .5rem .2rem;color:#b7dfe3;font-size:.88rem}
@keyframes livepulse{50%{opacity:.25}}
.tabs{max-width:760px;margin:auto;display:flex;gap:.5rem;overflow:auto;padding:.4rem;background:#dff8fa;border-radius:99px}
.tabs button{flex:1;white-space:nowrap;border:0;border-radius:99px;padding:.9rem 1rem;background:transparent;color:var(--ink);font-weight:900;cursor:pointer}
.tabs button.active{background:white;box-shadow:0 5px 18px #00698218}
.panel{max-width:760px;margin:1rem auto 0;padding:clamp(1.3rem,4vw,2.5rem);display:none;border:1px solid #bde9ec;border-radius:2rem;background:white;box-shadow:0 20px 45px #00698210}
.panel.active{display:block}
.panel h3{font:800 1.7rem Baloo 2}
.panel label{display:grid;gap:.35rem;margin:1rem 0;font-weight:800}
.panel input,.panel textarea,.panel select{width:100%;border:1px solid #b7dfe3;border-radius:1rem;padding:.85rem 1rem;background:#faffff;color:var(--ink)}
.panel textarea{min-height:110px;resize:vertical}
.field-row{display:grid;grid-template-columns:2fr 1fr;gap:1rem}
.panel .choice{display:flex;flex-direction:row;align-items:center}
.panel .choice input{width:auto}
.hint,.form-status{font-size:.9rem;color:#65818b}
.form-status.ok{color:#087b52}
.form-status.error{color:#b11a47}
.rsvp-clock{margin:0 0 1.1rem;padding:1rem 1rem .85rem;border-radius:1.2rem;background:#e7fbfc;border:1px solid #bde9ec}
.rsvp-clock p{margin:0 0 .75rem;font-size:.92rem;font-weight:700;color:#3d6b76}
.rsvp-countdown{display:flex;justify-content:center;gap:.4rem}
.rsvp-countdown div{min-width:3.4rem;padding:.45rem .3rem;border-radius:.8rem;background:white;text-align:center;box-shadow:0 6px 16px #00698210}
.rsvp-countdown b{display:block;font:800 1.15rem Baloo 2;color:var(--pink);line-height:1}
.rsvp-countdown small{font-size:.65rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#65818b}
.gallery-section{background:#e7fbfc}
.gallery,.message-grid{max-width:1100px;margin:1.5rem auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.media-card,.wish{overflow:hidden;border-radius:1.5rem;background:white;box-shadow:0 12px 35px #00698212}
.media-card img,.media-card video{width:100%;height:260px;object-fit:cover;display:block}
.media-body,.wish{padding:1.2rem}
.media-body a{color:var(--pink);font-weight:900}
.wish p{font-size:1.04rem}
.wish strong{color:var(--pink)}
footer{text-align:center;padding:3rem 1.2rem;background:#042f3d;color:white}
footer strong{font:800 1.6rem Baloo 2}
dialog{border:0;padding:0;border-radius:2rem;box-shadow:0 30px 90px #00334a55}
dialog::backdrop{background:linear-gradient(155deg,#009fc2dd,#073b4cee);backdrop-filter:blur(6px)}
.access-card{width:min(92vw,440px);padding:2.5rem;text-align:center}
.access-card h2{font-size:2.2rem}
.access-card label{text-align:left;display:grid;gap:.4rem;font-weight:800}
.access-card input{width:100%;margin:.5rem 0 1rem;padding:1rem;border:1px solid #afdfe3;border-radius:1rem;text-align:center;text-transform:uppercase;font-weight:900;letter-spacing:.12em}
.access-card .btn{width:100%}
.mini-logo{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 1rem;border-radius:50%;background:var(--aqua);color:white;font:800 1.4rem Baloo 2;border:9px solid var(--pink)}
@keyframes float{50%{transform:translateY(-20px) rotate(12deg)}
}
@media(max-width:740px){nav div{display:none}
.hero-copy{margin-top:3rem}
.ring{width:95px;height:95px;border-width:21px}
.sun{width:72px;height:72px}
.cards,.gallery,.message-grid{grid-template-columns:1fr}
.cards article:nth-child(2){transform:none}
.details{padding:2.2rem 1rem 2.4rem}
.details .heading{margin-bottom:1.2rem}
.details h2{font-size:clamp(1.55rem,7vw,2.1rem);line-height:1.05}
.details .heading>p:last-child{font-size:.95rem;margin-bottom:0}
.details .cards{gap:.65rem}
.details .cards article{min-height:0;padding:1rem 1.1rem;border-radius:1.2rem;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.85rem;align-items:baseline}
.details .cards b{font-size:1.35rem;grid-row:1 / span 2;align-self:center}
.details .cards small{grid-column:2}
.details .cards h3{grid-column:2;margin:.15rem 0 0;font-size:1.05rem}
.details .cards p{grid-column:2;font-size:.88rem}
.calendar-wrap{margin-top:1rem}
.dress-card{grid-template-columns:1fr;justify-items:center;text-align:center;gap:1rem}
.dress-card .eyebrow{text-align:center}
.dress-icons{justify-content:center}
.dress-icon img{width:56px;height:56px;max-width:56px}
.field-row{grid-template-columns:1fr}
.tabs{border-radius:1.2rem}
.tabs button{white-space:normal}
.media-card img,.media-card video{height:230px}
.live-controls{align-items:stretch;flex-direction:column}.camera-buttons{display:grid;grid-template-columns:1fr 1fr}.camera-buttons .btn{padding:.75rem .5rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}
}

/* Fotografías y video personalizados */
.hero-copy{margin-top:clamp(2rem,5vh,3.5rem)}
.hero-avatar{width:clamp(168px,42vw,240px);height:clamp(168px,42vw,240px);object-fit:cover;object-position:center 22%;border-radius:50%;border:6px solid white;box-shadow:0 0 0 10px var(--pink),0 18px 35px #00566f55;margin-bottom:1.15rem}
.venue{padding:clamp(4rem,9vw,7rem) 1.2rem;background:white}
.venue-grid{max-width:1100px;margin:auto;display:grid;grid-template-columns:1.15fr 1fr;gap:1rem}
.venue-grid figure{position:relative;min-height:250px;margin:0;overflow:hidden;border-radius:1.7rem;background:var(--ink);box-shadow:0 18px 45px #00698218}
.venue-grid img,.venue-grid video{display:block;width:100%;height:100%;min-height:250px;object-fit:cover}
.venue-video{grid-row:span 2}
.venue-video video{min-height:520px;object-fit:cover;background:#021d26}
.venue-main{grid-column:2}
.venue-grid figcaption{position:absolute;left:1rem;right:1rem;bottom:1rem;padding:.7rem 1rem;border-radius:1rem;background:#073b4ccc;color:white;font-weight:800;backdrop-filter:blur(7px)}
@media(max-width:740px){
  .hero-copy{margin-top:1.4rem}
  .hero-avatar{width:min(58vw,220px);height:min(58vw,220px)}
  .hero h1{font-size:clamp(7.4rem,52vw,12rem)}
  .turns{margin-bottom:0;font-size:1.45rem}
  .venue-grid{grid-template-columns:1fr}.venue-video,.venue-main{grid-row:auto;grid-column:auto}.venue-video video{min-height:460px}
}