/* ==========================================================================
   Patas & Cia — Clínica Veterinária
   Sistema de design baseado em airbnb/DESIGN.md
   Canvas branco · uma única voltagem de cor (Rausch) · cantos macios ·
   pesos tipográficos modestos · uma única camada de sombra.
   ========================================================================== */

/* ---------- TOKENS ---------- */
:root{
  /* colors */
  --primary:#ff385c;
  --primary-active:#e00b41;
  --primary-disabled:#ffd1da;
  --ink:#222222;
  --body:#3f3f3f;
  --muted:#6a6a6a;
  --muted-soft:#929292;
  --hairline:#dddddd;
  --hairline-soft:#ebebeb;
  --border-strong:#c1c1c1;
  --canvas:#ffffff;
  --surface-soft:#f7f7f7;
  --surface-strong:#f2f2f2;
  --on-primary:#ffffff;
  --legal-link:#428bff;

  /* radii */
  --r-xs:4px; --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:32px; --r-full:9999px;

  /* spacing */
  --s-xxs:2px; --s-xs:4px; --s-sm:8px; --s-md:12px; --s-base:16px;
  --s-lg:24px; --s-xl:32px; --s-xxl:48px; --s-section:64px;

  /* a única sombra do sistema */
  --shadow: rgba(0,0,0,.02) 0 0 0 1px, rgba(0,0,0,.04) 0 2px 6px 0, rgba(0,0,0,.1) 0 4px 8px 0;

  --font:'Inter','Airbnb Cereal VF',Circular,-apple-system,system-ui,Roboto,'Helvetica Neue',sans-serif;
  --container:1280px;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--font); font-size:16px; font-weight:400; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul{margin:0; padding:0; list-style:none}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button,input{font:inherit; color:inherit}
button{background:none; border:0; cursor:pointer}
svg{width:100%; height:100%; fill:currentColor}
svg .i-stroke,svg .i-stroke-thin{fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
svg .i-stroke-thin{stroke-width:1.1}
svg .i-neg{fill:#fff}

.skip-link{
  position:absolute; left:-999px; top:8px; z-index:200;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:var(--r-sm);
}
.skip-link:focus{left:16px}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px; border-radius:var(--r-xs)}

.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:40px}

/* ---------- TIPOGRAFIA ---------- */
.display-xl{font-size:28px; font-weight:700; line-height:1.28; letter-spacing:0}
.lead{font-size:16px; line-height:1.5; color:var(--body); max-width:56ch}
.muted{color:var(--muted); font-size:14px; line-height:1.43}
.micro{font-size:12px; font-weight:700; line-height:1.33; text-transform:uppercase; letter-spacing:.4px; color:var(--muted)}
.link-muted{font-size:14px; color:var(--muted); white-space:nowrap}
.link-muted:hover{color:var(--ink); text-decoration:underline}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.32px; text-transform:uppercase;
  color:var(--primary); margin-bottom:var(--s-base);
}

/* ---------- BOTÕES ---------- */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:14px 24px; border-radius:var(--r-sm);
  background:var(--primary); color:var(--on-primary);
  font-size:16px; font-weight:500; line-height:1.25;
  transition:background .18s ease, transform .18s ease;
}
.btn-primary:hover{background:#f3244c}
.btn-primary:active{background:var(--primary-active); transform:scale(.985)}
.btn-primary--block{width:100%}
.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:13px 23px; border-radius:var(--r-sm);
  background:var(--canvas); color:var(--ink); border:1px solid var(--ink);
  font-size:16px; font-weight:500; transition:background .18s ease, transform .18s ease;
}
.btn-secondary:hover{background:var(--surface-soft)}
.btn-secondary:active{transform:scale(.985)}
.btn-secondary--sm{height:42px; font-size:14px; padding:10px 18px; width:100%}
.btn-tertiary{
  padding:12px 14px; border-radius:var(--r-full); font-size:14px; font-weight:500;
  transition:background .18s ease;
}
.btn-tertiary:hover{background:var(--surface-soft)}

