/* Base: tokens de design, reset, tipografia, botoes, utilitarios e animacoes */
:root{
  /* Paleta baseada em grandocamaragogi.resortallinclusive.com.br */
  --sand:#FFFFFF;
  --sand-2:#E9F8FD;
  --paper:#F4FBFE;
  --ink:#0F2D40;
  --ink-2:#44596A;
  --muted:#53677A;
  --ocean:#045279;
  --ocean-2:#0A6C9C;
  --sea:#0A6C9C;
  --sky:#5AB3DE;
  --foam:#E9F8FD;
  --coral:#F3811D;
  --coral-d:#D96A0B;
  --green:#04B474;
  --book:#CC4A00;
  --sun:#FFC000;
  --line:rgba(4,82,121,.12);
  --radius:22px;
  --radius-sm:14px;
  --shadow:0 30px 60px -30px rgba(4,82,121,.35);
  --serif:"Montserrat", "Segoe UI", Arial, sans-serif;
  --sans:"Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter:clamp(16px,4vw,44px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gutter)}
section{position:relative}
.sec{padding:clamp(80px,11vw,150px) 0}

/* ---------- Tipografia ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:-.02em;line-height:1.12;margin:0}
h2{font-weight:800;color:var(--ocean)}
h2{font-size:clamp(2rem,4vw,3.3rem)}
h1 em{font-style:normal;color:var(--sea)}
h2 em{display:block;font-family:var(--sans);font-style:normal;font-weight:300;font-size:clamp(1.05rem,1.55vw,1.3rem);letter-spacing:0;line-height:1.45;color:var(--ink-2);margin-top:.7em;max-width:40ch}
/* Títulos de seção: número grande translúcido + palavra fina + título em negrito */
.sh{position:relative;isolation:isolate}

.sh .eyebrow{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(1.35rem,2.2vw,1.85rem);letter-spacing:-.01em;text-transform:none;color:var(--ocean);margin:0 0 2px}
.sh .eyebrow::before{display:none}

h3{font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.2;letter-spacing:-.01em}
p{margin:0 0 1em}
.lead{font-size:clamp(1.02rem,1.35vw,1.15rem);font-weight:300;color:var(--ink-2);max-width:56ch}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--sea);margin-bottom:22px}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.sec-head{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:clamp(36px,5vw,60px);max-width:760px}
.sec-head .lead{margin:0;justify-self:start;max-width:62ch}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}.sec-head .lead{justify-self:start}}

/* Resposta direta (AEO) */
.answer{border-left:2px solid var(--coral);padding:4px 0 4px 18px;font-size:15.5px;color:var(--ink-2);max-width:62ch;margin-top:26px}
.answer strong{color:var(--ink)}

/* ---------- Botões ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;border:0;border-radius:999px;padding:16px 26px;font-weight:600;font-size:15.5px;text-decoration:none;transition:transform .35s var(--ease),background .3s,box-shadow .3s;white-space:nowrap}
.btn .arr{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.18);transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px) rotate(-8deg)}
.btn-coral{background:#C2560E;color:#fff;box-shadow:0 14px 30px -14px rgba(243,129,29,.8)}
.btn-coral:hover{background:#A6480A;transform:translateY(-2px)}
.btn-green{background:#037F52;color:#fff;box-shadow:0 14px 30px -14px rgba(4,180,116,.8)}
.btn-green:hover{background:#026B45;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line);padding:14px 22px}
.btn-ghost:hover{border-color:var(--ink)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light .arr{background:var(--sand-2)}
.link-u{font-weight:600;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .35s var(--ease)}
.link-u:hover{background-size:0 1px;background-position:100% 100%}


/* ---------- Sprite SVG em linha ---------- */
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.logo-text{fill:var(--logo-ink,#1F4F78)}

/* ---------- Utilitarios ---------- */
.mt-14{margin-top:14px!important}
.mt-20{margin-top:20px!important}
.mt-22{margin-top:22px!important}
.mt-24{margin-top:24px!important}
.m-0{margin:0!important}
.mb-4{margin-bottom:4px!important}
.pos-rel{position:relative!important}
.text-sun{color:var(--sun)!important}
.text-coral{color:var(--coral)!important}
.sw-hot{background:#FFC000!important}
.sw-cool{background:#0076C1!important}
.eyebrow-light{color:#fff!important;justify-content:center!important}

/* ---------- Animacoes (keyframes compartilhados) ---------- */
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(4,180,116,.6),0 30px 60px -25px rgba(0,0,0,.45)}100%{box-shadow:0 0 0 22px rgba(4,180,116,0),0 30px 60px -25px rgba(0,0,0,.45)}}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.05)}}
@keyframes cue{to{top:100%}}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.55);opacity:0}}

/* ---------- Revelar ao rolar ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.1s}.reveal[data-d="2"]{transition-delay:.2s}.reveal[data-d="3"]{transition-delay:.3s}
.clip{clip-path:inset(12% 12% 12% 12% round 22px);transition:clip-path 1.4s var(--ease)}
.clip.in{clip-path:inset(0 0 0 0 round 22px)}
@media (prefers-reduced-motion:reduce){
  .reveal,.clip{opacity:1;transform:none;clip-path:none;transition:none}
  .hero-media img,.collage .stamp{animation:none}
}