/* AILIRIA — site institucional (ailiria.com.br). Tokens da especificação v1.0. */
:root {
  --color-brand-primary: #6B0F1A;
  --color-brand-deep: #3B080B;
  --color-brand-hover: #8A1723;
  --color-brand-gold: #D4AF37;
  --color-brand-gold-light: #E9C96B;
  --color-gold-pale: #F2E6BE;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F7F3EB;
  --color-text-primary: #201A1A;
  --color-text-secondary: #514A47;
  --color-text-muted: #756C68;
  --color-border: #E7DED2;
  /* Tons do site além da especificação; toda cor fora daqui é bug (padrão do QA) */
  --color-white: #FFFFFF;
  --color-ink-hero: #140806;
  --color-deep-2: #2A0507;
  --color-deep-3: #4A0B10;
  --color-deep-4: #5A0E15;
  --color-gold-hover: #C49F2C;
  --color-gold-text: #7F6110;
  --color-on-dark: #EFE7DA;
  --color-on-dark-muted: #CFC4B6;
  --color-on-dark-soft: #D9CFC2;
  --color-surface-soft: #FBF8F2;
  --color-ok: #22603A;
  /* Cores oficiais do WhatsApp (whatsapp.com): verde, verde-escuro e o texto escuro dos botões deles */
  --color-whatsapp: #25D366;
  --color-whatsapp-escuro: #1DA851;
  --color-whatsapp-tinta: #111B21;
  --mask-solid: #000000;
  /* Fusão da foto com a cor: curva suave e longa, sem a "linha" que o degradê reto deixa no começo */
  --mask-fusao: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .03) 8%, rgba(0, 0, 0, .1) 16%, rgba(0, 0, 0, .22) 24%, rgba(0, 0, 0, .38) 32%, rgba(0, 0, 0, .56) 40%, rgba(0, 0, 0, .73) 48%, rgba(0, 0, 0, .87) 56%, rgba(0, 0, 0, .96) 64%, var(--mask-solid) 72%);
  --shadow-icon: 0 4px 14px rgba(107, 15, 26, .12);
  --shadow-text: 0 1px 8px rgba(0, 0, 0, .6);
  --line-on-dark: rgba(255, 255, 255, .1);
  --line-on-dark-strong: rgba(255, 255, 255, .55);
  --shadow-float-color: rgba(0, 0, 0, .25);
  --overlay: rgba(32, 8, 10, .62);
  /* Respiro de secao: no maximo 48px por lado (src/templates/autoral/respiro.js) */
  --respiro: clamp(32px, 3.4vw, 48px);
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', Arial, sans-serif;
  --container-max: 1200px;
  --radius-card: 14px;
  --radius-pill: 999px;
  --shadow-card: 0 8px 24px rgba(32, 26, 26, .06);
  --transition-ui: 180ms ease-out;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--color-text-secondary); background: var(--color-surface-alt); }
img, svg { display: block; max-width: 100%; }
a { color: var(--color-brand-primary); }
a:hover { color: var(--color-brand-hover); }
:focus-visible { outline: 3px solid var(--color-brand-gold); outline-offset: 3px; }
h1, h2 { font-family: var(--font-heading); color: var(--color-text-primary); line-height: 1.1; margin: 0 0 16px; }
h1 { font-size: clamp(34px, 5vw, 58px); font-weight: 600; }
h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; }
h3 { font-size: 19px; color: var(--color-text-primary); margin: 0 0 8px; line-height: 1.25; }
em { font-style: normal; color: var(--color-brand-gold); }
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--color-surface); padding: 8px 16px; z-index: 50; }
.skip:focus { left: 8px; }