/* ==========================================================================
   TOP NAV
   ========================================================================== */
.top-nav{
  position:sticky; top:0; z-index:100;
  background:var(--canvas); border-bottom:1px solid var(--hairline-soft);
  transition:box-shadow .25s ease;
}
.top-nav.is-stuck{box-shadow:0 2px 12px rgba(0,0,0,.06)}
.top-nav__inner{
  max-width:var(--container); margin-inline:auto; padding-inline:40px; height:80px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--s-base);
}

.brand{display:flex; align-items:center; gap:8px; color:var(--primary)}
.brand__mark{width:32px; height:32px; flex:none}
.brand__word{font-size:20px; font-weight:700; letter-spacing:-.4px; color:var(--primary)}
.brand__word span{color:var(--ink); font-weight:500}

.product-tabs{display:flex; align-items:center; gap:var(--s-lg)}
.product-tab{
  position:relative; display:flex; align-items:center; gap:8px;
  padding:10px 4px 14px; color:var(--muted);
  font-size:16px; font-weight:600; line-height:1.25;
  transition:color .2s ease;
}
.product-tab::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--ink); border-radius:2px; transform:scaleX(0); transform-origin:center;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.product-tab:hover{color:var(--ink)}
.product-tab.is-active{color:var(--ink)}
.product-tab.is-active::after{transform:scaleX(1)}
.product-tab__icon{width:32px; height:32px; flex:none; color:var(--primary); opacity:.9}
.product-tab.is-active .product-tab__icon{opacity:1}
.new-tag{
  align-self:flex-start; margin-top:-4px;
  background:var(--canvas); color:var(--ink); border:1px solid var(--hairline);
  border-radius:var(--r-full); padding:2px 6px;
  font-size:8px; font-weight:700; letter-spacing:.32px; text-transform:uppercase; line-height:1.25;
}

.nav-utils{display:flex; align-items:center; justify-content:flex-end; gap:var(--s-xs)}
.icon-btn-outline{
  width:40px; height:40px; border-radius:var(--r-full);
  display:grid; place-items:center; color:var(--ink); transition:background .18s ease;
}
.icon-btn-outline svg{width:16px; height:16px}
.icon-btn-outline:hover{background:var(--surface-soft)}
.account-pill{
  display:flex; align-items:center; gap:10px; height:42px; padding:5px 5px 5px 12px;
  border:1px solid var(--hairline); border-radius:var(--r-full);
  transition:box-shadow .2s ease;
}
.account-pill:hover{box-shadow:var(--shadow)}
.account-pill__burger{width:16px; height:16px}
.account-pill__avatar{width:30px; height:30px; color:var(--muted); flex:none}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{padding:var(--s-xxl) 0 0}
.hero__head{max-width:760px}
.hero__title{
  font-size:clamp(34px,5.2vw,58px); font-weight:700; line-height:1.06;
  letter-spacing:-1.6px; margin-bottom:var(--s-base);
}
.hero__sub{font-size:18px; line-height:1.5; color:var(--body); max-width:52ch}

/* collage */
.hero-collage{
  display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:200px 160px;
  gap:var(--s-base); max-width:var(--container); margin:var(--s-xxl) auto 0; padding-inline:40px;
}
.hero-collage__item{position:relative; border-radius:var(--r-md); overflow:hidden; background:var(--surface-strong)}
.hero-collage__item img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.hero-collage__item:hover img{transform:scale(1.05)}
.hero-collage__item--a{grid-row:span 2}
.hero-collage__item--b{grid-column:span 2; grid-row:span 2}
.hero-collage__item--c{grid-column:4}
.hero-collage__item--d{grid-column:4}

.float-badge{
  position:absolute; top:12px; left:12px;
  background:var(--canvas); color:var(--ink); border-radius:var(--r-full);
  padding:4px 10px; font-size:11px; font-weight:600; line-height:1.18;
  box-shadow:var(--shadow);
}
.float-badge--live{display:inline-flex; align-items:center; gap:6px; top:auto; bottom:12px}
.pulse-dot{width:7px; height:7px; border-radius:50%; background:var(--primary); position:relative}
.pulse-dot::after{
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--primary);
  animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(3.2);opacity:0}}

