/* ===== Évora Maxx — Design tokens ===== */
:root{
  --bg: #05080b;
  --bg-elev: #0c1319;
  --panel: #101a22;
  --panel-2: #14212b;
  --border: rgba(255,255,255,0.08);
  --text: #eef2f5;
  --text-dim: #9fb0ba;
  --brand: #033F63;
  --brand-light: #0e6ea8;
  --accent: #c9a24a;
  --accent-2: #e7c877;
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
  --maxw: 1280px;
  --header-h: 76px;
  --icon-size: clamp(56px,9vh,84px);
  --tile-gap: 8px;
  --edge-gap: clamp(20px,2.6vw,40px);
  --notch-r: 8px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: "Poppins", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4{margin:0 0 .5em;font-family:"Poppins","Segoe UI Semibold",Georgia,serif;font-weight:600;letter-spacing:.01em}
p{margin:0 0 1em;color:var(--text-dim)}
.skip-link{position:absolute;left:-999px;top:0;background:var(--accent);color:#111;padding:.6em 1em;z-index:200}
.skip-link:focus{left:8px;top:8px}

.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.75em 1.4em;border-radius:999px;font-weight:600;font-size:.95rem;border:1px solid transparent;white-space:nowrap;transition:transform .15s ease, background .2s ease, border-color .2s ease}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--accent);color:#101010}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,0.04);border-color:var(--border);color:var(--text);padding:.6em}
.btn-ghost:hover{border-color:var(--accent)}
.btn-outline{border-color:var(--border);color:var(--text)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent-2)}

/* ===== Card base (usado em Contato, produtos, diferenciais) ===== */
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.icon-wrap{width:44px;height:44px;border-radius:12px;background:rgba(201,162,74,0.14);display:flex;align-items:center;justify-content:center;color:var(--accent-2);margin-bottom:14px}
.icon-wrap svg{width:22px;height:22px}



/* ===== Fundo de vídeo global (o mesmo vídeo aparece em todas as páginas) ===== */
.bg-video-wrap{position:fixed;inset:0;z-index:0;overflow:hidden;background:#05080b center/cover no-repeat}
.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .6s ease, transform .6s ease}
/* Véu leve e permanente (inclusive na Home) para escurecer um pouco o vídeo,
   sem nunca deixar o fundo opaco/preto — o vídeo continua visível por trás */
.bg-video-overlay{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(5,8,11,0.3) 0%, rgba(5,8,11,0.38) 55%, rgba(5,8,11,0.5) 100%);
}
/* Home: em vez do véu em degradê, uma grade fina de linhas pretas bem
   pequenas sobre o vídeo (linhas de 1px a cada 8px, na horizontal e na
   vertical) — mais discreta que o degradê, deixa o vídeo bem visível entre
   as linhas. */
body.is-home .bg-video-overlay{
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.55) 0px, rgba(0,0,0,0.55) 1px, transparent 1px, transparent 8px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.55) 0px, rgba(0,0,0,0.55) 1px, transparent 1px, transparent 8px);
}
/* Esfumaçado: aparece suavemente quando a página "abre" — a classe .entered é
   adicionada via JS logo após o carregamento, simulando a tela esfumaçada
   surgindo por cima do vídeo pausado ao clicar em "Conheça". Fica translúcido
   de propósito (não opaco) para o vídeo pausado continuar visível ao fundo. */
.bg-video-overlay-strong{
  position:absolute;inset:0;pointer-events:none;
  background:rgba(5,8,11,0.4);
  opacity:0;transition:opacity .6s ease;
}
body.is-inner.entered .bg-video{filter:blur(16px) brightness(.75);transform:scale(1.06)}
body.is-inner.entered .bg-video-overlay-strong{opacity:1}
/* Estado "settled" (já vinha de outra página interna) aparece pronto de
   imediato, sem esperar o JS nem repetir a transição — evita qualquer flash. */
body.is-inner.settled .bg-video{filter:blur(16px) brightness(.75);transform:scale(1.06);transition:none}
body.is-inner.settled .bg-video-overlay-strong{opacity:1;transition:none}

#main{position:relative;z-index:1}

/* ===== Logo — fixa, idêntica em toda página, não se move ao abrir o Dashboard ===== */
.logo-badge{
  position:fixed;top:var(--edge-gap);left:var(--edge-gap);z-index:150;
  width:var(--icon-size);height:var(--icon-size);
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);
}
.logo-badge img{width:81%;height:auto;filter:brightness(0) invert(1);opacity:.95}

/* ===== Barra de ação fixa: Conheça/Fechar + Cote Agora ===== */
.action-bar{position:fixed;left:50%;bottom:9%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:22px;z-index:140}
.action-bar-buttons{display:flex;align-items:center;gap:14px}
@media (min-width:981px){
  /* No desktop a barra vira largura total: os botões ficam centralizados
     na página (coluna do meio) e a assinatura fica alinhada à direita
     (última coluna), em vez de ficar embaixo/ao lado dos botões. */
  .action-bar{
    left:0;right:0;bottom:9%;width:100%;transform:none;
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0;
    padding:0 var(--edge-gap);
  }
  .action-bar-buttons{grid-column:2;justify-self:center}
  .tak-signature{grid-column:3;justify-self:end}
}

