.elementor-kit-5{--e-global-color-primary:#3D322A;--e-global-color-secondary:#C3B39E;--e-global-color-text:#3D322A;--e-global-color-accent:#A95B38;--e-global-typography-primary-font-family:"IvyMode";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"IvyMode";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Jost";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Jost";--e-global-typography-accent-font-weight:500;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --areia:#F4EFEA; --texto:Jost; --t-display:clamp(2.4rem, 1.4rem + 3.4vw, 4.25rem); --taupe:#C3B39E; --cacau:#3D322A; --preto:#010101; --terracota:#A95B38; --nude:#C5A598; --texto-apoio:#6F665E; --linha-escura:#5A4D43; --display:IvyMode; --t-h2:clamp(1.85rem, 1.2rem + 1.9vw, 2.75rem); --t-h3:clamp(1.3rem, 1.1rem + 0.7vw, 1.625rem); --t-lead:clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem); --t-corpo:1.125rem; --t-pequeno:1rem; --t-rotulo:0.875rem; --t-numeral:clamp(1.5rem, 1.2rem + 1vw, 2.1rem); --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px; --s8:64px; --s10:80px; --s12:96px; --s16:128px; --s20:160px; --s24:192px; --raio:4px; --largura-leitura:66ch; --largura-max:1280px; --margem:max(32px, calc((100vw - 1280px) / 2 + 32px)); --e-gv-f08ebc3:clamp(2.4rem, 1.4rem + 3.4vw, 4.25rem); }
/* Start custom CSS *//*
  COSTURA · versão final da Home (2026-09-02)
  Cada bloco é o HTML e o CSS do modelo de origem, copiados do arquivo da direção:
    Revista  (direcao-a)  → cabeçalho, hero, atendimento, cor, mapa, sobre, fecho   (CSS sem escopo, é a base)
    Conversa (direcao-c)  → dor, caminhos, rodapé                                    (CSS com escopo .de-c)
    Espelho  (direcao-b)  → método, curso                                            (CSS com escopo .de-b)
  Mudanças pedidas pelo Gabriel: respiro redesenhado (mais íntimo), foto melhor em caminhos e fecho,
  bloco de prova social removido, texto maior (tokens --t-corpo/--t-pequeno/--t-rotulo).
*/
:root{ /* cores da IDV */ --superficie-clara:#F4EFEA;   /* areia */ --superficie-media:#C3B39E;   /* taupe */ --superficie-escura:#3D322A;  /* cacau */ --superficie-profunda:#010101;/* preto */ --acento:#A95B38;             /* terracota: display >= 24px, numeral, filete, estrela. Nunca texto de corpo */ --acento-suave:#C5A598;       /* nude: fundo, marca, texto de apoio SÓ sobre cacau/preto */ /* derivados, nomeados, medidos */ --texto-apoio-sobre-claro:#6F665E; /* 4,8:1 sobre areia */ --linha-sobre-escuro:#5A4D43;      /* filete sobre cacau, não é texto */ /* papéis de texto */ --texto-sobre-claro:var(--superficie-escura); --texto-sobre-escuro:var(--superficie-clara); --texto-apoio-sobre-escuro:var(--superficie-media); --linha-sobre-claro:var(--superficie-media); /* tipografia */ --f-display:"Fraunces","IvyMode",Georgia,"Times New Roman",serif; --f-texto:"Jost","Futura","Century Gothic","Segoe UI",sans-serif; --peso-display:300; --peso-display-forte:400; --peso-texto:300; --peso-texto-forte:500; --t-display:clamp(2.4rem,1.4rem + 3.4vw,4.25rem); --t-h2:clamp(1.85rem,1.2rem + 1.9vw,2.75rem); --t-h3:clamp(1.3rem,1.1rem + 0.7vw,1.625rem); --t-lead:clamp(1.125rem,1.05rem + 0.4vw,1.3125rem); /* texto maior, pedido de 2026-09-02: corpo 18px (era 17), pequeno 16 (era 15), rótulo 14 (era 13) */ --t-corpo:1.125rem; --t-pequeno:1rem; --t-rotulo:0.875rem; --t-numeral:clamp(1.5rem,1.2rem + 1vw,2.1rem);      /* da Conversa */ --t-respiro:clamp(1.4rem,1.1rem + 1.1vw,2rem); --t-numeral-grande:clamp(2.4rem,1.6rem + 2.4vw,3.5rem);   /* do respiro novo */ /* escala de espaço, base 8 */ --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:40px;--s6:48px;--s8:64px;--s10:80px;--s12:96px;--s16:128px;--s20:160px;--s24:192px; --raio:4px; --largura-leitura:66ch; --largura-max:1280px; --curva:cubic-bezier(.2,.7,.2,1); --dur:.7s; --alto-barra:64px; /* margem de página derivada da escala: alinha faixas, sangrias e trilho no mesmo eixo */ --margem:max(var(--s4),calc((100vw - var(--largura-max)) / 2 + var(--s4))); }

/* =====================================================================
   BASE · Revista (direcao-a)
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{ margin:0; background:var(--superficie-clara); color:var(--texto-sobre-claro); font-family:var(--f-texto); font-weight:var(--peso-texto); font-size:var(--t-corpo); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:clip; /* painel: não alcança porque é rede de segurança contra rolagem lateral das sangrias, não um estilo de seção */ }
img{display:block;max-width:100%;height:auto} /* height:auto vem da B e da C; as fotos delas dependem disso */
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:var(--peso-display);text-wrap:balance;hyphens:none}
h1{font-size:var(--t-display);line-height:1.02;letter-spacing:-.015em}
h2{font-size:var(--t-h2);line-height:1.08;letter-spacing:-.01em}
h3{font-size:var(--t-h3);font-weight:var(--peso-display-forte);line-height:1.18}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
[id]{scroll-margin-top:calc(var(--alto-barra) + var(--s2))}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px}

