/* =========================================================================
   PET HOTEL GONDOMAR — QUINTA DIAMANTE
   Sistema de design "A Quinta"
   Paleta terrosa e solar, tipografia editorial, motivo de arco
   (eco do telhado curvo do corredor de boxes real das instalações).
   ========================================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* superfícies */
  --bone:#FAF6EF;
  --cream:#F3EBDE;
  --sand:#E5D9C7;
  --sand-2:#D6C7B0;

  /* tinta */
  --bark:#1B2620;
  --bark-70:rgba(27,38,32,.70);
  --bark-55:rgba(27,38,32,.55);
  --bark-12:rgba(27,38,32,.12);
  --bark-08:rgba(27,38,32,.08);

  /* verdes */
  --moss:#2C4636;
  --moss-2:#3D5F49;
  --sage:#8CA791;
  --sage-soft:#C7D6C9;

  /* acentos */
  --clay:#C0603A;
  --clay-2:#A94E2C;
  --sun:#E6A340;

  /* escuro */
  --night:#131C17;
  --night-2:#1C2A22;

  /* semânticos */
  --bg:var(--bone);
  --ink:var(--bark);
  --muted:var(--bark-70);
  --line:var(--bark-12);
  --brand:var(--moss);
  --accent:var(--clay);

  /* tipografia */
  --f-display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --f-ui:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;

  /* escala fluida */
  --t-hero:clamp(2.9rem,8.2vw,7rem);
  --t-h1:clamp(2.4rem,5.6vw,4.6rem);
  --t-h2:clamp(1.9rem,4.2vw,3.4rem);
  --t-h3:clamp(1.35rem,2.4vw,2rem);
  --t-h4:clamp(1.1rem,1.6vw,1.35rem);
  --t-lead:clamp(1.06rem,1.55vw,1.32rem);
  --t-body:1.0625rem;
  --t-sm:.9375rem;
  --t-xs:.8125rem;

  /* ritmo */
  --container:1240px;
  --gutter:clamp(1.25rem,5vw,3rem);
  --section:clamp(4.5rem,11vw,9rem);
  --stack:clamp(1.5rem,3vw,2.5rem);

  /* forma */
  --r-sm:6px;
  --r-md:14px;
  --r-lg:24px;
  --r-pill:999px;
  --arch:min(50vw,220px) min(50vw,220px) var(--r-md) var(--r-md) / min(38vw,180px) min(38vw,180px) var(--r-md) var(--r-md);

  /* elevação */
  --sh-1:0 1px 2px rgba(27,38,32,.06),0 4px 14px rgba(27,38,32,.06);
  --sh-2:0 2px 6px rgba(27,38,32,.07),0 18px 44px rgba(27,38,32,.11);
  --sh-3:0 30px 80px rgba(27,38,32,.20);

  /* movimento */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --dur:.32s;

  /* camadas */
  --z-base:1;
  --z-sticky:10;
  --z-header:20;
  --z-overlay:30;
  --z-modal:50;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-ui);
  font-size:var(--t-body);
  line-height:1.65;
  font-weight:450;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,picture,video,svg{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
table{border-collapse:collapse;width:100%}
::selection{background:var(--sun);color:var(--bark)}

/* foco visível e consistente */
:focus-visible{
  outline:3px solid var(--clay);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

/* ---------- 3. TIPOGRAFIA ---------- */
.display,h1,h2,h3{
  font-family:var(--f-display);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.022em;
  font-variation-settings:"SOFT" 22,"WONK" 1,"opsz" 100;
}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:1.14;letter-spacing:-.014em}
h4{font-family:var(--f-ui);font-size:var(--t-h4);font-weight:700;line-height:1.3;letter-spacing:-.01em}

.hero-type{
  font-family:var(--f-display);
  font-size:var(--t-hero);
  font-weight:600;
  line-height:.94;
  letter-spacing:-.035em;
  font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 144;
}
.italic{font-style:italic;font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 144}

.lead{font-size:var(--t-lead);line-height:1.6;color:var(--muted);max-width:60ch}
.prose p{max-width:68ch;margin-bottom:1.1em}
.prose p:last-child{margin-bottom:0}
.small{font-size:var(--t-sm)}
.xs{font-size:var(--t-xs)}
.muted{color:var(--muted)}

/* sobrelinha / eyebrow */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.75rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;
  color:var(--clay);
}
.eyebrow::before{
  content:"";width:26px;height:1px;background:currentColor;opacity:.6;flex:none;
}
.eyebrow.is-center::after{content:"";width:26px;height:1px;background:currentColor;opacity:.6;flex:none}

/* ---------- 4. LAYOUT ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container-wide{max-width:1480px}
.container-narrow{max-width:860px}
.section{padding-block:var(--section)}
.section-tight{padding-block:clamp(3rem,7vw,5.5rem)}

.grid{display:grid;gap:clamp(1.25rem,2.6vw,2.25rem)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.split-40{grid-template-columns:.82fr 1.18fr}
.split-60{grid-template-columns:1.18fr .82fr}
@media (max-width:900px){.split,.split-40,.split-60{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,6vw,2.75rem)}}

.stack-sm>*+*{margin-top:.75rem}
.stack-md>*+*{margin-top:1.25rem}
.stack-lg>*+*{margin-top:2rem}
.center{text-align:center}
.center .lead,.center .eyebrow{margin-inline:auto}
.section-head{max-width:64ch}
.section-head.center{margin-inline:auto}
.section-head>*+*{margin-top:1rem}

/* superfícies */
.surface-cream{background:var(--cream)}
.surface-sand{background:var(--sand)}
.surface-night{background:var(--night);color:var(--bone)}
.surface-moss{background:var(--moss);color:var(--bone)}
.surface-night .lead,.surface-night .muted,
.surface-moss .lead,.surface-moss .muted{color:rgba(250,246,239,.72)}
.surface-night .eyebrow,.surface-moss .eyebrow{color:var(--sun)}
.surface-night a:not(.btn),.surface-moss a:not(.btn){color:var(--sun)}

