/* ══════════════════════════════════════════════
   VÉRTICE — responsive.css
   Breakpoints: 1200 / 1024 / 768 / 520
   ══════════════════════════════════════════════ */

@media (max-width: 1200px) {
  .hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .edge__layout { grid-template-columns: 1fr; }
  .edge__left { position: static; }
  .edge__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  /* Numa coluna só, a marca deixa de ter tamanho próprio e passa a se medir pelo
     título: 85% dele, que é a proporção que ela já tem no limite do desktop.
     Dá 34px no celular (onde o H1 trava em 40px e a marca precisa ser a segunda
     voz, não a primeira) e 47px em 1024 — colado nos 46px do desktop, de modo
     que a virada do breakpoint não se nota. */
  :root { --logo-size: calc(var(--fs-display) * 0.85); }

  .nav__links { display: none; }
  .nav__burger { display: flex; }

  /* a faixa entre a nav e o título acomoda logo + fileira de bolhas com folga;
     embaixo, o padding separa o hero do marquee */
  .hero {
    padding-top: 11.1rem;
    padding-bottom: 3.5rem;
  }
  .hero__inner { grid-template-columns: 1fr; gap: 3.5rem; }
  .hero__sub { max-width: 60ch; }
  .hero__scroll { display: none; }

  /* o mosaico da direita sai de cena; os retratos viram bolhas sobre o título */
  .hero__stage { display: none; }
  .hero__bubbles { display: block; }
  .hero__bubble-inner {
    animation: bubble-float var(--float-dur, 7s) ease-in-out var(--float-delay, 0s) infinite;
  }
  .hero__bubble--yellow .hero__bubble-inner { --float-dur: 6.5s; --float-delay: 0.2s; }
  .hero__bubble--green .hero__bubble-inner  { --float-dur: 8s;   --float-delay: 1.1s; }
  .hero__bubble--violet .hero__bubble-inner { --float-dur: 7.2s; --float-delay: 0.6s; }
  .hero__bubble--orange .hero__bubble-inner { --float-dur: 8.6s; --float-delay: 1.6s; }
  .hero__bubble--pink .hero__bubble-inner   { --float-dur: 6.9s; --float-delay: 0.9s; }

  .about__top { grid-template-columns: 1fr; gap: 2.5rem; }

  /* a ilustração do Sobre sai de cena a partir daqui: fora do layout de duas
     colunas ela vira um bloco solto no meio do texto, sem acrescentar
     informação — e o player nem chega a ser baixado (ver main.js) */
  .about__media { display: none; }
  .about__points { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.8rem; }
  .about__points .about__point:nth-child(3) { padding-left: 0; border-left: 0; }
  .about__footer { grid-template-columns: repeat(3, 1fr); row-gap: 1rem; }
  .about__footer-col { border-right: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 0; }
  .about__footer-col:nth-child(4) { border-right: 0; }
  .about__footer-col--brand { grid-column: 1 / -1; justify-content: flex-start; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 1rem; margin-bottom: 1rem; }
  .about__footer-col--cta { grid-column: 1 / -1; margin-left: 0; margin-top: 0.4rem; }

  /* processo: layout lateral compacto */
  .process__timeline {
    grid-template-columns: 2px var(--node-size) 1fr;
    column-gap: 1rem;
    row-gap: 1.2rem;
    padding-left: 0.5rem;
  }
  .process__line {
    left: 0;
    top: 0;
    bottom: 0;
    transform: none;
  }
  .process-step {
    grid-template-columns: 2px var(--node-size) 1fr;
    column-gap: 1rem;
  }
  .process-step__watermark { display: none; }
  .process-step--left .process-step__node,
  .process-step--right .process-step__node {
    grid-column: 2;
    justify-self: start;
  }
  .process-step--left .process-step__card,
  .process-step--right .process-step__card {
    grid-column: 3;
    justify-self: stretch;
    text-align: left;
    max-width: none;
  }
  .process-step--left .process-step__header,
  .process-step--right .process-step__header { justify-content: flex-start; padding-right: 2.8rem; }
  .process-step--left .process-step__tags,
  .process-step--right .process-step__tags { justify-content: flex-start; }

  /* value: bento vira coluna única */
  .value__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .value__card--large { grid-row: auto; }
  .value__layout { grid-template-columns: 1fr; align-items: start; }
  .value__sub { justify-self: start; }
  .value__shield { width: 90px; height: 90px; }

  .quotes__layout, .faq__container { grid-template-columns: 1fr; }
  .quotes__title, .faq__left { position: static; }

  /* projetos: trilho vira scroll horizontal nativo */
  .work__track {
    width: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .work__track::-webkit-scrollbar { display: none; }
  .project { width: min(78vw, 520px); scroll-snap-align: start; }
  .work__hint { display: none; }
}

/* ── HERO: telas largas sem mosaico (769–1024) ──
   Sobra metade da tela à direita, onde antes ficava o mosaico. As bolhas se
   espalham por essa área: duas acima do badge e três ocupando o vazio. Aqui o
   wrapper mantém a largura total do container, então os % cobrem a tela toda. */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero__bubble--pink   { left: 2%;  top: calc(-85px - var(--bubble-size)); }
  .hero__bubble--violet { left: 22%; top: calc(-93px - var(--bubble-size)); }
  .hero__bubble--yellow { left: 48%; top: calc(-58px - var(--bubble-size)); }
  .hero__bubble--orange { left: 70%; top: calc(24% - var(--bubble-size)); }
  .hero__bubble--green  { left: 55%; top: calc(88% - var(--bubble-size)); }
}

