/* ===========================================================
   Estúdio de Marca Cambridge Brasil
   Folha de estilo comum — tokens, tipografia, shell (header/footer)
   Convertida do handoff do Claude Design (design_handoff_estudio_de_marca)
   =========================================================== */

/* ---------- Webfonts de marca ----------
   Fontes licenciadas Cambridge. Ambiente restrito por login/senha. */

/* ---------- Tokens ---------- */
:root{
  /* núcleo */
  --dark-blue:#133844;
  --dark-blue-deep:#0d2934;
  --bright-blue:#00BDB6;
  --bright-blue-hover:#00A6A0;
  --bright-blue-active:#009690;
  --warm-blue:#8EE8D8;
  --light-blue:#D7FDF5;
  --dark-pink:#5E0A4F;
  --warm-pink:#CC59AA;
  --bright-yellow:#FACB2E;
  --warm-yellow:#F9DC4E;

  /* estágios da Jornada / pilares */
  --stage-early:#8128E7;
  --stage-primary:#5465F8;
  --stage-lower:#088A08;
  --stage-upper:#D74120;
  --stage-advanced:#7F091D;
  --stage-prof:#3C1366;

  /* neutros */
  --ink:#133844;
  --ink-muted:#5C6E70;
  --line:#E6EBEB;
  --surface:#F5F7F7;
  --alert:#D74120;

  /* tipografia */
  --font-serif:Georgia,"Times New Roman",serif;
  --font-sans:Arial,"Helvetica Neue",Helvetica,sans-serif;

  /* forma */
  --radius-s:6px;
  --radius-m:8px;
  --radius-l:12px;
  --radius-pill:999px;
  --pad-x:72px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:var(--font-sans);
  min-width:0;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--bright-blue-hover);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--ink)}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--font-serif);font-weight:700;margin:0}
p{margin:0}

/* ---------- Header ---------- */
.site-header{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px 40px;border-bottom:1px solid var(--line);background:#fff;
  position:sticky;top:0;z-index:50;
}
.site-header .brand{display:flex;align-items:center;gap:14px;flex:none}
.site-header .brand img{height:40px;display:block}
.site-header .brand .divider{width:1px;height:30px;background:var(--line)}
.site-header .brand .label{font:700 14px/1.25 var(--font-sans);color:var(--ink);white-space:nowrap;display:flex;flex-direction:column;gap:2px}
.site-header .brand .label .l1{font-weight:400;color:var(--ink-muted);font-size:12.5px}
.site-header .brand .label .l2{font-weight:700;color:var(--ink)}
.site-nav{display:flex;align-items:center;gap:18px;font:400 13px/1 var(--font-sans);white-space:nowrap}
.site-nav a{color:var(--ink-muted);padding-bottom:6px;border-bottom:3px solid transparent}
.site-nav a:hover{color:var(--ink)}
.site-nav a.is-active{color:var(--ink);font-weight:700;border-bottom-color:var(--bright-blue)}