/* ---------- 5. BOTÕES ---------- */
.btn{
  --btn-bg:var(--moss);--btn-fg:var(--bone);--btn-bd:var(--moss);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:52px;padding:.85rem 1.7rem;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1.5px solid var(--btn-bd);border-radius:var(--r-pill);
  font-family:var(--f-ui);font-size:.9375rem;font-weight:700;letter-spacing:.005em;
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  /* sem will-change: os botões só se movem enquanto o rato lá está, e o JS
     do efeito magnético trata disso apenas nesse momento. Deixá-lo aqui
     criava uma camada de compositor por botão — dezenas por página. */
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--clay);
  transform:translateY(101%);
  transition:transform .45s var(--ease);
}
.btn:hover{color:#fff;border-color:var(--clay);box-shadow:var(--sh-2)}
.btn:hover::after{transform:translateY(0)}
.btn svg{width:18px;height:18px;flex:none}

.btn-accent{--btn-bg:var(--clay);--btn-bd:var(--clay);--btn-fg:#fff}
.btn-accent::after{background:var(--moss)}
.btn-accent:hover{border-color:var(--moss)}

.btn-ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--bark-12)}
.btn-ghost::after{background:var(--bark)}
.btn-ghost:hover{color:var(--bone);border-color:var(--bark)}

.btn-light{--btn-bg:transparent;--btn-fg:var(--bone);--btn-bd:rgba(250,246,239,.35)}
.btn-light::after{background:var(--bone)}
.btn-light:hover{color:var(--bark);border-color:var(--bone)}

.btn-sm{min-height:44px;padding:.6rem 1.2rem;font-size:.875rem}
.btn-lg{min-height:60px;padding:1rem 2.1rem;font-size:1rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.center .btn-row{justify-content:center}

/* link com sublinhado animado */
.link-u{
  display:inline-flex;align-items:center;gap:.45em;
  font-weight:700;font-size:.9375rem;color:var(--clay);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:2px;
  transition:background-size .45s var(--ease);
}
.link-u:hover{background-size:100% 1.5px}
.link-u svg{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.link-u:hover svg{transform:translateX(4px)}

/* ---------- 6. MOLDURAS DE IMAGEM (motivo de arco) ---------- */
.frame{
  position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--sand);
  /* isola a pintura da moldura: o recorte arredondado (sobretudo o arco) é
     aplicado uma vez e não volta a ser recalculado enquanto a fotografia se
     desloca lá dentro */
  contain:paint;
  transform:translateZ(0);
}
.frame img{width:100%;height:100%;object-fit:cover}
.frame-arch{border-radius:var(--arch)}
.frame-4x5{aspect-ratio:4/5}
.frame-3x4{aspect-ratio:3/4}
.frame-1x1{aspect-ratio:1/1}
.frame-3x2{aspect-ratio:3/2}
.frame-16x9{aspect-ratio:16/9}
.frame-tall{aspect-ratio:9/14}

/* a imagem move-se DENTRO da moldura (parallax interno / ken burns) */
.frame [data-kenburns],.frame [data-inner]{
  width:100%;height:114%;object-fit:cover;
  transform:translate3d(0,-6%,0) scale(1.06);
  backface-visibility:hidden;
}

/* A moldura tinha aqui um grão decorativo: uma grelha de pontos de 3 px por
   cima da fotografia. Foi removido de propósito.

   O grão é ESTÁTICO e a fotografia DESLIZA por baixo dele durante o scroll.
   Duas frequências altas a cruzarem-se produzem moiré — vê-se como a imagem
   a vibrar, a cintilar, "como se estivesse sempre a carregar". Era decoração;
   não vale um artefacto visível em cima das fotografias reais do cliente. */
.frame-plain::after{display:none}

/* etiqueta sobre imagem */
.frame-tag{
  position:absolute;left:1rem;bottom:1rem;z-index:2;
  display:inline-flex;align-items:center;gap:.5em;
  padding:.5rem 1rem;border-radius:var(--r-pill);
  background:rgba(250,246,239,.92);backdrop-filter:blur(8px);
  font-size:.8125rem;font-weight:700;color:var(--bark);
  box-shadow:var(--sh-1);
  max-width:calc(100% - 2rem);
}
.frame-tag svg{width:15px;height:15px;flex:none;color:var(--clay)}

/* ---------- 7. SISTEMA DE REVELAÇÃO ---------- */
/* Sem JS, tudo visível. Com JS, o script marca <html class="js"> */
.js [data-reveal]{opacity:0}
/* O estado inicial do "wipe" NÃO pode ser um clip-path aqui: um elemento
   totalmente recortado tem área visível zero e o IntersectionObserver
   nunca o dá como visível — a animação nunca arrancaria. O recorte é
   aplicado pelo JS no momento em que a animação começa. */
/* a máscara de cada linha precisa de folga para os descendentes (ç, p, q)
   não serem cortados — sobretudo na Fraunces, que desce bastante */
.js [data-split] .line{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
.js [data-split] .line-in{display:block}
/* O estado escondido da linha NÃO fica aqui de propósito: sendo uma regra
   permanente, voltaria a aplicar-se assim que o motor de animação limpasse
   o estilo inline, escondendo texto já revelado. Quem o põe é o JS. */
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1!important;clip-path:none!important;transform:none!important}
  .js [data-split] .line-in{transform:none!important}
}

/* ---------- 8. CABEÇALHO ---------- */
.header{
  position:fixed;inset:1rem 1rem auto;z-index:var(--z-header);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem .6rem .6rem 1.25rem;
  border-radius:var(--r-pill);
  background:rgba(250,246,239,.72);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(27,38,32,.09);
  box-shadow:0 1px 2px rgba(27,38,32,.04);
  transition:background-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease);
}
@media (min-width:1100px){.header{inset:1.25rem clamp(1.25rem,4vw,2.5rem) auto}}
.header.is-scrolled{background:rgba(250,246,239,.94);box-shadow:var(--sh-2)}
.header.is-hidden{transform:translateY(calc(-100% - 1.5rem))}

