/* ========================================
   Responsive Styles
   ======================================== */

/* Tablets and Below (max-width: 1024px) */
@media (max-width: 1024px) {
    .section-padding {
        padding: 80px 0;
    }

    .hero-title {
        font-size: 56px;
    }

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

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .about-content {
        padding-right: 0;
        margin-bottom: 40px;
    }
}

/* ========================================
   Mobile-First Overrides (stronger rules to fix inline styles)
   Applies to phones and small tablets
   ======================================== */
@media (max-width: 768px) {
    /* tighter container spacing on mobile */
    .container { padding: 0 16px; }

    /* Hero: adjust for small screens — left-align text */
    .hero-content {
        left: 50%;
        transform: translateX(-50%);
        align-items: flex-start !important;
        text-align: left !important;
        padding-left: 20px !important; /* small gap from left edge */
        padding-right: 20px !important;
        padding-top: 48px;
        padding-bottom: 24px;
        width: 100%;
    }

    .hero-title { text-align: left !important; }
    .hero-buttons { align-items: flex-start !important; }
    .hero-stats { justify-content: center !important; }

    .hero-title {
        font-size: 32px !important;
        line-height: 1.12;
        margin-bottom: 10px;
    }

    .hero-description {
        font-size: 15px !important;
        max-width: 100%;
        margin: 0 auto 12px;
    }

    /* Make large CTA buttons full-width and reduce padding (overrides inline styles) */
    .hero-buttons { width: 100%; gap: 6px !important; align-items: center; }
    .hero-buttons .btn {
        width: 100% !important;
        max-width: 420px;
        padding: 12px 18px !important;
        font-size: 16px !important;
        border-radius: 12px !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Ensure any icon/text spacing looks correct */
    .hero-buttons .btn i { margin-right: 8px; }

    /* Solicite Orçamento: stack image and content vertically */
    .orcamento-section .container > div { flex-direction: column !important; }
    .orcamento-section .orcamento-image { height: 36vh !important; }
    .orcamento-section h2, .orcamento-section .orcamento-box-align { text-align: center; }
    .orcamento-box-align { margin: 18px auto 0 !important; }
    .orcamento-section a[rel~="noopener"] { width:100% !important; max-width:420px; margin: 6px auto 0 !important; }

    /* Navigation: show mobile toggle and shrink logo */
    .menu-toggle { display: flex !important; }
    .logo img { height: 44px !important; }
    .nav-menu { right: -100% !important; }

    /* Images: make them responsive and avoid overflow */
    img { max-width: 100%; height: auto; }

    /* Forms, footers and smaller items */
    .newsletter-form { flex-direction: column; gap: 8px; }
    .footer-trust-logos { gap: 12px; flex-wrap: wrap; justify-content: center; }
    .footer-company { font-size: 13px; }

    /* make badges and stats more compact */
    .badge-content { padding: 10px 12px !important; }
}

/* Tablets Portrait (max-width: 768px) */
@media (max-width: 768px) {
    /* Grid Columns */
    .col-lg-3,
    .col-lg-4,
    .col-lg-6,
    .col-lg-8,
    .col-md-4,
    .col-md-6 {
        width: 100%;
    }

    /* Navigation */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: var(--white);
        flex-direction: column;
        align-items: flex-start;
        padding: 80px 30px 30px;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        transition: right 0.4s ease;
        gap: 20px;
        z-index: 999;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-link {
        color: var(--dark-color) !important;
        font-size: 18px;
        width: 100%;
        padding: 10px 0;
    }

    .menu-toggle {
        display: flex;
        z-index: 1001;
    }

    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(8px, 8px);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }

    /* Hero Section */
    .hero-title {
        font-size: 42px;
    }

    .hero-description {
        font-size: 16px;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 15px;
    }

    .hero-buttons .btn {
        width: 100%;
        text-align: center;
    }

    .slider-arrow {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .slider-arrow.prev {
        left: 15px;
    }

    .slider-arrow.next {
        right: 15px;
    }

    .scroll-indicator {
        display: none;
    }

    /* Section Headers */
    .section-padding {
        padding: 60px 0;
    }

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

    .section-description {
        font-size: 16px;
    }

    /* Benefits Section */
    .benefit-box {
        margin-bottom: 30px;
    }

    /* Portfolio */
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .portfolio-image img {
        height: 300px;
    }

    /* Stats Section */
    .stat-box {
        margin-bottom: 40px;
    }

    .stat-number {
        font-size: 48px;
    }

    /* Testimonials */
    .testimonial-content {
        padding: 30px;
    }

    .testimonial-text {
        font-size: 16px;
    }

    .testimonial-author {
        flex-direction: column;
        text-align: center;
    }

    /* CTA Section */
    .cta-title {
        font-size: 36px;
    }

    .cta-text {
        font-size: 18px;
    }

    /* Contact Form */
    .contact-form {
        padding: 30px 20px;
    }

    .info-box {
        margin-bottom: 20px;
    }

    /* Footer */
    .footer-widget {
        text-align: center;
    }

    .social-links {
        justify-content: center;
    }

    .footer-links {
        text-align: center;
    }
}

/* Mobile Landscape (max-width: 640px) */
@media (max-width: 640px) {
    /* Typography */
    .hero-title {
        font-size: 36px;
    }

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

    /* Hero */
    .hero-content {
        padding-top: 100px;
    }

    .slider-pagination {
        bottom: 30px;
    }

    /* Buttons */
    .btn {
        padding: 12px 28px;
        font-size: 14px;
    }

    .btn-lg {
        padding: 14px 35px;
        font-size: 15px;
    }

    /* About Section */
    .about-badge {
        width: 120px;
        height: 120px;
        bottom: 20px;
        right: 20px;
    }

    .badge-number {
        font-size: 36px;
    }

    .badge-text {
        font-size: 12px;
    }

    /* Stats */
    .stats-section {
        padding: 60px 0;
    }

    .stat-number {
        font-size: 42px;
    }

    .stat-label {
        font-size: 14px;
    }

    /* Testimonials */
    .testimonial-content {
        padding: 25px 20px;
    }

    .testimonial-text {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .testimonial-arrow {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .testimonials-nav {
        gap: 20px;
    }

    /* CTA */
    .cta-section {
        padding: 80px 0;
    }

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

    .cta-text {
        font-size: 16px;
    }

    /* Contact */
    .contact-form {
        padding: 25px 15px;
    }

    .form-control {
        padding: 12px 15px;
        font-size: 14px;
    }

    /* Footer */
    .footer {
        padding: 60px 0 0;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form button {
        width: 100%;
        height: 45px;
    }

    /* Back to Top */
    .back-to-top {
        width: 45px;
        height: 45px;
        bottom: 20px;
        right: 20px;
        font-size: 18px;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    /* Container */
    .container {
        padding: 0 20px;
    }

    /* Navigation */
    .navbar {
        padding: 15px 0;
    }

    .logo img {
        height: 35px;
    }

    .nav-menu {
        width: 100%;
        right: -100%;
    }

    /* Hero */
    .hero-title {
        font-size: 32px;
    }

    .hero-subtitle {
        font-size: 14px;
    }

    .hero-description {
        font-size: 15px;
    }

    /* Section Headers */
    .section-title {
        font-size: 26px;
    }

    .section-subtitle {
        font-size: 13px;
    }

    .section-description {
        font-size: 15px;
    }

    /* Benefits */
    .benefit-icon {
        width: 70px;
        height: 70px;
        font-size: 28px;
        margin-bottom: 20px;
    }

    .benefit-box h3 {
        font-size: 20px;
    }

    .benefit-box p {
        font-size: 14px;
    }

    /* About */
    .about-text {
        font-size: 15px;
    }

    .feature-item {
        font-size: 14px;
    }

    .about-badge {
        width: 100px;
        height: 100px;
        bottom: 15px;
        right: 15px;
    }

    .badge-number {
        font-size: 30px;
    }

    .badge-text {
        font-size: 11px;
    }

    /* Portfolio */
    .portfolio-image img {
        height: 250px;
    }

    .portfolio-content h3 {
        font-size: 20px;
    }

    .portfolio-content p {
        font-size: 13px;
    }

    /* Stats */
    .stat-number {
        font-size: 36px;
    }

    .stat-number span {
        font-size: 32px;
    }

    .stat-label {
        font-size: 13px;
    }

    /* Testimonials */
    .testimonial-text {
        font-size: 14px;
    }

    .testimonial-author img {
        width: 50px;
        height: 50px;
    }

    .author-info h4 {
        font-size: 16px;
    }

    .author-info span {
        font-size: 13px;
    }

    /* CTA */
    .cta-title {
        font-size: 26px;
    }

    .cta-text {
        font-size: 15px;
    }

    /* Contact */
    .info-box i {
        font-size: 28px;
    }

    .info-box h4 {
        font-size: 16px;
    }

    .info-box p {
        font-size: 14px;
    }

    /* Footer */
    .widget-title {
        font-size: 18px;
    }

    .footer-text,
    .footer-links a {
        font-size: 14px;
    }

    .footer-bottom {
        font-size: 13px;
    }
}

/* Further mobile adjustments requested */
@media (max-width: 480px) {
    /* Reduce and lower the "Resposta em minutos | Sem compromisso" */
    .hero-info {
        font-size: 12px !important;
        color: rgba(255,255,255,0.85) !important;
        margin-top: 6px !important; /* small gap to match badges */
        display: block !important;
        text-align: center !important;
    }

    /* Move the hero CTA down and keep it centered */
    .hero-buttons { margin-top: 4px !important; gap: 6px !important; }
    .hero-buttons .btn {
        margin-top: 6px !important; /* match small gap */
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        width: auto !important;
        max-width: 320px !important;
        display: inline-flex !important;
    }

    /* Ensure the 'Púlpitos premium' badge is smaller and positioned lower */
    .hero-badge {
        transform: none !important;
        padding: 4px 8px !important;
        font-size: 0.8rem !important;
        margin-bottom: 6px !important;
        margin-top: 8px !important; /* slightly lower but tight */
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Slight vertical offset to move the badge visually lower */
    .hero-badge { position: relative !important; top: 4px !important; }
}

/* Make the hero 'Acrílico Premium' badge visually ~50% smaller on small mobiles */
@media (max-width: 480px) {
    .hero-badge {
        padding: 4px 7px !important; /* was 8px 14px */
        gap: 5px !important; /* was 10px */
        border-radius: 10px !important;
        font-size: 0.75rem !important;
        margin-bottom: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .hero-badge i,
    .hero-badge svg,
    .hero-badge .material-symbols-outlined {
        font-size: 14px !important;
        height: 14px !important;
        width: 14px !important;
    }

    .hero-badge > span {
        line-height: 1 !important;
        font-weight: 600 !important;
    }
}

/* Shift hero slide backgrounds slightly to the left on mobile
   Adjust `--hero-mobile-pos` value to move further left/right
   Troca de imagens mobile feita via JS (detecção por userAgent, não por resolução)
*/
@media (max-width: 768px) {
    :root { --hero-mobile-pos: 50%; }
    .hero-bg {
        background-position: var(--hero-mobile-pos) center !important;
    }
}

@media (max-width: 480px) {
    :root { --hero-mobile-pos: 50%; }
    .hero-bg {
        background-position: var(--hero-mobile-pos) center !important;
    }
}

/* Specific tweak: hero CTA on very small screens
   - narrower width but taller (increase vertical padding)
   - centered and capped to avoid overflow
*/
@media (max-width: 480px) {
    .hero-buttons .btn {
        width: auto !important;
        max-width: 320px !important; /* allow more horizontal room */
        padding: 18px 20px !important; /* slightly less horizontal padding */
        font-size: 15px !important; /* reduce font to avoid wrapping */
        line-height: 1.05 !important;
        display: inline-flex !important;
        justify-content: center !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        white-space: normal !important;
        word-break: keep-all !important;
    }

    .hero-buttons .btn i { margin-right: 8px; }
}

/* Tweak hero badges specifically on smaller screens */
@media (max-width: 640px) {
    .hero-stats .badge-content {
        padding: 8px 10px !important;
        gap: 8px !important;
        border-radius: 8px !important;
        min-width: 0 !important;
    }

    .hero-stats .badge-content span,
    .hero-stats .badge-content svg {
        height: 20px !important;
        width: 20px !important;
    }

    .hero-stats .badge-content > div {
        font-size: 13px !important;
    }

    .hero-stats .badge-content > div > div:first-child {
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    .hero-stats .badge-content > div > div:last-child {
        font-size: 11px !important;
    }
}

@media (max-width: 480px) {
    .hero-stats .badge-content {
        padding: 6px 8px !important;
        gap: 6px !important;
        border-radius: 8px !important;
    }

    .hero-stats .badge-content span,
    .hero-stats .badge-content svg {
        height: 16px !important;
        width: 16px !important;
    }

    .hero-stats .badge-content > div {
        font-size: 12px !important;
    }

    .hero-stats .badge-content > div > div:first-child {
        font-size: 13px !important;
    }

    .hero-stats .badge-content > div > div:last-child {
        font-size: 10px !important;
        opacity: 0.95;
    }
}

/* Extra Small Devices (max-width: 375px) */
@media (max-width: 375px) {
    .hero-title {
        font-size: 28px;
    }

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

    .btn {
        padding: 10px 25px;
        font-size: 13px;
    }

    .portfolio-image img {
        height: 220px;
    }

    .stat-number {
        font-size: 32px;
    }

    .cta-title {
        font-size: 24px;
    }
}

/* Final strong overrides for very small screens to ensure changes apply */
@media (max-width: 480px) {
    .hero-section .hero-info {
        font-size: 11px !important;
        margin-top: 22px !important;
        transform: translateY(6px) !important;
        text-align: center !important;
        display: block !important;
        line-height: 1.1 !important;
    }

    .hero-section .hero-buttons {
        margin-top: 10px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-direction: column !important;
    }

    .hero-section .hero-buttons .btn {
        margin-top: 20px !important;
        padding: 20px 18px !important;
        font-size: 15px !important;
        max-width: 320px !important;
        width: 90% !important;
        box-sizing: border-box !important;
    }

    .hero-section .hero-badge {
        padding: 3px 6px !important;
        font-size: 0.68rem !important;
        margin-top: 14px !important;
        margin-bottom: 6px !important;
        top: 10px !important;
        position: relative !important;
    }
}

/* Extra-strong adjustments requested: shrink and drop elements further on very small screens */
@media (max-width: 480px) {
    /* Make 'resposta em minutos' much smaller and move it closer to badges */
    .hero-info {
        font-size: 10px !important;
        margin-top: 28px !important; /* push it down */
        transform: translateY(8px) !important;
    }

    /* Reduce button size and drop it further down */
    .hero-buttons .btn {
        padding: 14px 16px !important; /* reduce vertical/horizontal padding */
        font-size: 14px !important;
        max-width: 280px !important;
        width: 84% !important;
        margin-top: 28px !important; /* push button further down */
        border-radius: 10px !important;
    }

    /* Reduce gap between badge and following elements, and also lower the badge */
    .hero-badge {
        padding: 2px 5px !important;
        font-size: 0.62rem !important;
        margin-top: 20px !important; /* lower the badge */
        margin-bottom: 4px !important; /* tighten gap below badge */
        top: 12px !important;
    }

    /* Also nudge hero-stats downward so badges sit closer to badge row */
    .hero-stats { margin-top: 18px !important; }
}

/* Landscape Orientation */
@media (max-height: 600px) and (orientation: landscape) {
    .hero-section {
        height: auto;
        min-height: 100vh;
        padding: 100px 0 60px;
    }

    .hero-content {
        height: auto;
        padding-top: 40px;
        padding-bottom: 40px;
    }

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

    .slider-pagination {
        display: none;
    }

    .scroll-indicator {
        display: none;
    }
}

/* Apply the mobile adjustments also for tablet-sized devices (<=768px) */
@media (max-width: 768px) {
    .hero-section .hero-info {
        font-size: 12px !important;
        margin-top: 20px !important;
        transform: translateY(6px) !important;
        text-align: center !important;
        line-height: 1.08 !important;
    }

    .hero-section .hero-buttons {
        margin-top: 12px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-direction: column !important;
    }

    .hero-section .hero-buttons .btn {
        margin-top: 22px !important;
        padding: 18px 20px !important;
        font-size: 15px !important;
        max-width: 420px !important;
        width: 90% !important;
        box-sizing: border-box !important;
    }

    .hero-section .hero-badge {
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
        margin-top: 18px !important;
        margin-bottom: 6px !important;
        top: 8px !important;
        position: relative !important;
    }

    .hero-stats { margin-top: 16px !important; }
}

/* Final overrides: force small gap between CTA and info on tablets & phones */
@media (max-width: 768px) {
    .hero-buttons { gap: 6px !important; }
    .hero-section .hero-info { margin-top: 6px !important; }
    .hero-section .hero-buttons { margin-top: 6px !important; }
    .hero-section .hero-buttons .btn { margin-top: 6px !important; }
    /* orcamento section button and box align tight gap */
    .orcamento-section a[rel~="noopener"] { margin: 6px auto 0 !important; }
    .orcamento-box-align { margin: 6px auto 0 !important; }
}

@media (max-width: 480px) {
    .hero-buttons { gap: 6px !important; }
    .hero-section .hero-info { margin-top: 6px !important; }
    .hero-section .hero-buttons { margin-top: 4px !important; }
    .hero-section .hero-buttons .btn { margin-top: 6px !important; }
    .orcamento-section a[rel~="noopener"] { margin: 6px auto 0 !important; }
    .orcamento-box-align { margin: 6px auto 0 !important; }
}

/* Ensure hero badges are centered on tablet/mobile */
@media (max-width: 768px) {
    .hero-stats { width: 100% !important; display: flex !important; justify-content: center !important; gap: 12px !important; }
    .hero-stats .badge-content { margin-left: 0 !important; margin-right: 0 !important; }
}

@media (max-width: 480px) {
    .hero-stats { width: 100% !important; display: flex !important; justify-content: center !important; gap: 10px !important; }
    .hero-stats .badge-content { margin-left: 0 !important; margin-right: 0 !important; }
}

/* Tighten gap between image and content in 'Solicite Orçamento' on tablet/mobile */
@media (max-width: 768px) {
    .orcamento-section .container > div { gap: 12px !important; }
    .orcamento-section .orcamento-image { height: 34vh !important; }
    .orcamento-section h2 { text-align: left !important; }
}

@media (max-width: 480px) {
    .orcamento-section .container > div { gap: 10px !important; }
    .orcamento-section .orcamento-image { height: 30vh !important; }
    .orcamento-section h2 { text-align: left !important; }
}

/* explicit row class: ensure smaller gaps on tablet/mobile and safe default on desktop */
.orcamento-row { gap: 20px !important; }
@media (max-width: 768px) {
    .orcamento-row { gap: 12px !important; }
}
@media (max-width: 480px) {
    .orcamento-row { gap: 8px !important; }
}

/* Force vertical stacking and remove inline flex width constraints on small screens */
@media (max-width: 768px) {
    .orcamento-row { flex-direction: column !important; align-items: stretch !important; }
    .orcamento-row > div { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
    .orcamento-row > div:first-child { margin-bottom: 6px !important; }
    .orcamento-row > div:last-child { margin-top: 6px !important; }
    .orcamento-section .orcamento-image { height: auto !important; max-height: 34vh !important; width: 100% !important; object-fit: cover !important; }
}

@media (max-width: 480px) {
    .orcamento-row { flex-direction: column !important; align-items: stretch !important; }
    .orcamento-row > div { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
    .orcamento-row > div:first-child { margin-bottom: 4px !important; }
    .orcamento-row > div:last-child { margin-top: 4px !important; }
    .orcamento-section .orcamento-image { height: auto !important; max-height: 30vh !important; width: 100% !important; object-fit: cover !important; }
}

/* Center content and reduce text/button sizes on tablet/mobile */
@media (max-width: 768px) {
    .orcamento-row { align-items: center !important; text-align: center !important; }
    .orcamento-row > div:last-child { text-align: center !important; }
    .orcamento-desc { font-size: 0.95rem !important; line-height: 1.12 !important; }
    .orcamento-btn { font-size: 1rem !important; padding: 12px 20px !important; }
    .orcamento-checks > div { font-size: 0.95rem !important; }
    /* prevent unwanted line-breaks: try to keep checks and button text on one line */
    .orcamento-checks > div { white-space: nowrap !important; }
    .orcamento-btn span { white-space: nowrap !important; }
    /* reduce heading so it fits on one line */
    .orcamento-section h2 { font-size: 1.6rem !important; line-height: 1.04 !important; }
    /* NEW: enforce centering and reduce sizes to avoid multiple breaks */
    .orcamento-row h2 { text-align: center !important; font-size: 2rem !important; }
    .orcamento-desc { font-size: 0.75rem !important; }
    .orcamento-btn { font-size: 0.8rem !important; padding: 10px 18px !important; }
    .orcamento-checks { flex-wrap: nowrap !important; justify-content: center !important; gap: 8px !important; }
    .orcamento-checks > div { font-size: 0.75rem !important; white-space: nowrap !important; }
}

@media (max-width: 480px) {
    .orcamento-row { align-items: center !important; text-align: center !important; }
    .orcamento-row > div:last-child { text-align: center !important; }
    .orcamento-desc { font-size: 0.9rem !important; line-height: 1.1 !important; }
    .orcamento-btn { font-size: 0.95rem !important; padding: 10px 16px !important; }
    .orcamento-checks > div { font-size: 0.9rem !important; }
    .orcamento-checks > div { white-space: nowrap !important; }
    .orcamento-btn span { white-space: nowrap !important; }
    .orcamento-section h2 { font-size: 1.25rem !important; line-height: 1.02 !important; }
    /* NEW: stronger shrink to avoid breaks */
    .orcamento-row h2 { text-align: center !important; font-size: 1.4rem !important; }
    .orcamento-desc { font-size: 0.6rem !important; line-height: 1.02 !important; }
    .orcamento-btn { font-size: 0.7rem !important; padding: 8px 12px !important; }
    .orcamento-checks { flex-wrap: nowrap !important; justify-content: center !important; gap: 6px !important; }
    .orcamento-checks > div { font-size: 0.6rem !important; white-space: nowrap !important; }
}

/* Fix hero-description spacing and alignment on tablet/mobile */
@media (max-width: 768px) {
    .hero-description {
        font-size: 18px !important;
        line-height: 1.18 !important;
        margin-bottom: 8px !important;
        text-align: left !important;
        max-width: 100% !important;
    }
    /* show only the mobile-specific <br> for description; keep title breaks intact */
    .hero-description br.mobile-only { display: inline !important; }
    .hero-description br:not(.mobile-only) { display: none !important; }
    .hero-title, .hero-title span { text-align: left !important; }
    .hero-title span { display: block !important; }
}

@media (max-width: 480px) {
    .hero-description {
        font-size: 16px !important;
        line-height: 1.14 !important;
        margin-bottom: 6px !important;
        text-align: left !important;
    }
    .hero-description br.mobile-only { display: inline !important; }
    .hero-description br:not(.mobile-only) { display: none !important; }
    .hero-title, .hero-title span { text-align: left !important; }
    .hero-title span { display: block !important; }
}

/* Strong overrides to prevent image overlapping and reduce vertical gap */
@media (max-width: 768px) {
    .orcamento-section .container > div { gap: 12px !important; align-items: flex-start !important; }
    .orcamento-section .container > div > div:first-child { margin-bottom: 0 !important; }
    .orcamento-section .container > div > div:last-child { margin-top: 0 !important; }
    .orcamento-section .orcamento-image { display: block !important; max-width: 100% !important; height: 34vh !important; object-fit: cover !important; }
    .orcamento-section { padding-top: 18px !important; padding-bottom: 18px !important; }
}

@media (max-width: 480px) {
    .orcamento-section .container > div { gap: 8px !important; align-items: flex-start !important; }
    .orcamento-section .container > div > div:first-child { margin-bottom: 0 !important; }
    .orcamento-section .container > div > div:last-child { margin-top: 0 !important; }
    .orcamento-section .orcamento-image { display: block !important; max-width: 100% !important; height: 30vh !important; object-fit: cover !important; }
    .orcamento-section { padding-top: 12px !important; padding-bottom: 12px !important; }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Optimize images for retina displays */
    .logo img,
    .footer-logo {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Print Styles */
@media print {
    .navbar,
    .slider-controls,
    .slider-pagination,
    .scroll-indicator,
    .back-to-top,
    .cta-section,
    .contact-section,
    .footer {
        display: none !important;
    }

    body {
        font-size: 12pt;
    }

    .section-padding {
        padding: 20px 0;
    }

    a {
        text-decoration: underline;
    }
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .kenburns-effect {
        animation: none !important;
    }

    .scroll-indicator .wheel {
        animation: none !important;
    }

    .spinner {
        animation: spin 2s linear infinite !important;
    }
}

/* Reduce footer sizes by ~50% on tablet and mobile */
@media (max-width: 768px) {
    .footer { padding: 36px 0 24px !important; }
    .footer-top-logo { height: 28px !important; margin: 4px auto 8px !important; }
    .footer-title { font-size: 10px !important; margin-top: 6px !important; }
    .footer-company { font-size: 7px !important; margin: 6px 0 10px !important; line-height: 1.2 !important; }
    .footer-contact-row { gap: 6px !important; margin: 8px 0 8px !important; }
    .contact-item { font-size: 8px !important; gap: 6px !important; }
    .contact-item i { font-size: 10px !important; }
    .footer-links-inline a { font-size: 7px !important; margin-left: 6px !important; }
    .footer-sep { margin: 12px auto !important; }
    .footer-trust-logos { gap: 14px !important; padding: 6px 0 10px !important; }
    .footer-trust-logos img { height: 16px !important; }
    .footer-bottom { font-size: 7px !important; margin-top: 4px !important; padding-top: 4px !important; }
}

@media (max-width: 480px) {
    .footer { padding: 30px 0 20px !important; }
    .footer-top-logo { height: 24px !important; margin: 4px auto 6px !important; }
    .footer-title { font-size: 9px !important; }
    .footer-company { font-size: 7px !important; }
    .footer-contact-row { gap: 6px !important; }
    .contact-item { font-size: 7px !important; }
    .contact-item i { font-size: 9px !important; }
    .footer-links-inline a { font-size: 7px !important; }
    .footer-sep { margin: 10px auto !important; }
    .footer-trust-logos { gap: 12px !important; }
    .footer-trust-logos img { height: 14px !important; }
    .footer-bottom { font-size: 7px !important; }
}