/* =========================================================
   GÁVIA LINK — RESPONSIVE.CSS
   ---------------------------------------------------------
   Responsividade e ajustes finais por viewport.

   OBJETIVOS:
   - Evitar conflito da decoração do Hero no mobile
   - Preservar o Hero já aprovado no desktop
   - Garantir visualização dos mockups do WhatsApp
   - Manter proporções equilibradas em tablet
   - Não alterar a estrutura principal das seções

   Mobile-first complementar ao sections.css
========================================================= */


/* =========================================================
   01. MOBILE
   Até 699px
========================================================= */

@media (max-width: 699px) {

  /* -------------------------------------------------------
     HERO
  ------------------------------------------------------- */

  .hero {
    padding-top: 1.25rem;
    padding-bottom: 0;

    overflow: hidden;
  }


  /*
     No mobile a forma vermelha precisa ficar realmente
     no canto, sem entrar na área da logo e do título.
  */

  .hero::before {
    top: 0;
    right: 0;

    width: clamp(105px, 34vw, 145px);

    border-radius:
      0
      0
      0
      68%;
  }


  /*
     Forma secundária mais discreta.
  */

  .hero::after {
    top: 2.75rem;
    right: -25%;

    width: clamp(170px, 48vw, 215px);

    opacity: 0.08;
  }


  .hero__container {
    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 1.5rem;

    min-height: 0;

    text-align: center;
  }


  /* -------------------------------------------------------
     CONTEÚDO DO HERO
  ------------------------------------------------------- */

  .hero__content {
    position: relative;

    z-index: 6;

    display: flex;
    flex-direction: column;

    align-items: center;

    width: 100%;
    max-width: 100%;

    gap: 0.7rem;

    padding-inline: 0.25rem;
  }


  /* Logo */

  .hero__brand {
    position: relative;

    z-index: 7;

    margin: 0;
    margin-bottom: 0.1rem;
  }


  .hero__brand-logo {
    width: clamp(135px, 38vw, 155px);
    max-width: 100%;

    height: auto;
  }


  /* Título */

  .hero__title {
    position: relative;

    z-index: 6;

    width: 100%;
    max-width: 11ch;

    margin-inline: auto;

    font-size:
      clamp(2.45rem, 11vw, 3rem);

    line-height: 0.98;
  }


  .hero__title span {
    display: block;
  }


  /* Texto */

  .hero__description {
    position: relative;

    z-index: 6;

    width: min(100%, 300px);

    margin-inline: auto;

    font-size: 0.96rem;
    line-height: 1.45;
  }


  /* CTA */

  .hero__cta {
    position: relative;

    z-index: 6;

    width: min(100%, 310px);

    margin-top: 0.2rem;
  }


  /* -------------------------------------------------------
     CELULAR DO HERO
  ------------------------------------------------------- */

  .hero__visual {
    position: relative;

    z-index: 4;

    width: 100%;

    margin-top: 0.15rem;

    display: flex;
    justify-content: center;
  }


  .phone-preview--hero {
    width: min(78vw, 300px);
    max-width: 300px;

    margin-inline: auto;

    transform:
      translateY(22px)
      rotate(-1deg);
  }


  .hero__brand-symbol {
    top: 15%;
    right: -5px;

    width: 46px;
    height: 46px;

    padding: 8px;

    border-radius: 15px;
  }


  /* =======================================================
     PREVIEW WHATSAPP
  ======================================================= */

  .group-preview {
    padding-top: 4.75rem;
    padding-bottom: 3.25rem;
  }


  .group-preview .section-heading {
    gap: 0.65rem;
  }


  .group-preview .section-heading h2 {
    max-width: 11ch;

    margin-inline: auto;
  }


  .group-preview__showcase {
    display: grid;

    grid-template-columns: 1fr;

    align-items: center;

    gap: 1rem;

    width: min(100%, 340px);

    margin:
      1.75rem
      auto
      0;
  }


  /* Mockup principal */

  .group-preview__showcase
  .whatsapp-showcase--featured {
    display: block;

    width: min(100%, 285px);
    max-width: 285px;

    margin-inline: auto;

    opacity: 1;
    visibility: visible;

    transform: rotate(-0.7deg);
  }


  .group-preview__showcase
  .whatsapp-showcase--featured img {
    display: block;

    width: 100%;
    height: auto;

    opacity: 1;
    visibility: visible;

    object-fit: contain;
  }


  /* Dois mockups menores */

  .group-preview__secondary {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    align-items: start;

    gap: 0.75rem;

    width: 100%;
    max-width: 340px;

    margin-inline: auto;
  }


  .group-preview__secondary
  .whatsapp-showcase {
    display: block;

    width: 100%;
    min-width: 0;

    opacity: 1;
    visibility: visible;
  }


  .group-preview__secondary
  .whatsapp-showcase img {
    display: block;

    width: 100%;
    height: auto;

    opacity: 1;
    visibility: visible;

    object-fit: contain;
  }


  .group-preview .section-cta {
    margin-top: 1.75rem;
  }


  /* =======================================================
     CURADORIA
  ======================================================= */

  .curation {
    padding-block: 3.25rem;
  }


  .curation__container {
    gap: 1.5rem;
  }


  .curation-flow {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 0.65rem;
  }


  .curation-flow__arrow {
    display: none;
  }


  .curation
  .curation-step {
    min-height: 108px;

    padding-inline: 0.7rem;
  }


  /* =======================================================
     RADAR
  ======================================================= */

  .radar {
    padding-block: 3.25rem;
  }


  .radar__viewport {
    width: 100%;

    margin-top: 1.5rem;
  }


  .radar-list {
    min-height: 295px;

    gap: 0.65rem;
  }


  /* =======================================================
     CTA FINAL
  ======================================================= */

  .final-cta {
    padding:
      3.5rem
      0;
  }


  .final-cta h2 {
    font-size:
      clamp(2.15rem, 10vw, 2.75rem);
  }


  /* =======================================================
     FOOTER
  ======================================================= */

  .site-footer__inner {
    flex-direction: column;

    justify-content: center;

    text-align: center;
  }

}