/* ==========================================================================
   CATEGORY STRIP
   ========================================================================== */
.category-strip{
  position:relative; border-bottom:1px solid var(--hairline-soft);
  margin-top:var(--s-xxl); background:var(--canvas);
}
.category-strip__inner{
  display:flex; gap:var(--s-xl); overflow-x:auto; scrollbar-width:none;
  padding-block:var(--s-base); scroll-behavior:smooth;
}
.category-strip__inner::-webkit-scrollbar{display:none}
.cat{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:8px 4px 12px; color:var(--muted); font-size:12px; font-weight:500;
  white-space:nowrap; flex:none; opacity:.7; transition:opacity .2s ease, color .2s ease;
}
.cat svg{width:24px; height:24px}
.cat:hover{opacity:1; color:var(--ink)}
.cat::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--ink);
  transform:scaleX(0); transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.cat.is-active{opacity:1; color:var(--ink)}
.cat.is-active::after{transform:scaleX(1)}
.strip-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:var(--r-full);
  background:var(--canvas); border:1px solid var(--hairline);
  display:grid; place-items:center; box-shadow:var(--shadow);
}
.strip-nav svg{width:12px; height:12px}
.strip-nav--prev{left:8px}
.strip-nav--next{right:8px}
.strip-nav:hover{transform:translateY(-50%) scale(1.06)}

/* ==========================================================================
   SEÇÕES
   ========================================================================== */
.section{padding:var(--s-section) 0}
.section--soft{background:var(--surface-soft)}
.section__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-base);
  margin-bottom:var(--s-lg); flex-wrap:wrap;
}

/* ---------- cards de serviço ---------- */
.card-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-lg) var(--s-base)}
.svc-card{cursor:pointer}
.svc-card__photo{
  position:relative; aspect-ratio:1/1; border-radius:var(--r-md); overflow:hidden;
  background:var(--surface-strong); margin-bottom:var(--s-md);
}
.svc-card__photo img{width:100%; height:100%; object-fit:cover; user-select:none}

/* carrossel de fotos */
.car{
  position:absolute; inset:0; display:flex;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.car img{flex:0 0 100%; width:100%; height:100%}
.car-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border-radius:var(--r-full);
  background:rgba(255,255,255,.92); color:var(--ink);
  display:grid; place-items:center; box-shadow:var(--shadow);
  opacity:0; transition:opacity .2s ease, transform .2s ease; z-index:2;
}
.car-nav svg{width:12px; height:12px}
.car-nav--prev{left:10px}
.car-nav--next{right:10px}
.car-nav--next svg{transform:rotate(180deg)}
.svc-card:hover .car-nav,.car-nav:focus-visible{opacity:1}
.car-nav:hover{transform:translateY(-50%) scale(1.08); background:#fff}
@media (hover:none){ .car-nav{opacity:1} }

.heart{
  position:absolute; top:12px; right:12px; width:32px; height:32px;
  color:rgba(255,255,255,.9); filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));
  transition:transform .2s ease;
}
.heart svg{width:100%; height:100%; fill:rgba(0,0,0,.28); stroke:#fff; stroke-width:2}
.heart:hover{transform:scale(1.1)}
.heart.is-on svg{fill:var(--primary); stroke:#fff}
.dots{
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%); display:flex; z-index:2;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.dot{padding:5px; line-height:0}
.dot i{
  display:block; width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.65); transition:background .2s ease, transform .2s ease;
}
.dot.is-on i{background:#fff; transform:scale(1.1)}
.dot:hover i{background:#fff}
.svc-card__row{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-sm)}
.svc-card__meta h3{font-size:16px; font-weight:600; line-height:1.25}
.svc-card__meta p{margin-top:2px}
.price{font-size:14px; margin-top:var(--s-sm)!important; color:var(--ink)}
.price strong{font-weight:600}
.rating{display:inline-flex; align-items:center; gap:4px; font-size:14px; color:var(--ink); white-space:nowrap}
.rating svg{width:12px; height:12px; flex:none}

/* ---------- rating display ---------- */
.rating-band{text-align:center; border-top:1px solid var(--hairline-soft)}
.rating-display{display:flex; align-items:center; justify-content:center; gap:var(--s-base)}
.laurel{width:38px; height:86px; color:var(--ink)}
.rating-display__num{
  font-size:clamp(56px,9vw,84px); font-weight:700; line-height:1.1; letter-spacing:-1px;
  font-variant-numeric:tabular-nums;
}
.rating-display__tag{font-size:14px; font-weight:500; color:var(--ink)}
.rating-band__lead{
  max-width:60ch; margin:var(--s-lg) auto 0; color:var(--body); font-size:16px;
}
.stat-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-lg);
  margin-top:var(--s-xxl); padding-top:var(--s-xl); border-top:1px solid var(--hairline-soft);
}
.stat__num{font-size:28px; font-weight:700; line-height:1.2; font-variant-numeric:tabular-nums}
.stat__label{font-size:14px; color:var(--muted); margin-top:var(--s-xs)}

