/* ═══════════════════════════════════════════════════════════════════
   ESSA COLORS SERVICES — Central Florida
   Paleta oficial na proporção do manual: teal 60% · green 25% · lime 10%

   Contraste conferido por cálculo, não por impressão:
     texto Charcoal #1E2A28 sobre Essa Green #46A913 → 4,90:1  ✅ AA
     texto branco     sobre Essa Green               → 3,02:1  ❌ reprova
   Por isso o botão de ação leva texto escuro. Quando o layout pedir
   texto claro, o preenchimento vira Palm Forest (#2E6A27 = 6,55:1).
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --teal:#153333;        /* 60% — fundos e cabeçalhos */
  --teal-2:#0E2424;
  --green:#46A913;       /* 25% — COR DE AÇÃO */
  --lime:#8FDD2A;        /* 10% — acento, nunca texto longo */
  --palm:#2E6A27;
  --coconut:#F4F7F2;
  --charcoal:#1E2A28;
  --line:rgba(244,247,242,.14);
  --line-dark:rgba(30,42,40,.12);
  --sans:Montserrat,system-ui,-apple-system,sans-serif;
  --script:"Dancing Script",cursive;
  --wrap:1240px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--coconut);color:var(--charcoal);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,48px)}

h1,h2,h3{font-weight:700;line-height:1.1;letter-spacing:-.02em}
h1{font-size:clamp(32px,5.2vw,60px)}
h2{font-size:clamp(27px,3.8vw,44px)}
h3{font-size:clamp(19px,1.5vw,22px);letter-spacing:-.01em}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.6;max-width:62ch}
.eyebrow{font:600 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--palm)}
.on-dark .eyebrow{color:var(--lime)}

/* a ÚNICA aparição do Dancing Script no site inteiro — regra do manual */
.script{font:600 clamp(26px,3vw,38px)/1 var(--script);color:var(--lime);letter-spacing:0}

/* ── botões ─────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font:700 15px/1 var(--sans);letter-spacing:.01em;text-decoration:none;
  padding:16px 26px;border-radius:4px;border:2px solid transparent;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  min-height:52px;                     /* alvo de toque confortável */
}
.btn-go{background:var(--green);color:var(--charcoal);box-shadow:0 6px 18px -8px rgba(70,169,19,.7)}
.btn-go:hover{transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(70,169,19,.75)}
.btn-out{border-color:currentColor;background:transparent}
.on-dark .btn-out{color:var(--coconut)}
.btn-out:hover{background:rgba(244,247,242,.1)}

/* ── topo ───────────────────────────────────────────────────────── */
.topbar{background:var(--teal-2);color:var(--coconut);font-size:13.5px}
.topbar .wrap{display:flex;align-items:center;gap:18px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.topbar a{text-decoration:none;font-weight:600}
.topbar .sep{opacity:.4}
/* texto só para leitor de tela — o nome do idioma por extenso vive aqui,
   para o leitor anunciar "English" em vez de soletrar E-N */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;border:0}

.lang{margin-left:auto;display:flex;gap:4px;font-weight:600}
.lang a{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 8px;min-height:32px;border-radius:5px;
  opacity:.62;transition:opacity .2s ease,background-color .2s ease;
}
.lang a:hover{opacity:.9;background:rgba(244,247,242,.06)}
.lang a[aria-current]{opacity:1;color:var(--lime);background:rgba(244,247,242,.09)}
/* A bandeira do idioma inativo fica esmaecida, NUNCA em escala de cinza:
   uma bandeira sem cor deixa de ser reconhecível, que é o único motivo de
   existir bandeira aqui. */
.lang .fl{
  height:13px;width:auto;display:block;border-radius:2px;
  box-shadow:0 0 0 1px rgba(244,247,242,.2);
}
@media (max-width:600px){
  /* no celular o alvo precisa dos 44px do WCAG 2.5.8 — a altura vem do
     padding, e o topbar cresce junto sem quebrar o alinhamento */
  .lang a{min-height:44px;padding:5px 10px}
  .lang .fl{height:15px}
}

/* ── alvo de toque no celular (WCAG 2.5.8) ───────────────────────
   Medido em produção: 11 alvos abaixo de 44px na home — o telefone da
   topbar com 21px, os links do menu com 31px e o botão de pausa do vídeo
   com 36px. Dedo não acerta 21px; o toque erra e o visitante desiste. */
@media(max-width:900px){
  .topbar a[href^="tel:"]{display:inline-flex;align-items:center;min-height:44px}
  nav.main a{min-height:44px;display:flex;align-items:center}
  /* .vtog precisa vencer a regra base (min-height:36px), que vem depois no
     arquivo — daí o seletor mais específico em vez de !important */
  .vfilm .vtog{min-height:44px;padding:0 16px}
  footer a{min-height:44px;display:inline-flex;align-items:center}
}

/* ── pular para o conteúdo ────────────────────────────────────────
   Sem isto, quem navega por teclado passa por 10 elementos de cabeçalho
   em TODA página antes de chegar ao texto. */
.pular{
  position:absolute;left:12px;top:-60px;z-index:100;
  background:var(--green);color:var(--charcoal);
  font:700 14px/1 var(--sans);padding:15px 20px;min-height:44px;
  display:inline-flex;align-items:center;border-radius:4px;
  text-decoration:none;transition:top .18s ease;
}
.pular:focus{top:12px}


