/* ReasonHub — estilos das paginas verticais (Escola, Consultoria, Mentoria).
   Derivado dos prototipos aprovados (escola.html / consultoria.html / mentoria.html).
   Carrega sobre components.css (base compartilhada com a home: hero, stat,
   logowall, about, ph); ver functions.php. Os globais vivem em theme.css. */

/* Display um pouco maior (igual a home/prototipo das verticais). */
:root{ --fs-display:clamp(38px,4.6vw,60px); }

.section--prussian h4{color:var(--off-white)}

/* Grid */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}

/* ===== Componentes especificos da Escola ===== */

/* Problema: fluxo 4 sintomas -> seta -> diagnostico */
.problem-flow{display:grid;grid-template-columns:1fr auto 1.05fr;gap:var(--space-6);align-items:center}
.problem-list{display:flex;flex-direction:column;gap:var(--space-3)}
.sympt{background:#fff;border:1px solid var(--dust-grey);border-left:3px solid var(--reddish-brown);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5)}
.sympt--tint{background:var(--sky-tint-solid);border-color:transparent;border-left-color:var(--reddish-brown)}
.sympt h4{margin:0 0 2px;font-size:var(--fs-small)}
.sympt p{margin:0;font-size:var(--fs-caption);color:var(--dim-grey);line-height:var(--lh-snug)}
.problem-arrow{display:flex;align-items:center;justify-content:center;color:var(--reddish-brown)}
.problem-arrow svg{width:52px;height:52px}
.problem-conclusion{background:var(--prussian-blue);border-top:4px solid var(--reddish-brown);border-radius:var(--radius-lg);padding:var(--space-8);align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:var(--space-6)}
.pc-part--alt{border-top:1px solid rgba(139,187,228,.25);padding-top:var(--space-6)}
.problem-conclusion .lbl{font-family:var(--font-mono);font-size:13px;letter-spacing:.10em;text-transform:uppercase;color:var(--sky-blue);display:flex;align-items:center;gap:9px;margin-bottom:var(--space-3)}
.problem-conclusion .lbl svg{width:19px;height:19px;stroke:var(--sky-blue);fill:none;flex:none}
.problem-conclusion p{margin:0;color:var(--off-white);font-size:var(--fs-small);font-weight:400;line-height:var(--lh-normal)}
.problem-conclusion .keyword{color:var(--sky-blue);font-weight:700}

/* A camada que falta (trilayer enxuto) */
.trilayer{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.tl{border:1px solid var(--dust-grey);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;gap:4px;background:#fff}
.tl-k{font-weight:600;font-size:var(--fs-h4);color:var(--gunmetal)}
.tl-d{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim-grey)}
.tl--on{background:var(--prussian-blue);border-color:var(--prussian-blue);box-shadow:inset 4px 0 0 var(--reddish-brown)}
.tl--on .tl-k{color:var(--off-white)} .tl--on .tl-d{color:var(--sky-blue)}

/* Comparacao 2 planos (Emergencia x Eficacia) */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.compare .col{border-radius:var(--radius-lg);padding:var(--space-8);border:1px solid var(--dust-grey);background:#fff}
.compare .col--alt{background:var(--prussian-blue);border-color:transparent}
.compare h3{margin:0 0 var(--space-5);font-size:var(--fs-h3)}
.compare .col--alt h3{color:var(--off-white)}
.compare dl{margin:0;display:flex;flex-direction:column;gap:var(--space-4)}
.compare dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim-grey);margin-bottom:2px}
.compare .col--alt dt{color:var(--sky-blue)}
.compare dd{margin:0;font-size:var(--fs-small);color:var(--gunmetal);line-height:var(--lh-snug)}
.compare .col--alt dd{color:var(--off-white)}
.compare .sub{font-size:var(--fs-small);color:var(--dim-grey);margin:0 0 var(--space-6);line-height:var(--lh-snug)}
.compare .col--alt .sub{color:var(--sky-blue)}
/* Icone opcional no topo da coluna de comparacao (so onde ha .col-icon) */
.compare .col-icon{display:block;width:34px;height:34px;fill:none;stroke:var(--reddish-brown);stroke-width:1.8;margin-bottom:var(--space-4)}
.compare .col--alt .col-icon{stroke:var(--sky-blue)}

/* 4 dimensoes (cards coloridos, alternados) */
.dimgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.dimcard{border-radius:var(--radius-lg);padding:var(--space-8)}
.dimcard .dnum{font-family:var(--font-serif);font-weight:600;font-size:40px;line-height:1;display:block;margin-bottom:var(--space-2)}
.dimcard h3{margin:0 0 var(--space-3);font-size:var(--fs-h4);text-transform:uppercase;letter-spacing:.03em}
.dimcard p{margin:0;font-size:var(--fs-small)}
.dimcard--sky{background:var(--sky-tint-solid)}
.dimcard--sky .dnum{color:var(--reddish-brown)} .dimcard--sky h3{color:var(--prussian-blue)} .dimcard--sky p{color:var(--gunmetal)}
.dimcard--prussian{background:var(--prussian-blue)}
.dimcard--prussian .dnum{color:var(--sky-blue)} .dimcard--prussian h3{color:var(--off-white)} .dimcard--prussian p{color:var(--sky-blue)}
/* Icone de contraste no canto superior direito do dimcard (opt-in, so onde ha .d-icon) */
.dimcard{position:relative}
.dimcard .d-icon{position:absolute;top:var(--space-6);right:var(--space-6);width:40px;height:40px;fill:none;stroke-width:2;opacity:1}
.dimcard--sky .d-icon{stroke:var(--reddish-brown)}
.dimcard--prussian .d-icon{stroke:var(--off-white)}

/* Catalogo (modulos sobre fundo prussian) */
.catalog{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}
.modcard{border:1px solid rgba(139,187,228,.30);border-radius:var(--radius-lg);padding:var(--space-6)}
.modcard h4{color:var(--off-white);margin:0 0 var(--space-2)}
.modcard p{color:var(--sky-blue);font-size:var(--fs-caption);margin:0;opacity:.8;line-height:var(--lh-snug)}
.section--prussian .modcard{background:#16344E;border:1px solid rgba(139,187,228,.5)}
.section--prussian .modcard h4{color:#fff}
.section--prussian .modcard p{color:var(--sky-blue);opacity:1}
.section--prussian .modcard:hover{border-color:var(--sky-blue)}
/* Modcard claro (opt-in): cartao claro sobre a secao prussian, para contraste */
.section--prussian .modcard--light{background:var(--sky-tint-solid);border-color:transparent;border-top:5px solid var(--reddish-brown);box-shadow:0 8px 20px rgba(0,0,0,.32)}
.section--prussian .modcard--light h4{color:var(--prussian-blue)}
.section--prussian .modcard--light p{color:var(--gunmetal);opacity:1}
.section--prussian .modcard--light:hover{border-color:var(--reddish-brown)}
.escola-note{font-family:var(--font-mono);font-size:12px;color:var(--sky-blue);opacity:.8}

/* Formatos (progressao) */
.formats{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-4)}
.fmtcard{background:#fff;border:1px solid var(--dust-grey);border-top:3px solid var(--sky-blue);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column}
.fmtcard .step{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--reddish-brown);margin-bottom:var(--space-4)}
.fmtcard h4{color:var(--gunmetal);margin:0 0 var(--space-3);font-size:var(--fs-small);line-height:var(--lh-snug)}
.fmtcard p{color:var(--dim-grey);font-size:var(--fs-caption);margin:0;line-height:var(--lh-snug)}

/* Cinco diferenciais (lista numerada) */
.differ{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8) var(--space-12)}
.diff-item{display:grid;grid-template-columns:auto 1fr;gap:var(--space-5);align-items:start}
.diff-num{font-family:var(--font-serif);font-weight:600;font-size:34px;color:var(--reddish-brown);line-height:1}
.diff-item h4{margin:0 0 var(--space-2);font-size:var(--fs-h3)}
.diff-item p{margin:0;font-size:var(--fs-small);color:var(--dim-grey);line-height:var(--lh-snug)}

/* Diagnostico (barra de virada, era da IA) */
.diagnosis{margin-top:var(--space-10);background:var(--prussian-blue);border-top:4px solid var(--reddish-brown);border-radius:var(--radius-lg);padding:var(--space-10) var(--space-12);text-align:center}
.diagnosis .lbl{font-family:var(--font-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--sky-blue);display:block;margin-bottom:var(--space-3)}
.diagnosis p{margin:0;color:var(--off-white);font-size:var(--fs-h4);font-weight:500;line-height:var(--lh-snug);max-width:64ch;margin-left:auto;margin-right:auto}
.diagnosis .keyword{color:var(--sky-blue);font-weight:700}

/* FAQ (details nativo) */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--dust-grey);padding:var(--space-4) 0}
.faq summary{cursor:pointer;font-weight:600;font-size:var(--fs-body);color:var(--gunmetal);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);font-size:22px;color:var(--reddish-brown);flex:none;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:var(--space-3) 0 0;color:var(--dim-grey);font-size:var(--fs-small);max-width:70ch}

