/* =========================================================
   AUREN — THEME CSS
   Estrutura:
   1) Tokens (variáveis globais)
   2) Reset / Base
   3) Seção + Background
   4) Container interno
   5) Navegação lateral (linha + gemas + ornamento ativo)
   6) Carrossel / Conteúdo (título + descrição)
   7) Navegação inferior (setas, trilho, dots/estrela)
   8) Indicador de scroll
   9) Responsivo
   10) Fallback (sem :has)
   ========================================================= */

/* ========== 1) TOKENS ========== */
:root{
  --rubi:            #b0172a;
  --rubi-soft:       #e24a57;
  --rubi-rgb:        176,23,42;   
  --txt-main:        rgba(233,223,199,.92);
  --z-bg:            0;
  --z-line:          1;
  --z-gem:           2;
  --z-ornament:      3;
  --z-content:       2;
  --z-nav:           5;
  --dot-size:        18px;
  --dot-border:      1.25px;
  --dot-color-rgb:   120,16,24;   
  --dot-glow-rgb:    var(--rubi-rgb);
  --arrow-size:      64px;
  --font-ui:         "Roboto", sans-serif;
  --font-title:      "Cinzel", serif;
  --font-nav:        "Marcellus", serif;
}

/* ========== 2) RESET / BASE ========== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  font-family: var(--font-ui);
  background-color: #0a0a0a; color: #fff;
}

/* ========== 3) SEÇÃO + BACKGROUND ========== */
.team-section{
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;      
}

.team-section-bg{
  position: absolute;
  inset: 0;
  z-index: var(--z-bg, 0); 
  pointer-events: none;    
}
.team-section-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(80% 70% at 50% 20%, rgba(197,161,109,.12), transparent 60%),
    linear-gradient(to bottom, rgba(10,10,15,.85), rgba(10,10,15,.65) 35%, rgba(10,10,15,.88));
  pointer-events: none;
}
.team-section-bg .bg-layer{
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .9s cubic-bezier(.2,.7,.2,1);
  will-change: auto;         
  contain: paint;
  backface-visibility: hidden;
}
.team-section-bg .bg-layer.is-visible{ opacity: 1; }
.team-section-bg.bg-animating .bg-layer{ will-change: opacity; }
.team-section-bg.bg-fast .bg-layer{ transition-duration: .28s; }
.team-section-container{
  position: relative;
  z-index: var(--z-content, 1);
  transform: translateZ(0.001px);  
  will-change: transform;
}
.slide-content,
.content-title,
.content-description{
  position: relative;
  transform: none !important;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ========== 4) CONTAINER INTERNO ========== */
.team-section-container{
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; justify-content: center;
  width: 100%; height: 100%;
  padding: 115px 0 120px;
}

/* =========================================================
   5) NAVEGAÇÃO LATERAL — linha, gemas e ornamento ativo
   ========================================================= */
.team-section-nav {
  position: absolute !important;
  left: clamp(28px, 4vw, 64px) !important;
  top: 30% !important; transform: translateY(-50%) !important;
  z-index: 10;

  /* tokens locais (facilita microajuste) */
  --rail-x:   clamp(1rem, 1.4rem, 1.6rem);   /* eixo da linha */
  --rail-w:   max(2px, .12rem);              /* espessura da linha */
  --gem:      clamp(6px, .22rem, .62rem);    /* tamanho da “gema” losango */
  --gem-gap:  clamp(2rem, 2.4vw, 2.8rem);    /* distância gema → texto */
  --item-gap: clamp(2rem, 1.6vh, 1.7rem);    /* gap vertical */

  /* Ornamento (só no ativo) */
  --orn-url: url("/images/navegation/selector-nav.png");
  --orn-w:   100px;
  --orn-h:   130px;
}

.team-section-nav::before{
  content:""; position:absolute; z-index: var(--z-line);
  left: var(--rail-x); top: -28px; bottom: -28px; width: var(--rail-w);
  background: linear-gradient(
    to bottom,
    rgba(var(--rubi-rgb), 0) 0%,
    rgba(var(--rubi-rgb), .85) 14%,
    rgba(var(--rubi-rgb), .42) 50%,
    rgba(var(--rubi-rgb), .85) 86%,
    rgba(var(--rubi-rgb), 0) 100%
  );
}