/* Assinatura "powered by TAK" — pequena e discreta, com o mesmo tratamento
   em qualquer um dos dois contextos (barra fixa ou inline no mobile). Logo
   oficial em duas versões (branca/preta); por padrão mostra a branca. */
.tak-signature{display:inline-flex;align-items:center;gap:5px;text-decoration:none;font-size:.66rem;line-height:1;color:rgba(255,255,255,0.55);white-space:nowrap;opacity:.85;transition:opacity .2s ease}
.tak-signature:hover{opacity:1}
.tak-signature-label{text-transform:lowercase}
.tak-signature-logo{width:15px;height:15px;object-fit:contain;flex-shrink:0}
.tak-signature-logo--black{display:none}
/* Variante para uso futuro em algum trecho de fundo claro — aplicar a
   classe tak-signature--on-light junto de tak-signature nesse contexto. */
.tak-signature--on-light{color:rgba(0,0,0,0.5)}
.tak-signature--on-light .tak-signature-logo--white{display:none}
.tak-signature--on-light .tak-signature-logo--black{display:inline-block}
.btn-square{border-radius:10px;min-width:150px;justify-content:center}
/* Os 3 botões (Conheça/Fechar, Cote Agora, IA) devem ter sempre a mesma
   altura — o botão de IA é um quadrado fixo, então travamos a altura dos
   três num só valor em vez de deixar o padding do texto decidir. */
/* flex-shrink:0 — sem isso, os 3 botões espremiam num flex row estreito e
   o texto ("Cote Agora") quebrava em duas linhas em vez de manter o
   tamanho natural do conteúdo numa linha só. */
