/* Sollare Energia Solar. Palette, type and motion all derive from the mark:
   gold sun, green wave, navy panel wave. */

@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/outfit-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/outfit-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/sourcesans3-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/sourcesans3-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}


:root{
  color-scheme: light dark;

  --paper:#ffffff;
  --paper-2:#f4f5f2;
  --ink:#24223a;
  --ink-2:#565471;
  --rule:#dedce4;
  --gold:#f5b301;
  --green:#5fa425;
  --green-deep:#3c7a12;
  --navy:#24223a;
  --on-navy:#f2f1f6;
  --on-navy-2:#b8b5c9;

  --display:'Outfit','Trebuchet MS',system-ui,sans-serif;
  --text:'Source Sans 3','Segoe UI',system-ui,sans-serif;

  /* modular scale, ratio 1.25, base 17px */
  --t-xs:.8125rem;
  --t-s:.9375rem;
  --t-b:1.0625rem;
  --t-1:1.3125rem;
  --t-2:1.625rem;
  --t-3:2.0625rem;
  --t-4:clamp(2.25rem,1.7rem + 2.4vw,3.25rem);
  --t-5:clamp(2.4rem,1.6rem + 3.4vw,4rem);
  --t-hero:clamp(2.35rem,1.4rem + 4vw,3.9rem);
  --t-huge:clamp(4.2rem,1.6rem + 12vw,10.5rem);

  --gutter:clamp(1.25rem,5vw,4.5rem);
  --col-gap:clamp(1.25rem,2.4vw,2.5rem);
  --pad-tight:clamp(3.25rem,6vw,4.75rem);
  --pad-mid:clamp(4.5rem,9vw,7rem);
  --pad-loose:clamp(5.5rem,11vw,8.5rem);

  /* one easing family, sinusoidal, the way the mark's arcs settle */
  --ease:cubic-bezier(.37,0,.24,1);
}