.brand{display:flex;align-items:center;gap:.7rem;flex:none}
.brand-mark{width:38px;height:38px;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--f-display);font-size:1.02rem;font-weight:700;letter-spacing:-.02em}
.brand-sub{font-size:.625rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);margin-top:3px}
@media (max-width:400px){.brand-name{font-size:.94rem}.brand-sub{font-size:.58rem;letter-spacing:.13em}}

.nav{display:none}
@media (min-width:1100px){
  .nav{display:flex;align-items:center;gap:.15rem}
  .nav a{
    position:relative;padding:.55rem .85rem;border-radius:var(--r-pill);
    font-size:.9rem;font-weight:600;color:var(--bark-70);
    transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease);
  }
  .nav a:hover{color:var(--bark);background:rgba(27,38,32,.055)}
  .nav a[aria-current="page"]{color:var(--moss)}
  .nav a[aria-current="page"]::after{
    content:"";position:absolute;left:50%;bottom:.28rem;translate:-50% 0;
    width:5px;height:5px;border-radius:50%;background:var(--clay);
  }
}
.header-cta{display:none}
@media (min-width:1100px){.header-cta{display:inline-flex}}

/* botão hambúrguer */
.burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;flex:none;border-radius:50%;
  background:var(--moss);color:var(--bone);
  transition:background-color var(--dur) var(--ease);
}
.burger:hover{background:var(--clay)}
@media (min-width:1100px){.burger{display:none}}
.burger-lines{position:relative;width:19px;height:12px}
.burger-lines span{
  position:absolute;left:0;width:100%;height:1.8px;border-radius:2px;background:currentColor;
  transition:transform .4s var(--ease),opacity .25s var(--ease);
}
.burger-lines span:nth-child(1){top:0}
.burger-lines span:nth-child(2){top:5.1px}
.burger-lines span:nth-child(3){top:10.2px}
.menu-open .burger-lines span:nth-child(1){transform:translateY(5.1px) rotate(45deg)}
.menu-open .burger-lines span:nth-child(2){opacity:0}
.menu-open .burger-lines span:nth-child(3){transform:translateY(-5.1px) rotate(-45deg)}

/* ---------- 9. MENU MÓVEL ---------- */
.menu{
  position:fixed;inset:0;z-index:var(--z-overlay);
  display:flex;flex-direction:column;
  background:var(--night);color:var(--bone);
  padding:6.5rem var(--gutter) 2rem;
  overflow-y:auto;overscroll-behavior:contain;
  visibility:hidden;opacity:0;
  transition:opacity .4s var(--ease),visibility .4s;
}
.menu.is-open{visibility:visible;opacity:1}
.menu-nav{display:flex;flex-direction:column;gap:.1rem;flex:1}
.menu-nav a{
  display:flex;align-items:baseline;gap:1rem;
  padding:.55rem 0;border-bottom:1px solid rgba(250,246,239,.10);
  font-family:var(--f-display);font-size:clamp(1.6rem,7vw,2.4rem);font-weight:600;
  letter-spacing:-.025em;line-height:1.15;
  transition:color var(--dur) var(--ease),padding-left var(--dur) var(--ease);
}
.menu-nav a:hover,.menu-nav a[aria-current="page"]{color:var(--sun);padding-left:.6rem}
.menu-nav .idx{font-family:var(--f-ui);font-size:.7rem;font-weight:700;letter-spacing:.1em;color:var(--sage);flex:none}
.menu-foot{margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(250,246,239,.14)}
.menu-foot .btn{width:100%}
.menu-contacts{margin-top:1.25rem;display:flex;flex-direction:column;gap:.4rem;font-size:.9375rem}
.menu-contacts a{color:rgba(250,246,239,.8);display:inline-flex;align-items:center;gap:.5rem}
.menu-contacts a:hover{color:var(--sun)}
.menu-contacts svg{width:16px;height:16px;flex:none;color:var(--sage)}

/* ---------- 10. CARTÕES ---------- */
.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--bone);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;
  transition:box-shadow .5s var(--ease),border-color .5s var(--ease);
}
a.card,.card-link{cursor:pointer}
a.card:hover,.card-link:hover{border-color:var(--sand-2);box-shadow:var(--sh-2)}
.card-media{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--sand)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
a.card:hover .card-media img,.card-link:hover .card-media img{transform:scale(1.06)}
.card-body{padding:clamp(1.25rem,2.4vw,1.9rem);display:flex;flex-direction:column;gap:.7rem;flex:1}
.card-body>.link-u{margin-top:auto;align-self:flex-start;padding-top:.4rem}

.card-num{
  position:absolute;top:1rem;right:1.15rem;z-index:2;
  font-family:var(--f-display);font-size:2.4rem;font-weight:600;line-height:1;
  color:rgba(250,246,239,.9);text-shadow:0 2px 14px rgba(27,38,32,.4);
}

/* cartão de serviço com pilha 3D */
.deck{perspective:1400px;perspective-origin:50% 40%}
.deck-item{transform-style:preserve-3d}

