/* ========= DESKTOP (>= 1024px) ========= */
@media (min-width: 1024px) {

  /* ===== Variáveis (mantidas) ===== */
  :root {
    --primary: #FFFFFF;
    --primary-light: #FFFFFF;
    --primary-dark: #8E4D57;
    --off-white: #F1F1F1;
    --card-bg: #F24855;
    --card-border: #dce3e9;
    --header-border: #dce3e9;
    --shadow: #00000033;
    --text: #000000;

    --container: 1200px;
    --radius: 12px;
    --space-2: 8px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --topbar-h: 90px;
    --shadow-1: 0 4px 12px rgba(0,0,0,0.15);

    --title: #FFFFFF;
    --brand: #F24855;
    --muted: #6B6B6B;
  }

  /* ===== Base ===== */
  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 90px); }
  body {
    background: var(--off-white);
    color: var(--text);
    font-family: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  }

  .logo-desktop { display: inline-block !important; }
  .logo-mobile  { display: none !important; }
  .nav-link     { display: inline-block !important; }

  /* ===== Topbar ===== */
  #topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    width: 100vw; background: #FFFFFF;
    border-bottom: 1px solid var(--header-border);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  }
  #topbar .menu {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--topbar-h);
    width: 100%; max-width: var(--container);
    margin-inline: auto; padding-inline: var(--space-8);
  }
  #topbar .logo-desktop img { height: 90px; width: auto; }

  nav.menu {
    position: static; background: transparent; border-bottom: none;
    width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--space-8);
  }
  .menu-left, .menu-right { display: flex; align-items: center; gap: var(--space-6); }
  #topbar-spacer { display: none; }
  [id] { scroll-margin-top: var(--topbar-h); }

  /* ===== Container principal ===== */
  main{
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0,0,0,.24), 0 8px 10px rgba(0,0,0,.12);
    max-width: var(--container);
    margin: calc(var(--topbar-h) + 24px) auto 40px;
    padding: 24px 120px;
  }

  /* ===== Menu links ===== */
  .nav-link {
    color: #000; text-decoration: none; font-weight: 600;
    padding: 0 12px; position: relative; line-height: 1;
    transition: color .2s ease;
  }
  .nav-link::after{
    content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
    background: currentColor; transform: scaleX(0); transform-origin: left;
    transition: transform .25s ease;
  }
  .nav-link:hover { color:#F24855; }
  .nav-link:hover::after { transform: scaleX(1); }

  /* ===== Login link ===== */
  .login-link{
    background:none; border:0; padding:0; font-weight:800; color:#000;
    text-decoration:none; position:relative; line-height:1;
    display:inline-block; transition: color .2s ease, transform .2s ease;
  }

  /* ===== Títulos / Seções ===== */
  .parte { border-bottom: none; }

  .titulo-quem-somos{
    font-size: 2rem; margin-top: -150px; margin-bottom: var(--space-6); color:#000;
  }
  .titulo-setor{
    font-size: 2rem; margin: 0 0 var(--space-6); color:#000;
  }

  .quem-somos-container{
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-8);
  }

  /* ===== HOME — texto à esquerda | vídeo à direita ===== */
  #home .quem-somos-container{
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start;
  }
  #home .sobre-col{ text-align: left; }
  #home .sobre-col p{ margin-top: 50px; }

  #home .ilustra{
    justify-self: end; 
    align-self: start; 
    transform: translate(80px, -100px);
    margin-top: 0; width: 100%; 
    max-width: 800px; 
    border-radius: 12px; 
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0,0,0,.7);
  }
  #home .ilustra video{
    display:block; 
    width:100%; 
    height:100%; 
    object-fit:cover; 
    object-position:center;
    pointer-events: none;
  }

  /* ===== FORMAS DE COMPRAR ===== */
  #funciona .titulo-quem-somos {
  color: var(--text);
  margin-top: -40px; /* ajuste o valor conforme quiser */
}
  #funciona #texto-como-funciona{ color: var(--text); }

  #funciona .cards-teste{
    display:grid; grid-template-columns: repeat(4, 230px); gap:1rem;
    margin-top:1rem; padding-inline:0; justify-content:center; align-items:start;
  }
  #funciona .card-teste{
    background:#F24855; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.25);
    display:flex; flex-direction:column; margin-top:10px;
  }
  #funciona .card-teste:nth-child(1){ min-height:300px; }
  #funciona .card-teste:nth-child(2){ min-height:280px; }
  #funciona .card-teste:nth-child(3){ min-height:250px; }
  #funciona .card-teste:nth-child(4){ min-height:100px; }

  #funciona .card-teste:nth-child(1) p{ font-size:1.3rem; }
  #funciona .card-teste:nth-child(2) p{ font-size:1rem; }
  #funciona .card-teste:nth-child(3) p{ font-size:1rem; }
  #funciona .card-teste:nth-child(4) p{ font-size:0.9rem; }

  #funciona .card-icon{
    width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
    background: rgba(183,110,121,0.2); color: var(--brand);
    margin: 0 auto var(--space-4);
  }
  #funciona .card-info h4{
    margin:0 0 var(--space-2); color: var(--title); font-size:1.2rem; font-weight:700; text-align:center;
  }
  #funciona .card-info p{
    margin:40px; color: var(--title); font-size:1rem;
  }

  /* ===== COMO FUNCIONA (grid 2 colunas + timeline) ===== */
  #duvidas .como-grid{
    max-width: var(--container);
    margin: var(--space-8) auto 0;
    padding-inline: var(--space-8);
    display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: start;
  }

  #duvidas .ilustra-como{
    background:none; color:inherit; display:flex; justify-content:center; align-items:center;
    border-radius:12px; aspect-ratio:1/1; padding:10px;
  }
  #duvidas .ilustra-como img{
    max-width:80%; max-height:80%; height:auto; object-fit:contain; border-radius:12px;
  }

  #duvidas .timeline{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(300px, 1fr)) !important;
    gap: 28px clamp(64px, 6vw, 120px) !important;
    padding:0 !important; position:relative;
  }

  #duvidas .timeline .step:nth-child(1){ grid-column:1; grid-row:1; }
  #duvidas .timeline .step:nth-child(2){ grid-column:1; grid-row:2; }
  #duvidas .timeline .step:nth-child(3){ grid-column:1; grid-row:3; }
  #duvidas .timeline .step:nth-child(4){ grid-column:2; grid-row:1; }
  #duvidas .timeline .step:nth-child(5){ grid-column:2; grid-row:2; }
  #duvidas .timeline .step:nth-child(6){ grid-column:2; grid-row:3; }

  #duvidas .step{
    display:grid !important;
    grid-template-columns: auto minmax(0,1fr) !important;
    align-items:start !important; column-gap:12px !important;
    background:transparent !important; border:0 !important; box-shadow:none !important;
    padding:0 !important; text-align:left !important; height:auto !important;
    opacity:0; transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease;
    position:relative;
  }
  #duvidas .step.is-visible{ opacity:1; transform:none; }

  #duvidas .circle{
    width:34px; 
    height:34px; 
    border-radius:999px; 
    display:grid; 
    place-items:center;
    position:relative; 
    margin-top:35px !important; 
    left:20px;
    background:#F1F1F1; 
    color:#0d1b2a; 
    font-weight:800;
    z-index: 1
  }