/* =========================================================
   02. MOBILE PEQUENO
   Até 380px
========================================================= */

@media (max-width: 380px) {

  .hero {
    padding-top: 1rem;
  }


  .hero::before {
    width: 108px;
  }


  .hero::after {
    width: 175px;

    right: -29%;
  }


  .hero__brand-logo {
    width: 132px;
  }


  .hero__title {
    max-width: 10.5ch;

    font-size: 2.35rem;
  }


  .hero__description {
    width: min(100%, 280px);

    font-size: 0.92rem;
  }


  .hero__cta {
    width: min(100%, 290px);
  }


  .phone-preview--hero {
    width: min(80vw, 285px);

    transform:
      translateY(20px)
      rotate(-1deg);
  }


  .hero__brand-symbol {
    width: 43px;
    height: 43px;
  }


  .group-preview {
    padding-top: 4.25rem;
    padding-bottom: 3rem;
  }


  .group-preview__showcase {
    width: min(100%, 315px);
  }


  .group-preview__showcase
  .whatsapp-showcase--featured {
    width: min(100%, 270px);
  }


  .group-preview__secondary {
    max-width: 315px;

    gap: 0.6rem;
  }


  .curation {
    padding-block: 3rem;
  }


  .curation
  .curation-step {
    min-height: 104px;

    padding-inline: 0.6rem;
  }


  .curation-step strong {
    font-size: 0.82rem;
  }


  .radar {
    padding-block: 3rem;
  }


  .radar-list {
    min-height: 285px;
  }


  .final-cta {
    padding:
      3.25rem
      0;
  }

}



/* =========================================================
   03. TABLET
   700px — 1023px
========================================================= */