/* ---------- 11. ESTATÍSTICAS ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{background:var(--bg);padding:clamp(1.5rem,3.4vw,2.6rem) clamp(1rem,2vw,1.5rem);text-align:center}
.surface-night .stat,.surface-moss .stat{background:transparent}
.surface-night .stats,.surface-moss .stats{background:rgba(250,246,239,.16);border-color:rgba(250,246,239,.16)}
.stat-num{
  font-family:var(--f-display);font-size:clamp(2.2rem,5vw,3.6rem);font-weight:600;
  line-height:1;letter-spacing:-.03em;color:var(--moss);
  font-variant-numeric:tabular-nums;
}
.surface-night .stat-num,.surface-moss .stat-num{color:var(--sun)}
.stat-label{margin-top:.55rem;font-size:.8125rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.surface-night .stat-label,.surface-moss .stat-label{color:rgba(250,246,239,.7)}

/* ---------- 12. MARQUEE ---------- */
.marquee{
  position:relative;overflow:hidden;
  padding-block:clamp(1.1rem,2.4vw,1.9rem);
  border-block:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;width:max-content}
.marquee-group{display:flex;align-items:center;gap:clamp(1.5rem,4vw,3rem);padding-right:clamp(1.5rem,4vw,3rem);flex:none}
.marquee-item{
  display:inline-flex;align-items:center;gap:clamp(1.5rem,4vw,3rem);
  font-family:var(--f-display);font-size:clamp(1.1rem,2.6vw,1.9rem);font-weight:500;
  white-space:nowrap;color:var(--bark-70);
}
.marquee-item::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--clay);flex:none}
.surface-night .marquee{border-color:rgba(250,246,239,.16)}
.surface-night .marquee-item{color:rgba(250,246,239,.75)}

/* ---------- 13. TESTEMUNHOS ---------- */
.quote{
  position:relative;display:flex;flex-direction:column;gap:1.25rem;
  padding:clamp(1.5rem,3vw,2.25rem);
  background:var(--bone);border:1px solid var(--line);border-radius:var(--r-lg);
  break-inside:avoid;
}
.surface-night .quote,.surface-moss .quote{background:rgba(250,246,239,.05);border-color:rgba(250,246,239,.14)}
.quote-stars{display:flex;gap:3px;color:var(--sun)}
.quote-stars svg{width:16px;height:16px}
.quote-text{font-size:1.02rem;line-height:1.6}
.surface-night .quote-text{color:rgba(250,246,239,.9)}
.quote-foot{display:flex;align-items:center;gap:.75rem;margin-top:auto;padding-top:.25rem}
.quote-avatar{
  width:40px;height:40px;flex:none;border-radius:50%;
  background:var(--moss);color:var(--bone);
  display:grid;place-items:center;
  font-family:var(--f-display);font-size:1rem;font-weight:600;
}
.surface-night .quote-avatar{background:var(--sun);color:var(--bark)}
.quote-name{font-weight:700;font-size:.9375rem;line-height:1.2}
.quote-meta{font-size:.8125rem;color:var(--muted)}
.surface-night .quote-meta{color:rgba(250,246,239,.6)}
.quotes-masonry{columns:3;column-gap:clamp(1rem,2vw,1.5rem)}
.quotes-masonry .quote{margin-bottom:clamp(1rem,2vw,1.5rem)}
@media (max-width:1000px){.quotes-masonry{columns:2}}
@media (max-width:680px){.quotes-masonry{columns:1}}

/* ---------- 14. ACORDEÃO (FAQ) ---------- */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-btn{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.25rem;
  width:100%;padding:clamp(1.15rem,2.4vw,1.6rem) 0;text-align:left;
  font-family:var(--f-display);font-size:clamp(1.06rem,2.1vw,1.4rem);font-weight:600;
  line-height:1.3;letter-spacing:-.012em;
  transition:color var(--dur) var(--ease);
}
.acc-btn:hover{color:var(--clay)}
.acc-icon{
  position:relative;width:34px;height:34px;flex:none;margin-top:2px;
  border:1.5px solid var(--line);border-radius:50%;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform .45s var(--ease);
}
.acc-icon::before,.acc-icon::after{
  content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;
  background:currentColor;border-radius:2px;transition:transform .45s var(--ease),opacity .3s;
}
.acc-icon::before{width:13px;height:1.6px}
.acc-icon::after{width:1.6px;height:13px}
.acc-btn[aria-expanded="true"] .acc-icon{background:var(--clay);border-color:var(--clay);color:#fff;transform:rotate(180deg)}
.acc-btn[aria-expanded="true"] .acc-icon::after{transform:scaleY(0);opacity:0}
.acc-panel{overflow:hidden;height:0}
.acc-panel-inner{padding-bottom:clamp(1.15rem,2.4vw,1.7rem);max-width:70ch;color:var(--muted)}
.acc-panel-inner p+p{margin-top:.8em}
.acc-panel-inner ul{margin-top:.7em;display:flex;flex-direction:column;gap:.4em}
.acc-panel-inner li{padding-left:1.1em;position:relative}
.acc-panel-inner li::before{content:"";position:absolute;left:0;top:.65em;width:5px;height:5px;border-radius:50%;background:var(--clay)}

/* ---------- 15. TABELAS DE PREÇOS ---------- */
.price-table{
  width:100%;background:var(--bone);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.price-table caption{
  padding:1.1rem 1.35rem;text-align:left;background:var(--moss);color:var(--bone);
  font-family:var(--f-ui);font-weight:700;font-size:.9375rem;letter-spacing:.02em;
}
.price-table th,.price-table td{padding:.9rem 1.35rem;text-align:left;font-size:.9375rem;border-bottom:1px solid var(--line)}
.price-table thead th{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--cream)}
.price-table tbody tr:last-child th,.price-table tbody tr:last-child td{border-bottom:0}
.price-table tbody th{font-weight:600}
.price-table td:not(:first-child){font-variant-numeric:tabular-nums;font-weight:700;color:var(--moss);white-space:nowrap}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg)}