/* ---------- estrutura / amenities ---------- */
.amenity-layout{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-section); align-items:start}
.amenity-col .lead{margin-top:var(--s-md)}
.amenity-list{
  margin:var(--s-lg) 0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
}
.amenity-row{
  display:flex; align-items:flex-start; gap:var(--s-base); padding:12px 0;
  font-size:16px; line-height:1.5; color:var(--body);
}
.amenity-row + .amenity-row{border-top:1px solid var(--hairline-soft)}
.amenity-row svg{width:24px; height:24px; flex:none; color:var(--ink); margin-top:2px}
.amenity-row strong{color:var(--ink); font-weight:600}
.amenity-media{position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--surface-strong)}
.amenity-media img{width:100%; aspect-ratio:4/5; object-fit:cover}
.mini-card{
  position:absolute; left:24px; bottom:24px; right:24px;
  background:var(--canvas); border-radius:var(--r-md); padding:var(--s-base) var(--s-lg);
  box-shadow:var(--shadow);
}
.mini-card__label{font-size:11px; font-weight:600; color:var(--primary); text-transform:uppercase; letter-spacing:.32px}
.mini-card__value{font-size:14px; color:var(--muted); margin-top:2px}
.mini-card__big{font-size:28px; font-weight:700; line-height:1.2; font-variant-numeric:tabular-nums}

/* ---------- equipe ---------- */
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-lg)}
.host-card{
  background:var(--canvas); border:1px solid var(--hairline-soft); border-radius:var(--r-md);
  padding:var(--s-lg); display:flex; flex-direction:column; gap:var(--s-base);
  transition:box-shadow .25s ease, transform .25s ease;
}
.host-card:hover{box-shadow:var(--shadow); transform:translateY(-3px)}
.host-card__top{display:flex; align-items:center; gap:var(--s-md)}
.host-card__top h3{font-size:16px; font-weight:600}
.avatar{
  width:56px; height:56px; border-radius:var(--r-full); overflow:hidden; flex:none;
  background:var(--surface-strong); display:block;
}
.avatar img{width:100%; height:100%; object-fit:cover}
.avatar--sm{width:40px; height:40px}
.host-card__bio{font-size:14px; line-height:1.5; color:var(--body); flex:1}
.host-card__stats{display:flex; gap:var(--s-lg); font-size:14px; color:var(--muted); padding-top:var(--s-md); border-top:1px solid var(--hairline-soft)}
.host-card__stats strong{color:var(--ink); font-weight:600}

