/* ==========================================================================
   Fonte Da Vida - Index Page Mobile Styles
   ========================================================================== */

@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden;
    }

    .container {
        padding-inline: 18px;
    }

    .section {
        padding: 72px 0;
    }

    .section-header {
        max-width: 100% !important;
        margin: 0 auto 36px !important;
        padding-inline: 2px;
    }

    .section-label {
        font-size: 12px;
        letter-spacing: 0.08em;
    }

    .section-title {
        font-size: clamp(29px, 7.6vw, 36px);
        line-height: 1.12;
    }

    .section-desc {
        font-size: 15px;
        line-height: 1.65;
    }

    .hero.hero-centered {
        height: auto;
        min-height: 100svh;
        padding: 136px 0 74px;
    }

    .hero-overlay {
        opacity: 0.72;
    }

    .hero-centered .hero-inner,
    .hero-centered .hero-content {
        width: 100%;
        max-width: 100%;
        align-items: center;
        text-align: center;
    }

    .hero h1 {
        max-width: 11ch;
        font-size: clamp(34px, 8.7vw, 43px);
        line-height: 1.06;
        margin-inline: auto;
        margin-bottom: 18px;
    }

    .hero-desc {
        max-width: 31rem;
        font-size: 15.5px;
        line-height: 1.55;
        text-align: center;
    }

    .hero-centered .hero-cta {
        width: 100%;
        max-width: 350px;
        gap: 12px;
        margin-top: 28px;
        flex-direction: column;
    }

    .hero-centered .hero-cta .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }

    .environments-section {
        padding: 66px 0;
    }

    .masonry-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 214px;
        gap: 14px;
        margin-top: 30px;
    }

    .masonry-item,
    .masonry-item.large {
        grid-column: span 1;
        grid-row: span 1;
        border-radius: 16px;
    }

    .masonry-item.large img {
        transform: scale(1.04);
    }

    .masonry-item.large:hover img {
        transform: scale(1.06);
    }

    .masonry-overlay {
        padding: 22px;
        transform: none;
        opacity: 1;
    }

    .masonry-overlay h3 {
        font-size: 20px;
    }

    .masonry-overlay p {
        font-size: 13px;
    }

    .trusted-impact-container {
        margin-top: 46px;
        padding: 34px 20px;
        border-radius: 22px;
    }

    .trusted-impact-header {
        margin-bottom: 28px;
    }

    .trusted-impact-badge {
        gap: 8px;
        padding: 7px 14px;
        margin-bottom: 18px;
    }

    .trusted-impact-title {
        font-size: 25px;
        line-height: 1.18;
    }

    .trusted-impact-desc {
        font-size: 14.5px;
    }

    .trusted-impact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .ti-card {
        min-height: 128px;
        padding: 22px 12px;
        border-radius: 16px;
    }

    .ti-icon-wrapper {
        width: 48px;
        height: 48px;
    }

    .features-section {
        padding: 68px 0;
    }

    .why-flow {
        margin-top: 34px;
        border-top: 1px solid var(--border-subtle);
    }

    .why-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 13px;
        padding: 26px 0;
        border-bottom: 1px solid var(--border-subtle);
    }

    .why-index {
        margin: 0;
        font-size: 11px;
        letter-spacing: 0.08em;
    }

    .why-copy h3 {
        font-size: 24px;
        line-height: 1.14;
        margin-bottom: 8px;
    }

    .why-copy p {
        font-size: 14.5px;
        line-height: 1.62;
    }

    .why-facts {
        display: grid;
        grid-column: auto;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 2px;
    }

    .why-facts li {
        display: grid;
        padding-bottom: 10px;
    }

    .why-facts span {
        font-size: 10.5px;
    }

    .why-facts strong {
        font-size: 14px;
    }

    .why-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 30px;
    }

    .why-actions .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .premium-dashboards {
        gap: 36px;
        margin-top: 38px;
    }

    .dash-card {
        padding: 26px 18px;
        border-radius: 18px;
    }

    .dash-card:hover {
        transform: none;
    }

    .dash-glow-bg {
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0.08;
    }

    .dash-content-split,
    .dash-content-split.reverse {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .dash-content-split.reverse .dash-info,
    .dash-content-split .dash-info {
        order: 1;
    }

    .dash-content-split.reverse .dash-visual,
    .dash-content-split .dash-visual {
        order: 2;
    }

    .feat-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        margin-bottom: 18px;
    }

    .dash-info h3 {
        font-size: 25px;
        line-height: 1.18;
    }

    .dash-info p {
        font-size: 14.5px;
        margin-bottom: 22px;
    }

    .hud-stats-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .hud-stat-box,
    .roi-item {
        padding: 13px 14px;
    }

    .dash-tech-panel,
    .premium-calc,
    .map-ui-card {
        border-radius: 16px;
    }

    .tech-panel-header {
        padding: 11px 14px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .premium-inspector,
    .premium-calc,
    .map-content {
        padding: 18px;
    }

    .glass-box {
        padding: 16px;
    }

    .cr-amount-glow {
        font-size: 34px;
    }

    .live-tracking-bar {
        gap: 8px;
        padding: 0;
    }

    .track-step span {
        font-size: 10.5px;
    }

    .track-line {
        margin-inline: 0;
    }

    .map-bg {
        height: 170px;
    }

    .zone-select-premium {
        min-height: 46px;
    }

    .how-it-works-section {
        padding: 72px 0;
    }

    .hiw-interactive-container {
        flex-direction: column;
        gap: 30px;
    }

    .hiw-image-display {
        width: 100%;
        height: 260px;
        order: -1;
        border-radius: 18px;
    }

    .hiw-tabs-list {
        width: 100%;
        padding-left: 14px;
        gap: 12px;
    }

    .hiw-tab {
        padding: 17px 0 17px 20px;
        border-radius: 16px;
    }

    .hiw-tab-number {
        width: 36px;
        height: 36px;
    }

    .hiw-tab-content h3 {
        font-size: 16px;
    }

    .hiw-tab-content p {
        font-size: 13.5px;
    }

    .b2b-section {
        padding: 72px 0;
    }

    .b2b-bg {
        background-attachment: scroll;
    }

    .b2b-glass-card {
        max-width: 100%;
        padding: 34px 24px;
        border-radius: 18px;
    }

    .b2b-title {
        font-size: 31px;
    }

    .b2b-desc,
    .b2b-benefit {
        font-size: 14px;
    }

    .impact-hero-box {
        padding: 42px 22px;
        border-radius: 22px;
    }

    .impact-pillars {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .pillar-card {
        border-radius: 18px;
    }

    .pillar-img-box {
        height: 190px;
    }

    .health-split {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .health-image-container {
        min-height: 310px;
        border-radius: 20px;
    }

    .health-badge-floating {
        left: 18px;
        right: 18px;
        bottom: 18px;
        justify-content: center;
        transform: none;
    }

    .health-content {
        padding: 0;
    }

    .health-desc {
        font-size: 15px;
    }

    .health-benefits-list {
        gap: 18px;
    }

    .cta-carousel-section {
        min-height: auto;
        padding: 86px 0;
    }

    .cta-glass-card {
        padding: 46px 24px;
        border-radius: 20px;
    }

    .cta-premium-title {
        font-size: 33px;
        line-height: 1.1;
    }

    .cta-premium-desc {
        font-size: 15px;
    }

    .cta-actions {
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }

    .cta-actions a {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .contact-dashboard {
        gap: 30px;
    }

    .contact-cards-row,
    .contact-split {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .contact-card {
        padding: 20px;
        border-radius: 16px;
    }

    .contact-form-container {
        padding: 24px 18px;
        border-radius: 16px;
    }

    .contact-right-column {
        min-width: 0;
    }

    .hours-table td {
        padding: 14px 16px;
        font-size: 13px;
    }

    .departments-box {
        padding: 20px;
    }

    .departments-box li {
        gap: 8px;
        flex-direction: column;
    }

    .env-modal {
        align-items: flex-end;
    }

    .env-modal-content {
        width: 100%;
        max-width: 100%;
        max-height: 88svh;
        border-radius: 28px 28px 0 0;
        transform: translateY(100%);
    }

    .env-modal-img-container {
        height: 260px;
    }

    .env-modal-body {
        padding: 8px 24px 32px;
    }

    .env-modal.active .env-modal-content {
        transform: translateY(0);
    }
}

@media (max-width: 430px) {
    .container {
        padding-inline: 18px;
    }

    .section {
        padding: 66px 0;
    }

    .section-title {
        font-size: 31px;
    }

    .section-desc {
        font-size: 14.5px;
    }

    .hero.hero-centered {
        padding: 124px 0 66px;
    }

    .hero h1 {
        font-size: 36px;
    }

    .hero-desc {
        font-size: 14.75px;
    }

    .masonry-grid {
        grid-auto-rows: 206px;
    }

    .trusted-impact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .why-copy h3 {
        font-size: 23px;
    }

    .why-row {
        padding-block: 24px;
    }

    .dash-card {
        padding: 24px 18px;
    }

    .health-image-container,
    .hiw-image-display {
        height: 248px;
        min-height: 248px;
    }
}

@media (min-width: 400px) and (max-width: 430px) {
    .container {
        padding-inline: 20px;
    }

    .hero h1 {
        font-size: 38px;
        max-width: 12ch;
    }

    .hero-centered .hero-cta,
    .cta-actions {
        max-width: 360px;
        margin-inline: auto;
    }

    .masonry-grid {
        grid-auto-rows: 220px;
        gap: 16px;
    }

    .trusted-impact-container {
        padding: 36px 22px;
    }

    .why-actions {
        max-width: 360px;
        margin-inline: auto;
    }

    .trusted-impact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cta-glass-card {
        padding: 48px 26px;
    }
}

@media (min-width: 370px) and (max-width: 391px) {
    .container {
        padding-inline: 17px;
    }

    .hero.hero-centered {
        padding-top: 118px;
        padding-bottom: 62px;
    }

    .hero h1 {
        font-size: 34px;
        max-width: 11ch;
    }

    .hero-desc {
        font-size: 14.25px;
    }

    .hero-centered .hero-cta .btn,
    .cta-actions a {
        min-height: 46px;
    }

    .masonry-grid {
        grid-auto-rows: 196px;
    }

    .trusted-impact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ti-card {
        min-height: 118px;
    }

    .dash-info h3,
    .trusted-impact-title {
        font-size: 23px;
    }

    .why-copy h3 {
        font-size: 22px;
    }

    .cr-amount-glow {
        font-size: 31px;
    }

    .b2b-title,
    .cta-premium-title {
        font-size: 30px;
    }
}

@media (min-width: 350px) and (max-width: 361px) {
    .container {
        padding-inline: 15px;
    }

    .section {
        padding: 60px 0;
    }

    .section-header {
        margin-bottom: 30px !important;
    }

    .section-title {
        font-size: 28px;
    }

    .hero.hero-centered {
        padding-top: 112px;
        padding-bottom: 58px;
    }

    .hero h1 {
        font-size: 31px;
        max-width: 10.5ch;
    }

    .hero-desc {
        font-size: 13.75px;
    }

    .hero-centered .hero-cta {
        max-width: 318px;
    }

    .masonry-grid {
        grid-auto-rows: 184px;
        gap: 12px;
    }

    .trusted-impact-grid {
        grid-template-columns: 1fr;
    }

    .why-flow {
        margin-top: 28px;
    }

    .why-row {
        gap: 11px;
        padding-block: 22px;
    }

    .why-copy h3 {
        font-size: 21px;
    }

    .why-copy p {
        font-size: 13.75px;
    }

    .why-facts strong {
        font-size: 13.25px;
    }

    .dash-card,
    .contact-card,
    .contact-form-container {
        padding: 20px 16px;
    }

    .premium-inspector,
    .premium-calc,
    .map-content {
        padding: 16px;
    }

    .health-image-container,
    .hiw-image-display {
        height: 226px;
        min-height: 226px;
    }

    .cta-glass-card,
    .b2b-glass-card,
    .impact-hero-box {
        padding-inline: 20px;
    }
}

@media (max-width: 321px) {
    .container {
        padding-inline: 12px;
    }

    .section {
        padding: 54px 0;
    }

    .section-header {
        margin-bottom: 26px !important;
    }

    .section-label {
        font-size: 10.5px;
    }

    .section-title {
        font-size: 25px;
        line-height: 1.14;
    }

    .section-desc {
        font-size: 13.25px;
    }

    .hero.hero-centered {
        min-height: 100svh;
        padding-top: 104px;
        padding-bottom: 50px;
    }

    .hero h1 {
        font-size: 28px;
        max-width: 10ch;
        margin-bottom: 14px;
    }

    .hero-desc {
        font-size: 13px;
        line-height: 1.45;
    }

    .hero-centered .hero-cta {
        max-width: 280px;
        gap: 10px;
        margin-top: 22px;
    }

    .hero-centered .hero-cta .btn,
    .cta-actions a {
        min-height: 44px;
        padding-inline: 14px;
        font-size: 12.5px;
    }

    .masonry-grid {
        grid-auto-rows: 168px;
        gap: 10px;
    }

    .masonry-overlay {
        padding: 16px;
    }

    .masonry-overlay h3 {
        font-size: 17px;
    }

    .trusted-impact-container {
        padding: 28px 16px;
        border-radius: 18px;
    }

    .trusted-impact-grid {
        grid-template-columns: 1fr;
    }

    .ti-card {
        min-height: auto;
        padding: 18px 12px;
    }

    .dash-card {
        padding: 18px 14px;
        border-radius: 16px;
    }

    .why-row {
        padding-block: 20px;
    }

    .why-index,
    .why-facts span {
        font-size: 10px;
    }

    .why-copy h3 {
        font-size: 20px;
    }

    .why-copy p,
    .why-facts strong {
        font-size: 12.75px;
    }

    .why-actions .btn {
        min-height: 44px;
        font-size: 12.5px;
    }

    .dash-info h3 {
        font-size: 21px;
    }

    .dash-info p,
    .health-desc,
    .cta-premium-desc {
        font-size: 13.25px;
    }

    .tech-panel-header,
    .glass-box,
    .premium-inspector,
    .premium-calc,
    .map-content,
    .contact-form-container,
    .contact-card {
        padding: 14px;
    }

    .roi-item {
        gap: 12px;
        padding: 12px;
    }

    .roi-icon {
        width: 34px;
        height: 34px;
    }

    .cr-amount-glow {
        font-size: 27px;
    }

    .live-tracking-bar {
        gap: 4px;
    }

    .track-step span {
        font-size: 9.5px;
    }

    .map-bg,
    .health-image-container,
    .hiw-image-display {
        height: 198px;
        min-height: 198px;
    }

    .hiw-tab {
        padding: 14px 0 14px 16px;
    }

    .hiw-tab-number {
        width: 32px;
        height: 32px;
    }

    .b2b-glass-card,
    .impact-hero-box,
    .cta-glass-card {
        padding: 28px 16px;
        border-radius: 18px;
    }

    .b2b-title,
    .cta-premium-title {
        font-size: 26px;
    }

    .health-benefits-list li {
        gap: 12px;
    }

    .hb-icon {
        width: 32px;
        height: 32px;
    }

    .hours-table td {
        padding: 12px 10px;
        font-size: 12px;
    }
}