/* ================================
   Base / Reset
================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
a { color: inherit;
   text-decoration: none; }

/* todos os links (a) */
a {
  color: #0055ff;              /* azul forte / agressivo */
  text-decoration: none;       /* sem sublinhado padrão */
  font-weight: 500;            /* ligeiro destaque */
}

/* hover / foco */
.hover-blue:hover,
.hover-blue:focus {
  color: #0033ff;
  transition: letter-spacing 0.25s ease, color 0.25s ease;
}



/* -------------------------------
   Variáveis
-------------------------------- */
:root{
  --container: 1220px;
  --hairline: #e5e5e5;
  --muted: #8b8b8b;
  --softbar: #F3F3F3;
  --tiny: 10px;  /* labels do UI */
  --small: 11px; /* subtítulo da linha */
}

/* ================================
   Fontes — Geist (local)
================================ */
@font-face {
  font-family: "Geist";
  src: local("Geist Regular"), local("Geist-Regular"),
       url("./fonts/Geist-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: local("Geist Bold"), local("Geist-Bold"),
       url("./fonts/Geist-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "erre";
  src: local("erre"), local("Partida"), url("./fonts/partida.ttf") format("truetype");
  font-weight: 100 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "maria";
src: url("./fonts/mariarm.ttf");
  font-style: normal;
  font-weight: 400 700;    /* permite 400 e 700, não um range amplo */
  font-stretch: 0% 400%;        /* mapeia o eixo wdth (IMPORTANTE p/ Safari) */
  font-style: normal;
  font-display: swap;
}

/* Tudo em UPPERCASE quando a família ativa é Maria */
body.allcaps-maria,
body.allcaps-maria * {
  text-transform: uppercase !important;
}

/* Exceções (se quiseres manter inputs/textarea normais) */
body.allcaps-maria input,
body.allcaps-maria textarea {
  text-transform: none !important;
}





@font-face {
  font-family: "helvoni";
  src: url("./fonts/HELVONI-Regular.ttf");
  font-style: normal;
}

@font-face {
  font-family: "pinhais";
src: url("./fonts/rrpinhais.ttf");
  font-style: normal;
}

@font-face {
  font-family: "rune";
  src: url("./fonts/rrran.ttf") format("truetype");
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: "chubby";
  src: url("./fonts/chubby-v3.otf");
  font-style: normal;
}


.erre{
  font-family: "erre";
  margin: 0;
  user-select: none;
  line-height:1.3;
  letter-spacing: -.01em;
font-size: 15vw;
  font-stretch: 0% 500%; /* <- ajusta para o range real da tua fonte */

}

.maria{
  font-family: "maria";
  margin: 0;
  user-select: none;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: -.01em;
font-size: clamp(40px, 20vw, 350px);
  font-stretch: 0%; /* <- ajusta para o range real da tua fonte */

}

.helvoni{
  font-family: "helvoni";
  text-transform: uppercase;
  margin: 0;
  user-select: none;
  line-height:1.4;
  letter-spacing: -.01em;
font-size: clamp(40px, 18vw, 250px);
}

.pinhais{
  font-family: "pinhais";
    text-transform: uppercase;
  margin: 0;
  user-select: none;
  line-height:1.5;
  letter-spacing: -0.1em;
font-size: clamp(40px, 18vw, 250px);
  font-stretch: 0%; /* <- ajusta para o range real da tua fonte */

}

.oakley{
  font-family: "rune";
  margin: 0;
  user-select: none;
  line-height: 1;
  letter-spacing: -.01em;
font-size: clamp(40px, 20vw, 350px);
}

.chubby{
  font-family: "chubby";
  margin: 0;
  user-select: none;
  line-height: .9;
  letter-spacing: -.02em;
  font-size: clamp(100px,28vw, 260px);
}


/*anima os pesos do erre */
.erre.specimen-text{
  font-family: "erre";
  animation: erreWidth 4.4s ease-in-out infinite alternate;
  font-stretch: 0%;
}

@keyframes erreWidth{
  from { font-stretch: 0%; }
  to   { font-stretch: 500%; }
}
/*anima os pesos */


/*anima os pesos do MARIA */

.maria.specimen-text {
  animation: mariaWidth 3.4s ease-in-out infinite alternate;
}

@keyframes mariaWidth {
  from { font-variation-settings: "wdth" 0; }
  to   { font-variation-settings: "wdth" 400; }
}
/*anima os pesos */







/* Aplicação global da fonte */
body{
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Inter, system-ui, Helvetica, Arial, sans-serif;
  color:#111; background:#fff;
  font-synthesis-weight: none; /* evita “fake bold” */
}

/* ================================
   Layout
================================ */
/* container padrão (mantém para header/footer) */
.container{ margin: 0 auto; padding: 0 16px; }

/* NOVO: container em largura total */
.container--fluid{
  max-width: none;      /* remove limite */
  width: 100%;
  margin: 0;
  padding: 0 16px;      /* margem de respiro nas laterais */
}

/* ===== Hover com aumento suave de kerning para todos os links ===== */
/*a {
  transition: letter-spacing 0.25s ease, color 0.25s ease;
}
  */

/*a:hover {
  letter-spacing: 0.28em; /* ajusta a quantidade de espaço entre letras */
/*

/* Hover no(s) link(s) do menu, com mais especificidade que .softbar .shop */
.softbar .inner a {
  transition: letter-spacing .25s ease;
}

.softbar .inner a:hover {
  letter-spacing: 0.28em;  /* ajusta o valor ao gosto */
}



/* grelha dos blocos */
.row{
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 10rem;
  align-items: start;
}

main{
  padding-top: 39px;
}

/* ================================
   Top bar — Liquid Glass branco sujo
================================ */
.softbar{
  position: sticky; top: 0; z-index: 20; padding: 12px 12px; background: transparent;
}

.softbar .inner{
  display:flex; justify-content:space-between; align-items:center;
  width:100%; height:41px; padding:9px 13px; margin:0 auto;
  border-radius:12px;

  /* cor base: o “branco sujo” com transparência */
  background: rgba(243, 243, 243, 0.68);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.45);
  position: relative; overflow: hidden;
}

/* brilho interno do vidro */
.softbar .inner::before{
  content:""; position:absolute; inset:-40% -20% auto -20%; height:160%; border-radius:50%;
  background:
    radial-gradient(120px 60px at 30% 20%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%),
    radial-gradient(200px 120px at 70% -10%, rgba(255,255,255,.25), rgba(255,255,255,0) 60%);
  pointer-events:none; mix-blend-mode: soft-light;
}
.softbar .inner::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60px 40px at var(--x,60%) var(--y,40%), rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
    radial-gradient(120px 80px at calc(var(--x,60%) + 20%) calc(var(--y,40%) + 10%), rgba(255,255,255,.12), rgba(255,255,255,0) 70%);
  filter: blur(2px); pointer-events:none; transition: background-position .2s ease-out;
}

