/* Versão celular simplificada (abaixo de 768px) — definida pelo Julio em 2026-09-25.
   Não existe versão mobile no Figma. O tablet (768–1023) segue a versão empilhada de cada seção. */

/* Elementos que só existem no celular */
.quebra-celular,
.smartphone,
.projeto__info-celular,
.projetos__seta,
.deslize,
.chame-a-gente {
  display: none;
}

@media (max-width: 767px) {
  /* ---------- Uma seção por tela ----------
     Cada seção tem no mínimo a altura visível do celular (svh; vh como reserva)
     e o conteúdo fica centralizado no espaço. O Processo já é mais alto que a tela. */
  /* 1ª tela = header + hero + faixa "Duas pessoas…" (a faixa abre o portfólio no HTML;
     --barra-altura é medida pelo JS, porque o texto quebra em 3 ou 4 linhas) */
  .hero-corpo__interno {
    min-height: calc(100vh - var(--header-altura) - var(--barra-altura, 108px));
    min-height: calc(100svh - var(--header-altura) - var(--barra-altura, 108px));
    align-content: center;
    padding-top: 32px;
    padding-bottom: 40px;
  }

  /* Portfólio: uma tela sem contar a faixa; o link "Portfólio" para depois dela */
  #portfolio {
    scroll-margin-top: calc(-1 * var(--barra-altura, 108px));
  }

  /* Título no alto da tela; o smartphone centrado no espaço que sobra */
  .secao2-portfolio__interno {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: 16px;
    padding-bottom: 84px;   /* espaço do botão "Chame a gente" */
  }

  .secao4-solucoes__interno {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: 28px;
    padding-bottom: 32px;   /* a seção é mais alta que a tela: o botão "Chame a gente" não cobre o fim */
  }

  /* Contato (com o texto "Sobre nós"): uma coluna; o rodapé vem logo depois */
  .secao6-contato__interno {
    padding-top: 24px;
    padding-bottom: 32px;
  }

  /* Títulos das seções: 28px no celular (os subtítulos continuam escondidos) */
  .titulo-secao-display__titulo,
  .secao6-contato__titulo {
    font-size: 1.75rem;
  }

  .secao6-contato__titulo {
    margin-top: 10px;
  }

  /* ---------- Hero ---------- */
  .quebra-celular {
    display: inline;
  }

  /* O carrossel "Nossas soluções" sai do hero */
  .solucoes-hero {
    display: none;
  }

  /* Botões lado a lado, menores */
  .hero__botoes {
    flex-wrap: nowrap;
    gap: 18px;
    margin-top: 28px;
  }

  .botao-solucoes {
    flex: none;
    gap: 12px;
    height: 44px;
    padding: 0 16px;
    font-size: 0.75rem;
  }

  .botao-solucoes .seta {
    width: 20px;
    height: 20px;
  }

  .botao-portfolio {
    font-size: 0.75rem;
    white-space: nowrap;
  }

  /* Faixa "Duas pessoas…": o texto começa depois da linha vertical */
  .barra-de-estudio__texto {
    padding-left: calc(var(--trilho-x) + var(--linha-grade) + 16px);
    padding-right: var(--margem-dir);
  }

  /* ---------- Portfólio: só a etiqueta + smartphone ---------- */
  .secao2-portfolio .titulo-secao-display__texto,
  .rolagem-projetos,
  .laptop,
  .portfolio-card {
    display: none;
  }

  .projetos {
    /* smartphone: até 260px de largura, menor se a tela for baixa */
    --celular-largura: min(66vw, clamp(170px, calc((100svh - 380px) * 0.486), 260px));
    position: relative;
    margin-block: auto;
    padding-top: 36px;   /* respiro mínimo entre o título e o smartphone */
  }

  /* Os projetos passam a ser um trilho de arrastar */
  .projetos__slides {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  .projetos__slides::-webkit-scrollbar {
    display: none;
  }

  .projeto,
  .projeto.is-ativo {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    opacity: 1;
    visibility: visible;
    transition: none;
    scroll-snap-align: center;
  }

  /* Smartphone no estilo do notebook: mesma moldura escura e tela */
  .smartphone {
    position: relative;
    display: block;
    width: var(--celular-largura);
    aspect-ratio: 9 / 18.5;
    padding: 9px;
    border-radius: 32px;
    background: var(--laptop-moldura);
  }

  /* Câmera */
  .smartphone::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 17px;
    left: 50%;
    width: 52px;
    height: 14px;
    border-radius: 8px;
    background: var(--laptop-moldura);
    transform: translateX(-50%);
  }

  .smartphone__tela {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 24px;
    background: var(--laptop-display);
  }

  /* Placeholder em pé (mesmas cores de cada projeto) */
  .tela-placeholder--vertical .b1 { inset: 0; }
  .tela-placeholder--vertical .b2 { inset: 9% 6% 85% 6%; }
  .tela-placeholder--vertical .b3 { inset: 18% 6% 56% 6%; }
  .tela-placeholder--vertical .b6 { inset: 47% 6% 35% 6%; }
  .tela-placeholder--vertical .b4 { inset: 68% 52% 13% 6%; }
  .tela-placeholder--vertical .b8 { inset: 68% 6% 13% 52%; }
  .tela-placeholder--vertical .b7 { inset: 90% 6% 3% 6%; }
  .tela-placeholder--vertical .b5,
  .tela-placeholder--vertical .b9 { display: none; }

  /* Nome do site + botão */
  .projeto__info-celular {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding-inline: 16px;
    text-align: center;
  }

  .projeto__nome {
    color: var(--navy-kalina);
    font-family: var(--fonte-display);
    font-weight: 600;
    font-variation-settings: "SOFT" 0, "WONK" 1;
    font-size: 1.125rem;
    line-height: 1.3;
  }

  .projeto__info-celular .botao-visitar-site {
    width: auto;
    height: 38px;
    margin-top: 0;
    padding: 0 18px;
    font-size: 0.75rem;
  }

  /* Setas nas laterais do smartphone (centro vertical da tela) */
  .projetos__seta {
    position: absolute;
    z-index: 1;
    top: calc(var(--celular-largura) * 18.5 / 9 / 2);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--texto-claro);
    transform: translateY(-50%);
  }

  .projetos__seta .seta {
    width: 28px;
    height: 28px;
  }

  .projetos__seta--anterior {
    left: -8px;
  }

  .projetos__seta--proxima {
    right: -8px;
  }

  /* ---------- Indicador "deslize" (portfólio e soluções) ---------- */
  .deslize {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
  }

  .deslize__losangos {
    display: flex;
    gap: 12px;
  }

  .deslize__losangos span {
    width: 8px;
    height: 8px;
    border: 1px solid var(--navy-kalina);
    transform: rotate(45deg);
    transition: background-color 0.3s, border-color 0.3s;
  }

  .deslize__losangos .is-ativo {
    border-color: var(--dourado-kalina);
    background: var(--dourado-kalina);
  }

  .deslize__texto {
    color: var(--cinza-texto);
  }

  /* ---------- Processo: só a etiqueta + passos ---------- */
  .secao3-processo .titulo-secao-display__texto {
    display: none;
  }

  .secao3-processo__interno {
    row-gap: 32px;
  }

  /* ---------- Soluções: cards completos para arrastar ---------- */
  .secao4-solucoes .titulo-secao-display__texto,
  .cta-contato,
  .solucao-item {
    display: none;
  }

  .grid-solucoes-secao3 {
    display: flex;
    align-items: flex-start;   /* cada card com a altura do próprio conteúdo */
    gap: 12px;
    margin-top: 20px;
    margin-right: calc(-1 * var(--margem-dir));
    padding-right: var(--margem-dir);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    border: 0;
    background: none;
  }

  .grid-solucoes-secao3::-webkit-scrollbar {
    display: none;
  }

  /* Todos os cards visíveis no trilho (o JS do desktop esconde os não selecionados) */
  .descr-sol,
  .descr-sol[hidden],
  .solucao:last-child .descr-sol {
    display: flex;
    flex: 0 0 86%;
    padding: 20px 16px 20px;
    border: 1px solid var(--logo-claro);
    background: var(--creme-kalina);
    scroll-snap-align: start;
  }

  .descr-sol__titulo {
    font-size: 1.375rem;   /* 22 */
  }

  .descr-sol__texto {
    margin-top: 10px;
    font-size: 0.9375rem;   /* 15 */
    line-height: 1.5rem;
  }

  .botao-sol-detalhes {
    margin-top: 14px;
  }

  .descr-sol__detalhes {
    row-gap: 16px;
    margin-top: 20px;
    margin-bottom: 24px;
    padding-top: 18px;
  }

  .descr-sol__lista {
    margin-top: 8px;
    font-size: 0.875rem;   /* 14 */
    line-height: 1.375rem;
  }

  .botao-sol-conversar {
    margin-top: 16px;   /* respiro abaixo do pagamento */
  }

  /* Planos mensais e "incluso" no celular */
  .planos {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .selo-portfolio {
    margin-bottom: 12px;
  }

  .solucoes-incluso {
    margin: 24px 0 0;
    font-size: 0.875rem;
    text-align: center;
  }

  .solucoes-incluso__titulo {
    display: block;
    margin-bottom: 4px;
  }

  .planos-mensais {
    margin-top: 28px;
  }

    /* ---------- Contato: etiqueta + cards com título e botão ---------- */
  .secao6-contato__texto,
  .card01-cta__texto,
  .card01-cta__etiqueta {
    display: none;
  }

  .contato-cards {
    margin-top: 20px;
  }

  .card01-cta__acao {
    padding-top: 20px;
  }

  .card01-cta .botao-cta {
    gap: 12px;
    white-space: nowrap;
  }

  /* "Sobre nós" compacto, abaixo dos cards */
  .contato-sobre {
    margin-top: 28px;
    padding-top: 24px;
  }

  .contato-sobre__titulo {
    font-size: 1.25rem;   /* 20 */
  }

  .contato-sobre__texto {
    margin-top: 10px;
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  .contato-sobre__texto p + p {
    margin-top: 8px;
  }

  /* Contato compacto */
  .contato-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 16px;
  }

  .card01-cta {
    padding: 14px 16px 14px;
  }

  .card01-cta__icone {
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
  }

  .card01-cta__icone--arquivo {
    top: 17px;
    right: 19px;
    width: 21px;
    height: 26px;
  }

  .card01-cta__titulo {
    max-width: calc(100% - 36px);
    margin-top: 12px;
    font-size: 1.0625rem;   /* 17 */
  }

  .card01-cta__acao {
    padding-top: 12px;
  }

  .card01-cta .botao-cta {
    min-height: 44px;
    height: 44px;
  }

  /* ---------- Rodapé: só logo + copyright ---------- */
  .rodape .navegacao {
    display: none;
  }

  .rodape__interno {
    padding-bottom: 104px;   /* espaço para o botão flutuante */
  }

  /* Logo menor, centrado com o copyright */
  .logo-copytright {
    text-align: center;
  }

  .logo-nome--rodape {
    margin-inline: auto;
    zoom: 0.75;
  }

  .logo-copytright__texto,
  .logo-copytright__cidade,
  .logo-copytright__privacidade {
    margin-left: 0;
  }

  .logo-copytright__cidade {
    margin-inline: auto;
  }

  /* Gatinhas centradas abaixo do logo */
  .rodape__gatinhas {
    width: 100%;
    margin: 4px 0 0;
  }

  /* ---------- Botão flutuante "Chame a gente" ---------- */
  .chame-a-gente {
    position: fixed;
    z-index: 60;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 22px 0 18px;
    border-radius: 24px;
    background: var(--navy-kalina);
    color: var(--creme-kalina);
    font-family: var(--fonte-mono);
    font-size: 0.875rem;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgb(27 35 64 / 0.25);
    transform: translateX(-50%);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
  }

  /* Na 1ª tela o botão fica escondido (cobriria a faixa "Duas pessoas…");
     aparece quando a pessoa passa da metade dela (js/main.js) */
  body:not(.mostrar-chame) .chame-a-gente {
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, 16px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
  }

  .menu-aberto .chame-a-gente {
    display: none;
  }
}

/* Telas bem estreitas (320) */
@media (max-width: 359px) {
  .hero__titulo {
    font-size: 2.125rem;
  }

  .hero__botoes {
    gap: 12px;
  }

  .botao-solucoes {
    gap: 8px;
    padding: 0 12px;
    font-size: 0.6875rem;
  }

  .botao-portfolio {
    font-size: 0.6875rem;
  }

  .card01-cta .botao-cta {
    white-space: normal;
  }
}