:root {
    --primary-color: #0f172a;
    --secondary-color: #334155;
    --accent-color: #2563eb;
    --success-color: #25d366;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-dark: #1e293b;
    --background-light: #f1f5f9;
    --white: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.95);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --iphone-safe-bottom: env(safe-area-inset-bottom);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--background-light);
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    /* Sticky Footer Logic */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    /* Pushes footer down */
}

/* Typography */
h1,
h2,
h3,
h4 {
    line-height: 1.2;
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: var(--transition);
    gap: 0.5rem;
}

.btn-primary {
    background-color: var(--accent-color);
    color: var(--white);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    background-color: #1d4ed8;
    transform: translateY(-2px);
}

.btn-whatsapp {
    background-color: var(--success-color);
    color: var(--white);
    box-shadow: var(--shadow-md);
}

.btn-whatsapp:hover {
    background-color: #22c55e;
    transform: translateY(-2px);
}

.section-padding {
    padding: 4rem 0;
}

/* Header */
/* Header */
.header {
    background-color: rgba(255, 255, 255, 0.05);
    /* Ultra clear white glass */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 5000;
    padding: 1rem 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.header .container {
    max-width: 95%;
    /* Use almost full width to push buttons to the very edge */
}

.header.scrolled {
    background-color: rgba(255, 255, 255, 0.15);
    /* White glass when scrolled (Vidrio Blanco) */
    padding: 0.5rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    /* Very subtle shadow */
    backdrop-filter: blur(25px);
    /* Heavy blur */
    -webkit-backdrop-filter: blur(25px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 160px;
    /* Huge initial height */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.header.scrolled .nav {
    height: 60px;
    /* Compact scrolling height */
}

/* Logo Container Re-structure */
.logo {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    color: var(--white);
    text-decoration: none;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    margin-right: 2rem;
}

.logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-img {
    height: 120px;
    /* Slightly reduced to fit stars */
    width: auto;
    border-radius: 50%;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.site-title {
    font-size: 2.8rem;
    /* Slightly reduced from 3.5rem to save space */
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-title span {
    color: var(--accent-color);
}

.header-slogan {
    font-size: 1.1rem;
    font-weight: 400;
    color: #e2e8f0;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.25rem;
    opacity: 1;
    transition: all 0.5s ease;
}

/* Scrolled State for New Elements */
.header.scrolled .logo-img {
    height: 45px;
}

.header.scrolled .site-title {
    font-size: 1.8rem;
}

.header.scrolled .header-slogan {
    opacity: 0;
    /* Hide slogan on scroll */
    height: 0;
    margin: 0;
    overflow: hidden;
}

.header.scrolled .logo {
    gap: 0.5rem;
}

.nav-links {
    display: none;
}

.nav-links a {
    color: var(--white);
    font-weight: 500;
    transition: var(--transition);
}

.nav-links a:hover {
    color: var(--accent-color);
}

/* Desktop: Show nav-links as flex */
@media (min-width: 769px) {
    .nav-links {
        display: flex;
        gap: 2rem;
    }
}

/* Golden Ticket Button */
.nav-ticket-btn {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #1a1a1a;
    border: none;
    padding: 0.7rem 1.5rem;
    border-radius: 25px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.nav-ticket-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.6);
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

.nav-ticket-btn i {
    font-size: 1.1rem;
}

/* Mobile: Adjust button layout */
@media (max-width: 768px) {

    /* Hide nav-links completely on mobile */
    .nav-links {
        display: none !important;
    }

    .header-btns {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }

    .header-btn {
        width: 100%;
        max-width: 280px;
    }

    /* Golden ticket button in mobile - same size as other buttons */
    .nav-ticket-btn {
        width: 100%;
        max-width: 280px;
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }

    /* Hide language button on mobile */
    .lang-btn {
        display: none !important;
    }
}

/* Desktop: Show language button */
@media (min-width: 769px) {
    .lang-btn {
        display: flex !important;
    }

    /* Desktop: Hide golden ticket from header-btns, show in nav */
    .header-btns .nav-ticket-btn {
        display: none;
    }
}

.header-contacts {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
    /* Pushed to the right and aligned with nav text */
}

.header-btns {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    min-width: 140px;
    /* Ensure space for text switch */
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-text {
    display: inline-block;
    transition: all 0.3s ease;
}

.header-btn:hover .btn-text {
    opacity: 0;
    transform: translateY(-20px);
}

.header-btn::after {
    content: attr(data-hover-content);
    /* Will use JS or CSS content if preferred */
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    font-weight: 700;
}

/* Specific text update for hover labels */
.primary-tel:hover::after {
    content: "Ing Duran";
    opacity: 1;
    transform: translateY(0);
}

.secondary-tel:hover::after {
    content: "Lic Erika";
    opacity: 1;
    transform: translateY(0);
}

.secondary-tel {
    background-color: #2563eb;
}

@media (max-width: 768px) {
    .header-contacts {
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-left: 0;
    }

    .header-btns {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }

    .header-btn {
        width: 100%;
        max-width: 280px;
    }
}

/* Hero Section */
.hero {
    position: relative;
    height: auto;
    min-height: 100vh;
    background-image: linear-gradient(rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.8)), url('assets/images/hero-bg.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    color: var(--white);
    padding-top: 220px;
    padding-bottom: 4rem;
    /* Adjusted for better positioning */
}

/* Hero Trust Block */
.hero-trust-block {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
    max-width: 600px;
}

.trust-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.8rem;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.trust-desc {
    color: #94a3b8;
    /* Slate 400 */
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.google-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;

    /* Glassmorphism */
    background: rgba(255, 255, 255, 0.1);
    /* Very transparent white */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    padding: 0.6rem 1.4rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.google-pill-badge:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.pill-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.pill-rating {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--white);
    font-weight: 700;
}

.pill-divider {
    color: rgba(255, 255, 255, 0.3);
    font-weight: 300;
}

.pill-count {
    color: #cbd5e1;
    /* Slate 300 */
    font-weight: 400;
    text-decoration: none;
    /* Removed underline */
}

.google-pill-badge:hover .pill-count {
    color: var(--white);
}

.pill-g {
    display: block;
    /* Ensure SVG displays block */
}

@media (max-width: 768px) {
    .trust-title {
        font-size: 2rem;
    }

    .hero-trust-block {
        text-align: center;
        margin: 2rem auto 0;
    }

    .google-pill-badge {
        margin: 0 auto;
    }
}

.hero-content {
    width: 100%;
    margin: 0 auto;
    position: relative;
    /* Changed for simple stacking */
    display: flex;
    flex-direction: column;
    /* Stack mobile first */
    align-items: center;
    padding: 0;
    /* Remove padding to let image hit edges */
}

.hero-visual {
    width: 100%;
    /* Full width */
    height: auto;
    display: block;
    /* Normal block flow */
    position: relative;
    margin-bottom: -15%;
    /* Pull content up */
    z-index: 1;
}

.hero-moto {
    width: 100%;
    height: auto;
    max-width: none;
    /* Unrestricted */
    object-fit: contain;
    /* Show full image */
    display: block;
    /* Removed mask to show full character detail */
}

.hero-text {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 800px;
    padding: 0 1.5rem;
    margin-top: -100px;
    /* Overlap the image bottom */
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
    /* Strong shadow for readability */
}

.hero-image-stack {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-car {
    position: relative;
    /* Changing to relative for flex flow */
    width: 60%;
    max-width: 350px;
    object-fit: contain;
    /* Light Gray Contour (Drop Shadow trick) */
    filter: drop-shadow(0 0 3px rgba(203, 213, 225, 0.8));
    animation: floatCar 6s ease-in-out infinite;
    z-index: 1;
}

.hero-moto {
    position: relative;
    width: 120%;
    /* Massive width */
    max-width: 900px;
    min-width: 350px;
    object-fit: contain;
    /* Light Gray Contour */
    filter: drop-shadow(0 0 10px rgba(203, 213, 225, 0.6));
    /* Face Right (Natural) */
    transform: none;
    /* Remove transition to prevent jitter with JS scroll */
    transition: filter 0.3s ease;
    z-index: 2;
    will-change: transform, opacity;
}

@keyframes floatCar {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes floatMoto {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* Mobile Fix */
/* Desktop Refinements */
@media (min-width: 1024px) {
    .hero-content {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        /* Push content */
        padding: 0;
        max-width: 100%;
        /* Break container */
    }

    .hero-visual {
        position: absolute;
        top: 0;
        left: 0;
        width: 60%;
        /* Take left 60% */
        height: 100%;
        margin: 0;
        object-fit: cover;
    }

    .hero-moto {
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: right center;
        mask-image: linear-gradient(to right, black 80%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    }

    .hero-text {
        width: 40%;
        max-width: 600px;
        margin: 0;
        text-align: left;
        padding-right: 5%;
    }
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero p {
    font-size: 1.125rem;
    color: #cbd5e1;
    margin-bottom: 2rem;
    max-width: 600px;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Hero Stats */
.hero-trust-text {
    margin-top: 3rem;
    margin-bottom: 1rem;
}

.hero-trust-text h3 {
    font-size: 1.5rem;
    color: var(--white);
    margin-bottom: 0.5rem;
}

.hero-trust-text p {
    font-size: 1rem;
    color: #cbd5e1;
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    margin-top: 1rem;
    /* Reduced margin since text is above */
    padding-top: 2rem;

}

.hero-stat-item h3 {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 0.25rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-stat-item p {
    font-size: 1.35rem;
    color: #e2e8f0;
    margin: 0;
}

/* Features / Pillars - Updated Layout */
.features {
    background: radial-gradient(circle at center, #0B1E3B 0%, #000000 85%);
    color: var(--white);
    overflow: hidden;
}

.features-layout {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

.features-grid {
    flex: 0 0 50%;
    /* Take up exactly half the space */
    width: 50%;
    margin-right: auto;
    /* Push to the left, leaving right empty */
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (max-width: 900px) {
    .features-grid {
        flex: 0 0 100%;
        width: 100%;
    }
}

.feature-card {
    padding: 2rem;
    border-radius: 1rem;
    background: #0f172a;
    border: 1px solid #1e293b;
    transition: var(--transition);
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.feature-card p {
    color: #cbd5e1;
    margin: 0;
    line-height: 1.6;
}

.feature-card h3 {
    color: var(--white);
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

.feature-card:hover {
    border-color: var(--accent-color);
    background: #1e293b;
    box-shadow: var(--shadow-lg);
    transform: translateX(10px);
    /* Move right instead of up for list view */
}

.feature-icon {
    font-size: 2rem;
    color: var(--accent-color);
    flex-shrink: 0;
    margin: 0;
    padding-top: 0.2rem;
}

.features-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.features-fox {
    width: 100%;
    max-width: 660px;
    height: auto;
    object-fit: contain;
    /* Flip horizontally if needed, or keep original if it looks right */
    /* Fade the bottom into the background for better integration */
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    /* Subtle glow */
    filter: drop-shadow(0 0 15px rgba(56, 189, 248, 0.4));
    will-change: transform;
    /* Performance optimization */
}

@media (max-width: 900px) {
    .features-layout {
        flex-direction: column-reverse;
        /* Bunny on top of text on mobile? Or bottom? Let's do bottom (default col) or top? User usually wants visible agents. Let's do column-reverse so text follows flow or column? Standard is visual then text or text then visual. Let's stack text then visual or visual then text. */
        flex-direction: column;
        gap: 3rem;
    }

    .features-visual {
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
    }

    .feature-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }

    .feature-card:hover {
        transform: translateY(-5px);
    }
}

/* Services */
.services {
    background-color: var(--white);
}

.section-title {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title h2 {
    font-size: 3rem;
    /* Increased from 2rem */
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.section-title p {
    font-size: 1.25rem;
    /* Increased readability */
    color: var(--secondary-color);
}

.google-maps-icon {
    color: #6b7280;
    margin-right: 0.5rem;
    font-size: 3.3rem;
    /* Tripled from 1.1rem */
}

/* Infinite Partner Scroll */
.partners-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 2rem;
    /* Fade gradients on sides for smoothness */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.partners-track {
    display: flex;
    width: max-content;
    gap: 3rem;
    animation: scroll 30s linear infinite;
    padding: 1rem 0;
}

.partners-track img {
    height: 60px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: var(--transition);
}

.partners-track img:hover {
    opacity: 1;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
        /* Moves exactly half the track (one full set) */
    }
}



.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

/* Services Tabs Container (The Pill) */
.services-tabs {
    display: inline-flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 3rem;
    background: rgba(239, 246, 255, 0.8);
    /* Faint blue background */
    padding: 0.5rem;
    border-radius: 3rem;
    /* Fully rounded container */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    position: relative;
    /* Center the container itself */
    left: 50%;
    transform: translateX(-50%);
}

/* Tab Buttons */
.tab-btn {
    background: transparent;
    border: 1px solid transparent;
    padding: 0.75rem 1.5rem;
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 2.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
    .services-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        width: 100%;
        padding: 0.5rem 1rem;
        gap: 0.5rem;
        border-radius: 0;
        background: transparent;
        /* Cleaner look on mobile scroll */
        border: none;
        box-shadow: none;
        -webkit-overflow-scrolling: touch;
        /* Smooth scroll on iOS */
        scrollbar-width: none;
        /* Firefox */
        margin-bottom: 1.5rem;
        left: 0;
        /* Reset centering */
        transform: translateX(0);
        /* Reset centering */
    }

    .services-tabs::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari/Webkit */
    }

    .tab-btn {
        flex: 0 0 auto;
        /* Don't shrink */
        white-space: nowrap;
        padding: 0.6rem 1.2rem;
        font-size: 0.95rem;
        background: rgba(255, 255, 255, 0.8);
        /* readable bg */
        border: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .tab-btn.active {
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
        color: white;
        text-shadow: none;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    }
}

.tab-btn:hover {
    background: linear-gradient(135deg,
            rgba(59, 130, 246, 0.2) 0%,
            rgba(37, 99, 235, 0.15) 100%);
    color: #111827;
    border-color: rgba(255, 255, 255, 0.3);
}

.tab-btn.active {
    background: linear-gradient(135deg,
            rgba(59, 130, 246, 0.25) 0%,
            rgba(37, 99, 235, 0.2) 100%);
    color: #0f172a;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow:
        0 8px 16px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.tab-content {
    display: none;
    animation: fadeInUp 0.5s ease-out;
}

.tab-content.active {
    display: block;
}

/* Service Item Refinements */
.service-item {
    background: var(--white);
    padding: 2rem;
    /* Increased from 1.5rem for better spacing */
    border-radius: 1rem;
    /* More rounded */
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    /* Changed for better layout */
    align-items: flex-start;
    gap: 1rem;
    transition: var(--transition);
    cursor: pointer;
    border: 1px solid #f1f5f9;
    height: 100%;
}

.service-item h4 {
    font-size: 1.5rem;
    /* Increased size for visibility */
    margin-bottom: 0.25rem;
}

.service-item small {
    font-size: 0.95rem;
    /* Slightly larger subtitle */
    color: var(--accent-color);
}

.service-item:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px);
    border-color: #cbd5e1;
    background-color: #f8fafc;
    /* Subtle color change on hover */
}

.service-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
    width: 100%;
}

.tag {
    background: #eff6ff;
    color: var(--accent-color);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Highlight Card (Licencia Permanente / Envios) */
.highlight-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: var(--white);
}

.highlight-card h4 {
    color: var(--white);
}

.highlight-card small {
    color: #38bdf8;
}

.highlight-card .service-icon {
    background: rgba(255, 255, 255, 0.1);
    color: #38bdf8;
    /* Light blue accent */
}

/* Reviews Section */
.reviews-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
    overflow: hidden;
}

.reviews-section::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.05) 0%, transparent 70%);
    animation: pulse-bg 15s ease-in-out infinite;
}

@keyframes pulse-bg {

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

    50% {
        transform: translate(5%, 5%) scale(1.1);
    }
}

/* Reviews Section Layout */



/* Reviews Section - Blended with Car Image */
.reviews-section {
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 50%, #f1f3f5 100%);
    /* Subtle gradient matching car image environment */
    padding: 4rem 0;
    position: relative;
}

/* Remove Background Pattern */
.reviews-section::before {
    display: none;
}

.reviews-section .section-title h2 {
    color: var(--primary-color);
    /* Restore dark color */
}

.reviews-section .section-title p {
    color: var(--secondary-color);
    /* Restore gray color */
}

.reviews-slider-container {
    width: 100%;
    margin: 3rem 0;
    position: relative;
    z-index: 2;
}

.reviews-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 2rem 1rem;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.reviews-track::-webkit-scrollbar {
    display: none;
}

/* Spacer for centering logic */
.review-spacer {
    min-width: calc(50% - 190px);
    flex-shrink: 0;
    pointer-events: none;
    visibility: hidden;
}

@media (max-width: 768px) {
    .review-spacer {
        min-width: calc(50% - 175px);
    }
}

/* Navigation Arrows */
.review-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: 1px solid #e5e7eb;
    color: var(--primary-color);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    z-index: 10;
}

.review-nav-btn:hover {
    background: var(--accent-color);
    color: white;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.review-nav-btn.prev {
    left: -24px;
}

.review-nav-btn.next {
    right: -24px;
}

.review-nav-btn i {
    font-size: 1.2rem;
}

/* Standard Card */
.review-card {
    min-width: 350px;
    max-width: 350px;
    background: white;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    scroll-snap-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Text adjustments for light background */
.review-text {
    color: var(--text-color);
    /* Dark text */
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-shadow: none;
}

.review-author span {
    color: var(--primary-color);
    font-weight: 600;
}

.verified-badge {
    background: #f1f5f9;
    /* Light gray badge */
    border: none;
    color: #000000;
    font-weight: 700;
}

/* Review Stars specific override */
.review-stars i {
    color: #fbbf24;
    filter: none;
}



.review-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Remove all special states */
.review-card.active,
.review-card.prev,
.review-card.next {
    opacity: 1;
    transform: none;
    filter: none;
}

.review-card.active::before,
.review-card::after {
    display: none;
}

/* Review Text - Simple */
.review-text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

/* Stars - Simple */
.review-stars {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    color: #fbbf24;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.review-stars i {
    color: #fbbf24;
}

/* Footer - Simplified */
.review-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    border-top: none;
    /* Remove border */
    padding-top: 0;
    margin-top: auto;
}

/* Hide Author for cleaner look (like reference) */
.review-author {
    display: none;
}

/* Verified Badge - Google Style with Glassmorphism */
.verified-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #000000;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-top: 1rem;
}

.verified-badge i {
    color: #4285f4;
    /* Google Blue */
    font-size: 1rem;
    filter: drop-shadow(0 0 3px rgba(66, 133, 244, 0.6));
}

.verified-badge span {
    color: #000000;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Google Badge - Official Style */
.google-badge {
    background: white;
    padding: 1.5rem 2.5rem;
    border-radius: 12px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-top: 2rem;
    margin-bottom: 2rem;
    transition: transform 0.3s ease;
    border: 1px solid #e1e4e8;
}

.google-badge:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.google-logo {
    font-family: 'Product Sans', 'Roboto', sans-serif;
    /* Google Fonts usually needed, but sans-serif fallback is okay */
    font-size: 2.2rem;
    font-weight: 500;
    letter-spacing: -0.5px;
    line-height: 1;
}

.g-blue {
    color: #4285F4;
}

.g-red {
    color: #EA4335;
}

.g-yellow {
    color: #FBBC05;
}

.g-green {
    color: #34A853;
}

.badge-subtitle {
    font-size: 1.2rem;
    color: #202124;
    /* Google Dark Gray */
    font-weight: 400;
    letter-spacing: 0.2px;
}

.badge-stars {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    margin-top: 0.5rem;
}

.badge-stars i {
    font-size: 1.4rem;
    color: #FBBC05;
    /* Star Yellow */
    filter: none;
    /* Remove previous glow/drop shadow if any */
}

.check-icon {
    color: #34A853 !important;
    /* Green Check */
    background: white;
    border-radius: 50%;
    /* To make it look like a circle with check inside if icon is just check. 
       fas fa-check-circle is a check inside a circle. */
    font-size: 1.5rem !important;
}

.google-cta {
    text-align: center;
    margin-top: 2rem;
    position: relative;
    z-index: 1;
}

.btn-google-review {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
    color: var(--white);
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: 3rem;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.4);
    transition: all 0.3s ease;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.btn-google-review:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(66, 133, 244, 0.6);
    background: linear-gradient(135deg, #3367d6 0%, #2d9249 100%);
}

.btn-google-review i:first-child {
    color: #fbbf24;
    font-size: 1.3rem;
    animation: star-pulse 1.5s ease-in-out infinite;
}

@keyframes star-pulse {

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

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

.btn-google-review i:last-child {
    font-size: 0.9rem;
    opacity: 0.8;
}

.verify-text {
    margin-top: 1.25rem;
    color: #4ade80;
    /* Bright Green */
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-shadow: 0 0 15px rgba(74, 222, 128, 0.4);
    /* Animation removed per user request */
}

@keyframes pulse-green {

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

    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

/* Footer */
.footer {
    background-color: #020617;
    color: #94a3b8;
    padding: 4rem 0 2rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-col h4 {
    color: var(--white);
    margin-bottom: 1.5rem;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a:hover {
    color: var(--white);
}

.copyright {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #1e293b;
    font-size: 0.875rem;
}


/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Responsive Adjustments */

/* Desktop Large (min-width: 768px) - Existing override */
@media (min-width: 768px) {
    .hero h1 {
        font-size: 3.5rem;
    }
}

/* Tablet / Medium Screens */
@media (min-width: 769px) and (max-width: 1024px) {
    .site-title {
        font-size: 2.5rem;
    }

    .hero {
        padding-top: 200px;
    }

    .hero h1 {
        font-size: 3rem;
    }
}

/* Mobile Devices (max-width: 768px) */
@media (max-width: 768px) {

    /* Header Adjustments */
    /* Header Adjustments - Mobile */
    .header {
        padding: 0.5rem 0;
        background-color: rgba(0, 0, 0, 0.8);
        /* Always slightly dark on mobile for readability */
        backdrop-filter: blur(10px);
    }

    .header.scrolled {
        padding: 0.5rem 0;
        background-color: #000000;
    }

    .nav {
        height: auto;
        flex-direction: column;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .logo {
        margin-right: 0;
        gap: 0.5rem;
        flex-direction: column;
        text-align: center;
    }

    .logo-img {
        height: 60px;
        /* Smaller initial mobile size */
    }

    .header.scrolled .logo-img {
        height: 50px;
        /* Subtle shrink */
    }

    .site-title {
        font-size: 2rem;
        /* Smaller mobile title */
    }

    .header.scrolled .site-title {
        font-size: 1.8rem;
    }

    .header-slogan {
        font-size: 0.8rem;
        text-align: center;
        display: block;
        margin-bottom: 0.5rem;
    }

    .header.scrolled .header-slogan {
        height: 0;
        margin: 0;
        opacity: 0;
        overflow: hidden;
    }

    /* Hide desktop nav links on mobile */
    .nav-links {
        display: none;
    }

    /* CTA Button on Mobile */
    .btn-whatsapp {
        width: 100%;
        max-width: 280px;
        /* Slightly narrower */
        margin-top: 0.25rem;
        padding: 0.8rem 1rem;
        /* Compact button */
        font-size: 0.95rem;
    }

    /* Hero Adjustments */
    /* Hero Adjustments */
    .hero {
        padding-top: 240px;
        /* Reduced from 280px */
        text-align: center;
        height: auto;
        min-height: 100vh;
        padding-bottom: 3rem;
        background-position: center;
        /* Center bg on mobile */
    }

    .hero-content {
        margin: 0 auto;
        padding: 0 1rem;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero p {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .hero-buttons {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 300px;
    }

    /* Hero Stats on Mobile */
    .hero-stats {
        flex-direction: column;
        gap: 2.5rem;
        align-items: center;
        margin-top: 2rem;
    }

    .hero-stat-item {
        text-align: center;
    }

    .hero-stat-item h3 {
        font-size: 2.5rem;
        /* Adjusted for mobile */
    }

    .hero-stat-item p {
        font-size: 1.1rem;
    }

    /* Section Adjustments */
    .section-title h2 {
        font-size: 1.75rem;
    }

    .section-padding {
        padding: 3rem 0;
    }

    /* Mobile Partner Scroll Adjustments */
    .partners-track {
        gap: 2rem;
    }

    .partners-track img {
        height: 40px;
    }

    /* Footer Adjustments */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .footer-links {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

}

/* Premium Gold Popup */
.gold-popup {
    position: fixed;
    top: 100px;
    /* Below header */
    left: 2rem;
    /* Anchor Left */
    right: auto;
    z-index: 5500;
    width: 300px;
    background: linear-gradient(145deg, #1a1a1a 0%, #000000 100%);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(251, 191, 36, 0.1),
        inset 0 0 0 1px rgba(255, 215, 0, 0.1);

    /* Start State: Off-screen Right */
    transform: translateX(120vw);
    opacity: 0;

    font-family: 'Inter', sans-serif;
    color: #f8fafc;
    pointer-events: none;
    /* Prevent clicks while off-screen */
}

/* Desktop Car Animation */
@media (min-width: 769px) {
    .gold-popup.visible {
        /* Run Animation */
        animation: car-park 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
        pointer-events: all;
    }
}

@keyframes car-park {
    0% {
        transform: translateX(120vw) skewX(-20deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    60% {
        transform: translateX(-40px) skewX(10deg);
        /* Brake & Overshoot Left */
    }

    80% {
        transform: translateX(10px) skewX(-5deg);
        /* Rebound Right */
    }

    100% {
        transform: translateX(0) skewX(0);
        /* Parked */
        opacity: 1;
    }
}

.gold-popup.hidden {
    display: none;
}

.gold-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.gold-icon {
    font-size: 1.2rem;
    color: #fbbf24;
    filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.6));
    animation: gold-pulse 3s infinite;
}

.gold-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    background: linear-gradient(to right, #ffffff, #e2e8f0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.5px;
}

.gold-subtitle {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 1.25rem;
    line-height: 1.4;
}

.gold-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gold-link-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s;
}

.gold-link-item i {
    width: 24px;
    text-align: center;
    color: #fbbf24;
    /* Gold icons */
    transition: transform 0.3s;
}

.gold-link-item:hover {
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.1) 0%, transparent 100%);
    border-color: rgba(251, 191, 36, 0.3);
    color: white;
    transform: translateX(5px);
}

.gold-link-item:hover i {
    transform: scale(1.2);
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
}

.link-highlight {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.1) 0%, transparent 100%);
    border-color: rgba(37, 99, 235, 0.3);
}

.link-highlight i {
    color: #60a5fa;
}

.close-gold,
.close-reemplacamiento {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    /* More visible bg */
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
    /* Brighter initial color */
    width: 44px;
    /* Slightly larger */
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(6px);
    z-index: 20;
    /* Ensure on top */
}

.close-gold:hover,
.close-reemplacamiento:hover {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    transform: rotate(90deg) scale(1.1);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

@keyframes gold-pulse {

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

    50% {
        opacity: 0.8;
        transform: scale(1.1);
        filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.8));
    }
}

@media (max-width: 768px) {
    .gold-popup {
        left: 50%;
        top: auto;
        bottom: 100px;
        right: auto;
        transform: translate(-50%, 100%);
        width: 90%;
        max-width: 350px;
        animation: none;
        /* No drift on mobile */
    }

    .gold-popup.visible {
        transform: translate(-50%, 0);
        animation: none;
        pointer-events: all;
    }
}

/* Import Popup - Floating Promo */
.import-popup {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 6000;
    /* Above header (5000) */
    max-width: 800px;
    width: 95%;
    transform: translateY(0) scale(1);
    opacity: 1;
    transform-origin: bottom right;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.import-popup.hidden {
    display: none;
}

.import-popup:not(.visible) {
    transform: translateY(100px) scale(0.5);
    opacity: 0;
    pointer-events: none;
}

.close-popup {
    position: absolute;
    top: -15px;
    right: -15px;
    background: white;
    color: #0f172a;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 10;
    transition: all 0.2s ease;
}

.close-popup:hover {
    transform: scale(1.1);
    background: #ef4444;
    /* Red close/minimize */
    color: white;
}

/* Import Trigger (Floating Button) */
.import-trigger {
    position: fixed;
    bottom: 2rem;
    right: 6.5rem;
    /* Gap from WhatsApp (2rem + 60px + gap) */
    z-index: 5999;
    /* Just below popup but above header/content */
    background: white;
    border: none;

    /* Circle Shape */
    width: 60px;
    height: 60px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transform: translateY(0);
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: #0f172a;
    /* Dark icon */
}

.import-trigger.hidden {
    display: none;
}

.import-trigger:not(.visible) {
    transform: translateY(50px) scale(0.8);
    opacity: 0;
}

.trigger-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ef4444;
    /* Notification Red */
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    animation: pulse-badge 2s infinite;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.import-trigger:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

@keyframes pulse-badge {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

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


.import-card {
    background: #111827;
    /* Solid rich dark background */
    border-radius: 1.5rem;
    overflow: hidden;
    display: flex;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 300px;
}

.import-content {
    padding: 2.5rem;
    flex: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.import-badge {
    background: #fbbf24;
    color: #0f172a;
    font-weight: 800;
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    text-transform: uppercase;
    width: fit-content;
    margin-bottom: 1rem;
    animation: bounce 2s infinite;
}

.import-content h2 {
    font-size: 2rem;
    line-height: 1.1;
    color: white;
    margin-bottom: 0.5rem;
}

.text-gradient {
    background: linear-gradient(to right, #38bdf8, #818cf8);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.import-content h3 {
    color: #94a3b8;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 1rem;
}

.import-content p {
    color: #cbd5e1;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.btn-import {
    background: white;
    color: #0f172a;
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    width: fit-content;
    border-radius: 2rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-import:hover {
    transform: translateY(-2px);
    background: #f1f5f9;
}

/* Visual Side - Unfiltered */
.import-visual {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.car-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.import-card:hover .car-img {
    transform: scale(1.05);
}

/* Waving Flags */
.waving-flag {
    position: absolute;
    font-size: 3rem;
    z-index: 10;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    animation: wave 3s ease-in-out infinite;
    transform-origin: bottom center;
}

.usa-flag {
    top: 1rem;
    left: 1rem;
    animation-delay: 0s;
}

.mx-flag {
    bottom: 1rem;
    right: 1rem;
    animation-delay: 1.5s;
}

@keyframes wave {

    0%,
    100% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg);
    }
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .import-popup {
        bottom: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 1.5rem 1.5rem 0 0;
    }

    .import-card {
        border-radius: 1.5rem 1.5rem 0 0;
        height: auto;
        flex-direction: column-reverse;
        /* Image on top */
    }

    .import-content {
        padding: 2rem;
        text-align: center;
        align-items: center;
    }

    .import-visual {
        min-height: 200px;
    }

    .close-popup {
        top: 1rem;
        right: 1rem;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(4px);
    }

    /* Position floating button above WhatsApp on mobile */
    .import-trigger {
        right: 2rem;
        bottom: 6rem;
        /* WhatsApp (2rem + 60px) + gap */
    }
}

/* Google Reviews "Trophy Wall" Redesign */
.google-maps-icon {
    font-size: 3.5rem !important;
    /* Even larger icon */
    margin-right: 0.8rem;
    vertical-align: middle;
}

.section-title h2 {
    font-size: 4rem;
    /* Massive title */
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

.section-title p {
    font-size: 2rem;
    /* Larger subtitle/icon text */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* Full Width Car Image Container - Horizon to Horizon */
.trophy-wall-container {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    /* Force breakout of container */
    margin-right: calc(-50vw + 50%);
    height: 550px;
    /* Impressive height */
    overflow: hidden;
    margin-top: 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.trophy-car-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(1);
    /* Ensure text pop */
}

/* Overlaid Stats/Badge */
.trophy-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    z-index: 100;
}

/* Moving Halo Animation */
@keyframes shining-halo {
    0% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.4), 0 0 40px rgba(251, 191, 36, 0.2);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 40px rgba(255, 255, 255, 0.6), 0 0 80px rgba(251, 191, 36, 0.4);
        transform: scale(1.02);
    }

    100% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.4), 0 0 40px rgba(251, 191, 36, 0.2);
        transform: scale(1);
    }
}

.google-badge.premium-badge {
    background: rgba(255, 255, 255, 0.15);
    /* Slightly lighter glass */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 2.5rem 5rem;
    border-radius: 25px;
    display: inline-block;
    min-width: 350px;
    animation: shining-halo 3s infinite ease-in-out;
    /* The requested moving halo */
}

@media (max-width: 600px) {
    .google-badge.premium-badge {
        min-width: 200px;
        width: 90%;
        padding: 1rem 1.5rem;
        border-radius: 12px;
    }

    .google-badge.premium-badge .google-logo {
        font-size: 2rem;
    }

    .google-badge.premium-badge .badge-subtitle {
        font-size: 0.9rem;
    }

    .google-badge.premium-badge .badge-stars i {
        font-size: 1rem;
    }
}

.google-logo {
    font-size: 4.5rem;
    /* Massive Google Logo */
    font-weight: 800;
    margin-bottom: 0.5rem;
    letter-spacing: -2px;
}

.badge-subtitle {
    font-size: 1.8rem;
    color: #000000;
    /* Black text as requested */
    font-weight: 900;
    /* Extra bold */
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    /* Glow against glass */
}

.score-text {
    font-size: 5rem;
    /* Huge Score */
    color: white;
    background: none;
    -webkit-text-fill-color: white;
    font-weight: 900;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

.badge-stars i {
    font-size: 2.5rem;
    color: #ffd700;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
}

.verify-text {
    color: #000000;
    /* Pure Black */
    font-weight: 900;
    font-size: 1.4rem;
    text-transform: uppercase;
    margin-top: 1.5rem;
    text-shadow: none;
    background: #fbbf24;
    /* Highlight background */
    padding: 0.8rem 1.5rem;
    border-radius: 6px;
    display: inline-block;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Verified Badge in Cards - Improved Visibility */
.verified-badge {
    color: #000000;
    /* Black text */
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(226, 232, 240, 0.5);
    /* Slight pill bg */
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
}

/* Mobile Responsiveness Tweaks */
@media (max-width: 768px) {

    html,
    body {
        overflow-x: hidden;
    }

    .import-popup,
    .gold-popup {
        display: none !important;
    }

    .tab-btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    /* Ensure footer has background */
    .footer {
        background-color: var(--primary-color);
        color: var(--text-primary);
        width: 100%;
        margin-top: auto;
        /* Double insurance for flex */
    }
}

/* =========================================
   New Trámites Section (Permiso & Licencia)
   Global Styles (Desktop Default)
   ========================================= */
.tramites-section {
    background-color: #f8fafc;
    /* Very light gray/slate */
    border-top: 1px solid #e2e8f0;
}

.section-heading {
    text-align: center;
    font-size: 2.5rem;
    color: #15803d;
    /* Official Green */
    margin-bottom: 3rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tramites-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    /* Split view style */
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
}

.tramite-card {
    padding: 3rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Divider line between columns */
.tramite-card:first-child {
    border-right: 2px solid #f1f5f9;
}

.tramite-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.text-green {
    color: #4ade80;
    /* Bright Green */
    color: #65a30d;
    /* Lime/Green darker */
}

/* Specific colors for headers */
.tramite-card:first-child .tramite-title {
    color: #65a30d;
    /* Lime Green for Permiso */
}

.tramite-card:last-child .tramite-title {
    color: #65a30d;
    /* Same green uniform */
}


.tramite-image {
    margin-bottom: 2rem;
    width: 100%;
    max-width: 350px;
    transition: transform 0.3s ease;
}

.tramite-image img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
    border-radius: 8px;
}

.tramite-image:hover {
    transform: scale(1.02);
}

.tramite-validity {
    color: #475569;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1rem;
    letter-spacing: 1px;
    font-size: 0.9rem;
}

.tramite-subtitle {
    font-size: 1.5rem;
    color: #65a30d;
    font-weight: 700;
    margin: 1.5rem 0 1rem;
}

.tramite-desc {
    color: #64748b;
    line-height: 1.6;
    max-width: 400px;
    margin: 0 auto 2rem;
}

.requirements-list {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.req-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: #475569;
    font-size: 0.9rem;
}

.tramite-btn-container {
    margin-top: auto;
}

.btn-whatsapp-full {
    background-color: #15803d;
    /* Darker Green */
    color: white;
    padding: 1rem 3rem;
    border-radius: 8px;
    font-size: 1.25rem;
    font-weight: 700;
    transition: all 0.3s;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-whatsapp-full:hover {
    background-color: #166534;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Mobile Layout - Stacked (iPhone style) */
@media (max-width: 640px) {
    .tramites-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        /* Force single column stack */
        gap: 2rem !important;
        /* Force gap between cards */
        box-shadow: none;
        border: none;
        background: transparent;
    }

    .tramite-card {
        background: white;
        border-radius: 16px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
        /* Stronger shadow for individual cards */
        border: 1px solid rgba(0, 0, 0, 0.05);
        padding: 2.5rem 1.5rem;
        margin: 0;
        width: 100%;
        /* Full width */
    }

    /* Remove desktop dividers */
    .tramite-card:first-child {
        border-right: none;
        margin-right: 0;
        border-bottom: none;
        margin-bottom: 0;
    }

    .tramite-card:last-child {
        margin-left: 0;
    }

    .tramite-title {
        font-size: 1.6rem;
    }

    .tramite-subtitle {
        font-size: 1.1rem;
    }
}

/* Desktop Layout Enforcement */
@media (min-width: 641px) {
    .tramites-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* Strictly 2 columns */
        width: 100%;
    }

    .tramite-card {
        width: auto;
        /* Allow grid to control width */
    }
}

/* Intermediate/Mobile styles (Tablet and below) */
@media (max-width: 900px) {
    .section-heading {
        font-size: 1.8rem;
        margin-bottom: 2rem;
        color: #0f172a;
        /* Dark text instead of bright green for discretion */
        opacity: 0.9;
    }

    .tramite-title {
        font-size: 1.5rem;
        color: #334155 !important;
        /* Slate 700 - Softer than black/green */
    }

    .btn-whatsapp-full {
        width: 100%;
        padding: 1rem;
        font-size: 1.1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        /* Softer Green Gradient */
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
    }
}

/* Language Switcher */
.lang-btn {
    background: transparent;
    border: 2px solid var(--white);
    color: var(--white);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
    margin-left: 0.5rem;
    position: relative;
    z-index: 5001;
}

.lang-btn:hover {
    background: var(--white);
    color: var(--primary-color);
    transform: scale(1.1);
}

/* Scrolled state for language button */
.header.scrolled .lang-btn {
    border-color: var(--white);
    color: var(--white);
}

.header.scrolled .lang-btn:hover {
    background: var(--primary-color);
    color: var(--white);
}

/* Mobile Language Button Adjustment */
@media (max-width: 768px) {
    .lang-btn {
        margin-right: 0.5rem;
        width: 35px;
        height: 35px;
        font-size: 0.8rem;
    }
}

/* Mobile Hero Overlay Animation */
.mobile-hero-overlay {
    display: none;
    /* Hidden on desktop */
}

@media (max-width: 768px) {
    .mobile-hero-overlay {
        display: block;
        position: absolute;
        bottom: 10%;
        /* Position over the lower part of the character */
        left: 0;
        width: 100%;
        text-align: center;
        font-family: 'Yellowtail', cursive;
        color: #fbbf24;
        font-size: 2.2rem;
        line-height: 1.1;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
        background-color: rgba(255, 255, 255, 0.2);
        padding: 5px 0;
        backdrop-filter: blur(2px);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        z-index: 20;
        pointer-events: none;
        opacity: 0;
        /* Start hidden */
    }

    .mobile-hero-overlay.visible {
        animation: friendlyFlash 1.2s ease-out forwards;
    }
}

@keyframes friendlyFlash {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }

    60% {
        opacity: 1;
        transform: scale(1.1) translateY(0);
        text-shadow: 0 0 30px rgba(251, 191, 36, 1), 2px 2px 4px rgba(0, 0, 0, 0.9);
        /* "Destello" burst */
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    }
}

/* Mobile Improvements */
@media (max-width: 768px) {
    .header {
        height: auto;
        padding-bottom: 1.5rem;
        background-color: rgba(255, 255, 255, 0.05) !important;
        /* Force Clear */
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }

    .header.scrolled {
        background-color: rgba(255, 255, 255, 0.15) !important;
        /* Force White Glass */
    }

    .nav {
        flex-wrap: wrap;
        height: auto !important;
        gap: 0.8rem;
        justify-content: center;
        padding-bottom: 0.5rem;
    }

    .logo {
        margin-right: 0;
        margin-bottom: 0px;
    }

    /* Slogan inside header - Clean styling */
    .header-slogan {
        width: 100%;
        text-align: center;
        margin-top: 5px;
        margin-bottom: 5px;
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.9);
        display: block;
        white-space: normal;
        line-height: 1.3;
    }

    /* Push Hero text down to account for taller header */
    .hero-text {
        margin-top: 100px;
        /* Significantly increased to avoid overlap with large mobile header */
        padding-top: 6rem;
        /* Ensures text is well below the centered logo/menu area */
    }
}

/* Fox Interaction Systems */
.features-visual {
    position: relative;
}

.fox-bubble {
    position: absolute;
    top: -30px;
    right: 10%;

    /* Modern Glassmorphism */
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.95) 0%, rgba(245, 158, 11, 0.95) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    color: #ffffff;
    padding: 1rem 1.8rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 1.1rem;

    /* Premium Shadow */
    box-shadow:
        0 20px 40px rgba(251, 191, 36, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.3) inset,
        0 4px 6px rgba(0, 0, 0, 0.1);

    opacity: 0;
    transform: translateY(20px) scale(0.9);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    z-index: 100;
    white-space: nowrap;

    /* Subtle inner glow */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.fox-bubble.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: bubbleFloat 4s ease-in-out infinite alternate;
}

@keyframes bubbleFloat {
    from {
        transform: translateY(0) rotate(-1deg);
    }

    to {
        transform: translateY(-12px) rotate(1deg);
    }
}

/* Modern speech bubble tail */
.fox-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 20px;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.95) 0%, rgba(251, 191, 36, 0.95) 100%);
    transform: rotate(45deg);
    border-radius: 0 0 4px 0;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Mobile responsive bubble */
@media (max-width: 768px) {
    .fox-bubble {
        top: -20px;
        right: 5%;
        font-size: 0.9rem;
        padding: 0.7rem 1.2rem;
    }
}