@media (min-width: 700px) and (max-width: 1023px) {

  /* -------------------------------------------------------
     HERO
  ------------------------------------------------------- */

  .hero {
    padding-top:
      clamp(1.5rem, 2.5vw, 2rem);
  }


  .hero::before {
    width:
      clamp(230px, 31vw, 300px);
  }


  .hero::after {
    width:
      clamp(300px, 38vw, 390px);

    right: -18%;

    opacity: 0.11;
  }


  .hero__container {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 0.88fr);

    align-items: start;

    gap:
      clamp(1.75rem, 4vw, 3rem);

    text-align: left;
  }


  .hero__content {
    align-items: flex-start;

    max-width: 560px;

    padding-top: 0.5rem;
  }


  .hero__brand-logo {
    width:
      clamp(145px, 18vw, 175px);
  }


  .hero__title {
    max-width: 9.5ch;
  }


  .hero__description {
    max-width: 36ch;

    margin-inline: 0;
  }


  .hero__cta {
    width: auto;
  }


  .hero__visual {
    align-self: start;
  }


  .phone-preview--hero {
    width: 100%;
    max-width: 340px;

    transform:
      translateY(10px)
      rotate(2deg);
  }


  /* -------------------------------------------------------
     PREVIEW WHATSAPP
  ------------------------------------------------------- */

  .group-preview {
    padding-top: 5.5rem;
    padding-bottom: 4rem;
  }


  .group-preview__showcase {
    display: grid;

    grid-template-columns:
      minmax(280px, 320px)
      minmax(260px, 320px);

    justify-content: center;
    align-items: center;

    gap: 1.5rem;

    width: min(100%, 760px);

    margin-inline: auto;
  }


  .group-preview__showcase
  .whatsapp-showcase--featured {
    display: block;

    width: 100%;
    max-width: 320px;

    margin:
      0
      0
      0
      auto;

    opacity: 1;
    visibility: visible;
  }


  .group-preview__showcase
  .whatsapp-showcase--featured img {
    display: block;

    width: 100%;
    height: auto;

    opacity: 1;
    visibility: visible;
  }


  .group-preview__secondary {
    display: grid;

    grid-template-columns: 1fr;

    gap: 0.9rem;

    width: 100%;
    max-width: 315px;

    margin:
      0
      auto
      0
      0;
  }


  .group-preview__secondary
  .whatsapp-showcase {
    display: block;

    width: 100%;

    opacity: 1;
    visibility: visible;
  }


  .group-preview__secondary
  .whatsapp-showcase img {
    display: block;

    width: 100%;
    height: 205px;

    opacity: 1;
    visibility: visible;

    object-fit: cover;
    object-position: top;
  }


  /* -------------------------------------------------------
     CURADORIA
  ------------------------------------------------------- */

  .curation-flow {
    grid-template-columns:
      minmax(0, 1fr)
      auto
      minmax(0, 1fr)
      auto
      minmax(0, 1fr)
      auto
      minmax(0, 1fr);

    align-items: center;

    gap: 0.5rem;
  }


  .curation-flow__arrow {
    display: block;
  }


  /* -------------------------------------------------------
     FOOTER
  ------------------------------------------------------- */

  .site-footer__inner {
    flex-direction: row;

    justify-content: space-between;

    text-align: left;
  }

}



/* =========================================================
   04. DESKTOP
   1024px+
========================================================= */

