/**
 * Camada responsiva mobile/tablet — Dr. Erik Friedrich
 * Aplica-se apenas em telas ≤991px. Desktop (≥992px) permanece inalterado.
 */

/* Variantes de texto: desktop visível por padrão, mobile oculto */
.mob-only {
    display: none !important;
}

/* ── Base: scroll nativo, sem overflow horizontal ── */
@media (max-width: 991px) {
    .desk-only {
        display: none !important;
    }

    p.mob-only {
        display: block !important;
    }

    .mob-hero-sub.mob-only {
        display: block !important;
    }

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        overflow-x: clip;
    }

    #smooth-wrapper,
    #smooth-content {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .cursor1,
    .cursor2 {
        display: none !important;
    }

    .container,
    .container-fluid {
        padding-left: clamp(1rem, 4vw, 1.35rem);
        padding-right: clamp(1rem, 4vw, 1.35rem);
    }

    main {
        padding-top: env(safe-area-inset-top, 0);
    }
}

/* ── Header fixo ── */
@media (max-width: 991px) {
    .header__area-3 .header__inner-3 {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 0.65rem clamp(0.85rem, 3vw, 1.15rem);
        gap: 0.5rem;
        align-items: center;
    }

    .header__area-3 .header__logo-3 {
        min-width: 0;
    }

    .header__area-3 .site-logo img {
        height: clamp(34px, 8vw, 42px);
        width: auto;
    }

    .header__area-3 .header__nav-2 {
        display: none !important;
    }

    .header__area-3 .header__nav-icon-3 {
        gap: 0.35rem;
    }

    .header__area-3 .header__nav-icon-3 button#open_offcanvas {
        padding: 0.35rem;
    }

    .header__area-3 .header__nav-icon-3 button#open_offcanvas img {
        width: 22px;
        height: auto;
    }

    .lang-switcher__trigger {
        padding: 0.25rem 0.1rem;
    }

    .lang-switcher__menu {
        right: 0;
        left: auto;
        min-width: 9.5rem;
    }
}

/* ── Hero home (watermark Dr. Erik Friedrich) ── */
@media (max-width: 991px) {
    .hero__area-3 {
        min-height: 100svh;
        display: flex;
        align-items: flex-end;
    }

    .hero__area-3 > .container {
        width: 100%;
        padding-bottom: clamp(2.5rem, 8vw, 4rem);
    }

    .hero__area-3 .hero__inner-3 {
        max-width: 100%;
    }

    .hero__area-3 .sec-title-wrapper {
        display: block;
        width: 100%;
    }

    .hero__area-3 .title-right {
        position: static;
        right: auto;
        text-align: left;
    }

    .hero__area-3 .sec-title {
        font-size: clamp(2.85rem, 13.5vw, 4.75rem) !important;
        line-height: 0.92 !important;
        letter-spacing: -0.02em !important;
        text-transform: none !important;
    }

    .hero__area-3 .sec-sub-title {
        font-size: clamp(1.05rem, 4.5vw, 1.35rem) !important;
        font-weight: 500 !important;
        padding-right: 0 !important;
        margin-bottom: 0.15rem;
    }

    .hero__area-3 .sec-sub-title::after {
        display: none;
    }

    .hero__area-3 .hero__text-3 {
        margin-top: clamp(1rem, 4vw, 1.75rem);
        max-width: 22rem;
    }

    .hero__area-3 .hero__text-3 p,
    .hero__area-3 .hero__text-animation {
        font-size: clamp(0.92rem, 3.6vw, 1.05rem) !important;
        line-height: 1.55 !important;
    }

    .hero__area-3 .hero__text-animation br,
    .hero__area-3 .mob-hero-sub br {
        display: block;
        content: "";
        margin-top: 0.12em;
    }

    .hero__area-3 .scroll-down {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .hero__area-3 .sec-title {
        font-size: clamp(2.5rem, 12.5vw, 3.75rem) !important;
    }
}

/* ── About + seções editoriais ── */
@media (max-width: 991px) {
    .about__area-3 .about__img-3 {
        margin-bottom: 1.75rem;
    }

    .about__area-3 .sec-text.about-bio .about-quote {
        font-size: clamp(1rem, 3.8vw, 1.15rem);
        padding-left: 1rem;
    }

    .about__area-3 .sec-text.about-bio p,
    .about__area-3 .sec-text.about-bio .about-lead strong {
        hyphens: none;
        -webkit-hyphens: none;
        text-wrap: pretty;
    }

    .blog__area-3 .sec-title-wrapper > p {
        text-wrap: pretty;
    }

    .mob-keep {
        white-space: nowrap;
    }

    .mob-br {
        display: block;
    }

    /* Variantes mob-only em títulos e leads */
    h2.mob-only,
    .cta__title-2.mob-only,
    .proc-ref-hero__lead.mob-only,
    .proc-ref-split__heading.mob-only,
    .guide-curiosidades-hero__deck.mob-only {
        display: block !important;
    }

    /* Bio — evita espaçamento estranho do text-align: justify no mobile */
    .about__area-3 .sec-text.about-bio p.mob-only {
        text-align: left !important;
        text-align-last: left !important;
    }

    /* Seção contato (FAQ) — mobile */
    .price__area #contato {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .price__area #contato .price__table {
        width: 100%;
    }

    .service__area-3 .service__item-3 {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
        padding: 2rem 0;
    }

    .service__area-3 .service__number-3 {
        margin-bottom: 0.35rem;
    }

    .service__area-3 .service__content-3 {
        padding-left: 0 !important;
        max-width: 100%;
    }

    .service__area-3 .service__hover-3 {
        display: none !important;
    }

    /* Títulos de procedimento — restaura <br> (master.css oculta br no mobile) */
    .service__area-3 .service__title-3 {
        display: inline-block;
        max-width: 100%;
        white-space: normal !important;
        overflow-wrap: break-word;
        hyphens: none;
        -webkit-hyphens: none;
    }

    .service__area-3 .service__item-3 h3 {
        max-width: 100%;
        overflow: visible;
    }

    .service__area-3 .sec-title-wrapper > p,
    #especialidades .sec-title-wrapper > p,
    .blog__area-3 .sec-title-wrapper > p {
        text-align: left !important;
        max-width: 100%;
    }

    .sec-title-wrapper .sec-title br {
        display: none;
    }

    .sec-title-wrapper .sec-title {
        font-size: clamp(1.85rem, 6.5vw, 2.65rem) !important;
        line-height: 1.12 !important;
    }
}