/* texto do menu — CORRETO agora */
.softbar .brand,
.softbar .shop{
  font-family: "Geist", sans-serif;
  font-weight: 700;         /* usa o Geist Bold */
  font-size: var(--tiny);   /* mantém o tamanho original */
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1;
}

/* fallback sem blur */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .softbar .inner{
    background: #F3F3F3;
    border: 1px solid #e7e7e7;
  }
  .softbar .inner::before,
  .softbar .inner::after{ display:none; }
}

/* ================================
   Separadores / Metadados
================================ */
.family{ font-size: var(--small);
  color:#000000;
  margin: 0;
   font-weight: 400; }
.style{  font-size: var(--tiny);  color: var(--muted); margin:0 0 0; }

/* ================================
   Specimen
================================ */
.specimen{
  margin: 0;
  user-select: none;
  line-height: .9;
  letter-spacing: -.01em;
  font-size: clamp(48px, 12vw, 140px);
  font-weight: 700;
}
.thin { font-weight: 400; }
.bold { font-weight: 700; }

.block{
  padding: 19px 0px 0px;
}

/* topo */
.block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.try-btn {
  position: static;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  background: #0047ff;
  color: #fff;
  cursor: pointer;
}


.progress-btn {
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #363636;
  cursor: pointer;
}

.request-btn {
  border: none;
  border-radius: 8px;
  font-size: 13px;
  color: #9c9c9c;
  cursor: pointer;
  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
  cursor: pointer;
}

.request-btn:hover {
  color: #2b00ff;
  transform: rotate(20deg);
}