/* Contato: passos + formulario */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-bottom:var(--space-12)}
.step-item{border-top:3px solid var(--sky-blue);padding-top:var(--space-4)}
.step-item .n{font-family:var(--font-serif);font-weight:600;font-size:30px;color:var(--sky-blue);line-height:1;display:block;margin-bottom:var(--space-2)}
.step-item h4{color:var(--off-white);margin:0 0 var(--space-2);font-size:var(--fs-small)}
.step-item p{color:var(--sky-blue);font-size:var(--fs-caption);margin:0;line-height:var(--lh-snug)}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4) var(--space-5);max-width:880px}
.contact-form label{display:flex;flex-direction:column;gap:6px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--sky-blue)}
.contact-form input,.contact-form select,.contact-form textarea{font-family:var(--font-sans);font-size:var(--fs-small);color:var(--gunmetal);background:var(--off-white);border:1.5px solid transparent;border-radius:var(--radius-md);padding:13px 14px}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--sky-blue)}
.contact-form textarea{min-height:96px;resize:vertical}
.contact-form .span2{grid-column:1/-1}
.contact-alt{font-family:var(--font-mono);font-size:13px;color:var(--sky-blue);margin:var(--space-6) 0 0}
.contact-alt a{color:var(--off-white);text-decoration:underline}