/* sistema de faixa e grid da Revista */
.faixa{padding-inline:var(--margem);padding-block:var(--s16)}
.wrap{width:100%;max-width:calc(var(--largura-max) - var(--s4) - var(--s4));margin-inline:auto}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--s4);row-gap:var(--s10)}
.grid12.e-con{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--s4);row-gap:var(--s10)}
/* painel: não alcança porque sem min-width:0 a largura intrínseca da foto estoura a coluna do grid */
.grid12 > *,.cor-fig > *,.mapa-fig > *{min-width:0}
.sangra-dir{padding-right:0}
.sangra-esq{padding-left:0}

/* papéis de texto da Revista */
.sobre{ font-size:var(--t-rotulo);font-weight:var(--peso-texto-forte); text-transform:uppercase;letter-spacing:.18em;line-height:1.4; color:var(--texto-apoio-sobre-claro); }
.lead{font-size:var(--t-lead);line-height:1.6;max-width:var(--largura-leitura)}
.corpo{max-width:var(--largura-leitura)}
.italico{font-family:var(--f-display);font-style:italic;font-weight:var(--peso-display)}
.italico :is(h1,h2,h3){font-family:var(--f-display);font-style:italic;font-weight:var(--peso-display)}
.apoio{color:var(--texto-apoio-sobre-claro);font-size:var(--t-pequeno)}
.num-pequeno{ font-family:var(--f-texto);font-weight:var(--peso-texto-forte); font-size:var(--t-rotulo);letter-spacing:.18em;line-height:1; color:var(--texto-apoio-sobre-claro); }
.estrela{width:.72em;height:.72em;flex:none;color:var(--acento)}
.estrela svg{display:block;width:100%;height:100%}

/* botões da Revista */
.btn{ display:inline-block;font-family:var(--f-texto);font-size:var(--t-pequeno); font-weight:var(--peso-texto-forte);letter-spacing:.06em;text-decoration:none; border-radius:var(--raio);transition:background-color var(--dur) var(--curva),color var(--dur) var(--curva),border-color var(--dur) var(--curva); }
.btn-cheio{background:var(--superficie-escura);color:var(--texto-sobre-escuro);padding:var(--s2) var(--s4);border:1px solid var(--superficie-escura)}
.btn-cheio:hover{background:var(--superficie-profunda);border-color:var(--superficie-profunda)}
.btn-filete{padding:var(--s2) 0;border-bottom:1px solid var(--acento);border-radius:0;color:var(--texto-sobre-claro)}
.btn-filete:hover{border-bottom-color:var(--superficie-escura)}
.acoes{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s5)}
.acoes.e-con{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s5)}

/* faixa de cartela da Revista: seis retângulos das seis cores da IDV */
.cartela{ background:linear-gradient(to bottom, var(--acento) 0 16.6667%, var(--acento-suave) 16.6667% 33.3333%, var(--superficie-clara) 33.3333% 50%, var(--superficie-media) 50% 66.6667%, var(--superficie-escura) 66.6667% 83.3333%, var(--superficie-profunda) 83.3333% 100%); }
.cartela-h{ background:linear-gradient(to right, var(--acento) 0 16.6667%, var(--acento-suave) 16.6667% 33.3333%, var(--superficie-clara) 33.3333% 50%, var(--superficie-media) 50% 66.6667%, var(--superficie-escura) 66.6667% 83.3333%, var(--superficie-profunda) 83.3333% 100%); height:14px;border:1px solid var(--linha-sobre-claro); }

/* 00 · cabeçalho · Revista */
.cabecalho{ position:sticky;top:0;z-index:20; padding-inline:var(--margem); background:var(--superficie-clara); border-bottom:1px solid var(--linha-sobre-claro); }
.barra{display:flex;flex-direction:row;align-items:center;gap:var(--s6);min-height:var(--alto-barra)}
.barra.e-con{display:flex;flex-direction:row;align-items:center;gap:var(--s6);min-height:var(--alto-barra)}
.marca{flex:none;line-height:0}
.marca img{flex:none;line-height:0}
.marca img{height:22px;width:auto}
.menu{margin-left:auto}
.menu ul{display:flex;gap:var(--s5)}
.menu a{ text-decoration:none;font-size:var(--t-rotulo);font-weight:var(--peso-display-forte); letter-spacing:.08em;padding-block:var(--s1); border-bottom:1px solid transparent;transition:border-color var(--dur) var(--curva) }
.menu a:hover{border-bottom-color:var(--acento)}
.barra .btn-filete{flex:none;padding-block:var(--s1)}
.menu-btn{ display:none;margin-left:auto;flex:none; background:none;border:0;border-bottom:1px solid var(--acento); font-family:var(--f-texto);font-size:var(--t-rotulo);font-weight:var(--peso-texto-forte); letter-spacing:.12em;color:var(--texto-sobre-claro); padding:var(--s1) 0;cursor:pointer }

