/* ============================================================
   HOME — SECTION 1: HERO SLIDER
   ============================================================ */
.hero{
  position:relative;
  height:100vh;
  min-height:640px;
  overflow:hidden;
  background:var(--bg-0);
}
.hero__slide{
  position:absolute;inset:0;
  opacity:0;
  visibility:hidden;
  transition:opacity 1.1s var(--ease);
  display:flex;
  align-items:flex-end;
}
.hero__slide.is-active{opacity:1;visibility:visible;}
.hero__bg{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  filter:saturate(1.05);
}
.hero__bg::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(0deg,var(--bg-0) 4%,rgba(5,13,26,.35) 46%,rgba(5,13,26,.55) 100%),
    linear-gradient(90deg,rgba(5,13,26,.92) 0%,rgba(5,13,26,.35) 55%,rgba(5,13,26,.65) 100%);
}
.hero__content{
  position:relative;
  z-index:2;
  padding:0 56px 108px;
  max-width:760px;
}
.hero__eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:'Space Mono',monospace;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:22px;
}
.hero__eyebrow::before{
  content:"";
  width:8px;height:8px;
  border-radius:50%;
  background:var(--pink);
  box-shadow:0 0 12px var(--pink);
}
.hero__title{
  font-size:clamp(2.4rem,5vw,4.3rem);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.02em;
  margin-bottom:20px;
}
.hero__subtitle{
  font-size:1.08rem;
  color:var(--text-1);
  max-width:46ch;
  margin-bottom:34px;
  line-height:1.6;
}
.hero__ctas{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.hero__chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 15px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  background:rgba(5,13,26,.18);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--text-0);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.01em;
  text-decoration:none;
  transition:
    border-color .25s var(--ease),
    background .25s var(--ease),
    color .25s var(--ease),
    transform .25s var(--ease),
    box-shadow .25s var(--ease);
}

.hero__chip:hover{
  border-color:var(--cyan);
  background:rgba(0,212,255,.08);
  color:var(--cyan);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,212,255,.12);
}

.hero__chip:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}


.hero__areas{
  position:absolute;
  right:56px;
  top:0;
  bottom:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:26px;
}
.hero__area{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--text-2);
  font-size:.92rem;
  font-weight:500;
  cursor:default;
  transition:color .3s var(--ease);
}
.hero__area:hover{color:var(--text-0);}
.hero__area-num{
  font-family:'Space Mono',monospace;
  font-size:.72rem;
  color:var(--text-2);
}
.hero__area-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--text-2);
  transition:all .3s;
}
.hero__area:hover .hero__area-dot{
  background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);
}

.hero__chrome{
  position:absolute;
  left:56px;
  bottom:44px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:22px;
}
.hero__counter{
  font-family:'Space Mono',monospace;
  font-size:.85rem;
  color:var(--text-1);
  letter-spacing:.05em;
}
.hero__counter b{color:var(--text-0);}
.hero__arrows{
  display:flex;
  gap:8px;
}
.hero__arrow{
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.03);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-0);
  transition:all .25s var(--ease);
}
.hero__arrow:hover{
  border-color:var(--cyan);
  color:var(--cyan);
  transform:scale(1.06);
}
.hero__arrow svg{
  width:16px;
  height:16px;
}
.hero__progress{
  width:120px;
  height:2px;
  background:rgba(255,255,255,.12);
  border-radius:2px;
  overflow:hidden;
}
.hero__progress-bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--cyan),var(--pink));
}
.hero__slide.is-active .hero__progress-bar{
  animation:heroProgress 5s linear forwards;
}
@keyframes heroProgress{
  from{width:0%;}
  to{width:100%;}
}

@media (max-width:980px){
  .hero{height:88vh;}

  .hero__content{
    padding:0 22px 120px;
  }

  .hero__areas{
    display:none;
  }

  .hero__chrome{
    left:22px;
    right:22px;
    bottom:24px;
    justify-content:space-between;
  }

  .hero__ctas{
    gap:8px;
  }

  .hero__chip{
    min-height:34px;
    padding:7px 12px;
    font-size:.74rem;
  }
}


/* ============================================================
   SECTION 2 — SERVIÇOS (editorial horizontal scroll)
   ============================================================ */
