body {
    font-family: Saira, sans-serif;
    background-color: #fff;
    color: #000;
    font-display: swap;
}

.logo-container, h1, h2, h3, h4, h5, h6 {
    font-family: 'Lexend Exa', sans-serif;
}

.bg-amarillo-energetico,
.footer-logo-container .logo-graphic,
.footer-logo-container .logo-graphic::after,
.footer-logo-container .logo-graphic::before {
    background-color: #ffc835;
}

.text-gris-carbonizado,
.footer-logo-container .logo-text-smart-media {
    color: #606060;
}

.border-amarillo-energetico {
    border-color: #ffc835;
}

.service-card {
    background-color: #f9f9f9;
    border-left: 5px solid #ffc835;
    position: relative;
    overflow: hidden;
}

.service-card img.ad-format-gif,
.service-card img.ad-format-image {
    width: 100%;
    height: 180px;
    object-fit: contain;
    border-radius: .25rem;
    margin-bottom: .75rem;
    background-color: #f0f0f0;
}

.client-logo {
    max-height: 60px;
    filter: grayscale(100%);
    transition: filter .3s;
}
.client-logo:hover {
    filter: grayscale(0%);
}

.counter-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: #000;
}

.logo-container {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 1.5rem;
    color: #000;
}
.logo-container img {
    width: 100% !important;
}

.logo-text-cerebro {
    letter-spacing: .05em;
}
.logo-text-smart-media {
    font-size: .75rem;
    font-weight: 300;
    letter-spacing: .2em;
    display: block;
    margin-top: -5px;
    color: #606060;
}

.logo-graphic {
    width: 10px;
    height: 30px;
    background-color: #ffc835;
    margin-right: 8px;
    position: relative;
}
.logo-graphic::before,
.logo-graphic::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #ffc835;
}
.logo-graphic::before {
    top: -2px;
}
.logo-graphic::after {
    bottom: -2px;
}

.contact-link-container {
    background: #ffc835;
    border-radius: 10px;
    padding: .5rem;
}
.contact-link-container .nav-link {
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.contact-link-container .nav-link.active-link {
    color: #000 !important;
}

.footer-bg {
    background-color: #000;
    color: #fff;
}

.content-button.active {
    background-color: #ffc835;
    padding: 1rem;
    border-radius: 5%;
    color: #000;
    border-color: #ffc835;
}
.content-button.social-media:hover,
.content-button.programmatic-button:hover {
    color: #000 !important;
}

.benefit-item {
    @apply bg-amarillo-energetico text-xs text-black font-semibold px-2 py-1 rounded-full inline-block mr-2 mb-2;
}

#buttons-container,
#programmatic-buttons-container {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-direction: column;
    height: 50%;
}
@media (max-width:768px) {
    #buttons-container,
    #programmatic-buttons-container {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5px;
    }
    .contact-link-container {
        display: none;
    }
    .section-padding {
        padding: 1.5rem;
    }
}

#draggableContainer {
    transition: transform .2s;
}

#floatingMenu {
    top: 0;
    animation: .2s ease-out scaleIn;
    z-index: 1000;
}

@keyframes scaleIn {
    from {
        transform: scale(.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.cursor-move {
    cursor: grab;
}
.cursor-move:active {
    cursor: grabbing;
}

.content-image-programmatic img {
    width: 100%;
}

header.hidden-header {
    transform: translateY(-100%);
    opacity: 0;
}

.hero-google-ads,
.hero-polygoning {
    background-color: #f7fafc;
}

.process-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.process-step-number,
.process-number-google {
    color: #ffc835;
    font-weight: 700;
    margin-right: .75rem;
    line-height: 1.2;
    font-family: 'Lexend Exa', sans-serif;
    font-size: 1.875rem;
}

.key-point-icon,
.benefit-icon {
    color: #ffc835;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: .75rem;
}
.key-point-icon {
    width: 1.5em;
    height: 1.5em;
    margin-right: .5em;
}

#hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}
#hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .5s ease-out, transform .5s ease-out;
}
.video-scrolled {
    opacity: .3;
    transform: scale(.95);
}

#hero > .container {
    position: relative;
    z-index: 1;
}

.hero-animated-text {
    font-weight: 700;
    text-shadow: 2px 2px 8px rgba(0,0,0,.7);
    opacity: 0;
    transition: opacity .5s ease-in-out;
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(2rem, 8vw, 5.5rem);
    line-height: 1.2;
}
.hero-animated-text.visible {
    opacity: 1;
}
#hero-text-3 {
    font-size: clamp(1.5rem, 5vw, 4rem);
}
#hero-text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1200px;
    color: #fff;
    text-align: center;
    z-index: 1;
}

.popup-overlay {
    transition: opacity .3s;
}
.popup-content {
    transition: transform .3s, opacity .3s;
}

.contact-card-ourjob {
    text-align: center;
}
.contact-card-ourjob a {
    margin: 0 auto;
    background-color: #ffc835;
    padding: 5px 10px;
    border-radius: 8px;
    text-align: center;
}

.menu-main-container .active-link,
.menu-main-container a:hover,
.text-amarillo-energetico {
    color: #ffc835;
}

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

.process-item-google,
.video-gallery-item {
    background-color: #fff;
    border-radius: .5rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
}
.process-item-google {
    border: 1px solid #e2e8f0;
}
.process-item-google:hover,
.video-gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
}

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.video-container a:hover {
    cursor: pointer;
}

.case-study-hero,
.pdooh-hero {
    background-color: #f9fafb;
    padding-top: 8rem;
    padding-bottom: 4rem;
}
.pdooh-hero {
    background-color: #000;
    color: #fff;
}

.advantage-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.advantage-number {
    font-family: 'Lexend Exa', sans-serif;
    color: #ffc835;
    font-size: 2.25rem;
    font-weight: bold;
    line-height: 1;
}

.partner-logos img {
    max-height: 45px;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}
.partner-logos img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.comparison-table {
    background-color: #fff;
    border-radius: .5rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
    overflow: hidden;
}
.comparison-table th,
.comparison-table td {
    padding: 1rem;
    text-align: center;
}
.comparison-table thead {
    background-color: #1f2937;
    color: #fff;
}
.comparison-table .pdooh-col {
    background-color: #fffbeb;
}
.comparison-table .feature-col {
    text-align: left;
    font-weight: 600;
}
.comparison-table .check-mark {
    color: #16a34a;
    font-weight: bold;
}

.new-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #FFD700;
    color: #000;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 0 0 0 8px;
    z-index: 10;
}

.button-container a:hover,
button:hover {
    color: #ffc835 !important;
}

/* Estilos para header en páginas internas */
#mainHeader.internal-page nav {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
}
#mainHeader.internal-page .logo-text-cerebro,
#mainHeader.internal-page .nav-link:not(.active-link) {
    color: #000;
}
#mainHeader.internal-page .logo-text-smart-media {
    color: #606060;
}
#mainHeader.internal-page .md\:hidden #main-mobile-menu-button svg {
    stroke: #000;
}
#mainHeader.internal-page .nav-link:hover:not(.active-link) {
    background-color: #ffc835;
    color: #000;
}
#mainHeader nav .nav-link.active-link {
    color: #ffc835;
}
#button-hero:hover{
    background-color: #ffc835;
    color:#000;
}