.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-brand-primary); margin: 0 0 12px; }
.eyebrow--claro { color: var(--color-brand-gold-light); }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: var(--radius-pill); font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background var(--transition-ui), color var(--transition-ui), border-color var(--transition-ui); font-family: var(--font-body); }
.btn--ouro { background: var(--color-brand-gold); color: var(--color-text-primary); }
.btn--ouro:hover { background: var(--color-gold-hover); color: var(--color-text-primary); }
.btn--vinho { background: var(--color-brand-primary); color: var(--color-white); }
.btn--vinho:hover { background: var(--color-brand-hover); color: var(--color-white); }
.btn--vazado { border-color: var(--line-on-dark-strong); color: var(--color-white); }
.btn--vazado:hover { background: var(--color-white); color: var(--color-brand-primary); }
.btn--contorno { border-color: var(--color-brand-primary); color: var(--color-brand-primary); }
.btn--contorno:hover { background: var(--color-brand-primary); color: var(--color-white); }
.btn--largo { width: 100%; }

/* Header */
.topo { position: sticky; top: 0; z-index: 20; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.topo__linha { display: flex; align-items: center; justify-content: space-between; min-height: 80px; gap: 16px; }
.topo__marca img { height: 44px; width: auto; }
.topo__nav { display: flex; align-items: center; gap: 28px; flex: 1; justify-content: flex-end; }
.topo__nav a:not(.btn) { color: var(--color-text-primary); text-decoration: none; font-size: 14px; font-weight: 500; padding: 6px 0; }
.topo__nav a:not(.btn):hover, .topo__nav a.ativo { color: var(--color-brand-primary); box-shadow: inset 0 -2px 0 var(--color-brand-gold); }
.btn--pequeno { min-height: 40px; padding: 0 20px; font-size: 14px; margin-left: 12px; }
.topo__menu { display: none; background: none; border: 1px solid var(--color-border); border-radius: 10px; width: 44px; height: 44px; font-size: 20px; color: var(--color-text-primary); cursor: pointer; }

/* Hero: a foto do mockup à direita, fundida no escuro da esquerda */
.hero { position: relative; background: var(--color-ink-hero); color: var(--color-surface-alt); overflow: hidden; }
/* A foto acompanha a altura do hero e guarda a proporcao: nunca corta o laptop
   nem e esticada alem do tamanho do arquivo (1144x664) numa tela comum. */
.hero__foto { position: absolute; top: 0; right: 0; height: 100%; width: auto; max-width: 62%; aspect-ratio: 1144 / 664; object-fit: cover; object-position: right center;
  -webkit-mask-image: var(--mask-fusao); mask-image: var(--mask-fusao); }
.hero__grade { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; padding-top: var(--respiro); padding-bottom: var(--respiro); }
.hero__texto { max-width: 660px; }
.hero h1 { color: var(--color-white); font-size: clamp(36px, 4.6vw, 58px); }
.hero h1 em { display: block; }
.hero__descricao { font-size: 18px; max-width: 30em; color: var(--color-on-dark); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 28px; }
/* Atalhos do hero: WhatsApp e código, no mesmo desenho dos ícones da página */
.hero__atalhos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 0; }
.atalho { display: inline-flex; align-items: center; gap: 12px; color: var(--color-on-dark-soft); text-decoration: none; font-size: 13px; line-height: 1.35; }
.atalho + .atalho { margin-left: 24px; padding-left: 24px; border-left: 1px solid var(--line-on-dark); }
.atalho strong { display: block; color: var(--color-brand-gold-light); font-size: 15px; font-weight: 600; }
.atalho__icone { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--color-brand-gold); background: var(--color-deep-2); transition: background .2s; }
.atalho__icone svg { width: 19px; height: 19px; fill: none; stroke: var(--color-brand-gold-light); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.atalho:hover .atalho__icone { background: var(--color-deep-4); }
.atalho__icone--wa { background: var(--color-whatsapp); border-color: var(--color-whatsapp); }
.atalho__icone--wa svg { width: 22px; height: 22px; fill: var(--color-white); stroke: none; }
.atalho:hover .atalho__icone--wa { background: var(--color-whatsapp-escuro); }
.atalho:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.hero__assinatura { list-style: none; margin: 0; padding: 4px 0 4px 16px; border-left: 2px solid var(--color-brand-gold); font-size: 15px; line-height: 1.75; color: var(--color-white); text-shadow: var(--shadow-text); margin-right: 12%; }

/* Seções */
.secao { padding: var(--respiro) 0; background: var(--color-surface-alt); }
.secao--alt { background: var(--color-surface); }
.secao__cabeca { max-width: 640px; margin-bottom: 32px; }
.link-seta { display: inline-flex; gap: 8px; font-weight: 600; font-size: 14px; text-decoration: none; border-bottom: 1px solid var(--color-brand-gold); padding-bottom: 2px; }

/* Serviços: título à esquerda, cards à direita (como no mockup) */
.servicos { display: grid; grid-template-columns: .8fr 2fr; gap: 48px; align-items: start; }
.servicos__cabeca p, .processo__cabeca p, .depo__cabeca p { font-size: 15px; }
.servicos__cabeca h2, .processo__cabeca h2, .depo__cabeca h2, .numeros h2 { font-size: clamp(28px, 2.6vw, 34px); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 24px 22px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: transform var(--transition-ui), border-color var(--transition-ui); }
.card:hover { transform: translateY(-3px); border-color: var(--color-brand-gold-light); }
.card h3 { font-family: var(--font-body); font-size: 16px; font-weight: 600; }
.card p { flex: 1; font-size: 14px; }
.card__icone { width: 52px; height: 52px; border-radius: 50%; background: var(--color-white); box-shadow: var(--shadow-icon); display: grid; place-items: center; margin-bottom: 18px; }
.card__icone svg { width: 26px; height: 26px; fill: none; stroke: var(--color-brand-primary); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card__link { font-weight: 600; text-decoration: none; font-size: 14px; color: var(--color-gold-text); }
.card__link:hover { color: var(--color-brand-primary); }
.card__link span { display: inline-block; transition: transform var(--transition-ui); }
.card__link:hover span { transform: translateX(3px); }
.selo { position: absolute; top: 18px; right: 18px; background: var(--color-gold-pale); color: var(--color-brand-primary); font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 4px 10px; border-radius: var(--radius-pill); }
.selo--ouro { background: var(--color-brand-gold); color: var(--color-text-primary); }

/* Planos */
.planos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.plano { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 32px 28px; display: flex; flex-direction: column; }
.plano--destaque { border: 2px solid var(--color-brand-primary); box-shadow: 0 16px 40px rgba(107, 15, 26, .12); }
.plano--breve { background: var(--color-surface-soft); }
.plano__preco { font-family: var(--font-heading); font-size: 48px; color: var(--color-text-primary); margin: 8px 0; line-height: 1; }
.plano__preco span { font-size: 20px; vertical-align: top; }
.plano__preco small { font-family: var(--font-body); font-size: 16px; color: var(--color-text-muted); }
.plano__preco--breve { font-size: 32px; color: var(--color-text-muted); }
.plano__desc { font-size: 15px; }
.plano ul { list-style: none; padding: 0; margin: 8px 0 28px; flex: 1; font-size: 15px; }
.plano li { padding: 6px 0 6px 26px; position: relative; }
.plano li::before { content: '✓'; position: absolute; left: 0; color: var(--color-brand-primary); font-weight: 700; }

/* Faixa vinho com a foto do caderno */
.faixa { position: relative; background: linear-gradient(90deg, var(--color-deep-2) 0%, var(--color-brand-deep) 55%, var(--color-deep-3) 100%); color: var(--color-on-dark); overflow: hidden; }
.faixa__foto { position: absolute; top: 0; right: 0; height: 100%; width: auto; max-width: 42%; aspect-ratio: 848 / 502; object-fit: cover; object-position: right center;
  -webkit-mask-image: var(--mask-fusao); mask-image: var(--mask-fusao); }
.faixa h2 { color: var(--color-white); }
.faixa__grade { position: relative; display: grid; grid-template-columns: 1.15fr .75fr .9fr; gap: 48px; align-items: center; padding-top: var(--respiro); padding-bottom: var(--respiro); max-width: var(--container-max); }
.faixa__texto { max-width: 480px; }
.faixa__texto p:last-child { font-size: 15px; }
.diferenciais { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; max-width: 300px; }
.diferenciais li { display: flex; gap: 18px; align-items: center; color: var(--color-white); font-size: 15px; line-height: 1.35; }
.diferenciais svg { flex: none; width: 30px; height: 30px; fill: none; stroke: var(--color-brand-gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Processo */
.processo-grade { display: grid; grid-template-columns: .8fr 2.2fr; gap: 48px; align-items: start; }
.processo__cabeca p { font-size: 15px; }
.processo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.processo li { position: relative; }
.processo li:not(:last-child)::after { content: '›'; position: absolute; right: -20px; top: 8px; color: var(--color-brand-gold); font-size: 24px; }
.processo li:not(:first-child) { border-left: 1px solid var(--color-border); padding-left: 20px; }
.processo__topo { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.processo__n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--color-brand-gold); color: var(--color-text-primary); font-weight: 700; font-size: 13px; }
.processo__icone { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--color-white); box-shadow: var(--shadow-icon); }
.processo__icone svg { width: 24px; height: 24px; fill: none; stroke: var(--color-brand-primary); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.processo h3 { font-family: var(--font-body); font-size: 16px; font-weight: 600; }
.processo p { font-size: 13px; margin: 0; color: var(--color-text-muted); }

/* Números */
.numeros { position: relative; background: linear-gradient(90deg, var(--color-deep-2) 0%, var(--color-brand-deep) 60%, var(--color-deep-4) 100%); color: var(--color-on-dark); padding: var(--respiro) 0; overflow: hidden; }
/* A seta do mockup sobe da borda de baixo da faixa (img/enfeite-numeros.svg): nada fica cortado no meio */
.numeros::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: min(32%, 460px); background: url(img/enfeite-numeros.svg) right bottom / contain no-repeat; pointer-events: none; }
.numeros h2 { color: var(--color-white); margin: 0; }
.numeros__grade { display: grid; grid-template-columns: .8fr 2.2fr; gap: 48px; align-items: center; }
.numeros__lista { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0; position: relative; z-index: 1; }
.numeros__lista dt { font-family: var(--font-heading); font-size: 36px; color: var(--color-brand-gold-light); line-height: 1.1; }
.numeros__lista dd { margin: 4px 0 0; font-size: 14px; color: var(--color-white); }

/* Projetos demonstrativos, no formato dos depoimentos do mockup */
.depo { display: grid; grid-template-columns: .8fr 2.2fr; gap: 48px; align-items: start; }
.depo__cabeca p { font-size: 15px; }
.depo__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.demo { margin: 0; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 22px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.demo__topo { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.demo__tag { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-gold-text); }
.demo figcaption { font-size: 12px; color: var(--color-text-muted); }
.demo figcaption strong { display: block; color: var(--color-text-primary); font-size: 14px; }

/* Formulário (dentro da janela de contato) */
.form { background: var(--color-surface); color: var(--color-text-secondary); border-radius: var(--radius-card); padding: 32px; display: grid; gap: 16px; }
.form__campo { display: grid; gap: 6px; }
.form__duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.opcional { font-weight: 400; color: var(--color-text-muted); }
.form input, .form select, .form textarea { font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--color-on-dark-muted); border-radius: 10px; background: var(--color-white); color: var(--color-text-primary); width: 100%; }
.form input[aria-invalid="true"], .form select[aria-invalid="true"] { border-color: var(--color-brand-hover); }
.form__ajuda { margin: -8px 0 0; font-size: 13px; color: var(--color-text-muted); }
.form__armadilha { position: absolute; left: -9999px; }
.form__consentimento { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; font-size: 14px !important; color: var(--color-text-secondary) !important; }
.form__consentimento input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.form__status { margin: 0; font-size: 15px; min-height: 1.5em; }
.form__status--erro { color: var(--color-brand-hover); font-weight: 600; }
.form__status--ok { color: var(--color-ok); font-weight: 600; }

/* Rodapé, como no mockup */
.rodape { position: relative; background: linear-gradient(90deg, var(--color-deep-2), var(--color-brand-deep)); color: var(--color-on-dark-muted); padding: 48px 0 24px; font-size: 14px; overflow: hidden; }
/* Os dois fios do mockup entram pela borda esquerda e saem pelo pé do rodapé (img/enfeite-rodape.svg) */
.rodape::before { content: ''; position: absolute; left: 0; bottom: 0; width: 160px; height: 200px; background: url(img/enfeite-rodape.svg) left bottom / contain no-repeat; pointer-events: none; }
.rodape__grade { position: relative; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px 40px; }
.rodape__marca img { height: 48px; width: auto; }
.rodape__marca p { margin: 16px 0 0; max-width: 300px; font-size: 14px; line-height: 1.6; color: var(--color-on-dark-muted); }
.rodape h2 { margin: 6px 0 14px; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-brand-gold-light); }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rodape a { color: var(--color-on-dark); text-decoration: none; }
.rodape a:hover { color: var(--color-brand-gold-light); }
.rodape__wa { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.rodape__barra { position: relative; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 24px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line-on-dark); font-size: 12px; }
.rodape__barra a { text-decoration: underline; }
.rodape__topo { text-decoration: none !important; }
.rodape__lema { color: var(--color-brand-gold); }

/* Página de texto (privacidade) */
.texto { max-width: 760px; padding-top: var(--respiro); padding-bottom: var(--respiro); }
.texto h1 { font-size: 40px; }
.texto h2 { font-size: 24px; margin-top: 40px; }

/* Tablet */
@media (max-width: 1023px) {
  .topo__nav { gap: 18px; }
  .servicos, .processo-grade, .numeros__grade, .depo, .faixa__grade { grid-template-columns: 1fr; }
  .faixa__foto { opacity: .14; width: 100%; max-width: none; }
  .rodape__grade { grid-template-columns: 1fr 1fr 1fr; }
  .rodape__marca { grid-column: 1 / -1; }
  .hero__foto { width: 100%; max-width: none; opacity: .45; }
  .hero__assinatura { display: none; }
  .planos { grid-template-columns: 1fr 1fr; }
  .processo { grid-template-columns: 1fr 1fr; }
  .processo li::after { display: none; }
  .processo li:not(:first-child) { border-left: 0; padding-left: 0; }
  .numeros__lista { grid-template-columns: 1fr 1fr; }
}
/* Os fios do rodapé moram na margem; abaixo de 1300px ela some e eles cruzariam o logo */
@media (max-width: 1299px) {
  .rodape::before { display: none; }
}
@media (max-width: 1180px) and (min-width: 768px) {
  .topo__nav a:not(.btn):not(.topo__codigo) { font-size: 13px; }
  .topo__nav .ativo { display: none; }
}

/* Celular */
@media (max-width: 767px) {
  body { font-size: 16px; }
  .hero__atalhos { flex-direction: column; align-items: flex-start; }
  .atalho + .atalho { margin-left: 0; padding-left: 0; border-left: 0; }
  .numeros::after { width: 70%; opacity: .45; }
  .container { padding: 0 20px; }
  .topo__linha { min-height: 68px; }
  .topo__marca img { height: 36px; }
  .topo__menu { display: grid; place-items: center; }
  .topo__nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--color-surface); flex-direction: column; align-items: stretch; padding: 16px 20px 24px; gap: 4px; border-bottom: 1px solid var(--color-border); }
  .topo__nav.aberto { display: flex; }
  .topo__nav a:not(.btn) { padding: 12px 0; }
  .btn--pequeno { margin: 8px 0 0; min-height: 48px; }
  .hero__foto { opacity: .3; }
  .hero__ctas .btn { width: 100%; }
  .cards, .planos, .processo, .depo__cards, .form__duplo { grid-template-columns: 1fr; }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .rodape__barra { flex-direction: column; align-items: flex-start; }
  .form { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Botão "Tenho um código" na navbar: dourado, para quem chegou pelo e-mail */
.btn--codigo { background: var(--color-gold-pale); color: var(--color-brand-deep); border-color: var(--color-brand-gold); }
.btn--codigo:hover { background: var(--color-brand-gold); color: var(--color-text-primary); }
.btn--codigo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.topo__nav .btn--codigo { margin-left: 4px; }
.topo__nav .btn--codigo + .btn--vinho { margin-left: 0; }

/* WhatsApp: link no texto e botão flutuante */
.link-wa { font-weight: 600; }
.hero .link-wa { color: var(--color-brand-gold-light); }
.wa-float { position: fixed; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 30; width: 56px; height: 56px; border-radius: 50%; background: var(--color-whatsapp); display: grid; place-items: center; box-shadow: 0 8px 24px var(--shadow-float-color); transition: transform var(--transition-ui); }
.wa-float:hover { transform: scale(1.06); background: var(--color-whatsapp-escuro); }
.wa-float svg { width: 30px; height: 30px; fill: var(--color-white); }
/* Botão do WhatsApp como o do whatsapp.com: verde com texto escuro (contraste 9:1) */
.btn--wa { background: var(--color-whatsapp); color: var(--color-whatsapp-tinta); }
.btn--wa:hover { background: var(--color-whatsapp-escuro); color: var(--color-whatsapp-tinta); }
.btn--wa svg { width: 20px; height: 20px; fill: currentColor; }
.wa-bola { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--color-whatsapp); flex: none; }
.wa-bola svg { width: 15px; height: 15px; fill: var(--color-white); }