.sec-servicos{
  background:var(--bg-0);
  padding:130px 0 110px;
}
.sec-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:52px;
}
.sec-head__title{
  font-size:clamp(1.7rem,2.6vw,2.5rem);
  max-width:20ch;
  margin-top:16px;
  line-height:1.2;
}
.sec-head__right{
  flex-shrink:0;
  padding-bottom:6px;
}

.servicos-track{
  display:flex;
  gap:22px;
  overflow-x:auto;
  padding:6px 56px 26px;
  margin:0 -56px;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.servicos-track::-webkit-scrollbar{
  display:none;
}

.servico-card{
  position:relative;
  flex:0 0 320px;
  height:400px;
  border-radius:var(--radius-m);
  overflow:hidden;
  scroll-snap-align:start;
  background-size:cover;
  background-position:center;
  isolation:isolate;
}
.servico-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(5,13,26,.1) 0%,
    rgba(5,13,26,.55) 55%,
    rgba(5,13,26,.96) 100%
  );
  z-index:0;
}
.servico-card__num{
  position:relative;
  z-index:1;
  padding:22px 24px 0;
  font-family:'Space Mono',monospace;
  font-size:.78rem;
  color:rgba(255,255,255,.6);
}
.servico-card__body{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
  padding:24px;
}
.servico-card__title{
  font-size:1.28rem;
  margin-bottom:8px;
}
.servico-card__desc{
  font-size:.87rem;
  color:var(--text-1);
  margin-bottom:16px;
  line-height:1.5;
}


/* ============================================================
   SECTION 3 — CURSOS (asymmetric split, lighter bg)
   ============================================================ */
.sec-cursos{
  background:var(--bg-1);
  padding:120px 0;
}
.cursos-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:26px;
  margin-top:52px;
}
.curso-featured{
  border-radius:var(--radius-l);
  overflow:hidden;
  background:var(--bg-2);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
}
.curso-featured__img{
  height:280px;
  background-size:cover;
  background-position:center;
}
.curso-featured__body{
  padding:34px;
}
.curso-tags{
  display:flex;
  gap:8px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.curso-tag{
  font-family:'Space Mono',monospace;
  font-size:.68rem;
  letter-spacing:.05em;
  padding:5px 12px;
  border-radius:100px;
  border:1px solid var(--line-strong);
  color:var(--text-1);
}
.curso-featured__title{
  font-size:1.55rem;
  margin-bottom:12px;
}
.curso-featured__desc{
  color:var(--text-1);
  font-size:.95rem;
  line-height:1.65;
  margin-bottom:22px;
  max-width:52ch;
}

.cursos-side{
  display:flex;
  flex-direction:column;
  gap:26px;
}
.curso-mini{
  flex:1;
  border-radius:var(--radius-l);
  border:1px solid var(--line);
  background:var(--bg-2);
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
}
.curso-mini::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  border-radius:50%;
  right:-70px;
  top:-70px;
  background:radial-gradient(
    circle,
    rgba(0,212,255,.18),
    transparent 70%
  );
}
.curso-mini__title{
  font-size:1.15rem;
  margin:12px 0 8px;
  position:relative;
}
.curso-mini__desc{
  color:var(--text-1);
  font-size:.86rem;
  position:relative;
  margin-bottom:16px;
}

@media (max-width:980px){
  .cursos-grid{
    grid-template-columns:1fr;
  }

  .sec-head{
    align-items:flex-start;
    gap:18px;
    margin-bottom:34px;
  }

  .sec-head__right{
    width:100%;
    padding-bottom:0;
  }
}


/* ============================================================
   SECTION 4 — PORTFÓLIO (horizontal carousel, film-strip feel)
   ============================================================ */
