:root{
  --navy:#182c50; --gold:#b89250; --gold-2:#d9b978; --ivory:#fbf8f1; --ink:#2a3552;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100vh;background:var(--ivory);color:var(--navy);
  font-family:"Cormorant Garamond","Palatino Linotype",Palatino,Georgia,serif;
  display:flex;flex-direction:column;overflow-x:hidden;position:relative;
}

/* fondo */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,#fff 0%,var(--ivory) 60%,#f3ecdc 100%)}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;animation:float 16s ease-in-out infinite}
.o1{width:38vmax;height:38vmax;background:var(--gold-2);top:-14vmax;right:-10vmax}
.o2{width:30vmax;height:30vmax;background:#9fb0d4;bottom:-10vmax;left:-8vmax;animation-delay:-8s}
.ridge{position:absolute;left:0;right:0;bottom:0;width:100%;height:22vh;fill:var(--navy);opacity:.06;
  transform:translateY(30px);animation:rise 2.4s .6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes float{50%{transform:translate(3vmax,2vmax) scale(1.08)}}
@keyframes rise{to{transform:none}}

main{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:clamp(56px,8vh,90px) 20px 24px;gap:18px}

/* logo: se "construye" de abajo hacia arriba */
.logo-wrap{position:relative;width:min(440px,78vw);overflow:hidden}
.logo{display:block;width:100%;height:auto;clip-path:inset(100% 0 0 0);
  animation:build 2.6s .3s cubic-bezier(.65,0,.25,1) forwards}
.shine{position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);
  transform:translateX(-120%);animation:shine 5s 3.2s ease-in-out infinite;mix-blend-mode:soft-light}
@keyframes build{to{clip-path:inset(0 0 0 0)}}
@keyframes shine{0%{transform:translateX(-120%)}40%,100%{transform:translateX(120%)}}

.badge{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:.78rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--gold);padding:8px 18px;border:1px solid var(--gold);border-radius:99px;
  position:relative}
.badge::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold);
  margin-right:10px;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.25;transform:scale(.7)}}

h1{font-weight:600;font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1.2;max-width:24ch}
.zones{color:var(--ink);opacity:.8;font-style:italic;font-size:clamp(1rem,2vw,1.25rem)}

.progress{width:min(360px,80vw);height:4px;background:rgba(24,44,80,.12);border-radius:4px;overflow:hidden}
.progress span{display:block;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2),var(--gold));background-size:200% 100%;
  animation:bar 3s 1s ease-out forwards,slide 2.2s linear infinite}
@keyframes bar{to{width:72%}}
@keyframes slide{to{background-position:-200% 0}}

.count{display:flex;gap:clamp(10px,2.5vw,22px);margin-top:4px}
.count div{min-width:clamp(64px,17vw,92px);padding:12px 6px;border-radius:12px;background:#fff;
  box-shadow:0 6px 24px rgba(24,44,80,.09);border:1px solid rgba(184,146,80,.35)}
.count b{display:block;font-size:clamp(1.6rem,5vw,2.4rem);font-weight:700;font-variant-numeric:tabular-nums}
.count small{font-family:system-ui,sans-serif;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.launch{font-size:1rem;opacity:.75;font-style:italic}

.contact{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px}
.btn{display:flex;align-items:center;gap:12px;text-align:left;text-decoration:none;color:#fff;
  background:var(--navy);padding:12px 20px;border-radius:12px;font-weight:600;
  transition:transform .25s,box-shadow .25s,background .25s;box-shadow:0 6px 18px rgba(24,44,80,.22)}
.btn:hover,.btn:focus-visible{transform:translateY(-3px);background:#22406f;box-shadow:0 10px 26px rgba(24,44,80,.3)}
.btn svg{width:26px;height:26px;fill:var(--gold-2);flex:none}
.btn span{display:flex;flex-direction:column;line-height:1.25}
.btn em{font-family:system-ui,sans-serif;font-style:normal;font-weight:400;font-size:.8rem;opacity:.85}

.social{display:flex;gap:14px;margin-top:4px}
.social a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--gold);transition:.25s}
.social svg{width:21px;height:21px;fill:var(--navy);transition:.25s}
.social a:hover,.social a:focus-visible{background:var(--gold);transform:translateY(-3px) rotate(-6deg)}
.social a:hover svg,.social a:focus-visible svg{fill:#fff}

footer{position:relative;z-index:1;text-align:center;padding:18px;font-family:system-ui,sans-serif;
  font-size:.75rem;letter-spacing:.08em;opacity:.55}

.lang{position:fixed;top:16px;right:16px;z-index:5;display:flex;align-items:center;gap:8px;cursor:pointer;
  font-family:system-ui,sans-serif;font-size:.75rem;font-weight:600;letter-spacing:.1em;
  background:#fff;border:1px solid var(--gold);color:var(--navy);padding:7px 12px;border-radius:99px}
.lang i{width:1px;height:12px;background:var(--gold)}
.lang span{opacity:.45}.lang span.on{opacity:1;color:var(--gold)}

/* entrada escalonada */
main>*:not(.logo-wrap){opacity:0;transform:translateY(16px);animation:in .9s cubic-bezier(.2,.7,.2,1) forwards}
.badge{animation-delay:2.2s}h1{animation-delay:2.4s}.zones{animation-delay:2.6s}.progress{animation-delay:2.8s}
.count{animation-delay:3s}.launch{animation-delay:3.1s}.contact{animation-delay:3.3s}.social{animation-delay:3.5s}
@keyframes in{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important}
  .logo{clip-path:none}
}
@media (max-width:480px){.btn{width:100%}}