/* ========== RESET & BASE ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
img { max-width: 100%; display: block; }

body {
  font-family: 'Poppins', sans-serif !important;
  background-color: #fff;
  color: #000;
  line-height: 1.6;
}

/* ====== TIPOGRAFIA GLOBAL ====== */
:root{
  --title-color: #6a6a6a; /* títulos */
  --text-color:  #8a8a8a; /* parágrafos */
}

/* Títulos globais */
h1, h2, h3, h4, h5, h6{
  font-family: 'Poppins', sans-serif !important;
  color: var(--title-color) !important;
  font-weight: 600 !important;
  line-height: 1.3;
  letter-spacing: .02em;
}

/* Textos gerais */
p,
.box-text,
.serifada,
.overlay-card p,
.sobre-nos-card p,
.oe-card p,
.carrossel-section p{
  font-family: 'Poppins', sans-serif !important;
  color: var(--text-color) !important;
  line-height: 1.6 !important;
}

/* Exceções (cursivo) */
.site-title,
.sticky-title{
  font-family: 'Alex Brush', cursive !important;
}


/* EXCEÇÕES (mantêm Alex Brush) */
.site-title,
.sticky-title {
  font-family: 'Alex Brush', cursive;
  /* mantém as cores que você já definiu para esses títulos */
}

/* Utilitário opcional: para NÃO aplicar o padrão em um bloco específico,
   basta colocar class="keep-style" no container. */
.keep-style h1, .keep-style h2, .keep-style h3,
.keep-style h4, .keep-style h5, .keep-style h6,
.keep-style p { all: revert; }

body {
  font-family: 'Poppins', sans-serif;
  background: #fff;
  color: #5a5a5a; /* cor do corpo aprovada */
  line-height: 1.6;
}

/* ========== REVEAL (scroll-in) ========== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========== STICKY HEADER ========== */
.sticky-header{
  position: fixed; top: 0; left: 0; right: 0; height: 60px;
  background: rgba(0,0,0,0.95);
  display: none; align-items: center; justify-content: center;
  z-index: 999; box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.sticky-header.visible{ display: flex; }
.sticky-title{
  font-family: 'Alex Brush', cursive;
  font-size: 2rem; color: #fff; letter-spacing: 1px;
}

/* ========== HERO ========== */
.hero-section{
  position: relative;
  height: 100vh; width: 100%;
  background: url('Imagens/fundoprincipal.jpg.jpeg') center/cover no-repeat;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 60px; overflow: hidden; z-index: 1;
}
.hero-section::before{
  content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0,0.65); z-index: 0;
}

/* névoa / glow atrás do título */
.fog-background{
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 320px; height: 85px; background: #000;
  filter: blur(30px); z-index: 1; border-radius: 50px;
}

/* título da marca */
.site-title{
  font-family: 'Alex Brush', cursive; /* título cursivo aprovado */
  font-size: 3.8em; color: #c49b63; /* cor aprovada */
  text-align: center; width: 100%;
  position: absolute; top: 30px; left: 0; z-index: 2;
  letter-spacing: 2px;
}

/* caixa de mensagem no hero */
.overlay-box{
  position: relative; z-index: 2;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(30px);
  padding: 35px 45px; max-width: 460px; margin-top: 150px;
  filter: drop-shadow(0 0 60px rgba(255,255,255,0.2)) drop-shadow(0 0 25px rgba(0,0,0,0.2));
}
.box-text{
  font-family: 'Poppins', sans-serif;
  font-size: 1.4em; color: #5a5a5a; /* cor do corpo aprovada */
  line-height: 1.5;
}