header{position:sticky;top:0;z-index:50;background:var(--coconut);border-bottom:1px solid var(--line-dark)}
header .wrap{display:flex;align-items:center;gap:24px;padding-top:13px;padding-bottom:13px}
.brand img{height:46px;width:auto}
nav.main{display:flex;gap:24px;margin-left:auto;font-size:14.5px;font-weight:600}
nav.main a{text-decoration:none;padding:6px 0;position:relative}
nav.main a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--green);transition:right .28s ease}
nav.main a:hover::after{right:0}
.burger{display:none;width:46px;height:46px;border:1px solid var(--line-dark);background:none;border-radius:4px;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center;margin-left:auto}
.burger span{width:20px;height:2px;background:var(--charcoal);transition:transform .3s,opacity .2s}

/* Nota jurídica no pé de uma seção: separada por uma linha fina, nunca por
   uma faixa de fundo diferente. */
.nota-legal{
  font-size:13.5px;line-height:1.6;max-width:78ch;opacity:.62;
  margin-top:clamp(30px,3.4vw,44px);padding-top:18px;
  border-top:1px solid var(--line-dark);
}
.on-dark .nota-legal{border-top-color:var(--line)}

/* ── seções ─────────────────────────────────────────────────────── */
section{padding:clamp(64px,8vw,110px) 0}
.on-dark{background:var(--teal);color:var(--coconut)}
.on-dark h2,.on-dark h3{color:var(--coconut)}
.sec-head{max-width:70ch;margin-bottom:clamp(32px,4vw,52px)}
.sec-head h2{margin:12px 0 14px}
.sec-head .lede{color:inherit;opacity:.86}

/* ── hero ───────────────────────────────────────────────────────── */
#hero{background:var(--teal);color:var(--coconut);padding-top:clamp(46px,6vw,76px);position:relative;overflow:hidden}
#hero::after{content:"";position:absolute;inset:auto 0 0;height:5px;background:linear-gradient(90deg,var(--lime),var(--green) 45%,var(--palm))}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,66px);align-items:center}
#hero h1{margin:14px 0 18px}
.hero-sub{font-size:clamp(18px,1.6vw,23px);font-weight:600;color:var(--lime);margin-bottom:16px;line-height:1.35}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin:30px 0 16px}
.micro{font-size:14.5px;opacity:.8;max-width:46ch}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;font-weight:600}
.chips span{opacity:.9}
.chips span+span::before{content:"·";margin-right:10px;opacity:.5}
.hero-shot{position:relative;border-radius:8px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.7);aspect-ratio:9/13}
.hero-shot img{width:100%;height:100%;object-fit:cover}
.hero-shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 20px 15px;
  background:linear-gradient(transparent,rgba(14,36,36,.92));
  font:600 13.5px/1.4 var(--sans);color:var(--coconut);
}

/* ── cartões de quarto ──────────────────────────────────────────── */
.rooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}
/* São SEIS quartos: em 4 colunas a última fileira fica com 2 e sobram dois
   vãos abertos no meio da seção. Em 3 colunas fecha 3+3, exato. */