.price-card{
  display:flex;flex-direction:column;gap:1rem;
  padding:clamp(1.5rem,3vw,2.2rem);
  background:var(--bone);border:1px solid var(--line);border-radius:var(--r-lg);
}
.price-card.is-featured{background:var(--moss);color:var(--bone);border-color:var(--moss)}
.price-card.is-featured .muted,.price-card.is-featured .price-note{color:rgba(250,246,239,.7)}
.price-value{font-family:var(--f-display);font-size:clamp(2.1rem,4.6vw,3rem);font-weight:600;line-height:1;letter-spacing:-.03em}
.price-value small{font-family:var(--f-ui);font-size:.9375rem;font-weight:600;letter-spacing:0;opacity:.65}
.price-note{font-size:.8125rem;color:var(--muted)}
.price-list{display:flex;flex-direction:column;gap:.6rem;font-size:.9375rem}
.price-list li{display:flex;align-items:flex-start;gap:.6rem}
.price-list svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--clay)}
.price-card.is-featured .price-list svg{color:var(--sun)}

.badge{
  display:inline-flex;align-items:center;gap:.4em;
  padding:.35rem .8rem;border-radius:var(--r-pill);
  background:var(--sun);color:var(--bark);
  font-size:.6875rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}

/* ---------- 16. FORMULÁRIOS ---------- */
.field{display:flex;flex-direction:column;gap:.45rem}
/* só a etiqueta do próprio campo — nunca as etiquetas das opções em cartão,
   que vivem mais abaixo na árvore e têm estilo próprio */
.field>label,.legend{
  font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.field .req{color:var(--clay)}
.input,.select,.textarea{
  width:100%;min-height:52px;padding:.85rem 1.1rem;
  background:var(--bone);color:var(--ink);
  border:1.5px solid var(--line);border-radius:var(--r-md);
  font-size:1rem;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  appearance:none;
}
.textarea{min-height:130px;resize:vertical;line-height:1.6}
.input:hover,.select:hover,.textarea:hover{border-color:var(--sand-2)}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--moss);box-shadow:0 0 0 4px rgba(44,70,54,.13);
}
.select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C4636' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:18px;
  padding-right:2.8rem;cursor:pointer;
}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{
  border-color:var(--clay-2);box-shadow:0 0 0 4px rgba(169,78,44,.12);
}
.field-error{display:none;font-size:.8125rem;font-weight:600;color:var(--clay-2)}
.field-error.is-visible{display:flex;align-items:center;gap:.4rem}
.field-error svg{width:15px;height:15px;flex:none}
.field-hint{font-size:.8125rem;color:var(--muted)}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem}
.form-grid .full{grid-column:1/-1}
@media (max-width:680px){.form-grid{grid-template-columns:minmax(0,1fr)}}

fieldset{margin:0;padding:0;border:0;min-width:0}
.fieldset-head{margin-bottom:1.1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.7rem}
.fieldset-step{
  width:26px;height:26px;flex:none;border-radius:50%;
  background:var(--moss);color:var(--bone);display:grid;place-items:center;
  font-size:.75rem;font-weight:800;
}

/* opções em cartão (radio/checkbox visuais) */
.opts{display:grid;gap:.7rem}
.opts-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.opts-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:680px){.opts-2,.opts-3{grid-template-columns:minmax(0,1fr)}}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt-face{
  display:flex;align-items:center;gap:.8rem;min-height:56px;
  padding:.85rem 1.1rem;
  background:var(--bone);border:1.5px solid var(--line);border-radius:var(--r-md);
  font-size:.9375rem;font-weight:600;line-height:1.3;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.opt:hover .opt-face{border-color:var(--sand-2)}
.opt input:focus-visible+.opt-face{outline:3px solid var(--clay);outline-offset:3px}
.opt input:checked+.opt-face{border-color:var(--moss);background:var(--cream);box-shadow:inset 0 0 0 1px var(--moss)}
.opt-dot{
  width:20px;height:20px;flex:none;border-radius:50%;
  border:1.5px solid var(--sand-2);position:relative;transition:border-color var(--dur) var(--ease);
}
.opt-dot::after{
  content:"";position:absolute;inset:4px;border-radius:50%;background:var(--moss);
  transform:scale(0);transition:transform .3s var(--ease);
}
.opt input:checked+.opt-face .opt-dot{border-color:var(--moss)}
.opt input:checked+.opt-face .opt-dot::after{transform:scale(1)}
.opt-sq{border-radius:5px}
.opt-sq::after{border-radius:2px;inset:3px}
.opt-txt{display:flex;flex-direction:column;gap:1px}
.opt-note{font-size:.8125rem;font-weight:500;color:var(--muted)}

/* ---------- 17. SIMULADOR ---------- */
.sim{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,3.5vw,3rem);align-items:start}
@media (max-width:960px){.sim{grid-template-columns:minmax(0,1fr)}}
.sim-panel{
  background:var(--bone);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.35rem,3vw,2.25rem);
}
.sim-out{
  position:sticky;top:110px;
  background:var(--night);color:var(--bone);
  border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.25rem);
  box-shadow:var(--sh-3);
}
@media (max-width:960px){.sim-out{position:static}}
.sim-total{
  font-family:var(--f-display);font-weight:600;line-height:1;letter-spacing:-.035em;
  font-size:clamp(3rem,9vw,4.6rem);color:var(--sun);
  font-variant-numeric:tabular-nums;
}
.sim-lines{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(250,246,239,.16);display:flex;flex-direction:column;gap:.7rem}
.sim-line{display:flex;justify-content:space-between;gap:1rem;font-size:.9375rem;color:rgba(250,246,239,.82)}
.sim-line b{color:var(--bone);font-variant-numeric:tabular-nums;white-space:nowrap}
.sim-line.is-total{margin-top:.4rem;padding-top:.85rem;border-top:1px solid rgba(250,246,239,.16);font-size:1.06rem;color:var(--bone);font-weight:700}
.sim-disclaimer{
  margin-top:1.35rem;padding:.9rem 1rem;
  background:rgba(230,163,64,.14);border:1px solid rgba(230,163,64,.3);border-radius:var(--r-md);
  font-size:.8125rem;line-height:1.55;color:rgba(250,246,239,.86);
  display:flex;gap:.65rem;
}
.sim-disclaimer svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--sun)}