.action-btn{backdrop-filter:blur(6px);box-shadow:0 10px 30px -8px rgba(0,0,0,0.5);height:50px;flex-shrink:0}
.action-btn-secondary{background:rgba(16,26,34,0.82);border:1px solid transparent;color:#fff}
.action-btn-secondary:hover{border-color:var(--accent);background:rgba(16,26,34,0.95)}
/* Conheça / Fechar / Dashboard e Cote Agora — fonte Light (o botão de IA
   não tem texto, só ícone, então não entra nessa regra). */
.action-bar-buttons .action-btn-secondary,
.action-bar-buttons .btn-primary{font-weight:300}
/* Botão quadrado de acesso rápido ao Agente Évora IA, ao lado dos outros dois */
.action-btn-icon{
  width:50px;height:50px;min-width:0;padding:0;border-radius:10px;flex-shrink:0;
  background:var(--accent);color:#141008;border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;
}
.action-btn-icon svg{width:20px;height:20px}
.action-btn-icon:hover{transform:translateY(-2px)}

/* Cópia da assinatura presa na base real da tela — só aparece na Home em
   telas pequenas. Nesse contexto a Home some com a assinatura de dentro
   da action-bar (que flutua mais acima, junto do botão "Conheça") pra
   não duplicar. */
.home-signature-mobile{display:none}
@media (max-width:980px){
  .home-signature-mobile{
    display:flex;justify-content:center;position:fixed;left:0;right:0;bottom:14px;z-index:139;
  }
  body.is-home .action-bar .tak-signature{display:none}
}

body.is-inner .action-bar{animation:actionBarDescend .55s ease forwards}
/* Navegação entre páginas internas: fundo e botões já "assentados" (settled)
   não repetem a animação de descida — permanecem fixos, como pede o site. */
body.is-inner.settled .action-bar{animation:none;bottom:28px}
@keyframes actionBarDescend{
  from{bottom:9%}
  to{bottom:28px}
}

body.no-scroll{height:100vh;overflow:hidden}
body.no-scroll #main{height:100vh;overflow:hidden}

/* Área de conteúdo demarcada: em qualquer página interna o conteúdo fica
   contido entre o badge do logo (fixo, topo-esquerda) e a barra de ações
   (fixa, base). Fundo (vídeo pausado+desfocado) e botões nunca se movem —
   apenas o conteúdo dentro desta área muda ao navegar entre páginas. */
body.is-inner{height:100vh;overflow:hidden}
body.is-inner #main{height:100vh;overflow:hidden}

/* A "janela" visível: toda página interna roda dentro deste painel
   arredondado, sempre nos MESMOS limites (entre o logo e a barra de botões).
   A janela em si tem altura FIXA (viewport menos as margens) e rola por
   dentro (overflow-y) — assim a moldura nunca se move, e as margens de
   cima/baixo (com o vídeo de fundo pausado/desfocado) continuam sempre
   visíveis, mesmo em páginas com conteúdo mais longo. */
.content-window{
  position:relative;
  margin:var(--edge-gap) var(--edge-gap) 90px;
  height:calc(100vh - var(--edge-gap) - 90px);
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  border-radius:14px;
  background:rgba(9,14,18,0.55);
  box-shadow:0 30px 90px -24px rgba(0,0,0,0.55);
  opacity:0;transform:translateY(10px) scale(1.01);
  transition:opacity .5s ease .15s, transform .5s ease .15s;
}
body.is-inner.entered .content-window{opacity:1;transform:translateY(0) scale(1)}
body.is-inner.settled .content-window{opacity:1;transform:none;transition:none}
/* No Dashboard os próprios tiles já cobrem quase toda a área (fotos/vídeos
   e painéis); deixamos o fundo da janela transparente para o vídeo pausado
   aparecer nos vãos entre os quadrados, em vez de um painel escuro sólido. */
body.dashboard-body .content-window{background:transparent;box-shadow:none}

/* O topo da janela alinha com a caixa do logo, em TODA página interna — com
   o mesmo recorte de cantos arredondados usado no card "Especialista" do
   Dashboard, para o logo encaixar exatamente do mesmo jeito em qualquer
   página. Aproximação de arco por polígono (3 cantos do recorte + os 3
   demais cantos arredondados da janela, raio 28px). */
.content-window{
  clip-path:polygon(
    /* canto A — convexo, onde o recorte encontra a borda superior */
    calc(var(--icon-size) + var(--tile-gap)) var(--notch-r),
    calc(var(--icon-size) + var(--tile-gap) + var(--notch-r)*0.076) calc(var(--notch-r)*0.617),
    calc(var(--icon-size) + var(--tile-gap) + var(--notch-r)*0.293) calc(var(--notch-r)*0.293),
    calc(var(--icon-size) + var(--tile-gap) + var(--notch-r)*0.617) calc(var(--notch-r)*0.076),
    calc(var(--icon-size) + var(--tile-gap) + var(--notch-r)) 0,

    calc(100% - 14px) 0,
    calc(100% - 14px*0.617) calc(14px*0.0761),
    calc(100% - 14px*0.293) calc(14px*0.293),
    calc(100% - 14px*0.076) calc(14px*0.6173),
    100% 14px,

    100% calc(100% - 14px),
    calc(100% - 14px*0.0761) calc(100% - 14px*0.6173),
    calc(100% - 14px*0.293) calc(100% - 14px*0.293),
    calc(100% - 14px*0.6173) calc(100% - 14px*0.0761),
    calc(100% - 14px) 100%,

    14px 100%,
    calc(14px*0.6173) calc(100% - 14px*0.0761),
    calc(14px*0.293) calc(100% - 14px*0.293),
    calc(14px*0.0761) calc(100% - 14px*0.6173),
    0 calc(100% - 14px),

    /* canto C — convexo, onde o recorte encontra a borda esquerda */
    0 calc(var(--icon-size) + var(--tile-gap) + var(--notch-r)),
    calc(var(--notch-r)*0.076) calc(var(--icon-size) + var(--tile-gap) + var(--notch-r)*0.617),
    calc(var(--notch-r)*0.293) calc(var(--icon-size) + var(--tile-gap) + var(--notch-r)*0.293),
    calc(var(--notch-r)*0.617) calc(var(--icon-size) + var(--tile-gap) + var(--notch-r)*0.076),
    var(--notch-r) calc(var(--icon-size) + var(--tile-gap)),

    /* canto B — côncavo, o canto interno do recorte (o mais visível) */
    calc(var(--icon-size) + var(--tile-gap) - var(--notch-r)) calc(var(--icon-size) + var(--tile-gap)),
    calc(var(--icon-size) + var(--tile-gap) - var(--notch-r)*0.617) calc(var(--icon-size) + var(--tile-gap) - var(--notch-r)*0.076),
    calc(var(--icon-size) + var(--tile-gap) - var(--notch-r)*0.293) calc(var(--icon-size) + var(--tile-gap) - var(--notch-r)*0.293),
    calc(var(--icon-size) + var(--tile-gap) - var(--notch-r)*0.076) calc(var(--icon-size) + var(--tile-gap) - var(--notch-r)*0.617),
    calc(var(--icon-size) + var(--tile-gap)) calc(var(--icon-size) + var(--tile-gap) - var(--notch-r))
  );
}

@media (max-width:980px){
  /* No mobile o grid empilha e o logo encolhe sem se alinhar a nada — sem
     recorte, só a janela arredondada normal, com margem maior no topo. */
  .content-window{margin:100px 16px 24px;height:calc(100vh - 100px - 24px);border-radius:11px;clip-path:none}
}
@media (max-width:480px){
  .content-window{margin:86px 14px 20px;height:calc(100vh - 86px - 20px);border-radius:9px}
}

body.is-home .content-window{
  margin:0;height:100%;border-radius:0;background:none;box-shadow:none;
  clip-path:none;opacity:1;transform:none;transition:none;overflow:visible;
}
.landing{position:relative;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}
.landing-content{position:relative;z-index:2;max-width:720px;padding:0 24px}
.landing-eyebrow{color:var(--accent-2);text-transform:uppercase;letter-spacing:.18em;font-weight:700;font-size:.85rem;margin-bottom:16px;text-shadow:0 3px 14px rgba(0,0,0,0.85)}
.landing-content h1{font-size:clamp(2.52rem,6vw,4.32rem);line-height:1.05;letter-spacing:-0.01em;margin-bottom:16px;color:#fff;text-shadow:0 6px 26px rgba(0,0,0,0.9),0 2px 8px rgba(0,0,0,0.7)}
.landing-lead{font-size:clamp(1rem,2vw,1.2rem);color:rgba(255,255,255,0.82);max-width:560px;margin:0 auto 4px;text-shadow:0 3px 14px rgba(0,0,0,0.85)}

/* ===== Hero (subpáginas) ===== */
.page-hero{position:relative;padding:36px 0 60px;overflow:hidden;border-bottom:1px solid var(--border)}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%, rgba(3,63,99,.55), transparent 60%)}
.page-hero .container{position:relative;max-width:900px}
.breadcrumbs{color:var(--text-dim);font-size:.85rem;margin-bottom:18px}
.breadcrumbs a{color:var(--text-dim)}
.breadcrumbs a:hover{color:var(--accent-2)}
.page-hero h1{font-size:clamp(2rem,4vw,3rem)}
.page-hero .lead{font-size:1.15rem;color:var(--text-dim);max-width:640px}
.hero-points{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-points span{background:var(--panel);border:1px solid var(--border);padding:8px 14px;border-radius:999px;font-size:.85rem;color:var(--text-dim)}

/* ===== Dashboard — grid fiel ao 363sudbury.com/dashboard, sem scroll ===== */
.dashboard{height:100%;width:100%;padding:0;display:flex}
.bento-grid{
  position:relative;flex:1;width:100%;
  display:grid;grid-template-columns:2.15fr 1fr;gap:8px;min-height:0;height:100%;
}
.bento-left, .bento-right{display:grid;gap:8px;min-height:0;height:100%}
.bento-left{grid-template-rows:1.15fr 1fr}
.bento-right{grid-template-rows:auto 1fr auto}

.tile{
  position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);
  background-color:var(--panel);background-size:cover;background-position:center;
  display:flex;flex-direction:column;justify-content:flex-end;min-height:0;color:var(--text);
}
.tile-icon-badge{
  position:absolute;top:14px;right:14px;width:clamp(30px,4.2vh,40px);height:clamp(30px,4.2vh,40px);
  border-radius:10px;background:var(--accent);
  color:#111;display:flex;align-items:center;justify-content:center;z-index:2;
}
.tile-icon-badge svg{width:56%;height:56%}
.tile-body{position:relative;z-index:2;padding:clamp(14px,2.4vh,28px)}
.tile-body .eyebrow{color:var(--accent-2);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:700;margin-bottom:6px}
.tile-body p.sub{color:var(--text-dim);font-size:.85rem;margin-bottom:0}