@media (min-width: 1024px) {

  /* -------------------------------------------------------
     HERO
     Mantemos o resultado que já funcionou no desktop.
  ------------------------------------------------------- */

  .hero {
    padding-top:
      clamp(1.75rem, 2.4vw, 2.5rem);
  }


  .hero__container {
    display: grid;

    grid-template-columns:
      minmax(0, 1.08fr)
      minmax(350px, 0.92fr);

    align-items: start;

    gap:
      clamp(2.5rem, 5vw, 4.5rem);

    min-height: 0;

    text-align: left;
  }


  .hero__content {
    align-items: flex-start;

    max-width: 620px;

    padding-top: 0;
  }


  .hero__brand-logo {
    width:
      clamp(150px, 13vw, 185px);
  }


  .hero__title {
    max-width: 9ch;
  }


  .hero__description {
    margin-inline: 0;

    max-width: 38ch;
  }


  .hero__cta {
    width: auto;
  }


  .hero__visual {
    align-self: start;

    display: block;
  }


  .phone-preview--hero {
    width: 100%;
    max-width: 400px;

    margin-inline: auto;

    transform:
      translateY(0)
      rotate(2deg);
  }


  /* -------------------------------------------------------
     PREVIEW WHATSAPP
     Força renderização dos três mockups no desktop.
  ------------------------------------------------------- */

  .group-preview {
    padding-top: 5.75rem;
    padding-bottom: 4.25rem;
  }


  .group-preview__showcase {
    display: grid;

    grid-template-columns:
      minmax(320px, 360px)
      minmax(300px, 350px);

    justify-content: center;
    align-items: center;

    gap: 2rem;

    width: min(100%, 930px);

    margin-inline: auto;
  }


  /* Principal */

  .group-preview__showcase
  .whatsapp-showcase--featured {
    display: block;

    width: 100%;
    max-width: 350px;

    margin:
      0
      0
      0
      auto;

    opacity: 1;
    visibility: visible;

    overflow: hidden;
  }


  .group-preview__showcase
  .whatsapp-showcase--featured img {
    display: block;

    width: 100%;
    height: auto;

    max-height: none;

    opacity: 1;
    visibility: visible;

    object-fit: contain;
    object-position: top;
  }


  /* Coluna direita */

  .group-preview__secondary {
    display: grid;

    grid-template-columns: 1fr;

    align-items: center;

    gap: 1rem;

    width: 100%;
    max-width: 350px;

    margin:
      0
      auto
      0
      0;

    transform: translateY(-4px);
  }


  .group-preview__secondary
  .whatsapp-showcase {
    display: block;

    width: 100%;
    max-width: 350px;

    min-width: 0;
    max-height: none;

    opacity: 1;
    visibility: visible;

    overflow: hidden;
  }


  .group-preview__secondary
  .whatsapp-showcase img {
    display: block;

    width: 100%;
    height: 225px;

    max-height: none;

    opacity: 1;
    visibility: visible;

    object-fit: cover;
    object-position: top;
  }


  /* -------------------------------------------------------
     CURADORIA
  ------------------------------------------------------- */

  .curation {
    padding-block: 4.25rem;
  }


  .curation-flow {
    grid-template-columns:
      minmax(0, 1fr)
      auto
      minmax(0, 1fr)
      auto
      minmax(0, 1fr)
      auto
      minmax(0, 1fr);

    align-items: center;

    gap: 0.5rem;

    max-width: 940px;
  }


  .curation-flow__arrow {
    display: block;
  }


  .curation
  .curation-step {
    min-height: 128px;
  }


  /* -------------------------------------------------------
     RADAR
  ------------------------------------------------------- */

  .radar {
    padding-block: 4.25rem;
  }


  .radar__viewport {
    width: min(100%, 880px);
  }


  .radar-list {
    min-height: 360px;
  }


  /* -------------------------------------------------------
     CTA FINAL
  ------------------------------------------------------- */

  .final-cta {
    padding:
      4.5rem
      0;
  }


  /* -------------------------------------------------------
     FOOTER
  ------------------------------------------------------- */

  .site-footer__inner {
    flex-direction: row;

    justify-content: space-between;

    text-align: left;
  }

}



/* =========================================================
   05. LARGE DESKTOP
   1280px+
========================================================= */

@media (min-width: 1280px) {

  .hero {
    padding-top: 2.25rem;
  }


  .hero::before {
    width:
      clamp(360px, 29vw, 470px);
  }


  .hero::after {
    width:
      clamp(430px, 34vw, 560px);
  }


  .phone-preview--hero {
    max-width: 415px;
  }


  /* Preview um pouco mais aberto */

  .group-preview__showcase {
    grid-template-columns:
      minmax(340px, 380px)
      minmax(320px, 360px);

    width: min(100%, 980px);

    gap: 2.25rem;
  }


  .group-preview__showcase
  .whatsapp-showcase--featured {
    max-width: 370px;
  }


  .group-preview__secondary {
    max-width: 360px;
  }


  .group-preview__secondary
  .whatsapp-showcase {
    max-width: 360px;
  }


  .group-preview__secondary
  .whatsapp-showcase img {
    height: 240px;
  }


  .radar__viewport {
    max-width: 900px;
  }

}



/* =========================================================
   06. TELAS MUITO GRANDES
   1600px+
========================================================= */

@media (min-width: 1600px) {

  .hero__container {
    gap: 5rem;
  }


  .phone-preview--hero {
    max-width: 425px;
  }


  .group-preview__showcase {
    width: min(100%, 1000px);
  }

}



/* =========================================================
   07. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .phone-preview--hero,
  .hero__brand-symbol,
  .final-cta__symbol,
  .group-preview__showcase
  .whatsapp-showcase--featured,
  .group-preview__secondary
  .whatsapp-showcase {
    transform: none;
  }

}