/* ========================================
   RESPONSIVIDADE - MOBILE (< 768px)
   ======================================== */

@media (max-width: 767.98px) {

    /* Container */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Tipografia */
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    .hero-title {
        font-size: 2rem;
        text-align: center;
        color: var(--white);
    }

    .hero-title span,
    .hero-title .typewriter-text {
        color: var(--danger-500);
    }

    .typewriter-cursor {
        background-color: var(--danger-500);
    }

    .hero-subtitle {
        font-size: 1rem;
        text-align: center;
        color: var(--light-100);
    }



    /* Navbar */
    .navbar {
        background: transparent !important;
        padding: 1rem 0;
        box-shadow: none;
    }

    .navbar.scrolled {
        background: var(--white) !important;
        box-shadow: var(--shadow-sm);
    }

    .navbar-collapse {
        background: var(--white);
        padding: 1.5rem;
        border-radius: 12px;
        box-shadow: var(--shadow-lg);
        margin-top: 1rem;
    }

    .navbar-collapse .nav-link {
        color: var(--dark-700) !important;
    }

    .navbar-brand {
        font-size: 1.25rem;
    }

    .navbar-brand img {
        filter: brightness(0) invert(1) !important;
    }

    .navbar.scrolled .navbar-brand img {
        filter: none !important;
    }

    .navbar-toggler {
        border: none;
        padding: 0.5rem;
    }

    .navbar-nav {
        align-items: flex-start !important;
    }

    .navbar-nav .nav-item {
        width: 100%;
        text-align: right;
        margin-left: 0 !important;
    }

    .navbar-nav .nav-item .btn {
        width: 100%;
        text-align: center;
        margin-top: 1rem;
    }

    /* Hero Section */

    .hero-section {
        padding: 10rem 0 8rem;
        min-height: 100vh;
        background: linear-gradient(135deg, rgba(26, 62, 146, 0.85) 0%, rgba(26, 26, 46, 0.95) 100%),
            url('https://images.unsplash.com/photo-1558002038-1055907df827?auto=format&fit=crop&w=800&q=80') center/cover no-repeat;
    }

    .hero-section .btn {
        width: 100%;
        margin-bottom: 0.75rem;
    }

    /* Efeito pulsar no botão Ligar Agora (mobile) */
    .btn-hero-ligar {
        animation: pulse-ligar 2s ease-in-out infinite;
    }

    @keyframes pulse-ligar {

        0%,
        100% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.55);
        }

        50% {
            transform: scale(1.04);
            box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
        }
    }

    .btn-outline-primary {
        border: 2px solid var(--light-100);
        color: var(--light-100);
    }

    .hero-section .hero-image,
    .badge-24h {
        display: none !important;
    }

    .hero-section .d-flex.gap-4 {
        justify-content: center;
        flex-direction: column;
        gap: 0.75rem !important;
    }

    /* Cards */
    .card-servico {
        padding: 2rem 1.5rem;
    }

    /* ----------------------------------------
       Subcards — Carrossel horizontal mobile
    ---------------------------------------- */

    /* Hint de swipe */
    .subcards-hint {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        font-family: 'Poppins', sans-serif;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        color: var(--dark-500);
        margin-top: var(--spacing-1);
        margin-bottom: var(--spacing-3);
    }

    .subcards-hint i {
        font-size: 0.7rem;
        color: var(--primary-500);
        animation: hint-arrow 1.4s ease-in-out infinite;
    }

    .card-servico--urgencia .subcards-hint i {
        color: var(--danger-700);
    }

    @keyframes hint-arrow {
        0%, 100% { transform: translateX(0); opacity: 1; }
        50%       { transform: translateX(4px); opacity: 0.6; }
    }

    /* Viewport — mascara o overflow, contido dentro do card */
    .subcards-viewport {
        width: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        padding-bottom: var(--spacing-2);
        box-sizing: border-box;
    }

    .subcards-viewport::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    /* Track — linha horizontal de subcards */
    .subcards-track {
        display: flex;
        flex-direction: row;
        gap: var(--spacing-3);
        width: max-content;
    }

    /*
     * Subcard individual.
     * Usa calc relativo ao vw para criar peek do próximo card.
     * Os cards ocupam praticamente 100vw no mobile com padding de ~1.5rem
     * de cada lado do card pai. Desconta 2x padding do card (3rem) + container (2rem).
     * 72% desse total resulta num peek natural de ~28% do próximo card.
     */
    .subcard {
        flex: 0 0 auto;
        width: calc((100vw - 2rem - 3rem) * 0.72);
        scroll-snap-align: start;
        scroll-snap-stop: always;
        border-radius: var(--radius-md);
        overflow: hidden;
        background: var(--dark-900);
        box-shadow: var(--shadow-sm);
        display: flex;
        flex-direction: column;
    }

    .subcard img {
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        display: block;
        flex: 1 1 auto;
    }

    .subcard-legenda {
        display: block;
        font-family: 'Poppins', sans-serif;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: var(--white);
        background: var(--primary-900);
        text-align: center;
        padding: var(--spacing-2) var(--spacing-3);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .card-servico--urgencia .subcard-legenda {
        background: var(--danger-900);
    }

    /* Seções */
    .section-light,
    .section-dark,
    .section-gradient {
        padding: 4rem 0;
    }

    /* Grid de Ícones */
    .icon-grid-item {
        padding: 1.5rem 1rem;
    }

    .icon-grid-item i {
        font-size: 2rem;
    }

    /* ----------------------------------------
       Carousel Diferenciais — Mobile
    ---------------------------------------- */

    #carouselDiferenciais .carousel-item {
        text-align: center;
    }

    /* Footer */
    .footer {
        padding: 3rem 0 1.5rem;
        text-align: center;
    }

    .footer .d-flex.gap-3 {
        justify-content: center;
    }

    /* Botão Flutuante */
    .floating-whatsapp {
        display: block;
        position: fixed;
        bottom: 24px;
        right: 24px;
        z-index: 1050;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.3s ease;
        pointer-events: none;
    }

    .floating-whatsapp.visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: all;
    }

    .floating-whatsapp .btn {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: var(--danger-900);
        border: none;
        box-shadow: 0 8px 24px rgba(208, 26, 40, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        animation: pulse-float 2s infinite;
    }

    .floating-whatsapp .btn i {
        font-size: 1.75rem;
        color: white;
    }

    @keyframes pulse-float {

        0%,
        100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.05);
        }
    }

    /* Accordions */
    .accordion-button {
        padding: 1rem;
        font-size: 0.95rem;
    }

    .accordion-body {
        padding: 1rem;
        font-size: 0.9rem;
    }

    /* Formulários */
    .form-control-lg,
    .form-select-lg,
    .btn-lg {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
}