/* ========== CARROSSEL #1 (60/40) ========== */
.carrossel-section{
  position: relative; z-index: 2;
  display: flex; width: 100%; height: 80vh;
}
.left-side{ width: 40%; background: #fff; }
.right-side{ width: 60%; background: #000; position: relative; overflow: hidden; }

.carousel-container{
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.carousel-images{
  position: relative; width: 100%; height: 100%;
}
.carousel-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: none;
}
.carousel-img.active{ display: block; }

.carousel-btn{
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 2em; background: rgba(255,255,255,0.85);
  border: none; padding: 8px 12px; cursor: pointer;
  z-index: 3; color: #333;
}
.carousel-btn.prev{ left: 18px; }
.carousel-btn.next{ right: 18px; }
.carousel-btn:hover{ background: #fff; }

.overlay-card{
  position: absolute; top: 22%;
  left: calc(40% - 264px);
  width: 440px; background: #ffffffd0;
  padding: 20px 30px; border-radius: 0;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  z-index: 5;
}
.cursive-title{
  font-family: 'Alex Brush', cursive; /* títulos cursivos aprovados */
  font-size: 1.8em; line-height: 1.3; color: #c49b63; /* cor aprovada */
  margin-bottom: 10px;
}

/* ========== SOBRE A WOODWAY (carrossel #2 alto, borda reta) ========== */
.sobre-woodway{
  --alt: 96vh;
  --invade: 8vw;
  --card-w: clamp(380px,36vw,560px);
  --card-top: 42vh;

  position: relative;
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: center;
  min-height: max(120vh, var(--alt));
  background: #fff;
  overflow: visible;
}

.sobre-woodway .fundo-preto{
  grid-column: 1 / 2;
  background: url('Imagens/preto.png') center/cover no-repeat #000;
  min-height: inherit;
}
.sobre-woodway .fundo-branco{
  grid-column: 2 / 3;
  background: #fff;
  min-height: inherit;
}

.sobre-woodway .sobre-carousel-wrap{
  position: absolute;
  top: 50%;
  left: 6vw;
  transform: translateY(-50%) translateX(var(--invade));
  z-index: 2;
}

.sobre-woodway .about-carousel{
  height: var(--alt);
  aspect-ratio: 3 / 4;
  max-width: min(620px, 32vw);
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 32px 64px rgba(0,0,0,0.35);
  background: #111;
  position: relative;
}
.sobre-woodway .about-slide{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: none;
}
.sobre-woodway .about-slide.active{ display: block; }

.sobre-woodway .about-prev,
.sobre-woodway .about-next{
  position: absolute; top: 50%; transform: translateY(-50%);
  border: 0; background: rgba(255,255,255,0.85);
  font-size: 2rem; padding: 8px 12px; cursor: pointer; z-index: 3; color:#333;
}
.sobre-woodway .about-prev{ left: 12px; }
.sobre-woodway .about-next{ right: 12px; }

.sobre-woodway .sobre-nos-card{
  position: absolute;
  top: var(--card-top);
  right: clamp(4vw, 6vw, 90px);
  transform: translateY(-50%);
  width: var(--card-w);
  background: #fff; color: #222;
  border-radius: 0;
  box-shadow: 0 30px 70px rgba(0,0,0,.15);
  padding: clamp(22px, 3vw, 32px);
  z-index: 4;
}
.sobre-woodway .sobre-nos-card .cursiva{
  font-family: 'Alex Brush', cursive; /* cursivo aprovado */
  font-size: clamp(28px, 3.2vw, 40px);
  margin: 0 0 10px;
  line-height: 1.1; color: #c49b63; /* cor aprovada */
}
.sobre-woodway .sobre-nos-card .serifada{
  font-family: 'Poppins', sans-serif;
  color: #5a5a5a; /* corpo aprovado */
  line-height: 1.6;
}




:root{
  /* Cores e tipografia */
  --ww-black: #000;
  --ww-white: #fff;
  --ww-title: #6a6a6a;
  --ww-text:  #8a8a8a;

  /* Efeitos */
  --ww-shadow: 0 28px 80px rgba(0,0,0,.26), 0 12px 36px rgba(0,0,0,.18);

  /* Dimensões ajustadas */
  --ww-stripe-w: clamp(160px, 17vw, 260px);  /* levemente menor */
  --ww-stripe-gap: clamp(20px, 2.5vw, 36px); /* menos espaço entre elas */
  --ww-stripe-over: clamp(60px, 10vh, 140px);

  /* Área preta (direita) */
  --ww-black-left: 40%;
  --ww-black-w:    60%;

  /* Centralização automática */
  --ww-stripes-total: calc(3 * var(--ww-stripe-w) + 2 * var(--ww-stripe-gap));
  --ww-stripes-offset: calc((var(--ww-black-w) - var(--ww-stripes-total)) / 2);
}

.ww-bloco{
  position: relative;
  min-height: 84vh;
  padding: clamp(40px, 6vw, 90px) 0;
  overflow: visible;
  isolation: isolate;
}

.ww-split-bg{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--ww-white) 0%,
    var(--ww-white) var(--ww-black-left),
    var(--ww-black) var(--ww-black-left),
    var(--ww-black) 100%
  );
  z-index: 0;
}

.ww-stripe{
  position: absolute;
  top: calc(-1 * var(--ww-stripe-over));
  height: calc(100% + var(--ww-stripe-over) * 2);
  width: var(--ww-stripe-w);
  overflow: hidden;
  border-radius: 0;
  box-shadow: var(--ww-shadow);
  z-index: 2;
}

.ww-stripe img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

.ww-stripe-1{
  left: calc(var(--ww-black-left) + var(--ww-stripes-offset));
}
.ww-stripe-2{
  left: calc(var(--ww-black-left) + var(--ww-stripes-offset) + var(--ww-stripe-w) + var(--ww-stripe-gap));
}
.ww-stripe-3{
  left: calc(var(--ww-black-left) + var(--ww-stripes-offset) + (var(--ww-stripe-w) + var(--ww-stripe-gap)) * 2);
}

.ww-card{
  position: absolute;
  z-index: 3;
  left: 28%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: min(620px, 44vw);
  background: var(--ww-white);
  border-radius: 14px;
  box-shadow: var(--ww-shadow);
  padding: clamp(22px, 3.2vw, 34px) clamp(22px, 3.5vw, 44px);
  opacity: 0;
  translate: 0 16px;
  transition: opacity .6s ease, translate .6s ease;
}

.ww-card.show{ opacity: 1; translate: 0 0; }

.ww-card h3{
  margin: 0 0 6px 0;
  font-weight: 600;
  font-size: clamp(22px, 2.3vw, 28px);
  color: var(--ww-title);
}
.ww-card p{
  margin: 6px 0 0;
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--ww-text);
}