/* Pill de rotulo — base global em theme.css (§12.4). Aqui so os overrides de contexto:
   card de comparacao escuro (.col--alt, que nao e uma .section--prussian) e o trilayer. */
.col--alt .pill{background:var(--sky-blue);color:var(--prussian-blue)}
.tl .pill{align-self:flex-start;margin:0 0 6px}
.tl-t{font-size:var(--fs-small);color:var(--gunmetal);line-height:var(--lh-snug)}

/* Icone do WhatsApp (verde da marca WhatsApp) no rodape do contato */
.contact-alt .wa-icon{width:16px;height:16px;fill:#25D366;vertical-align:-3px;margin-right:2px}

/* Depoimentos (Mentoria) */
.testim{background:#fff;border:1px solid var(--dust-grey);border-top:3px solid var(--reddish-brown);border-radius:var(--radius-lg);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-5)}
.testim p{margin:0;font-family:var(--font-serif);font-style:italic;font-size:var(--fs-body);color:var(--gunmetal);line-height:var(--lh-normal)}
.testim .t-sign{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim-grey);margin-top:auto}

/* CTA final (sobre fundo claro) — usado pelos stubs/secoes claras */
.cta-final{margin-top:var(--space-16);border-top:1px solid var(--dust-grey);padding-top:var(--space-16);text-align:center}
.cta-final h3{color:var(--gunmetal)}
.cta-final .lede{max-width:54ch;margin:0 auto var(--space-8)}

/* ===== Responsivo (o de hero/about vive em components.css) ===== */
@media (max-width:980px){
	.grid-3{grid-template-columns:1fr}
	.compare,.dimgrid,.differ{grid-template-columns:1fr}
	.formats{grid-template-columns:repeat(2,1fr)}
	.catalog{grid-template-columns:1fr 1fr}
	.problem-flow{grid-template-columns:1fr;gap:var(--space-4)}
	.problem-arrow{transform:rotate(90deg);margin:var(--space-2) auto}
	.trilayer{grid-template-columns:1fr}
}
@media (max-width:680px){
	.formats,.catalog{grid-template-columns:1fr}
	.steps{grid-template-columns:1fr}
	.contact-form{grid-template-columns:1fr}
}