:root {

  --paper:#f6f8fb;
  --surface:#ffffff;

  --ink:#0b1526;
  --muted:#526174;
  --quiet:#78869a;

  --line:#dce3ec;
  --line-strong:#bcc8d8;

  --signal:#135ee8;
  --signal-dark:#0b48ba;
  --signal-soft:#eaf1ff;

  --max:1240px;

  --radius:14px;

  --ease:
    cubic-bezier(.16,1,.3,1);

}


/* ==========================================================
   BASE
   ========================================================== */

* {
  box-sizing:border-box;
}


html {
  scroll-behavior:smooth;
}


body {

  margin:0;

  color:var(--ink);

  background:var(--paper);

  font-family:
    "Manrope",
    "Segoe UI",
    sans-serif;

  font-size:16px;

  line-height:1.65;

  -webkit-font-smoothing:
    antialiased;

}


body.modal-open {
  overflow:hidden;
}


img {
  display:block;
  max-width:100%;
}


a {
  color:inherit;
}


button {
  font:inherit;
}


:focus-visible {

  outline:
    3px solid
    var(--signal);

  outline-offset:4px;

}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

.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;

}


.skip-link {

  position:fixed;

  z-index:100;

  top:1rem;
  left:1rem;

  padding:
    .7rem
    1rem;

  background:var(--ink);

  color:#fff;

  transform:
    translateY(-150%);

}


.skip-link:focus {
  transform:none;
}


/* ==========================================================
   HEADER
   ========================================================== */

.site-header {

  position:sticky;

  z-index:30;

  top:0;

  display:grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items:center;

  min-height:76px;

  padding:
    0
    max(
      24px,
      calc(
        (100vw - var(--max))
        /
        2
      )
    );

  background:
    rgba(
      246,
      248,
      251,
      .94
    );

  border-bottom:
    1px solid
    var(--line);

  backdrop-filter:
    blur(16px);

}


/* BRAND */

.brand {

  display:inline-flex;

  align-items:center;

  font-size:.9rem;

  font-weight:800;

  text-decoration:none;

  letter-spacing:-.025em;

}


/* NAV */

.site-nav {

  justify-self:center;

  display:flex;

  gap:
    clamp(
      1.3rem,
      3vw,
      2.6rem
    );

}


.site-nav a,
.header-action {

  color:var(--muted);

  font-size:.82rem;

  font-weight:700;

  text-decoration:none;

}


.site-nav a {
  position:relative;
}


.site-nav a::after {

  content:"";

  position:absolute;

  right:0;
  bottom:-.65rem;
  left:0;

  height:2px;

  background:
    var(--signal);

  transform:
    scaleX(0);

  transform-origin:left;

  transition:
    transform
    .25s
    var(--ease);

}


.site-nav a:hover::after {

  transform:
    scaleX(1);

}


/* HEADER TOOLS */

.header-tools {

  display:flex;

  align-items:center;

  gap:.65rem;

}


.header-action {

  padding:
    .55rem
    .75rem;

  border:
    1px solid
    var(--line-strong);

  border-radius:8px;

  transition:
    color .2s,
    border-color .2s,
    background .2s;

}


.header-action:hover {

  color:
    var(--signal-dark);

  border-color:
    var(--signal);

  background:
    var(--surface);

}


/* ==========================================================
   LANGUAGE
   ========================================================== */

.language-switch {

  position:relative;

  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  padding:3px;

  margin-left:1.25rem;

  background:#e9eef5;

  border-radius:8px;

  isolation:isolate;

}


.language-switch-indicator {

  position:absolute;

  z-index:0;

  top:3px;
  bottom:3px;
  left:3px;

  width:
    calc(
      (100% - 6px)
      /
      2
    );

  background:
    var(--surface);

  border-radius:6px;

  box-shadow:
    0 2px 8px
    rgba(20,42,75,.08);

  transform:
    translateX(0);

  transition:
    transform
    .35s
    var(--ease);

}


.language-switch.is-pt
.language-switch-indicator {

  transform:
    translateX(100%);

}


.language-switch button {

  position:relative;

  z-index:1;

  min-width:48px;

  padding:
    .35rem
    .5rem;

  border:0;

  border-radius:6px;

  color:
    var(--muted);

  background:
    transparent;

  font-size:.67rem;

  font-weight:800;

  cursor:pointer;

  transition:
    color
    .3s
    var(--ease);

}


.language-switch
button[aria-pressed="true"] {

  color:
    var(--ink);

  background:
    transparent;

  box-shadow:none;

}


/* MOBILE MENU */

.menu-toggle {

  display:none;

  border:0;

  background:transparent;

}


/* ==========================================================
   COMMON WIDTH
   ========================================================== */

.hero,
.section,
.site-footer {

  width:
    min(
      calc(100% - 48px),
      var(--max)
    );

  margin-inline:auto;

}


/* ==========================================================
   HERO
   ========================================================== */

.hero {

  display:grid;

  grid-template-columns:
    minmax(0,.9fr)
    minmax(500px,1.1fr);

  gap:
    clamp(
      3rem,
      6vw,
      6rem
    );

  align-items:center;

  /*
   * Header = 76px.
   * Therefore hero + header occupy at least one complete screen.
   */

  min-height:
    calc(
      100svh - 76px
    );

  padding:
    clamp(
      4rem,
      7vw,
      6rem
    )
    0;

}


.hero-copy {

  position:relative;

  z-index:2;

}


.hero h1 {

  margin:
    0
    0
    1rem;

  font-size:
    clamp(
      3.2rem,
      5vw,
      5rem
    );

  line-height:.99;

  letter-spacing:-.04em;

}