/* ── Face Reveal — painéis empilhados (sem scroll horizontal) ── */
@media (max-width: 1200px) {
    #face-reveal .workflow__wrapper-3 {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }

    #face-reveal .workflow__area-3 .wf_panel {
        position: relative !important;
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        transform: none !important;
        opacity: 1 !important;
    }

    #face-reveal .choose-title {
        font-size: clamp(2rem, 11vw, 3.5rem) !important;
        line-height: 0.95;
    }

    #face-reveal .research__area .sec-title-wrapper p {
        max-width: 100%;
    }
}

/* ── Hub especialidades + guias ── */
@media (max-width: 991px) {
    .specialty-hub-hero {
        min-height: clamp(320px, 58vw, 440px);
        padding-top: clamp(5.5rem, 16vw, 7rem);
        padding-bottom: clamp(2.5rem, 6vw, 3.5rem);
    }

    .specialty-hub-hero__title {
        font-size: clamp(1.35rem, 5vw, 1.85rem);
    }

    .specialty-hub__grid,
    #guides-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
    }

    .guides-hub-hero__title,
    .page-guias .guides-hub-hero .solution__title {
        font-size: clamp(1.65rem, 6vw, 2.25rem) !important;
    }

    .guide-hero-premium {
        min-height: auto;
        padding: clamp(5.5rem, 14vw, 7rem) 0 clamp(2rem, 5vw, 3rem);
    }

    .guide-prose,
    .procedure-content .article-body {
        font-size: 1rem;
    }

    .pullquote,
    .anatomy-box,
    .warning-box {
        padding: 1.25rem 1.15rem;
        margin: 2rem 0;
    }

    .pullquote {
        font-size: 1.1rem;
    }
}

/* ── Páginas de procedimento (layout ref) ── */
@media (max-width: 991px) {
    .procedure-page--layout-ref .proc-ref-hero__title-line,
    .procedure-page--layout-ref .proc-ref-hero__lead-line {
        white-space: normal;
    }

    .procedure-page--layout-ref .proc-ref-hero__copy {
        padding: clamp(1.75rem, 5vw, 2.5rem) clamp(1.15rem, 4vw, 1.75rem);
    }

    .page-lipoenxertia .proc-ref-hero__copy,
    .page-brow-lift .proc-ref-hero__copy,
    .page-frontoplastia .proc-ref-hero__copy {
        padding-top: clamp(1.75rem, 5vw, 2.5rem);
    }

    .procedure-page--layout-ref .proc-ref-hero__media {
        min-height: clamp(220px, 52vw, 340px);
    }

    .procedure-page--layout-ref .proc-ref-split__media {
        min-height: clamp(200px, 48vw, 300px);
    }

    .procedure-page--layout-ref .proc-ref-related__strip {
        grid-template-columns: 1fr 1fr;
        gap: 0.85rem;
    }
}

@media (max-width: 575px) {
    .procedure-page--layout-ref .proc-ref-related__strip {
        grid-template-columns: 1fr;
    }

    .procedure-page--layout-ref .proc-ref-related__card:nth-child(5) {
        max-width: none;
    }
}