/* ---------- depoimentos ---------- */
.reviews-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-xl) var(--s-section); margin-top:var(--s-lg)}
.review{display:flex; flex-direction:column; gap:var(--s-md)}
.review__head{display:flex; align-items:center; gap:var(--s-md)}
.review__name{font-size:16px; font-weight:600}
.review p{font-size:16px; line-height:1.5; color:var(--body)}

/* ---------- planos ---------- */
.plans-layout{display:grid; grid-template-columns:1fr 390px; gap:var(--s-section); align-items:start}
.plans-col .lead{margin-top:var(--s-md); margin-bottom:var(--s-lg)}
.plan{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-base);
  background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--r-md);
  padding:var(--s-lg); margin-bottom:var(--s-md); cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.plan:hover{border-color:var(--border-strong)}
.plan.is-selected{border:2px solid var(--ink); padding:calc(var(--s-lg) - 1px)}
.plan h3{font-size:16px; font-weight:600; display:flex; align-items:center; gap:var(--s-sm)}
.plan .muted{margin-top:var(--s-xs); max-width:46ch}
.plan__price{font-size:14px; color:var(--muted); white-space:nowrap}
.plan__price strong{font-size:20px; font-weight:600; color:var(--ink); letter-spacing:-.18px}
.chip{
  background:var(--primary); color:var(--on-primary); border-radius:var(--r-full);
  padding:2px 8px; font-size:11px; font-weight:600; letter-spacing:0;
}

.reservation-card{
  position:sticky; top:104px;
  background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--r-md);
  box-shadow:var(--shadow); padding:var(--s-lg);
}
.reservation-card__price{font-size:16px; color:var(--muted)}
.reservation-card__price strong{font-size:21px; font-weight:700; color:var(--ink)}
.reservation-card__sub{font-size:14px; color:var(--muted); margin-top:var(--s-xs)}
.rc-fields{border:1px solid var(--border-strong); border-radius:var(--r-sm); margin:var(--s-base) 0; overflow:hidden}
.rc-field{display:block; padding:10px 12px; min-height:56px}
.rc-field span{display:block; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.32px}
.rc-field input{width:100%; border:0; background:transparent; font-size:14px; padding:2px 0}
.rc-field input:focus{outline:none}
.rc-field-split{display:grid; grid-template-columns:1fr 1fr; border-block:1px solid var(--border-strong)}
.rc-field-split .rc-field + .rc-field{border-left:1px solid var(--border-strong)}
.rc-stepper{display:flex; align-items:center; justify-content:space-between; gap:var(--s-base)}
.stepper{display:flex; align-items:center; gap:var(--s-md)}
.stepper button{
  width:32px; height:32px; border-radius:var(--r-full); border:1px solid var(--border-strong);
  display:grid; place-items:center; font-size:18px; color:var(--muted); line-height:1;
  transition:border-color .18s ease, color .18s ease;
}
.stepper button:hover{border-color:var(--ink); color:var(--ink)}
.stepper output{font-size:16px; min-width:16px; text-align:center; font-variant-numeric:tabular-nums}
.rc-note{text-align:center; font-size:14px; color:var(--muted); margin-top:var(--s-md)}
.rc-breakdown{margin-top:var(--s-lg); display:grid; gap:var(--s-md); font-size:14px; color:var(--body)}
.rc-breakdown li{display:flex; justify-content:space-between; gap:var(--s-base)}
.rc-breakdown li span:first-child{text-decoration:underline; text-decoration-color:var(--hairline)}
.strike{text-decoration:line-through; color:var(--muted)}
.rc-total{
  display:flex; justify-content:space-between; gap:var(--s-base);
  margin-top:var(--s-base); padding-top:var(--s-base); border-top:1px solid var(--hairline);
  font-size:16px;
}