.hero-role {

  margin:
    0
    0
    .7rem;

  color:
    var(--ink);

  font-size:
    clamp(
      1rem,
      1.3vw,
      1.15rem
    );

  font-weight:600;

}


.hero-lead {

  max-width:58ch;

  margin:
    0
    0
    2rem;

  color:
    var(--muted);

  font-size:
    clamp(
      .95rem,
      1.2vw,
      1.08rem
    );

}


.hero-actions {

  display:flex;

  flex-wrap:wrap;

  gap:.8rem;

}


/* BUTTONS */

.button {

  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:.65rem;

  min-height:48px;

  padding:
    .75rem
    1.05rem;

  border-radius:9px;

  font-size:.86rem;

  font-weight:800;

  text-decoration:none;

  transition:
    transform .25s var(--ease),
    background-color .25s,
    border-color .25s,
    box-shadow .25s;

}


.button:hover {

  transform:
    translateY(-2px);

}


.button-primary {

  background:
    var(--signal);

  color:#fff;

  border:
    1px solid
    var(--signal);

  box-shadow:
    0 10px 28px
    rgba(19,94,232,.18);

}


.button-primary:hover {

  background:
    var(--signal-dark);

  border-color:
    var(--signal-dark);

}


.button-secondary {

  background:
    var(--surface);

  border:
    1px solid
    var(--line-strong);

}


.button-secondary:hover {

  border-color:
    var(--signal);

}


/* ==========================================================
   HERO MEDIA
   ========================================================== */

/*
 * O MP4 é 16:9.
 * Portanto o container passa a usar a mesma proporção.
 */

.hero-image {

  position:relative;

  width:100%;

  aspect-ratio:16 / 9;

  justify-self:end;

  overflow:hidden;

  background:
    var(--surface);

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius);

  box-shadow:
    0 28px 70px
    rgba(20,42,75,.09);

}


/*
 * Como vídeo e container têm a mesma proporção,
 * não precisamos de scale().
 */

.hero-video {

  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

}


/*
 * Imagem estática usada em redução de movimento.
 * Ela pode continuar em 4:3 sem deformação.
 * O espaço restante fica branco, igual ao fundo da imagem.
 */

.hero-static-image {

  display:none;

  width:100%;
  height:100%;

  object-fit:contain;

  background:
    var(--surface);

}


/* ==========================================================
   SECTIONS
   ========================================================== */

.section {

  padding:
    clamp(
      6rem,
      11vw,
      10rem
    )
    0;

}


.section-heading {

  display:flex;

  align-items:end;
  justify-content:space-between;

  gap:3rem;

  margin-bottom:
    clamp(
      2.5rem,
      5vw,
      4rem
    );

}


.section-heading h2,
.about h2 {

  margin:0;

  font-size:
    clamp(
      2.3rem,
      4.4vw,
      4.4rem
    );

  line-height:1.04;

  letter-spacing:-.035em;

}


.section-heading p {

  max-width:49ch;

  margin:0;

  color:
    var(--muted);

}


/* ==========================================================
   PROJECTS
   ========================================================== */

.projects {

  width:100%;

  max-width:none;

  padding-inline:
    max(
      24px,
      calc(
        (100vw - var(--max))
        /
        2
      )
    );

  background:
    var(--surface);

  border-block:
    1px solid
    var(--line);

}


/* ==========================================================
   CAROUSEL
   ========================================================== */

.carousel-shell {

  position:relative;

  width:100%;

  padding:
    0
    54px
    2.3rem;

}


.project-carousel {

  position:relative;

  width:100%;

  height:500px;

  overflow:hidden;

}


/* ==========================================================
   PROJECT CARD
   ========================================================== */

.project-card {

  position:absolute;

  top:50%;
  left:50%;

  display:flex;

  flex-direction:column;

  width:
    min(
      540px,
      70vw
    );

  height:430px;

  overflow:hidden;

  background:
    var(--surface);

  border:
    1px solid
    var(--line);

  border-radius:
    calc(
      var(--radius)
      +
      2px
    );

  opacity:0;

  pointer-events:none;

  cursor:pointer;

  transform:
    translate(-50%,-50%)
    scale(.7);

  transition:
    transform .55s var(--ease),
    opacity .4s var(--ease),
    filter .4s var(--ease),
    border-color .3s,
    box-shadow .4s var(--ease);

  will-change:
    transform,
    opacity;

}


.project-card.is-active {

  z-index:5;

  opacity:1;

  pointer-events:auto;

  transform:
    translate(-50%,-50%)
    scale(1);

  border-color:
    var(--line-strong);

  box-shadow:
    0 28px 70px
    rgba(20,42,75,.14);

}


.project-card.is-prev {

  z-index:2;

  opacity:.42;

  pointer-events:auto;

  transform:
    translate(-112%,-50%)
    scale(.82);

  filter:
    saturate(.72);

}


.project-card.is-next {

  z-index:2;

  opacity:.42;

  pointer-events:auto;

  transform:
    translate(12%,-50%)
    scale(.82);

  filter:
    saturate(.72);

}


.project-card.is-hidden {

  z-index:1;

  opacity:0;

  pointer-events:none;

  transform:
    translate(-50%,-50%)
    scale(.65);

}


.project-card.is-active:hover {

  border-color:
    rgba(19,94,232,.48);

  box-shadow:
    0 32px 80px
    rgba(20,42,75,.18);

}


.project-card.is-prev:hover,
.project-card.is-next:hover {

  opacity:.62;

  filter:
    saturate(.9);

}


/* PROJECT IMAGE */