/* 01 · hero · Revista */
.hero{padding-top:var(--s12);padding-bottom:var(--s12);align-items:start;row-gap:var(--s5);grid-template-rows:auto 1fr}
.hero.e-con{padding-top:var(--s12);padding-bottom:var(--s12);align-items:start;row-gap:var(--s5);grid-template-rows:auto 1fr}
.hero-txt{grid-column:1 / span 6;grid-row:1;display:flex;flex-direction:column;gap:var(--s5)}
.hero-txt.e-con{grid-column:1 / span 6;grid-row:1;display:flex;flex-direction:column;gap:var(--s5)}
.hero-txt h1{margin-top:var(--s1)}
.hero .lead{max-width:46ch}
.legenda{display:flex;flex-direction:row;align-items:baseline;gap:var(--s2)}
.legenda.e-con{display:flex;flex-direction:row;align-items:baseline;gap:var(--s2)}
.legenda-cel{grid-column:1 / span 6;grid-row:2;align-self:end;padding-bottom:var(--s6)}
.legenda p{font-family:var(--f-display);font-style:italic;font-size:var(--t-lead);line-height:1.4;color:var(--texto-apoio-sobre-claro)}
.hero-foto{grid-column:8 / -1;grid-row:1 / span 2;position:relative}
.hero-foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 12%}
.hero-foto .cartela{ position:absolute;left:0;top:0;bottom:0;width:12px; /* painel: não alcança porque é sobreposição na borda da foto, e o widget de imagem não tem camada */ }

/* 04 · atendimento · Revista (trilho horizontal; classe renomeada de .trilho para .trilho-h porque a Conversa usa .trilho para a foto fixa) */
.atd{padding-bottom:var(--s12)}
.atd-txt{grid-column:1 / span 6;display:flex;flex-direction:column;gap:var(--s4)}
.atd-txt.e-con{grid-column:1 / span 6;display:flex;flex-direction:column;gap:var(--s4)}
.trilho-h{ display:flex;flex-direction:row;gap:var(--s5); padding-left:var(--margem);padding-right:var(--s5); margin-top:var(--s10); overflow-x:auto; scroll-snap-type:x mandatory; /* painel: não alcança porque scroll-snap não existe nos controles do container */ scroll-padding-left:var(--margem); overscroll-behavior-x:contain; }
.trilho-h.e-con{ display:flex;flex-direction:row;gap:var(--s5); padding-left:var(--margem);padding-right:var(--s5); margin-top:var(--s10); overflow-x:auto; scroll-snap-type:x mandatory; /* painel: não alcança porque scroll-snap não existe nos controles do container */ scroll-padding-left:var(--margem); overscroll-behavior-x:contain; }
.lamina{ flex:0 0 clamp(230px,26vw,320px); scroll-snap-align:start; /* painel: não alcança, é o par do scroll-snap-type acima */ display:flex;flex-direction:column;gap:var(--s2); }
.lamina.e-con{ flex:0 0 clamp(230px,26vw,320px); scroll-snap-align:start; /* painel: não alcança, é o par do scroll-snap-type acima */ display:flex;flex-direction:column;gap:var(--s2); }
.lamina img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;margin-bottom:var(--s3)}
.lamina .num-pequeno{margin-bottom:var(--s1)}
.lamina p:last-child{color:var(--texto-apoio-sobre-claro);font-size:var(--t-pequeno)}

/* 05 · cor · Revista */
.cor-txt{grid-column:1 / span 5;display:flex;flex-direction:column;gap:var(--s4)}
.cor-txt.e-con{grid-column:1 / span 5;display:flex;flex-direction:column;gap:var(--s4)}
.cor-fig{ grid-column:7 / -1; display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto; column-gap:var(--s2);row-gap:var(--s3); }
.cor-fig.e-con{ grid-column:7 / -1; display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto; column-gap:var(--s2);row-gap:var(--s3); }
.comparador{position:relative;aspect-ratio:4/5;grid-area:1 / 1 / 2 / 3;overflow:hidden;border-radius:var(--raio)}
.comparador img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.comparador-topo{clip-path:inset(0 calc(100% - var(--corte)) 0 0)} /* painel: não alcança porque clip-path dirigido por variável não existe no painel */
.comparador-topo img{clip-path:inset(0 calc(100% - var(--corte)) 0 0)}
.comparador::after{ content:"";position:absolute;top:0;bottom:0;left:var(--corte);width:1px; background:var(--acento);pointer-events:none; /* painel: não alcança, é o fio do corte preso à mesma variável */ }
.comparador input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.rot{ grid-row:1;align-self:end;pointer-events:none; position:relative;z-index:1; /* painel: não alcança porque o rótulo pinta sobre o comparador, que é um bloco posicionado */ margin:var(--s3);padding:var(--s1) var(--s2); background:var(--superficie-clara);color:var(--texto-sobre-claro); font-size:var(--t-rotulo);letter-spacing:.08em;line-height:1.2;border-radius:var(--raio); white-space:nowrap; }
.rot-esq{grid-column:1;justify-self:start}
.rot-dir{grid-column:2;justify-self:end}
.cor-nota{grid-area:2 / 1 / 3 / 3}