/* ---------- CTA final ---------- */
.cta-band{padding:var(--s-section) 0; border-top:1px solid var(--hairline-soft)}
.cta-band__inner{
  display:grid; grid-template-columns:1.2fr .8fr; gap:var(--s-section); align-items:center;
}
.cta-band .lead{margin-top:var(--s-md)}
.cta-band__actions{display:flex; flex-wrap:wrap; gap:var(--s-md); margin-top:var(--s-lg)}
.cta-band__phone{
  background:var(--surface-soft); border-radius:var(--r-lg); padding:var(--s-xl);
}
.cta-band__num{
  font-size:32px; font-weight:700; letter-spacing:-1px; color:var(--primary);
  margin:var(--s-sm) 0; font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{border-top:1px solid var(--hairline); padding:var(--s-xxl) 0 var(--s-lg); background:var(--canvas)}
.footer__cols{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-lg)}
.footer__col h3{font-size:16px; font-weight:500; margin-bottom:var(--s-base)}
.footer__col a{display:block; font-size:14px; line-height:1.43; color:var(--body); padding:6px 0}
.footer__col a:hover{text-decoration:underline; color:var(--ink)}
.legal-band{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-base);
  flex-wrap:wrap; margin-top:var(--s-xxl); padding-top:var(--s-lg);
  border-top:1px solid var(--hairline); font-size:13px; color:var(--muted);
}
.legal-band__right{display:flex; align-items:center; gap:var(--s-base); flex-wrap:wrap}
.legal-band__right a:hover{text-decoration:underline; color:var(--ink)}
.legal-band__social{display:flex; gap:var(--s-md); margin-left:var(--s-sm)}
.legal-band__social a{width:18px; height:18px; color:var(--ink); display:block}

/* ---------- TOAST ---------- */
.toast{
  position:fixed; left:50%; bottom:32px; transform:translate(-50%,120%);
  background:var(--ink); color:#fff; border-radius:var(--r-sm);
  padding:14px 20px; font-size:14px; z-index:150; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:transform .35s cubic-bezier(.2,.8,.3,1), opacity .35s ease;
  max-width:calc(100vw - 32px); text-align:center;
}
.toast.is-on{transform:translate(-50%,0); opacity:1}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width:1128px){
  .container,.top-nav__inner,.hero-collage{padding-inline:24px}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .amenity-layout,.plans-layout,.cta-band__inner{grid-template-columns:1fr; gap:var(--s-xl)}
  .reservation-card{position:static; max-width:460px}
  .reviews-grid{gap:var(--s-xl)}
  .hero-collage{grid-template-rows:160px 130px}
}
@media (max-width:900px){
  .product-tabs{display:none}
  .top-nav__inner{grid-template-columns:1fr auto}
  .nav-utils__host{display:none}
  .stat-row{grid-template-columns:repeat(2,1fr); gap:var(--s-xl) var(--s-base)}
  .reviews-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:1fr; gap:var(--s-xl)}
  .hero-collage{grid-template-columns:repeat(2,1fr); grid-template-rows:auto}
  .hero-collage__item{aspect-ratio:4/3}
  .hero-collage__item--a{grid-column:span 2; grid-row:auto; aspect-ratio:16/9}
  .hero-collage__item--b{grid-column:span 2; grid-row:auto; aspect-ratio:16/9}
  .hero-collage__item--c,.hero-collage__item--d{grid-column:auto}
}
@media (max-width:744px){
  .container,.top-nav__inner,.hero-collage{padding-inline:16px}
  .strip-nav{display:none!important}
  .section{padding:var(--s-xxl) 0}
  .card-grid{grid-template-columns:1fr; gap:var(--s-lg)}
  .display-xl{font-size:24px}
  .hero__sub{font-size:16px}
  .plan{flex-direction:column; align-items:flex-start}
  .legal-band{flex-direction:column; align-items:flex-start}
  .cta-band__actions .btn-primary,.cta-band__actions .btn-secondary{width:100%}
}

/* estado inicial das animações — evita flash antes do GSAP assumir */
.js-anim [data-anim]{opacity:0}
/* linhas mascaradas do h1 (criadas pelo JS) */
.hero__title .line{display:block; overflow:hidden; padding-bottom:.06em}
.hero__title .line__in{display:block}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-anim [data-anim]{opacity:1!important; transform:none!important}
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important}
}