.team-section-nav nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap: var(--item-gap);
}
.team-section-nav nav li{
  position: relative; z-index: 1;
  padding-left: calc(var(--rail-x) + var(--rail-w)/2 + var(--gem-gap));
  line-height: 1.2;
}

.team-section-nav nav li::before{
  content:""; position:absolute; z-index: var(--z-gem);
  left: calc(var(--rail-x) + var(--rail-w)/2); top:50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: var(--gem); height: var(--gem);
  background:
    radial-gradient(35% 35% at 50% 50%, var(--rubi-soft), transparent 70%),
    linear-gradient(135deg, #ffbdbd, var(--rubi) 60%, #720f1a 100%);
  box-shadow:
    0 0 10px rgba(var(--rubi-rgb), .55),
    0 0 24px rgba(var(--rubi-rgb), .25);
}

.team-section-nav nav li.is-active::after,
.team-section-nav nav li:has(a.active)::after{
  content:""; position:absolute; z-index: var(--z-ornament);
  left: calc(var(--rail-x) + var(--rail-w)/2); top:50%;
  transform: translate(-50%, -50%);
  width: var(--orn-w); height: var(--orn-h);
  background: var(--orn-url) center/contain no-repeat;
  pointer-events:none;
}
.team-section-nav nav li.is-active::before,
.team-section-nav nav li:has(a.active)::before{ display: none; }

.team-section-nav a{
  font-family: var(--font-nav); font-weight: 600; letter-spacing: .35px;
  display: inline-block; line-height: 1; font-size: clamp(.95rem, 1.05vw, 1.08rem);
  transform-origin: left center; transform: scale(.92);
  opacity: .78;
  background-image:
    linear-gradient(180deg, #efe8e6 0%, #e3d1d1 32%, #b64b4b 66%, #5a0d0d 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    opacity .2s ease, text-shadow .28s ease,
    background-image .28s ease, filter .28s ease, letter-spacing .28s ease;
}
.team-section-nav a:hover{
  opacity: .95; transform: translateX(4px) scale(1.0);
  text-shadow: 0 0 10px rgba(var(--rubi-rgb), .28);
}
.team-section-nav a.active{
  transform: translateX(2px) scale(1.16); opacity: 1; letter-spacing: .4px;
  background-image:
    linear-gradient(180deg, #fff3f3 0%, #ffd9d9 34%, #d44343 70%, #7b1111 100%);
  text-shadow: 0 0 14px rgba(var(--rubi-rgb), .35), 0 2px 10px rgba(0,0,0,.55);
  filter: drop-shadow(0 0 6px rgba(var(--rubi-rgb), .25));
}
.team-section-nav li:has(a.active),
.team-section-nav li.is-active{ z-index: 6; }

/* =========================================================
   6) CARROSSEL / CONTEÚDO (título + descrição)
   ========================================================= */
.team-section-content{
  flex: 0 1 auto; z-index: var(--z-content);
  max-width: 980px; width: min(92vw, 980px); height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  overflow: hidden; padding: 0;
}
.swiper-container{ width: 100%; overflow: hidden; cursor: grab; }
.swiper-container.is-dragging{ cursor: grabbing; }
.swiper-wrapper{ display: flex; will-change: transform; }
.swiper-wrapper.is-animating{ transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.swiper-wrapper.is-dragging{ transition: none !important; }
.swiper-slide{ width: 100%; flex-shrink: 0; padding: 0; }
.slide-content{
  background: none; border: none; box-shadow: none;
  padding: 8px 22px 0; border-radius: 0;
  margin-bottom: 56px; text-align: center;
  transform: translate3d(0,0,0);
  transition: transform .38s cubic-bezier(.2,.7,.2,1);
}

.content-title{
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 3rem); letter-spacing: .5px;
  background-image:
    linear-gradient(180deg, #f5dada 0%, #e7a6a6 28%, var(--rubi) 65%, #5a0c0c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.content-description{
  font-size: clamp(.88rem, 1vw, 1rem); line-height: 1.7;
  max-width: 880px; margin: 0 auto; text-align: center;
  color: rgba(233,223,199,.88);
  text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 0 6px rgba(0,0,0,.35);
}

@keyframes enter-down {
  from { transform: translate3d(0, 26px, 0) scale(0.995); }
  to   { transform: translate3d(0, 0, 0)   scale(1); }
}
@keyframes enter-up {
  from { transform: translate3d(0,-26px, 0) scale(0.995); }
  to   { transform: translate3d(0, 0, 0, )  scale(1); }
}

.slide-content.anim-enter-down{
  animation: enter-down .38s cubic-bezier(.22,.9,.2,1);
  will-change: transform;
}
.slide-content.anim-enter-up{
  animation: enter-up .38s cubic-bezier(.22,.9,.2,1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce){
  .slide-content.anim-enter-down,
  .slide-content.anim-enter-up{
    animation: none !important;
  }
}

/* =========================================================
   7) NAVEGAÇÃO INFERIOR — setas, trilho e dots/estrela
   ========================================================= */
.content-navigator{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(11% + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: var(--z-nav);
  --arrow-size: 64px;                 
  --rail-side-pad: calc(var(--arrow-size) / 2 + 4px);
  
}

.content-navigator::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  z-index: 0;                         
  pointer-events: none;

  background:
    linear-gradient(to right,
      rgba(var(--rubi-rgb), 0) 0%,
      rgba(var(--rubi-rgb), .25) 8%,
      rgba(var(--rubi-rgb), .55) 50%,
      rgba(var(--rubi-rgb), .25) 92%,
      rgba(var(--rubi-rgb), 0) 100%);
  box-shadow:
    0 0 10px rgba(var(--rubi-rgb), .25),
    0 0 24px rgba(var(--rubi-rgb), .15);
}

.nav-dots{
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 10px 26px;
  z-index: 2;
}

.nav-arrow{
  position: relative;
  z-index: 2;
  width: var(--arrow-size);
  height: var(--arrow-size);
  background: url("/images/navegation/arrow-nav.png") center/contain no-repeat;
  border: 0; outline: 0;
  cursor: pointer; color: transparent; font-size: 0;
  filter: brightness(.95) contrast(1) drop-shadow(0 0 4px rgba(0,0,0,.65));
  transition: filter .25s ease;
}
.nav-arrow.prev{ transform: none; }
.nav-arrow.next{ transform: scaleX(-1); }
.nav-arrow:hover{ filter: brightness(1.4) contrast(1.2); }
.dot{
  width: var(--dot-size); height: var(--dot-size); border-radius: 50%;
  display: inline-block; position: relative; z-index: 2; transform: translateZ(0);
  background:
    radial-gradient(circle at 50% 55%,
      rgba(var(--dot-color-rgb), .06) 0%,
      rgba(var(--dot-color-rgb), .02) 60%,
      transparent 61%);
  border: var(--dot-border) solid rgba(var(--dot-color-rgb), .55);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.35),
    0 0 8px rgba(var(--dot-glow-rgb), .12);
  opacity: .9;
  transition: transform .22s ease, border-color .22s ease,
              box-shadow .22s ease, background .22s ease, opacity .22s ease;
}
.dot:hover,
.dot:focus-visible{
  transform: scale(1.14);
  border-color: rgba(var(--dot-color-rgb), .85);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.4),
    0 0 10px rgba(var(--dot-glow-rgb), .28),
    0 0 20px rgba(var(--dot-glow-rgb), .18);
}

.dot.active{
  all: unset; display: inline-block; vertical-align: middle; z-index: 3;
  width: 40px; height: 40px; transform: translateY(0);
  background: url("/images/navegation/dot-nav.png") center/contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(var(--dot-glow-rgb), .55))
          drop-shadow(0 0 5px rgba(var(--dot-glow-rgb), .28));
  transition: transform .22s ease, filter .22s ease;
}
.dot.active:hover{ transform: scale(1.05); }

@media (prefers-reduced-motion: no-preference){
  .dot:hover::after{
    content: ""; position: absolute; inset: -6px; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--dot-glow-rgb), .18), transparent 60%);
    filter: blur(4px); pointer-events: none;
    animation: dot-breathe 700ms ease-out forwards;
  }
  @keyframes dot-breathe{ from{opacity:0; transform:scale(.9)} to{opacity:1; transform:scale(1)} }
}