/* ── O Cirurgião ── */
@media (max-width: 991px) {
    .surgeon-hero {
        padding-top: clamp(5.5rem, 16vw, 7rem);
    }

    .surgeon-hero__title-keep {
        white-space: normal;
    }

    .surgeon-section-head__title {
        font-size: clamp(1.65rem, 5.5vw, 2.35rem);
    }
}

/* ── Rodapé ── */
@media (max-width: 991px) {
    .footer__area-3 .footer__top-wrapper-3 {
        grid-template-columns: 1fr !important;
        padding: 0 clamp(1rem, 4vw, 1.25rem) !important;
        gap: 0;
    }

    .footer__area-3 .footer__logo-3.pt-120 {
        padding-top: clamp(3rem, 10vw, 4.5rem) !important;
    }

    .footer__area-3 .footer__top-3 {
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
    }

    .footer__area-3 .footer__widget-3 {
        margin-bottom: 2rem;
    }

    .footer__area-3 .footer__social-3 {
        margin-top: 2rem;
        border-left: none;
        border-right: none;
        width: 100%;
    }

    .footer__area-3 .footer__social-3 ul {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .footer__area-3 .footer__social-3 ul li a {
        text-align: center !important;
        padding: 1.35rem 1rem !important;
    }

    .footer__area-3 .footer__contact-3 {
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: clamp(2rem, 6vw, 2.75rem) 1rem clamp(2.5rem, 7vw, 3rem) !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    .footer__area-3 .footer__contact-3 a.footer__cta-agendar,
    .footer__area-3 .footer__contact-3 a.end.footer__cta-agendar {
        font-size: clamp(1.85rem, 9vw, 2.35rem) !important;
        line-height: 1.2 !important;
        letter-spacing: 0.05em !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
        word-break: normal;
        overflow-wrap: normal;
    }

    .footer__area-3 .footer__contact-3 a.footer__cta-agendar .footer-cta-line {
        display: block !important;
        line-height: 1.15 !important;
    }

    .footer__area-3 .footer__contact-3 a.footer__cta-agendar .footer-cta-line + .footer-cta-line {
        margin-top: 0.2em;
    }

    /* Cards de guias — evita caixa branca absoluta sobre o botão abaixo */
    .blog__area-3 .blog__item-3 {
        margin-bottom: 2.5rem;
    }

    .blog__area-3 .blog__info-3 {
        position: relative !important;
        width: 100% !important;
        right: auto !important;
        bottom: auto !important;
        margin-left: 0 !important;
        margin-top: -1.5rem;
        z-index: 1;
    }

    /* Botão "Ver todos os guias" — oculto no mobile; desktop inalterado */
    .blog__all-guias-cta,
    .blog__area-3 > .container > div[style*="margin-top:3rem"] {
        display: none !important;
    }

    .blog__area-3.pb-140 {
        padding-bottom: clamp(2.5rem, 8vw, 3.5rem) !important;
        overflow: visible !important;
    }

    /* Rodapé — endereço com quebra entre bairro e cidade */
    .footer__area-3 .footer__logo-3 p br {
        display: block !important;
    }
}

@media (max-width: 767px) {
    /* master.css define br { display: none } — reativar onde necessário */
    .service__area-3 .service__title-3 br {
        display: block !important;
        content: "";
        margin-top: 0.06em;
    }

    .footer__area-3 .footer__logo-3 p br {
        display: block !important;
    }
}

/* ── Modais, cookies e FABs ── */
@media (max-width: 991px) {
    .contact-modal {
        align-items: flex-end;
        padding: 0;
    }

    .contact-modal__dialog {
        max-width: none;
        max-height: min(92vh, 640px);
        border-radius: 14px 14px 0 0;
        margin: 0;
    }

    .cookie-consent {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    .wa-float {
        bottom: calc(var(--fab-bottom) + env(safe-area-inset-bottom, 0px));
        right: calc(var(--fab-inset) + env(safe-area-inset-right, 0px));
    }

    body:has(.cookie-consent:not(.cookie-consent--hide)) .wa-float {
        bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
    }

    .switcher__area.ambient-switcher .switcher__icon {
        bottom: calc(
            var(--fab-bottom) + env(safe-area-inset-bottom, 0px) +
            var(--fab-size) + var(--fab-gap) + var(--fab-size) + var(--fab-gap)
        );
        right: calc(var(--fab-inset) + env(safe-area-inset-right, 0px));
    }

    body:has(.cookie-consent:not(.cookie-consent--hide)) .switcher__area.ambient-switcher .switcher__icon {
        bottom: calc(
            5.75rem + env(safe-area-inset-bottom, 0px) +
            var(--fab-size) + var(--fab-gap)
        );
    }
}

/* ── Offcanvas — área segura no iPhone ── */
@media (max-width: 991px) {
    .offcanvas__area {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* Desktop: utilitários mobile desativados */
@media (min-width: 992px) {
    .mob-br {
        display: none;
    }

    .mob-keep {
        white-space: normal;
    }
}