@media(min-width:960px){ .rooms{grid-template-columns:repeat(3,1fr)} }
.room{background:var(--teal-2);border-radius:7px;overflow:hidden;text-decoration:none;color:var(--coconut);transition:transform .25s ease}
.room:hover{transform:translateY(-4px)}
.room .ph{aspect-ratio:3/4;overflow:hidden;background:#0a1a1a}
.room .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.room:hover .ph img{transform:scale(1.04)}
.room .txt{padding:17px 18px 21px}
.room h3{margin-bottom:5px;font-size:18px}
.room p{font-size:14px;line-height:1.5;opacity:.82}

/* ── par dia/noite ──────────────────────────────────────────────── */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pair figure{margin:0}
.pair img{border-radius:6px;width:100%}
.pair.tall img{aspect-ratio:3/4;object-fit:cover;object-position:center 48%}
.pair figcaption{font:600 12.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;margin-top:11px;opacity:.7}

/* ── cinco etapas ───────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;counter-reset:s}
.step figure{margin:0}
.step img{border-radius:5px;width:100%;aspect-ratio:3/4;object-fit:cover}
.step figcaption{counter-increment:s;font:600 13px/1.35 var(--sans);margin-top:11px;display:flex;gap:8px}
.step figcaption::before{content:counter(s);color:var(--green);font-weight:700;flex:none}

/* ── galeria simples ────────────────────────────────────────────── */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
/* a proporção vem do bloco (--gal-ar), calculada pela orientação real das
   fotos daquele grupo — 4/3 fixo cortava 58% de qualquer foto vertical */
.gal img{border-radius:6px;width:100%;aspect-ratio:var(--gal-ar,4/3);object-fit:cover}

/* ── lista de serviços ──────────────────────────────────────────── */
.svcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.svc{
  background:#fff;border:1px solid var(--line-dark);border-radius:7px;
  padding:26px 24px 28px;text-decoration:none;display:flex;flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.svc:hover{transform:translateY(-3px);border-color:var(--green);box-shadow:0 14px 30px -18px rgba(30,42,40,.35)}
.svc p{flex:1}
/* São CINCO serviços — número primo, então qualquer grade uniforme deixa
   buraco: em 4 colunas sobrava 4+1, com três vãos abertos.
   `span 1` (que estava aqui antes) é o valor padrão e não fazia nada.
   Em 3 colunas com o primeiro card ocupando duas, fecham-se 6 células com
   5 cartões — e quem ganha o dobro de área é Quartos Temáticos, que é o
   carro-chefe do negócio. O buraco vira hierarquia. */
@media(min-width:960px){
  .svcs{grid-template-columns:repeat(3,1fr)}
  .svcs>:first-child{grid-column:span 2}
}
/* na faixa de 2 colunas o ímpar reaparece (2+2+1) — aí quem fecha a fileira
   é o último cartão */
@media(min-width:620px) and (max-width:959px){
  .svcs>:last-child{grid-column:span 2}
}
.svc h3{margin-bottom:7px}
.svc p{font-size:14.5px;line-height:1.55;opacity:.82}
.svc .go{display:inline-block;margin-top:13px;font-weight:700;font-size:14px;color:var(--palm)}

/* ── contato ────────────────────────────────────────────────────── */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.ways{display:grid;gap:12px}
.way{display:flex;align-items:center;gap:14px;padding:17px 19px;border:1px solid var(--line);border-radius:6px;text-decoration:none;transition:border-color .2s,background .2s}
.way:hover{border-color:var(--lime);background:rgba(143,221,42,.07)}
.way b{font-size:16px;display:block}
.way span{font-size:13.5px;opacity:.75}
.way .ic{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center}
.way .ic svg{width:22px;height:22px;display:block}
.ic-wa{background:#25D366}          /* verde oficial do WhatsApp */
.ic-sms{background:var(--green)}
.ic-tel{background:var(--green)}
.ic-mail{background:var(--green)}
form{display:grid;gap:13px}
label{font:600 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;opacity:.8;margin-bottom:6px;display:block}
input,select,textarea{
  width:100%;font:400 16px/1.4 var(--sans);padding:14px 15px;
  border:1px solid var(--line);border-radius:5px;background:rgba(244,247,242,.06);color:var(--coconut);
}
input::placeholder,textarea::placeholder{color:rgba(244,247,242,.45)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--foco);outline-offset:1px;border-color:transparent}
select option{color:var(--charcoal)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── barra fixa mobile ──────────────────────────────────────────── */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  grid-template-columns:repeat(3,1fr);background:var(--teal-2);
  border-top:1px solid var(--line);transform:translateY(100%);transition:transform .3s ease;
}
.callbar.on{transform:none}
.callbar a{
  padding:13px 4px calc(13px + env(safe-area-inset-bottom));text-align:center;text-decoration:none;
  color:var(--coconut);font:700 13px/1.2 var(--sans);border-right:1px solid var(--line);
}
.callbar a:last-child{border-right:0}
.callbar a small{display:block;font-weight:400;font-size:10.5px;opacity:.6;margin-top:2px}

footer{background:var(--teal-2);color:var(--coconut);padding:52px 0 34px;font-size:14px}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
footer img{height:40px;margin-bottom:14px}
footer h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:12px}
footer a{text-decoration:none;display:block;padding:4px 0;opacity:.85}
footer a:hover{opacity:1;text-decoration:underline}
.areas{
  grid-column:1/-1;margin-top:34px;padding-top:20px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.85;opacity:.6;
}
.areas>span{display:block;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  font-size:10.5px;opacity:.85;margin-bottom:6px}
.areas+.legal{margin-top:18px}

.legal{margin-top:38px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;opacity:.6;display:flex;gap:16px;flex-wrap:wrap}


/* ═══ MOTION ════════════════════════════════════════════════════════
   Regra: o movimento SIGNIFICA — entrada escalonada conduz a leitura,
   a foto do hero respira, o botão responde ao toque. Nada roda em loop
   infinito, nada anima propriedade que force layout (só transform/opacity),
   e tudo morre sob prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */

/* entrada por scroll — visível por padrão; o JS só esconde se puder revelar */
.rv{transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
html.js .rv:not(.in){opacity:0;transform:translateY(22px)}
html.js .rv.in{opacity:1;transform:none}
/* stagger de 70ms — dentro da faixa que lê como sequência, não como fila */
html.js .stagger>*{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
html.js .stagger:not(.in)>*{opacity:0;transform:translateY(18px)}
html.js .stagger.in>*{opacity:1;transform:none}
html.js .stagger.in>*:nth-child(1){transition-delay:.00s}
html.js .stagger.in>*:nth-child(2){transition-delay:.07s}
html.js .stagger.in>*:nth-child(3){transition-delay:.14s}
html.js .stagger.in>*:nth-child(4){transition-delay:.21s}
html.js .stagger.in>*:nth-child(5){transition-delay:.28s}
html.js .stagger.in>*:nth-child(6){transition-delay:.35s}

/* hero: o texto entra em cascata assim que a página abre */
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
html.js #hero .script,html.js #hero h1,html.js #hero .hero-sub,
html.js #hero .lede,html.js #hero .hero-cta,html.js #hero .micro,html.js #hero .chips{
  animation:rise .8s cubic-bezier(.2,.7,.3,1) both;
}
html.js #hero h1{animation-delay:.08s}
html.js #hero .hero-sub{animation-delay:.16s}
html.js #hero .lede{animation-delay:.24s}
html.js #hero .hero-cta{animation-delay:.32s}
html.js #hero .micro{animation-delay:.4s}
html.js #hero .chips{animation-delay:.48s}

/* a foto do hero cresce devagar: dá vida sem pedir atenção */
@keyframes breathe{from{transform:scale(1.06)}to{transform:scale(1)}}
html.js .hero-shot img{animation:breathe 1.6s cubic-bezier(.2,.7,.3,1) both}
.hero-shot{position:relative}
.hero-shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(143,221,42,.16) 50%,transparent 62%);
  transform:translateX(-120%);
}
html.js .hero-shot::after{animation:sheen 1.5s cubic-bezier(.4,0,.2,1) .9s both}
@keyframes sheen{to{transform:translateX(120%)}}