/* 06 · mapa da cor · Revista */
.mapa-fig{ grid-column:1 / span 6; position:relative; display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr; aspect-ratio:1/1; padding:0 0 var(--s5) var(--s5); /* painel: não alcança porque o padding assimétrico abre o corredor dos eixos e mantém a área de cor quadrada */ }
.mapa-svg{ position:absolute;left:var(--s5);right:0;top:0;bottom:var(--s5); /* painel: não alcança porque o SVG tem que cobrir exatamente a área de cor sob os rótulos */ width:auto;height:auto; }
.mapa-svg .q{fill:currentColor;opacity:.9;transition:opacity var(--dur) var(--curva)}
.mapa-svg:hover .q{opacity:.55} /* painel: não alcança porque é hover de filho de SVG */
.mapa-svg .q:hover{opacity:1}
.q-fria-clara{color:var(--superficie-media)}
.q-quente-clara{color:var(--acento-suave)}
.q-fria-profunda{color:var(--superficie-escura)}
.q-quente-profunda{color:var(--acento)}
.mapa-rot{ pointer-events:none;margin:var(--s2); position:relative;z-index:1; /* painel: não alcança porque o SVG é absoluto e pintaria por cima do rótulo */ padding:var(--s1) var(--s2);border-radius:var(--raio); background:var(--superficie-clara);color:var(--texto-sobre-claro); font-size:var(--t-rotulo);letter-spacing:.06em;line-height:1.2; }
.r-fria-clara{grid-area:1/1;justify-self:start;align-self:start}
.r-quente-clara{grid-area:1/2;justify-self:end;align-self:start}
.r-fria-profunda{grid-area:2/1;justify-self:start;align-self:end}
.r-quente-profunda{grid-area:2/2;justify-self:end;align-self:end}
.mapa-centro{ grid-area:1 / 1 / 3 / 3;justify-self:center;align-self:center;pointer-events:none; position:relative;z-index:1; /* painel: não alcança, mesmo motivo do rótulo dos quadrantes */ padding:var(--s2) var(--s3);border:1px solid var(--acento);border-radius:var(--raio); background:var(--superficie-clara);color:var(--texto-sobre-claro); font-family:var(--f-display);font-style:italic;font-size:var(--t-lead);line-height:1.2; }
.eixo{ position:absolute;font-size:var(--t-rotulo);letter-spacing:.18em;text-transform:uppercase; font-weight:var(--peso-texto-forte);color:var(--texto-apoio-sobre-claro);line-height:1; /* painel: não alcança porque os eixos precisam ancorar nos cantos do quadro */ }
.eixo-frio{left:var(--s5);bottom:var(--s2)}
.eixo-quente{right:0;bottom:var(--s2)}
.eixo-clara,.eixo-profunda{left:var(--s2);writing-mode:vertical-rl;transform:rotate(180deg)}
.eixo-clara{top:0}
.eixo-profunda{bottom:var(--s5)}
.mapa-txt{grid-column:8 / -1;align-self:center;display:flex;flex-direction:column;gap:var(--s4)}
.mapa-txt.e-con{grid-column:8 / -1;align-self:center;display:flex;flex-direction:column;gap:var(--s4)}

/* 07 · respiro · NOVO (pedido: mais íntimo, sem gritar) */
.respiro{padding-block:var(--s12)}
.respiro .wrap{border-top:1px solid var(--linha-sobre-claro);border-bottom:1px solid var(--linha-sobre-claro);padding-block:var(--s10)}
.respiro-txt{grid-column:3 / span 8;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.respiro-txt.e-con{grid-column:3 / span 8;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.respiro-txt .estrela{width:14px;height:14px}
.respiro-txt h2{ font-family:var(--f-display);font-style:italic;font-weight:var(--peso-display); font-size:var(--t-respiro);line-height:1.4;letter-spacing:0;max-width:34ch; }

/* 10 · sobre · Revista */
.sobre-sec{background:var(--superficie-escura);color:var(--texto-sobre-escuro);align-items:center;row-gap:var(--s8)}
.sobre-sec.e-con{background:var(--superficie-escura);color:var(--texto-sobre-escuro);align-items:center;row-gap:var(--s8)}
.sobre-foto{grid-column:1 / span 5}
.sobre-foto img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 16%}
.sobre-txt{grid-column:7 / -1;display:flex;flex-direction:column;gap:var(--s4)}
.sobre-txt.e-con{grid-column:7 / -1;display:flex;flex-direction:column;gap:var(--s4)}
.sobre-txt .sobre{color:var(--texto-apoio-sobre-escuro)}
.sobre-txt p{max-width:var(--largura-leitura)}
.sobre-txt .btn-filete{color:var(--texto-sobre-escuro);border-bottom-color:var(--acento-suave);align-self:start}
.sobre-txt .btn-filete:hover{border-bottom-color:var(--superficie-clara)}

/* 11 · fecho · Revista, com a foto pedida (a Revista não tinha foto aqui) */
.fecho{align-items:end;row-gap:var(--s8)}
.fecho.e-con{align-items:end;row-gap:var(--s8)}
.fecho-txt{grid-column:1 / span 7;display:flex;flex-direction:column;gap:var(--s4)}
.fecho-txt.e-con{grid-column:1 / span 7;display:flex;flex-direction:column;gap:var(--s4)}
.fecho-txt .acoes{margin-top:var(--s2)}
.fecho-foto{grid-column:9 / -1;display:flex;flex-direction:column;gap:var(--s3)}
.fecho-foto.e-con{grid-column:9 / -1;display:flex;flex-direction:column;gap:var(--s3)}
.fecho-foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:var(--raio)}

/* =====================================================================
   BLOCOS DA CONVERSA (direcao-c) · CSS da direção C, com escopo .de-c
   dor (#dor), caminhos (#caminhos), rodapé (#rodape)
   ===================================================================== */
