/*
 * Revisão mobile consolidada
 * Esta folha é carregada por último para manter a experiência consistente
 * na home, nas páginas de tratamentos e nas páginas editoriais.
 */

.section-pill {
  display: none !important;
}

h2 {
  max-width: none !important;
}

:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 3px solid rgba(184, 157, 130, 0.95);
  outline-offset: 4px;
}

@media (min-width: 821px) {
  .local-hero .procedure-hero-v2__content,
  .local-hero h1 {
    width: min(50vw, 50rem) !important;
    max-width: 50vw !important;
  }
}

/*
 * Menu mobile: contraste previsivel em qualquer pagina ou posicao de rolagem.
 */
@media (max-width: 820px) {
  body.menu-open .site-header,
  body.menu-open .site-header.is-scrolled,
  body.menu-open .procedure-page-v2 .site-header,
  body.menu-open .procedure-page-v2 .site-header.is-scrolled {
    color: var(--color-charcoal) !important;
    background: rgba(247, 243, 238, 0.99) !important;
    box-shadow: none !important;
  }

  body.menu-open .site-header .brand-lockup::before,
  body.menu-open .site-header:not(.is-scrolled) .brand-lockup::before {
    filter: none !important;
  }

  body.menu-open .site-navigation.is-open {
    align-content: center;
    align-items: stretch;
    color: var(--color-charcoal) !important;
    background: rgba(247, 243, 238, 0.99) !important;
  }

  body.menu-open .site-navigation.is-open a {
    width: 100%;
    max-width: none;
    justify-content: flex-start;
    text-align: left;
  }

  body.menu-open .site-navigation.is-open a,
  body.menu-open .menu-toggle {
    color: var(--color-charcoal) !important;
  }

  body.menu-open .menu-toggle i,
  body.menu-open .menu-toggle i::before,
  body.menu-open .menu-toggle i::after {
    background: currentColor !important;
  }
}

