/* Landings de tema do Dr. Jayme (28/09/2026). Fonte do texto: C:\Apps\SeuNutricionista\landings-temas.
   Paleta do portão (seunutricionista-site.json): #0c2a21 herói e seções escuras, #123c30 títulos,
   #1d5c47 botão sobre claro (7,85:1 com branco), #87c9b7 pastel só sobre escuro, fundos #f8fafc e #f1f5f9.
   Anatomia do herói: roteiro-hero-de-landing.md (foto inteira atrás, véu da marca em degradê,
   texto na esquerda; no celular em retrato o texto vem antes e a foto 4:5 depois). */

/* Fonte reserva com as MEDIDAS da web font (29/09/2026). Sem isto o texto do herói era montado em Arial e, quando a
   DM Sans do Google chegava, o título e os selos refluíam e empurravam herói, faixa e formulário: CLS de 0,08 a 0,14
   no desktop (medido em 1440x900). size-adjust = largura da web font / largura da Arial, MEDIDA POR PESO E TAMANHO
   porque a DM Sans tem eixo óptico (opsz): corpo 400 a 104%, selos 600 a 101%, botões 700 a 102%, título do herói
   700 a 93,4% no desktop e 97,7% no celular, títulos 800 a 87,5%; Playfair itálica contra a Georgia, 85% (medida 87% no texto de teste, 85% no destaque real do celular).
   ascent e descent vêm das tabelas da fonte (99,2% e 31%) divididos pelo ajuste. */
@font-face { font-family: 'DM Sans Reserva'; font-style: normal; font-weight: 400; src: local('Arial'), local('Liberation Sans'), local('Arimo'), local('Helvetica'); size-adjust: 104%; ascent-override: 95.4%; descent-override: 29.8%; line-gap-override: 0%; }
@font-face { font-family: 'DM Sans Reserva'; font-style: normal; font-weight: 500; src: local('Arial'), local('Liberation Sans'), local('Arimo'), local('Helvetica'); size-adjust: 105.7%; ascent-override: 93.9%; descent-override: 29.3%; line-gap-override: 0%; }
@font-face { font-family: 'DM Sans Reserva'; font-style: normal; font-weight: 600; src: local('Arial Bold'), local('Liberation Sans Bold'), local('Arimo Bold'), local('Helvetica Bold'); size-adjust: 101%; ascent-override: 98.2%; descent-override: 30.7%; line-gap-override: 0%; }
@font-face { font-family: 'DM Sans Reserva'; font-style: normal; font-weight: 700; src: local('Arial Bold'), local('Liberation Sans Bold'), local('Arimo Bold'), local('Helvetica Bold'); size-adjust: 102.3%; ascent-override: 97.0%; descent-override: 30.3%; line-gap-override: 0%; }
@font-face { font-family: 'DM Sans Reserva'; font-style: normal; font-weight: 800; src: local('Arial Bold'), local('Liberation Sans Bold'), local('Arimo Bold'), local('Helvetica Bold'); size-adjust: 87.5%; ascent-override: 113.4%; descent-override: 35.4%; line-gap-override: 0%; }
@font-face { font-family: 'DM Sans Reserva H1'; font-style: normal; font-weight: 700; src: local('Arial Bold'), local('Liberation Sans Bold'), local('Arimo Bold'), local('Helvetica Bold'); size-adjust: 93.4%; ascent-override: 106.2%; descent-override: 33.2%; line-gap-override: 0%; }
@font-face { font-family: 'DM Sans Reserva H1 Fone'; font-style: normal; font-weight: 700; src: local('Arial Bold'), local('Liberation Sans Bold'), local('Arimo Bold'), local('Helvetica Bold'); size-adjust: 97.7%; ascent-override: 101.5%; descent-override: 31.7%; line-gap-override: 0%; }
@font-face { font-family: 'Playfair Reserva'; font-style: italic; font-weight: 700; src: local('Georgia Bold Italic'), local('Georgia-BoldItalic'); size-adjust: 85%; ascent-override: 127.3%; descent-override: 29.5%; line-gap-override: 0%; }