.tile-hero{
  min-height:0;
  /* Recorte com os 3 cantos arredondados (mesmo raio --notch-r), em vez do
     ângulo reto: cada canto é aproximado por um pequeno arco de círculo. */
  clip-path:polygon(
    /* canto A — convexo, onde o recorte encontra a borda superior */
    calc(var(--icon-size) + var(--tile-gap)) var(--notch-r),
    calc(var(--icon-size) + var(--tile-gap) + var(--notch-r)*0.076) calc(var(--notch-r)*0.617),
    calc(var(--icon-size) + var(--tile-gap) + var(--notch-r)*0.293) calc(var(--notch-r)*0.293),
    calc(var(--icon-size) + var(--tile-gap) + var(--notch-r)*0.617) calc(var(--notch-r)*0.076),
    calc(var(--icon-size) + var(--tile-gap) + var(--notch-r)) 0,

    100% 0,
    100% 100%,
    0 100%,

    /* canto C — convexo, onde o recorte encontra a borda esquerda */
    0 calc(var(--icon-size) + var(--tile-gap) + var(--notch-r)),
    calc(var(--notch-r)*0.076) calc(var(--icon-size) + var(--tile-gap) + var(--notch-r)*0.617),
    calc(var(--notch-r)*0.293) calc(var(--icon-size) + var(--tile-gap) + var(--notch-r)*0.293),
    calc(var(--notch-r)*0.617) calc(var(--icon-size) + var(--tile-gap) + var(--notch-r)*0.076),
    var(--notch-r) calc(var(--icon-size) + var(--tile-gap)),

    /* canto B — côncavo, o canto interno do recorte (o mais visível) */
    calc(var(--icon-size) + var(--tile-gap) - var(--notch-r)) calc(var(--icon-size) + var(--tile-gap)),
    calc(var(--icon-size) + var(--tile-gap) - var(--notch-r)*0.617) calc(var(--icon-size) + var(--tile-gap) - var(--notch-r)*0.076),
    calc(var(--icon-size) + var(--tile-gap) - var(--notch-r)*0.293) calc(var(--icon-size) + var(--tile-gap) - var(--notch-r)*0.293),
    calc(var(--icon-size) + var(--tile-gap) - var(--notch-r)*0.076) calc(var(--icon-size) + var(--tile-gap) - var(--notch-r)*0.617),
    calc(var(--icon-size) + var(--tile-gap)) calc(var(--icon-size) + var(--tile-gap) - var(--notch-r))
  );
}
/* Vídeo de fundo reutilizável para qualquer tile (hero, amenities, etc.) */
.tile-media-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.tile-media-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(5,8,11,0.08) 32%, rgba(5,8,11,0.9) 100%);transition:background .3s ease}
/* Mouse over nas caixas com foto/vídeo: máscara preta mais forte + texto principal dourado */
.tile-hero:hover .tile-media-overlay,
.tile-amenity:hover .tile-media-overlay{background:rgba(5,8,11,0.72)}
.tile-hero .tile-body h1, .tile-amenity .tile-body h3{transition:color .3s ease}
.tile-hero:hover .tile-body h1,
.tile-amenity:hover .tile-body h3{color:var(--accent-2)}
.tile-hero .tile-body h1{font-size:clamp(2.2rem,5.6vh,4rem);line-height:1.08;max-width:640px;margin-bottom:.25em}
.tile-hero .tile-body p{max-width:460px;font-size:clamp(.8rem,1.5vh,.95rem);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.arrow-link{
  margin-top:12px;display:inline-flex;align-items:center;justify-content:center;
  width:clamp(34px,4.6vh,44px);height:clamp(34px,4.6vh,44px);border-radius:50%;
  border:1px solid rgba(255,255,255,0.35);color:#fff;transition:border-color .2s,background .2s;
}
.arrow-link:hover{border-color:var(--accent);background:rgba(201,162,74,0.15)}
.arrow-link svg{width:46%;height:46%}

.amenity-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;height:100%;min-height:0}
.tile-amenity .tile-body{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
.tile-amenity .tile-body h3{font-size:clamp(1.9rem,4vh,2.4rem);line-height:1.1;margin:0;max-width:88%}
.tile-amenity .tile-body svg{width:18px;height:18px;flex-shrink:0;color:var(--accent-2)}

.icon-row{display:grid;grid-template-columns:var(--icon-size) var(--icon-size) 1fr;gap:var(--tile-gap);height:var(--icon-size)}
.tile-icon-sm{
  border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--panel);
  display:flex;align-items:center;justify-content:center;color:var(--text);transition:border-color .2s,color .2s;
}
.tile-icon-sm:hover{border-color:var(--accent);color:var(--accent-2)}
.tile-icon-sm svg{width:clamp(18px,2.6vh,22px);height:clamp(18px,2.6vh,22px)}
.tile-time{
  border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--panel);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;
  padding:0 clamp(10px,1.6vh,18px);font-variant-numeric:tabular-nums;
}
.tile-time-loc{font-size:.78rem;color:var(--text-dim)}
.tile-time-now{display:flex;align-items:center;gap:8px;font-size:clamp(.95rem,2.1vh,1.2rem);font-weight:700}
.tile-time-now #hud-temp{font-weight:800}
.tile-time-icon{display:inline-flex;color:var(--accent-2);flex-shrink:0}
.tile-time-icon svg{width:clamp(16px,2.4vh,20px);height:clamp(16px,2.4vh,20px)}