/* Caixa "Não achou a resposta?" da seção de dúvidas */
.ajuda { margin-top: 20px; padding: 22px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.ajuda__titulo { margin: 0 0 6px; font-weight: 700; color: var(--color-text-primary); }
.ajuda p:not(.ajuda__titulo) { margin: 0 0 16px; font-size: 15px; }
.ajuda__botoes { display: flex; flex-wrap: wrap; gap: 10px; }
.ajuda__botoes .btn { flex: 1 1 140px; min-height: 44px; padding: 0 18px; font-size: 14px; }

/* Projetos: ícone do ramo */
.demo__icone { width: 40px; height: 40px; border-radius: 50%; background: var(--color-white); box-shadow: var(--shadow-icon); display: grid; place-items: center; }
.demo__icone svg { width: 20px; height: 20px; fill: none; stroke: var(--color-brand-primary); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.demo__texto { margin: 0 0 18px; flex: 1; font-size: 14px; color: var(--color-text-secondary); }

/* Dúvidas frequentes */
.duvidas { display: grid; gap: 12px; }
.duvidas details { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 0 22px; }
.duvidas details[open] { border-color: var(--color-brand-gold-light); }
.duvidas summary { cursor: pointer; list-style: none; padding: 18px 28px 18px 0; position: relative; font-weight: 600; color: var(--color-text-primary); }
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary::after { content: '+'; position: absolute; right: 0; top: 14px; font-size: 22px; color: var(--color-brand-primary); }
.duvidas details[open] summary::after { content: '–'; }
.duvidas details p { margin: 0 0 18px; font-size: 15px; }

/* Janela de contato */
.modal { border: 0; padding: 0; background: transparent; max-width: 640px; width: calc(100% - 32px); max-height: calc(100% - 32px); }
.modal::backdrop { background: var(--overlay); backdrop-filter: blur(2px); }
.modal__caixa { position: relative; background: var(--color-surface); border-radius: 18px; border-top: 4px solid var(--color-brand-gold); padding: 32px; }
.modal__cabeca h2 { font-size: clamp(24px, 3vw, 30px); margin-bottom: 8px; }
.modal__cabeca p:last-child { font-size: 15px; margin: 0 0 20px; }
.modal .form { padding: 0; }
.modal__fechar { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-primary); font-size: 22px; line-height: 1; cursor: pointer; }
.modal__fechar:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary); }
@media (max-width: 767px) {
  .modal { width: 100%; max-width: none; max-height: 100%; height: 100%; margin: 0; }
  .modal__caixa { min-height: 100%; border-radius: 0; padding: 24px 20px 32px; }
  .wa-float { width: 52px; height: 52px; }
}