/* specimen central */
.block-specimen {
  text-align: center;
  margin: 40px 0 10px 0;
}


/* tamanho nome do lado esquerdo */
.family {
  font-size: 16px;
  margin: 0;
}



.tag{
  display: inline-block;       /* mede pela largura do conteúdo */
  background-color: #d0d0d0;
  color: #3e3e3e;                  /* opcional: contraste */
  border-radius: 4px;      /* em vez de stroke */
  padding: 4px 8px;             /* espaço interno */
  line-height: 1;               /* altura mais justa */
  white-space: nowrap;
  align-items: flex-end; 
  font-size: 12px;        /* evita quebrar em 2 linhas (opcional) */
}


/* ================================
   Footer
================================ */
.footer-panel{ background: var(--softbar); border-top: 1px solid var(--hairline); }
.footer-panel .pad{ height: 140px; display: flex; align-items: center; }
.footer-meta{
  display: flex; justify-content: space-between; width: 100%;
  font-size: var(--tiny); text-transform: uppercase; letter-spacing: .06em;
  line-height: 1; font-weight: 700;
}


/* ================================
  STYLES PÁGINAS SPECIMENS
================================ */


:root{
  --max: 1200px; --radius: 16px; --border: #eaeaea; --ink:#0a0a0a; --muted:#666;
  --bg:#fff; --panel:#f7f7f7; --shadow: 0 1px 2px rgba(0,0,0,.06);
  --font: Geist-Regular, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--font);}
a{color:inherit;text-decoration:none}


/* Hero */
.hero{padding-top:0px;padding-bottom:8px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:900px){.hero-grid{grid-template-columns:3fr 1fr}}
.scatter{position:relative;height:550px;border:1px solid var(--border);border-radius:var(--radius);padding:16px;overflow:hidden}
.scatter span{position:absolute;user-select:none;display:block;transform-origin:50% 50%;opacity:0;animation:fadeIn .7s ease forwards}
@keyframes fadeIn{to{opacity:1;transform:scale(1)}}

/* mantém a moldura da .scatter; retira padding se quiseres o vídeo colado às bordas */
.scatter.has-video { padding: 0; }

.scatter .hero-video,
.scatter .hero-embed{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; border-radius: inherit;
}

.scatter .hero-video{
  object-fit: cover;
  background: #000;
}

/* iOS/WebKit: esconder UI nativa (só por precaução) */
video::-webkit-media-controls { display: none !important; }