.project-card-image {

  flex:0 0 auto;

  overflow:hidden;

  margin:
    10px
    10px
    0;

  aspect-ratio:16/7;

  background:#eaf0f7;

  border-radius:
    calc(
      var(--radius)
      -
      4px
    );

}


.project-card-image img {

  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform
    .45s
    var(--ease);

}


.project-card.is-active:hover
.project-card-image img {

  transform:
    scale(1.025);

}


/* PROJECT CONTENT */

.project-card-content {

  display:flex;

  flex:1;

  flex-direction:column;

  padding:
    1.25rem
    1.55rem
    1.4rem;

}


.project-card-content h3 {

  margin:0;

  color:
    var(--ink);

  font-size:
    clamp(
      1.08rem,
      1.5vw,
      1.32rem
    );

  line-height:1.25;

  letter-spacing:-.025em;

  text-align:center;

}


.project-card-description {

  margin:
    2rem
    0
    0;

  color:
    var(--muted);

  font-size:.82rem;

  line-height:1.55;

  text-align:left;

}


.project-more {

  display:inline-block;

  width:max-content;

  margin-top:auto;

  padding-top:1.8rem;

  color:
    var(--signal-dark);

  font-size:.76rem;

  font-weight:800;

  text-decoration:underline;

  text-decoration-color:
    var(--line-strong);

  text-underline-offset:.3em;

}


.project-card:hover
.project-more {

  color:
    var(--signal);

  text-decoration-color:
    var(--signal);

}


/* ==========================================================
   CAROUSEL BUTTONS
   ========================================================== */

.carousel-button {

  position:absolute;

  z-index:10;

  top:50%;

  display:grid;

  place-items:center;

  width:44px;
  height:44px;

  padding:0;

  border:
    1px solid
    var(--line-strong);

  border-radius:50%;

  background:
    var(--surface);

  color:
    var(--ink);

  box-shadow:
    0 10px 25px
    rgba(20,42,75,.09);

  font-size:1rem;

  cursor:pointer;

  transform:
    translateY(-50%);

  transition:
    background .2s,
    color .2s,
    border-color .2s,
    transform .2s var(--ease);

}


.carousel-button:hover {

  background:
    var(--signal);

  color:#fff;

  border-color:
    var(--signal);

  transform:
    translateY(-50%)
    scale(1.06);

}


.carousel-button-prev {
  left:0;
}


.carousel-button-next {
  right:0;
}


/* MARKERS */

.carousel-markers {

  display:flex;

  align-items:center;
  justify-content:center;

  gap:.5rem;

  margin-top:.55rem;

}


.carousel-marker {

  width:8px;
  height:8px;

  padding:0;

  border:0;

  border-radius:999px;

  background:
    var(--line-strong);

  opacity:.55;

  cursor:pointer;

  transition:
    width .25s var(--ease),
    background .25s,
    opacity .25s;

}


.carousel-marker:hover {
  opacity:1;
}


.carousel-marker.is-active {

  width:24px;

  background:
    var(--signal);

  opacity:1;

}


/* ==========================================================
   ABOUT
   ========================================================== */

.about {

  display:grid;

  grid-template-columns:
    minmax(280px,.78fr)
    minmax(0,1.22fr);

  gap:
    clamp(
      3rem,
      8vw,
      8rem
    );

  align-items:center;

}


.portrait-wrap {

  position:relative;

  max-width:500px;

  padding:14px;

  background:
    var(--surface);

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius);

  box-shadow:
    0 24px 60px
    rgba(20,42,75,.09);

}


.portrait-wrap::before {

  content:"";

  position:absolute;

  z-index:-1;

  right:-24px;
  bottom:-24px;

  width:70%;
  height:70%;

  border:
    1px solid
    var(--signal);

  border-radius:
    var(--radius);

}


.portrait-wrap img {

  width:100%;

  height:auto;

  object-fit:contain;

  border-radius:8px;

}


.about-copy p {

  max-width:68ch;

  color:
    var(--muted);

  font-size:1.03rem;

}


.about-copy p:first-of-type {
  margin-top:2rem;
}


.about-links {

  display:flex;

  flex-wrap:wrap;

  gap:1.3rem;

  margin-top:1.6rem;

}


.text-link {

  font-weight:800;

  text-decoration:underline;

  text-decoration-color:
    var(--line-strong);

  text-underline-offset:.3em;

}


.text-link:hover {

  color:
    var(--signal);

}


/* ==========================================================
   FOOTER
   ========================================================== */

.site-footer {

  display:grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items:center;

  gap:2rem;

  padding:
    3rem
    0;

  color:
    var(--muted);

  font-size:.78rem;

}


.site-footer nav {

  display:flex;

  gap:1.25rem;

}


.site-footer > a {

  justify-self:end;

}


.site-footer a {

  font-weight:800;

  text-decoration:none;

}


.site-footer a:hover {

  color:
    var(--signal-dark);

}


/* ==========================================================
   MODAL
   ========================================================== */

.project-modal[hidden] {
  display:none;
}


.project-modal {

  position:fixed;

  z-index:100;

  inset:0;

  display:grid;

  place-items:center;

  padding:
    clamp(
      1rem,
      4vw,
      3rem
    );

}


.modal-backdrop {

  position:absolute;

  inset:0;

  background:
    rgba(
      6,
      14,
      27,
      .72
    );

  backdrop-filter:
    blur(5px);

  animation:
    fade-in
    .25s
    var(--ease);

}


