/* =====================================================
 * RESPONSIVIDADE COMPLETA v3.0 — iOS & Android
 * ===================================================== */

/* ── Global: previne scroll horizontal ── */
html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* Garante que todos os containers não vazem */
.container, .container-fluid {
    padding-left: 16px;
    padding-right: 16px;
}

/* Touch targets mínimos (44px) para iOS */
.btn, .nav-link, .area-chip, .area-filter-chip {
    min-height: 44px;
}

/* =====================================================
 * TABLET (= 991px)
 * ===================================================== */
@media (max-width: 991px) {

    .logo-nome { font-size: 1.15rem; }
    .logo-slogan { font-size: .6rem; }
    .logo-icon { width: 36px; height: 36px; font-size: 1rem; }

    .navbar-collapse {
        position: relative;
        z-index: 1001;
    }
    .navbar-collapse .d-flex {
        flex-direction: column;
        gap: 8px !important;
        padding-top: 12px;
        border-top: 1px solid var(--cinza-20);
        margin-top: 8px;
    }
    .navbar-collapse .btn { width: 100%; justify-content: center; }

    .hero-actions-dual { justify-content: center; }
    .btn-hero-primary, .btn-hero-secondary {
        flex: 1;
        min-width: 200px;
    }

    .equipe-cards-grid { grid-template-columns: 1fr 1fr; }

    .area-filter-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        scrollbar-width: none;
        gap: 8px;
        padding-left: 4px;
        padding-right: 4px;
    }
    .area-filter-chips::-webkit-scrollbar { display: none; }
    .area-filter-chip { flex-shrink: 0; }

    .section-title h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
}

/* =====================================================
 * MOBILE (= 767px)
 * ===================================================== */
@media (max-width: 767px) {

    .hero { padding: 52px 0 40px; text-align: center; }
    .hero-content { display: flex; flex-direction: column; align-items: center; }
    .hero-eyebrow { margin: 0 auto 20px; }
    .hero h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); margin-bottom: 16px; }
    .hero p { font-size: .97rem; max-width: 100%; margin-bottom: 28px; }
    .hero-trust { justify-content: center; }
    .hero-stats { justify-content: center; gap: 18px; padding-top: 24px; }
    .hero-stat-number { font-size: 1.7rem; }

    .hero-actions-dual {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        width: 100%;
        margin-bottom: 28px;
    }
    .btn-hero-primary, .btn-hero-secondary {
        width: 100%;
        max-width: 360px;
        min-width: unset;
        padding: 15px 20px;
        border-radius: var(--raio);
        justify-content: flex-start;
    }
    .btn-hero-primary strong, .btn-hero-secondary strong { font-size: .95rem; }
    .btn-hero-primary small, .btn-hero-secondary small { font-size: .77rem; }
    .btn-hero-primary i, .btn-hero-secondary i { font-size: 1.3rem; }

    .d-flex.flex-wrap.justify-content-center.gap-2 {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        scrollbar-width: none;
    }
    .d-flex.flex-wrap.justify-content-center.gap-2::-webkit-scrollbar { display: none; }
    .area-chip { flex-shrink: 0; padding: 9px 16px; font-size: .82rem; }

    .equipe-cards-grid { grid-template-columns: 1fr; gap: 10px; }
    .equipe-card-item { padding: 14px; }
    .equipe-card-icon { width: 38px; height: 38px; font-size: .95rem; }
    .equipe-card-item h4 { font-size: .85rem; }

    .section-title { margin-bottom: 36px; }
    .section-title h2 { font-size: clamp(1.4rem, 6vw, 1.9rem); }
    .section-title p { font-size: .9rem; }

    .psychologist-card { border-radius: var(--raio); }
    .psychologist-image { height: 200px; }
    .area-badge-card { font-size: .7rem; padding: 3px 8px; }
    .psychologist-content { padding: 16px; }
    .psychologist-name { font-size: 1rem; }
    .psychologist-price { font-size: 1.15rem; }
    .btn-whatsapp { padding: 13px 20px; font-size: .9rem; }

    .filter-section { padding: 16px 14px; border-radius: var(--raio); }
    .filter-row { gap: 12px; }
    .filter-group label { font-size: .82rem; }
    .filter-group .form-select { font-size: .9rem; height: 46px; }

    .step-card { padding: 28px 22px; }
    .step-icon { width: 64px; height: 64px; font-size: 1.4rem; }
    .step-card h3 { font-size: 1.1rem; }

    .benefit-item { padding: 16px 14px; gap: 14px; }
    .benefit-icon { width: 44px; height: 44px; font-size: 1.1rem; border-radius: 12px; }
    .benefit-text h4 { font-size: .93rem; }
    .benefit-text p  { font-size: .84rem; }

    .testimonial-card { padding: 22px 18px; }
    .blog-card-img { height: 160px; }

    .cta-section { padding: 56px 0; }
    .cta-section h2 { font-size: clamp(1.4rem, 6vw, 2rem); }
    .cta-section p  { font-size: .97rem; }
    .cta-section .btn { width: 100%; max-width: 320px; }
    .cta-section .d-flex { flex-direction: column; align-items: center; gap: 12px !important; }

    .footer { padding: 40px 0 20px; }
    .footer-brand { margin-bottom: 14px; }
    .footer-desc { font-size: .86rem; }
    .logo-brand-footer .logo-icon { width: 34px; height: 34px; font-size: .9rem; }
    .footer-bottom .row { flex-direction: column; text-align: center !important; }

    .whatsapp-float { bottom: 16px; right: 16px; }
    .whatsapp-float a { padding: 14px; width: 52px; height: 52px; border-radius: 50%; }
    .whatsapp-float a span { display: none; }
    .whatsapp-float i { font-size: 1.5rem; }

    .city-hero { padding: 44px 0 32px; }
    .city-hero h1 { font-size: clamp(1.4rem, 6vw, 2rem); }
    .city-hero p  { font-size: .95rem; }

    .equipe-teaser .col-lg-5 { text-align: center; }
    .equipe-teaser .d-flex.gap-3 { justify-content: center; }

    .auth-body { padding: 22px 16px; }
    .auth-footer { padding: 16px 16px 24px; }
}