.tile-week{min-height:0;border:1px solid var(--bg)}
.tile-week-head{
  position:absolute;top:0;left:0;right:0;z-index:2;
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:clamp(14px,2.2vh,22px);
  background:rgba(5,8,11,0.6);
  transition:background .3s ease;
}
.tile-week-head .eyebrow{color:var(--accent-2);text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;font-weight:700;margin:0 0 4px}
.tile-week-head h3{font-size:clamp(1rem,2.4vh,1.35rem);margin:0;transition:color .3s ease}
.tile-week-sub{font-size:.78rem;color:var(--text-dim);margin:3px 0 0}
.tile-week-star{color:var(--text-dim);flex-shrink:0;margin-top:2px}
.tile-week-star svg{width:18px;height:18px}
.tile-week:hover .tile-week-head{background:rgba(5,8,11,0.75)}
.tile-week:hover .tile-week-head h3{color:var(--accent-2)}

.quicklink-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;height:clamp(90px,17vh,150px)}
.tile-mini{
  border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--panel);
  display:flex;flex-direction:column;justify-content:space-between;padding:clamp(10px,1.8vh,16px);
  color:var(--text);font:inherit;cursor:pointer;text-align:left;width:100%;margin:0;
  -webkit-appearance:none;appearance:none;transition:border-color .2s,transform .15s;
}
.tile-mini:hover{border-color:var(--accent)}
.tile-mini .tile-icon-badge{position:static;margin-bottom:auto}
.tile-mini-label{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:clamp(.82rem,1.7vh,.98rem);font-weight:600}
.tile-mini-label svg{width:15px;height:15px;color:var(--text-dim);flex-shrink:0}