/* controlo numérico */
.stepper{display:flex;align-items:center;gap:.5rem}
.stepper button{
  width:44px;height:44px;flex:none;border-radius:50%;
  border:1.5px solid var(--line);background:var(--bone);
  display:grid;place-items:center;color:var(--moss);
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.stepper button:hover:not(:disabled){border-color:var(--moss);background:var(--moss);color:var(--bone)}
.stepper button:disabled{opacity:.38;cursor:not-allowed}
.stepper button svg{width:16px;height:16px}
.stepper output{
  min-width:64px;text-align:center;
  font-family:var(--f-display);font-size:1.5rem;font-weight:600;
  font-variant-numeric:tabular-nums;
}

/* ---------- 18. GALERIA ---------- */
.gallery-grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(.6rem,1.4vw,1.1rem);
}
.gallery-item{position:relative;overflow:hidden;border-radius:var(--r-md);background:var(--sand);cursor:zoom-in;grid-column:span 4;aspect-ratio:4/3}
.gallery-item.is-wide{grid-column:span 8;aspect-ratio:16/9}
.gallery-item.is-full{grid-column:span 12;aspect-ratio:21/9}
.gallery-item.is-half{grid-column:span 6;aspect-ratio:3/2}
.gallery-item.is-tall{aspect-ratio:3/4}
@media (max-width:760px){
  .gallery-item,.gallery-item.is-wide,.gallery-item.is-half{grid-column:span 6;aspect-ratio:1/1}
  .gallery-item.is-full{grid-column:span 12;aspect-ratio:16/9}
  .gallery-item.is-tall{aspect-ratio:3/4}
}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-item::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(19,28,23,.42),transparent 55%);
  opacity:0;transition:opacity .5s var(--ease);pointer-events:none;
}
.gallery-item:hover::after{opacity:1}
.gallery-cap{
  position:absolute;left:.9rem;bottom:.85rem;z-index:2;
  color:#fff;font-size:.8125rem;font-weight:700;
  opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
  text-shadow:0 1px 8px rgba(19,28,23,.6);
}
.gallery-item:hover .gallery-cap{opacity:1;transform:translateY(0)}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:var(--z-modal);
  display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);
  background:rgba(19,28,23,.94);backdrop-filter:blur(6px);
  visibility:hidden;opacity:0;transition:opacity .35s var(--ease),visibility .35s;
}
.lightbox.is-open{visibility:visible;opacity:1}
.lightbox-inner{display:flex;flex-direction:column;align-items:center;max-width:100%}
.lightbox img{max-width:100%;max-height:78vh;width:auto;border-radius:var(--r-md);box-shadow:var(--sh-3)}
.lightbox-cap{margin-top:1rem;color:rgba(250,246,239,.85);font-size:.9375rem;text-align:center;max-width:60ch}
.lightbox-close,.lightbox-prev,.lightbox-next{
  position:absolute;width:52px;height:52px;border-radius:50%;
  background:rgba(250,246,239,.13);color:var(--bone);
  display:grid;place-items:center;
  transition:background-color var(--dur) var(--ease);
}
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{background:rgba(250,246,239,.28)}
.lightbox-close{top:1rem;right:1rem}
.lightbox-prev{left:1rem;top:50%;translate:0 -50%}
.lightbox-next{right:1rem;top:50%;translate:0 -50%}
.lightbox svg{width:22px;height:22px}
@media (max-width:600px){
  .lightbox-prev{left:.5rem}.lightbox-next{right:.5rem}
  .lightbox-prev,.lightbox-next,.lightbox-close{width:46px;height:46px}
}

/* ---------- 19. PASSOS / TIMELINE ---------- */
.steps{display:grid;gap:clamp(1.5rem,3vw,2.5rem);counter-reset:step}
.steps-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.steps-3,.steps-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.steps-3,.steps-4{grid-template-columns:minmax(0,1fr)}}
.step{position:relative;display:flex;flex-direction:column;gap:.7rem;padding-top:2.9rem}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;top:0;left:0;
  font-family:var(--f-display);font-size:1.35rem;font-weight:600;color:var(--clay);
}
.step::after{
  content:"";position:absolute;top:.8rem;left:2.6rem;right:0;height:1px;background:var(--line);
}
@media (max-width:600px){.step::after{display:none}}
.surface-night .step::after{background:rgba(250,246,239,.18)}
.surface-night .step::before{color:var(--sun)}

/* ---------- 20. LISTA DE VERIFICAÇÃO ---------- */
.checklist{display:flex;flex-direction:column;gap:.85rem}
.checklist li{display:flex;align-items:flex-start;gap:.8rem;font-size:1rem;line-height:1.55}
.check-ico{
  width:24px;height:24px;flex:none;margin-top:1px;border-radius:50%;
  background:var(--sage-soft);color:var(--moss);display:grid;place-items:center;
}
.surface-night .check-ico,.surface-moss .check-ico{background:rgba(230,163,64,.2);color:var(--sun)}
.check-ico svg{width:13px;height:13px}

/* ---------- 21. HERO ---------- */
.hero{position:relative;padding-top:clamp(7.5rem,15vw,11rem);padding-bottom:clamp(3rem,7vw,5.5rem);overflow:hidden}
.hero-stage{perspective:1600px;perspective-origin:50% 30%}
.hero-plate{transform-style:preserve-3d;will-change:transform}
.hero-figure{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;background:var(--sand);box-shadow:var(--sh-3)}
@media (max-width:760px){.hero-figure{aspect-ratio:4/5}}
.hero-figure img{width:100%;height:118%;object-fit:cover;transform:translate3d(0,-8%,0) scale(1.06)}
.hero-figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(19,28,23,.62),rgba(19,28,23,.08) 45%,transparent 70%);
}
.hero-overlay{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(1.25rem,3vw,2.5rem);
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;
  color:var(--bone);
}
.hero-badges{display:flex;flex-wrap:wrap;gap:.5rem}
.hero-badge{
  display:inline-flex;align-items:center;gap:.45em;
  padding:.5rem 1rem;border-radius:var(--r-pill);
  background:rgba(250,246,239,.16);backdrop-filter:blur(10px);
  border:1px solid rgba(250,246,239,.24);
  font-size:.8125rem;font-weight:700;color:var(--bone);
}
.hero-badge svg{width:15px;height:15px;color:var(--sun)}