/* =====================================================
 * MOBILE PEQUENO (= 480px)
 * ===================================================== */
@media (max-width: 480px) {

    :root { --header-h: 62px; }

    .container { padding-left: 14px; padding-right: 14px; }

    .hero { padding: 44px 0 36px; }
    .hero h1 { font-size: 1.65rem; line-height: 1.2; }
    .hero-stat-number { font-size: 1.5rem; }
    .hero-stats { gap: 14px; }

    .btn-hero-primary, .btn-hero-secondary { padding: 13px 16px; }
    .btn-hero-primary i, .btn-hero-secondary i { font-size: 1.15rem; }
    .btn-hero-primary strong, .btn-hero-secondary strong { font-size: .87rem; }
    .btn-hero-primary small, .btn-hero-secondary small { display: none; }

    .section    { padding: 44px 0; }
    .section-sm { padding: 28px 0; }
    .section-title h2 { font-size: 1.4rem; }
    .section-badge { font-size: .72rem; }

    .btn-lg { padding: 13px 24px; font-size: .92rem; }
    .btn-xl { padding: 14px 28px; font-size: .95rem; }
    .btn    { padding: 11px 22px; font-size: .88rem; min-height: 44px; }

    .step-card { padding: 24px 18px; }
    .step-icon { width: 56px; height: 56px; font-size: 1.2rem; }

    .psychologist-image { height: 180px; }
    .equipe-cards-grid { grid-template-columns: 1fr; }

    .area-filter-chip { font-size: .78rem; padding: 7px 12px; min-height: 38px; }
    .area-chip        { font-size: .8rem;  padding: 8px 14px; }

    .footer .row > [class*="col-6"] { width: 100% !important; }

    .accordion-button { font-size: .9rem; padding: 14px 16px; }
    .accordion-body { padding: 12px 16px; font-size: .88rem; }

    .area-select-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .area-select-item { padding: 12px 8px; }
    .area-select-item i { font-size: 1.1rem; }
    .area-select-item span { font-size: .75rem; }

    .logo-nome { font-size: 1.05rem; }
    .logo-icon { width: 32px; height: 32px; font-size: .9rem; border-radius: 9px; }
}

/* =====================================================
 * IPHONE NOTCH — Safe Area (iPhone X+)
 * ===================================================== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .whatsapp-float {
        bottom: calc(16px + env(safe-area-inset-bottom));
        right: calc(16px + env(safe-area-inset-right));
    }
    .footer {
        padding-bottom: calc(28px + env(safe-area-inset-bottom));
    }
    .header {
        padding-top: env(safe-area-inset-top);
    }
}

/* =====================================================
 * FIXES iOS (Safari / WebKit)
 * ===================================================== */

/* Remove estilo nativo iOS em inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
select, textarea {
    -webkit-appearance: none;
    appearance: none;
    border-radius: var(--raio-sm);
}

/* Previne zoom automático ao focar inputs (iOS faz zoom se < 16px) */
@media (max-width: 767px) {
    input, select, textarea { font-size: 16px !important; }
}