.tl-pagina { background: #ffffff; font-family: 'DM Sans', 'DM Sans Reserva', sans-serif; }
.tl-pular { position: absolute; left: -9999px; top: 0; z-index: 2000; background: #ffffff; color: #0c2a21; padding: 12px 16px; font-weight: 700; }
.tl-pular:focus { left: 12px; top: 12px; }
.tl-conteiner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.tl-centro { text-align: center; }
.tl-destaque { display: inline-block; font-family: 'Playfair Display', 'Playfair Reserva', Georgia, serif; font-weight: 700; color: #87c9b7; font-style: italic; }

/* O flutuante do WhatsApp some enquanto os botões do herói estão visíveis (molde.php). */
.whatsapp-float { transition: opacity .2s ease, transform .2s ease; }
.whatsapp-float.tl-oculto { opacity: 0; pointer-events: none; transform: translateY(16px); }

/* Foco visível sobre o escuro (29/09/2026): o contorno padrão do site é #1d5c47, que sobre o herói (#0c2a21) dá cerca de 2,2:1,
   abaixo dos 3:1 de indicador de foco. Sobre fundo escuro o contorno vira branco. */
.tl-heroi a:focus-visible, .tl-heroi button:focus-visible, #header:not(.scrolled) a:focus-visible, #header:not(.scrolled) button:focus-visible, .tl-secao--escura a:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
.tl-heroi .tl-botao--primario:focus-visible { outline-color: #ffffff; box-shadow: 0 0 0 6px rgba(12, 42, 33, .9), 0 8px 22px rgba(0, 0, 0, .22); }

/* Herói ------------------------------------------------------------------------------------------ */
.tl-heroi { position: relative; background: #0c2a21; color: #ffffff; overflow: hidden; display: flex; flex-direction: column; }
.tl-heroi__foto { position: absolute; inset: 0; }
.tl-heroi__foto picture, .tl-heroi__foto img { display: block; width: 100%; height: 100%; }
.tl-heroi__foto img { object-fit: cover; object-position: var(--tl-pos-desk, 50% 50%); }
.tl-heroi__veu {
    position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(12, 42, 33, .96) 0%, rgba(12, 42, 33, .90) 44%, rgba(12, 42, 33, .40) 72%, rgba(12, 42, 33, .12) 100%),
        linear-gradient(0deg, rgba(12, 42, 33, .55) 0%, rgba(12, 42, 33, 0) 40%);
}
.tl-heroi__conteudo { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 112px 20px 56px; min-height: max(640px, min(44vw, 820px)); display: flex; align-items: center; }
.tl-heroi__col { max-width: 620px; }
.tl-migalhas { position: static; width: auto; max-width: none; padding: 0; background: none; justify-content: flex-start; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: rgba(255, 255, 255, .85); margin-bottom: 18px; }
.tl-migalhas a { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 32px; }
.tl-rotulo { display: inline-block; color: #87c9b7; font-weight: 700; font-size: 15px; letter-spacing: .01em; padding-left: 12px; border-left: 3px solid #87c9b7; margin-bottom: 14px; }
.tl-heroi__titulo { font-family: 'DM Sans', 'DM Sans Reserva H1', sans-serif; font-size: clamp(2rem, 1.35rem + 2.6vw, 3.3rem); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; margin: 0 0 18px; color: #ffffff; }
.tl-heroi__sub { font-size: clamp(16px, 15px + .3vw, 18.5px); line-height: 1.6; color: rgba(255, 255, 255, .93); margin: 0 0 26px; max-width: 560px; }
.tl-heroi__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.tl-selos { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.tl-selos li { font-size: 14px; font-weight: 600; color: #ffffff; padding-left: 12px; border-left: 3px solid #87c9b7; line-height: 1.35; }
.tl-confianca { font-size: 13.5px; color: rgba(255, 255, 255, .85); margin: 0; max-width: 560px; }

/* Botões --------------------------------------------------------------------------------------- */
.tl-botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 22px; border-radius: 12px; font-weight: 700; font-size: 16px; text-decoration: none; line-height: 1.2; transition: transform .15s ease, background .2s ease, box-shadow .2s ease; }
.tl-botao svg { width: 20px; height: 20px; flex: 0 0 auto; }
.tl-botao--primario { background: #87c9b7; color: #0c2a21; box-shadow: 0 8px 22px rgba(0, 0, 0, .22); }
.tl-botao--primario svg { stroke: #0c2a21; }
.tl-botao--primario:hover, .tl-botao--primario:focus-visible { background: #ffffff; transform: translateY(-1px); }
.tl-botao--contorno { color: #ffffff; border: 2px solid rgba(255, 255, 255, .75); background: rgba(12, 42, 33, .35); }
.tl-botao--contorno svg { fill: #ffffff; }
.tl-botao--contorno:hover, .tl-botao--contorno:focus-visible { background: rgba(255, 255, 255, .12); border-color: #ffffff; }
.tl-botao--cheio { background: #1d5c47; color: #ffffff; }
.tl-botao--cheio svg { stroke: #ffffff; }
.tl-botao--cheio:hover, .tl-botao--cheio:focus-visible { background: #123c30; }
.tl-botao--linha { color: #123c30; border: 2px solid #1d5c47; background: #ffffff; }
.tl-botao--linha svg { fill: #1d5c47; }
.tl-botao--linha:hover, .tl-botao--linha:focus-visible { background: #f1f5f9; }

/* Faixa do formulário logo abaixo do herói ------------------------------------------------------ */
.tl-faixa { background: #f1f5f9; padding: 40px 0 44px; border-bottom: 1px solid #e5e7eb; }
.tl-faixa__grade { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; align-items: center; }
.tl-faixa__texto h2 { font-size: clamp(22px, 1.2rem + .8vw, 28px); color: #123c30; line-height: 1.2; margin: 0 0 10px; }
.tl-faixa__texto p { color: #4a5568; margin: 0 0 10px; font-size: 16px; }
.tl-faixa__passos { margin: 0 0 14px; padding: 0; list-style: none; counter-reset: tlf; }
.tl-faixa__passos li { counter-increment: tlf; position: relative; padding: 10px 0 10px 40px; color: #1a1a1a; font-size: 16px; line-height: 1.45; border-bottom: 1px solid #e5e7eb; }
.tl-faixa__passos li:last-child { border-bottom: 0; }
.tl-faixa__passos li::before { content: counter(tlf); position: absolute; left: 0; top: 9px; width: 28px; height: 28px; border-radius: 50%; background: #1d5c47; color: #ffffff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.tl-faixa__ou a { color: #1d5c47; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; min-height: 44px; align-items: center; }
.tl-faixa .contato-form-wrap { margin: 0; max-width: none; }
.tl-faixa .contato-form input, .tl-faixa .contato-form select { font-size: 16px; min-height: 44px; }
.tl-faixa .contato-form-btn { min-height: 48px; }

/* Seções --------------------------------------------------------------------------------------- */
.tl-secao { padding: 64px 0; background: #ffffff; }
.tl-secao--suave { background: #f8fafc; }
.tl-secao h2 { font-size: clamp(24px, 1.3rem + 1.2vw, 34px); color: #123c30; line-height: 1.18; margin: 0 0 18px; font-weight: 800; }
.tl-secao h3 { font-size: 19px; color: #123c30; margin: 26px 0 10px; line-height: 1.3; }
.tl-secao p { color: #4a5568; font-size: 16.5px; line-height: 1.75; margin: 0 0 14px; }
.tl-texto { max-width: 820px; }
.tl-lide { font-size: 18.5px !important; color: #1a1a1a !important; line-height: 1.65 !important; }
.tl-lista { list-style: none; margin: 0; padding: 0; }
.tl-lista li { padding: 12px 0 12px 22px; border-bottom: 1px solid #e5e7eb; color: #1a1a1a; font-size: 16px; line-height: 1.5; position: relative; }
.tl-lista li::before { content: ""; position: absolute; left: 0; top: 20px; width: 10px; height: 3px; background: #1d5c47; border-radius: 2px; }
.tl-lista li:last-child { border-bottom: 0; }
.tl-lista--nao li::before { background: #cbd5e1; }

.tl-passos { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.tl-passo { border-top: 4px solid #1d5c47; padding-top: 18px; }
.tl-passo__n { display: block; font-size: 13px; font-weight: 700; color: #1d5c47; margin-bottom: 6px; }
.tl-passo h3 { margin: 0 0 8px; }
.tl-passo p { font-size: 16px; }

.tl-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }

.tl-secao--escura { background: #0c2a21; }
.tl-secao--escura h2 { color: #ffffff; }
.tl-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 28px 0 0; }
.tl-numeros div { border-top: 3px solid #87c9b7; padding-top: 14px; }
.tl-numeros dt { color: rgba(255, 255, 255, .85); font-size: 14px; font-weight: 600; }
.tl-numeros dd { color: #ffffff; font-size: clamp(26px, 1.2rem + 1.4vw, 36px); font-weight: 800; margin: 4px 0 0; line-height: 1.1; }

.tl-precos { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 16px; padding: 26px; }
.tl-precos h3 { margin-top: 0; }
.tl-precos dl { margin: 0 0 14px; }
.tl-precos dl div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #e5e7eb; }
.tl-precos dt { color: #4a5568; font-size: 15px; }
.tl-precos dd { margin: 0; color: #123c30; font-weight: 800; font-size: 18px; white-space: nowrap; }
.tl-miudo { font-size: 14px !important; color: #475569 !important; }
.tl-precos .tl-botao { width: 100%; margin-top: 6px; }

.tl-faq details { border-bottom: 1px solid #e5e7eb; }
.tl-faq summary { cursor: pointer; list-style: none; padding: 16px 36px 16px 0; min-height: 44px; font-weight: 700; color: #123c30; font-size: 17px; position: relative; line-height: 1.4; }
.tl-faq summary::-webkit-details-marker { display: none; }
.tl-faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font-size: 24px; color: #1d5c47; font-weight: 400; }
.tl-faq details[open] summary::after { content: "\2212"; }
.tl-faq details p { padding: 0 0 16px; margin: 0; }

.tl-final p { max-width: 640px; margin: 0 auto 22px; }
.tl-final__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.tl-outros { list-style: none; margin: 24px 0 26px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.tl-outros a { display: block; padding: 16px 0; border-bottom: 1px solid #e5e7eb; text-decoration: none; min-height: 44px; }
.tl-outros strong { display: block; color: #123c30; font-size: 16.5px; }
.tl-outros span { display: block; color: #4a5568; font-size: 14.5px; margin-top: 2px; }
.tl-outros a:hover strong, .tl-outros a:focus-visible strong { color: #1d5c47; text-decoration: underline; }

/* Responsivo ----------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .tl-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tl-outros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
    .tl-faixa__grade, .tl-duas, .tl-passos { grid-template-columns: 1fr; }
    .tl-passos { gap: 26px; }
    .tl-duas { gap: 28px; }
    .tl-secao { padding: 48px 0; }
}
/* Celular e tablet em retrato: texto primeiro sobre o escuro da marca, foto 4:5 depois. */
@media (max-width: 820px) and (orientation: portrait) {
    .tl-heroi__foto { position: relative; order: 2; height: clamp(280px, 85vw, 640px); }
    .tl-heroi__foto img { object-position: var(--tl-pos-fone, 50% 25%); }
    .tl-heroi__veu { display: none; }
    .tl-heroi__conteudo { order: 1; min-height: 0; padding: 92px 16px 28px; }
    .tl-heroi__titulo { font-family: 'DM Sans', 'DM Sans Reserva H1 Fone', sans-serif; }
    .tl-heroi__acoes { flex-direction: column; }
    .tl-heroi__acoes .tl-botao { width: 100%; }
}
/* Tela deitada e baixa: duas colunas, texto à esquerda e foto à direita, selos escondidos. */
@media (max-height: 520px) and (orientation: landscape) {
    .tl-heroi__conteudo { min-height: 0; padding: 84px 20px 28px; }
    .tl-heroi__col { max-width: 58%; }
    .tl-selos { display: none; }
    .tl-heroi__titulo { font-family: 'DM Sans', 'DM Sans Reserva H1', sans-serif; font-size: 1.8rem; }
}
@media (max-width: 560px) {
    .tl-conteiner { padding: 0 16px; }
    .tl-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .tl-outros { grid-template-columns: 1fr; }
    .tl-precos { padding: 20px 16px; }
    .tl-precos dl div { flex-direction: column; gap: 2px; }
    .tl-final__acoes .tl-botao { width: 100%; }
    .tl-selos { gap: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .tl-botao { transition: none; }
}

/* Página atual nos guias do rodapé (29/09/2026): o aria-current existia no HTML, mas sem diferença visual. */
.footer-guias a[aria-current="page"] { color: #ffffff; font-weight: 700; text-decoration: underline; text-decoration-color: #87c9b7; text-decoration-thickness: 2px; text-underline-offset: 5px; }