.modal-panel {

  position:relative;

  width:
    min(
      900px,
      calc(100vw - 32px)
    );

  max-height:
    calc(
      100dvh
      -
      32px
    );

  padding:
    clamp(
      2rem,
      4vw,
      3.5rem
    );

  overflow:auto;

  background:
    var(--surface);

  border:
    1px solid
    var(--line);

  border-radius:
    calc(
      var(--radius)
      +
      4px
    );

  box-shadow:
    0 35px 100px
    rgba(0,0,0,.28);

  animation:
    modal-in
    .32s
    var(--ease);

}


.modal-close {

  position:absolute;

  top:16px;
  right:16px;

  display:grid;

  place-items:center;

  width:40px;
  height:40px;

  padding:0;

  border:
    1px solid
    var(--line);

  border-radius:50%;

  background:
    var(--surface);

  color:
    var(--ink);

  font-size:1.5rem;

  cursor:pointer;

  transition:
    color .2s,
    border-color .2s,
    background .2s;

}


.modal-close:hover {

  color:#fff;

  background:
    var(--signal);

  border-color:
    var(--signal);

}


.modal-label {

  display:block;

  margin-bottom:1rem;

  color:
    var(--signal);

  font-size:.66rem;

  font-weight:800;

  letter-spacing:.11em;

  text-transform:uppercase;

}


.modal-title {

  max-width:760px;

  margin:
    0
    auto;

  color:
    var(--ink);

  font-size:
    clamp(
      2rem,
      4vw,
      3.5rem
    );

  line-height:1.05;

  letter-spacing:-.04em;

  text-align:center;

}


.modal-description-section {

  margin-top:3.2rem;

  padding-top:2rem;

  border-top:
    1px solid
    var(--line);

}


.modal-description-section h3 {

  margin:
    0
    0
    1rem;

  color:
    var(--ink);

  font-size:.75rem;

  font-weight:800;

  letter-spacing:.08em;

  text-transform:uppercase;

}


.modal-description-section p {
  width:100%;
  max-width:88ch;

  margin:0;

  color:var(--muted);

  font-size:.9rem;

  line-height:1.75;
}


/* TECHNOLOGIES */

.modal-technologies {

  margin-top:2.6rem;

  padding-top:2rem;

  border-top:
    1px solid
    var(--line);

}


.modal-technologies h3 {

  margin:
    0
    0
    1rem;

  color:
    var(--ink);

  font-size:.75rem;

  font-weight:800;

  letter-spacing:.08em;

  text-transform:uppercase;

}


.modal-tech-track {

  display:flex;

  align-items:center;
  justify-content:center;
  gap:0;

  width:100%;

  overflow-x:auto;

  padding:
    .95rem
    1.15rem;

  background:
    var(--signal-soft);

  border:
    1px solid
    rgba(19,94,232,.12);

  border-radius:10px;

  scrollbar-width:thin;

}


.modal-tech-item {

  display:inline-flex;

  align-items:center;

  flex:0 0 auto;

  color:
    var(--signal-dark);

  font-size:.76rem;

  font-weight:700;

  white-space:nowrap;

}


.modal-tech-item:not(:last-child)::after {

  content:"";

  width:4px;
  height:4px;

  margin-inline:1rem;

  background:
    var(--signal);

  border-radius:50%;

  opacity:.55;

}


/* LINKS */

.modal-links {

  display:flex;

  flex-wrap:wrap;

  justify-content:flex-end;

  gap:.7rem;

  margin-top:2.4rem;

}


.modal-links:empty {
  display:none;
}


.modal-links .button {

  min-height:42px;

  padding:
    .55rem
    .85rem;

  font-size:.72rem;

}


/* ==========================================================
   ANIMATIONS
   ========================================================== */

@keyframes fade-in {

  from {
    opacity:0;
  }

}


@keyframes modal-in {

  from {

    opacity:0;

    transform:
      translateY(20px)
      scale(.985);

  }

}


/* ==========================================================
   SCROLL REVEAL
   ========================================================== */

body.reveal-ready
[data-reveal] {

  opacity:0;

  transition:
    opacity
    .75s
    var(--ease),

    transform
    .75s
    var(--ease);

  will-change:
    opacity,
    transform;

}


body.reveal-ready
[data-reveal="left"] {

  transform:
    translateX(-28px);

}


body.reveal-ready
[data-reveal="right"] {

  transform:
    translateX(28px);

}


body.reveal-ready
[data-reveal="up"] {

  transform:
    translateY(22px);

}


body.reveal-ready
[data-reveal].is-visible {

  opacity:1;

  transform:
    translate3d(0,0,0);

}


/* ABOUT STAGGER */

.about-copy
p[data-reveal="right"]:nth-of-type(1) {

  transition-delay:.08s;

}


.about-copy
p[data-reveal="right"]:nth-of-type(2) {

  transition-delay:.15s;

}


.about-copy
p[data-reveal="right"]:nth-of-type(3) {

  transition-delay:.22s;

}