/* Agente de IA — cor invertida (dourado) para se destacar como CTA */
.tile-mini-gold{
  background:var(--accent);
  border-color:transparent;color:#141008;
}
.tile-mini-gold:hover{transform:translateY(-2px);border-color:transparent}
.tile-mini-gold .tile-icon-badge{background:rgba(20,16,8,0.16);color:#141008}
.tile-mini-gold .tile-mini-label{color:#141008}
.tile-mini-gold .tile-mini-label svg{color:#141008}

.card-ia-gold{border-color:rgba(201,162,74,0.5);box-shadow:0 0 0 1px rgba(201,162,74,0.25), var(--shadow)}
.card-ia-gold .icon-wrap{background:var(--accent);color:#141008}

/* Botões Conheça/Fechar, Cote Agora e Agente IA — versão "inline", que só
   aparece em telas pequenas (ver toggle com .action-bar no breakpoint
   abaixo). Fica como último elemento dentro da janela de conteúdo, então
   aparece no final da página conforme o usuário rola — nunca flutuando por
   cima do conteúdo como a barra fixa do desktop. */
.action-bar-inline{
  display:none;flex-direction:column;justify-content:center;align-items:center;gap:24px;
  padding:22px 16px 6px;margin-top:auto;
}
.action-bar-inline .action-bar-buttons{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
.action-bar-inline .action-btn{backdrop-filter:blur(6px)}

@media (max-width:980px){
  /* Em telas estreitas o grid empilha em coluna única — o container do
     Dashboard não pode ficar preso a height:100% (isso espremia os blocos
     uns sobre os outros); deixamos crescer com o conteúdo e a página rola
     dentro da janela (#main) para mostrar tudo sem sobreposição. */
  .dashboard{height:auto;min-height:100%}
  .bento-grid{grid-template-columns:1fr;grid-template-rows:none;height:auto}
  .bento-left, .bento-right{grid-template-rows:none;height:auto}
  .tile-hero{min-height:280px}
  .amenity-row, .quicklink-row{height:auto}
  .amenity-row .tile-amenity, .quicklink-row .tile-mini{min-height:110px}
  .tile-week{min-height:220px}
  .logo-badge{width:56px;height:56px}
  .tile-hero{clip-path:none}

  /* Títulos dos tiles usavam unidades vh (pensadas pro grid fixo de
     desktop) — numa tela alta e estreita isso mantinha a fonte grande
     demais para a largura disponível, estourando a caixa. Em telas
     pequenas, passamos a basear o tamanho na largura (vw). */
  .tile-hero .tile-body h1{font-size:clamp(1.2rem,6.4vw,1.8rem);max-width:100%}
  .tile-amenity .tile-body h3{font-size:clamp(1rem,4.6vw,1.3rem);max-width:80%}
  .tile-week-head h3{font-size:clamp(.85rem,3.6vw,1.05rem)}

  /* Títulos das páginas internas e da Home também usavam um piso (mínimo
     do clamp) grande demais para telas estreitas — reduzindo o piso e o
     fator vw pra acompanhar a largura disponível sem estourar a caixa. */
  .landing-content h1{font-size:clamp(1.7rem,7.5vw,2.4rem)}
  .page-hero h1{font-size:clamp(1.4rem,6.5vw,1.9rem)}
  .section-head h2{font-size:clamp(1.2rem,5.5vw,1.6rem)}

  /* A barra fixa vira a versão "inline", em fluxo normal no final da
     página — some a flutuante e mostra a de dentro da janela. Só nas
     páginas internas: a Home tem um único botão "Conheça" sobre o vídeo,
     sem conteúdo concorrendo por espaço, então continua fixo como sempre
     (e não teria como aparecer via scroll, já que a Home não rola). */
  body.is-inner .action-bar{display:none}
  body.is-inner .action-bar-inline{display:flex}
}

/* ===== Sections (páginas internas) ===== */
.section{padding:70px 0}
.section-head{max-width:680px;margin:0 auto 40px;text-align:center}
.section-head .eyebrow{color:var(--accent-2);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:700}
.section-head h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}.grid-2{grid-template-columns:1fr}}
@media (max-width:560px){.grid-3,.grid-4{grid-template-columns:1fr}}
@media (max-width:480px){
  .btn-square{min-width:0;padding:.72em 1.35em;font-size:.85rem}
  .action-bar{gap:6px}
  .action-bar-buttons{gap:8px}
  .logo-badge{top:14px;left:14px}
  .action-btn{height:42px}
  .action-btn-icon{width:42px;height:42px}
  .action-btn-icon svg{width:17px;height:17px}

  /* Telas bem pequenas (celulares estreitos): mais um degrau de redução
     nos títulos, pra garantir que caibam mesmo com nomes longos. */
  .tile-hero .tile-body h1{font-size:clamp(1.05rem,6.8vw,1.4rem)}
  .tile-amenity .tile-body h3{font-size:clamp(.92rem,5vw,1.1rem)}
  .tile-week-head h3{font-size:clamp(.78rem,3.8vw,.92rem)}
  .landing-content h1{font-size:clamp(1.4rem,8vw,1.9rem)}
  .page-hero h1{font-size:clamp(1.2rem,7vw,1.5rem)}
  .section-head h2{font-size:clamp(1.05rem,6vw,1.3rem)}
}

/* ===== Cote Agora: grade dos 5 canais (Telefone/Me ligue/WhatsApp/Formulário/IA) ===== */
.channel-grid{grid-template-columns:repeat(5,1fr);gap:14px}
@media (max-width:900px){.channel-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.channel-grid{grid-template-columns:repeat(2,1fr)}}
.channel-card{
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  text-decoration:none;color:var(--text);cursor:pointer;
  font:inherit;border:1px solid var(--border);width:100%;
  transition:border-color .2s ease,transform .15s ease;
}
.channel-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.channel-card h3{font-size:1rem;margin-bottom:2px}
.channel-card .sub{font-size:.82rem;color:var(--text-dim);margin-bottom:0}

.product-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;position:relative}
.product-card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.product-card .body{padding:20px}
.product-card h3{font-size:1.1rem}
.product-card p{font-size:.92rem;margin-bottom:0}
/* Selo do logotipo da linha Evo sobre a foto do card (produto EVO usado
   pela Évora Maxx) — plaqueta clara pra manter contraste com o wordmark
   preto+dourado sobre fotos de tons variados. */
.product-card img.product-card-logo{
  position:absolute;top:12px;left:12px;z-index:2;
  aspect-ratio:auto;width:auto;height:22px;max-width:62%;object-fit:contain;
  background:rgba(255,255,255,0.92);border-radius:6px;padding:5px 8px;
}

.steps{counter-reset:step}
.step{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--border)}
.step:last-child{border-bottom:0}
.step .num{font-size:1.4rem;font-weight:800;color:var(--accent-2);min-width:44px}

.diff-card{text-align:center;padding:26px}
.diff-card .icon-wrap{margin:0 auto 14px;width:50px;height:50px;border-radius:14px;background:rgba(201,162,74,0.14);display:flex;align-items:center;justify-content:center;color:var(--accent-2)}

.cta-band{background:linear-gradient(135deg,var(--brand),#021f31);border-radius:var(--radius);padding:50px;text-align:center;margin:0 auto}
.cta-band h2{margin-bottom:10px}
.cta-band p{color:rgba(255,255,255,0.75)}

/* ===== Vídeos de demonstração (produtos) ===== */
.video-showcase-grid{display:grid;grid-template-columns:repeat(var(--vsc-cols,3),1fr);gap:24px}
.video-showcase-card{border-radius:var(--radius);overflow:hidden;background:var(--bg-elev);border:1px solid var(--border)}
.video-showcase-media{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;background:#000}
.video-showcase-label{padding:12px 16px;font-weight:700;font-size:.92rem}
@media(max-width:900px){
  .video-showcase-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .video-showcase-grid{grid-template-columns:1fr;max-width:360px;margin:0 auto}
}

/* ===== Linha Evo — faixa de marca (separada da Évora Maxx) ===== */
.evo-brand-band{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:40px}
.evo-brand-band-head{max-width:680px;margin:0 auto 28px;text-align:center}
.evo-brand-band-head p:not(.eyebrow){color:var(--text-dim);font-size:.98rem;line-height:1.6}
.evo-brand-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:28px 40px}
.evo-brand-logos img{height:34px;width:auto;object-fit:contain;background:rgba(255,255,255,0.92);border-radius:8px;padding:8px 14px}
@media(max-width:640px){
  .evo-brand-band{padding:28px 20px}
  .evo-brand-logos{gap:16px 22px}
  .evo-brand-logos img{height:26px;padding:6px 10px}
}

/* ===== Contact / Location section (home) ===== */
.contact-form{display:grid;gap:14px}
.contact-form label{font-size:.85rem;color:var(--text-dim);display:block;margin-bottom:6px}
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:.8em 1em;color:var(--text);font-family:inherit;
}
.contact-form textarea{min-height:110px;resize:vertical}
.privacy-note{font-size:.78rem;color:var(--text-dim)}
.privacy-note a{color:var(--accent-2)}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--border);padding:60px 0 20px;margin-top:60px;background:var(--bg-elev)}
.footer-inner{max-width:var(--maxw);margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.footer-brand img{height:32px;margin-bottom:10px}
.footer-brand p{font-size:.85rem}
.footer-col h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-bottom:14px}
.footer-col li{margin-bottom:10px;font-size:.9rem;color:var(--text-dim)}
.footer-col a:hover{color:var(--accent-2)}
.footer-socials{display:flex;gap:10px}
.footer-socials a{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.footer-socials svg{width:17px;height:17px}
.footer-bottom{max-width:var(--maxw);margin:40px auto 0;padding:20px 20px 0;border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.8rem;color:var(--text-dim)}
@media (max-width:900px){.footer-inner{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-inner{grid-template-columns:1fr}}



/* ===== Modal do Agente Évora IA (popup, todas as páginas) ===== */
.ia-modal-overlay{
  position:fixed;inset:0;background:rgba(3,5,7,0.72);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  z-index:200;opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.ia-modal-overlay.open{opacity:1;pointer-events:auto}
.ia-modal{
  width:100%;max-width:440px;max-height:min(640px,88vh);
  background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.7);
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(12px) scale(.98);opacity:0;transition:transform .25s ease, opacity .25s ease;
}
.ia-modal-overlay.open .ia-modal{transform:translateY(0) scale(1);opacity:1}
.ia-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border)}
.ia-modal-title-wrap{display:flex;align-items:center;gap:12px}
.ia-modal-badge{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:var(--accent);color:#141008;
  display:flex;align-items:center;justify-content:center;
}
.ia-modal-badge svg{width:20px;height:20px}
.ia-modal-header h2{font-size:1.02rem;margin:0}
.ia-modal-header p{font-size:.78rem;color:var(--text-dim);margin:0}
.ia-modal-close{background:transparent;border:1px solid var(--border);border-radius:50%;width:34px;height:34px;color:var(--text);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ia-modal-close svg{width:16px;height:16px}
.ia-modal-close:hover{border-color:var(--accent)}
.ia-modal-log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
.ia-modal .ia-msg{max-width:85%;font-size:.9rem;line-height:1.45}
.ia-modal .ia-msg p{margin:0;color:inherit}
.ia-msg-bot{align-self:flex-start;background:var(--panel);border:1px solid var(--border);border-radius:14px 14px 14px 4px;padding:10px 14px;color:var(--text)}
.ia-msg-user{align-self:flex-end;background:var(--accent);border-radius:14px 14px 4px 14px;padding:10px 14px;color:#141008}
.ia-msg-typing p{display:flex;gap:4px;align-items:center}
.ia-modal-form{display:flex;gap:8px;padding:14px;border-top:1px solid var(--border)}
.ia-modal-form input{flex:1;background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:.7em 1.1em;color:var(--text);font:inherit}
.ia-modal-form .btn{padding:.7em .9em}

@media (max-width:560px){
  .ia-modal{max-width:100%;max-height:100%;height:100%;border-radius:0}
  .ia-modal-overlay{padding:0}
}

/* Painel Admin — Carro do Dia */
.admin-form{display:flex;flex-direction:column;gap:16px;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px}
.admin-form label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--text-dim);font-weight:600}
.admin-form input,.admin-form textarea,.admin-form select{background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:10px;padding:.7em .9em;color:var(--text);font:inherit}
.admin-form input:focus,.admin-form textarea:focus,.admin-form select:focus{outline:none;border-color:var(--accent)}
.admin-feedback{min-height:1.2em;font-size:.85rem;margin:0}