/* Fundo dividido com parte preta mais alta */
.ww-split-bg{
  position: absolute;
  inset: 0;
  background: var(--ww-white);
  z-index: 0;
}

.ww-split-bg::after{
  content: "";
  position: absolute;
  top: -20px; /* ajusta aqui o quanto quer subir para encaixar */
  right: 0;
  width: 60%; /* parte preta ocupa 60% da largura */
  height: calc(100% + 40px); /* aumenta para compensar o top negativo */
  background: var(--ww-black);
  z-index: -1;
}



.ww-card{
  position: absolute;
  z-index: 3;
  /* Ajusta para ficar um pouco sobre a listra esquerda e entrar no branco */
  left: calc(40% - 40px);
  top: 52%;
  transform: translateX(-70%) translateY(-50%);
  
  width: min(620px, 44vw);
  background: var(--ww-white);
  border-radius: 0;
  box-shadow: var(--ww-shadow);
  padding: clamp(22px, 3.2vw, 34px) clamp(22px, 3.5vw, 44px);

  opacity: 0;
  translate: 0 16px;
  transition: opacity .6s ease, translate .6s ease;
}

.ww-card.show{ 
  opacity: 1; 
  translate: 0 0; 
}

.ww-card h3{
  margin: 0 0 6px 0;
  font-weight: 600;
  font-size: clamp(22px, 2.3vw, 28px);
  color: var(--ww-title);
}

.ww-card p{
  margin: 6px 0 0;
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--ww-text);
}







/* ========== PROCESSO WOODWAY (carrossel #3 alto, borda reta) ========== */
.processo-woodway{
  --alt: 92vh;            /* altura do carrossel */
  --invade: 7vw;          /* quanto invade a área branca */
  --card-w: clamp(360px, 34vw, 540px);
  --card-top: 44vh;       /* posição vertical do card */

  position: relative;
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: center;
  min-height: max(110vh, var(--alt));
  background: #fff;
  overflow: visible;
}