/* a régua de cor do hero se desenha da esquerda */
@keyframes wipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html.js #hero::after{transform-origin:left;animation:wipe 1.1s cubic-bezier(.2,.7,.3,1) .5s both}

/* cartões: a foto avança um pouco antes do cartão inteiro subir */
.room .ph img{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.room{transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease}
.room:hover{box-shadow:0 18px 40px -22px rgba(0,0,0,.75)}

/* botão: pressão real ao toque, não só hover de mouse */
.btn:active{transform:translateY(1px) scale(.99)}
.way{transition:border-color .2s,background .2s,transform .2s}
.way:hover{transform:translateX(3px)}

/* os numerais das etapas contam a sequência ao entrar */
.step figcaption::before{transition:color .4s ease,transform .4s cubic-bezier(.2,.7,.3,1)}
html.js .steps.in .step:hover figcaption::before{transform:scale(1.25);color:var(--lime)}

/* Foco visível de teclado. A cor SEGUE O FUNDO — o anel era sempre lime, que
   mede 8,08:1 sobre o teal escuro mas só 1,55:1 sobre o fundo claro e 1,67:1
   sobre o branco dos cartões (a WCAG 2.4.11 pede 3:1). Ou seja: em metade do
   site quem navega por teclado não enxergava onde estava.
   .vframe entra na lista porque a seção do vídeo é <section> puro, sem .on-dark:
   o quadro é teal-2 e o anel caía no charcoal = 1,09:1, sumindo justo nos controles
   (.vtog, .vplay, .vsnd, .vagain). É .vframe e não .vfilm de propósito — a
   figcaption fica fora do quadro, sobre fundo claro, e precisa do anel escuro. */
:root{--foco:#1E2A28}                      /* charcoal sobre claro = 13,71:1 */
.on-dark,#hero,.topbar,footer,.callbar,.vframe{--foco:#8FDD2A}   /* lime sobre teal = 8,08:1; sobre o teal-2 do quadro = 9,68:1 */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--foco);outline-offset:2px;border-radius:3px;
}

@media(prefers-reduced-motion:reduce){
  html.js .rv:not(.in),html.js .stagger:not(.in)>*{opacity:1;transform:none}
  html.js #hero .script,html.js #hero h1,html.js #hero .hero-sub,html.js #hero .lede,
  html.js #hero .hero-cta,html.js #hero .micro,html.js #hero .chips,
  html.js .hero-shot img,html.js .hero-shot::after,html.js #hero::after{animation:none!important}
}

@media(max-width:900px){
  .hero-grid,.contact{grid-template-columns:1fr}
  .hero-shot{max-width:420px;margin:0 auto;order:-1}
  /* ── A PRIMEIRA TELA DO CELULAR ──────────────────────────────────
     Medido em 375x812: topbar 102px + header 73px + foto 484px = 665px
     consumidos antes do texto. O título aparecia com 13px de sobra e o
     primeiro botão caía em y=1237 — mais de uma tela e meia de rolagem
     para chegar ao que vende. A maior parte do tráfego deste setor é
     celular, então a primeira dobra não trazer chamada nem botão é
     defeito de funil, não de acabamento.
     Três frentes, sem tirar a foto (ela é a prova do serviço):        */

  /* 1 · topbar numa linha só: os 3 blocos cabem se o do meio sair */
  .topbar .wrap{flex-wrap:nowrap;gap:10px;padding-top:6px;padding-bottom:6px}
  .topbar .sep{display:none}
  .topbar>.wrap>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* 2 · a foto do hero deixa de ser retrato e vira paisagem.
        Em 9/13 ela come 490px de altura; em 5/4 ocupa 300px e continua
        mostrando o painel sendo instalado — o assunto está no centro. */
  /* `svh` e nao `vh`: a area real do Safari COM a barra de URL e ~180px menor
     que a altura da tela. Ajustar contra vh deixava o botao 151px fora do que
     o visitante ve de verdade ao abrir a pagina. `svh` mede a tela pequena. */
  #hero .hero-shot{aspect-ratio:5/4;max-width:none;max-height:25svh}
  #hero .hero-shot img{height:100%}
  #hero .hero-sub{font-size:16.5px;line-height:1.3;margin-bottom:13px}
  #hero h1{font-size:clamp(27px,7.4vw,34px)}
  #hero .script{font-size:22px}
  #hero .hero-shot img{object-position:center 42%}
  #hero{padding-top:clamp(12px,3vw,20px)}
  #hero h1{margin-top:7px;margin-bottom:10px}

  /* 3 · a ordem muda no celular: promessa → botão → explicação.
        No desktop lê-se tudo antes de agir; numa tela de 812px o parágrafo
        descritivo empurrava o botão para y=943, fora da primeira dobra.
        Subindo a ação para logo depois da frase-promessa, ela entra. */
  .hero-grid>div:first-child{display:flex;flex-direction:column}
  #hero .script    {order:1}
  #hero h1         {order:2}
  #hero .hero-sub  {order:3;margin-bottom:20px}
  #hero .hero-cta  {order:4;margin:0 0 18px}
  #hero .lede      {order:5;margin-bottom:14px}
  #hero .micro     {order:6}
  #hero .chips     {order:7;margin-top:18px;padding-top:16px}

  /* a cascata de entrada segue a ordem do DOM, que aqui não é mais a ordem
     na tela: sem isto o botão — agora o 4º item visível — era o último a
     surgir, e a primeira dobra ficava sem chamada por meio segundo.
     Os atrasos passam a acompanhar o que o visitante vê. */
  html.js #hero .hero-cta{animation-delay:.24s}
  html.js #hero .lede    {animation-delay:.32s}

  /* topbar: nowrap sem encolher espremia o telefone em duas linhas.
     O nome da região cede espaço primeiro; o telefone nunca quebra. */
  .topbar{font-size:12.5px}
  .topbar .wrap{gap:8px}
  .topbar>.wrap>span:first-child{flex:0 1 auto;min-width:0}
  /* em telas estreitas o nome da região aparecia cortado ("Flórida Cent…").
     Meia palavra não informa nada; o telefone informa. A região já está no
     título da página, no rodapé e no texto do hero. */
  @media(max-width:420px){ .topbar>.wrap>span:first-child{display:none} }
  .topbar>.wrap>a[href^="tel:"]{flex:0 0 auto;white-space:nowrap}
  .lang{flex:0 0 auto}
  .pair{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  nav.main{display:none}
  .burger{display:flex}
  .callbar{display:grid}
  footer .wrap{grid-template-columns:1fr 1fr}
  body{padding-bottom:64px}
}
@media(max-width:520px){
  .steps{grid-template-columns:1fr 1fr}
  .hero-cta .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}


/* ═══ VÍDEO ═════════════════════════════════════════════════════════
   Um componente, dois modos:
     .vfilm[data-mode="loop"]  10s mudo, em loop  — S2 da home
     .vfilm[data-mode="film"]  25,5s com som, no clique — S5 e /the-workshop/

   ATENÇÃO — 9/16 é carga estrutural, não estética: as legendas do filme
   estão QUEIMADAS nos ~17% de baixo do quadro (conferido no frame de 5s).
   Mudar a razão da .vframe com object-fit:cover corta a legenda e a peça
   perde a narrativa inteira. Se precisar de outra proporção, é outra peça.
   ═══════════════════════════════════════════════════════════════════ */

/* No desktop a largura sai da ALTURA da janela (9/16 = .5625), que é o
   inverso do normal — é isso que impede um vertical de virar uma torre
   mais alta que a viewport. Na coluna do .pair (563px) ele teria 1001px. */
.vgrid{
  display:grid;
  grid-template-columns:max(260px,min(380px,34vw)) minmax(0,46ch);
  gap:clamp(24px,3.4vw,52px);
  align-items:start;
}
@supports (height:1svh){
  .vgrid{grid-template-columns:max(260px,min(380px,34vw,calc(74svh * .5625))) minmax(0,46ch)}
}
/* O texto alinha pelo TOPO do quadro, não pelo centro: um vídeo vertical tem
   ~660px de altura contra ~200px de texto, e centralizar abria vazio igual em
   cima e embaixo — o parágrafo ficava boiando. Alinhado no topo, a leitura
   começa junto com a imagem e o respiro sobra num lugar só.
   A coluna também deixa de ser 1fr: com 1fr ela herdava ~1200px de largura
   para um parágrafo de três linhas. */
@media (min-width:901px){ .vgrid__txt{padding-top:4px} }
.vgrid>*{min-width:0}
.vgrid__txt>*+*{margin-top:18px}

.vfilm{margin:0;position:relative}
.vframe{
  position:relative;width:100%;aspect-ratio:9/16;   /* a caixa nasce pronta: CLS 0 */
  border-radius:8px;overflow:hidden;background:var(--teal-2);
  box-shadow:0 26px 56px -30px rgba(30,42,40,.62);
}
.vframe img,.vframe video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vframe video{opacity:0;transition:opacity .35s ease}
/* `is-live` e NÃO `is-done`: no fim o PÔSTER volta, não o último frame.
   Conferi que o selo queimado some em fade nos ~0,5s finais (no frame de
   25,3s está em ~20% de opacidade), então segurar o último frame deixaria
   um borrão escuro atrás do cartão de encerramento. */
.vfilm.is-live .vframe video{opacity:1}
.vfilm.is-live .vframe img{opacity:0;transition:opacity .35s ease}

.vfilm figcaption{font:400 14.5px/1.55 var(--sans);opacity:.8;margin-top:13px;max-width:44ch}
.vfilm figcaption a{color:var(--palm);font-weight:700}
.on-dark .vfilm figcaption a{color:var(--lime)}

/* ── loop: botão de pausa (WCAG 2.2.2 — inicia sozinho, >5s, repete) ── */
.vtog{
  position:absolute;top:11px;right:11px;z-index:3;
  display:none;align-items:center;gap:8px;
  min-height:36px;padding:0 13px;border:0;border-radius:18px;cursor:pointer;
  font:700 11px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  background:rgba(14,36,36,.72);color:var(--coconut);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
html.js .vfilm[data-mode="loop"] .vtog{display:inline-flex}
.vtog:hover{background:rgba(14,36,36,.92)}
.vtog b{position:relative;display:block;width:10px;height:11px;flex:none}
.vtog[data-on="1"] b::before,.vtog[data-on="1"] b::after{
  content:"";position:absolute;top:0;bottom:0;width:3px;background:currentColor}
.vtog[data-on="1"] b::before{left:0} .vtog[data-on="1"] b::after{right:0}
.vtog[data-on="0"] b::before{
  content:"";position:absolute;top:0;left:1px;
  border:5.5px solid transparent;border-left-color:currentColor;border-right:0}

/* ── film: cartaz com play ─────────────────────────────────────────── */
/* `html.js` obrigatório: sem JS o vídeo não tem src, então um botão de play
   visível seria um controle morto. Sem JS fica o pôster + o figcaption. */
.vplay{display:none}
html.js .vplay{
  position:absolute;inset:0;z-index:3;width:100%;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:0 18px 18%;                 /* os 17% de baixo são legenda queimada */
  background:radial-gradient(ellipse at 50% 42%,rgba(14,36,36,.6),rgba(14,36,36,.16) 60%,transparent 78%);
  color:var(--coconut);font:700 14.5px/1.3 var(--sans);text-align:center;
}
.vplay small{display:block;font:600 11.5px/1.4 var(--sans);letter-spacing:.08em;
  text-transform:uppercase;opacity:.75;margin-top:6px}
.vplay i{
  width:60px;height:60px;border-radius:50%;background:var(--green);
  display:grid;place-items:center;flex:none;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.6);transition:transform .2s ease}
.vplay i::before{content:"";border:13px solid transparent;border-left-color:var(--charcoal);
  border-right:0;margin-left:6px}
.vplay:hover i{transform:scale(1.06)}
.vfilm.is-live .vplay,.vfilm.is-done .vplay{display:none}

/* som (só no film) */
.vsnd{
  position:absolute;top:11px;right:11px;z-index:4;display:none;
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:rgba(14,36,36,.66);color:var(--coconut);
  font:700 15px/1 var(--sans);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vfilm.is-live .vsnd{display:block}
.vsnd[aria-pressed="false"]{background:var(--green);color:var(--charcoal);border-color:transparent}

/* progresso: scaleX não força layout (width forçaria — regra da casa) */
.vbar{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:4;
  background:rgba(244,247,242,.2);opacity:0;transition:opacity .3s}
.vfilm.is-live .vbar{opacity:1}
.vbar i{display:block;height:100%;background:var(--lime);transform:scaleX(0);transform-origin:left}

/* encerramento em HTML: o telefone queimado no vídeo NÃO é tocável, e o
   selo final some em fade (conferido no frame de 25,3s) */
.vend{
  position:absolute;inset:0;z-index:5;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:15px;
  padding:26px 20px;text-align:center;color:var(--coconut);
  background:linear-gradient(180deg,rgba(14,36,36,.88),rgba(14,36,36,.96))}
.vfilm.is-done .vend{display:flex}
.vend b{font:700 20px/1.25 var(--sans);letter-spacing:-.01em;max-width:16ch}
.vend .btn{padding:14px 20px;min-height:48px}
.vagain{background:none;border:0;color:var(--coconut);cursor:pointer;
  font:600 13px/1 var(--sans);text-decoration:underline;opacity:.8;padding:6px}

/* ── hero de /the-workshop/ : o filme no lugar da foto ─────────────── */
.hero-grid.has-film{grid-template-columns:minmax(0,1fr) max(280px,min(400px,34vw))}
@supports (height:1svh){
  .hero-grid.has-film{grid-template-columns:minmax(0,1fr) max(280px,min(400px,34vw,calc(76svh * .5625)))}
}

/* barra fixa esconde enquanto o filme roda: ela cobre justamente os ~17%
   onde a legenda queimada e o telefone final vivem.
   .callbar.on = (0,2,0); precisa de 3 classes para vencer. */
.callbar.on.hush{transform:translateY(100%)}

@media(max-width:900px){
  .vgrid{grid-template-columns:1fr;gap:24px}
  .hero-grid.has-film{grid-template-columns:1fr}
  /* teto de 400px: sem ele, iPad retrato renderiza 738 × 1312px.
     `width:min()` e NÃO `max-width`: num grid item, margin-inline:auto sem
     largura definida troca o stretch por fit-content — medi no browser e o
     quadro encolhia para a largura do figcaption (287px em vez de 335px). */
  .vfilm{width:min(100%,400px);margin-inline:auto}
}
@media(prefers-reduced-motion:reduce){
  .vframe video,.vframe img,.vbar i,.vplay i{transition:none}
}

/* ── celular deitado ──────────────────────────────────────────────
   A 844x390 a foto empilhada renderizava 156% da altura da tela e o titulo
   ia para 845px: quem gira o telefone via so uma foto. Tela larga e baixa
   pede o layout de duas colunas, que e o que o desktop ja usa. */
@media(max-width:900px) and (max-height:520px) and (orientation:landscape){
  .hero-grid{grid-template-columns:1.15fr .85fr;align-items:center;gap:24px}
  .hero-grid>div:first-child{display:block}
  #hero .hero-shot{order:0;aspect-ratio:4/3;max-height:66svh}
  #hero .hero-cta,#hero .lede,#hero .micro,#hero .chips,
  #hero h1,#hero .hero-sub,#hero .script{order:0}
  #hero{padding-top:10px;padding-bottom:18px}
  /* 390px de altura nao comportam script+h1+sub+lede+cta+micro+chips (medi 591px).
     Some o que o deitado ja diz de outro jeito e deixa titulo, promessa e botao. */
  #hero .chips,#hero .lede,#hero .micro{display:none}
  #hero h1{font-size:clamp(23px,3.4vw,28px);margin:4px 0 8px}
  #hero .hero-sub{font-size:15px;line-height:1.28;margin-bottom:11px}
  #hero .script{margin-bottom:2px}
  #hero .hero-cta{gap:10px}
  #hero .hero-cta .btn{padding:12px 18px}
}

/* ── celular em pe com tela curta ─────────────────────────────────
   Android de 360x640 com a barra de URL sobrava 7px: o botao fechava em
   647 numa area de 640. A foto cede o resto — e a unica peca elastica. */
@media(max-width:900px) and (max-height:660px) and (orientation:portrait){
  #hero .hero-shot{max-height:21svh}
  #hero .hero-sub{margin-bottom:11px}
  #hero h1{margin-top:5px;margin-bottom:8px}
}

/* O titulo em portugues e mais longo que o ingles e quebrava numa linha a mais:
   a 740x360 o botao fechava em 387 de 360. O degrau mais baixo aperta a tipografia. */
@media(max-width:900px) and (max-height:400px) and (orientation:landscape){
  #hero h1{font-size:clamp(20px,2.9vw,24px);margin:2px 0 7px}
  #hero .hero-sub{font-size:14px;line-height:1.26;margin-bottom:9px}
  #hero .hero-cta .btn{padding:11px 16px;font-size:15px}
  #hero .hero-shot{max-height:60svh}
  #hero .script{display:none}   /* o olho-de-boi custa ~22px e o h1 ja diz o mesmo */
  #hero{padding-top:8px}
}

/* ── celular em pe com tela MUITO curta ───────────────────────────
   iPhone SE (375x553 com a barra do Safari) e SE1 (320x568): o degrau de
   660px nao bastava para o portugues, cujo titulo quebra numa linha a mais —
   o botao fechava em 587 de 553. A foto cede quase tudo: numa tela desta
   altura ela e ilustracao, e o convite para chamar e o conteudo. */
@media (max-width:900px) and (max-height:600px) and (orientation:portrait){
  /* 15svh transformava a foto numa miniatura de 106x85px — MENOR que a propria
     legenda, que tem 125px de altura. Foto desse tamanho nao mostra obra
     nenhuma; pior que nao ter. A legenda sai (o h1 logo acima ja diz o mesmo) e
     a foto fica com tamanho que se enxerga. */
  #hero .hero-shot figcaption{display:none}
  /* 23svh e o maior valor que ainda deixa o botao dentro da tela nas duas
     linguas — medido varrendo 34/30/27/25/23 em 320x568 e 375x553. O portugues
     e o teto: em 25svh ele ja estoura por 10px. */
  #hero .hero-shot{max-height:23svh}
  #hero h1{font-size:clamp(23px,6.6vw,27px);margin-top:4px;margin-bottom:7px}
  #hero .hero-sub{font-size:15.5px;line-height:1.27;margin-bottom:9px}
  #hero .script{margin-bottom:1px;font-size:15px}
  #hero{padding-top:9px}
  #hero .hero-cta .btn{padding:12px 17px}
}

/* Seleção editorial: fotos maiores, leitura calma e caminhos por ambiente. */
#hero .service-shot{aspect-ratio:4/5;width:100%}
.home-editorial #hero{padding:clamp(32px,4vw,58px) 0 clamp(40px,5vw,70px)}
.home-editorial .hero-grid{grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,56px)}
.home-editorial #hero h1{font-size:clamp(34px,4.3vw,56px);letter-spacing:-.045em;line-height:1.08}
.home-editorial #hero .hero-shot{aspect-ratio:4/5;max-height:610px;border-radius:2px}
.home-editorial #hero .lede{font-size:17px;max-width:48ch;opacity:.84}
.home-editorial #hero .hero-sub{font-size:17px;margin:24px 0 15px}
.home-editorial #hero .script{font-size:29px}
#projects{background:var(--teal-2)}
#projects .sec-head{max-width:800px}
#projects .room{background:transparent;border-radius:0;border-bottom:1px solid var(--line)}
#projects .room .ph{aspect-ratio:4/5;border-radius:2px}
#projects .room .txt{position:relative;padding:24px 0 26px}
#projects .room h3{font-size:23px;padding-right:36px}
.room-number{position:absolute;right:0;top:24px;color:var(--lime);font-size:12px;letter-spacing:.12em}
.room-link{display:inline-block;color:var(--lime);font-size:12px;font-weight:600;margin-top:20px}
.portfolio-grid{display:grid;grid-template-columns:.8fr 1fr;align-items:center;gap:clamp(32px,7vw,100px)}
.portfolio-grid h2,.room-next h2{margin:18px 0 22px}
.portfolio-cover{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;max-width:410px;background:var(--teal);color:white;text-decoration:none;box-shadow:14px 18px 0 #dfe5db}
.portfolio-cover:after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(14,36,36,.6),transparent 60%,rgba(14,36,36,.3))}
.portfolio-cover img{width:100%;height:100%;object-fit:cover}
.portfolio-cover>span{position:absolute;top:32px;left:28px;z-index:1;font-size:12px;letter-spacing:.15em}
.portfolio-cover b{display:block;font-size:clamp(36px,4vw,50px);font-weight:500;letter-spacing:-.03em;margin-top:12px}
.portfolio-cover small{display:block;letter-spacing:0;font-size:13px;margin-top:10px}
.portfolio-alt{font-size:14px;font-weight:600;text-underline-offset:5px;align-self:center;padding:12px 0}
.room-next{border-top:1px solid var(--line-dark)}
@media(max-width:900px){
 .home-editorial .hero-grid{grid-template-columns:1fr 1fr;gap:24px}
 .home-editorial #hero .hero-shot{order:0;aspect-ratio:3/4;max-height:none}
 .home-editorial #hero h1{font-size:clamp(32px,4.6vw,44px)}
 .home-editorial #hero .hero-cta .btn{padding:15px 18px}
}
@media(max-width:600px){
 #hero .service-shot{aspect-ratio:4/3;width:100%;max-height:none}
 .home-editorial .hero-grid,.portfolio-grid{grid-template-columns:1fr}
 .home-editorial #hero .hero-shot{order:0;aspect-ratio:5/4;width:100%;max-height:none;margin-top:8px}
 .home-editorial #hero .hero-shot img{object-position:center 56%}
 .home-editorial #hero h1{font-size:clamp(31px,8vw,44px)}
 .home-editorial #hero .script{font-size:25px}
 .home-editorial #hero .hero-sub{margin:16px 0}
 .home-editorial #hero .hero-cta{margin:20px 0 16px}
 .home-editorial #hero .chips{margin:4px 0 0;padding-top:14px;font-size:12px}
 .home-editorial #hero .lede{font-size:16px}
 .portfolio-cover{max-width:330px;width:90%;margin:0 auto 12px}
 #projects .rooms{grid-template-columns:1fr;gap:36px}
 #projects .room .ph{aspect-ratio:4/5}
}
@media(prefers-reduced-motion:reduce){.room,.room img{transition:none}}

/* Apresentação do Alessandro — versão aprovada. */

.owner-section{background:#f4f7f2;padding:80px 0}
.owner-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:center}
.owner-photo{position:relative;margin:0;overflow:hidden;border-radius:3px}
.owner-photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.owner-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:42px 28px 24px;background:linear-gradient(transparent,rgba(14,36,36,.95));color:white;font-size:24px;font-weight:600;line-height:1.3}
.owner-photo figcaption span{display:block;font-size:12px;font-weight:400;letter-spacing:.08em;margin-top:5px}
.owner-copy h2{font-size:clamp(30px,3.2vw,44px);letter-spacing:-.035em;line-height:1.12;margin:18px 0 24px}
.owner-intro{font-size:20px;line-height:1.5;margin-bottom:18px}
.owner-copy>p:not(.eyebrow):not(.owner-intro){font-size:16px;line-height:1.7;color:#40504b}
.owner-process{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;border-top:1px solid #ccd6ce;padding-top:24px;margin-top:30px}
.owner-process b{display:block;color:#2e6a27;font-size:13px;margin-bottom:6px}
.owner-process span{display:block;font-size:13px;line-height:1.4;font-weight:600}
.owner-link{font-size:14px;font-weight:600;text-underline-offset:5px;align-self:center}
@media(max-width:900px){.owner-grid{gap:32px}.owner-process{grid-template-columns:1fr}.owner-process div{display:flex;gap:12px}.owner-process b{margin:0}}
@media(max-width:600px){.owner-grid{grid-template-columns:1fr;gap:36px}.owner-section{padding:42px 0}.owner-photo{max-width:350px;width:100%;margin:auto}.owner-copy h2{font-size:33px}.owner-intro{font-size:18px}.owner-process{grid-template-columns:1fr 1fr 1fr;gap:12px}.owner-process div{display:block}.owner-process b{margin-bottom:8px}.owner-process span{font-size:12px}.owner-copy .hero-cta{display:grid;gap:24px}.owner-copy .btn{justify-content:center}}

.owner-photo{box-shadow:0 12px 32px -24px rgba(14,36,36,.32)}
.owner-photo img{transition:transform .85s cubic-bezier(.2,.65,.25,1)}
.owner-reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.65,.25,1);transition-delay:var(--owner-delay,0ms)}
.owner-reveal.owner-visible{opacity:1;transform:translateY(0)}
.owner-process>div:nth-child(2){--owner-delay:90ms}
.owner-process>div:nth-child(3){--owner-delay:180ms}
.owner-copy .btn-go{position:relative;isolation:isolate;overflow:hidden;transition:background .25s,box-shadow .25s,transform .25s}
.owner-copy .btn-go:focus-visible{outline:3px solid #153333;outline-offset:5px}
@media(hover:hover) and (pointer:fine){
 .owner-photo:hover img{transform:scale(1.025)}
 .owner-copy .btn-go:hover{background:#8fdd2a;box-shadow:0 10px 24px -12px rgba(46,106,39,.55);transform:translateY(-2px)}
}
@media(prefers-reduced-motion:reduce){
 .owner-reveal{opacity:1;transform:none;transition:none}
 .owner-photo img,.owner-copy .btn-go{transition:none}
 .owner-photo:hover img,.owner-copy .btn-go:hover{transform:none}
}