.about-links[data-reveal] {

  transition-delay:.28s;

}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:1000px) {

  .hero {

    grid-template-columns:1fr;

    min-height:
      calc(
        100svh - 76px
      );

  }


  .hero-image {

    width:
      min(
        90%,
        720px
      );

    justify-self:center;

  }


  .project-card {

    width:
      min(
        500px,
        68vw
      );

  }


  .project-card.is-prev {

    transform:
      translate(-108%,-50%)
      scale(.8);

  }


  .project-card.is-next {

    transform:
      translate(8%,-50%)
      scale(.8);

  }


  .about {

    grid-template-columns:
      .85fr
      1.15fr;

  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:760px) {

  .site-header {

    grid-template-columns:
      auto
      1fr
      auto;

    min-height:66px;

    padding-inline:20px;

  }


  .brand {
    grid-column:1;
  }


  .header-tools {

    grid-column:2;

    justify-self:end;

    gap:.4rem;

  }


  .header-action {
    display:none;
  }


  .language-switch {

    margin-left:0;

  }


  .language-switch button {
    min-width:38px;
  }


  .menu-toggle {

    grid-column:3;

    display:grid;

    gap:5px;

    width:42px;
    height:42px;

    place-content:center;

    cursor:pointer;

  }


  .menu-toggle
  span:not(.sr-only) {

    display:block;

    width:22px;
    height:2px;

    background:
      var(--ink);

  }


  .site-nav {

    position:absolute;

    top:66px;
    right:0;
    left:0;

    display:none;

    flex-direction:column;

    gap:0;

    padding:
      .8rem
      20px
      1.2rem;

    background:
      var(--paper);

    border-bottom:
      1px solid
      var(--line);

  }


  .site-nav.is-open {
    display:flex;
  }


  .site-nav a {
    padding:.8rem 0;
  }


  .hero,
  .section,
  .site-footer {

    width:
      min(
        calc(100% - 40px),
        var(--max)
      );

  }


  /* HERO */

  .hero {

    gap:3rem;

    min-height:
      calc(
        100svh - 66px
      );

    padding:
      4.5rem
      0;

  }


  .hero h1 {

    font-size:
      clamp(
        2.9rem,
        13vw,
        4.5rem
      );

  }


  .hero-image {

    width:90%;

    justify-self:center;

  }


  /* SECTION */

  .section {
    padding-block:6rem;
  }


  .section-heading {
    display:block;
  }


  .section-heading p {
    margin-top:1rem;
  }


  /* PROJECTS */

  .projects {

    width:100%;

    padding-inline:20px;

  }


  .carousel-shell {

    padding:
      0
      0
      4.5rem;

  }


  .project-carousel {
    height:440px;
  }


  .project-card {

    width:82vw;

    max-width:390px;

    height:395px;

  }


  .project-card.is-prev {

    opacity:.22;

    transform:
      translate(-101%,-50%)
      scale(.74);

  }


  .project-card.is-next {

    opacity:.22;

    transform:
      translate(1%,-50%)
      scale(.74);

  }


  .project-card-content {

    padding:
      1rem
      1.1rem
      1.15rem;

  }


  .project-card-description {

    margin-top:1.5rem;

    font-size:.76rem;

  }


  .project-more {
    padding-top:1.4rem;
  }


  .carousel-button {

    top:auto;

    bottom:0;

    transform:none;

  }


  .carousel-button:hover {
    transform:none;
  }


  .carousel-button-prev {

    left:
      calc(
        50% - 52px
      );

  }


  .carousel-button-next {

    right:
      calc(
        50% - 52px
      );

  }


  .carousel-markers {
    margin-top:.25rem;
  }


  /* ABOUT */

  .about {
    grid-template-columns:1fr;
  }


  .portrait-wrap {

    width:
      min(
        94%,
        500px
      );

  }


  /* FOOTER */

  .site-footer {

    grid-template-columns:
      1fr
      auto;

    gap:.7rem;

    padding:
      2.25rem
      0;

  }


  .site-footer nav {

    grid-column:1/-1;

    grid-row:1;

    flex-wrap:wrap;

    gap:1rem;

  }


  .site-footer > a {

    grid-column:2;

    grid-row:2;

  }


  /* MODAL */

  .project-modal {
    padding:8px;
  }


  .modal-panel {

    width:
      calc(
        100vw - 16px
      );

    max-height:
      calc(
        100dvh - 16px
      );

    padding:
      1.6rem
      1.2rem;

    border-radius:12px;

  }


  .modal-label {
    margin-bottom:1.5rem;
  }


  .modal-title {

    padding-inline:2rem;

    font-size:
      clamp(
        1.7rem,
        8vw,
        2.4rem
      );

  }


  .modal-description-section {

    margin-top:2.4rem;

    padding-top:1.5rem;

  }


  .modal-description-section p {

    font-size:.82rem;

    line-height:1.65;

  }


  .modal-technologies {

    margin-top:2rem;

    padding-top:1.5rem;

  }


  .modal-tech-track {

    padding:
      .85rem
      1rem;

  }


  .modal-tech-item {
    font-size:.7rem;
  }


  .modal-links {

    justify-content:flex-start;

    margin-top:2rem;

  }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media(prefers-reduced-motion:reduce) {

  html {
    scroll-behavior:auto;
  }


  /*
   * Remove animated Hero and show static illustration.
   */

  .hero-video {
    display:none;
  }


  .hero-static-image {
    display:block;
  }


  .project-card,
  .project-card-image img,
  .carousel-marker,
  .carousel-button,
  .button,
  .modal-backdrop,
  .modal-panel,
  .language-switch-indicator,
  [data-reveal] {

    transition:none !important;

    animation:none !important;

  }


  body.reveal-ready
  [data-reveal] {

    opacity:1 !important;

    transform:none !important;

  }

}

/* ==========================================================
   RESPONSIVE IMPROVEMENTS
   Cole este bloco NO FINAL do style.css
   ========================================================== */


/* Evita pequenos vazamentos horizontais causados por
   elementos decorativos e pelo carrossel */
body {
  overflow-x:clip;
}


/* ==========================================================
   NOTEBOOK / DESKTOP MENOR
   ========================================================== */

@media (max-width:1200px) {

  /* --------------------------------------------------------
     HERO
     -------------------------------------------------------- */

  .hero {

    grid-template-columns:
      minmax(0,1fr)
      minmax(400px,.95fr);

    gap:
      clamp(
        2rem,
        4vw,
        4rem
      );

  }


  .hero-image {
    width:100%;
  }


  /* --------------------------------------------------------
     ABOUT
     -------------------------------------------------------- */

  .about {

    gap:
      clamp(
        3rem,
        6vw,
        5rem
      );

  }


  /* --------------------------------------------------------
     PROJECTS
     -------------------------------------------------------- */

  .project-card {

    width:
      min(
        520px,
        68vw
      );

  }

}


/* ==========================================================
   TABLET / NOTEBOOK PEQUENO
   ========================================================== */

@media (max-width:900px) {

  /* ========================================================
     HEADER
     ======================================================== */

  .site-header {

    grid-template-columns:
      auto
      1fr
      auto;

    min-height:66px;

    padding-inline:
      clamp(
        16px,
        4vw,
        24px
      );

  }


  .brand {
    grid-column:1;
  }


  /*
   * No tablet os botões externos do header são escondidos.
   * Resume/GitHub continuam disponíveis no restante da página.
   */

  .header-tools {

    grid-column:2;

    justify-self:end;

    gap:.4rem;

  }


  .header-action {
    display:none;
  }


  .language-switch {
    margin-left:0;
  }


  .language-switch button {

    min-width:42px;

    padding:
      .34rem
      .45rem;

  }


  /* HAMBURGER */

  .menu-toggle {

    grid-column:3;

    display:grid;

    place-content:center;

    gap:5px;

    width:42px;
    height:42px;

    padding:0;

    cursor:pointer;

  }


  .menu-toggle
  span:not(.sr-only) {

    display:block;

    width:22px;
    height:2px;

    background:
      var(--ink);

  }


  /* MOBILE NAV */

  .site-nav {

    position:absolute;

    top:66px;
    right:0;
    left:0;

    display:none;

    width:100%;

    justify-self:stretch;

    flex-direction:column;

    gap:0;

    padding:
      .8rem
      clamp(
        16px,
        4vw,
        24px
      )
      1.1rem;

    background:
      rgba(
        246,
        248,
        251,
        .98
      );

    border-bottom:
      1px solid
      var(--line);

    backdrop-filter:
      blur(16px);

  }


  .site-nav.is-open {
    display:flex;
  }


  .site-nav a {

    width:100%;

    padding:
      .8rem
      0;

  }


  .site-nav a::after {
    display:none;
  }


  /* ========================================================
     HERO
     ======================================================== */

  .hero {

    grid-template-columns:
      1fr;

    gap:
      clamp(
        2.5rem,
        7vw,
        4rem
      );

    min-height:auto;

    padding:
      clamp(
        3.5rem,
        8vw,
        5rem
      )
      0
      clamp(
        4rem,
        9vw,
        6rem
      );

  }


  .hero-copy {

    width:100%;

    max-width:720px;

  }


  .hero h1 {

    font-size:
      clamp(
        3rem,
        8vw,
        4.5rem
      );

  }


  /*
   * Vídeo continua 16:9.
   * Apenas limitamos a largura no tablet.
   */

  .hero-image {

    width:
      min(
        100%,
        760px
      );

    justify-self:center;

  }


  .hero-video {

    width:100%;
    height:100%;

    object-fit:cover;

  }


  /* ========================================================
     SECTIONS
     ======================================================== */

  .section {

    padding:
      clamp(
        5rem,
        10vw,
        7rem
      )
      0;

  }


  .section-heading {

    display:grid;

    gap:1rem;

    align-items:start;

  }


  .section-heading p {

    max-width:60ch;

    margin:0;

  }


  /* ========================================================
     ABOUT
     ======================================================== */

  .about {

    grid-template-columns:
      1fr;

    gap:
      clamp(
        3rem,
        7vw,
        4.5rem
      );

  }


  .portrait-wrap {

    width:
      min(
        62%,
        420px
      );

    justify-self:center;

  }


  .about-copy {

    width:100%;

  }


  .about-copy p {

    max-width:70ch;

  }


  /* ========================================================
     PROJECTS
     ======================================================== */

  .projects {

    padding-inline:
      clamp(
        20px,
        4vw,
        40px
      );

  }


  .carousel-shell {

    padding-inline:
      44px;

  }


  .project-carousel {
    height:470px;
  }


  .project-card {

    width:
      min(
        500px,
        76vw
      );

    height:420px;

  }


  .project-card.is-prev {

    opacity:.3;

    transform:
      translate(-102%,-50%)
      scale(.78);

  }


  .project-card.is-next {

    opacity:.3;

    transform:
      translate(2%,-50%)
      scale(.78);

  }


  /* ========================================================
     FOOTER
     ======================================================== */

  .site-footer {

    gap:
      1.5rem;

  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:600px) {

  /* ========================================================
     GLOBAL WIDTH
     ======================================================== */

  .hero,
  .section,
  .site-footer {

    width:
      calc(
        100% - 32px
      );

  }


  /* ========================================================
     HEADER
     ======================================================== */

  .site-header {

    padding-inline:16px;

  }


  .brand {

    font-size:.86rem;

  }


  .language-switch button {

    min-width:38px;

    padding:
      .32rem
      .4rem;

    font-size:.64rem;

  }


  /* ========================================================
     HERO
     ======================================================== */

  .hero {

    gap:2.7rem;

    padding:
      3.5rem
      0
      4.5rem;

  }


  .hero h1 {

    font-size:
      clamp(
        2.8rem,
        13vw,
        4rem
      );

  }


  .hero-role {

    font-size:
      clamp(
        .96rem,
        4vw,
        1.05rem
      );

  }


  .hero-lead {

    font-size:.95rem;

    line-height:1.7;

  }


  /*
   * No celular o vídeo usa toda a largura disponível.
   */

  .hero-image {

    width:100%;

    max-width:none;

  }


  /* ========================================================
     HERO BUTTONS
     ======================================================== */

  .hero-actions {

    gap:.7rem;

  }


  .hero-actions .button {

    flex:
      1
      1
      155px;

  }


  /* ========================================================
     SECTION TITLES
     ======================================================== */

  .section {

    padding:
      4.5rem
      0;

  }


  .section-heading {

    margin-bottom:2.5rem;

  }


  .section-heading h2,
  .about h2 {

    font-size:
      clamp(
        2.2rem,
        10vw,
        3.2rem
      );

  }


  .section-heading p {

    font-size:.93rem;

    line-height:1.7;

  }


  /* ========================================================
     ABOUT
     ======================================================== */

  .about {

    gap:3.2rem;

  }


  .portrait-wrap {

    width:
      min(
        82%,
        340px
      );

  }


  /*
   * Reduzimos o detalhe azul para ele não gerar
   * espaço lateral excessivo.
   */

  .portrait-wrap::before {

    right:-14px;
    bottom:-14px;

  }


  .about-copy p {

    font-size:.96rem;

    line-height:1.72;

  }


  .about-copy p:first-of-type {

    margin-top:1.5rem;

  }


  .about-links {

    gap:
      .8rem
      1.2rem;

  }


  /* ========================================================
     PROJECTS
     ======================================================== */

  .projects {

    padding-inline:16px;

  }


  .carousel-shell {

    padding:
      0
      0
      4.5rem;

  }


  .project-carousel {

    height:430px;

  }


  /*
   * O card principal ocupa quase toda a tela.
   * Os laterais aparecem apenas parcialmente.
   */

  .project-card {

    width:88vw;

    max-width:430px;

    height:395px;

  }


  .project-card.is-prev {

    opacity:.16;

    transform:
      translate(-98%,-50%)
      scale(.74);

  }


  .project-card.is-next {

    opacity:.16;

    transform:
      translate(-2%,-50%)
      scale(.74);

  }


  .project-card-content {

    padding:
      1rem
      1.15rem
      1.2rem;

  }


  .project-card-content h3 {

    font-size:
      clamp(
        1rem,
        4.5vw,
        1.2rem
      );

  }


  .project-card-description {

    margin-top:1.35rem;

    font-size:.76rem;

    line-height:1.55;

  }


  .project-more {

    padding-top:1.2rem;

  }


  /*
   * Botões abaixo do carrossel.
   */

  .carousel-button {

    top:auto;

    bottom:0;

    width:42px;
    height:42px;

    transform:none;

  }


  .carousel-button:hover {

    transform:none;

  }


  .carousel-button-prev {

    left:
      calc(
        50% - 52px
      );

  }


  .carousel-button-next {

    right:
      calc(
        50% - 52px
      );

  }


  /* ========================================================
     MODAL
     ======================================================== */

  .project-modal {

    padding:8px;

  }


  .modal-panel {

    width:
      calc(
        100vw - 16px
      );

    max-height:
      calc(
        100dvh - 16px
      );

    padding:
      1.5rem
      1.15rem;

    border-radius:12px;

  }


  .modal-close {

    top:12px;
    right:12px;

    width:38px;
    height:38px;

  }


  .modal-title {

    padding-inline:2rem;

    font-size:
      clamp(
        1.7rem,
        8vw,
        2.4rem
      );

  }


  .modal-description-section {

    margin-top:2.3rem;

    padding-top:1.4rem;

  }


  .modal-description-section p {

    font-size:.82rem;

    line-height:1.65;

  }


  .modal-technologies {

    margin-top:2rem;

    padding-top:1.4rem;

  }


  .modal-tech-track {

    overflow-x:auto;

    -webkit-overflow-scrolling:
      touch;

  }


  .modal-links {

    justify-content:flex-start;

    margin-top:1.8rem;

  }


  /* ========================================================
     FOOTER
     ======================================================== */

  .site-footer {

    grid-template-columns:
      1fr;

    gap:1rem;

    padding:
      2.4rem
      0;

  }


  .site-footer nav {

    grid-column:auto;
    grid-row:auto;

    display:flex;

    flex-wrap:wrap;

    gap:
      .7rem
      1.2rem;

  }


  .site-footer > a {

    grid-column:auto;
    grid-row:auto;

    justify-self:start;

  }

}


/* ==========================================================
   MOBILE PEQUENO
   ========================================================== */

@media (max-width:420px) {

  /* ========================================================
     HEADER
     ======================================================== */

  .brand {

    font-size:.8rem;

  }


  .language-switch {

    padding:2px;

  }


  .language-switch button {

    min-width:36px;

    padding:
      .3rem
      .35rem;

    font-size:.6rem;

  }


  /* ========================================================
     HERO
     ======================================================== */

  .hero {

    padding-top:3rem;

  }


  .hero h1 {

    font-size:
      clamp(
        2.5rem,
        13vw,
        3.3rem
      );

  }


  /*
   * Em telas muito pequenas os dois botões
   * ocupam linhas separadas.
   */

  .hero-actions {

    flex-direction:column;

  }


  .hero-actions .button {

    width:100%;

    flex:none;

  }


  /* ========================================================
     ABOUT
     ======================================================== */

  .portrait-wrap {

    width:
      min(
        86%,
        310px
      );

  }


  /* ========================================================
     PROJECTS
     ======================================================== */

  .project-carousel {

    height:420px;

  }


  .project-card {

    width:90vw;

    height:385px;

  }


  .project-card-content {

    padding:
      .95rem
      1rem
      1.1rem;

  }


  .project-card-description {

    margin-top:1.15rem;

    font-size:.73rem;

  }


  /* ========================================================
     MODAL
     ======================================================== */

  .modal-panel {

    padding:
      1.35rem
      1rem;

  }


  .modal-title {

    font-size:
      clamp(
        1.55rem,
        8vw,
        2rem
      );

  }

}

/* ==========================================================
   HEADER MOBILE — CORREÇÃO DEFINITIVA
   ========================================================== */

@media (max-width:900px) {

  .site-header {
    position:sticky;
    top:0;

    display:grid;

    grid-template-columns:
      auto
      1fr
      auto;

    grid-template-rows:66px;

    align-items:center;

    min-height:66px;

    padding:
      0
      clamp(
        16px,
        4vw,
        24px
      );
  }


  /* ========================================================
     BRAND
     ======================================================== */

  .brand {
    grid-column:1;
    grid-row:1;

    align-self:center;

    margin:0;
  }


  /* ========================================================
     LANGUAGE SWITCH
     ======================================================== */

  .header-tools {
    grid-column:2;
    grid-row:1;

    display:flex;

    align-items:center;
    justify-content:flex-end;

    align-self:center;

    min-width:0;

    height:auto;

    margin:0;

    padding:0;

    gap:.5rem;
  }


  .header-action {
    display:none;
  }


  .language-switch {
    position:relative;

    display:grid;

    grid-template-columns:
      repeat(2,1fr);

    align-items:center;

    align-self:center;

    height:32px;

    margin:0;

    padding:3px;

    background:#e9eef5;

    border-radius:8px;
  }


  .language-switch button {
    display:flex;

    align-items:center;
    justify-content:center;

    min-width:42px;

    height:26px;

    margin:0;

    padding:
      0
      .45rem;

    line-height:1;

    font-size:.67rem;
  }


  /* ========================================================
     HAMBURGER
     ======================================================== */

  .menu-toggle {
    grid-column:3;
    grid-row:1;

    position:relative;

    display:block;

    align-self:center;

    width:42px;
    height:42px;

    margin:0 0 0 .5rem;

    padding:0;

    border:0;

    border-radius:8px;

    background:transparent;

    color:var(--ink);

    cursor:pointer;

    -webkit-tap-highlight-color:
      transparent;
  }


  /*
   * Barras do hamburger.
   */

  .menu-toggle
  span:not(.sr-only) {
    position:absolute;

    top:50%;
    left:50%;

    display:block;

    width:22px;
    height:2px;

    margin:0;

    background:
      currentColor;

    border-radius:999px;

    transform-origin:center;

    transition:
      transform .3s var(--ease),
      opacity .2s var(--ease);
  }


  /* Barra superior */

  .menu-toggle
  .sr-only + span {
    transform:
      translate(-50%, -5px);
  }


  /* Barra inferior */

  .menu-toggle
  .sr-only + span + span {
    transform:
      translate(-50%, 3px);
  }


  /* ========================================================
     HAMBURGER ABERTO → X
     ======================================================== */

  .menu-toggle[aria-expanded="true"]
  .sr-only + span {
    transform:
      translate(-50%, -50%)
      rotate(45deg);
  }


  .menu-toggle[aria-expanded="true"]
  .sr-only + span + span {
    transform:
      translate(-50%, -50%)
      rotate(-45deg);
  }


  /* ========================================================
     MOBILE NAV
     ======================================================== */

  .site-nav {
    position:absolute;

    top:100%;
    right:0;
    left:0;

    z-index:20;

    display:flex;

    flex-direction:column;

    width:100%;

    gap:0;

    padding:
      .65rem
      clamp(
        16px,
        4vw,
        24px
      )
      1rem;

    background:
      rgba(
        246,
        248,
        251,
        .98
      );

    border-bottom:
      1px solid
      var(--line);

    box-shadow:
      0 18px 35px
      rgba(
        20,
        42,
        75,
        .07
      );

    backdrop-filter:
      blur(16px);

    -webkit-backdrop-filter:
      blur(16px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:
      translateY(-8px);

    transition:
      opacity .25s var(--ease),
      transform .3s var(--ease),
      visibility .25s;
  }


  .site-nav.is-open {
    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:
      translateY(0);
  }


  .site-nav a {
    display:flex;

    align-items:center;

    width:100%;

    min-height:48px;

    padding:
      .7rem
      .35rem;

    border-bottom:
      1px solid
      rgba(
        188,
        200,
        216,
        .35
      );

    color:var(--muted);

    font-size:.86rem;

    font-weight:700;

    text-decoration:none;
  }


  .site-nav a:last-child {
    border-bottom:0;
  }


  .site-nav a::after {
    display:none;
  }

}


/* ==========================================================
   MOBILE PEQUENO
   ========================================================== */

@media (max-width:420px) {

  .site-header {
    grid-template-rows:62px;

    min-height:62px;

    padding-inline:14px;
  }


  .brand {
    font-size:.8rem;
  }


  .header-tools {
    grid-row:1;
  }


  .language-switch {
    height:30px;

    padding:2px;
  }


  .language-switch button {
    min-width:36px;

    height:26px;

    padding:
      0
      .35rem;

    font-size:.6rem;
  }


  .menu-toggle {
    grid-row:1;

    width:40px;
    height:40px;

    margin-left:.35rem;
  }


  .menu-toggle
  span:not(.sr-only) {
    width:20px;
  }

}

/* ==========================================================
   PROTEÇÃO DE IMAGENS E VÍDEOS
   ========================================================== */

img,
video {
  pointer-events:none;

  user-select:none;
  -webkit-user-select:none;

  -webkit-user-drag:none;
}