.processo-woodway .fundo-preto{
  grid-column: 1 / 2;
  background: url('Imagens/preto.png') center/cover no-repeat #000;
  min-height: inherit;
}
.processo-woodway .fundo-branco{
  grid-column: 2 / 3;
  background: #fff;
  min-height: inherit;
}

/* wrapper posicionado e invadindo a coluna branca */
.processo-woodway .proc-carousel-wrap{
  position: absolute;
  top: 50%;
  left: 6vw;
  transform: translateY(-50%) translateX(var(--invade));
  z-index: 2;
}

/* carrossel alto, 3:4, borda reta (sem radius) e sombra */
.processo-woodway .proc-carousel{
  height: var(--alt);
  aspect-ratio: 3 / 4;
  max-width: min(620px, 32vw);
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 32px 64px rgba(0,0,0,0.35);
  background: #111;
  position: relative;
}

/* slides: troca limpa (sem efeito) */
.processo-woodway .proc-slide{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: none;
}
.processo-woodway .proc-slide.active{ display: block; }

/* botões */
.processo-woodway .proc-prev,
.processo-woodway .proc-next{
  position: absolute; top: 50%; transform: translateY(-50%);
  border: 0; background: rgba(255,255,255,0.85);
  font-size: 2rem; padding: 8px 12px; cursor: pointer; z-index: 3; color:#333;
}
.processo-woodway .proc-prev{ left: 12px; }
.processo-woodway .proc-next{ right: 12px; }

/* card branco sobreposto */
.processo-woodway .proc-card{
  position: absolute;
  top: var(--card-top);
  right: clamp(4vw, 6vw, 90px);
  transform: translateY(-50%);
  width: var(--card-w);
  background: #fff; color: #222;
  border-radius: 0;
  box-shadow: 0 30px 70px rgba(0,0,0,.15);
  padding: clamp(22px, 3vw, 32px);
  z-index: 4;
}

/* tipografia aprovada */
.processo-woodway .proc-card .cursiva{
  font-family: 'Alex Brush', cursive;
  font-size: clamp(28px, 3.2vw, 40px);
  margin: 0 0 10px;
  line-height: 1.1; color: #c49b63;
}
.processo-woodway .proc-card .serifada{
  font-family: 'Poppins', sans-serif;
  color: #5a5a5a;
  line-height: 1.6;
}

/* responsivo */
@media (max-width: 1100px){
  .processo-woodway{
    --alt: 88vh;
    grid-template-columns: 44% 56%;
  }
}
@media (max-width: 900px){
  .processo-woodway{
    --alt: 80vh; --invade: 0; --card-top: 48vh;
    grid-template-columns: 100%;
    min-height: calc(var(--alt) + 56vh);
  }
  .processo-woodway .fundo-preto{ grid-column: 1 / -1; min-height: var(--alt); }
  .processo-woodway .fundo-branco{ display: none; }
  .processo-woodway .proc-carousel-wrap{
    left: 50%; transform: translate(-50%, -50%);
  }
  .processo-woodway .proc-carousel{
    max-width: min(78vw, 560px);
  }
  .processo-woodway .proc-card{
    position: relative; top: auto; right: auto; transform: none;
    margin: clamp(18px, 4vw, 32px) auto 8vh;
    width: min(92vw, 640px);
  }
}