@media (prefers-color-scheme:dark){
  /* the lower wave is the mark's darkest ink; on a dark ground it has to be
     re-inked or the wave simply disappears */
  #wave-blue path{fill:#b7b4c9}
  :root{
    --paper:#14132a;
    --paper-2:#1a1930;
    --ink:#ecebf4;
    --ink-2:#a6a3bd;
    --rule:#33314c;
    --green:#7cc33a;
    --green-deep:#8ed14a;
    --navy:#221f3e;
    --on-navy:#f2f1f6;
    --on-navy-2:#b8b5c9;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 var(--t-b)/1.6 var(--text);
}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:300;line-height:1.1;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,dl,dd{margin:0;padding:0;list-style:none}

/* One page grid. Sections do not each invent their own: they occupy different
   columns of the same twelve, which keeps edges lining up down the page while
   the shape of each section changes. */
.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
.pad-tight{padding-block:var(--pad-tight)}
.pad-mid{padding-block:var(--pad-mid)}
.pad-loose{padding-block:var(--pad-loose)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:9;background:var(--gold);color:#24223a;padding:.6rem 1rem}
:where(a,button):focus-visible{outline:2px solid var(--green-deep);outline-offset:3px}

/* ---------- header ---------- */
.site-head{
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  max-width:1240px;margin-inline:auto;
  padding:.85rem var(--gutter);
  min-height:64px;
}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;margin-right:auto}
.brand-mark{width:52px;height:auto}
.brand-name{display:flex;flex-direction:column;line-height:1}
.brand-word{font-family:var(--display);font-weight:600;font-size:1.28rem;letter-spacing:-.015em}
.brand-sub{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:.22rem}
.nav{display:none;gap:1.6rem;font-size:var(--t-s)}
.nav a{text-decoration:none;color:var(--ink-2);padding:.72rem 0}
.nav a:hover{color:var(--ink)}
@media (min-width:900px){.nav{display:flex}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:.7rem 1.35rem;
  border-radius:4px;border:1px solid transparent;
  font-family:var(--text);font-weight:600;font-size:var(--t-s);
  letter-spacing:.01em;text-decoration:none;white-space:nowrap;
  transition:transform .18s var(--ease),background-color .18s var(--ease);
}
.btn-primary{background:var(--gold);color:#24223a}
.btn-primary:hover{background:#ffc21f}
.btn-ghost{border-color:var(--rule);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-2)}
.btn:active{transform:translateY(1px)}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* ---------- hero ---------- */
.hero{
  max-width:1240px;margin-inline:auto;
  padding:clamp(1rem,2vw,2rem) var(--gutter) clamp(2.75rem,5vw,4rem);
  display:grid;gap:clamp(1.5rem,4vw,2.5rem);
  align-items:center;
}
.hero-mark{max-width:min(80vw,430px);order:-1}
.mark{display:block;width:100%;height:auto;overflow:visible}
.hero h1{font-size:var(--t-hero);line-height:1.04;letter-spacing:-.028em;max-width:14ch}
.lede{margin-top:1.4rem;font-size:var(--t-1);line-height:1.5;color:var(--ink-2);max-width:40ch}

@media (min-width:1000px){
  .hero{
    grid-template-columns:repeat(12,1fr);
    column-gap:var(--col-gap);
    padding-top:clamp(1.5rem,3vw,3rem);
    padding-bottom:clamp(3rem,5vw,4.5rem);
  }
  .hero-copy{grid-column:1 / 7;order:0}
  .hero-mark{grid-column:7 / 13;max-width:none;order:0;width:100%}
}

/* ---------- segmentos: the hero resolves into a seam ----------
   Stacked on a phone, where three columns would force these three words down to
   footnote size; a row of four across the full width from 640 up. */
.segmentos{border-block:1px solid var(--rule)}
.seg-grid{display:grid;grid-template-columns:1fr}
.seg-lead{
  font-family:var(--text);font-size:var(--t-s);color:var(--ink-2);
  letter-spacing:.14em;text-transform:uppercase;
  padding:clamp(.9rem,2vw,1.5rem) 0 .5rem;
}
.seg-item{
  padding:clamp(.75rem,2vw,1.5rem) 0;
  font-family:var(--display);font-weight:300;
  font-size:var(--t-2);letter-spacing:-.015em;line-height:1.1;
  border-top:2px solid var(--gold);
}

@media (min-width:640px){
  .seg-grid{grid-template-columns:.7fr repeat(3,1fr);column-gap:var(--col-gap)}
  .seg-lead{align-self:center;padding:clamp(.9rem,2vw,1.5rem) 0}
  .seg-item{margin-top:-1px}
}

/* ---------- serviços ---------- */
.serv-grid{display:grid;gap:clamp(2rem,5vw,3rem)}
.servicos h2{font-size:var(--t-4);letter-spacing:-.02em}
.anos{margin-top:.7rem;color:var(--ink-2);font-size:var(--t-1)}
.serv-list{border-top:1px solid var(--rule)}
.serv-list li{border-bottom:1px solid var(--rule);padding:clamp(1.4rem,3vw,2.4rem) 0}
.serv-title{
  font-family:var(--display);font-weight:300;
  font-size:var(--t-5);line-height:1.05;letter-spacing:-.026em;display:block;
}

@media (min-width:1000px){
  /* The masthead column is anchored at both ends against the list: the section
     name at the top rule, the four-years line at the bottom rule. The run of
     white between them is the composition, not a column that ran out of content.
     The section also starts one step tighter than the others, because the
     SISTEMAS band's hairline is already a boundary and does not need a full
     section gap behind it. */
  .servicos{padding-top:var(--pad-tight)}
  .serv-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);align-items:stretch}
  .serv-head{grid-column:1 / 5;display:flex;flex-direction:column;justify-content:space-between}
  .anos{margin-top:1rem;padding-bottom:clamp(1.4rem,3vw,2.4rem)}
  .serv-list{grid-column:5 / 13;border-top:none}
  .serv-list li:first-child{border-top:1px solid var(--rule)}
}

/* ---------- financiamento ---------- */
.financiamento{background:var(--navy);color:var(--on-navy)}
.financiamento h2{font-size:var(--t-3);letter-spacing:-.02em;color:var(--on-navy)}
.fin-grid{display:grid;gap:clamp(2.25rem,5vw,3rem)}
.fin-rate{margin-top:clamp(1.75rem,4vw,2.75rem)}
.fin-label{
  display:block;font-size:var(--t-s);letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-navy-2);margin-bottom:.6rem;
}
.fin-big{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.fin-num{
  font-family:var(--display);font-weight:300;color:var(--gold);
  font-size:var(--t-huge);line-height:.82;letter-spacing:-.045em;
  font-variant-numeric:lining-nums;
}
.fin-unit{font-family:var(--display);font-size:var(--t-2);color:var(--on-navy-2)}
.fin-mid{
  font-family:var(--display);font-weight:300;font-size:var(--t-4);
  line-height:1.05;letter-spacing:-.024em;display:block;
}
.fin-note{margin-top:clamp(1.5rem,3vw,2.25rem);font-size:var(--t-s);color:var(--on-navy-2)}

@media (min-width:1000px){
  .fin-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);align-items:stretch}
  .fin-main{grid-column:1 / 8}
  .fin-side{
    grid-column:9 / 13;
    border-left:1px solid rgba(242,241,246,.22);
    padding-left:var(--col-gap);
    display:flex;flex-direction:column;justify-content:flex-end;
    padding-bottom:.9rem;
  }
}

/* ---------- benefícios ---------- */
.beneficios{background:var(--paper-2)}
.beneficios h2{font-size:var(--t-2);letter-spacing:-.015em;color:var(--ink-2);font-weight:300}
.ben-grid{margin-top:clamp(1.8rem,4vw,2.6rem);display:grid;gap:clamp(1.6rem,3vw,2.2rem)}
.ben{
  font-family:var(--display);font-weight:300;line-height:1.1;letter-spacing:-.022em;
  padding-top:1.1rem;border-top:2px solid var(--green);font-size:var(--t-3);
}

