/* =========================
   HERO • Shelfinder (SVG de fundo, sem distorção)
   ========================= */

:root{
  --hero-frame: clamp(16px, 4vw, 40px); /* respiro ao redor da hero */
  --maxw: 1100px;

  --file: #0B0B0C;  /* preto global */
  --text: #fff;
  --muted: #9aa4b2;
  --pin-green: #06848f; /* #0B8494; #037983*/
  --orange-gradient: linear-gradient(90deg, #ff3e6c, #FF9FB6);
  --purpleorange-gradient: linear-gradient(90deg,#7549F2,#DF58D2,#ED787C);
  --redblue-gradient: linear-gradient(90deg, #E1704F, #CF617E, #6B84BC);
  --peachpink-gradient: linear-gradient(90deg, #FC646B, #FF68BE);
  --shortcut-blue-gradient: linear-gradient(90deg,#3689CD,#3B9AE8);

  /* Paleta/base das teclas (reaproveitando sua config) */
  --bg: #FF9FB6;           /* fundo da section (true-pink) */
  --cap: #eaf6f4;
  --cap-accent: #6e6b7b;
  --legend: #263238;
  --shadow: rgba(14,20,34,.4);
  --depth: 0px;
  --press: 6px;
  --radius: 12px;
  
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text","SF Pro Display",
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji","Segoe UI Emoji";

}

html, body { height: 100%; }
body{
  margin: 0;
  background: var(--file);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* GSAP ScrollTrigger */
.reveal-up,
.reveal-down,
.reveal-left,
.reveal-right,
.reveal-zoom,
.reveal-fade {
  will-change: transform, opacity;
}

/* Só fica invisível quando o JS aplicar .reveal-hide */
.reveal-hide { opacity: 0; }


.btn {
    border-radius: 63px !important;
    width: 280px !important;
    padding: 15px !important;
}
/* Wrapper: só padding externo da seção */
.hero-wrap{
  padding: var(--hero-frame);
}

/* A hero em si controla a altura */
.file-hero {
  position: relative;
  min-height: 100svh;   /* cobre viewport “visível” em iOS/Android */
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}
/* Fade no mobile (<992px) */
  .file-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 350px; /* altura do fade, ajusta se quiser mais/menos suave */
    background: linear-gradient(to bottom, rgba(11,11,12,0) 0%, #0B0B0C 100%);
    z-index: 0; /* acima do SVG, mas abaixo do conteúdo */
    pointer-events: none;

  /* garante que o conteúdo continue acima do gradiente */
  .hero-inner {
    position: relative;
    z-index: 3;
  }
}

/* Melhor ainda: usa dvh quando suportado (viewport dinâmico) */
@supports (height: 100dvh){
  .file-hero{ min-height: 100dvh; }
}
/* SVG cobre toda a hero, ancorado top-left e sem deformar */
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;          /* ocupa toda a largura da seção */
  height: auto;         /* mantém a proporção original */
  min-height: 100%;     /* garante que cobre a altura da hero */
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* Conteúdo por cima do SVG */
.hero-inner{
  position: relative;
  z-index: 3;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 36px);
}

/* ===== Floating file icons ===== */
.floating-files{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9999999;
}
.floating-files img{
  position: absolute;
  display: block;
  will-change: transform;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
  user-select: none;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  transition: filter .2s ease, transform .2s ease;
}
.floating-files img.is-dragging{
  cursor: grabbing;
  filter: drop-shadow(0 18px 28px #ff9fb6);
}

/* Tamanhos por posição */
.floating-files .pos-top{ width: clamp(70px, 8vw, 110px); }
.floating-files .pos-bl { width: clamp(78px, 9vw, 120px); }
.floating-files .pos-br { width: clamp(78px, 9vw, 120px); }

/* Posições fixas */
.footer-section .floating-files .pos-top{ top: clamp(4%, 6vw, 12%); left: clamp(15%, 30vw, 42%); }
.footer-section .floating-files .pos-bl { bottom: clamp(4%, 6vw, 10%); left: clamp(8%, 16vw, 22%); }
.footer-section .floating-files .pos-br { bottom: clamp(4%, 6vw, 10%); right: clamp(8%, 16vw, 22%); }

/* Tamanhos por posição */
@media (max-width: 600px) {
.footer-section .floating-files .pos-top{ width: clamp(70px, 8vw, 110px); }
.footer-section .floating-files .pos-bl { width: clamp(78px, 9vw, 120px); }
.footer-section .floating-files .pos-br { width: clamp(78px, 9vw, 120px); }

/* Posições fixas */
.footer-section .floating-files .pos-top{ top: clamp(5%, 5vw, 8%); left: clamp(40%, 58vw, 6%); }
.footer-section .floating-files .pos-bl { bottom: clamp(83%, 7vw, 10%); left: clamp(10%, 4vw, 6%); }
.footer-section .floating-files .pos-br { bottom: clamp(83%, 7vw, 10%); right: clamp(15%, 4vw, 6%); }
}
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce){
  .floating-files img{ animation: none !important; transition: none !important; }
}

/* Grid e tipografia */

.app-icon{
  width: clamp(56px, 7vw, 95px);
  flex: 0 0 auto;
}
.headline{
  font-weight: 800;
  line-height: 0.9;
  font-size: clamp(36px, 6vw, 74px);
  margin: 0;
}
.subtitle{
  font-size: clamp(16px, 2.6vw, 22px);
  color: #cfd6df;
  margin: 0;
}
.lead-copy{
  color: var(--muted);
  font-size: clamp(14px, 2.15vw, 18px);
  max-width: 52ch;
}

/* Mockup */
/* Envolve o vídeo na mesma lógica visual do mockup anterior */
.mockup-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 1rem; /* mantém o visual arredondado se tinha antes */
  box-shadow: 0 10px 40px rgba(0,0,0,0.12); /* opcional, igual à imagem anterior */
}

/* Ajusta o vídeo para cobrir a área exata do container */
.mockup-wrap video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* ou "contain" se quiser mostrar o vídeo inteiro */
  border-radius: inherit;
}

/* Responsivo: garante que o vídeo não estoure em telas menores */
@media (max-width: 768px) {
  .mockup-wrap {
    border-radius: 0.75rem;
    margin-top: 1rem;
  }

  .mockup-wrap video {
    object-fit: contain; /* evita corte em telas pequenas */
  }
}

@media (min-width: 992px) {
  .mockup-wrap {
    max-width: 580px;
    margin-left: auto;
  }
}


/* Container principal do vídeo */
.pin-action {
  position: relative;
  display: flex;                  /* centraliza conteúdo */
  justify-content: center;        /* centraliza horizontalmente */
  align-items: center;            /* centraliza verticalmente */
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin: 0 auto;                 /* garante centralização dentro do col */
}

/* Vídeo ajustado à área visível */
.pin-action video {
  display: block;
  width: 100%;
  max-width: 800px;               /* controla o tamanho máximo no desktop */
  height: auto;
  object-fit: contain;            /* mantém proporção */
  border-radius: 1rem;            /* opcional: bordas suaves */
}

/* Responsivo */
@media (max-width: 768px) {
  .pin-action {
    border-radius: 0.75rem;
    margin-top: 1rem;
    justify-content: center;
  }

  .pin-action video {
    width: 100%;
    max-width: 100%;
    object-fit: contain;
  }
}

@media (min-width: 992px) {
  .pin-action {
    max-width: 900px;
  }
}

.finder-shot{
  width: 100%;
  height: auto;
  border-radius: clamp(14px, 2vw, 22px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  display: block;
}

/* CTAs */
.btn-cta{
  padding: .9rem 1.4rem;
  border-radius: 999px;
  font-weight: 500;
  line-height: 100%;
}
.btn-download{ background: #0E62FF; border: 0; color: #fff;}
.btn-upgrade{ background: transparent; border: 1px solid #3a3f46; color: #fff; }
.meta{ color: var(--muted); font-size: .95rem; }

/* ===== Ajustes de disposição no DESKTOP ===== */
@media (min-width: 992px){
  .hero-grid{ row-gap: 24px; }           /* separa as “linhas” */
  .cta-bar{ margin-top: 18px; }          /* respiro entre mockup e botões */
  .hero-inner{ padding-top: clamp(24px, 4vh, 56px); }
  .meta { text-align: center; }          /* metas centralizadas como no mockup */
}

/* Espaçamento em mobile */
@media (max-width: 992px){
  .mockup-wrap{ margin-top: 16px; }
}
@media (max-width: 420px){
  .meta{ font-size: .9rem; }
}

/* garante boa largura e alinhamento do mockup no desktop */
@media (min-width: 992px){
  .mockup-wrap.lg-right{
    max-width: 660px;        /* ajuste fino conforme seu asset */
    margin-left: auto;       /* encosta na direita da coluna */
  }
  .hero-inner{
    padding-top: clamp(96px, 3vh, 48px);
  }
}

/* respiro em mobile entre texto e imagem */
@media (max-width: 991.98px){
  .mockup-wrap{ margin-top: 20px; }
}

/* ===== Big Title Gradient ===== */


.big-gradient-title {
  font-size: clamp(36px, 8vw, 92px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.big-gradient-title span {
  background: var(--redblue-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.section-native{
  position: relative;      /* cria contexto p/ z-index */
  z-index: 0;
  background: #fff;        /* já estava assim */
  padding-bottom: clamp(24px, 4vw, 48px);  /* respiro p/ sobreposição */
  margin-bottom: 0;        /* evita gap preto por colapso */
}

/* Título grande com gradient */
.display-gradient{
  font-weight: 600;
  line-height: 1.1;
  font-size: clamp(50px, 6.5vw, 89px);
  margin: 0;
  background: var(--purpleorange-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}

/* Imagem centralizada, sem shadow */
.native-mockup{
  max-width: min(980px, 92vw);
}
.native-mockup img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;     /* combina com o mockup; remova se não quiser */
  box-shadow: none;        /* sem sombra */
}

/* Parágrafo centralizado, largura confortável */
.native-copy{
  max-width: 60ch;
  font-size: clamp(20px, 2.2vw, 18px);
  color: #2b2f36;
}

.section-files{
  position: relative;
  z-index: 1;              /* fica acima da anterior */
  margin-top: clamp(-89px, -6vw, -80px);  /* puxa para cima */
  background: #1E64A3;
  border-top-left-radius: 56px;
  border-top-right-radius: 56px;
  padding-block: clamp(60px, 10vw, 100px);
}

.section-files::before{
  content:"";
  position:absolute; left:0; right:0; top:-1px; height:1px;
  background: rgba(0,0,0,0.06);        /* linha sutil contra o branco */
  border-top-left-radius: 80px;
  border-top-right-radius: 80px;
}


/* Título com gradient peach-pink */
.files-title {
  font-weight: 600;
  line-height: 1.1;
  font-size: clamp(50px, 6.5vw, 89px);
  background: var(--peachpink-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;

}

/* Texto secundário */
.files-copy {
  font-size: clamp(14px, 2.2vw, 18px);
  margin: 0;
}

/* área da pilha */
.files-illustration { position: relative; }
.files-slider{
  position: relative;
  width: clamp(180px, 32vw, 280px);  /* tamanho responsivo */
  aspect-ratio: 452/592;
  margin: 0 auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; 
}

/* cada file ocupa a área e é posicionada via transform */
.files-slider .file{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform, opacity;
  border-radius: 28px;          /* arredonda os SVGs iguais ao exemplo */
  overflow: hidden;
  }

/* offsets iniciais para criar “escadinha” (ajuste fino se quiser) */
.files-slider .file:nth-child(1){ transform: translate(-20%, -0%);     z-index: 5; }
.files-slider .file:nth-child(2){ transform: translate(-10%, -1%);     z-index: 4; }
.files-slider .file:nth-child(3){ transform: translate(-0%, -2%);      z-index: 3; }
.files-slider .file:nth-child(4){ transform: translate(10%, -3%);      z-index: 2; }
.files-slider .file:nth-child(5){ transform: translate(20%, -4%);      z-index: 1; }

/* mobile: sem animação, mas mantém a composição */
@media (max-width: 991.98px){
  /* regras específicas para mobile podem ser adicionadas aqui se necessário */
}


/* container da seção */
.section-pin{
  position: relative;
  z-index: 1;              /* fica acima da anterior */
  margin-top: clamp(-89px, -6vw, -80px);  /* puxa para cima */
  margin-bottom: clamp(-89px, -6vw, -80px);  /* puxa para cima */
  background: var(--pin-green);
    border-bottom-right-radius: 80px;
    border-bottom-left-radius: 80px;
  padding-block: clamp(56px, 8vw, 104px);
  overflow: hidden;
}


.section-pin video {
  display: block;
  width: 100%;
  border-radius: 12px;
  position: relative;
  z-index: 1;
  mask-image:  linear-gradient(to bottom, transparent 7%, black 18%, black 90%, transparent 95%),
               linear-gradient(to right, transparent 0%, black 5%, black 96%, transparent 100%);
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
}


/* grid: título no topo, shelf central, copy alinhada à direita */
.pin-grid{
  row-gap: clamp(20px, 3vw, 32px);
  align-items: center;                /* centraliza verticalmente shelf/copy */
}

/* título grande com gradient */
.pin-title{
  font-weight: 600;
  line-height: 1.1;
  font-size: clamp(50px, 6.5vw, 89px);  /* maior p/ lembrar o protótipo */
  background: var(--orange-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}

/* shelf centralizada de verdade e com respiro lateral */
.shelf-image{
  max-width: min(720px, 80vw);
  height: auto;
  display: block;
  z-index: 1;
}

/* copy à direita com largura confortável */
.pin-copy{
  max-width: 28ch;
  font-size: clamp(14px, 2.1vw, 18px);
  color: #EAF7F8;
}

/* responsivo: empilhar (título → shelf → copy) e centralizar textos */
@media (max-width: 991.98px){
  .section-pin{ margin-bottom: clamp(-116px, -4vw, -106px); }
  .pin-grid{ align-items: start; }
  .pin-title, .pin-copy{ text-align: center; }
  .pin-copy{ margin: 8px auto 0; }
}

.ls{
  letter-spacing: -0.01em;
}


/* ===== Section Keyboard ===== */
.section-shortcut{
  position: relative;
  z-index: 0;              /* fica acima da anterior */
  margin-bottom: clamp(-89px, -6vw, -80px);  /* puxa para cima */
  background: var(--bg);
  color: #0B0B0C;
  padding-block: clamp(106px, 8vw, 104px);
}

/* ===== Título com as métricas do pin-title (ajustadas) ===== */
.shortcut-title{
  font-weight: 600;
  line-height: 1.1;
  font-size: clamp(50px, 6.5vw, 89px);
  margin: 0;
  background: var(--shortcut-blue-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}



/* Texto */
.shortcut-copy{
  max-width: 42ch;
  font-size: clamp(14px, 2.1vw, 18px);
  color: #0B0B0C; /* contraste bom no pink */
}

/* ===== Teclas 3D (reuso com ajustes) ===== */
.keyboard{
  display: grid;
  gap: 75px;
  perspective: 800px;
}

/* Layout 2x2 como no mockup */
.kbd-2x2{
  grid-template-columns: repeat(2, 90px);
  grid-auto-rows: 100px;
}

.keycap{
  --this-cap: var(--cap);
  position: relative;
  width: 150px; height: 150px;
  border: 0; background: transparent; cursor: pointer;
  transform-style: preserve-3d;
  border-radius: calc(var(--radius) + 4px);
  outline: none;
  box-shadow:
    0 20px 30px -10px rgba(0,0,0,.15),
    0 6px 0 0 #d9dfe7;
}

.keycap .face{
  position: absolute; inset: 0;
  border-radius: var(--radius);
  background: var(--this-cap);
  display: grid; place-items: center;
  transform: translateZ(var(--depth));
  transition: transform .14s cubic-bezier(.2,.7,.2,1),
              box-shadow .14s cubic-bezier(.2,.7,.2,1),
              background .14s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 10px 0 0 #c9d1da,
    0 18px 24px -12px var(--shadow);
}

/* Grid das teclas: 1 fileira x 4 */
.keyboard.kbd-row{
  display: grid;
  grid-template-columns: repeat(4, 156px);
  gap: 18px;
  justify-content: center;
  perspective: 800px;
  margin-inline: auto;
}


/* Tamanhos responsivos das teclas em telas menores */
@media (max-width: 575.98px){
  .keyboard.kbd-row{ grid-template-columns: repeat(4, 72px); gap: 14px; }
  .keycap{ width: 72px; height: 72px; }
}

/* Copy centralizada */
.shortcut-copy{
  max-width: 58ch;
  font-size: clamp(14px, 2.1vw, 18px);
  color: #0B0B0C;
}

.legend{
  font: 600 28px/1 system-ui, -apple-system, "SF Pro Display", Inter, Arial, sans-serif;
  color: var(--legend);
  user-select: none;
  transform: translateY(-1px);
}

/* hover e active */
.keycap:hover .face{
  transform: translateZ(calc(var(--depth) + 2px));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 10px 0 0 #b9c3cf,
    0 22px 28px -10px var(--shadow);
}
.keycap:active .face,
.keycap.is-pressed .face{
  transform: translateZ(calc(var(--depth) - var(--press)));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 4px 0 0 #b1bcc8,
    0 12px 16px -8px var(--shadow);
}

/* foco visível */
.keycap:focus-visible .face{
  outline: 3px solid #8aa1ff;
  outline-offset: -4px;
}

/* mobile: centraliza e dá respiro */
@media (max-width: 991.98px){
  .shortcut-title, .shortcut-copy{ text-align: center; margin-left: auto; margin-right: auto; }
  .kbd-2x2{ grid-template-columns: repeat(2, 78px); grid-auto-rows: 78px; }
  .keycap{ width: 78px; height: 78px; }
}
@media (prefers-reduced-motion: reduce){
  .keycap .face{ transition: none; }
}












/* ——— Seções de apoio ——— */
.hero {
  padding-block: 60vh 12vh;
}
.spacer {
  height: 40vh;               /* ajuste livre */
  color: #9aa4b2;
}

/* ——— Stage do MacBook (pinnado) ——— */
.macbook-stage-wrap {
  position: relative;
  min-height: 100vh;          /* garante área para o pin */
  padding-block: 0 18vh;
  color: #fff;
  overflow: clip;
}

.macbook-stage {
  position: relative;
  /* width: min(var(--stage-max-w, 980px), 92vw); */
  width: min(980px, 92vw);
  margin: 0 auto;
  aspect-ratio: 16/10;
}

/* Layers do mockup */
.macbook-frame,
.shelfinder-shelf {
  position: absolute;
  display: block;
  user-select: none;
  pointer-events: none;
  max-width: none;
}

.macbook-frame {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}

/* Posicione a janela do Finder dentro do mockup */
.finder-window {
  width: 72%;  /* alinhe largura com a shelf */
  left: 14%;
  top: 18%;
  z-index: 2;
}

/* Shelf: mesma largura/left do Finder (que está no mockup) */
.shelfinder-shelf {
  width: 51.5%;
  left: 24.2%;
  top: 52.1%;
  transform: translateY(28vh);   /* estado inicial: fora do ponto de encaixe */
  will-change: transform;
  z-index: 3;
}

/* Próxima seção (aparece quando o pin solta) */
.next-section {
  padding-block: 16vh;
  background: #ffffff;
}


/* SVG cobre toda a hero, ancorado top-left e sem deformar */
.footer-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;          /* ocupa toda a largura da seção */
  height: auto;         /* mantém a proporção original */
  min-height: 100%;     /* garante que cobre a altura da hero */
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* Footer */
.footer-section {
  position: relative;
  overflow: hidden;
  background-color: #0B0B0C;
  color: #ccc;
}

.footer-link {
  color: #aaa;
  text-decoration: none;
}

.footer-link:hover {
  text-decoration: underline;
  color: #fff;
}


/* 2) Header da página (caixa rosa + título com gradiente) */
.bg-header-box{
  background:#F4ADAD;
  border-radius:1rem;
  padding:2rem;
  margin-bottom:2rem;
}
.title-header{
  background:#54bdb3;               /* pode trocar pelo gradiente da marca se quiser */
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  display:inline-block;
  font-weight:800;
}

/* 3) Sidebar de navegação (Help) */
.sidebar{ position:sticky; top:100px; }
.sidebar a{
  display:block;
  margin-bottom:.5rem;
  font-weight:500;
  color:#007AFF;
  text-decoration:none;
}
.sidebar a:hover{ text-decoration:underline; }
.active-link{
  font-weight:700;
  color:#F4ADAD;
}

/* Em mobile, sidebar vira bloco normal */
@media (max-width:768px){
  .sidebar{ position:static; margin-bottom:2rem; text-align:center; }
}

/* 4) Títulos e texto das seções */
.section-title{
  font-size:2rem;
  margin-top:3rem;
  margin-bottom:1rem;
  font-weight:700;
  letter-spacing: -0.02em;
}
.section-description{
  font-size:1.1rem;
  color:#333;
}

/* 5) Imagens de ajuda (prints) */
.help-img{
  max-width:100%;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  margin:1.5rem 0;
}

/* 6) Âncoras internas: compensa header fixo */
.anchor-link{ scroll-margin-top:100px; }

/* 7) Footer básico */
.footer-section{ background:#1E1E23; color:#ccc; }
.footer-link{ color:#aaa; text-decoration:none; }
.footer-link:hover{ color:#fff; text-decoration:underline; }

/* 8) (Opcional) Cards do “Why” */
.feature-box{
  background:#fff;
  border-radius:1rem;
  box-shadow:0 0 8px rgba(0,0,0,.05);
  padding:2rem;
  height:100%;
}
.icon{ font-size:2rem; color:#0E62FF; margin-bottom:1rem; }

/* cards section */


    .section-more {
      background: #f2f2f4;
    }

    .more-title {
      font-size: clamp(2.25rem, 3vw, 2.75rem);
      font-weight: 800;
      color: #07848F;
      /* seu teal sRGB convertido */
      margin-bottom: .5rem;
      letter-spacing: -0.02em;
    }

    .more-subtitle {
      max-width: 560px;
      margin: 0 auto;
      color: #444;
      font-size: 1rem;
    }

    .more-card {
      background: #fff;
      border: 1px solid rgba(0, 0, 0, 0.035);
      padding: 1.35rem 1.25rem 1.25rem;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.03);
    }

    .more-card--wide {
      display: flex;
      flex-direction: column;
    }

    .thumb-placeholder {
      height: 200px;
      border-radius: 14px;
      background: #f5f5f5;
      border: 2px solid rgba(198, 198, 198, 0.5);
    }

    .more-card-title {
      font-size: 1.05rem;
      font-weight: 700;
      margin-bottom: .35rem;
      color: #000;
    }

    .more-card-text {
      font-size: .93rem;
      line-height: 1.4;
      color: #4d4d4d;
    }

    /* deixa o primeiro card mais próximo do layout do figma */
    @media (min-width: 992px) {
      .more-card--wide .thumb-placeholder {
        height: 200px;
      }
    }

    /* Limita a largura dos cards no desktop */
    @media (min-width: 992px) {
      .section-more .more-grid {
        max-width: 800px;
        /* ajustável: 800–1000px conforme o respiro que quiser */
        margin: 0 auto;
        /* centraliza o grid */
      }

      /* deixa o card grande (o 1º) também seguir a largura centralizada */
      .section-more .more-card--wide {
        max-width: 800px;
        margin: 0 auto;
      }
    }
    
    .video-wrapper {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 3; /* ou 4/3, 3/2 — escolha a proporção padrão */
      overflow: hidden;
      background-color: #fff; /* fallback se o vídeo demorar pra carregar */
    }
    
    .video-fluid {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; /* usa 'contain' se quiser ver o vídeo inteiro */
      border-radius: inherit;
    }