.de-c.sec{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--s4); padding-inline:var(--margem); /* na C era max(--s5,(100% - 1280px)/2); aqui usa a margem da página para alinhar com os blocos da Revista */ }
.de-c.sec.e-con{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--s4); padding-inline:var(--margem); /* na C era max(--s5,(100% - 1280px)/2); aqui usa a margem da página para alinhar com os blocos da Revista */ }
.de-c.bg-areia{background:var(--superficie-clara);color:var(--texto-sobre-claro);--apoio:var(--texto-apoio-sobre-claro);--filete:var(--linha-sobre-claro);--filete-link:var(--acento)}
.de-c.bg-escura{background:var(--superficie-escura);color:var(--texto-sobre-escuro);--apoio:var(--texto-apoio-sobre-escuro);--filete:var(--linha-sobre-escuro);--filete-link:var(--acento-suave)}
.de-c h2{line-height:1.1}
.de-c h3{letter-spacing:0;line-height:1.2}
.de-c .corpo{max-width:var(--largura-leitura)}
.de-c .forte{font-weight:var(--peso-texto-forte)}
.de-c .italico{font-family:var(--f-display);font-style:italic;font-weight:var(--peso-display)}
.de-c .italico :is(h1,h2,h3){font-family:var(--f-display);font-style:italic;font-weight:var(--peso-display)}
.de-c .link{ display:inline-block;align-self:start;justify-self:start; font-size:var(--t-pequeno);font-weight:var(--peso-texto-forte);letter-spacing:.05em; text-decoration:none;border-bottom:1px solid var(--filete-link);padding-bottom:2px; }
.de-c .link:hover{border-bottom-color:currentColor}
/* capítulos com trilho de imagem */
.de-c.cap{padding-block:var(--s16);row-gap:var(--s6)}
.de-c.cap.e-con{padding-block:var(--s16);row-gap:var(--s6)}
.de-c.cap .trilho{ grid-column:1/6;grid-row:1; position:sticky;top:calc(var(--alto-barra) + var(--s5));align-self:start; /* painel: nao alcanca porque o Elementor nao tem controle de position sticky por container */ }
.de-c.cap .coluna{grid-column:7/13;grid-row:1;display:grid;gap:var(--s4);align-content:start}
.de-c.cap .coluna.e-con{grid-column:7/13;grid-row:1;display:grid;gap:var(--s4);align-content:start}
.de-c.cap .coluna>h2,.de-c.cap .coluna>.italico{margin-top:var(--s1)}
.de-c .foto{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--raio)}
.de-c .foto img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--raio)}
/* painel: nao alcanca porque cada foto pede um object-position proprio para nao cortar rosto nem pes */
.de-c .f3236{object-position:50% 22%}
.de-c .f3390{object-position:50% 18%}
#dor.cap{padding-top:var(--s12)} /* na C o padding-top era maior porque a foto da capa invadia a seção; aqui o hero é o da Revista */
/* caminhos */
.de-c .caminho{padding-block:var(--s5);border-top:1px solid var(--filete);display:grid;gap:var(--s2);justify-items:start}
.de-c .caminho.e-con{padding-block:var(--s5);border-top:1px solid var(--filete);display:grid;gap:var(--s2);justify-items:start}
.de-c .caminho .num{ font-family:var(--f-display);font-weight:var(--peso-display-forte); font-size:var(--t-numeral);line-height:1;color:var(--acento); }
.de-c .caminho p{max-width:46ch}
/* rodapé */
.de-c.rodape{padding-block:var(--s12) var(--s6);row-gap:var(--s8)}
.de-c.rodape.e-con{padding-block:var(--s12) var(--s6);row-gap:var(--s8)}
.de-c .col-marca{grid-column:1/5;display:grid;gap:var(--s3);align-content:start;justify-items:start}
.de-c .col-marca.e-con{grid-column:1/5;display:grid;gap:var(--s3);align-content:start;justify-items:start}
.de-c .col-nav{grid-column:6/9;display:grid;gap:var(--s3);align-content:start}
.de-c .col-nav.e-con{grid-column:6/9;display:grid;gap:var(--s3);align-content:start}
.de-c .col-onde{grid-column:9/13;display:grid;gap:var(--s3);align-content:start}
.de-c .col-onde.e-con{grid-column:9/13;display:grid;gap:var(--s3);align-content:start}
.de-c.rodape .marca{height:26px;width:auto}
.de-c.rodape .marca img{height:26px;width:auto}
.de-c.rodape h3{font-size:var(--t-rotulo);text-transform:uppercase;letter-spacing:.16em;font-family:var(--f-texto);font-weight:var(--peso-texto-forte);color:var(--apoio)}
.de-c.rodape li+li{margin-top:var(--s2)}
.de-c.rodape li{font-size:var(--t-pequeno)}
.de-c.rodape a{text-decoration:none;border-bottom:1px solid transparent}
.de-c.rodape a:hover{border-bottom-color:currentColor}
.de-c .assinatura{font-family:var(--f-display);font-style:italic;font-size:var(--t-h3);color:var(--texto-apoio-sobre-escuro);line-height:1.2}
.de-c .linha-final{ grid-column:1/13;padding-top:var(--s5);border-top:1px solid var(--linha-sobre-escuro); font-size:var(--t-rotulo);letter-spacing:.06em;color:var(--texto-apoio-sobre-escuro); }

/* =====================================================================
   BLOCOS DO ESPELHO (direcao-b) · CSS da direção B, com escopo .de-b
   método (#metodo), curso (#curso)
   ===================================================================== */
