/*! Vyntaro · © 2026 Vyntaro. Uso exclusivo de Punta Cana RDD Inmobiliaria según contrato. VTR-PCRDD-2026-9d99923a */
/* Layout: una pantalla. Entrada azul marino con el nombre en grande que se desliza hacia arriba y deja ver el inicio: texto + logo. */
:root{
  --ivory:#ffffff; --white:#ffffff;
  --navy:#0e2a55; --navy-deep:#081a38; --navy-ink:#1d2a40; --muted:#5b6578;
  --gold:#c8962f; --gold-soft:#e9c977; --gold-ink:#8a6114; --line:#e4dccb;
  --wa:#1f9e55; --wa-hover:#178a48;
  --display:"Marcellus","Cinzel",Georgia,"Times New Roman",serif;
  --body:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  color-scheme:light;
  --vtr-build:"VTR-PCRDD-2026-9d99923a";
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ivory);color:var(--navy-ink);font:400 16.5px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* Entrada */
.intro{position:fixed;inset:0;z-index:20;background:var(--navy-deep);display:grid;place-items:center;text-align:center;
  padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(16px,env(safe-area-inset-left,0px));
  animation:introOut .9s cubic-bezier(.7,0,.2,1) 2.3s forwards}
.intro-in{display:grid;gap:18px;justify-items:center}
.intro-name{font:400 clamp(2.6rem,10vw,7.5rem)/1 var(--display);color:var(--white);letter-spacing:.04em;margin:0;white-space:nowrap}
.intro-name span{display:inline-block;opacity:0;transform:translateY(.35em);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
.intro-name .w2{animation-delay:.15s}
.intro-name .w3{color:var(--gold-soft);animation-delay:.3s}
.intro-rule{width:min(520px,70vw);height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:scaleX(0);animation:grow .9s ease .7s forwards}
.intro-sub{font:600 clamp(.72rem,1.6vw,.95rem)/1 var(--body);letter-spacing:.55em;padding-left:.55em;color:var(--gold-soft);opacity:0;animation:fade .7s ease 1.1s forwards}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes grow{to{transform:scaleX(1)}}
@keyframes fade{to{opacity:1}}
@keyframes introOut{to{transform:translateY(-100%);visibility:hidden}}
@media (max-width:520px){.intro-name{white-space:normal;display:grid;gap:.08em}}

/* Inicio */
.page{min-height:100%;display:grid;grid-template-rows:1fr auto;position:relative;overflow:hidden}
.page::after{content:"";position:absolute;inset:auto 0 0 0;height:120px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70 C240 30 480 110 720 70 S1200 30 1440 70' fill='none' stroke='%23c8962f' stroke-width='1.5' opacity='.55'/%3E%3Cpath d='M0 92 C260 56 500 128 760 90 S1220 54 1440 88' fill='none' stroke='%230e2a55' stroke-width='1.5' opacity='.25'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,90px);align-items:center;max-width:1160px;width:100%;margin-inline:auto;
  padding-block:clamp(40px,7vh,90px) clamp(70px,10vh,120px);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  animation:pageIn 1s ease 2.6s both}
@keyframes pageIn{from{opacity:0;transform:translateY(18px)}}
.text{display:grid;gap:22px;justify-items:start;min-width:0}
.eyebrow{font:600 .74rem/1 var(--body);letter-spacing:.28em;text-transform:uppercase;color:var(--gold-ink);display:flex;align-items:center;gap:14px;margin:0}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold)}
h1{font:400 clamp(2.4rem,5.4vw,4.2rem)/1.08 var(--display);color:var(--navy);margin:0;text-wrap:balance}
.services{margin:0;font:500 1.05rem var(--body);letter-spacing:.08em;color:var(--navy-ink)}
.services i{font-style:normal;color:var(--gold);padding-inline:.5em}
.lead{margin:0;color:var(--muted);font-size:1.05rem}
.wa-btn{display:inline-flex;align-items:center;gap:12px;background:var(--wa);color:#fff;text-decoration:none;font:700 1rem var(--body);letter-spacing:.02em;padding:16px 26px;border-radius:999px;box-shadow:0 14px 30px -14px rgba(8,26,56,.55);transition:background .2s,transform .2s}
.wa-btn:hover{background:var(--wa-hover);transform:translateY(-1px)}
.wa-btn svg{width:24px;height:24px;flex:none}
.phone{margin:0;font-size:.95rem;color:var(--muted)}
.phone b{color:var(--navy);font-weight:600;font-variant-numeric:tabular-nums;user-select:all}
.logo{justify-self:center;width:100%;max-width:480px}
.logo img{width:100%;height:auto;mix-blend-mode:multiply}
footer{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:.8rem;color:var(--muted);
  max-width:1160px;width:100%;margin-inline:auto;padding-block:0 22px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;text-align:center;gap:18px}
  .text{justify-items:center}
  .eyebrow{display:none}
  .logo{order:-1;max-width:260px}
  footer{justify-content:center;text-align:center}
}

.wa-float{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:8;width:58px;height:58px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(8,26,56,.5);text-decoration:none;animation:fade .6s ease 3s both}
.wa-float svg{width:30px;height:30px}

@media (prefers-reduced-motion:reduce){
  .intro{animation:fade .4s ease 1.2s reverse both, introHide 0s 1.6s forwards}
  .intro-name span,.intro-rule,.intro-sub{animation:none;opacity:1;transform:none}
  .hero,.wa-float{animation:none}
  .wa-btn{transition:none}
}
@keyframes introHide{to{visibility:hidden;opacity:0}}

.no-intro .intro{display:none}
.no-intro .hero,.no-intro .wa-float{animation:none}