/* Linha vertical — apenas na timeline de #duvidas */
#duvidas .timeline::before {
  content: "";
  position: absolute;
  left: 2.2rem;
  top: 35px;
  height: calc(100% - 5.3rem);
  width: 2px;
  background-color: #ccc;

  /* Animação */
  transform: scaleY(0);        /* começa invisível */
  transform-origin: top;       /* cresce de cima para baixo */
  animation: growLine 0.6s ease-out forwards;
  animation-delay: 1.2s;       /* espera as bolinhas terminarem */
}


/* Linha vertical para a coluna da direita */
#duvidas .timeline::after {
  content: "";
  position: absolute;
  top: 35px;
  right: -6.7rem;
  height: calc(100% - 5.3rem);
  width: 2px;
  background-color: #ccc;
  
    /* Animação */
  transform: scaleY(0);        /* começa invisível */
  transform-origin: top;       /* cresce de cima para baixo */
  animation: growLine 0.6s ease-out forwards;
  animation-delay: 2.4s;       /* espera as bolinhas terminarem */
}


  #duvidas .content{ min-width:0; margin-top:30px; }
  #duvidas .content h4{
    margin:0; font-size:1.3rem; color:var(--text); font-weight:700; cursor:pointer;
  }
  #duvidas .content p{
    margin:4px 0 0; font-size:1.05rem;
    color: color-mix(in srgb, var(--text) 72%, #000 28%);
    white-space:normal; max-width:none;
  }

  /* Hover rosa igual ao menu + sublinhado animado nos h4 */
  #duvidas .timeline .content h4,
  #duvidas .timeline .content p { transition: color .25s ease; cursor: pointer; }
  #duvidas .timeline .content h4:hover,
  #duvidas .timeline .content p:hover { color:#F24855 !important; }

  #duvidas .timeline .content h4{ position:relative; }
  #duvidas .timeline .content h4::after{
    content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
    background: currentColor; transform: scaleX(0); transform-origin:left;
    transition: transform .25s ease;
  }
  #duvidas .timeline .content h4:hover::after{ transform: scaleX(1); }

  /* ===== VALORES ===== */
  #valores .carousel-valores,
  .parte.parte4 .carousel-valores{
    max-width: var(--container);
    margin: var(--space-8) auto 0;
    padding-inline: var(--space-8);
    display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-6);
  }
  .parte.parte4 .card-teste,
  #valores .card-teste{
    overflow:clip; border-radius:var(--radius); box-shadow: var(--shadow-1); background:#fff;
  }
  .parte.parte4 .card-teste img,
  #valores .card-teste img{
    width:50%; display:block; object-fit:contain; height:auto; margin:0 auto;
  }
  .parte.parte4 .card-info,
  #valores .card-info{ padding: var(--space-6); color:#000; }
  #valores .card-info h4,
  #valores .card-info p{ color:#000 !important; }

  /* ===== CONTATO ===== */
  .parte.parte5 .titulo-setor,
  #contato .titulo-setor{
    text-align:center; color: var(--title); font-weight:700;
  }
  .parte.parte5 form,
  #contato form{ max-width:500px; margin-inline:auto; }

  .parte.parte5 form input,
  .parte.parte5 form textarea,
  .parte.parte5 form select,
  #contato form input,
  #contato form textarea,
  #contato form select{
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    border:1px solid #ccc; padding:10px; border-radius:6px; transition: box-shadow .3s ease;
  }
  .parte.parte5 form input:focus,
  .parte.parte5 form textarea:focus,
  .parte.parte5 form select:focus,
  #contato form input:focus,
  #contato form textarea:focus,
  #contato form select:focus{
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); outline:none;
  }

  /* ===== Footer ===== */
  .footer{ background:#000; color:#fff; }
  .footer-container{
    max-width: var(--container);
    margin-inline:auto; padding:48px var(--space-8);
    display:grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-8);
  }
  .footer-bottom{
    border-top:1px solid #444; text-align:center; padding:16px; color:#aaa;
  }

  /* ===== Fundos transparentes nas seções internas ===== */
  .parte1, .parte2, .parte3, .parte4, .parte5{ background: transparent; }

  #contato.setor-card{
    background:#F24855 !important; border-radius:12px; color:#fff;
    max-width:600px; margin:0 auto;
  }

  /* ===== Títulos pontuais ===== */
  #duvidas > .titulo-quem-somos,
  .parte.parte4 > .titulo-setor{
    max-width: var(--container);
    margin-inline:auto; padding-inline: var(--space-8); margin-top:30px;
  }

  /* ===== Offsets de âncora (topbar fixa) ===== */
  #home{     scroll-margin-top: calc(var(--topbar-h) + 160px) !important; }
  #funciona{ scroll-margin-top: calc(var(--topbar-h) - 90px)    !important; }
  #duvidas{  scroll-margin-top: calc(var(--topbar-h) - 120px)  !important; }
  #valores{  scroll-margin-top: calc(var(--topbar-h) - 180px)  !important; }
  #contato{  scroll-margin-top: calc(var(--topbar-h) - 120px)  !important; }

  /* ===== Remoção dos “cards” brancos dentro das seções ===== */
  #funciona.setor-card, #funciona .setor-card,
  #duvidas.setor-card,  #duvidas .setor-card{
    background: transparent !important; box-shadow:none !important;
    border-radius:0 !important; border:0 !important; padding:0 !important; margin-top:0 !important;
  }

  /* ===== Cores de títulos fora do media duplicado ===== */
  #como-titulo{ color:#000000 !important; }
  #duvidas .titulo-quem-somos{ color:#000000 !important; }

  /* ===== Pequenos ajustes visuais ===== */
  #contato{ margin-top:80px; padding-top:20px; }

  /* ===== Acessibilidade ===== */
  @media (prefers-reduced-motion: reduce){
    #duvidas .step, #duvidas .step.is-visible{ transition:none; transform:none; opacity:1; }
  }
  
  @keyframes growLine {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
  
}
/* ========= FIM DESKTOP ========= */