.de-b{padding-inline:var(--margem);background:var(--superficie-escura);color:var(--texto-sobre-escuro)}
.de-b .wrap{width:100%;max-width:calc(var(--largura-max) - var(--s4) - var(--s4));margin-inline:auto;padding-inline:0} /* na B o wrap tinha 1280 com padding próprio; aqui usa a banda da página para alinhar */
.de-b.bloco{padding-block:var(--s12)}
.de-b .g12{display:grid;gap:var(--s5) var(--s4);grid-template-columns:minmax(0,1fr)}
.de-b .g12.e-con{display:grid;gap:var(--s5) var(--s4);grid-template-columns:minmax(0,1fr)}
.de-b .sobrelinha{font-size:var(--t-rotulo);letter-spacing:.18em;text-transform:uppercase; font-weight:var(--peso-texto-forte);color:var(--acento-suave)}
.de-b .h2{font-size:var(--t-h2);line-height:1.06;letter-spacing:-.012em}
.de-b .h2 :is(h1,h2,h3){font-size:var(--t-h2);line-height:1.06;letter-spacing:-.012em}
.de-b .h3{font-size:var(--t-h3);font-weight:var(--peso-display-forte);line-height:1.15;letter-spacing:-.012em}
.de-b .h3 :is(h1,h2,h3){font-size:var(--t-h3);font-weight:var(--peso-display-forte);line-height:1.15;letter-spacing:-.012em}
.de-b .corpo{max-width:var(--largura-leitura)}
.de-b .apoio{color:var(--texto-apoio-sobre-escuro);font-size:inherit;line-height:inherit}
.de-b.filete-topo{border-top:1px solid var(--linha-sobre-escuro)}
/* faixa de cartela, marcador usado uma única vez (abre o método) */
/* painel: não alcança porque são seis paradas duras numa única caixa, e o painel só oferece degradê contínuo */
.de-b .cartela{width:132px;height:8px;border:1px solid var(--linha-sobre-escuro);border-radius:var(--raio); background:linear-gradient(90deg, var(--superficie-clara) 0 16.66%,var(--acento-suave) 16.66% 33.33%,var(--acento) 33.33% 50%, var(--superficie-media) 50% 66.66%,var(--superficie-escura) 66.66% 83.33%,var(--superficie-profunda) 83.33% 100%)}
.de-b .link{display:inline-flex;align-items:center;gap:var(--s1);width:fit-content; font-size:var(--t-pequeno);font-weight:var(--peso-texto-forte);letter-spacing:.08em;text-transform:uppercase; padding-bottom:var(--s1);border-bottom:1px solid var(--acento);color:var(--acento-suave);text-decoration:none; transition:opacity var(--dur) var(--curva)}
.de-b .link.e-con{display:inline-flex;align-items:center;gap:var(--s1);width:fit-content; font-size:var(--t-pequeno);font-weight:var(--peso-texto-forte);letter-spacing:.08em;text-transform:uppercase; padding-bottom:var(--s1);border-bottom:1px solid var(--acento);color:var(--acento-suave);text-decoration:none; transition:opacity var(--dur) var(--curva)}
.de-b .link:hover{opacity:.8}
.de-b .link-claro{color:var(--texto-sobre-claro)}
/* método */
#metodo .marcador{display:grid;gap:var(--s3)}
#metodo .marcador.e-con{display:grid;gap:var(--s3)}
.de-b .passo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2) var(--s4); align-items:start;padding-top:var(--s5);border-top:1px solid var(--linha-sobre-escuro)}
.de-b .passo.e-con{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2) var(--s4); align-items:start;padding-top:var(--s5);border-top:1px solid var(--linha-sobre-escuro)}
.de-b .passo .num{grid-row:span 2;font-family:var(--f-display);font-weight:var(--peso-display); font-size:var(--t-display);line-height:.8;color:var(--acento)} /* terracota, como na B e no print escolhido pelo Gabriel; sobre cacau mede 2,5:1 */
.de-b .passo p:not(.num){color:var(--texto-apoio-sobre-escuro);max-width:46ch}
.de-b .foto-alta{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--raio)}
.de-b .foto-alta img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--raio)}
/* painel: não alcança porque aspect-ratio combinado com object-position fino não é editável no widget */
#metodo .foto-alta{object-position:50% 20%}
#metodo .foto-alta img{object-position:50% 20%}
/* curso, a tela clara da B */
#curso{background:var(--superficie-clara);color:var(--texto-sobre-claro);padding-block:var(--s12)}
#curso .sobrelinha{color:var(--texto-apoio-sobre-claro)}
#curso p{color:var(--texto-apoio-sobre-claro)}
#curso .celula{display:grid;gap:var(--s3);align-content:start}
#curso .celula.e-con{display:grid;gap:var(--s3);align-content:start}
#curso .foto-alta{object-position:50% 25%}
#curso .foto-alta img{object-position:50% 25%}

/* ===== movimento "Assentar" (igual nas três direções) ===== */
@keyframes assenta-rede{to{opacity:1;transform:none}}
[data-assenta]{opacity:0;transform:translateY(16px);animation:assenta-rede .01s linear 1.4s forwards}
[data-assenta].assentou{opacity:1;transform:none;animation:none;transition:opacity var(--dur) var(--curva),transform var(--dur) var(--curva)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}[data-assenta]{opacity:1;transform:none;animation:none;transition:none}}
[data-assenta].assentou{transition-delay:var(--d,0ms)}
.hero-txt h1[data-assenta]{--d:90ms}
.hero-txt .lead[data-assenta]{--d:180ms}
.hero-txt .acoes[data-assenta]{--d:270ms}
.hero-foto[data-assenta]{--d:180ms}
.legenda-cel[data-assenta]{--d:360ms}

/* =====================================================================
   BREAKPOINTS
   ===================================================================== */
/* desktop */
@media (min-width:1025px){
  /* Conversa */
  .de-c.cap .trilho .foto{max-height:calc(100vh - var(--alto-barra) - var(--s20))} /* painel: nao alcanca porque a trava depende da altura da janela, nao de um valor fixo */
  .de-c.cap .trilho .foto img{max-height:calc(100vh - var(--alto-barra) - var(--s20))}
  /* Espelho */
  .de-b.bloco{padding-block:var(--s20)}
  #curso{padding-block:var(--s20)}
  .de-b .g12{grid-template-columns:repeat(12,minmax(0,1fr))}
  #metodo .celula.intro,#metodo .marcador{grid-column:1/8}
  #metodo .passo{grid-column:1/8}
  #metodo .celula.foto{grid-column:9/13;grid-row:1/span 5;align-self:start; position:sticky;top:var(--s12)} /* painel: não alcança porque sticky dentro de item de grid com span de linhas não é opção do painel */
  #curso .celula.texto{grid-column:1/7}
  #curso .celula.foto{grid-column:8/13}
}

