/* Pináculo Sites, base.css
 * Reset, tipografia, larguras, acessibilidade. Depende de tokens.css.
 */

*,*::before,*::after{box-sizing:border-box}

html,body{
  /* hidden primeiro como fallback, clip depois: hidden sozinho ainda deixa
   * o código rolar a página lateralmente, e um link de âncora deixa a
   * página inteira deslocada. */
  overflow-x:hidden;
  overflow-x:clip;
}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--canvas);
  color:var(--texto);
  font-family:var(--f-corpo);
  font-size:var(--t-base);
  line-height:var(--lh-corpo);
  font-synthesis-weight:none;     /* nada de peso falso */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,video,svg,canvas{display:block;max-width:100%;height:auto}
img{background:var(--canvas-2)}   /* evita flash branco antes de carregar */

h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

/* ------------------------------------------------------- tipografia */

.display{
  font-family:var(--f-display);
  line-height:var(--lh-display);
  letter-spacing:var(--tr-display);
  color:var(--texto-forte);
  text-wrap:balance;             /* sem viúva na segunda linha */
}
.t-4xl{font-size:var(--t-4xl)}
.t-3xl{font-size:var(--t-3xl)}
.t-2xl{font-size:var(--t-2xl)}
.t-xl{font-size:var(--t-xl);line-height:var(--lh-titulo);letter-spacing:var(--tr-titulo)}
.t-lg{font-size:var(--t-lg);line-height:var(--lh-titulo);letter-spacing:var(--tr-titulo)}
.t-md{font-size:var(--t-md)}
.t-sm{font-size:var(--t-sm)}
.t-xs{font-size:var(--t-xs)}

.kicker{
  font-family:var(--f-mono);
  font-size:var(--t-xs);
  text-transform:uppercase;
  letter-spacing:var(--tr-caixa);   /* caixa alta SEMPRE com tracking */
  color:var(--texto-2);
}

/* a medida vai NO elemento de texto: ch resolve contra a fonte herdada,
 * então um limite em ch no container é medido na fonte errada. */
.prosa{max-width:var(--medida)}
.prosa + .prosa{margin-top:var(--e-3)}

.num{font-variant-numeric:tabular-nums}
.baseline{display:flex;align-items:baseline;gap:var(--e-2)}

/* ------------------------------------------------------- seções e larguras */

.secao{position:relative;padding-block:var(--e-16)}
.secao--ar-colado{padding-block-start:0}
.secao--ar-dobrado{padding-block:var(--e-24)}
.secao--alt{background:var(--canvas-2)}

.secao > .interno{width:var(--larg-normal);margin-inline:auto}
.secao--estreita > .interno{width:var(--larg-estreita)}
.secao--larga > .interno{width:var(--larg-larga)}
.secao--sangra > .interno{width:100%}

@media (max-width:720px){
  .secao{padding-block:var(--e-12)}
  .secao--ar-dobrado{padding-block:var(--e-16)}
}

/* ------------------------------------------------------- botões */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e-1);
  padding:14px var(--e-3);
  border-radius:var(--raio);
  font-size:var(--t-sm);font-weight:600;
  letter-spacing:.01em;
  text-shadow:none;                 /* sombra em botão lê como sujeira */
  transition:background var(--d-rapido) var(--ease-estado),
             transform var(--d-rapido) var(--ease-estado),
             border-color var(--d-rapido) var(--ease-estado);
}
.btn--acento{background:var(--acento);color:#fff}
.btn--acento:hover{background:var(--acento-hover);transform:translateY(-1px)}
.btn--linha{border:1px solid var(--linha-forte);color:var(--texto-forte)}
.btn--linha:hover{border-color:var(--texto-forte);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

/* 44px de alvo em ponteiro grosso, sem mudar layout. Redeclarar o
 * alinhamento é obrigatório: um inline-flex solto alinha o rótulo à
 * esquerda e encolhe a fileira para o tamanho do texto. */
@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* ------------------------------------------------------- acessibilidade */

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

.sc-sr,.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:var(--e-2);top:-100px;z-index:999;
  padding:12px var(--e-2);background:var(--acento);color:#fff;
  border-radius:var(--raio);
  transition:top var(--d-rapido) var(--ease-saida);
}
.skip:focus{top:var(--e-2)}

/* ------------------------------------------------------- utilidades */

.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;
  background:rgba(8,8,15,.55);
  border:1px solid rgba(96,96,126,.30);
  border-radius:var(--raio);
  backdrop-filter:blur(10px);
  font-family:var(--f-mono);font-size:var(--t-xs);
  text-shadow:0 1px 3px rgba(5,5,10,.85);
}

.divisor{height:1px;background:var(--linha);border:0;margin:0}

/* o ambiente único: uma camada fixa atrás de tudo, no mundo do material */
.ambiente{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, var(--acento-sussurro), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 85%, rgba(255,255,255,.03), transparent 60%);
  animation:ambiente-deriva 72s var(--ease-estado) infinite alternate;
  animation-delay:-18s;         /* já no meio do ciclo no primeiro paint */
}
@keyframes ambiente-deriva{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-2%,1.5%,0) scale(1.06)}
}

/* seções longas abaixo da dobra não custam render até chegar perto */
.secao--diferida{content-visibility:auto;contain-intrinsic-size:auto 800px}