/* Ritmo visual compartilhado pelas duas heroes em telas pequenas. */
@media (max-width: 680px) {
  /* Site principal */
  header.fixed {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  header.fixed img[alt="Sarah Portela Advocacia"] {
    height: 52px !important;
  }

  #inicio.gradient-hero {
    min-height: auto !important;
    padding-top: 92px !important;
    padding-bottom: 44px !important;
  }

  #inicio.gradient-hero > .container {
    gap: 12px !important;
  }

  #inicio.gradient-hero > .container > div:first-child > :not([hidden]) ~ :not([hidden]) {
    margin-top: 14px !important;
  }

  #inicio.gradient-hero img[alt="Sarah Portela Advogada"] {
    height: 34px !important;
    margin-bottom: 0 !important;
  }

  #inicio.gradient-hero > .container > div:first-child > p {
    max-width: 33ch;
    margin-right: auto;
    margin-left: auto;
    font-size: 0.96rem !important;
    line-height: 1.5;
    letter-spacing: 0.01em;
    text-wrap: balance;
  }

  #inicio.gradient-hero h1,
  .hero .hero-copy h1 {
    width: min(100%, 18ch);
    max-width: 18ch;
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(1.85rem, 8.4vw, 2.15rem) !important;
    line-height: 1.08 !important;
    text-wrap: balance;
  }

  #inicio.gradient-hero h1 {
    width: 100%;
    max-width: 24ch;
    font-size: clamp(1.38rem, 6.9vw, 1.85rem) !important;
    line-height: 1.1 !important;
  }

  #inicio.gradient-hero > .container > div:nth-child(2) {
    width: min(100%, 300px) !important;
    margin-top: 2px;
  }

  #inicio.gradient-hero > .container > div:nth-child(2) > div > div:last-child {
    bottom: 0 !important;
  }

  #inicio.gradient-hero img[alt="Dra. Sarah Portela, advogada previdenciarista"] {
    height: 310px !important;
  }

  #inicio.gradient-hero > .container > div:nth-child(3) {
    width: 100%;
    margin-top: 0 !important;
  }

  #inicio.gradient-hero > .container > div:nth-child(3) > :not([hidden]) ~ :not([hidden]) {
    margin-top: 12px !important;
  }

  #inicio.gradient-hero > .container > div:nth-child(3) > a {
    width: min(100%, 320px);
    min-height: 54px;
    padding-right: 28px !important;
    padding-left: 28px !important;
  }

  /* Seção A Solução do site principal */
  section:has(img[alt="Dra. Sarah Portela em atendimento"]) h2 {
    width: 100%;
    max-width: none;
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(1rem, 4.7vw, 1.25rem) !important;
    line-height: 1.18 !important;
    text-wrap: balance;
  }

  section img[alt="Dra. Sarah Portela em atendimento"],
  section img[alt="Dra. Sarah Portela, advogada"] {
    height: 340px !important;
    min-height: 0 !important;
    object-position: center top;
  }

  #sobre {
    padding-bottom: 24px !important;
  }

  #depoimentos {
    padding-top: 24px !important;
  }

  .last-call-button-polished {
    width: 100% !important;
    max-width: 320px;
    min-height: 56px;
    gap: 10px !important;
    padding-right: 24px !important;
    padding-left: 24px !important;
    font-size: 0.8rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    text-align: center;
  }

  .last-call-button-polished svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
  }

  /* Landing page de Planejamento Previdenciário */
  .hero {
    padding-top: 34px !important;
    padding-bottom: 54px !important;
  }

  .hero .hero-grid {
    gap: 24px !important;
  }

  .hero .hero-copy .eyebrow {
    margin-bottom: 12px;
  }

  .hero .hero-copy h1 {
    margin-bottom: 18px;
  }

  .hero .hero-lead,
  .hero .hero-support {
    max-width: 33ch;
    margin-right: auto;
    margin-left: auto;
    line-height: 1.55;
    text-wrap: balance;
  }

  .hero .hero-lead {
    font-size: 0.98rem;
  }

  .hero .hero-support {
    font-size: 0.9rem;
  }

  .hero .hero-checks {
    gap: 7px;
    max-width: 330px;
    margin: 20px auto 24px;
    font-size: 0.88rem;
  }

  .hero .hero-copy > .button {
    width: min(100%, 330px);
    margin-right: auto;
    margin-left: auto;
  }

  .hero .button-note {
    margin-top: 8px;
  }

  .hero .hero-visual {
    width: min(100%, 300px);
    margin-top: 10px;
    padding: 12px 12px 0 0;
  }

  .hero .hero-frame,
  .hero .hero-frame img {
    height: 370px;
    min-height: 370px;
  }

  .hero .credential-card {
    right: -4px;
    bottom: -18px;
    min-width: 200px;
    padding: 14px 18px;
  }
}

@media (max-width: 680px) {
  .hero .hero-copy h1.hero-title-three-lines {
    width: 100%;
    max-width: 100%;
    font-size: clamp(1.18rem, 6vw, 1.45rem) !important;
    line-height: 1.08 !important;
  }

  .hero-title-three-lines .hero-title-line {
    display: block;
    white-space: nowrap;
  }
}

/* Novo retrato da seção A Solução, com URL própria para evitar cache. */
img[alt="Dra. Sarah Portela em atendimento"] {
  content: url("/assets/sarah-solucao-v2.jpeg");
}

/* Novo retrato da seção Sobre. */
img[alt="Dra. Sarah Portela, advogada"] {
  content: url("/assets/sarah-sobre-v2.jpeg");
}