/* tablet */
@media (min-width:768px) and (max-width:1024px){
  /* Revista */
  .faixa{padding-block:var(--s12)}
  .grid12{row-gap:var(--s8);column-gap:var(--s3)}
  .grid12.e-con{row-gap:var(--s8);column-gap:var(--s3)}
  .hero-txt{grid-column:1 / span 7}
  .hero-foto{grid-column:8 / -1}
  .legenda-cel{grid-column:1 / span 7}
  .atd-txt{grid-column:1 / -1}
  .cor-txt{grid-column:1 / -1}
  .cor-fig{grid-column:1 / span 8}
  .mapa-fig{grid-column:1 / span 8}
  .mapa-txt{grid-column:1 / -1}
  .respiro-txt{grid-column:2 / span 10}
  .sobre-foto{grid-column:1 / span 5}
  .sobre-txt{grid-column:6 / -1}
  .fecho-txt{grid-column:1 / span 7}
  .fecho-foto{grid-column:8 / -1}
  .menu ul{gap:var(--s3)}
  .barra{gap:var(--s4)}
  .barra.e-con{gap:var(--s4)}
  /* Conversa */
  .de-c.sec{column-gap:var(--s3)}
  .de-c.sec.e-con{column-gap:var(--s3)}
  .de-c.cap,#dor.cap{padding-block:var(--s12)}
  .de-c.cap .trilho,.de-c.cap .coluna{grid-column:1/13;grid-row:auto;position:static}
  .de-c.cap .trilho{max-width:520px}
  .de-c .foto{max-height:70vh}
  .de-c .foto img{max-height:70vh}
  .de-c .col-marca{grid-column:1/13}
  .de-c .col-nav{grid-column:1/7}
  .de-c .col-onde{grid-column:7/13}
  /* Espelho */
  .de-b.bloco,#curso{padding-block:var(--s16)}
  .de-b .g12{grid-template-columns:repeat(12,minmax(0,1fr))}
  #metodo .celula,#metodo .marcador{grid-column:1/9}
  #metodo .celula.foto{grid-column:9/13;grid-row:2/span 4;align-self:start}
  #curso .celula.texto{grid-column:1/7}
  #curso .celula.foto{grid-column:8/13}
}

/* mobile */
@media (max-width:767px){
  :root{--margem:var(--s3)}
  /* Revista */
  .faixa{padding-block:var(--s10)}
  .grid12{grid-template-columns:1fr;row-gap:var(--s6)}
  .grid12.e-con{grid-template-columns:1fr;row-gap:var(--s6)}
  .grid12 > *{grid-column:1 / -1 !important;grid-row:auto !important}

  .barra{gap:var(--s3);min-height:56px}
  .barra.e-con{gap:var(--s3);min-height:56px}
  .menu-btn{display:inline-block}
  .barra .btn-filete{display:none}
  .menu{ display:none;position:absolute;top:100%;left:0;right:0; background:var(--superficie-clara);border-bottom:1px solid var(--linha-sobre-claro); padding:var(--s4) var(--margem) var(--s6); /* painel: não alcança porque o painel do menu ancora na base do cabeçalho fixo */ }
  .menu.aberto{display:block}
  .menu ul{flex-direction:column;gap:var(--s4)}
  .menu a{font-size:var(--t-lead);letter-spacing:.02em;font-family:var(--f-display)}

  .hero{padding-top:var(--s8);padding-right:var(--margem);grid-template-rows:none}
  .hero-txt{gap:var(--s4)}
  .hero-txt.e-con{gap:var(--s4)}
  .hero-foto img{aspect-ratio:4/5;max-height:70vh;object-position:50% 10%}
  .legenda-cel{padding-bottom:0}
  .hero .acoes{gap:var(--s3);flex-direction:column;align-items:stretch}
  .hero .acoes.e-con{gap:var(--s3);flex-direction:column;align-items:stretch}
  .hero .acoes .btn-cheio{text-align:center}
  .hero .acoes .btn-filete{align-self:start}

  .trilho-h{gap:var(--s4);padding-right:var(--s3);margin-top:var(--s8)}
  .trilho-h.e-con{gap:var(--s4);padding-right:var(--s3);margin-top:var(--s8)}
  .lamina{flex:0 0 78%}

  .cor-fig{grid-template-columns:1fr 1fr}
  .mapa-fig{padding:0 0 var(--s5) var(--s5)}
  .mapa-centro{font-size:var(--t-corpo);padding:var(--s1) var(--s2)}
  .mapa-rot{margin:var(--s1);font-size:.8125rem;padding:2px var(--s1)}

  .respiro{padding-block:var(--s8)}
  .respiro .wrap{padding-block:var(--s8)}

  .sobre-foto img{aspect-ratio:4/5;max-height:70vh}
  .sobre-txt{gap:var(--s3);padding-left:var(--margem)}
  .sobre-txt.e-con{gap:var(--s3);padding-left:var(--margem)}

  .fecho .acoes{flex-direction:column;align-items:stretch;gap:var(--s3)}
  .fecho .acoes.e-con{flex-direction:column;align-items:stretch;gap:var(--s3)}
  .fecho .acoes .btn-cheio{text-align:center}
  .fecho .acoes .btn-filete{align-self:start}
  .fecho-foto img{max-height:70vh}

  /* Conversa */
  .de-c.sec{grid-template-columns:1fr;column-gap:0;padding-inline:var(--s3);row-gap:var(--s5)}
  .de-c.sec.e-con{grid-template-columns:1fr;column-gap:0;padding-inline:var(--s3);row-gap:var(--s5)}
  .de-c.sec>*{grid-column:1/-1 !important;grid-row:auto !important}
  .de-c.cap,#dor.cap{padding-block:var(--s10)}
  .de-c.cap .trilho{position:static;top:auto}
  .de-c .foto{max-height:70vh}
  .de-c .foto img{max-height:70vh}
  .de-c .corpo,.de-c .caminho p{max-width:none}
  .de-c.rodape{padding-block:var(--s10) var(--s5);row-gap:var(--s6)}
  .de-c.rodape.e-con{padding-block:var(--s10) var(--s5);row-gap:var(--s6)}

  /* Espelho */
  .de-b .foto-alta{aspect-ratio:4/5;max-height:70svh}
  .de-b .foto-alta img{aspect-ratio:4/5;max-height:70svh}
  .de-b .passo{gap:var(--s1) var(--s3)}
  .de-b .passo.e-con{gap:var(--s1) var(--s3)}
  .de-b .passo .num{font-size:var(--t-h2)}
}