/* CTA FINAL (sem efeito) */
.cta-final{
  background:#fff;
  padding: clamp(32px, 6vw, 64px) 4vw;
  display:flex; align-items:center; justify-content:center;
  border-top:1px solid #e9e9e9;
  position: relative; z-index: 5; /* garante que não fica escondida */
}
.btn-orcamento{
  font-family:'Poppins', sans-serif;
  letter-spacing:.06em;
  font-size: clamp(14px, 1.1vw, 16px);
  padding: 16px 32px;
  border:2px solid #8a8a8a;
  color:#6a6a6a;
  background:transparent;
  text-decoration:none;
  transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn-orcamento:hover{ 
  background:#111; color:#fff; border-color:#111; transform: translateY(-2px);
}

/* Rodapé cinza “Woodway” (sem efeito) */
.footer-woodway{
  background:#f2f2f2;
  padding: clamp(28px, 5vw, 56px) 4vw;
  color:#6a6a6a;
  position: relative; z-index: 5;
}
.footer-inner{
  max-width: 1200px; margin: 0 auto;
  display:flex; flex-direction:column; align-items:center; gap: 18px;
  text-align:center;
}
.footer-brand{
  font-family:'Poppins', sans-serif;
  font-weight:500;
  font-size: clamp(22px, 2vw, 28px);
}
.footer-social{
  display:flex; align-items:center; justify-content:center; gap: 18px;
}
.icon-btn{
  width:42px; height:42px; display:grid; place-items:center;
  border:1px solid #d6d6d6; border-radius:50%;
  background:#fff; text-decoration:none; 
  transition: transform .2s ease, box-shadow .2s ease;
}
.icon-btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }

