/* Oásis — tokens do design system + estilos globais */
@font-face{font-family:"Instrument Serif";src:url("/fonts/InstrumentSerif-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("/fonts/InstrumentSerif-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/fonts/InstrumentSans-Variable.ttf") format("truetype");font-weight:400 700;font-stretch:75% 100%;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/fonts/InstrumentSans-Italic-Variable.ttf") format("truetype");font-weight:400 700;font-stretch:75% 100%;font-style:italic;font-display:swap}
@font-face{font-family:"Citta Novela Text";src:url("/fonts/CittaNovelaText-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}

:root{
/* Base palette — Paleta Oásis (8 official colours) */
--oasis-brasa:#E63001;   /* ember red */
--oasis-mata:#262D01;    /* deep forest */
--oasis-musgo:#52582A;   /* moss */
--oasis-areia:#F9F1E4;   /* sand / paper */
--oasis-salvia:#C3C49C;  /* sage */
--oasis-terra:#682014;   /* earth / oxblood */
--oasis-nevoa:#A9BCC3;   /* mist blue */
--oasis-sol:#FFC130;     /* sun */

/* Derived tints/shades (oklch mixes of the palette only) */
--oasis-areia-deep:color-mix(in oklch,var(--oasis-areia) 88%,var(--oasis-salvia));
--oasis-salvia-soft:color-mix(in oklch,var(--oasis-salvia) 45%,var(--oasis-areia));
--oasis-nevoa-soft:color-mix(in oklch,var(--oasis-nevoa) 40%,var(--oasis-areia));
--oasis-sol-soft:color-mix(in oklch,var(--oasis-sol) 35%,var(--oasis-areia));
--oasis-brasa-deep:color-mix(in oklch,var(--oasis-brasa) 80%,var(--oasis-terra));
--oasis-mata-2:color-mix(in oklch,var(--oasis-mata) 82%,var(--oasis-musgo));
--oasis-mata-deep:color-mix(in oklch,var(--oasis-mata) 72%,#000); /* rodapé, emenda com a textura da Aplicação */

/* Semantic — surfaces */
--surface-page:var(--oasis-areia);
--surface-card:#FFFBF4;
--surface-sunken:var(--oasis-areia-deep);
--surface-inverse:var(--oasis-mata);
--surface-earth:var(--oasis-terra);
--surface-moss:var(--oasis-musgo);
--surface-overlay:color-mix(in oklch,var(--oasis-mata) 55%,transparent);

/* Semantic — text */
--fg-1:var(--oasis-mata);          /* primary ink on light */
--fg-2:var(--oasis-musgo);         /* secondary ink */
--fg-3:color-mix(in oklch,var(--oasis-musgo) 72%,var(--oasis-areia)); /* hints, captions (large only) */
--fg-accent:var(--oasis-terra);    /* warm emphasis ink */
--fg-on-dark:var(--oasis-areia);
--fg-on-dark-2:var(--oasis-salvia);
--text-body:var(--fg-1);
--text-heading:var(--fg-1);
--text-link:var(--oasis-terra);
--text-link-hover:var(--oasis-brasa);

/* Semantic — action */
--action-primary:var(--oasis-brasa);
--action-primary-hover:var(--oasis-brasa-deep);
--action-primary-fg:var(--oasis-areia);
--action-secondary:var(--oasis-mata);
--action-secondary-hover:var(--oasis-mata-2);
--action-secondary-fg:var(--oasis-areia);
--focus-ring:var(--oasis-sol);

/* Semantic — lines */
--border-1:color-mix(in oklch,var(--oasis-musgo) 22%,transparent);
--border-2:color-mix(in oklch,var(--oasis-musgo) 45%,transparent);
--border-strong:var(--oasis-mata);
--border-on-dark:color-mix(in oklch,var(--oasis-areia) 28%,transparent);

/* Semantic — status (drawn from palette) */
--status-success:var(--oasis-musgo);
--status-success-bg:var(--oasis-salvia-soft);
--status-warning:var(--oasis-terra);
--status-warning-bg:var(--oasis-sol-soft);
--status-danger:var(--oasis-brasa);
--status-danger-bg:color-mix(in oklch,var(--oasis-brasa) 14%,var(--oasis-areia));
--status-info:var(--oasis-mata);
--status-info-bg:var(--oasis-nevoa-soft);
}

:root{
--font-display:"Instrument Serif","Times New Roman",serif;
--font-text-serif:"Citta Novela Text","Instrument Serif",Georgia,serif;
--font-sans:"Instrument Sans","Helvetica Neue",Helvetica,sans-serif;

/* Type scale */
--fs-display-xl:clamp(64px,9vw,128px); /* @kind font */
--fs-display-l:72px;
--fs-display-m:56px;
--fs-h1:44px;
--fs-h2:34px;
--fs-h3:26px;
--fs-h4:20px;
--fs-lead:21px;
--fs-body:17px;
--fs-small:15px;
--fs-caption:13px;
--fs-eyebrow:12px;

--lh-display:0.95; /* @kind font */
--lh-heading:1.08; /* @kind font */
--lh-body:1.55; /* @kind font */
--lh-tight:1.25; /* @kind font */

--ls-display:-0.02em; /* @kind font */
--ls-heading:-0.01em; /* @kind font */
--ls-body:0; /* @kind font */
--ls-eyebrow:0.16em; /* @kind font */

--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */

/* Semantic roles */
--type-display:400 var(--fs-display-l)/var(--lh-display) var(--font-display);
--type-heading:400 var(--fs-h2)/var(--lh-heading) var(--font-display);
--type-body:400 var(--fs-body)/var(--lh-body) var(--font-sans);
--type-editorial:400 var(--fs-lead)/1.5 var(--font-text-serif);
--type-label:500 var(--fs-small)/1.2 var(--font-sans);
}

:root{
--space-0:0;
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--space-7:48px;
--space-8:64px;
--space-9:96px;
--space-10:144px;

--radius-0:0;
--radius-1:2px;
--radius-2:6px;
--radius-3:14px;
--radius-pill:999px;
--radius-arch:999px 999px 0 0; /* arch/portal crop for imagery */

--border-w:1px; /* @kind spacing */
--border-w-strong:1.5px; /* @kind spacing */

--shadow-0:none;
--shadow-1:0 1px 2px color-mix(in oklch,var(--oasis-mata) 10%,transparent);
--shadow-2:0 8px 24px -8px color-mix(in oklch,var(--oasis-mata) 22%,transparent);
--shadow-3:0 24px 60px -20px color-mix(in oklch,var(--oasis-mata) 38%,transparent);

--ease-calm:cubic-bezier(.22,.61,.36,1); /* @kind other */
--ease-tide:cubic-bezier(.65,0,.35,1); /* @kind other */
--dur-1:140ms; /* @kind other */
--dur-2:260ms; /* @kind other */
--dur-3:600ms; /* @kind other */
--dur-4:1200ms; /* @kind other */

--container:1200px; /* @kind spacing */
--gutter:clamp(20px,4vw,56px); /* @kind spacing */

--grain-opacity:.18; /* @kind other */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--oasis-areia);color:var(--fg-1);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:var(--text-link)} a:hover{color:var(--text-link-hover)}
img{max-width:100%}
em{font-style:italic}
.no-scrollbar{scrollbar-width:none}
.no-scrollbar::-webkit-scrollbar{display:none}

/* Botão (Oásis Button) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:var(--radius-pill);border:var(--border-w-strong) solid transparent;font-family:var(--font-sans);font-weight:500;line-height:1;letter-spacing:.01em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background var(--dur-2) var(--ease-calm),transform var(--dur-1) var(--ease-calm)}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:3px solid color-mix(in oklch,var(--focus-ring) 45%,transparent);outline-offset:2px}
.btn-primary{background:var(--action-primary);color:var(--action-primary-fg)}
.btn-primary:hover{background:var(--action-primary-hover);color:var(--action-primary-fg)}
.btn-sm{height:36px;padding:0 16px;font-size:14px}
.btn-lg{height:56px;padding:0 30px;font-size:17px}
@media (max-width:420px){.btn-lg{white-space:normal;text-align:center;height:auto;min-height:56px;padding:14px 24px}}

/* Botão de ícone (setas do carrossel) */
.icon-btn{width:44px;height:44px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;transition:background var(--dur-2) var(--ease-calm)}
.icon-btn-outline{background:transparent;color:var(--fg-1);border:1px solid var(--border-2)}
.icon-btn-outline:hover{background:color-mix(in oklch,var(--oasis-mata) 8%,transparent)}
.icon-btn-solid{background:var(--oasis-mata);color:var(--oasis-areia);border:1px solid transparent}
.icon-btn-solid:hover{background:var(--oasis-mata-2)}

/* Círculos dos 3 pilares */
.pilar-circle{transition:transform 600ms var(--ease-calm)}
.pilar-circle:hover{transform:scale(1.03)}

/* Manifesto: foto fixa ao lado do texto só no desktop (2 colunas); no mobile fica estática */
.manifesto-foto{position:sticky;top:96px}
@media (max-width:880px){.manifesto-foto{position:static}}

/* O que vamos trabalhar: 5 colunas lado a lado no desktop; empilhado (sem rolagem lateral) no mobile */
.trabalhar-track{gap:16px;grid-auto-flow:column;grid-auto-columns:minmax(136px,1fr);overflow-x:auto;scroll-snap-type:x mandatory}
@media (max-width:880px){.trabalhar-track{grid-auto-flow:row;grid-auto-columns:auto;overflow-x:visible;scroll-snap-type:none;gap:40px}}

/* Manifesto: no mobile mostra só o começo do texto e o resto abre no "+" */
.manifesto-mais{display:contents}
.manifesto-toggle{display:none}
@media (max-width:880px){
  .manifesto-mais{display:none;flex-direction:column;gap:24px}
  .manifesto-mais.is-open{display:flex}
  .manifesto-toggle{display:inline-flex;align-items:center;gap:14px;align-self:flex-start;padding:0;background:none;border:0;cursor:pointer;font-family:var(--font-sans);font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--oasis-areia)}
  .manifesto-toggle-icon{width:44px;height:44px;border-radius:var(--radius-pill);border:1px solid var(--border-on-dark);display:inline-flex;align-items:center;justify-content:center;font-size:24px;font-weight:300;line-height:1;transition:transform var(--dur-2) var(--ease-calm)}
  .manifesto-toggle[aria-expanded="true"] .manifesto-toggle-icon{transform:rotate(45deg)}
  .manifesto-toggle:focus-visible{outline:3px solid color-mix(in oklch,var(--focus-ring) 45%,transparent);outline-offset:4px;border-radius:var(--radius-pill)}
}

/* Construir junto (mobile): mosaico em 4 linhas, fotos inteiras sem corte.
   Desktop segue com o grid inline aprovado. Larguras proporcionais ao formato de cada foto,
   assim as fotos de uma mesma linha têm a mesma altura. */
@media (max-width:600px){
  .junto-mosaico{display:flex !important;flex-wrap:wrap;gap:8px !important}
  .junto-mosaico img{height:auto !important;flex:none}
  .junto-mosaico img[src$="junto-g.jpg"]{order:1;width:calc((100% - 8px) * .5354) !important;aspect-ratio:590/600}
  .junto-mosaico img[src$="junto-c.jpg"]{order:2;width:calc((100% - 8px) * .4646) !important;aspect-ratio:722/846}
  .junto-mosaico img[src$="junto-a.jpg"]{order:3;width:calc((100% - 8px) * .5) !important;aspect-ratio:563/1000}
  .junto-mosaico img[src$="junto-e.jpg"]{order:4;width:calc((100% - 8px) * .5) !important;aspect-ratio:563/1000}
  .junto-mosaico img[src$="junto-b.jpg"]{order:5;width:100% !important;aspect-ratio:980/600}
  .junto-mosaico img[src$="junto-f.jpg"]{order:6;width:calc((100% - 8px) * .4485) !important;aspect-ratio:610/1000}
  .junto-mosaico img[src$="junto-d.jpg"]{order:7;width:calc((100% - 8px) * .5515) !important;aspect-ratio:750/1000}
}

/* Gente que já construiu: mosaico de retratos quadrados, 5 colunas no desktop e 3 no mobile */
.gente-mosaico{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.2vw,16px)}
.gente-mosaico img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-2)}
@media (max-width:600px){
  .gente-mosaico{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
}