.sec-portfolio{
  background:var(--bg-0);
  padding:120px 0;
}
.portfolio-head-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:46px;
}
.portfolio-carousel-wrap{
  position:relative;
}
.portfolio-track{
  display:flex;
  gap:18px;
  overflow-x:auto;
  padding:4px 56px 20px;
  margin:0 -56px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.portfolio-track::-webkit-scrollbar{
  display:none;
}
.portfolio-card{
  flex:0 0 300px;
  scroll-snap-align:start;
}
.portfolio-card__img{
  height:360px;
  border-radius:var(--radius-m);
  background-size:cover;
  background-position:center;
  margin-bottom:16px;
  position:relative;
  border:1px solid var(--line);
}
.portfolio-card__tag{
  position:absolute;
  top:14px;
  left:14px;
  font-family:'Space Mono',monospace;
  font-size:.66rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:rgba(5,13,26,.75);
  backdrop-filter:blur(6px);
  border:1px solid var(--line-strong);
  padding:5px 11px;
  border-radius:100px;
}
.portfolio-card__title{
  font-size:1.05rem;
  margin-bottom:8px;
}
.carousel-nav{
  display:flex;
  gap:8px;
  flex-shrink:0;
}


/* ============================================================
   SECTION 5 — PRODUTOS (clean cards, glow border)
   ============================================================ */
.sec-produtos{
  background:var(--bg-1);
  padding:120px 0;
}
.produtos-track{
  display:flex;
  gap:20px;
  overflow-x:auto;
  padding:6px 56px 20px;
  margin:0 -56px;
  scrollbar-width:none;
}
.produtos-track::-webkit-scrollbar{
  display:none;
}
.produto-card{
  flex:0 0 260px;
  background:var(--bg-0);
  border-radius:var(--radius-m);
  border:1px solid var(--line);
  padding:26px;
  position:relative;
  transition:
    border-color .3s var(--ease),
    box-shadow .3s var(--ease),
    transform .3s var(--ease);
}
.produto-card:hover{
  border-color:rgba(0,212,255,.5);
  box-shadow:
    0 0 0 1px rgba(0,212,255,.15),
    0 20px 40px -20px rgba(0,212,255,.3);
  transform:translateY(-4px);
}
.produto-card__img{
  height:150px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  margin-bottom:20px;
}
.produto-card__name{
  font-size:1.02rem;
  margin-bottom:6px;
}
.produto-card__desc{
  font-size:.83rem;
  color:var(--text-1);
  margin-bottom:18px;
  min-height:34px;
}
.produto-card__foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.produto-card__price{
  font-family:'Space Mono',monospace;
  font-size:.85rem;
  color:var(--cyan);
}
.produto-card__cart{
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line-strong);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-0);
  transition:all .2s;
}
.produto-card__cart:hover{
  background:var(--cyan);
  color:#04101f;
  border-color:var(--cyan);
}
.produto-card__cart svg{
  width:15px;
  height:15px;
}


/* ============================================================
   SECTION 6 — EVENTOS (centered feature + side block)
   ============================================================ */
.sec-eventos{
  background:var(--bg-0);
  padding:120px 0;
}
.eventos-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:26px;
  margin-top:52px;
  align-items:stretch;
}
.evento-feature{
  border-radius:var(--radius-l);
  border:1px solid var(--line);
  background:linear-gradient(
    135deg,
    var(--bg-2),
    var(--bg-1)
  );
  padding:38px;
  display:flex;
  gap:28px;
}
.evento-date{
  flex-shrink:0;
  width:92px;
  height:92px;
  border-radius:var(--radius-m);
  background:linear-gradient(
    150deg,
    var(--purple),
    var(--pink)
  );
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.evento-date__day{
  font-size:1.8rem;
  font-weight:700;
  line-height:1;
}
.evento-date__month{
  font-family:'Space Mono',monospace;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-top:4px;
}
.evento-body{
  flex:1;
}
.evento-tag{
  display:inline-block;
  font-family:'Space Mono',monospace;
  font-size:.68rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--purple);
  margin-bottom:10px;
}
.evento-title{
  font-size:1.4rem;
  margin-bottom:14px;
}
.evento-meta{
  display:flex;
  gap:22px;
  margin-bottom:22px;
  flex-wrap:wrap;
}
.evento-meta span{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.85rem;
  color:var(--text-1);
}
.evento-meta svg{
  width:15px;
  height:15px;
  color:var(--text-2);
}

.eventos-follow{
  border-radius:var(--radius-l);
  border:1px solid var(--line);
  background:var(--bg-1);
  padding:34px;
  display:flex;
  flex-direction:column;
}
.eventos-follow__title{
  font-size:1.1rem;
  margin-bottom:8px;
}
.eventos-follow__desc{
  color:var(--text-1);
  font-size:.87rem;
  margin-bottom:24px;
}
.eventos-follow__list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:auto;
}
.eventos-follow__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 16px;
  border-radius:var(--radius-s);
  border:1px solid var(--line);
  transition:border-color .2s;
}
.eventos-follow__item:hover{
  border-color:var(--cyan);
}
.eventos-follow__item-l{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:.88rem;
  font-weight:500;
}
.eventos-follow__item svg{
  width:17px;
  height:17px;
}