/* Painel Admin — abas (Carro do Dia / Blog) */
.admin-tabs{display:flex;gap:8px;margin-bottom:22px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.admin-tab{background:transparent;border:none;padding:10px 4px;margin-right:18px;color:var(--text-dim);font:inherit;font-weight:600;cursor:pointer;border-bottom:2px solid transparent}
.admin-tab.is-active{color:var(--accent-2);border-bottom-color:var(--accent)}
.admin-subtabs{display:flex;gap:10px;margin-bottom:18px}
.admin-subtab{background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:8px 16px;color:var(--text-dim);font:inherit;font-size:.85rem;cursor:pointer}
.admin-subtab.is-active{color:#141008;background:var(--accent);border-color:var(--accent)}
.admin-info-box{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px;font-size:.9rem;color:var(--text-dim);display:flex;flex-direction:column;gap:12px}
.admin-info-box strong{color:var(--text)}
.admin-code{background:rgba(255,255,255,0.06);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;color:var(--accent-2);word-break:break-all}

/* Painel Admin — topo (usuário logado + ações), listas e KPIs */
.admin-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.admin-user-role{color:var(--text-dim);font-size:.85rem}
.admin-topbar-actions{display:flex;gap:10px}
.admin-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:700px){.admin-kpi-row{grid-template-columns:1fr 1fr}}
.admin-kpi{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:6px}
.admin-kpi-label{font-size:.78rem;color:var(--text-dim)}
.admin-kpi-value{font-size:1.6rem;font-weight:800;color:var(--accent-2)}
.admin-list-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.admin-list-row:last-child{border-bottom:0}
.admin-row-btn{padding:6px 12px;font-size:.8rem;flex-shrink:0}
.admin-thumb{width:56px;height:56px;object-fit:cover;border-radius:8px;flex-shrink:0}
.admin-split{display:grid;grid-template-columns:280px 1fr;gap:18px;align-items:start}
@media (max-width:700px){.admin-split{grid-template-columns:1fr}}
.admin-conv-list{display:flex;flex-direction:column;gap:8px;max-height:520px;overflow-y:auto}
.admin-conv-item{text-align:left;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px 14px;color:var(--text);font:inherit;cursor:pointer}
.admin-conv-item:hover{border-color:var(--accent)}
.admin-conv-detail{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px;max-height:520px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.admin-conv-msg{border-radius:10px;padding:10px 14px;background:rgba(255,255,255,0.04)}
.admin-conv-msg small{color:var(--text-dim);font-size:.75rem}
.admin-conv-msg p{margin:4px 0 0}
.admin-conv-msg-assistant{border-left:2px solid var(--accent-2)}
.admin-modal-overlay{position:fixed;inset:0;background:rgba(3,5,7,0.72);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:300}
.admin-modal{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px;max-width:380px;width:100%}
.admin-modal h3{margin-bottom:16px}

/* Carro do Dia — grade com fotos 50% menores (dobro de colunas em relação
   ao .grid-3 padrão) */
#carro-do-dia-grid{grid-template-columns:repeat(6,1fr);gap:14px}
#carro-do-dia-grid .product-card .body{padding:10px}
#carro-do-dia-grid .product-card h3{font-size:.82rem;margin-bottom:2px}
#carro-do-dia-grid .product-card p{font-size:.72rem;line-height:1.35}
#carro-do-dia-grid .product-card .eyebrow{font-size:.62rem;margin-bottom:2px}
@media (max-width:900px){#carro-do-dia-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){#carro-do-dia-grid{grid-template-columns:repeat(2,1fr)}}