/* =========================================================
   8) INDICADOR DE SCROLL (decorativo)
   ========================================================= */
.scroll-down-indicator{
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  width: 1px; height: 78px; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(197,161,109,0),
    rgba(197,161,109,.35) 40%,
    rgba(197,161,109,0) 100%);
}
.scroll-down-indicator::after{
  content:""; position:absolute; left:50%; bottom:-5px; transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px; border-radius: 2px;
  background: linear-gradient(135deg,#f6e7c9,#c5a16d);
  box-shadow: 0 0 16px rgba(197,161,109,.55);
  animation: pulse 2.2s infinite ease-in-out;
}
@keyframes pulse{
  0%,100%{ transform: translateX(-50%) rotate(45deg) scale(1); opacity: 1; }
  50%{ transform: translateX(-50%) rotate(45deg) scale(1.15); opacity: .85; }
}

/* =========================================================
   9) RESPONSIVO
   ========================================================= */
@media (max-width: 1100px){
  .team-section-nav{ left: 40px; }
  .content-navigator{ bottom: calc(9.5% + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 880px){
  .team-section-container{
    flex-direction: column; align-items: center; justify-content: flex-end;
    padding: 80px 0 100px;
  }
  .team-section-nav{
    position: static !important; transform: none !important;
    margin: 0 24px 16px; background: none !important; filter: none;
  }
  .team-section-nav nav ul{ flex-direction: row; flex-wrap: wrap; gap: .75rem 1rem; }
  .team-section-nav nav li{ padding-left: 0; }
  .team-section-nav nav li::before,
  .team-section-nav nav li::after{ display: none !important; }

  .team-section-content{ width: 92vw; }
  .content-title{ font-size: clamp(1.5rem, 4.2vw, 2.2rem); }
  .content-description{ font-size: .9rem; }
  .slide-content{ margin-bottom: 44px; }
  .content-navigator{ bottom: calc(8.5% + env(safe-area-inset-bottom, 0px)); }

  .nav-arrow{ width: 48px; height: 48px; }  
}

/* =========================================================
   10) FALLBACK — se o JS marcar .is-active 
   ========================================================= */
.team-section-nav li.is-active::before{ display: none; }
.team-section-nav li.is-active::after{
  content:""; position: absolute; left: var(--rail-x); top: 50%;
  width: var(--orn-w); height: var(--orn-h);
  transform: translate(-50%, -50%);
  background: var(--orn-url) center/contain no-repeat;
  pointer-events: none; z-index: var(--z-ornament);
  filter: drop-shadow(0 0 10px rgba(var(--rubi-rgb), .55))
          drop-shadow(0 0 24px rgba(var(--rubi-rgb), .28));
}

/* =========================
   951px–1360px 
========================= */
@media (min-width: 951px) and (max-width: 1360px) {
  .team-section .content-title {
    font-size: clamp(2.1rem, 2.4vw, 2.6rem);
    letter-spacing: .35px;
    line-height: 1.18;
  }
  .team-section .content-description {
    font-size: clamp(.9rem, .95vw, 1rem);
    line-height: 1.65;
    max-width: 860px;
    margin: 0 auto;
  }
  .team-section .slide-content { margin-bottom: 48px; }
  .team-section .content-navigator {
    bottom: calc(10% + env(safe-area-inset-bottom, 0px));
  }
}

/* =========================================================
   MOBILE/TABLET (≤950px)
========================================================= */
.team-section.ts-mobile {
  --mob-pad-top:    clamp(56px, 7vh, 84px);    
  --mob-pad-bottom: clamp(120px, 16vh, 180px); 
  --dot-size: 24px;
  --dot-border: 1.8px;
}

.team-section.ts-mobile .team-section-nav {
  position: absolute !important;
  top: clamp(12px, 4vh, 28px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 16px !important;
  text-align: center !important;
  background: none !important;
  filter: none !important;
  z-index: 12 !important; 
}

.team-section.ts-mobile .team-section-nav::before,
.team-section.ts-mobile .team-section-nav nav li::before,
.team-section.ts-mobile .team-section-nav nav li::after { display: none !important; content: none !important; }
.team-section.ts-mobile .team-section-nav nav ul {
  display: flex !important;
  justify-content: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
}
.team-section.ts-mobile .team-section-nav nav li { display: none !important; padding-left: 0 !important; }
.team-section.ts-mobile .team-section-nav nav li.is-active,
.team-section.ts-mobile .team-section-nav nav li:has(a.active) { display: block !important; }
.team-section.ts-mobile .team-section-nav a {
  display: inline-block !important;
  font-size: clamp(1rem, 4.2vw, 1.28rem) !important;
  line-height: 1.18 !important;
  letter-spacing: .28px !important;
  transform: none !important;
  opacity: .96 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.6) !important;
}

.team-section.ts-mobile .team-section-container{
  padding: var(--mob-pad-top) 16px var(--mob-pad-bottom) !important; 
  justify-content: flex-start !important;
  align-items: center !important;
}
.team-section.ts-mobile .team-section-content{
  width: min(92vw, 880px) !important;
  max-width: 880px !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.team-section.ts-mobile .slide-content{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  min-height: calc(100dvh - var(--mob-pad-top) - var(--mob-pad-bottom)) !important;
  padding: 0 6px !important;
  margin: 0 !important;
}

.team-section.ts-mobile .content-title{
  margin-top: auto !important;          
  margin-bottom: 10px !important;
  font-size: clamp(1.1rem, 4.6vw, 1.8rem) !important;
  line-height: 1.16 !important;
  letter-spacing: .25px !important;
}
.team-section.ts-mobile .content-description{
  font-size: clamp(.85rem, 3.4vw, .98rem) !important;
  line-height: 1.62 !important;
  max-width: 40ch !important;
  margin: 0 auto 0 !important;         
}
.team-section.ts-mobile .nav-arrow{ display: none !important; }
.team-section.ts-mobile .content-navigator{
  gap: 0 !important;
  bottom: clamp(58px, 15vh, 110px) !important; 
}
.team-section.ts-mobile .nav-dots{
  gap: clamp(18px, 5vw, 26px) !important;
  padding: 12px clamp(16px, 3.5vw, 24px) !important;
}
.team-section.ts-mobile .dot.active{
  width: clamp(46px, 6.8vw, 56px) !important;
  height: clamp(46px, 6.8vw, 56px) !important;
}

@media (max-width: 420px){
  .team-section.ts-mobile .content-title{
    font-size: clamp(1rem, 5vw, 1.4rem) !important;
  }
  .team-section.ts-mobile .content-description{
    font-size: clamp(.8rem, 3.8vw, .92rem) !important;
    line-height: 1.58 !important;
    max-width: 38ch !important;
  }
  .team-section.ts-mobile .nav-dots{
    gap: 18px !important;
    padding: 8px 12px !important;
  }
}

/* =========================
   FALLBACK (sem :has) 
========================= */
.team-section-nav li.is-active::before{ display: none; }
.team-section-nav li.is-active::after{
  content:""; position: absolute; left: var(--rail-x); top: 50%;
  width: var(--orn-w); height: var(--orn-h);
  transform: translate(-50%, -50%);
  background: var(--orn-url) center/contain no-repeat;
  pointer-events: none; z-index: var(--z-ornament);
  filter: drop-shadow(0 0 10px rgba(var(--rubi-rgb), .55))
          drop-shadow(0 0 24px rgba(var(--rubi-rgb), .28));
}

.team-section.ts-mobile {
  --mob-gap-to-rail: clamp(34px, 12vh, 50px); 
}
.team-section.ts-mobile .slide-content{
  justify-content: flex-end !important;          
  padding-bottom: var(--mob-gap-to-rail) !important;
  margin-bottom: 0 !important;                     
}

.team-section.ts-mobile .content-title{
  margin-top: 0 !important;
  margin-bottom: 10px !important;                
}

.team-section.ts-mobile .content-description{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* =========================
   MOBILE/TABLET 
   ========================= */
.team-section.ts-mobile .team-section-content{
  width: min(96vw, 980px) !important;
}

.team-section.ts-mobile .slide-content{
  max-width: min(94vw, 940px) !important;
}

.team-section.ts-mobile .content-description{
  max-width: clamp(48ch, 92vw, 80ch) !important;
}

@media (max-width: 420px){
  .team-section.ts-mobile .content-description{
    max-width: clamp(46ch, 94vw, 72ch) !important;
  }
}