@media (max-width:980px){
  .portfolio-head-row{
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    margin-bottom:34px;
  }

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

  .evento-feature{
    flex-direction:column;
  }
}


/* ============================================================
   SECTION 7 — CONTACTO / CTA (split panel)
   ============================================================ */
.sec-cta{
  background:var(--bg-1);
  padding:0;
  overflow:hidden;
}
.cta-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr 1fr;
  min-height:520px;
}
.cta-img{
  background-size:cover;
  background-position:center;
  position:relative;
}
.cta-img::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    transparent,
    var(--bg-1)
  );
}
.cta-center{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:60px 50px;
}
.cta-center .eyebrow{
  margin-bottom:18px;
}
.cta-title{
  font-size:clamp(1.7rem,2.4vw,2.3rem);
  margin-bottom:18px;
  line-height:1.22;
}
.cta-desc{
  color:var(--text-1);
  margin-bottom:30px;
  max-width:38ch;
  line-height:1.65;
}

.cta-icons{
  padding:60px 50px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-content:center;
  background:var(--bg-2);
  border-left:1px solid var(--line);
}
.cta-icon-card{
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:22px 18px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:border-color .25s,background .25s;
}
.cta-icon-card:hover{
  border-color:var(--cyan);
  background:rgba(0,212,255,.04);
}
.cta-icon-badge{
  width:40px;
  height:40px;
  border-radius:11px;
  background:rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--cyan);
}
.cta-icon-badge svg{
  width:19px;
  height:19px;
}
.cta-icon-label{
  font-size:.85rem;
  font-weight:500;
  line-height:1.35;
}

@media (max-width:980px){
  .cta-grid{
    grid-template-columns:1fr;
  }

  .cta-img{
    height:220px;
  }

  .cta-icons{
    border-left:none;
    border-top:1px solid var(--line);
    padding:40px 22px;
  }

  .cta-center{
    padding:50px 22px;
  }
}


/* ============================================================
   HERO QUICKLINKS — MOBILE
   ============================================================ */
@media (max-width:700px){
  .hero__quicklinks{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  .hero__quicklinks a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:7px 12px !important;

    border:1px solid rgba(0,212,255,.65) !important;
    border-radius:999px !important;

    background:rgba(5,13,26,.35) !important;
    color:#fff !important;

    text-decoration:none !important;
    white-space:nowrap !important;

    box-sizing:border-box !important;
  }

  .hero__quicklinks a:hover,
  .hero__quicklinks a:focus{
    border-color:#00d4ff !important;
    background:rgba(0,212,255,.10) !important;
  }
}


/* ============================================================
   HORIZONTAL CAROUSELS — MOBILE
   ============================================================ */
@media (max-width:700px){

  /* ---------- SERVIÇOS ---------- */
  .servicos-track{
    box-sizing:border-box;

    /*
     * Remove o deslocamento lateral usado no desktop
     * para permitir que o primeiro cartão seja centralizado.
     */
    margin-left:0;
    margin-right:0;

    /*
     * O padding lateral cria espaço suficiente para que
     * o cartão seleccionado possa ficar exactamente ao centro.
     */
    padding-left:max(16px, calc((100vw - 320px) / 2));
    padding-right:max(16px, calc((100vw - 320px) / 2));

    scroll-snap-type:x mandatory;
  }

  .servico-card{
    scroll-snap-align:center;
  }


  /* ---------- PORTFÓLIO ---------- */
  .portfolio-track{
    box-sizing:border-box;

    /*
     * Mesmo princípio do carrossel de serviços:
     * retiramos o margin negativo no mobile.
     */
    margin-left:0;
    margin-right:0;

    /*
     * Espaço lateral para permitir o centramento
     * do cartão de 300px.
     */
    padding-left:max(16px, calc((100vw - 300px) / 2));
    padding-right:max(16px, calc((100vw - 300px) / 2));

    scroll-snap-type:x mandatory;
  }

  .portfolio-card{
    scroll-snap-align:center;
  }
}