/* ==========================================================================
   LORD'S BARBEARIA MEDIEVAL — prévia v2 ESCURA (CALEIVI, 15/09/2026).
   Identidade do board dele (ChatGPT): ouro + preto + marrom, blackletter no título,
   coroa/rei. Hero escuro + corpo creme quente + cartões escuros + rodapé preto.
   ⚠️ Logo do rei e fotos escuras entram quando ele mandar os arquivos (aqui: coroa SVG + fotos ilustrativas).
   Honestidade: nota 4,9 · 186 REAL do Google; sem preço/horário inventado.
   Paleta: DOURADO #D4AF37 · PRETO #0B0B0B · CINZA #1A1A1A · MARROM #3A2A17.
   ========================================================================== */

:root {
  --ouro:        #D4AF37;
  --ouro-claro:  #E8CE73;
  --ouro-escuro: #6E5410;   /* dourado pra TEXTO pequeno sobre creme (4,7:1) */
  --preto:       #0B0B0B;
  --cinza:       #1A1A1A;
  --marrom:      #3A2A17;
  --creme:       #F6F1E6;
  --creme-2:     #EFE7D6;

  --cor-titulo:      #F2ECDD;
  --cor-texto:       #D9D2C3;
  --cor-texto-suave: #A79F8E;
  --cor-acao:        #B8912B;   /* usado onde o esqueleto pede uma cor sólida de ação */
  --cor-acao-escura: #8A6D14;
  --cor-acao-viva:   #E8CE73;
  --grad:      linear-gradient(95deg, #E8CE73 0%, #D4AF37 50%, #B0871E 100%);   /* dourado vivo (site inteiro escuro) */
  --grad-btn:  linear-gradient(120deg, #E6C866 0%, #D4AF37 50%, #B0871E 100%);   /* botão ouro, texto preto */
  --sombra-btn: rgba(11, 11, 11, .34);

  --fundo:          #100E09;
  --borda-cartao:   rgba(212, 175, 55, .22);
  --sombra-cartao:  rgba(23, 19, 11, .16);
  --linha:          rgba(23, 19, 11, .12);
  --foco:           #B0871E;

  /* rodapé preto, destaque dourado */
  --forte-1: #161310; --forte-2: #0D0B08; --forte-3: #050403; --sobre-forte: #E8CE73;

  --fonte:        "Barlow", "Segoe UI", system-ui, sans-serif;
  --fonte-titulo: "Grenze Gotisch", "Cinzel", Georgia, serif;   /* blackletter medieval, legível */
  --fonte-serifa: "Cinzel", Georgia, "Times New Roman", serif;
  --script:       "Cinzel", Georgia, serif;
}

body { background: #100E09; }

h1, h2, h3, .marca__txt b { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: .01em; }
.etiqueta { color: var(--ouro); font-weight: 700; letter-spacing: .28em; font-family: var(--fonte-serifa); }
.titulo { font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1; }
.suave { color: var(--cor-texto-suave); }

/* marca com brasão de coroa (SVG dourado — troca pelo logo do rei quando ele mandar o PNG) */
.marca__brasao { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; }
.marca__brasao svg { width: 100%; height: 100%; color: var(--ouro); filter: drop-shadow(0 3px 5px rgba(0,0,0,.3)); }
.marca__txt b { font-size: 1.85rem; line-height: .9; letter-spacing: .02em; color: var(--cor-titulo); }
.marca__txt small { margin-top: 4px; font-size: .5rem; letter-spacing: .34em; color: var(--ouro-escuro); text-transform: uppercase; font-family: var(--fonte-serifa); }

.menu a { font-family: var(--fonte); font-weight: 600; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; }
.btn { font-family: var(--fonte-serifa); font-weight: 700; font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; padding: 14px 26px; }
.btn--grande { padding: 16px 32px; font-size: .92rem; }
/* botão de ação = OURO com texto PRETO (como o mockup) */
.btn--acao { background: var(--grad-btn); color: var(--preto); box-shadow: 0 14px 30px var(--sombra-btn), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn--acao:hover { filter: brightness(1.06); }
.btn--acao svg, .btn__circulo svg { color: var(--preto); }
.btn__circulo { background: var(--preto); }
.btn__circulo svg { color: var(--ouro); }
.topo__cta { padding: 12px 22px; font-size: .78rem; }

/* barra de prévia (topo) */
.previa { background: var(--preto); color: var(--ouro-claro); text-align: center; font-size: .8rem; line-height: 1.4; padding: 8px 16px; letter-spacing: .02em; }
.previa b { color: #fff; }

/* faixa nobre: diagonal ouro/preto */
.poste { height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,.55) 50%, transparent 100%); opacity: 1; }

/* ---------------------------------------------------------- banner ESCURO */
.hero { background: var(--preto); min-height: clamp(360px, 29vw, 450px); }
.hero__foto { filter: none; object-position: 58% center; }
.hero::after { background: linear-gradient(90deg, rgba(8,7,5,.92) 0%, rgba(8,7,5,.6) 32%, rgba(8,7,5,.14) 54%, rgba(8,7,5,0) 72%); }
.hero .etiqueta { color: var(--ouro); }
.hero h1 { font-size: clamp(2.8rem, 6.2vw, 5rem); line-height: .96; letter-spacing: .01em; color: var(--creme); }
/* nas seções ESCURAS (hero e chamada final) o destaque volta a ser DOURADO vivo */
.hero h1 .grad, .final h2 .grad { background: linear-gradient(95deg, #E8CE73 0%, #D4AF37 50%, #B0871E 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero__sub { color: rgba(246, 241, 230, .88); font-weight: 500; }
.hero__nota { display: flex; align-items: center; gap: 7px; margin-top: 16px; font-size: .88rem; font-weight: 600; color: rgba(246,241,230,.9); }
.hero__nota svg { width: 17px; height: 17px; color: var(--ouro); }

/* -------------------------------------------------- promessas (fundo creme) */
.beneficios { background: #100E09; box-shadow: none; }
.beneficios__grid { gap: 16px; padding-block: clamp(20px, 2.2vw, 30px); }
.beneficio { padding: 20px 14px; background: transparent; border: 0; box-shadow: none; }
.beneficio + .beneficio { border-left: 1px solid var(--borda-cartao); }
/* ícone em círculo PRETO com desenho dourado (como o mockup) */
.beneficio__ico { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 12px; border-radius: 50%; background: #16130C; border: 1px solid rgba(212,175,55,.4); }
.beneficio__ico svg { width: 34px; height: 34px; color: var(--ouro); }
.beneficio__ico--nota svg { width: 34px; height: 34px; color: var(--ouro); }
.beneficio h2 { font-size: 1.12rem; line-height: 1.05; letter-spacing: .02em; color: var(--cor-titulo); }
.beneficio p { margin-top: 6px; font-size: .82rem; color: var(--cor-texto-suave); }

/* ---------------------------------------------------- serviços (cartão escuro) */
.secao { background: #100E09; }
.cartao-cor { --m-grad: linear-gradient(165deg, #262019 0%, #171310 45%, #0A0806 100%); --m-escuro: #0A0806; --m-sombra: rgba(0, 0, 0, .4); }
.cartao-cor--ouro   { --m-grad: linear-gradient(165deg, #4A3720 0%, #33240F 45%, #1C1206 100%); --m-escuro: #1C1206; --m-sombra: rgba(58, 42, 23, .4); }
.cartao-cor--carvao { --m-grad: linear-gradient(165deg, #2A2A2A 0%, #161616 45%, #070707 100%); --m-escuro: #070707; --m-sombra: rgba(0, 0, 0, .42); }
.cartao-cor__foto { height: 190px; }
.cartao-cor__foto img { filter: brightness(.92) contrast(1.03) saturate(.96); }
.cartao-cor__foto figcaption { font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ouro-claro); font-family: var(--fonte-serifa); }
.cartao-cor h3 { margin-top: 18px; font-size: 1.75rem; line-height: 1; letter-spacing: .01em; color: var(--ouro); }
.cartao-cor p { color: rgba(246, 241, 230, .8); }
.cartao-cor .checks { color: rgba(246, 241, 230, .9); }
.cartao-cor .checks svg { color: var(--ouro); }
.cartao-cor .btn--branco { margin-top: auto; background: var(--grad-btn); color: var(--preto); border: 0; }
.sublista { color: var(--ouro-escuro); margin-top: clamp(34px, 3.6vw, 46px); font-family: var(--fonte-serifa); letter-spacing: .18em; }
.extras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.extras p { margin: 0; padding: 16px; border-radius: 14px; font-size: .84rem; line-height: 1.35; color: rgba(246,241,230,.82);
  background: linear-gradient(160deg, #1C1813, #0C0A07); border: 1px solid rgba(212, 175, 55, .3); box-shadow: 0 12px 24px rgba(0, 0, 0, .18); }
.extras strong { display: block; font-family: var(--fonte-serifa); font-weight: 700; font-size: .96rem; letter-spacing: .06em; color: var(--ouro); margin-bottom: 4px; text-transform: uppercase; }

/* ---------------------------------------------------- a casa (fundo creme) */
.visual-destaque::before { background: linear-gradient(150deg, #2A2620 0%, #14110B 55%, #060504 100%); }
.visual-destaque::after { border-color: var(--ouro); opacity: .6; }
.visual-destaque__foto > img { object-position: 45% center; }
.visual-destaque__folha { display: grid; place-items: center; }
.visual-destaque__folha svg { width: 100%; height: 100%; color: var(--ouro); filter: drop-shadow(0 8px 12px rgba(0,0,0,.35)); }
.traco-sob::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M4 14C60 5 140 3 196 9' fill='none' stroke='%23D4AF37' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.mini-cartao { --mc-tinta: linear-gradient(135deg, #1B160D, #0C0A06); --mc-borda: rgba(212,175,55,.34); --mc-grad: linear-gradient(145deg, #E6C866, #B0871E); --mc-sombra: rgba(0,0,0,.45); }
.mini-cartao--ouro { --mc-tinta: linear-gradient(135deg, #241C0E, #0E0B05); --mc-borda: rgba(212,175,55,.3); --mc-grad: linear-gradient(145deg, #E6C866, #B0871E); --mc-sombra: rgba(0,0,0,.45); }
.mini-cartao--carvao { --mc-tinta: linear-gradient(135deg, #171717, #060606); --mc-borda: rgba(212,175,55,.24); --mc-grad: linear-gradient(145deg, #E6C866, #B0871E); --mc-sombra: rgba(0,0,0,.45); }
.mini-cartao__txt { color: rgba(238,231,214,.82); }
.mini-cartao__txt b { font-family: var(--fonte-serifa); font-weight: 700; font-size: .92rem; letter-spacing: .04em; line-height: 1.1; color: var(--ouro-claro); }
.visual-destaque__script { font-size: 1.3rem; letter-spacing: .12em; color: var(--ouro-escuro); font-family: var(--fonte-serifa); }
.lista-check { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.lista-check li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--cor-titulo); }
.lista-check svg { flex: none; width: 24px; height: 24px; padding: 5px; border-radius: 50%; color: var(--preto); background: var(--grad-btn); }
.btn--circulo { padding: 7px 26px 7px 7px; }

/* ------------------------------------------------ avaliações (nota real Google) */
.nota-google { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 44px); align-items: center;
  padding: clamp(24px, 3.4vw, 40px); border-radius: 22px; color: var(--creme);
  background: linear-gradient(150deg, #201B12 0%, #12100A 55%, #060504 100%); box-shadow: 0 26px 52px rgba(0, 0, 0, .34); border: 1px solid rgba(212,175,55,.28); }
.nota-google__num { text-align: center; padding-right: clamp(0px, 2vw, 20px); }
.nota-google__num b { display: block; font-family: var(--fonte-titulo); font-weight: 900; font-size: clamp(3.6rem, 8vw, 5.6rem); line-height: .85; color: var(--ouro); }
.nota-google__num .estrelas { display: block; margin-top: 6px; color: var(--ouro-claro); font-size: 1.35rem; letter-spacing: .12em; }
.nota-google__num small { display: block; margin-top: 8px; font-size: .82rem; color: rgba(246, 241, 230, .7); }
.nota-google__txt p { margin: 0 0 18px; font-size: 1.08rem; line-height: 1.5; color: rgba(246, 241, 230, .92); }
.estrelas { color: var(--ouro); }

/* --------------------------------------------------------------- contato */
.dados { color: var(--creme); background: linear-gradient(150deg, #201B12 0%, #12100A 60%, #060504 100%); border: 0; box-shadow: 0 24px 48px rgba(0, 0, 0, .34); }
.dados div { border-bottom-color: rgba(232, 206, 115, .18); }
.dados dt { color: var(--sobre-forte); }
.dados dt svg { fill: none; }

/* ------------------------------------------ chamada final: texto à esquerda */
.final { background-image: url(../img/hero-banner.jpg); background-position: 60% center; background-color: var(--preto); }
.final .hero__foto, .final img { filter: none; }
.final::after { background: linear-gradient(90deg, rgba(8,7,5,.95) 0%, rgba(8,7,5,.82) 38%, rgba(8,7,5,.3) 58%, rgba(8,7,5,0) 74%); }
.final__conteudo { text-align: left; }
.final .etiqueta { color: var(--ouro); }
.final h2 { margin-inline: 0; max-width: 12ch; font-size: clamp(2.6rem, 5.4vw, 4.2rem); line-height: .98; color: var(--creme); }
.final__sub { margin: 14px 0 26px; max-width: 32ch; font-weight: 500; color: rgba(246,241,230,.86); }

/* ------------------------------------------------------------------ rodapé */
.rodape .marca__brasao { width: 52px; height: 52px; }
.rodape .marca__txt b { color: #fff; }
.rodape__col svg { fill: none; }
.rodape__lema { margin-top: 12px; font-family: var(--fonte-serifa); font-size: .95rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sobre-forte); }
.rodape__fim strong { color: #fff; }
.flutuante { background: #25D366; }

@media (max-width: 960px) {
  .beneficios__grid { grid-template-columns: 1fr 1fr; }
  .extras { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .nota-google { grid-template-columns: 1fr; text-align: center; }
  .nota-google__num { padding-right: 0; }
}
@media (max-width: 640px) {
  .hero__foto { object-position: 62% center; }
  .hero__texto { max-width: min(70%, 320px); }
  .hero h1 { font-size: clamp(2.4rem, 12vw, 3.2rem); }
  .hero__sub { color: rgba(246,241,230,.9); }
  .hero .btn { padding: 13px 20px; font-size: .8rem; }
  .hero__nota { font-size: .74rem; }
  .beneficios__grid { gap: 10px; }
  .beneficio { padding: 18px 8px 16px; }
  .beneficio__ico { width: 54px; height: 54px; }
  .beneficio__ico img { width: 32px; height: 32px; }
  .beneficio__ico--nota svg { width: 28px; height: 28px; }
  .beneficio h2 { font-size: 1rem; }
  .beneficio p { font-size: .74rem; }
  .extras { gap: 10px; }
  .extras p { padding: 12px; font-size: .8rem; }
  .visual-destaque::before { bottom: 38%; }
  .visual-destaque::after { bottom: 36%; }
  .visual-destaque__cartoes { position: relative; z-index: 4; top: auto; right: auto; }
  .final { background-position: 74% center; }
  .final::after { background: linear-gradient(180deg, rgba(8,7,5,.9) 0%, rgba(8,7,5,.8) 100%); }
}

@media (min-width: 961px) {
  #casa .dupla { grid-template-columns: .9fr 1.1fr; }
  #casa .visual-destaque { padding-bottom: 86px; }
  #casa .visual-destaque__cartoes { top: 9%; width: 50%; }
  #casa .visual-destaque__script { bottom: 4px; right: 0; }
  #casa .visual-destaque__folha { right: auto; left: 2%; top: 4px; width: 78px; height: 78px; transform: rotate(-10deg); }
}

/* logo do rei (imagem transparente) no lugar da coroa/texto */
.marca__logo { height: 76px; width: auto; display: block; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.marca__logo--rodape { height: 92px; }
@media (max-width: 640px){ .marca__logo { height: 60px; } }

/* cabeçalho escuro (o site todo é escuro agora) */
.topo { background: #060504; border-bottom: 1px solid rgba(212,175,55,.14); }
.topo.topo--rolado { background: rgba(12,10,7,.96); backdrop-filter: blur(8px); }
.menu a { color: rgba(226,220,206,.72); }
.menu a:hover { color: var(--ouro); }
.hamburguer span { background: var(--ouro-claro); }
.menu-movel { background: #0C0A07; border-top: 1px solid rgba(212,175,55,.16); }
.menu-movel a { color: rgba(242,236,221,.92); }

/* Sobre a Lord's — 4 valores + foto */
.valores { list-style: none; margin: 24px 0 26px; padding: 0; display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 20px 28px; }
.valores li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--fonte-serifa); font-weight: 700; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ouro-claro); }
.valores__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #16130C; border: 1px solid rgba(212,175,55,.4); }
.valores__ico svg { width: 26px; height: 26px; color: var(--ouro); }
.sobre__foto { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid rgba(212,175,55,.22); box-shadow: 0 26px 52px rgba(0,0,0,.45); }
.sobre__foto img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 320px; }
@media (max-width: 640px){ .valores { gap: 16px 18px; } .valores li { font-size: .64rem; } .valores__ico { width: 46px; height: 46px; } }


/* ===== espaçamento mais justo — tudo num campo de visão (pedido dele, 15/09) ===== */
:root { --respiro: clamp(40px, 4.2vw, 64px); }            /* era clamp(60px,7vw,100px): buraco preto entre faixas */
.hero__conteudo { padding-block: clamp(22px, 2.2vw, 36px); }
.cabeca { margin-bottom: clamp(20px, 2.4vw, 32px); }

/* ===== botão de tema (claro/escuro) ===== */
.topo__acoes { display: flex; align-items: center; gap: 12px; }
.tema-btn { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: transparent; border: 1px solid rgba(212,175,55,.42); color: var(--ouro); cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.tema-btn:hover { border-color: var(--ouro); background: rgba(212,175,55,.12); }
.tema-btn svg { width: 20px; height: 20px; }
.tema-lua { display: none; }
[data-tema="claro"] .tema-sol { display: none; }
[data-tema="claro"] .tema-lua { display: block; }
/* conserta o hambúrguer (barras douradas somem na caixa branca do esqueleto) */
.hamburguer { background: #16130C; border-color: rgba(212,175,55,.4); }

/* ===== MODO CLARO (pergaminho) — o ESCURO continua o padrão ===== */
[data-tema="claro"] {
  --cor-titulo: #201808;
  --cor-texto: #3A2E1A;
  --cor-texto-suave: #6A583C;
  --fundo: #ECDFC2;
  --grad: linear-gradient(95deg, #BE8E1B 0%, #8F6E12 100%);   /* ouro mais cheio no claro */
  --borda-cartao: rgba(110, 84, 16, .3);
}
[data-tema="claro"] body { background: #ECDFC2; }
[data-tema="claro"] .beneficios,
[data-tema="claro"] .secao { background: #ECDFC2; }
[data-tema="claro"] .secao#servicos,
[data-tema="claro"] .secao#avaliacoes { background: #E3D3AF; }   /* ritmo: pergaminho alternado */
/* topo/menu, cartoes e circulos de icone FICAM ESCUROS no claro tambem: casam com o banner
   escuro (pedido dele) e fazem o OURO brilhar de verdade em vez de apagar no creme */
[data-tema="claro"] .etiqueta { color: #9A7413; }
[data-tema="claro"] .hero .etiqueta, [data-tema="claro"] .final .etiqueta { color: var(--ouro); }
[data-tema="claro"] .valores li { color: #9A7413; }
[data-tema="claro"] .beneficio + .beneficio { border-left-color: rgba(110,84,16,.22); }
[data-tema="claro"] .sublista { color: #86691A; }

/* ===== atmosfera: profundidade de sala de lanterna (só no escuro) ===== */
:root:not([data-tema="claro"]) .beneficios { background: linear-gradient(180deg, #0C0A06 0%, #100E09 100%); }
:root:not([data-tema="claro"]) .secao { background: radial-gradient(135% 105% at 50% 0%, #16120B 0%, #100E09 52%, #0A0805 100%); }
:root:not([data-tema="claro"]) .secao#servicos { background: radial-gradient(135% 105% at 50% 0%, #191308 0%, #100D07 55%, #080603 100%); }

/* as fotos de serviço derretem no escuro do cartão (véu embaixo, onde entra o ícone) */
.cartao-cor__foto::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,6,3,0) 0%, rgba(8,6,3,0) 46%, rgba(9,7,4,.55) 78%, rgba(9,7,4,.95) 100%); }
.cartao-cor__foto figcaption { z-index: 2; }