/* ---------- Botões ---------- */
.btn{
  font-family:var(--font-sans);font-weight:700;
  border:1px solid transparent;border-radius:var(--radius-pill);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  white-space:nowrap;text-decoration:none;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .1s ease;
}
.btn--small{padding:8px 16px;font-size:14px}
.btn--medium{padding:12px 22px;font-size:16px}
.btn--large{padding:16px 28px;font-size:18px}
.btn--primary{background:var(--bright-blue);color:#fff}
.btn--primary:hover{background:var(--bright-blue-hover);color:#fff}
.btn--primary:active{background:var(--bright-blue-active);transform:scale(.98)}
.btn--secondary{background:transparent;color:var(--bright-blue);border-color:var(--bright-blue)}
.btn--secondary:hover{background:var(--surface);color:var(--bright-blue)}
.btn--ghost{background:transparent;color:currentColor}
.btn--ghost:hover{background:rgba(127,127,127,.12)}

/* link de texto forte (ao lado de CTA primário em fundo escuro) */
.link-strong{font:700 16px/1 var(--font-sans);color:#fff}
.link-strong:hover{color:var(--warm-blue)}

/* ---------- Rodapé ---------- */
.site-footer{background:var(--dark-blue);color:#fff;padding:56px var(--pad-x);display:flex;align-items:flex-start;justify-content:space-between;gap:48px}
.site-footer--slim{padding:40px var(--pad-x);align-items:center}
.site-footer .f-brand{display:flex;flex-direction:column;gap:20px}
.site-footer .f-brand img{height:40px;filter:brightness(0) invert(1);align-self:flex-start}
.site-footer--slim .f-brand{flex-direction:row;align-items:center;gap:20px}
.site-footer--slim .f-brand img{height:32px}
.site-footer .tagline{font:700 22px/1.2 var(--font-serif)}
.site-footer--slim .tagline{font-size:18px}
.site-footer .f-note{font:400 14px/1.5 var(--font-sans);color:var(--warm-blue);max-width:44em}
.site-footer .f-cols{display:flex;gap:64px;font:400 15px/2 var(--font-sans)}
.site-footer .f-cols > div{display:flex;flex-direction:column}
.site-footer .f-cols .f-title{font-weight:700;margin-bottom:8px}
.site-footer .f-cols a{color:var(--warm-blue)}
.site-footer .f-cols a:hover{color:#fff}

/* ---------- Utilitários de seção ---------- */
.section{padding:88px var(--pad-x)}
.section--tight{padding:80px var(--pad-x)}
.section--surface{background:var(--surface)}
.eyebrow{font:700 14px/1 var(--font-sans);letter-spacing:.04em;color:var(--bright-blue-hover)}
.eyebrow--on-dark{color:var(--bright-blue)}
.pretty{text-wrap:pretty}

/* ---------- Shield frame ----------
   Moldura de 3 cores sempre visível; a foto preenche apenas o miolo interno.
   A borda é composta por 3 cópias do path do escudo, cada uma recortada
   por um clipPath (metade esquerda / metade direita / faixa inferior). */
.shield{position:relative;display:block}
.shield svg{width:100%;height:auto;display:block}
.shield img{position:absolute;object-fit:cover}


/* ===========================================================
   RESPONSIVO
   O estúdio é desktop-first — é onde o trabalho acontece —
   mas precisa ser legível no celular. As classes r-* abaixo
   são aplicadas nas grades das telas; abaixo do ponto de
   quebra elas empilham ou reduzem colunas.
   =========================================================== */

/* respiro lateral proporcional à tela */
@media (max-width:1180px){ :root{--pad-x:44px} }
@media (max-width:760px) { :root{--pad-x:24px} }
@media (max-width:480px) { :root{--pad-x:18px} }

/* --- grades --- */
@media (max-width:1000px){
  .r-stack{grid-template-columns:1fr !important}
  .r-3col{grid-template-columns:repeat(2,1fr) !important}
  .r-5col{grid-template-columns:repeat(3,1fr) !important}
  .r-4col{grid-template-columns:repeat(2,1fr) !important}
}
@media (max-width:680px){
  .r-2col,.r-3col,.r-4col,.r-5col{grid-template-columns:1fr !important}
}

/* --- faixas "texto + botão": empilham em vez de espremer o texto --- */
@media (max-width:820px){
  .r-faixa{flex-direction:column;align-items:flex-start !important;gap:18px !important}
  .r-faixa > *{width:auto}
  .r-faixa > div:first-child{min-width:0}
}

/* --- blocos "título à esquerda, apoio à direita" --- */
@media (max-width:1000px){
  .r-cabecalho{flex-direction:column;align-items:flex-start !important;gap:16px !important}
  .r-cabecalho > div:last-child{max-width:none !important;text-align:left !important}
}

/* --- header --- */
@media (max-width:1180px){
  .site-header{padding:14px 24px;gap:16px}
  .site-nav{gap:14px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .site-nav::-webkit-scrollbar{display:none}
}
@media (max-width:820px){
  .site-header{position:static;flex-direction:column;align-items:flex-start;gap:12px;padding:14px var(--pad-x)}
  .site-header .brand img{height:32px}
  .site-nav{width:100%;padding-bottom:4px}
  .site-nav a{padding-bottom:8px}
}

/* --- rodapé --- */
@media (max-width:880px){
  .site-footer{flex-direction:column;align-items:flex-start;gap:28px}
  .site-footer--slim{align-items:flex-start}
  .site-footer--slim .f-brand{flex-direction:row;align-items:center}
  .site-footer .f-cols{gap:36px;flex-wrap:wrap}
}

/* --- tipografia grande encolhe --- */
@media (max-width:1000px){
  .r-h1{font-size:clamp(28px,4.2vw,40px) !important}
  .r-h2{font-size:clamp(25px,3.6vw,38px) !important}
}

/* --- escudo com foto: a moldura escala sozinha (a foto vive dentro do SVG),
       mas o contêiner precisa deixar de ter largura fixa --- */
@media (max-width:1000px){
  .shield--fluido{width:min(340px,60vw) !important}
}

/* --- nada estoura a largura da tela --- */
img,video,iframe{max-width:100%}

/* Campos de formulário têm largura intrínseca própria (o navegador reserva
   ~20 caracteres). Dentro de grid ou flex isso empurra o contêiner para
   além da tela, porque o mínimo padrão desses itens é o conteúdo. */
input,select,textarea,button{max-width:100%;min-width:0}

/* Mesma razão, para os contêineres */
.r-stack > *,.r-2col > *,.r-3col > *,.r-4col > *,.r-5col > *{min-width:0}

/* E-mails e URLs longos quebram em vez de esticar a página */
body{overflow-wrap:break-word}
a[href^="mailto:"],.quebra-tudo{overflow-wrap:anywhere}

/* ===========================================================
   Submenu de página (.subnav)
   -----------------------------------------------------------
   Antes duplicado inline em galeria, templates e sobre-cambridge;
   mensagens.html ficou sem, o que deixava o submenu sem estilo.
   Centralizado aqui para valer em todas as telas.
   =========================================================== */
.subnav{position:sticky;top:73px;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);padding:0 var(--pad-x);display:flex;align-items:center;gap:26px;height:52px;font:400 14px/1 var(--font-sans)}
.subnav a{color:var(--ink-muted);padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.subnav a:hover{color:var(--ink)}
.subnav a.is-here{color:var(--ink);font-weight:700;border-bottom-color:var(--bright-blue)}
.subnav .rot{font:700 12px/1 var(--font-sans);letter-spacing:.04em;color:var(--bright-blue-hover);flex:none}
section[id],.ancora[id]{scroll-margin-top:132px}
@media (max-width:1180px){.subnav{overflow-x:auto;scrollbar-width:none;gap:20px}.subnav::-webkit-scrollbar{display:none}}
@media (max-width:820px){.subnav{position:static;height:auto;padding:12px var(--pad-x)}.subnav .rot{display:none}section[id],.ancora[id]{scroll-margin-top:16px}}

/* v4.9 – em celulares estreitos, a assinatura do cabeçalho estourava ~16px */
@media (max-width:420px){
  .site-header .brand{gap:10px}
  .site-header .brand img{height:27px}
  .site-header .brand .divider{height:24px}
  .site-header .brand .label{font-size:12.5px}
}

/* v5.0 – rodapé único em todas as telas */
.site-footer .f-copy{font:400 13px/1.5 var(--font-sans);color:var(--warm-blue);text-align:right}
@media (max-width:820px){.site-footer--slim{flex-direction:column;align-items:flex-start;gap:20px}.site-footer .f-copy{text-align:left}}

/* ---------- Cambridge Pathway: horizontal no desktop, vertical no celular ---------- */
.pathway-img{display:block}
@media (max-width:700px){
  .pathway-img img{min-width:0 !important;width:100% !important;max-width:420px !important;margin:0 auto}
}

/* ---------- menus com rolagem lateral: indicação discreta de que há mais itens ---------- */
.tem-rolagem::after{
  content:"›";position:sticky;right:0;flex:none;align-self:stretch;
  display:flex;align-items:center;justify-content:flex-end;
  width:38px;margin-left:calc(-38px - var(--g,14px));padding-right:2px;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff 65%);
  color:var(--bright-blue-hover);font:700 22px/1 var(--font-sans);
  pointer-events:none;transition:opacity .2s ease;
}
.tem-rolagem.no-fim::after{opacity:0}
.tem-rolagem::before{
  content:"‹";position:sticky;left:0;z-index:1;flex:none;align-self:stretch;
  display:flex;align-items:center;justify-content:flex-start;
  width:38px;margin-right:calc(-38px - var(--g,14px));padding-left:2px;
  background:linear-gradient(270deg,rgba(255,255,255,0),#fff 65%);
  color:var(--bright-blue-hover);font:700 22px/1 var(--font-sans);
  pointer-events:none;transition:opacity .2s ease;
}
.tem-rolagem.no-inicio::before{opacity:0}
.site-nav{--g:14px}.subnav{--g:20px}