/* =====================================================================
   base.css · Dr. Fabio Salomão
   Fontes, reset, hierarquia tipográfica, primitivas de layout,
   botões, tags, reveal, placeholder de foto, acessibilidade.
   ===================================================================== */

/* --- Fontes self-hosted (zero CDN) --- */
@font-face{
  font-family:'Questrial';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/questrial-400.woff2') format('woff2');
}
@font-face{
  font-family:'Roboto';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/fonts/roboto-var.woff2') format('woff2');
}

/* --- Reset --- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--grafite);
  background:var(--marfim);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.6;
  font-size:17px;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font-family:inherit}
ul[class],ol[class]{list-style:none}

:focus-visible{outline:2px solid var(--azul-profundo);outline-offset:3px;border-radius:4px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--azul-profundo);color:var(--marfim);padding:12px 20px;border-radius:0 0 var(--radius-field) 0;font-weight:600}
.skip-link:focus{left:0}

/* Rótulo/heading só para leitores de tela */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --- Layout --- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
section.block{position:relative;padding:120px 0}
main{display:block}

/* --- Hierarquia tipográfica (escalas do briefing: desktop/tablet/mobile) ---
   Questrial só existe em 400: hierarquia por tamanho e tracking, nunca bold. */
h1,h2,h3,.h1,.h2,.h3{font-family:var(--font-display);font-weight:400;color:var(--azul-profundo)}
h1,.h1{font-size:clamp(34px,5vw,64px);line-height:1.05;letter-spacing:-.02em}
h2,.h2{font-size:clamp(28px,3.4vw,44px);line-height:1.12;letter-spacing:-.015em}
h3,.h3{font-size:clamp(21px,2vw,28px);line-height:1.2;letter-spacing:-.01em}
.sec-title{font-size:clamp(30px,3.6vw,46px);line-height:1.12;letter-spacing:-.015em}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--grafite)}
p{font-size:clamp(16px,1.1vw,18px);line-height:1.6}
.small{font-size:clamp(14px,1vw,16px)}

/* --- Cabeçalho de seção --- */
.sec-head{margin-bottom:54px}
.sec-head h2{max-width:18ch}
.sec-head p{margin-top:18px;max-width:56ch}
.sec-tag{display:inline-block;font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--azul-profundo);background:var(--marfim);border:1px solid var(--areia-escuro-01);padding:8px 14px;border-radius:var(--radius-pill);margin-bottom:18px}

/* --- Tags de domínio (pills) --- */
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tag{font-size:13px;font-weight:500;color:var(--azul-profundo);background:var(--areia);border:1px solid var(--areia-escuro-01);padding:8px 15px;border-radius:var(--radius-pill)}

/* --- Botões (hover máx 2px, briefing) --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-body);font-weight:700;font-size:15px;padding:14px 26px;border-radius:var(--radius-pill);cursor:pointer;border:1.5px solid transparent;min-height:44px;transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),box-shadow .4s var(--ease);will-change:transform}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--azul-profundo);color:var(--marfim);box-shadow:var(--shadow-btn)}
.btn-primary:hover{background:var(--azul-escuro-01);box-shadow:var(--shadow-btn-hover)}
.btn-outline{background:transparent;color:var(--azul-profundo);border-color:var(--azul-profundo)}
.btn-outline:hover{background:var(--azul-profundo);color:var(--marfim)}
.btn-light{background:var(--marfim);color:var(--azul-profundo)}
.btn-light:hover{background:var(--nevoa)}
.btn:disabled{opacity:.65;cursor:not-allowed;transform:none;box-shadow:none}

/* --- Reveal on scroll (barato: roda também no mobile) ---
   Gated por html.js: sem JS (ou com erro de script), todo conteúdo fica visível. --- */
.js .reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}

/* imagem que se revela com máscara + zoom-out */
.img-reveal{position:relative;overflow:hidden;border-radius:var(--radius-img)}
.js .img-reveal .ph{transform:scale(1.18);transition:transform 1.4s var(--ease)}
.js .img-reveal.in .ph{transform:scale(1)}
.js .img-reveal::after{content:"";position:absolute;inset:0;background:var(--areia);transform:translateY(0);transition:transform 1.2s var(--ease);z-index:2}
.js .img-reveal.in::after{transform:translateY(-101%)}

/* --- Placeholder de foto (troca trivial: substituir .media-ph por <img>) --- */
.media-ph{width:100%;height:100%;min-height:280px;background:linear-gradient(150deg,var(--azul-claro-02),var(--nevoa) 55%,var(--areia));display:flex;align-items:center;justify-content:center;position:relative;border-radius:inherit}
.media-ph .lbl{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--azul-profundo);background:rgba(251,250,247,.78);padding:9px 16px;border-radius:var(--radius-pill);position:relative;z-index:3;text-align:center;max-width:80%}
.media-ph .sym{position:absolute;color:var(--azul-profundo);opacity:.12;width:120px;height:120px}

/* --- Separadores --- */
.hairline{border:0;border-top:1px solid var(--marfim-escuro-01);opacity:.7}

/* --- Formulários (primitivas) --- */
.field{width:100%;font-family:var(--font-body);font-size:15px;padding:14px 18px;border:1px solid var(--marfim-escuro-01);border-radius:var(--radius-pill);background:var(--marfim-claro-02);color:var(--grafite);transition:border-color .3s,box-shadow .3s}
.field::placeholder{color:var(--marfim-escuro-03)}
.field:focus{outline:none;border-color:var(--azul-profundo);box-shadow:var(--focus-ring)}
textarea.field{border-radius:var(--radius-tag);min-height:140px;resize:vertical}
.form-msg{font-size:14px;margin-top:14px;min-height:18px;border-radius:var(--radius-tag);line-height:1.4}
.form-msg.err{color:var(--erro-texto);background:var(--erro-fundo);padding:10px 14px}
.form-msg.ok{color:var(--azul-profundo);background:var(--nevoa);padding:12px 16px;font-weight:600}
.check{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--grafite);cursor:pointer;line-height:1.45}
.check input{margin-top:3px;width:17px;height:17px;accent-color:var(--azul-profundo);flex:none}

/* --- Responsivo base --- */
@media (max-width:980px){
  section.block{padding:96px 0}
}
@media (max-width:560px){
  .wrap{padding:0 var(--gutter-m)}
  section.block{padding:80px 0}
}

/* --- Acessibilidade: reduced motion mata TODA animação --- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .img-reveal::after{display:none}
  .img-reveal .ph{transform:none!important;transition:none!important}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}