/* ponte para as globais do Elementor: o painel mostra as cores de fabrica
   porque o plugin apagou system_colors ao gravar o custom_css. Quem renderiza
   e isto. */
:root,.elementor-kit-5{ --e-global-color-primary:var(--superficie-escura); --e-global-color-secondary:var(--acento); --e-global-color-text:var(--texto-sobre-claro); --e-global-color-accent:var(--acento-suave); --e-global-typography-primary-font-family:var(--f-display); --e-global-typography-primary-font-weight:var(--peso-display); --e-global-typography-secondary-font-family:var(--f-display); --e-global-typography-secondary-font-weight:400; --e-global-typography-text-font-family:var(--f-texto); --e-global-typography-text-font-weight:var(--peso-texto); --e-global-typography-accent-font-family:var(--f-texto); --e-global-typography-accent-font-weight:var(--peso-texto-forte); }

/* ---- ponte de especificidade com o CSS por widget do Elementor ---- */
body .elementor-widget-heading .elementor-heading-title,
body .elementor-widget-text-editor,
body .elementor-widget-icon-list .elementor-icon-list-text{color:inherit}
body .elementor-widget-button .elementor-button.btn{border-radius:var(--raio);font-family:var(--f-texto); font-size:var(--t-rotulo);letter-spacing:.08em;text-transform:uppercase}
body .elementor-widget-button .elementor-button.btn-cheio{background-color:var(--superficie-escura); color:var(--texto-sobre-escuro);border:1px solid var(--superficie-escura)}
body .elementor-widget-button .elementor-button.btn-cheio:hover{background-color:var(--superficie-profunda); border-color:var(--superficie-profunda)}
body .elementor-widget-button .elementor-button.btn-filete{background-color:transparent; color:var(--texto-sobre-claro);border-radius:0; border-bottom:1px solid var(--acento)}
body .elementor-widget-button .elementor-button.btn-filete:hover{border-bottom-color:var(--superficie-escura)}
.estrela{display:inline-block}
/* ---- empate de especificidade com o container do Elementor ---- */
/* ---- ajustes de classe em elemento interno ---- */
body .elementor-widget:has(>.linha-final){
 grid-column:1/13}
.de-b .passo.e-con>*:first-child{grid-row:span 2}
body .elementor-widget-button .elementor-button.link{
 display:inline-block;background-color:transparent;padding:0 0 2px;
 font-size:var(--t-pequeno);font-weight:var(--peso-texto-forte);
 letter-spacing:.05em;text-decoration:none;border-radius:0;
 border-bottom:1px solid var(--filete-link)}
body .elementor-widget-button .elementor-button.link:hover{
 border-bottom-color:currentColor}
body .elementor-widget-button .elementor-button.link-claro{
 color:var(--texto-sobre-claro)}

body .sobre-txt .elementor-button.btn-filete{color:var(--texto-sobre-escuro);
 border-bottom-color:var(--acento-suave);align-self:start}
body .sobre-txt .elementor-button.btn-filete:hover{
 border-bottom-color:var(--superficie-clara)}
.zona-topo.e-con,.zona-rodape.e-con{align-items:stretch;justify-content:flex-start}
/* ---- kit global · revisao 02/09 (noite) ---- */
/* numeral do metodo tem escala propria, nao a do h1 */
.de-b .passo .num{font-size:var(--t-numeral-grande)}

/* o <p> interno ja nao e o item do grid: a caixa, a margem e a posicao
   ficam no wrapper, que carrega as mesmas classes */
.elementor-widget.num>p,.elementor-widget.linha-final>p,.elementor-widget.mapa-rot>p,
.elementor-widget.mapa-centro>p,.elementor-widget.eixo>p,.elementor-widget.rot>p,
.elementor-widget.cor-nota>p{
 margin:0;padding:0;background:none;border:0;position:static;inset:auto;
 transform:none;grid-area:auto;align-self:auto;justify-self:auto}
.elementor-widget.eixo>p{writing-mode:inherit}

/* wrappers dos blocos html tomam a celula do conteudo */
.cor-fig>.comparador-wrap{grid-area:1/1/2/3}
.mapa-fig>.mapa-svg-wrap{position:absolute;left:var(--s5);right:0;top:0;bottom:var(--s5);grid-area:1/1/3/3}
.mapa-svg-wrap .mapa-svg{position:absolute;inset:0;width:100%;height:100%}

/* marcador do metodo: span inline nao aceita largura */
.de-b .cartela{display:block}

/* link de texto dentro do widget de botao herdava o branco de fabrica */
body .elementor-widget-button .elementor-button.link{color:inherit}

/* atendimento alinhado na margem das outras faixas */
.atd.e-con{padding-left:0}
.atd>.wrap.e-con{margin-left:var(--margem);margin-right:0}

/* o container do Elementor troca --flex-wrap para wrap no celular; o trilho e uma linha unica que rola */
.trilho-h.e-con{flex-wrap:nowrap}
.lamina.e-con{flex:0 0 clamp(230px,26vw,320px)}
@media (max-width:767px){.lamina.e-con{flex:0 0 78%}}/* End custom CSS */