/* Gradient text — garante suporte Safari */
.logo-nome strong,
.hero h1 .destaque {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Remove flash azul ao tocar em links/botões (Android/iOS) */
a, button, .btn, [role="button"] {
    -webkit-tap-highlight-color: transparent;
}

/* Focus visível apenas para teclado (não em touch) */
.btn:focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; }
.btn:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* =====================================================
 * PSI-CARD — Responsividade
 * ===================================================== */
@media (max-width: 767px) {
    .psi-card { flex-direction: column; }

    .psi-card-left {
        flex-direction: row;
        min-width: unset;
        border-right: none;
        border-bottom: 1px solid var(--cinza-10);
        padding: 16px 20px;
        gap: 16px;
        justify-content: flex-start;
    }
    .psi-card-photo,
    .psi-avatar-circle { width: 80px; height: 80px; }
    .psi-avatar-circle { font-size: 1.9rem; }

    .psi-card-price { font-size: 1.15rem; }
    .psi-card-body  { padding: 16px 20px; gap: 10px; }
    .psi-card-name  { font-size: 1.05rem; }

    .psi-card-actions { flex-direction: column; align-items: flex-start; gap: 10px; }
    .psi-card-actions .btn-whatsapp { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    .psi-card-left { padding: 14px 16px; }
    .psi-card-body { padding: 14px 16px; }
    .psi-card-photo,
    .psi-avatar-circle { width: 70px; height: 70px; }
    .psi-tag { font-size: .73rem; padding: 3px 10px; }
}

/* =====================================================
 * PERFIL PÚBLICO — Responsividade
 * ===================================================== */
@media (max-width: 991px) {
    .perfil-sidebar { position: static; margin-bottom: 0; }
}

@media (max-width: 767px) {
    .perfil-foto-img,
    .perfil-foto-placeholder { width: 120px; height: 120px; }

    .perfil-meta-row { flex-direction: column; gap: 10px; padding: 14px 18px; }
    .perfil-meta-item { min-width: unset; }

    .perfil-section { padding: 16px 18px; }
    .perfil-nome { font-size: 1.1rem; }
    .perfil-preco-box { margin: 0 18px 12px; }

    .perfil-trust { padding: 12px 18px 18px; }
}

@media (max-width: 480px) {
    .perfil-tags { gap: 6px; }
    .perfil-tag { font-size: .76rem; padding: 5px 12px; }
    .perfil-bio { font-size: .88rem; }
}

/* =====================================================
 * CORREÇÕES ADICIONAIS RESPONSIVIDADE
 * ===================================================== */

/* Navbar: logo + toggler não overflow em telas < 360px */
@media (max-width: 360px) {
    .logo-slogan { display: none; }
    .navbar-brand { gap: 7px; }
}

/* Hero: trust badges centraliza na coluna estreita em tablet */
@media (max-width: 991px) {
    .city-hero .col-lg-4 {
        display: flex;
        justify-content: center;
    }
}

/* Psicologos: result count + filtros não quebram layout */
@media (max-width: 575px) {
    .psi-empty { padding: 40px 16px; }
    .filter-section { border-radius: var(--raio); }
}

/* Perfil público: sidebar passa a ser estática antes do conteúdo */
@media (max-width: 991px) {
    .perfil-sidebar { top: auto; }
}

/* Auth pages: card sem margin-horizontal no muito pequeno */
@media (max-width: 400px) {
    .auth-card { border-radius: var(--raio); }
    .auth-logo { padding: 24px 16px 18px; }
    .auth-body { padding: 20px 16px; }
    .auth-footer { padding: 14px 16px 20px; }
}

/* Psi-card: garante que telefone não quebra layout */
@media (max-width: 480px) {
    .psi-card-tel { width: 100%; }
}

/* CTA section: botões full-width no mobile */
@media (max-width: 575px) {
    .cta-section .d-flex.gap-3 { flex-direction: column; align-items: center; }
    .cta-section .btn { width: 100%; max-width: 320px; }
}

/* Depoimentos: 1 por linha em mobile */
@media (max-width: 767px) {
    .testimonial-card { padding: 20px 16px; }
}

/* Blog: cards fill width on mobile */
@media (max-width: 575px) {
    .blog-card-body { padding: 16px; }
    .blog-card-footer { padding: 12px 16px 14px; }
}

/* Desativa hover transform em dispositivos touch (evita flicker no iOS) */
@media (hover: none) {
    .btn-hero-primary:hover,
    .btn-hero-secondary:hover,
    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-outline-primary:hover,
    .btn-whatsapp:hover,
    .area-chip:hover,
    .area-filter-chip:hover,
    .equipe-card-item:hover,
    .psychologist-card:hover,
    .area-detail-card:hover {
        transform: none !important;
        box-shadow: none;
    }
}