/* cor base e estados do link */
.footer-social .icon-btn,
.footer-social .icon-btn:link,
.footer-social .icon-btn:visited { color:#6a6a6a; }

.footer-social .icon-btn:hover { color:#111; }




/* ===================== */
/* ==== PATCH FINAL ==== */
/* ===================== */

/* 1) Títulos sem cursiva (tipo Arial/Poppins) */
:root { --ww-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", Helvetica, "Noto Sans", "Liberation Sans", sans-serif; }

.site-title,
.sticky-title,
.cursive-title,
.cursiva {
  font-family: var(--ww-sans) !important;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Ajuste fino do tamanho do título principal */
.site-title { font-size: clamp(2.2rem, 6vw, 3.8rem); }

/* 2) Responsividade adicional (hero + carrossel #1 + listras + CTA/footer) */
.main-content{ overflow-x:hidden; }

@media (max-width: 1024px){
  .hero-section{ height: 88vh; padding: 48px 6vw; }
  .fog-background{ width: clamp(180px, 32vw, 320px); height: clamp(48px, 7vw, 85px); }
  .overlay-card{ left: calc(40% - 220px); width: 400px; }
}

@media (max-width: 900px){
  .hero-section{ height: auto; min-height: 80vh; padding: 14vh 6vw 8vh; }
  .overlay-box{ margin-top: clamp(60px, 12vh, 150px); max-width: min(520px, 90vw); padding: clamp(18px, 3.2vw, 28px); }
  .carrossel-section{ height: auto; min-height: 68vh; }
}

@media (max-width: 768px){
  /* Carrossel #1 empilhado */
  .carrossel-section{ flex-direction: column; }
  .left-side, .right-side{ width: 100%; }
  .left-side{ min-height: 120px; }
  .right-side{ min-height: 46vh; }
  .overlay-card{ position: static; margin: 14px auto 0; width: min(560px, 92vw); }

  /* Sobre Woodway (split vira blocos) */
  .sobre-woodway{ grid-template-columns: 1fr; min-height: auto; padding-bottom: 8vh; }
  .sobre-woodway .fundo-preto{ grid-column: 1; min-height: 48vh; }
  .sobre-woodway .fundo-branco{ grid-column: 1; min-height: 40vh; }
  .sobre-woodway .sobre-carousel-wrap{ position: relative; top: auto; left: auto; transform: none; display:flex; justify-content:center; margin-top: -18vh; }
  .sobre-woodway .about-carousel{ height: 62vh; max-width: 88vw; }
  .sobre-woodway .sobre-nos-card{ position: relative; top: auto; right: auto; transform: none; width: min(92vw, 640px); margin: clamp(16px, 4vw, 28px) auto 0; }

  /* Listras */
  .ww-bloco{ padding: 10vh 0 12vh; }
  .ww-stripe{ width: 44vw; height: auto; aspect-ratio: 2/3; top: 0; }
  .ww-stripe-1{ left: 8%; top: 2vh; }
  .ww-stripe-2{ left: 30%; top: 16vh; }
  .ww-stripe-3{ left: 54%; top: 30vh; }
  .ww-card{ position: relative; left: auto; top: auto; transform: none; width: min(92vw, 640px); margin: 26vh auto 0; }
}

@media (max-width: 480px){
  .hero-section{ padding: 12vh 5vw 8vh; }
  .overlay-box{ padding: 14px 16px; }
  .right-side{ min-height: 40vh; }
  .ww-stripe{ width: 64vw; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
  .ww-stripe-1{ left: 10%; top: 2vh; }
  .ww-stripe-2{ left: 22%; top: 14vh; }
  .ww-stripe-3{ left: 34%; top: 26vh; }
  .ww-card{ margin-top: 22vh; padding: 16px 18px; }
  .processo-woodway .proc-card{ padding: 16px 18px; }
  .btn-orcamento{ width: 100%; text-align: center; }
}








/* ===== FIX MOBILE: Carrossel #1 não aparece (altura 0 em iOS/Android) ===== */
@media (max-width: 768px){
  /* deixa a seção livre para crescer conforme o carrossel */
  .carrossel-section{ height: auto; }

  /* não força min-height aqui; quem define a altura é o aspect-ratio do carrossel */
  .right-side{ min-height: 0; }

  /* define uma razão de aspecto para o carrossel (ajusta se quiser mais alto) */
  .carousel-container{
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 10;  /* experimente 16/9 ou 4/3 conforme as fotos */
    height: auto;           /* evita % no mobile */
    position: relative;     /* garante referência para os slides absolutos */
  }

  .carousel-images{
    position: relative;
    width: 100%;
    height: 100%;           /* agora funciona porque há aspect-ratio */
    overflow: hidden;
  }

  .carousel-img{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: none;
  }
  .carousel-img.active{ display: block; }
}








/* ==== FIX MOBILE: Sobre a Woodway (carrossel #2) – faixas sobrando ==== */
@media (max-width: 768px){
  /* definimos a altura da faixa preta (ajuste fino se quiser) */
  .sobre-woodway{
    --pretoH: 58vh; /* tente 54–66vh conforme suas imagens */
    display: block;
    padding: 6vh 6vw 8vh;
    min-height: auto;
    /* o fundo dividido vira um gradiente vertical que acompanha a altura do carrossel */
    background:
      linear-gradient(to bottom, #000 0 var(--pretoH), #fff var(--pretoH) 100%);
  }

  /* escondemos as divs de fundo para não duplicarem a faixa */
  .sobre-woodway .fundo-preto,
  .sobre-woodway .fundo-branco{
    display: none !important;
  }

  /* centraliza o carrossel e remove offsets absolutos */
  .sobre-woodway .sobre-carousel-wrap{
    position: relative;
    top: auto; left: auto; transform: none;
    margin: 0 auto;
    display: flex; justify-content: center;
    z-index: 2;
  }

  /* o carrossel ocupa (faixa preta) - uma folga de respiro */
  .sobre-woodway .about-carousel{
    height: calc(var(--pretoH) - 8vh);
    max-width: 88vw;
    aspect-ratio: 3 / 4; /* garante proporção estável */
    box-shadow: 0 32px 64px rgba(0,0,0,0.35);
  }

  /* o card vem logo abaixo, já no fundo branco */
  .sobre-woodway .sobre-nos-card{
    position: relative;
    top: auto; right: auto; transform: none;
    width: min(92vw, 640px);
    margin: clamp(16px, 4vw, 28px) auto 0;
    z-index: 3;
  }
}

/* ajuste extra para ecrãs muito pequenos */
@media (max-width: 480px){
  .sobre-woodway{ --pretoH: 64vh; } /* um pouco mais alto nos 360–414px */
  .sobre-woodway .about-carousel{ height: calc(var(--pretoH) - 7vh); }
}




/* ===== Força remoção dos botões do carrossel "Sobre a Woodway" ===== */
.about-carousel > .about-prev,
.about-carousel > .about-next,
.sobre-woodway .about-prev,
.sobre-woodway .about-next {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}



@media (min-width:0){
  .sobre-woodway .about-carousel > button.about-prev,
  .sobre-woodway .about-carousel > button.about-next {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}
/* Mata só as setas do carrossel "Sobre a Woodway" por CSS */
.sobre-woodway .about-carousel > button.about-prev,
.sobre-woodway .about-carousel > button.about-next {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}