/* elementos 3D flutuantes do hero */
.float-card{
  position:absolute;z-index:3;
  background:rgba(250,246,239,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(27,38,32,.08);border-radius:var(--r-md);
  padding:.9rem 1.15rem;box-shadow:var(--sh-2);
  will-change:transform;
}
@media (max-width:900px){.float-card{display:none}}

/* ---------- 22. FAIXA DE APELO ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--moss);color:var(--bone)}
.cta-band .container{position:relative;z-index:3}
.cta-bg{
  position:absolute;inset:-12% 0;z-index:1;opacity:.26;
  background-size:cover;background-position:center;
  will-change:transform;
}
.cta-band::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(105deg,var(--moss) 20%,rgba(44,70,54,.78) 62%,rgba(44,70,54,.55));
}

/* ---------- 23. RODAPÉ ---------- */
.footer{background:var(--night);color:var(--bone);padding-block:clamp(3.5rem,7vw,5.5rem) 2rem}
.footer-top{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.15fr;gap:clamp(1.75rem,4vw,3rem)}
@media (max-width:1000px){.footer-top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.footer-top{grid-template-columns:minmax(0,1fr);gap:2rem}}
.footer h4{
  font-size:.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage);margin-bottom:1.1rem;
}
.footer-links{display:flex;flex-direction:column;gap:.6rem}
.footer-links a,.footer-contact a{
  font-size:.9375rem;color:rgba(250,246,239,.76);
  transition:color var(--dur) var(--ease);
  display:inline-flex;align-items:flex-start;gap:.6rem;
}
.footer-links a:hover,.footer-contact a:hover{color:var(--sun)}
.footer-contact{display:flex;flex-direction:column;gap:.75rem}
.footer-contact svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--sage)}
.footer-brand{display:flex;align-items:center;gap:.75rem;margin-bottom:1.1rem}
.footer-brand .brand-mark{width:44px;height:44px}
.footer-brand .brand-name{font-size:1.15rem}
.footer-blurb{font-size:.9375rem;line-height:1.65;color:rgba(250,246,239,.7);max-width:36ch}
.footer-social{display:flex;gap:.6rem;margin-top:1.35rem}
.footer-social a{
  width:44px;height:44px;border-radius:50%;
  background:rgba(250,246,239,.09);border:1px solid rgba(250,246,239,.14);
  display:grid;place-items:center;color:var(--bone);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.footer-social a:hover{background:var(--clay);border-color:var(--clay)}
.footer-social svg{width:19px;height:19px}
.footer-hours{display:flex;flex-direction:column;gap:.5rem;font-size:.9375rem}
.footer-hours li{display:flex;justify-content:space-between;gap:1rem;color:rgba(250,246,239,.76)}
.footer-hours b{color:var(--bone);white-space:nowrap;font-variant-numeric:tabular-nums}
.footer-bottom{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.75rem;
  border-top:1px solid rgba(250,246,239,.14);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  font-size:.8125rem;color:rgba(250,246,239,.55);
}
.footer-bottom a:hover{color:var(--sun)}

/* ---------- 24. BARRA DE AÇÃO MÓVEL ---------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);
  display:grid;grid-template-columns:1fr 1fr;gap:.5rem;
  padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(250,246,239,.93);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%);
  transition:transform .45s var(--ease);
}
.dock.is-visible{transform:translateY(0)}
.dock .btn{min-height:50px;width:100%;font-size:.875rem;padding-inline:.75rem}
@media (min-width:1100px){.dock{display:none}}

/* ---------- 25. MIGALHAS + CABEÇALHO DE PÁGINA ---------- */
.pagehead{position:relative;padding-top:clamp(7.5rem,14vw,10.5rem);padding-bottom:clamp(2.5rem,5vw,4rem);overflow:hidden}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--muted);margin-bottom:1.35rem}
.crumbs a:hover{color:var(--clay)}
.crumbs svg{width:13px;height:13px;opacity:.5}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

/* ---------- 26. GALERIA HORIZONTAL FIXA ---------- */
.hscroll{position:relative}
.hscroll-viewport{overflow:hidden}
.hscroll-track{display:flex;gap:clamp(.75rem,1.6vw,1.35rem)}
.hscroll-slide{flex:none;width:min(76vw,520px);border-radius:var(--r-lg);overflow:hidden;position:relative;aspect-ratio:4/5;background:var(--sand)}
.hscroll-slide img{width:100%;height:112%;object-fit:cover;transform:translate3d(0,-5%,0)}
.hscroll-slide figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(1rem,2.4vw,1.6rem);
  background:linear-gradient(to top,rgba(19,28,23,.86),transparent);
  color:var(--bone);
}
.hscroll-slide h3{font-size:1.25rem;color:var(--bone)}
.hscroll-slide p{font-size:.875rem;color:rgba(250,246,239,.82);margin-top:.3rem;max-width:34ch}
/* fallback móvel: scroll nativo com snap */
@media (max-width:900px){
  .hscroll-viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-inline:var(--gutter);scrollbar-width:none}
  .hscroll-viewport::-webkit-scrollbar{display:none}
  .hscroll-track{transform:none!important}
  .hscroll-slide{scroll-snap-align:center;width:min(82vw,380px)}
}