@media (max-width: 768px) {
  .nav .btn { display: none; }

  /* A faixa entre a nav e o badge precisa caber a fileira de bolhas (46px)
     com folga dos dois lados — sem isso a bolha rosa encosta na logo e o badge
     fica colado nas bolhas. Embaixo, o padding separa o hero do marquee. */
  .hero { padding-top: 10.75rem; padding-bottom: 3.5rem; }
  .hero__bubble--pink   { top: calc(-96px  - var(--bubble-size)); }
  .hero__bubble--violet { top: calc(-102px - var(--bubble-size)); }
  .hero__bubble--yellow { top: calc(-95px  - var(--bubble-size)); }
  /* em telas estreitas o 95% do wrap jogava a bolha laranja para fora da tela:
     limita ao ponto em que ela ainda cabe inteira, com 8px de folga da borda */
  .hero__bubble--orange { left: min(95%, calc(100vw - var(--gutter) - var(--bubble-size) - 8px)); }

  /* o wrapper encolhe até a maior linha do título: sem folga lateral sobrando,
     os % das bolhas passam a se referir ao bloco de texto real */
  .hero__title-wrap { width: fit-content; }

  .hero__social-proof { gap: 1rem; }
  .hero__verified { width: 100%; }
  /* as provas viram pills compactas: ganham contorno próprio em vez de
     flutuarem como lista solta, e cabem duas por linha */
  .hero__meta { gap: 0.55rem 0.5rem; }
  .hero__meta-item--badge {
    gap: 0.4rem;
    padding: 0.35rem 0.75rem 0.35rem 0.3rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
  }
  .hero__meta-item--badge b { font-size: 0.8rem; }
  .hero__meta-icon { width: 26px; height: 26px; border-radius: 8px; }
  .hero__meta-icon svg { width: 16px; height: 16px; }
  /* o texto mais longo ("Melhor rank no Google") vai sozinho para a 2ª linha */
  .hero__meta-item--badge:nth-child(2) { order: 3; }

  .services__grid { grid-template-columns: 1fr; }
  .services__intro { grid-template-columns: 1fr; }
  .services__illustration { display: none; }
  .services__sub { margin-top: 0.8rem; }

  .process__timeline { padding-left: 0.25rem; column-gap: 0.8rem; }
  .process-step { column-gap: 0.8rem; }
  .process-step__node { width: 40px; height: 40px; border-radius: 10px; }
  .process-step__counter { font-size: 0.82rem; }
  .process-step__card { padding: 1.1rem; border-radius: 18px; }
  .process-step__icon { width: 32px; height: 32px; top: 0.9rem; right: 0.9rem; }
  .process-step__icon svg { width: 16px; height: 16px; }
  .process-step__header h3 { font-size: 1.15rem; }
  .process-step__card > p { font-size: 0.85rem; margin-bottom: 0.7rem; }
  .process-step__tags li { font-size: 0.6rem; padding: 0.22rem 0.5rem; }

  .about__points { grid-template-columns: 1fr; row-gap: 0; }
  .about__point,
  .about__points .about__point:nth-child(3) {
    padding: 1.2rem 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .about__point:first-child { padding-top: 0; border-top: 0; }
  .about__footer { grid-template-columns: repeat(2, 1fr); }
  .about__footer-col:nth-child(4) { border-right: 1px solid rgba(255, 255, 255, 0.08); }
  /* com colunas largas o título cabe sempre numa linha: sem quebra para
     compensar, a segunda linha reservada só abriria um vão */
  .about__footer-col strong { min-height: 0; }

  .footer__top { flex-direction: column; gap: 2.5rem; }
}

/* ── CELULAR DEITADO (até 1024 de largura, mas pouca altura) ──
   Girar o aparelho leva a largura para 740–932px, então uns caem no bloco de
   tablet acima e outros no de celular em pé — nenhum dos dois conta com tão
   pouca altura, e o hero comprime tudo: as bolhas sobem em cima da logo,
   encostam no badge e as provas grudam no marquee. Vem depois dos dois blocos
   de propósito, para reescrever o ritmo vertical qualquer que seja a largura. */
@media (max-width: 1024px) and (max-height: 600px) {
  /* a faixa entre a nav e o badge acomoda a fileira de bolhas com 40px de
     folga de cada lado; embaixo, o padding afasta as provas do marquee */
  .hero { padding-top: 11.55rem; padding-bottom: 4.5rem; }
  .hero__bubble--pink   { top: calc(-109px - var(--bubble-size)); }
  .hero__bubble--violet { top: calc(-115px - var(--bubble-size)); }
  .hero__bubble--yellow { top: calc(-107px - var(--bubble-size)); }

  /* deitado sobra largura: as três provas cabem numa linha só, então some o
     reordenamento que servia para isolar a mais longa na segunda linha */
  .hero__meta-item--badge:nth-child(2) { order: 0; }
}

@media (max-width: 520px) {
  .about__footer { grid-template-columns: 1fr; }
  .about__footer-col { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 1rem 0; }
  .about__footer-col:nth-child(4) { border-right: 0; }
  .about__footer-col:last-child { border-bottom: 0; }
  .about__footer-col--brand { flex-direction: row; margin-bottom: 0; }
  .about__footer-col--brand p { max-width: none; }
  .about__footer-col--cta { padding: 1.1rem; border: 1px solid rgba(124, 92, 255, 0.28); }

  .edge__grid { grid-template-columns: 1fr; }
  .edge__footer { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .edge__footer-arrows { width: 70px; }

  .hero__actions .btn { width: 100%; justify-content: center; }
  .cta__actions .btn { width: 100%; justify-content: center; }

  .project { width: 85vw; }
  .quotes__viewport { min-height: 300px; }

  .services__grid { grid-template-columns: 1fr; }
  .service-card { padding: 1.25rem; border-radius: 22px; }
  .service-card__icon { width: 46px; height: 46px; }
  .service-card__icon svg { width: 22px; height: 22px; }
  .service-card__arrow { width: 40px; height: 40px; right: 1.1rem; bottom: 1.1rem; }

  .value__grid { grid-template-columns: 1fr; }
  .value__item {
    grid-template-columns: 40px 1fr;
    gap: 0.7rem;
    padding: 0.75rem;
  }
  .value__item-icon { width: 40px; height: 40px; }
  .value__item-bullets {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, 1fr);
  }
  .value__shield {
    width: 70px;
    height: 70px;
    top: 1rem;
    right: 1rem;
  }
  .value__guarantee { padding: 0.7rem; gap: 0.7rem; }
  .value__guarantee-icon { width: 34px; height: 34px; }
  .value__guarantee-icon svg { width: 16px; height: 16px; }
  .value__card { padding: 1.1rem; border-radius: 22px; }
}