@media (max-width: 820px) {
  :root {
    --anchor-offset: 80px;
    --mobile-gutter: 1rem;
    --mobile-section-gap: 3.75rem;
  }

  html {
    scroll-padding-top: var(--anchor-offset);
  }

  body {
    min-width: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  body,
  .site-frame,
  main {
    max-width: 100%;
    overflow-x: clip;
  }

  main > section[id],
  footer[id],
  .procedure-page-v2 main > section[id] {
    scroll-margin-top: var(--anchor-offset);
  }

  h2,
  .footer-lead h2,
  .booking-panel h2,
  .procedure-page-v2 h2 {
    font-size: clamp(2rem, 8.7vw, 2.25rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.045em;
  }

  h3 {
    line-height: 1.2;
  }

  p {
    line-height: 1.65;
  }

  a,
  button,
  summary,
  input,
  select,
  textarea,
  label.upload-button {
    touch-action: manipulation;
  }

  .button-link,
  .menu-toggle,
  .chat-widget__close,
  .chat-widget__navigation button,
  .chat-suggestions button,
  .chat-primary-action,
  .chat-composer-bar button,
  .upload-button,
  .procedure-faq summary,
  .faq-list summary,
  .footer-support summary {
    min-height: 44px;
  }

  .section-space {
    padding-top: var(--mobile-section-gap) !important;
    padding-bottom: var(--mobile-section-gap) !important;
  }

  .surface-section,
  .dark-section,
  .site-footer {
    width: calc(100% - 1rem) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    border-radius: 1.35rem;
  }

  .about-section,
  .why-section,
  .stories-section,
  .transformation-section,
  .care-section,
  .insights-section,
  .procedure-overview,
  .procedure-related {
    width: calc(100% - 2rem) !important;
  }

  .services-section > *,
  .special-section > *,
  .studio-section > *,
  .expertise-section > *,
  .site-footer > * {
    width: calc(100% - 2rem) !important;
  }

  .split-heading,
  .procedure-related > header,
  .procedure-faq > header {
    gap: 1rem !important;
    margin-bottom: 1.75rem !important;
  }

  /*
   * Cabeçalho
   */
  .announcement-bar {
    display: none !important;
  }

  .site-header,
  .procedure-page-v2 .site-header {
    z-index: 5000;
    top: 0 !important;
    right: 0;
    left: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 5rem;
    gap: 0.5rem;
    padding: 0.75rem var(--mobile-gutter);
    border-bottom-color: transparent;
  }

  .site-header.is-scrolled,
  .procedure-page-v2 .site-header.is-scrolled {
    top: 0 !important;
    min-height: 4.75rem;
    padding-top: calc(0.55rem + env(safe-area-inset-top));
    padding-bottom: 0.55rem;
    border-bottom-color: rgba(66, 65, 67, 0.1);
    background: rgba(247, 243, 238, 0.96);
    box-shadow: 0 0.55rem 1.5rem rgba(36, 35, 38, 0.08);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .site-header .brand-lockup {
    --brand-lockup-width: 14.5rem;
    --brand-lockup-height: 3.625rem;
    position: relative;
    display: block;
    min-width: 0;
    width: min(var(--brand-lockup-width), 100%);
    height: var(--brand-lockup-height);
    max-width: none;
    color: transparent;
  }

  .site-header .brand-lockup::before {
    position: absolute;
    inset: 0;
    display: block;
    content: "";
    background: url("../img/tatyana-dayrell-lockup.svg?v=20260728-01") left center / contain no-repeat;
    transition: filter 220ms ease;
  }

  .site-header .brand-lockup > img,
  .site-header .brand-lockup > span {
    display: none;
  }

  .site-header:not(.is-scrolled) .brand-lockup::before {
    filter: brightness(0) invert(1);
  }

  .site-header.is-scrolled .brand-lockup::before {
    filter: none;
  }

  .menu-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
  }

  .site-navigation.is-open {
    z-index: 4999;
    display: grid;
    align-content: start;
    padding:
      calc(6.25rem + env(safe-area-inset-top))
      1.25rem
      calc(2rem + env(safe-area-inset-bottom));
    background: rgba(247, 243, 238, 0.985);
  }

  .site-navigation.is-open a {
    display: flex;
    min-height: 3.5rem;
    align-items: center;
    border-bottom: 1px solid rgba(66, 65, 67, 0.12);
    font-size: 1.05rem;
  }

  /*
   * Hero principal
   */
  .hero-shell,
  .procedure-hero-v2 {
    width: 100%;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  @supports (height: 100dvh) {
    .hero-shell,
    .procedure-hero-v2 {
      height: 100dvh !important;
      min-height: 100dvh !important;
      max-height: 100dvh;
    }
  }

  .hero-shell .hero-compare,
  .hero-shell .compare-picture,
  .hero-shell .compare-picture img {
    height: 100%;
  }

  .hero-shell .compare-picture img {
    object-position: center center;
  }

  .hero-shell .compare-shade {
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(
        180deg,
        rgba(8, 7, 8, 0.36) 0%,
        rgba(8, 7, 8, 0.3) 42%,
        rgba(8, 7, 8, 0.46) 68%,
        rgba(8, 7, 8, 0.72) 100%
      ),
      rgba(0, 0, 0, 0.24);
  }

  .hero-compare,
  .compare-control {
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
  }

  .hero-compare img,
  .compare-picture img {
    pointer-events: none;
    -webkit-user-drag: none;
  }

  .hero-shell .compare-divider {
    top: 5rem !important;
    bottom: 41%;
    width: 1px;
  }

  .hero-shell .compare-divider span {
    width: 3rem;
    height: 3rem;
  }

  .hero-content {
    right: var(--mobile-gutter);
    bottom: 10.75rem;
    left: var(--mobile-gutter);
    width: auto;
  }

  .hero-message {
    bottom: 10.75rem !important;
    width: min(100%, 22rem);
  }

  .hero-shell h1 {
    width: min(100%, 22rem) !important;
    max-width: 22rem !important;
    font-size: clamp(2.15rem, 9.4vw, 2.55rem) !important;
    line-height: 0.98 !important;
    text-wrap: balance;
  }

  .hero-copy {
    bottom: 4.85rem !important;
  }

  .hero-actions .button-link {
    width: auto;
    min-width: 12.75rem;
  }

  .simulation-note {
    display: none !important;
  }

  /*
   * Conteúdo da home
   */
  .about-section {
    grid-template-columns: 1fr !important;
  }

  .about-content {
    order: 1;
  }

  .about-collage {
    order: 2;
    height: 21rem !important;
    min-height: 21rem !important;
  }

  .about-principles {
    gap: 1rem;
  }

  .about-principles article {
    min-height: auto;
  }

  .about-quote {
    margin-top: 1.25rem;
    padding-block: 1.35rem;
  }

  .expertise-section > header {
    width: calc(100% - 2rem) !important;
    margin-bottom: 1.75rem;
  }

  .expertise-section > header p {
    font-size: 1rem;
  }

  .expertise-grid {
    gap: 0.85rem !important;
  }

  .expertise-benefit {
    min-height: auto !important;
    padding: 1.5rem !important;
  }

  .expertise-image {
    min-height: 18rem !important;
  }

  .expertise-image img {
    padding: 1rem 1rem 2.75rem;
  }

  .expertise-center-cta {
    padding-top: 0.5rem;
  }

  .treatment-card {
    min-height: 21rem !important;
  }

  .treatment-navigation__actions {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .treatment-controls {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
  }

  .treatment-controls button,
  .treatment-view-all {
    width: 100%;
    min-width: 0;
    min-height: 3.25rem;
    height: auto;
    justify-content: center;
    padding-inline: 0.875rem;
    white-space: nowrap;
  }

  .treatment-navigation__status {
    min-height: 3.25rem;
  }

  .why-section {
    grid-template-columns: 1fr !important;
  }

  .why-content {
    order: 1;
  }

  .why-collage {
    order: 2;
    height: 21rem !important;
  }

  .story-grid > a,
  .story-grid > a:nth-child(2),
  .story-grid > a:nth-child(3),
  .insight-grid > a {
    min-width: 84%;
    flex-basis: 84%;
  }

  .treatment-pills a {
    min-height: 3.25rem;
  }

  .booking-panel {
    min-height: 18rem !important;
    padding: 1.5rem !important;
  }

  .transformation-compare {
    width: 88%;
    height: 21rem !important;
    min-height: 21rem !important;
    flex-basis: 88%;
  }

  .studio-benefits {
    gap: 0.65rem;
  }

  .studio-feature {
    border-radius: 1.25rem;
  }

  .studio-feature > div {
    padding: 1.5rem !important;
  }

  .studio-feature figure {
    min-height: 17rem !important;
  }

  .care-section {
    grid-template-columns: 1fr !important;
  }

  .care-content {
    order: 1;
  }

  .care-mosaic {
    order: 2;
    min-height: 21rem !important;
  }

  .care-slider {
    min-height: 15rem;
    padding: 1.4rem;
  }

  .faq-section {
    grid-template-columns: 1fr !important;
  }

  .faq-content {
    order: 1;
  }

  .faq-collage {
    display: none;
  }

  .faq-list summary,
  .procedure-faq__list summary {
    padding-block: 1rem;
  }

  /*
   * Heros de tratamentos e páginas editoriais
   */
  .procedure-hero-v2__media img {
    object-position: center;
  }

  .procedure-hero-v2__shade,
  .local-hero .procedure-hero-v2__shade {
    background:
      linear-gradient(0deg, rgba(20, 18, 18, 0.9) 0%, rgba(20, 18, 18, 0.48) 43%, rgba(20, 18, 18, 0.08) 76%),
      linear-gradient(90deg, rgba(20, 18, 18, 0.22), transparent 72%);
  }

  .procedure-hero-v2__content,
  .local-hero .procedure-hero-v2__content {
    right: var(--mobile-gutter);
    bottom: calc(1.5rem + env(safe-area-inset-bottom));
    left: var(--mobile-gutter);
    width: auto;
    max-width: 34rem;
    gap: 0.85rem;
  }

  .procedure-page-v2 .procedure-hero-v2 h1,
  .local-hero h1 {
    width: 100% !important;
    max-width: 34rem;
    margin: 0;
    font-size: clamp(2.25rem, 10vw, 2.65rem) !important;
    line-height: 0.98 !important;
    overflow-wrap: normal;
    text-wrap: balance;
  }

  .procedure-hero-v2__content > p {
    display: block;
    width: 100% !important;
    margin: 0;
    overflow: visible;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.9rem;
    line-height: 1.5;
    -webkit-box-orient: initial;
    -webkit-line-clamp: initial;
  }

  .local-hero .procedure-hero-v2__media img {
    object-position: center;
    filter: saturate(0.88) contrast(1);
  }

  .local-hero .procedure-hero-v2__content > p {
    display: none;
  }

  .procedure-hero-v2__content .button-link {
    width: auto;
    min-width: 13.25rem;
    max-width: 100%;
  }

  .procedure-hero-v2__scroll {
    display: none;
  }

  /*
   * Conteúdo dos tratamentos
   */
  .procedure-overview,
  .procedure-related {
    width: calc(100% - 2rem) !important;
  }

  .procedure-overview {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .procedure-directory {
    position: relative;
    z-index: 2;
    top: auto;
  }

  .procedure-directory summary {
    min-height: 4rem;
    padding: 0.9rem 1.1rem;
  }

  .procedure-directory nav a {
    min-height: 3.25rem;
  }

  .procedure-introduction {
    gap: 1rem;
    padding-bottom: 2.75rem;
  }

  .procedure-introduction p,
  .procedure-detail__content,
  .local-article-section__content,
  .local-introduction > div {
    font-size: 1rem;
    line-height: 1.68;
  }

  .procedure-detail {
    gap: 1.1rem;
    padding: 2.75rem 0;
  }

  .procedure-detail__content ul {
    gap: 0.75rem;
  }

  .procedure-detail__content li {
    min-height: auto;
    padding: 1.25rem;
    border-radius: 1rem;
  }

  .procedure-conversion {
    min-height: 28rem;
    gap: 1.25rem;
    padding: 3rem 1.25rem;
    border-radius: 1.35rem;
  }

  .procedure-related.section-space {
    padding-top: var(--mobile-section-gap) !important;
    padding-bottom: var(--mobile-section-gap) !important;
  }

  .procedure-related-card {
    min-width: 84%;
    min-height: 21rem;
    flex: 0 0 84%;
  }

  .procedure-faq {
    gap: 1.75rem;
    padding: var(--mobile-section-gap) 1rem;
  }

  .procedure-faq__list summary {
    gap: 1rem;
    font-size: 1rem;
  }

  /*
   * Conteúdo editorial e SEO
   */
  .local-overview {
    padding-top: var(--mobile-section-gap);
  }

  .local-introduction {
    gap: 1rem;
    padding-bottom: 2.75rem;
  }

  .local-introduction .local-byline {
    font-size: 0.8125rem;
  }

  .local-article-section {
    gap: 1.1rem;
    padding: 2.75rem 0;
  }

  .local-article-section > h2 {
    position: static;
  }

  .local-answer,
  .local-summary,
  .local-location__details {
    padding: 1.25rem;
    border-radius: 1rem;
  }

  .local-checklist,
  .local-step-grid,
  .local-objective-grid,
  .local-technology-grid,
  .local-choice-grid {
    gap: 0.75rem;
  }

  .local-checklist li,
  .local-step-grid article,
  .local-choice-grid article {
    min-height: auto;
    padding: 1.25rem;
    border-radius: 1rem;
  }

  .local-related-pages {
    gap: 1.25rem;
  }

  .local-related-pages > div {
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 0.5rem;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .local-related-pages > div::-webkit-scrollbar {
    display: none;
  }

  .local-related-pages > div > a {
    min-width: 84%;
    flex: 0 0 84%;
    scroll-snap-align: start;
  }

  .local-table-wrap {
    max-width: 100%;
    overflow-x: clip;
  }

  .local-table-wrap td {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  /*
   * Conversão, widget e rodapé
   */
  .mobile-conversion {
    z-index: 4500;
    right: 0.75rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
    left: 0.75rem;
    min-height: 3.6rem;
  }

  .chat-widget {
    z-index: 7000;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100svh;
    max-height: 100svh;
    border: 0;
    border-radius: 0;
  }

  @supports (height: 100dvh) {
    .chat-widget {
      height: 100dvh;
      max-height: 100dvh;
    }
  }

  .chat-widget__header {
    min-height: calc(4.75rem + env(safe-area-inset-top));
    padding: calc(0.75rem + env(safe-area-inset-top)) 0.85rem 0.75rem;
  }

  .chat-widget__close {
    min-width: 3.4rem;
    padding-inline: 0.7rem;
  }

  .chat-widget__header > small {
    display: none;
  }

  .chat-transcript {
    padding: 1rem;
  }

  .chat-suggestions,
  .chat-photo-controls,
  .chat-consent-controls,
  .chat-in-person-controls {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .chat-suggestions button {
    min-height: 44px;
  }

  .chat-composer-bar {
    padding:
      0.75rem
      0.75rem
      calc(0.75rem + env(safe-area-inset-bottom));
  }

  .chat-composer-bar input {
    min-height: 48px;
    font-size: 16px;
  }

  .footer-support__grid a {
    min-height: 44px;
    align-items: center;
  }
}

@media (max-width: 380px) {
  :root {
    --mobile-gutter: 0.875rem;
    --mobile-section-gap: 3.25rem;
  }

  .site-header .brand-lockup {
    --brand-lockup-width: 13rem;
    --brand-lockup-height: 3.25rem;
  }

  h2,
  .footer-lead h2,
  .booking-panel h2,
  .procedure-page-v2 h2 {
    font-size: 2rem !important;
  }

  .hero-shell h1,
  .procedure-page-v2 .procedure-hero-v2 h1,
  .local-hero h1 {
    font-size: clamp(2rem, 10vw, 2.3rem) !important;
  }

  .hero-message {
    bottom: 10.45rem !important;
  }

  .hero-copy {
    bottom: 4.6rem !important;
  }

  .about-collage,
  .why-collage,
  .care-mosaic {
    height: 19rem !important;
    min-height: 19rem !important;
  }

  .chat-widget__avatar {
    width: 2.6rem;
    height: 2.6rem;
  }

  .chat-widget__identity strong {
    font-size: 0.95rem;
  }

  .chat-widget__identity span {
    font-size: 0.75rem;
  }
}

@media (max-height: 720px) and (max-width: 820px) {
  .hero-message {
    bottom: 9.6rem !important;
  }

  .hero-shell h1 {
    font-size: clamp(2rem, 8.9vw, 2.25rem) !important;
  }

  .hero-copy {
    bottom: 4.35rem !important;
  }

  .procedure-hero-v2__content,
  .local-hero .procedure-hero-v2__content {
    bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  .procedure-page-v2 .procedure-hero-v2 h1,
  .local-hero h1 {
    font-size: clamp(2rem, 9vw, 2.35rem) !important;
  }

  .procedure-hero-v2__content > p {
    font-size: 0.83rem;
    line-height: 1.42;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/*
 * FAQ desktop: a coluna visual acompanha o percurso enquanto as respostas
 * permanecem no fluxo natural da página, sem uma rolagem interna.
 */
@media (min-width: 821px) {
  #duvidas.faq-section {
    align-items: start !important;
  }

  #duvidas .faq-collage {
    position: sticky;
    top: 7.1rem;
    align-self: start;
    height: 545px !important;
    min-height: 545px !important;
    margin: 0;
  }

  #duvidas .faq-content {
    display: grid;
    height: auto;
    min-height: 0;
    gap: 1.5rem !important;
    overflow: visible;
  }

  #duvidas .faq-content > h2 {
    margin: 0 0 0.5rem !important;
  }

  #duvidas .content-accordion {
    min-height: 0;
    padding-right: 0;
    overflow: visible;
    scrollbar-width: auto;
  }
}