/* Controls */
section.controls{padding-block:28px}
.panel{border:0px solid var(--border);border-radius:var(--radius);padding:16px;background:#fff}
.grid{display:grid;gap:16px}
@media(min-width:900px){.grid.cols-5{grid-template-columns:2fr 3fr}}
.field{display:flex;flex-direction:column;gap:6px}
input[type="range"],select,textarea,input[type="text"]{width:100%;padding:10px;border-radius:4px;border:0px solid var(--border);background:#fff}
textarea{min-height:88px;resize:vertical}
.specimen{border:1px solid var(--border);border-radius:12px;background:var(--panel);padding:24px;overflow:auto}
pre{margin:0;white-space:pre-wrap;word-wrap:break-word}




/* Gallery */
.gallery{display:grid;gap:10px}
@media(min-width:900px){.gallery{grid-template-columns:repeat(3,1fr)}}
.tile{aspect-ratio:1/1.2;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;align-items:end}
.tile .label{color: white;margin:16px;border-radius:12px;padding:14px}

.label .muted{
  color: white;
}

/* Glyph grid */
.glyphs{margin-top:12px;border:1px solid var(--border);border-radius:16px;background:var(--panel);padding:12px;display:grid;grid-template-columns:repeat(18,1fr);gap:8px}
.glyph{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#fff;border:1px solid var(--border);font-size:28px;transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.glyph:hover{
  transform: scale(3) rotate(360deg);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  z-index: 10;

}

/* Family */
.family1{border:1px solid var(--border);border-radius:16px;padding:24px;background:#fff}
.family-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.family-grid{grid-template-columns:repeat(5,1fr)}}
.card{border:1px solid var(--border);border-radius:14px;padding:16px;background:#fafafa}
.card .sample{font-size:48px;line-height:1;margin-top:10px}

/* Footer */
footer{border-top:1px solid var(--border);margin-top:24px}
.more{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.more{grid-template-columns:repeat(6,1fr)}}
.more a{border:1px solid var(--border);border-radius:12px;padding:12px;display:block}
.muted{color:var(--muted);
margin:0;}



.type-toolbar{ display:flex; gap:28px; align-items:center; flex-wrap:wrap; font-size:14px; color:#111; margin:6px 0 10px; }
.type-toolbar label{ display:flex; align-items:center; gap:10px; }
.type-toolbar input[type="range"]{ width:220px; }
.type-edit{
  background:#ffffff;
  border:0px solid #e7e7e7;
  border-radius:14px;
  padding:28px 24px;
  min-height:520px;
  outline:none;
  cursor:text;
  white-space:pre-wrap;
  word-break:break-word;
  caret-color:#111;
  text-transform: uppercase;

  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  text-align:left;
}
.type-edit:focus{ box-shadow:0 0 0 2px rgba(0,0,0,.05) inset; }

.type-edit.is-centered{
  justify-content:center;
  align-items:center;
  text-align:center;
}

.icon-btn[aria-pressed="true"]{
  border-color:#111;
  box-shadow: inset 0 0 0 1px #111;
}

/* ================================
  TEXT SAMPLES NÃO EDITÁVEIS
================================ */

.specimen-reading-section{
  padding: 32px 16px 56px;
}

.specimen-reading{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* cada lado */
.specimen-reading-side{
  display: grid;
  /*grid-template-columns: 1fr 1fr;*/
  gap: 15px;
  align-items: start;
  min-width: 0;
}

/* cada coluna */
.specimen-reading-col{
  min-width: 0;
  color: #111;

  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;

  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;

  text-wrap: pretty;
}

/* mobile */
@media (max-width: 1100px){
  .specimen-reading{
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 700px){
  .specimen-reading-side{
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.hero-statement-section{
  padding: 30px 16px;
  text-align: LEFT;
}

.hero-statement{
  text-align:center;
}

.hero-statement-word{
  line-height:0.8;
  letter-spacing:-0.03em;
  padding-bottom: 50px;
}

.hero-statement-phrase{
  margin-top:12px;
  letter-spacing:-0.02em;
   
    padding-bottom: 50px;
}

/* ================================
DOWNLOAD TRIAL FINAL FONT
================================ */

.cta-rotating-section{
  width:100%;
  overflow:hidden;
  padding:120px 0;
}

.cta-rotating{
  display:block;
  width:100%;

  text-align:center;
  white-space:nowrap;

  font-family:"Geist", system-ui, sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;

  animation:rotateCTA linear infinite;

  cursor:pointer;
  text-decoration:none;
  color:#111;
}

.cta-rotating:hover{

  color:#000dff;
}

@keyframes rotateCTA{
  from{ transform:rotate(-5deg); }
  to{ transform:rotate(5deg); }
}

/* ================================
  STYLES PÁGINAS SPECIMENS
================================ */

/* -----rgb(38, 0, 255)- Slim sliders (style igual ao screenshot) ---------- */
input[type="range"]{
  -webkit-appearance: none; /* Safari/Chrome */
  appearance: none;
  width: 220px;              /* ajusta se quiseres */
  background: transparent;
  margin: 0;
  padding: 10px 0;           /* espaço vertical para o polegar */
}

/* Track */
input[type="range"]::-webkit-slider-runnable-track{
  height: 2px;
  background: #111;          /* linha preta fininha */
  border-radius: 1px;
}
input[type="range"]::-moz-range-track{
  height: 2px;
  background: #111;
  border-radius: 1px;
}
input[type="range"]::-ms-track{
  height: 2px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper{
  height: 2px;
  background: #111;
  border-radius: 1px;
}

/* Thumb (polegar) */
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #111;    /* aro preto */
  margin-top: -6px;          /* centra no track (14/2 - 2px track) */
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb{
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #111;
  cursor: pointer;
}
input[type="range"]::-ms-thumb{
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #111;
  cursor: pointer;
}

/* Hover/focus states (opcional) */
input[type="range"]:hover::-webkit-slider-thumb{ box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
input[type="range"]:focus{ outline: none; }
input[type="range"]:focus::-webkit-slider-thumb{ box-shadow: 0 0 0 3px rgba(0,0,0,.12); }
input[type="range"]:focus::-moz-range-thumb{ box-shadow: 0 0 0 3px rgba(0,0,0,.12); }

/* Labels ao lado (como na tua barra) */
.type-toolbar{
  display:flex; gap:40px; align-items:center; flex-wrap:wrap;
  font-size:14px;
}
.type-toolbar label{ display:flex; align-items:center; gap:14px; }


/* Estilos das opções de alinhamento de fontes */

/* Esconde o radio mas mantém acessível (clicável via label) */
.vh{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path: inset(50%);
  border:0;
}

/* Layout em linha para os ícones */
.align-group{ display:flex; align-items:center; gap:12px; }
.align-toggle{ display:flex; align-items:center; gap:8px; }

/* Botão de ícone clicável */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:28px;
  border:1px solid #ddd; border-radius:8px;
  background:#fff; cursor:pointer;
  user-select:none;
}
.icon-btn img{ width:18px; height:18px; display:block; pointer-events:none; }

/* Estado selecionado e foco via o input escondido */
.align-toggle input:checked + .icon-btn{
  border-color:#111;
  box-shadow: inset 0 0 0 1px #111;
}
.align-toggle input:focus + .icon-btn{
  outline: 2px solid rgba(0,0,0,.35);
  outline-offset: 2px;
}





/* ================================
   Responsivo
================================ */
@media (max-width: 720px){
  .row{ grid-template-columns: 1fr; }
}

/* esconder Character Overview em mobile */
@media (max-width: 720px){
  .character-overview{ display: none; }
}

/* Paleta da seleção (podes ajustar) */
:root{
  --select-bg: #004cff;   /* azul “agressivo” */
  --select-fg: #ffffff;   /* texto sobre a seleção */
}

/* Seleção global */
::selection{
  background: var(--select-bg);
  color: var(--select-fg);
}
::-moz-selection{ /* Firefox antigo */
  background: var(--select-bg);
  color: var(--select-fg);
}

/* Inputs/textarea (alguns browsers requerem explicitamente) */
input::selection,
textarea::selection{
  background: var(--select-bg);
  color: var(--select-fg);
}

/* (Opcional) no editor dark, um azul com transparência para não “gritar” */
#edPreview[data-bg="dark"] ::selection,
#edPreview.type-edit.dark ::selection{
  background: rgba(0, 76, 255, 0.5);
  color: #fff;
}


/* Wrapper que o ScrollSmoother usa */
#smooth-wrapper {
  height: 100%;
  overflow: hidden;
}

/* Aqui fica o conteúdo que será “suavizado” */
#smooth-content {
  will-change: transform;
}

.iframe-center {
  display: flex;
  justify-content: center;   /* centro horizontal */
  align-items: center;       /* centro vertical */
  min-height: 100vh;
  width: 100%;
  background-color: #0000FF;
}

.doc-frame {
  width: 100%;
  max-width: 1200px;   /* ajuste conforme quiser */
  height: 80vh;
  border: none;
  border-radius: 8px;
  display: block;
}


/* Página específica */
body.page-manifesto {
  background-color: #0000FF;
  color: #FFFFFF;
  font-family: Arial, Helvetica, sans-serif; /* pode trocar pela sua fonte */
}

/* Container principal */
.manifesto-container {
  max-width: 900px;
margin: 0 auto; 
padding-bottom: 15%;
}

.manifesto-title {
font-size: 8rem;
width: 100px;
line-height: 7rem;
}

.manifesto-intro {
font-size: 2rem;
}

.rotate {
  display: inline-block;            /* necessário para transformar */
  animation: spin 12s linear infinite;
  transform-origin: center center;
}

.rotate:hover {
  animation-play-state: paused;
}


/* animação */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


/*cursorrrr 
.cursor-try {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 200;

  background: #0047ff;
  color: white;
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 12px;
  letter-spacing: 0.08em;

  opacity: 0;
  transition: opacity 0.25s ease;
}
*/
.cursor-try {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 200;

  background: #0047ff;
  color: white;
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 50px;
  letter-spacing: 0.08em;

  opacity: 0;
  transition: opacity 0.25s ease;
}


/* SLIDER */


/* ================================
   Slider full width — imagens com peek
================================ */
/* ================================
   Slider full width — center + peek
================================ */
.slider-full{
  width:100%;
  margin:48px 0;
}

.slider{
  position:relative;
  width:100%;
  overflow:hidden;
}

/* viewport corta o excesso */
.slider-viewport{
  width:100%;
  overflow:hidden;
}

/* track com gap e padding para “respirar” */
.slider-track{
  display:flex;
  gap:40px;
  padding:40px;
  transition: transform 0.35s ease;
  will-change: transform;
  align-items:center;
}
.slider-slide{
  margin: 0;            /* IMPORTANTÍSSIMO para <figure> */
  flex: 0 0 70%;
  display:flex;
  justify-content:center;
  align-items:center;
  box-sizing: border-box;
}


/* imagem dentro do slide */
.slider-img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  border-radius:0px;
}

/* mobile: centro maior, lados menos */
@media (max-width: 800px){
  .slider-slide{ flex-basis:85%; }
  .slider-track{ gap:10px; padding:10px; }
}



/* Arrows minimalistas */

.slider-arrow {
  position: absolute;
  padding-bottom: 5px;
  top: 50%;
  transform: translateY(-50%); /* centraliza verticalmente */
  z-index: 10;                 /* fica por cima da imagem */
  font-size: 2rem;
  background: rgba(0,0,0,0.4);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  backdrop-filter: blur(4px);
}

/* seta esquerda */
.slider-arrow--prev {
  left: 10px;
}

/* seta direita */
.slider-arrow--next {
  right: 10px;
}

.slider-arrow:hover{
  background: rgba(17,17,17,0.15);
  transform: translateY(-50%) scale(1.05);
}

/* Mobile */
@media (max-width: 720px){
  .slider-track{
    gap:10px;
    padding:0 14vw;
  }
  .slider-slide{
    width: 70vw;
  }
  .slider-arrow{
    width:30px;
    height:30px;
    font-size:18px;
  }
}


/* Conteúdo para injetar text samples */

.editors-2col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}

.editor-mini{
 border-top:1px solid #eaeaea;
  padding:24px;
  border-radius:0px;
}

.editor-mini .type-toolbar{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.editor-mini .type-edit{
 min-height: 420px;
  padding: 40px;
  font-size: clamp(120px, 14vw, 320px);
  line-height: .9;
  letter-spacing: -0.02em;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
   text-wrap: balance;
}

/* Remover background especificamente dos editores (ed1Preview, ed2Preview, edPreview, etc.) */
[id^="ed"][id$="Preview"] {
  background: transparent !important;
}

.detail {
  font-size: var(--tiny); 
  text-transform: uppercase; 
  letter-spacing: .06em;
  line-height: 1; font-weight: 700;
  color:var(--muted);
  padding-bottom: 20px;

}

.detail-mid {
  font-size: var(--tiny); 
  text-transform: uppercase; 
  letter-spacing: .06em;
  line-height: 1; font-weight: 700;
  color:var(--muted);
  text-align: center;
    padding-bottom: 20px;
}

@media (max-width: 900px){
  .editors-2col{
    grid-template-columns: 1fr;
  }
}


/* ================================
   Page transition
================================ */

:root{
  --transition-blue: rgb(0, 0, 255);
  --transition-duration: 680ms;
}

/* estado inicial da página */
html.is-transitioning body{
  pointer-events: none;
}

/* overlay */
.page-transition{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: transparent; /* removed solid background so only glyph shows */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 420ms ease,
    visibility 0s linear 420ms;
}

.page-transition.is-active{
  opacity: 1;
  visibility: visible;
  transition:
    opacity 420ms ease,
    visibility 0s linear 0s;
}

/* glifo */
.page-transition__glyph{
  font-family: "Geist", system-ui, sans-serif;
  font-size: clamp(72px, 14vw, 220px);
  line-height: 1;
  color: var(--transition-blue);
  display: inline-block;
  transform-origin: 50% 50%;
}

/* quando a transição ativa, o glifo roda */
.page-transition.is-active .page-transition__glyph{
  /* no spin for preloader — glyph is static */
  animation: none;
}

@keyframes pageTransitionSpin{
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ao entrar numa página, faz fade-out da overlay */
html.is-ready .page-transition{
  opacity: 0;
  visibility: hidden;
}

/* opcional: fade suave do conteúdo */
body{
  transition: opacity 240ms ease;
}

html.is-transitioning body{
  opacity: 1;
}