/* ---------- 27. INDICADOR DE SCROLL ---------- */
.scroll-hint{
  display:inline-flex;flex-direction:column;align-items:center;gap:.6rem;
  font-size:.6875rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.hero-overlay .scroll-hint{color:rgba(250,246,239,.9);text-shadow:0 1px 10px rgba(19,28,23,.5)}
.hero-overlay .scroll-hint-line{background:rgba(250,246,239,.35)}
.hero-overlay .scroll-hint-line::after{background:var(--sun)}
.scroll-hint-line{width:1px;height:46px;background:var(--line);position:relative;overflow:hidden}
.scroll-hint-line::after{
  content:"";position:absolute;top:0;left:0;width:100%;height:40%;background:var(--clay);
  animation:hintFall 2.1s var(--ease-io) infinite;
}
@keyframes hintFall{0%{transform:translateY(-110%)}60%,100%{transform:translateY(260%)}}
@media (prefers-reduced-motion:reduce){.scroll-hint-line::after{animation:none;transform:none;height:100%;opacity:.35}}

/* ---------- 28. NOTAS / AVISOS ---------- */
.note{
  display:flex;gap:.85rem;padding:1.05rem 1.25rem;
  background:var(--cream);border:1px solid var(--line);border-left:3px solid var(--clay);
  border-radius:var(--r-md);font-size:.9375rem;line-height:1.6;color:var(--muted);
}
.note svg{width:19px;height:19px;flex:none;margin-top:2px;color:var(--clay)}
.note b{color:var(--ink)}
.surface-night .note{background:rgba(250,246,239,.06);border-color:rgba(250,246,239,.14);border-left-color:var(--sun);color:rgba(250,246,239,.78)}
.surface-night .note svg{color:var(--sun)}
.surface-night .note b{color:var(--bone)}

/* ---------- 29. ECRÃ DE SUCESSO ---------- */
.success{
  display:none;text-align:center;
  padding:clamp(2rem,5vw,3.5rem) clamp(1.25rem,3vw,2.5rem);
  background:var(--bone);border:1px solid var(--line);border-radius:var(--r-lg);
}
.success.is-visible{display:block}
.success-ring{
  width:88px;height:88px;margin:0 auto 1.5rem;border-radius:50%;
  background:var(--sage-soft);color:var(--moss);display:grid;place-items:center;
}
.success-ring svg{width:38px;height:38px}
.success-recap{
  margin:1.75rem auto 0;max-width:460px;text-align:left;
  background:var(--cream);border-radius:var(--r-md);padding:1.25rem 1.4rem;
  display:flex;flex-direction:column;gap:.6rem;font-size:.9375rem;
}
.success-recap div{display:flex;justify-content:space-between;gap:1rem}
.success-recap b{text-align:right}

/* ---------- 30. UTILITÁRIOS ---------- */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;top:-100px;left:1rem;z-index:100;
  padding:.85rem 1.4rem;border-radius:var(--r-pill);
  background:var(--moss);color:var(--bone);font-weight:700;font-size:.9375rem;
  transition:top .25s var(--ease);
}
.skip-link:focus{top:1rem}
.no-scroll{overflow:hidden}
.hidden{display:none!important}
.mt-0{margin-top:0}
.mt-lg{margin-top:clamp(2rem,4vw,3.25rem)}
.mt-md{margin-top:clamp(1.25rem,2.6vw,2rem)}
.pill-list{display:flex;flex-wrap:wrap;gap:.5rem}
.pill{
  display:inline-flex;align-items:center;gap:.45em;
  padding:.45rem 1rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--bone);
  font-size:.8125rem;font-weight:600;color:var(--muted);
}
.pill svg{width:14px;height:14px;color:var(--clay)}
.surface-night .pill{background:rgba(250,246,239,.06);border-color:rgba(250,246,239,.16);color:rgba(250,246,239,.8)}
.surface-night .pill svg{color:var(--sun)}

/* ---------- 31. AFINAÇÕES PARA ECRÃ PEQUENO ---------- */
@media (max-width:560px){
  /* botões a toda a largura: alvos maiores e uma coluna limpa */
  .btn-row:not(.btn-row-inline){flex-direction:column;align-items:stretch}
  .btn-row:not(.btn-row-inline) .btn{width:100%}

  /* o hero já tem informação que chegue: o indicador de scroll sai */
  .hero-overlay .scroll-hint{display:none}
  .hero-overlay{padding:1rem}
  .hero-badge{font-size:.75rem;padding:.4rem .75rem;gap:.35em}
  .hero-badge svg{width:13px;height:13px}
  .hero-badges{gap:.4rem}

  /* etiquetas sobre fotografia mais discretas */
  .frame-tag{left:.75rem;bottom:.75rem;font-size:.75rem;padding:.4rem .8rem}

  /* passos: numeração alinhada e sem linha */
  .step{padding-top:2.4rem}

  /* tabelas: primeira coluna não encolhe até partir palavras */
  .price-table th,.price-table td{padding:.8rem 1rem;font-size:.875rem}
  .price-table caption{padding:.9rem 1rem;font-size:.875rem}

  /* citações mais compactas */
  .quote{padding:1.25rem}
  .quote-text{font-size:.9688rem}

  /* rodapé: contactos com espaço para respirar */
  .footer-bottom{flex-direction:column;gap:.5rem}
}

@media (max-width:400px){
  .hero-badges .hero-badge:nth-child(n+3){display:none}
  .stepper output{min-width:52px;font-size:1.35rem}
}

/* barra de ação fixa: reservar espaço para não tapar o rodapé */
@media (max-width:1099px){
  .has-dock .footer{padding-bottom:6rem}
}

/* ---------- 32. IMPRESSÃO ---------- */
@media print{
  .header,.menu,.dock,.lightbox,.marquee,.scroll-hint,.cta-band{display:none!important}
  body{background:#fff;color:#000}
  .frame::after{display:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em}
}