@media (min-width:900px){
  /* uneven columns, sized to the phrases, so this reads as a composition and not
     as three equal cards */
  .ben-grid{grid-template-columns:1.35fr 1.1fr .85fr;column-gap:var(--col-gap)}
  .ben-1{font-size:var(--t-4)}
}

/* ---------- contato ---------- */
.contato h2{font-size:var(--t-3);letter-spacing:-.02em}
.cont-grid{display:grid;gap:clamp(2.5rem,6vw,3.5rem)}
.fone{
  display:inline-block;margin-top:1.2rem;text-decoration:none;
  font-family:var(--display);font-weight:300;
  font-size:var(--t-5);line-height:1.05;letter-spacing:-.03em;
  border-bottom:2px solid var(--gold);padding-bottom:.15rem;
}
.contato .actions{margin-top:1.8rem}
.dados{display:grid;gap:1.35rem}
.dados dt{
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:.15rem;
}
.dados dd{font-size:var(--t-1)}
.dados a{display:inline-block;padding-block:.36rem;
  text-decoration-color:var(--green-deep);text-underline-offset:3px}
.vagas{margin-top:2rem;font-size:var(--t-s);color:var(--ink-2);max-width:46ch}

@media (min-width:1000px){
  .cont-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);align-items:start}
  .cont-main{grid-column:1 / 7}
  .cont-side{grid-column:8 / 13;border-top:1px solid var(--rule);padding-top:1.6rem}
}

/* ---------- footer ---------- */
.site-foot{background:var(--navy);color:var(--on-navy);padding-block:clamp(3rem,6vw,4.5rem)}
.foot-grid{display:grid;gap:2rem}
.foot-mark{width:56px;height:auto;margin-bottom:1.1rem}
.foot-name{font-family:var(--display);font-weight:600;font-size:var(--t-1);letter-spacing:-.01em}
.foot-line{color:var(--on-navy-2);font-size:var(--t-s);margin-top:.2rem}
.foot-line a{display:inline-block;padding-block:.5rem;
  text-decoration-color:rgba(242,241,246,.4);text-underline-offset:3px}

@media (min-width:1000px){
  .foot-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);align-items:end}
  .foot-brand{grid-column:1 / 6}
  .foot-grid>div:nth-child(2){grid-column:6 / 10}
  .foot-grid>div:nth-child(3){grid-column:10 / 13}
}

/* ---------- the mark, looping ----------
   Four loops on four periods that never come back into phase: the sun breathes,
   the rays sweep on the ellipse the sun body actually is (so every ray base stays
   welded to it), and the two waves drift against each other. Rays are cut at the
   horizon, where the gold ink stops in the logo itself.
   Rotating the rays a full turn was tried first and rejected: their rays only
   occupy the upper half of the mark, so past about 20 degrees the top goes bare
   and the silhouette stops reading as their logo. */
.sol,.raios,.onda{transform-box:view-box}
.sol{
  transform-origin:var(--cx) var(--cy);
  animation:sol-respira 29s var(--ease) infinite alternate;
}
.raios{
  transform-origin:var(--cx) var(--cy);
  animation:sol-varre 17s var(--ease) infinite alternate;
}
@keyframes sol-respira{from{transform:scale(1)}to{transform:scale(1.02)}}
@keyframes sol-varre{
  from{transform:scaleY(0.6967) rotate(-9deg) scaleY(1.43534)}
  to{transform:scaleY(0.6967) rotate(9deg) scaleY(1.43534)}
}
.onda-verde{animation:deriva-verde 13s var(--ease) infinite alternate}
.onda-azul{animation:deriva-azul 23s var(--ease) infinite alternate}
@keyframes deriva-verde{from{transform:translateX(-2.4px)}to{transform:translateX(2.4px)}}
@keyframes deriva-azul{from{transform:translateX(3px)}to{transform:translateX(-3px)}}

/* ---------- the hero settles once ----------
   One load sequence, in the hero only, so the mark arrives before the sentence
   that names it. Nothing further down the page animates on scroll: a reveal that
   hides content until a scroll event is a reveal that can leave content hidden. */
@media (prefers-reduced-motion:no-preference){
  .hero-mark{animation:surgir 1.1s var(--ease) both}
  .hero h1{animation:erguer .85s var(--ease) both .06s}
  .lede{animation:erguer .85s var(--ease) both .2s}
  .hero .actions{animation:erguer .85s var(--ease) both .32s}
}
@keyframes surgir{from{opacity:0;transform:translateY(10px) scale(.975)}to{opacity:1;transform:none}}
@keyframes erguer{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .sol,.raios,.onda-verde,.onda-azul{animation:none}
  .btn{transition:none}
}