/* ========================================
   RESET Y VARIABLES
======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-primary: #FFCD00;
    --color-black: #000000;
    --color-dark-gray: #404040;
    --color-gray: #808080;
    --color-white: #FFFFFF;
    --color-bg: #F5F5F0;
    --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    /*--spacing-md: 24px;*/
    --spacing-md: 10px;
    --spacing-2md: 20px;
    --spacing-lg: 32px;
    --spacing-2lg: 46px;
    --spacing-xl: 48px;
    --spacing-2xl: 64px;
    --spacing-3xl: 96px;
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}

body {
    font-family: var(--font-primary);
    /*background-color: var(--color-black);
    color: var(--color-white);*/
    background-color: var(--color-bg);
    color: var(--color-black);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ========================================
   HEADER / NAVBAR
======================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    padding: var(--spacing-2md) 0;
    transition: var(--transition-normal);
}

.header.scrolled {
    box-shadow: 0 2px 20px rgba(255, 214, 0, 0.1);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--color-white);
    font-size: 18px;
    font-weight: 600;
    transition: var(--transition-fast);
}

.logo:hover {
    opacity: 0.8;
}

.logo-icon {
    width: 40px;
    height: 48px;
    font-size: 32px;
}

.logo-text {
 font-size: 15px;
 font-weight: 600;
 color: var(--color-white);
}

.nav-menu {
    display: none;
    list-style: none;
    gap: var(--spacing-md);
    align-items: center;
}

.nav-menu li a {
    color: var(--color-white);
    text-decoration: none;
    font-size: 15px;
    font-weight: 300;
    transition: var(--transition-fast);
    position: relative;
    padding: 6px 20px;
}

.nav-menu li a:hover {
    color: var(--color-primary);
}

.btn-cta-header-alt {
    background-color: var(--color-primary);
    color: var(--color-black);
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
}

.btn-cta-header-alt:hover {
    background-color: #ffed4e;
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.btn-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.btn-cta-icon svg {
    width: 100%;
    height: 100%;
    /*fill: currentColor;*/
}

.btn-cta-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-black);
}

.btn-cta-header {
    background-color: var(--color-primary);
    color: var(--color-black);
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cta-header:hover {
    background-color: #FFC700;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 214, 0, 0.3);
}

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    background: none;
    border: none;
    z-index: 1001;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background-color: var(--color-primary);
    transition: var(--transition-normal);
    border-radius: 2px;
}

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

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

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

.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 400px;
    height: 100vh;
    background-color: #1A1A1A;
    padding: 80px var(--spacing-md) var(--spacing-md);
    transition: var(--transition-normal);
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    z-index: 1001;
}

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

.mobile-menu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.mobile-menu ul li a {
    color: var(--color-white);
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    display: block;
    padding: 12px 0;
    transition: var(--transition-fast);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1002;
    pointer-events: auto;
    padding-left: 15px !important;
}

.mobile-menu ul li a:hover {
    color: var(--color-primary);
    padding-left: 20px;
}

.mobile-menu .btn-cta-header-alt {
    margin-top: var(--spacing-md);
    justify-content: center;
    position: relative;
    z-index: 1002;
    pointer-events: auto;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-normal);
    z-index: 998;
    pointer-events: none;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ========================================
   HERO SECTION
======================================== */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding-top: 2%;
    /*padding-bottom: var(--spacing-2xl);*/
    padding-bottom: 0;
    background-color: var(--color-black);
}

.hero-container {
    max-width: clamp(600px, 79.75vw, 1260px);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    align-items: center;
    width: 100%;
    margin-bottom: var(--spacing-2xl);
    position: relative;
}

.hero-cta-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.hero-content {
    order: 1;
}

.hero-subtitle {
    font-size: clamp(28px, 2.53vw + 0.2px, 40px);
    font-weight: 300;
    color: var(--color-primary);
    margin-bottom: 8px;
    line-height: 1.2;
}

.hero-title {
    font-size: clamp(40px, 3.99vw + 0.1px, 63px);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.1;
    margin-bottom: 16px;
}

.hero-underline {
    width: clamp(50px, 4.43vw, 70px);
    height: clamp(8px, 0.76vw, 12px);
    background-color: var(--color-white);
    margin-bottom: 20px;
}

.hero-description {
    font-size: clamp(18px, 1.28vw + 0.1px, 23px);
    color: var(--color-white);
    line-height: 1.2;
    margin-bottom: 0;
    opacity: 0.9;
    font-weight: 300;
}

.hero-image {
    order: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    /*filter: grayscale(100%);*/
    object-fit: cover;
    display: block;
}

.about-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.about-carousel {
    width: 100%;
    max-width: 100%;
}

.about-carousel .owl-stage {
    display: flex;
    width: 100%;
}

.about-carousel .owl-stage-outer {
    overflow: hidden;
    width: 100%;
}

.about-carousel-item {
    width: 100% !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

/* Forzar que solo se vea 1 item a la vez */
.about-carousel .owl-item {
    width: 100% !important;
}

.about-carousel-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    display: block;
}

.cta-box {
    background-color: var(--color-dark-gray);
    border-radius: 16px;
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: center;
    justify-content: center;
    max-width: 900px;
    width: 100%;
}

.cta-box-text {
    font-size: 20px;
    font-weight: 400;
    color: var(--color-white);
    line-height: 1.4;
    text-align: center;
}


.btn-cta-whatsapp {
    background-color: var(--color-primary);
    color: var(--color-black);
    padding: 16px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: none;
    cursor: pointer;
}

.btn-cta-whatsapp:hover {
    background-color: #FFC700;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 214, 0, 0.4);
}

.btn-cta-whatsapp:active {
    transform: translateY(0);
}

.whatsapp-icon {
    width: 24px;
    height: 24px;
    font-size: 24px;
}


.x-widget {
    display: inline-block; width: 100%; margin-top: -5%; z-index: 2;
}

.x-widget-limit {
    max-width: clamp(600px, 79.75vw, 1260px);
    margin: 0 auto;
    width: 100%;
}

.x-cta-container {
    position: relative;
    width: clamp(90%, 80%, 80%);
    margin: 0 auto;
    background: #383838;
    border-radius: 50px;
    padding: clamp(15px, 1.27vw, 20px) 10px clamp(15px, 1.27vw, 20px) clamp(25px, 2.53vw, 40px);
    overflow: visible;
    max-width: clamp(600px, 64.81vw, 1024px);
}

.x-cta-content {
    position: relative;
    width: 100%;
    height: clamp(50px, 3.8vw, 60px);
}

.x-cta-text {
    position: relative;
    float: left;
    width: calc(100% - clamp(240px, 17.72vw, 280px));
    padding-right: clamp(15px, 1.27vw, 20px);
}

.x-cta-heading {
    color: #ffffff;
    font-size: clamp(18px, 1.77vw + 0.1px, 28px);
    font-weight: 400;
    line-height: 1.15;
    padding-left: clamp(20px, 2.53vw, 40px);
    margin-top: -5px;
}

.x-cta-button-wrapper {
    position: absolute;
    top: -20px;
    right: -10px;
    width: 35%;
    height: clamp(70px, 6.33vw, 100px);
    max-width: clamp(240px, 20.25vw, 320px);
    min-width: 240px;
}

.x-cta-button {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #FFCD00;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: block;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.x-cta-button:hover {
    background: #ffed4e;
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
}

.x-cta-button-content {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
}

.x-cta-icon {
    position: absolute;
    left: clamp(20px, 2.22vw, 35px);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(28px, 2.41vw, 38px);
    height: clamp(28px, 2.41vw, 38px);
}

.x-cta-icon svg {
    width: 100%;
    height: 100%;
    fill: #000000;
}

.x-cta-button-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #000000;
    font-size: clamp(18px, 1.65vw + 0.1px, 26px);
    font-weight: 400;
    white-space: nowrap;
    padding-left: clamp(15px, 1.9vw, 30px);
    letter-spacing: 0.3px;
}

.x-cta-clearfix::after {
    content: "";
    display: table;
    clear: both;
}

@media screen and (max-width: 480px) {
    .logos-track {
        zoom: 2.1;
    }
    
    .x-cta-button-text {
        font-weight: 700;
    }
    
    .testimonial-text-c {
      min-height: 230px;
      max-height: 320px;
    }
    
    /*
    .accordion-title {
        white-space: nowrap;
    }*/
    
}

/* Responsive - x-cta */
@media (max-width: 767px) {
    .x-widget {
        margin-top: -3%;
    }

    .x-widget-limit {
        max-width: 100%;
        padding: 0 var(--spacing-md);
    }

    .x-cta-container {
        border-radius: 35px;
        padding: clamp(15px, 3vw, 20px) 10px clamp(15px, 3vw, 20px) clamp(20px, 4vw, 25px);
        width: 100%;
        max-width: 100%;
    }

    .x-cta-content {
        height: auto;
    }

    .x-cta-text {
        float: none;
        width: 100%;
        margin-bottom: 15px;
        padding-right: 0;
    }

    .x-cta-heading {
        /*font-size: clamp(16px, 4vw, 18px);*/
        font-size: clamp(20px, 5vw, 23px);
        margin-top: 0;
        padding-left: 0;
    }

    .x-cta-button-wrapper {
        position: relative;
        top: 0;
        right: 0;
        float: none;
        width: 100%;
        height: clamp(60px, 12vw, 70px);
        margin: 10px 0 -10px 0;
        max-width: 100%;
        min-width: auto;
    }

    .x-cta-button {
        border-radius: 35px;
        height: clamp(60px, 12vw, 70px);
    }

    .x-cta-button-text {
        font-size: clamp(20px, 5vw, 24px);
        font-weight: 700;
        padding-left: clamp(12px, 3vw, 15px);
    }

    .x-cta-icon {
        left: clamp(20px, 4vw, 25px);
        width: clamp(28px, 6vw, 32px);
        height: clamp(28px, 6vw, 32px);
    }
}

/* ========================================
   ABOUT SECTION (Estrategia de marca)
======================================== */
.about-section {
    background-color: var(--color-black);
    padding: var(--spacing-3xl) 0 var(--spacing-2xl) 0;
}

.about-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
    align-items: start;
}

.about-image {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.about-image img,
.about-image-img {
    width: 100%;
    max-width: clamp(350px, 28.5vw, 480px);
    height: auto;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.about-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 90%;
    max-width: 100%;
}

.about-title {
    font-size: clamp(28px, 2.28vw + 0.3px, 42px);
    font-weight: 500;
    color: var(--color-white);
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
}

.about-text {
    font-size: clamp(15px, 1.07vw + 0.1px, 20px);
    font-weight: 300;
    color: var(--color-white);
    line-height: 1.4;
    opacity: 0.9;
    margin-bottom: var(--spacing-sm);
}

.about-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
    transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-stats .stat-card {
    width: 95%;
    max-width: 100%;
    /*background-color: rgba(255, 255, 255, 0.5);*/
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.stat-card h3 {
    font-size: clamp(22px, 1.77vw + 0.2px, 32px);
    font-weight: 500;
    color: var(--color-white);
    margin-bottom: var(--spacing-xs);
}

.stat-card p {
    font-size: clamp(15px, 1.07vw + 0.1px, 19px);
    font-weight: 300;
    color: var(--color-white);
    line-height: 1.4;
    opacity: 0.9;
    margin-bottom: var(--spacing-xs);
}

.stat-number {
    font-size: clamp(56px, 5.06vw + 0px, 92px);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-top: var(--spacing-xs);
}

.stat-label {
    font-size: clamp(14px, 1.01vw + 0.04px, 18px);
    font-weight: 300;
    color: var(--color-white);
    opacity: 0.9;
    line-height: 1.5;
}

/* ========================================
   BOTÓN VER MÁS - Solo visible en móviles
======================================== */
.btn-ver-mas {
    display: none;
    align-items: center;
    justify-content: end;
    gap: 8px;
    margin: 39px 0 0;
    text-align: right;
    padding: 0;
    background-color: transparent;
    color: var(--color-primary);
    border: none;
    font-size: 21px;
    font-weight: 400;
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-ver-mas:active {
    transform: translateY(0);
}

.btn-ver-mas-icon {
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.btn-ver-mas-icon svg {
    width: 16px;
    height: 16px;
}

/* Rotar icono cuando está expandido */
.btn-ver-mas.expanded .btn-ver-mas-icon {
    transform: rotate(180deg);
}

/* ========================================
SERVICES SECTION (Acordeon)
======================================== */
.services-section {
    background-color: #F5F5F0;
    padding: var(--spacing-3xl) 0;
}

.services-container {
    max-width: clamp(600px, 56.96vw, 900px);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.services-title {
    font-size: clamp(32px, 3.42vw + 0.1px, 54px);
    font-weight: 500;
    color: var(--color-black);
    text-align: center;
    margin-top: clamp(15px, 1.58vw, 25px);
    margin-bottom: var(--spacing-2xl);
}

/* Acordeón */
.accordion {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.accordion-item {
    background-color: #FFE700;
    border-radius: 24px;
    overflow: visible;
    transition: var(--transition-normal);
    position: relative;
}

.accordion-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    padding-left: clamp(32px, 2.91vw, 46px);
    cursor: pointer;
    position: relative;
}

.accordion-number {
    position: absolute;
    left: clamp(-20px, -1.58vw, -25px);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(48px, 3.29vw, 52px);
    height: clamp(48px, 3.29vw, 52px);
    background-color: var(--color-black);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(24px, 1.65vw + 0.1px, 26px);
    font-weight: 600;
    z-index: 2;
}

.accordion-title-wrapper {
    flex: 1;
}

.accordion-title {
    font-size: clamp(20px, 1.9vw + 0.1px, 30px);
    font-weight: 600;
    color: var(--color-black);
    margin: 0;
    letter-spacing: 0.2px;
}

.accordion-toggle {
    width: clamp(36px, 2.53vw, 40px);
    height: clamp(36px, 2.53vw, 40px);
    background-color: transparent;
    border: 2px solid var(--color-black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.accordion-toggle:hover {
    background-color: var(--color-black);
    color: var(--color-white);
}

.toggle-icon {
    font-size: clamp(24px, 1.77vw + 0.1px, 28px);
    font-weight: 400;
    color: var(--color-black);
    line-height: 1;
    transition: var(--transition-fast);
}

.accordion-toggle:hover .toggle-icon {
    color: var(--color-white);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    padding: 0 var(--spacing-lg);
    padding-left: clamp(32px, 2.91vw, 46px);
}

.accordion-item.active {
    background-color: var(--color-primary);
}

.accordion-item.active .accordion-number {
    /*top: clamp(30%, 35%, 35%);*/
    /*top: clamp(10%, 12%, 14%);*/
    top: clamp(55px, 58px, 68px);
}

.accordion-item.active .accordion-header {
    padding-bottom: clamp(8px, 0.63vw, 10px);
}

.accordion-item.active .accordion-content {
    max-height: 1000px;
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    padding-left: clamp(32px, 2.91vw, 46px);
}

.accordion-subtitle {
    font-size: clamp(18px, 1.27vw + 0.1px, 20px);
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: var(--spacing-sm);
}

.accordion-description {
    font-size: clamp(16px, 1.2vw + 0.1px, 19px);
    color: var(--color-black);
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    font-weight: 300;
}

.accordion-description b {
    font-weight: 500;
}

.accordion-list-title {
    font-size: clamp(16px, 1.14vw + 0.1px, 18px);
    font-weight: 500;
    color: var(--color-black);
    margin: var(--spacing-md) 0 var(--spacing-sm);
}

.accordion-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-lg);
}

.accordion-list li {
    font-weight: 300;
    font-size: clamp(16px, 1.2vw + 0.1px, 19px);
    color: var(--color-black);
    line-height: 1.25;
    padding-left: clamp(24px, 1.77vw, 28px);
    position: relative;
    margin-bottom: 8px;
}

.accordion-list li::before {
    content: '●';
    position: absolute;
    left: clamp(6px, 0.51vw, 8px);
    font-size: clamp(18px, 1.27vw, 20px);
    color: var(--color-black);
}

.accordion-cta {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: var(--spacing-md);
 margin-top: var(--spacing-md);
 flex-wrap: wrap;
 float: right;
 /* max-width: 1000px; */
}

.cta-text {
    padding-right: 20px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-black);
}

.btn-accordion {
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 12px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 400;
    font-size: 19px;
    transition: var(--transition-fast);
    display: inline-block;
    letter-spacing: 0.2px;
}

.btn-accordion:hover {
    background-color: #333333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}



/* ========================================
   RESPONSIVE
======================================== */
@media (min-width: 768px) {
    .hamburger {
        display: none;
    }

    .nav-menu {
        display: flex;
    }

    .mobile-menu {
        display: none;
    }

    .hero-container {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-2xl);
    }

    .hero-content {
        order: 1;
    }

    .hero-image {
        order: 2;
    }

    .cta-box {
        flex-direction: row;
        align-items: center;
        padding: var(--spacing-md) var(--spacing-lg);
        gap: var(--spacing-lg);
    }

    .cta-box-text {
        flex: 1;
        text-align: left;
    }

    .about-container {
        grid-template-columns: 3fr 7fr;
        gap: var(--spacing-2xl);
        align-items: start;
    }

    .about-stats {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-lg);
        margin-top: 15px;
    }
    
}



@media (min-width: 768px) and (max-width: 1023px) {
    .x-widget-limit {
        max-width: clamp(700px, 79.75vw, 1100px);
    }

    .hero-container {
        max-width: clamp(700px, 79.75vw, 1100px);
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .hero-subtitle {
        font-size: clamp(32px, 2.53vw, 38px);
    }

    .hero-title {
        font-size: clamp(54px, 3.99vw, 63px);
    }

    .hero-description {
        font-size: clamp(18px, 1.27vw, 20px);
    }

    .x-cta-heading {
        font-size: clamp(22px, 1.77vw, 26px);
    }

    .x-cta-button-text {
        font-size: clamp(20px, 1.65vw, 24px);
    }
}

@media (min-width: 1200px) and (max-width: 1580px) {
    .x-widget-limit {
        max-width: clamp(1100px, 79.75vw, 1200px);
    }

    .hero-container {
        max-width: clamp(1100px, 79.75vw, 1200px);
    }
}

@media (min-width: 1581px) {
    .x-widget-limit {
        max-width: 1260px;
    }

    .hero-container {
        max-width: 1260px;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .about-content {
        width: 92%;
    }

    .about-title {
        font-size: clamp(32px, 2.28vw + 0.3px, 36px);
        font-weight: 500;
        margin-bottom: var(--spacing-sm);
    }

    .about-text {
        font-size: clamp(17px, 1.26vw + 0.04px, 19px);
        font-weight: 300;
        margin-bottom: var(--spacing-sm);
    }

    .stat-card h3 {
        font-size: clamp(24px, 1.77vw + 0.2px, 28px);
    }

    .stat-card p {
        font-size: clamp(16px, 1.07vw + 0.1px, 17px);
    }

    .stat-number {
        font-size: clamp(64px, 5.06vw + 0px, 80px);
    }

    .stat-label {
        font-size: clamp(15px, 1.01vw + 0.04px, 16px);
    }

    .about-stats .stat-card {
        width: 96%;
    }
}

@media (min-width: 1200px) and (max-width: 1580px) {
    .about-content {
        width: 91%;
    }

    .about-title {
        font-size: clamp(34px, 2.28vw, 36px);
    }

    .about-text {
        font-size: clamp(17px, 1.07vw, 18px);
    }

    .stat-card h3 {
        font-size: clamp(26px, 1.77vw, 28px);
    }

    .stat-card p {
        font-size: clamp(16px, 1.07vw, 17px);
    }

    .stat-number {
        font-size: clamp(72px, 5.06vw, 80px);
    }

    .stat-label {
        font-size: clamp(15px, 1.01vw, 16px);
    }

    .about-stats .stat-card {
        width: 95%;
    }
}

@media (min-width: 1581px) {
    .about-content {
        width: 90%;
    }

    .about-title {
        font-size: clamp(36px, 2.28vw, 42px);
    }

    .about-text {
        font-size: clamp(18px, 1.07vw, 20px);
    }

    .stat-card h3 {
        font-size: clamp(28px, 1.77vw, 32px);
    }

    .stat-card p {
        font-size: clamp(17px, 1.07vw, 19px);
    }

    .stat-number {
        font-size: clamp(80px, 5.06vw, 92px);
    }

    .stat-label {
        font-size: clamp(16px, 1.01vw, 18px);
    }

    .about-stats .stat-card {
        width: 95%;
    }

    .about-image img,
    .about-image-img {
        max-width: clamp(450px, 28.5vw, 520px);
    }
}

@media (max-width: 767px) {
    .nav-container {
        padding: 0 var(--spacing-md);
    }

    .hero-container {
        padding: 0 var(--spacing-md);
    }

    .hero-container {
        margin-bottom: var(--spacing-xl);
    }

    .hero-cta-wrapper {
        padding: 0 var(--spacing-md);
        margin-top: 0;
    }

    .hero-subtitle {
        font-size: clamp(22px, 4vw, 28px);
    }

    .hero-title {
        font-size: clamp(32px, 6vw, 45px);
    }

    .hero-description {
        font-size: clamp(15px, 3vw, 18px);
    }

    .hero-underline {
        width: clamp(45px, 8vw, 60px);
        height: clamp(6px, 1.2vw, 10px);
    }

    .cta-box {
        flex-direction: column;
        align-items: center;
        padding: var(--spacing-lg);
        gap: var(--spacing-md);
    }

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

    .btn-cta-whatsapp {
        width: 100%;
        justify-content: center;
    }

    .about-container {
        padding: 0 var(--spacing-md);
    }

    .about-content {
        width: 100%;
        gap: var(--spacing-sm);
    }

    .about-title {
        font-size: clamp(28px, 4.5vw, 32px);
        font-weight: 500;
        margin-bottom: var(--spacing-sm);
    }

    .about-text {
        font-size: clamp(15px, 2.5vw, 17px);
        font-weight: 300;
        margin-bottom: var(--spacing-sm);
    }

    .about-stats {
        margin-top: var(--spacing-sm);
        gap: var(--spacing-md);
    }

    .about-stats .stat-card {
        width: 100%;
    }

    .stat-number {
        font-size: clamp(56px, 10vw, 72px);
        font-weight: 700;
        margin-top: var(--spacing-xs);
    }

    .stat-card h3 {
        font-size: clamp(22px, 4vw, 26px);
        font-weight: 500;
        margin-bottom: var(--spacing-xs);
    }

    .stat-card p {
        font-size: clamp(15px, 2.5vw, 17px);
        font-weight: 300;
        margin-bottom: var(--spacing-xs);
    }

    .stat-label {
        font-size: clamp(14px, 2.2vw, 16px);
        font-weight: 300;
    }

    /* ========================================
       VER MÁS - Estilos solo para móviles
    ======================================== */
    
    /* Mostrar botón solo en móviles */
    .btn-ver-mas {
        display: flex;
    }

    /* Ocultar las cards colapsables en mobile - se mostrarán en el modal */
    .collapsible-card {
        display: none;
    }

    /* Mantener solo los números y labels visibles en mobile */
    .about-stats.collapsed {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-stats:not(.collapsed) {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive */
@media (min-width: 768px) and (max-width: 1023px) {
    .services-container {
        max-width: clamp(700px, 56.96vw, 850px);
    }

    .accordion-header {
        padding-left: clamp(28px, 2.91vw, 40px);
    }

    .accordion-content,
    .accordion-item.active .accordion-content {
        padding-left: clamp(28px, 2.91vw, 40px);
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .services-container {
        max-width: clamp(800px, 56.96vw, 880px);
    }
}

@media (min-width: 1200px) and (max-width: 1580px) {
    .services-container {
        max-width: clamp(850px, 56.96vw, 900px);
    }
}

@media (min-width: 1581px) {
    .services-container {
        max-width: 900px;
    }

    .accordion-header,
    .accordion-content,
    .accordion-item.active .accordion-content {
        padding-left: 46px;
    }
}

@media (max-width: 767px) {
    .services-container {
        padding: 0 var(--spacing-md);
        max-width: 100%;
    }

    .accordion {
        padding-left: clamp(35px, 8vw, 45px);
    }

    .accordion-header {
        padding: var(--spacing-md);
        padding-left: clamp(24px, 6vw, 32px);
    }

    .accordion-number {
        left: clamp(-18px, -4vw, -20px);
    }

    .accordion-content,
    .accordion-item.active .accordion-content {
        padding: 0 var(--spacing-md);
        padding-left: clamp(24px, 6vw, 32px);
    }

    .accordion-cta {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-accordion {
        text-align: center;
        font-weight: 700;
    }
}

/* ========================================
PORTFOLIO VIDEO SECTION
======================================== */
.portfolio-video-section {
  background-color: #000000;
  padding: var(--spacing-xl) 0 0 0;
  position: relative;
}

.portfolio-video-container {
    max-width: clamp(600px, 88.61vw, 1400px);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
}

.portfolio-content {
    display: flex;
    align-items: center;
}

.portfolio-title {
    font-size: clamp(32px, 3.04vw + 0.1px, 48px);
    font-weight: 300;
    color: var(--color-white);
    line-height: 1.1;
    padding-left: clamp(0%, 30%, 30%);
}

.portfolio-title-bold {
    font-weight: 500;
    display: block;
}

.portfolio-video-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.video-play-button {
    width: clamp(220px, 30.38vw, 480px);
    height: clamp(220px, 30.38vw, 480px);
    background-color: var(--color-primary);
    border: none;
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: 0 10px 30px rgba(255, 214, 0, 0.3);
    margin-bottom: clamp(-60px, -3.8vw, -80px);
}

.video-play-button:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(255, 214, 0, 0.4);
}

.video-play-button:active {
    transform: scale(0.98);
}

.play-icon {
    width: clamp(50px, 5.06vw, 80px);
    height: clamp(50px, 5.06vw, 80px);
    color: var(--color-black);
}

/* ========================================
TESTIMONIALS SECTION
======================================== */
.testimonials-section {
    background-color: var(--color-black);
    padding: var(--spacing-2xl) 0;
}

.testimonials-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.testimonials-title {
    font-size: 52px;
    font-weight: 500;
    color: var(--color-white);
    text-align: center;
    margin-bottom: var(--spacing-sm);
    line-height: 1.2;
}

.testimonials-subtitle {
    font-weight: 200;
    display: block;
    /*opacity: 0.9;*/
}

.testimonials-carousel-wrapper {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.testimonials-carousel {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.testimonials-carousel .owl-item {
    padding: 0 8px;
}

.testimonials-carousel .owl-dots {
    margin-top: var(--spacing-xl);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.testimonials-carousel .owl-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3) !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
    display: inline-block;
    border: none;
    outline: none;
}

.testimonials-carousel .owl-dot span {
    display: none !important;
}

.testimonials-carousel .owl-dot.active {
    background-color: var(--color-white) !important;
}

.testimonials-carousel .owl-dot:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.6) !important;
}

.testimonials-carousel .owl-dot.active:hover {
    background-color: var(--color-white) !important;
}

.testimonial-card {
    background-color: transparent;
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.testimonial-quote {
    font-size: 17px;
    font-weight: 500;
    color: var(--color-white);
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
}

.testimonial-text-c {
    min-height: 230px;
    max-height: 260px;
    overflow: hidden;
}

.testimonial-text {
 font-size: 15px;
 color: var(--color-white);
 line-height: 1.7;
 margin-bottom: var(--spacing-md);
 opacity: 0.9;
 font-weight: 300;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: auto;
    padding-top: var(--spacing-lg);
}

#testimonialsCarousel .author-image {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.author-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 10px;
}

.author-name {
    font-size: 17px;
    font-weight: 500;
    color: var(--color-white);
}

.author-role {
    font-size: 15px;
    font-weight: 300;
    color: var(--color-white);
    opacity: 0.7;
}


/* ========================================
VIDEO MODAL
======================================== */
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.video-modal.active {
    display: flex;
}

.video-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    cursor: pointer;
}

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 1200px;
    z-index: 10000;
}

.video-modal-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 48px;
    cursor: pointer;
    transition: var(--transition-fast);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-modal-close:hover {
    color: var(--color-primary);
    transform: rotate(90deg);
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    background-color: var(--color-black);
    border-radius: 8px;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ========================================
CONTACT MODAL (FORMULARIO)
======================================== */
.contact-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.contact-modal.active {
    display: flex;
}

.contact-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    cursor: pointer;
}

.contact-modal-content {
    position: relative;
    width: 100%;
    max-width: 520px;
    background-color: #1a1a1a;
    border-radius: 32px;
    padding: clamp(28px, 3.6vw, 40px) clamp(24px, 3.1vw, 36px);
    z-index: 10001;
    /*max-height: 90vh;*/
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    zoom: 0.8;
}

.contact-modal-close {
    position: absolute;
    top: clamp(16px, 2.1vw, 24px);
    right: clamp(16px, 2.1vw, 24px);
    background: none;
    border: none;
    color: var(--color-white);
    font-size: clamp(28px, 3.6vw, 36px);
    cursor: pointer;
    transition: var(--transition-fast);
    width: clamp(32px, 4.2vw, 40px);
    height: clamp(32px, 4.2vw, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-weight: 300;
}

.contact-modal-close:hover {
    color: var(--color-primary);
    transform: rotate(90deg);
}

.contact-modal-header {
    margin-bottom: clamp(20px, 2.6vw, 28px);
    text-align: center;
}

.contact-modal-title {
    font-size: clamp(24px, 3.1vw, 32px);
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 clamp(6px, 0.78vw, 10px) 0;
    line-height: 1.2;
}

.contact-modal-subtitle {
    font-size: clamp(14px, 1.82vw, 18px);
    font-weight: 400;
    color: #cccccc;
    margin: 0;
    line-height: 1.4;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.56vw, 16px);
}

.form-field {
    width: 100%;
}

.form-field input {
    width: 100%;
    padding: clamp(12px, 1.56vw, 15px) clamp(16px, 2.08vw, 20px);
    background-color: #4a4a4a;
    border: none;
    border-radius: 12px;
    color: var(--color-white);
    font-size: clamp(14px, 1.82vw, 16px);
    font-weight: 400;
    font-family: var(--font-primary);
    transition: var(--transition-fast);
    box-sizing: border-box;
}

.form-field input::placeholder {
    color: var(--color-white);
    opacity: 0.8;
}

.form-field input:focus {
    outline: none;
    background-color: #555555;
    box-shadow: 0 0 0 2px var(--color-primary);
}

.form-field input:focus::placeholder {
    opacity: 0.5;
}

.form-submit-btn {
    width: 100%;
    padding: clamp(14px, 1.82vw, 18px) clamp(20px, 2.6vw, 28px);
    background-color: #FFD700;
    border: none;
    border-radius: 12px;
    color: #000000;
    font-size: clamp(15px, 1.95vw, 18px);
    font-weight: 700;
    font-family: var(--font-primary);
    cursor: pointer;
    transition: var(--transition-fast);
    margin-top: clamp(6px, 0.78vw, 10px);
}

.form-submit-btn:hover {
    background-color: #ffed4e;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

.form-submit-btn:active {
    transform: translateY(0);
}

/* Contact Modal Responsive */
/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .contact-modal {
        padding: clamp(20px, 2.6vw, 30px);
    }

    .contact-modal-content {
        max-width: clamp(450px, 58.6vw, 520px);
        padding: clamp(32px, 4.17vw, 40px) clamp(28px, 3.65vw, 36px);
        border-radius: clamp(28px, 3.65vw, 32px);
    }

    .contact-modal-close {
        top: clamp(16px, 2.08vw, 20px);
        right: clamp(16px, 2.08vw, 20px);
        font-size: clamp(28px, 3.65vw, 32px);
        width: clamp(32px, 4.17vw, 36px);
        height: clamp(32px, 4.17vw, 36px);
    }

    .contact-modal-header {
        margin-bottom: clamp(18px, 2.34vw, 24px);
    }

    .contact-modal-title {
        font-size: clamp(22px, 2.86vw, 28px);
        margin-bottom: clamp(6px, 0.78vw, 8px);
    }

    .contact-modal-subtitle {
        font-size: clamp(13px, 1.69vw, 16px);
    }

    .contact-form {
        gap: clamp(12px, 1.56vw, 14px);
    }

    .form-field input {
        padding: clamp(12px, 1.56vw, 14px) clamp(16px, 2.08vw, 18px);
        font-size: clamp(14px, 1.82vw, 15px);
        border-radius: clamp(10px, 1.3vw, 12px);
    }

    .form-submit-btn {
        padding: clamp(13px, 1.69vw, 16px) clamp(20px, 2.6vw, 24px);
        font-size: clamp(14px, 1.82vw, 16px);
        border-radius: clamp(10px, 1.3vw, 12px);
    }
}

/* Móvil (< 768px) */
@media (max-width: 767px) {
    .contact-modal {
        padding: clamp(10px, 2.6vw, 20px);
        align-items: flex-start;
        padding-top: clamp(20px, 5.2vw, 40px);
        padding-bottom: clamp(20px, 5.2vw, 40px);
    }

    .contact-modal-content {
        border-radius: clamp(24px, 6.25vw, 32px);
        padding: clamp(28px, 7.3vw, 40px) clamp(20px, 5.2vw, 28px);
        max-height: calc(100vh - clamp(30px, 7.8vw, 60px));
        width: 100%;
        margin: 0 auto;
    }

    .contact-modal-close {
        top: clamp(12px, 3.13vw, 18px);
        right: clamp(12px, 3.13vw, 18px);
        font-size: clamp(24px, 6.25vw, 32px);
        width: clamp(28px, 7.29vw, 36px);
        height: clamp(28px, 7.29vw, 36px);
    }

    .contact-modal-header {
        margin-bottom: clamp(18px, 4.69vw, 24px);
    }

    .contact-modal-title {
        font-size: clamp(20px, 5.21vw, 26px);
        margin-bottom: clamp(5px, 1.3vw, 8px);
        line-height: 1.15;
    }

    .contact-modal-subtitle {
        font-size: clamp(13px, 3.39vw, 16px);
        line-height: 1.3;
    }

    .contact-form {
        gap: clamp(10px, 2.6vw, 14px);
    }

    .form-field input {
        padding: clamp(12px, 3.13vw, 15px) clamp(14px, 3.65vw, 18px);
        font-size: clamp(14px, 3.65vw, 15px);
        border-radius: clamp(10px, 2.6vw, 12px);
    }

    .form-field input::placeholder {
        font-size: clamp(14px, 3.65vw, 15px);
    }

    .form-submit-btn {
        padding: clamp(13px, 3.39vw, 16px) clamp(20px, 5.21vw, 26px);
        font-size: clamp(14px, 3.65vw, 16px);
        border-radius: clamp(10px, 2.6vw, 12px);
        margin-top: clamp(6px, 1.56vw, 10px);
    }
}

/* Móvil muy pequeño (< 480px) */
@media (max-width: 480px) {
    .contact-modal {
        padding: clamp(8px, 2.08vw, 15px);
        padding-top: clamp(15px, 3.9vw, 30px);
        padding-bottom: clamp(15px, 3.9vw, 30px);
    }

    .contact-modal-content {
        padding: clamp(24px, 6.25vw, 32px) clamp(18px, 4.69vw, 24px);
        border-radius: clamp(20px, 5.21vw, 28px);
        max-height: calc(100vh - clamp(24px, 6.25vw, 48px));
        zoom: 1;
    }

    .contact-modal-close {
        top: clamp(10px, 2.6vw, 16px);
        right: clamp(10px, 2.6vw, 16px);
        font-size: clamp(22px, 5.73vw, 28px);
        width: clamp(26px, 6.77vw, 32px);
        height: clamp(26px, 6.77vw, 32px);
    }

    .contact-modal-header {
        margin-bottom: clamp(16px, 4.17vw, 20px);
    }

    .contact-modal-title {
        font-size: clamp(18px, 4.69vw, 24px);
        margin-bottom: clamp(4px, 1.04vw, 6px);
    }

    .contact-modal-subtitle {
        font-size: clamp(12px, 3.13vw, 14px);
    }

    .contact-form {
        gap: clamp(10px, 2.6vw, 12px);
    }

    .form-field input {
        padding: clamp(11px, 2.86vw, 14px) clamp(14px, 3.65vw, 18px);
        font-size: clamp(13px, 3.39vw, 15px);
        border-radius: clamp(10px, 2.6vw, 12px);
    }

    .form-field input::placeholder {
        font-size: clamp(13px, 3.39vw, 15px);
    }

    .form-submit-btn {
        padding: clamp(12px, 3.13vw, 15px) clamp(18px, 4.69vw, 24px);
        font-size: clamp(13px, 3.39vw, 15px);
        border-radius: clamp(10px, 2.6vw, 12px);
        margin-top: clamp(6px, 1.56vw, 8px);
    }
}

/* ========================================
RESPONSIVE
======================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .portfolio-video-container {
        max-width: clamp(700px, 88.61vw, 1100px);
    }

    .portfolio-title {
        padding-left: clamp(0%, 25%, 25%);
    }
}

@media (max-width: 1024px) {
    .portfolio-video-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        text-align: center;
    }

    .portfolio-content {
        justify-content: center;
    }

    .portfolio-title {
        padding-left: 0;
        text-align: center;
    }

    .video-play-button {
        width: clamp(240px, 35vw, 320px);
        height: clamp(240px, 35vw, 320px);
        margin-bottom: clamp(-40px, -5vw, -50px);
    }

    .play-icon {
        width: clamp(55px, 6vw, 70px);
        height: clamp(55px, 6vw, 70px);
    }

}

@media (min-width: 1024px) and (max-width: 1199px) {
    .portfolio-title {
        font-size: clamp(40px, 3.04vw, 46px);
        padding-left: clamp(25%, 28%, 30%);
    }

    .video-play-button {
        width: clamp(380px, 30.38vw, 440px);
        height: clamp(380px, 30.38vw, 440px);
        margin-bottom: clamp(-55px, -3.8vw, -60px);
    }

    .play-icon {
        width: clamp(70px, 5.06vw, 75px);
        height: clamp(70px, 5.06vw, 75px);
    }
}

@media (min-width: 1200px) and (max-width: 1580px) {
    .portfolio-video-container {
        max-width: clamp(1100px, 88.61vw, 1350px);
    }

    .portfolio-title {
        padding-left: clamp(28%, 29%, 30%);
    }
}

@media (min-width: 1581px) {
    .portfolio-video-container {
        max-width: 1400px;
    }

    .portfolio-title {
        padding-left: 30%;
    }
}

@media (max-width: 767px) {

    .portfolio-video-section,
    .testimonials-section {
        padding: var(--spacing-2xl) 0;
    }

    .portfolio-video-container,
    .testimonials-container {
        padding: 0 var(--spacing-md);
    }

    .portfolio-title,
    .testimonials-title {
        font-size: clamp(28px, 5vw, 36px);
        padding-left: 0;
    }

    .video-play-button {
        width: clamp(200px, 35vw, 240px);
        height: clamp(200px, 35vw, 240px);
        margin-bottom: clamp(-30px, -5vw, -40px);
    }

    .play-icon {
        width: clamp(45px, 8vw, 55px);
        height: clamp(45px, 8vw, 55px);
    }

    .testimonial-quote {
        font-size: 20px;
    }
    
    .testimonial-text-c {
      min-height: 230px;
      max-height: 350px;
   }

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

    .video-modal-content {
        width: 95%;
    }

    .video-modal-close {
        top: -40px;
        font-size: 36px;
    }
}

/* ========================================
    CLIENTS LOGOS CAROUSEL
    ======================================== */
.clients-section {
    /*background-color: #F5F5F0;*/
    background-color: #FFFFFF;
    padding: var(--spacing-xl) 0;
    overflow: hidden;
}

.clients-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.clients-title {
    font-size: 54px;
    font-weight: 500;
    color: var(--color-black);
    text-align: center;
    margin-bottom: var(--spacing-sm);
    line-height: 1.2;
}

.clients-subtitle {
    font-weight: 200;
}

/* Carousel */
.logos-carousel {
    margin-top: var(--spacing-xl);
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* Gradientes laterales para efecto fade */
.logos-carousel::before,
.logos-carousel::after {
    content: '';
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.logos-carousel::before {
    left: 0;
    background: linear-gradient(to right, #F5F5F0 0%, transparent 100%);
}

.logos-carousel::after {
    right: 0;
    background: linear-gradient(to left, #F5F5F0 0%, transparent 100%);
}

.logos-track {
    display: flex;
    gap: var(--spacing-2xl);
    animation: scroll 25s linear infinite;
    width: max-content;
}

/* Pausar animación al hover */
.logos-track:hover {
    animation-play-state: paused;
}

.logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    height: 80px;
    padding: var(--spacing-md);
}

.logo-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: var(--transition-fast);
}

.logo-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

/* Animación de scroll infinito */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ========================================
    RESPONSIVE
    ======================================== */
@media (max-width: 767px) {
    .clients-section {
        padding: var(--spacing-xl) 0;
    }

    .clients-container {
        padding: 0 var(--spacing-md);
    }

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

    .logos-carousel::before,
    .logos-carousel::after {
        width: 50px;
    }

    .logos-track {
        gap: var(--spacing-xl);
        animation-duration: 20s;
    }

    .logo-item {
        min-width: 120px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .logos-track {
        gap: var(--spacing-lg);
    }

    .logo-item {
        min-width: 100px;
        height: 50px;
    }
}

/* ========================================
VIDEO BLOG SECTION
======================================== */
 .xvideo-blog-section {
            position: relative;
            width: 100%;
            padding-bottom: 100px;
        }

        .xvideo-blog-background-top {
            position: relative;
            width: 100%;
            height: 380px;
            background: #FFD700;
            padding: 60px 40px 0 40px;
        }

        .xvideo-blog-header {
            position: relative;
            max-width: 1200px;
            margin: 0 auto;
        }

        .xvideo-blog-header-top {
            position: relative;
            width: 100%;
            margin-bottom: 10px;
        }

        .xvideo-blog-title {
            position: relative;
            display: inline-block;
            font-size: 54px;
            font-weight: 500;
            color: #000000;
            margin: 0;
            vertical-align: top;
            line-height: 1;
        }

        .xvideo-blog-social {
            position: absolute;
            top: 0;
            right: 0;
            display: inline-block;
        }

        .xvideo-blog-social-text {
            display: inline-block;
            font-size: 18px;
            color: #000000;
            margin-right: 10px;
            vertical-align: middle;
        }

        .xvideo-blog-social-icon {
            display: inline-block;
            width: 32px;
            height: 32px;
            margin-left: 8px;
            vertical-align: middle;
            cursor: pointer;
            transition: transform 0.3s ease;
            text-decoration: none;
            color: #000000;
        }

        .xvideo-blog-social-icon:hover {
            transform: scale(1.1);
        }

        .xvideo-blog-social-icon svg {
            width: 100%;
            height: 100%;
            fill: currentColor;
        }

        .xvideo-blog-subtitle {
            display: block;
            font-size: 46px;
            font-weight: 200;
            color: #000000;
        }

        .xvideo-blog-cards-container {
            position: relative;
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 10px;
            text-align: center;
            margin-top: -140px;
        }

        .xvideo-blog-card {
            position: relative;
            display: inline-block;
            width: 30%;
            max-width: 320px;
            margin: 0 15px 30px 15px;
            vertical-align: top;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .xvideo-blog-card:hover {
            transform: translateY(-10px);
        }

        .xvideo-blog-card-image-wrapper {
            position: relative;
            width: 100%;
            height: 520px;
            border-radius: 40px;
            overflow: hidden;
            background: #000000;
        }

        .xvideo-blog-card-image {
            position: relative;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .xvideo-blog-card-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40%;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
            z-index: 1;
        }

        .xvideo-blog-card-play {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            background: #000000;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 2;
        }

        .xvideo-blog-card-play:hover {
            transform: scale(1.1);
            background: #1a1a1a;
        }

        .xvideo-blog-card-play-icon {
            position: absolute;
            top: 50%;
            left: 52%;
            transform: translate(-50%, -50%);
            width: 0;
            height: 0;
            border-left: 16px solid #FFD700;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
        }

        .xvideo-blog-card-title {
            position: absolute;
            bottom: 20px;
            left: 20px;
            right: 20px;
            color: #ffffff;
            font-size: 18px;
            font-weight: 400;
            line-height: 1.4;
            text-align: left;
            z-index: 2;
        }

        .xvideo-blog-card-iframe-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
            background: #000000;
            border-radius: 40px;
            overflow: hidden;
        }

        .xvideo-blog-card-iframe {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 40px;
        }

        /* TikTok iframe - sin scroll */
        .xvideo-blog-card-iframe-container.tiktok-container {
            overflow: hidden !important;
        }

        .xvideo-blog-card-iframe.tiktok-iframe {
            overflow: hidden !important;
            -webkit-overflow-scrolling: touch;
            pointer-events: auto;
        }

        .xvideo-blog-card-close {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            background: rgba(0, 0, 0, 0.7);
            border: 2px solid #ffffff;
            border-radius: 50%;
            color: #ffffff;
            font-size: 28px;
            font-weight: 300;
            line-height: 1;
            cursor: pointer;
            z-index: 11;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .xvideo-blog-card-close:hover {
            background: rgba(255, 255, 255, 0.9);
            color: #000000;
            transform: scale(1.1);
        }

        /* Responsive - Tablet (768px - 1023px) */
        @media (min-width: 768px) and (max-width: 1023px) {
            .xvideo-blog-background-top {
                height: clamp(300px, 39vw, 350px);
                padding: clamp(40px, 5.2vw, 50px) clamp(30px, 3.9vw, 40px) 0 clamp(30px, 3.9vw, 40px);
            }

            .xvideo-blog-title {
                font-size: clamp(38px, 4.95vw, 48px);
            }

            .xvideo-blog-subtitle {
                font-size: clamp(32px, 4.17vw, 40px);
            }

            .xvideo-blog-social-text {
                font-size: clamp(16px, 2.08vw, 18px);
            }

            .xvideo-blog-social-icon {
                width: clamp(28px, 3.65vw, 32px);
                height: clamp(28px, 3.65vw, 32px);
            }

            .xvideo-blog-cards-container {
                padding: 0 clamp(20px, 2.6vw, 30px);
                margin-top: clamp(-120px, -15.6vw, -140px);
            }

            .xvideo-blog-card {
                width: 48%;
                max-width: 350px;
                margin: 0 clamp(8px, 1.04vw, 12px) clamp(25px, 3.26vw, 30px) clamp(8px, 1.04vw, 12px);
            }

            .xvideo-blog-card-image-wrapper {
                height: clamp(450px, 58.6vw, 520px);
            }

            .xvideo-blog-card-title {
                font-size: clamp(16px, 2.08vw, 18px);
                padding: 0 clamp(15px, 1.95vw, 20px);
                bottom: clamp(15px, 1.95vw, 20px);
            }

            .xvideo-blog-card-play {
                width: clamp(45px, 5.86vw, 50px);
                height: clamp(45px, 5.86vw, 50px);
                top: clamp(15px, 1.95vw, 20px);
                right: clamp(15px, 1.95vw, 20px);
            }

            .xvideo-blog-card-play-icon {
                border-left-width: clamp(14px, 1.82vw, 16px);
                border-top-width: clamp(9px, 1.17vw, 10px);
                border-bottom-width: clamp(9px, 1.17vw, 10px);
            }

            .xvideo-blog-card-close {
                width: clamp(35px, 4.56vw, 40px);
                height: clamp(35px, 4.56vw, 40px);
                font-size: clamp(24px, 3.13vw, 28px);
                top: clamp(15px, 1.95vw, 20px);
                right: clamp(15px, 1.95vw, 20px);
            }
        }

        /* Responsive - Tablet Grande (1024px - 1199px) */
        @media (min-width: 1024px) and (max-width: 1199px) {
            .xvideo-blog-background-top {
                height: clamp(320px, 27.6vw, 360px);
                padding: clamp(50px, 4.3vw, 60px) clamp(35px, 3vw, 40px) 0 clamp(35px, 3vw, 40px);
            }

            .xvideo-blog-title {
                font-size: clamp(44px, 3.8vw, 52px);
            }

            .xvideo-blog-subtitle {
                font-size: clamp(36px, 3.1vw, 44px);
            }

            .xvideo-blog-cards-container {
                margin-top: clamp(-130px, -11.2vw, -140px);
            }

            .xvideo-blog-card {
                width: 31%;
                max-width: 320px;
            }

            .xvideo-blog-card-image-wrapper {
                height: clamp(480px, 41.4vw, 520px);
            }
        }

        /* Responsive - Desktop Pequeño (1200px - 1580px) */
        @media (min-width: 1200px) and (max-width: 1580px) {
            .xvideo-blog-background-top {
                height: clamp(340px, 21.5vw, 380px);
                padding: clamp(55px, 3.48vw, 60px) clamp(38px, 2.4vw, 40px) 0 clamp(38px, 2.4vw, 40px);
            }

            .xvideo-blog-title {
                font-size: clamp(48px, 3.04vw, 54px);
            }

            .xvideo-blog-subtitle {
                font-size: clamp(40px, 2.53vw, 46px);
            }

            .xvideo-blog-card-image-wrapper {
                height: clamp(500px, 31.65vw, 520px);
            }
        }

        /* Responsive - Móvil (< 768px) */
        @media (max-width: 767px) {
            .xvideo-blog-section {
                padding-bottom: clamp(60px, 15.6vw, 100px);
            }

            .xvideo-blog-background-top {
                height: clamp(240px, 62.5vw, 280px);
                padding: clamp(30px, 7.8vw, 40px) clamp(15px, 3.9vw, 20px) 0 clamp(15px, 3.9vw, 20px);
            }

            .xvideo-blog-header-top {
                margin-bottom: clamp(15px, 3.9vw, 20px);
            }

            .xvideo-blog-title {
                font-size: clamp(28px, 7.3vw, 36px);
                display: block;
                margin-bottom: clamp(8px, 2.08vw, 12px);
            }

            .xvideo-blog-subtitle {
                font-size: clamp(22px, 5.73vw, 28px);
                display: block;
            }

            .xvideo-blog-social {
                position: relative;
                display: block;
                margin-top: clamp(20px, 5.2vw, 25px);
                text-align: left;
            }

            .xvideo-blog-social-text {
                font-size: clamp(14px, 3.65vw, 16px);
                display: block;
                margin-bottom: clamp(10px, 2.6vw, 12px);
            }

            .xvideo-blog-social-icon {
                width: clamp(28px, 7.3vw, 32px);
                height: clamp(28px, 7.3vw, 32px);
                margin: 0 clamp(8px, 2.08vw, 10px) 0 0;
            }

            .xvideo-blog-cards-container {
                padding: 0 clamp(15px, 3.9vw, 20px);
                margin-top: clamp(-100px, -26vw, -120px);
            }

            .xvideo-blog-card {
                width: 100%;
                max-width: clamp(280px, 73vw, 400px);
                margin: 0 auto clamp(25px, 6.5vw, 30px) auto;
                display: block;
            }

            .xvideo-blog-card-image-wrapper {
                height: clamp(420px, 109.4vw, 500px);
                border-radius: clamp(30px, 7.8vw, 40px);
            }

            .xvideo-blog-card-image {
                border-radius: clamp(30px, 7.8vw, 40px);
            }

            .xvideo-blog-card-title {
                font-size: clamp(14px, 3.65vw, 16px);
                padding: 0 clamp(15px, 3.9vw, 20px);
                bottom: clamp(15px, 3.9vw, 20px);
            }

            .xvideo-blog-card-play {
                width: clamp(40px, 10.4vw, 50px);
                height: clamp(40px, 10.4vw, 50px);
                top: clamp(15px, 3.9vw, 20px);
                right: clamp(15px, 3.9vw, 20px);
            }

            .xvideo-blog-card-play-icon {
                border-left-width: clamp(12px, 3.13vw, 16px);
                border-top-width: clamp(8px, 2.08vw, 10px);
                border-bottom-width: clamp(8px, 2.08vw, 10px);
            }

            .xvideo-blog-card-iframe-container {
                border-radius: clamp(30px, 7.8vw, 40px);
            }

            .xvideo-blog-card-iframe {
                border-radius: clamp(30px, 7.8vw, 40px);
            }

            .xvideo-blog-card-close {
                width: clamp(35px, 9.1vw, 40px);
                height: clamp(35px, 9.1vw, 40px);
                font-size: clamp(22px, 5.73vw, 28px);
                top: clamp(15px, 3.9vw, 20px);
                right: clamp(15px, 3.9vw, 20px);
            }
        }




/* ========================================
FOOTER
======================================== */
.footer {
    background-color: var(--color-black);
    padding: var(--spacing-lg) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

/* Footer Logo */
.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--color-white);
    transition: var(--transition-fast);
}

.footer-logo:hover {
    opacity: 0.8;
}

.footer-logo-icon {
    font-size: 28px;
}

.footer-logo-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-white);
}

/* Footer Content */
.footer-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.footer-link {
    color: var(--color-white);
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.footer-link:hover {
    color: var(--color-primary);
}

/* Footer Social */
.footer-social {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 80px;
}

.footer-social-text {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-white);
    margin-right: 4px;
}

.footer-social-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    transition: var(--transition-fast);
}

.footer-social-icon svg {
    width: auto;
    height: auto;
    max-width: 20px;
    max-height: 20px;
    fill: currentColor;
}

.footer-social-icon:hover {
    color: var(--color-primary);
    transform: scale(1.1);
}

/* ========================================
FOOTER RESPONSIVE
======================================== */
/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .footer-container {
        padding: 0 clamp(30px, 3.9vw, 40px);
    }

    .footer-social {
        margin-left: clamp(40px, 5.2vw, 60px);
        gap: clamp(6px, 0.78vw, 8px);
    }

    .footer-social-icon {
        width: clamp(32px, 4.17vw, 36px);
        height: clamp(32px, 4.17vw, 36px);
    }
}

/* Tablet Grande y Desktop Pequeño (1024px - 1199px) */
@media (min-width: 1024px) and (max-width: 1199px) {
    .footer-social {
        margin-left: clamp(60px, 5.86vw, 80px);
    }
}

@media (min-width: 1024px) and (max-width: 1280px) {
    .xvideo-blog-social {
        right: 20px;
    }

    .x-cta-button-wrapper {
        top: -16px;
    }
}

/* Responsive General */
@media (max-width: 1024px) {
    .footer-container {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-lg);
    }

    .footer-content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
        width: 100%;
    }

    .footer-social {
        margin-left: 0;
        margin-top: var(--spacing-xs);
        gap: 8px;
    }
}

/* Móvil (< 768px) */
@media (max-width: 767px) {
    .footer {
        padding: clamp(20px, 5.2vw, 24px) 0;
    }

    .footer-container {
        padding: 0 clamp(15px, 3.9vw, 20px);
        gap: clamp(20px, 5.2vw, 24px);
    }

    .footer-logo {
        gap: clamp(8px, 2.08vw, 10px);
    }

    .footer-logo-icon {
        font-size: clamp(24px, 6.25vw, 28px);
    }

    .footer-logo-text {
        font-size: clamp(13px, 3.39vw, 15px);
    }

    .footer-content {
        gap: clamp(12px, 3.13vw, 16px);
    }

    .footer-link {
        font-size: clamp(13px, 3.39vw, 15px);
    }

    .footer-social {
        margin-top: clamp(8px, 2.08vw, 12px);
        gap: clamp(6px, 1.56vw, 8px);
    }

    .footer-social-text {
        font-size: clamp(12px, 3.13vw, 14px);
        margin-right: clamp(4px, 1.04vw, 6px);
    }

    .footer-social-icon {
        width: clamp(28px, 7.3vw, 32px);
        height: clamp(28px, 7.3vw, 32px);
    }

    .xvideo-blog-cards-container .xvideo-blog-card {
        display: none;
    }
    
    .xvideo-blog-cards-container .xvideo-blog-card:first-child {
        display: block;
        margin-top: 15px;
    }



/*
====================================
    HUEVO RESPONSIVE
====================================
*/
    .about-content {
        padding-left: 27px;
        padding-right: 28px;
        text-align: center;
    }
    .logo-icon {
        transform: rotate(-92deg);
        margin-right: 5px;  
    }
    .hero-image {
        position: absolute;
        width: 95%;
        margin: 0 2.5%;
        top: 0;
        z-index: 0;
    }
    .hero-content {
        z-index: 1;
        padding: 330px 12px 10px;
    }
    .hero {
        padding-top: 70px;
        min-height: initial;
    }
    .hero-subtitle {
        font-size: clamp(25px, 4vw, 28px);
    }
    .hero-title {
        font-size: clamp(35px, 6vw, 45px);
    }
    .hero-container {
        padding: 0 29px;
    }
    .x-widget-limit {
        padding: 0;
    }
    .x-cta-container {
        border-radius: initial;
        text-align: center;
        padding: 30px 30px 0;
    }
    .about-section {
        padding-top: 0 !important;
    }
    section#sobre-mi .about-container {
        padding: 0;
    }
    .about-image img, .about-image-img {
        max-width: inherit;
        height: auto;
        border-radius: 0;
    }
    .x-cta-button {
        position: relative;
        top: 10px;
    }
    .x-cta-button-content .x-cta-icon {
        display: none;
    }
    .hero-image img {
        max-height: 440px;
    }


    section.portfolio-video-section {
        position: relative;
        padding-top: 50px;
    }
    section.portfolio-video-section:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 60%;
        background: #fff;
        z-index: 0;
    }
    .portfolio-video-container {
        position: relative;
        z-index: 1;
    }
    .portfolio-title {
        color: #000;
    }
    .video-play-button {
        width: 80%;
        height: clamp(225px, 35vw, 240px);
        margin-bottom: clamp(-10px, -5vw, -40px);
        border-radius: 15px;
        position: relative;
        top: -15px;
    }
    .accordion {
        padding-left: 11px;
        padding-right: 9px;
    }
    .accordion-number,
    .accordion-item.active .accordion-number {
        top: 35px;
        left: 16px;
    }
    .accordion-title-wrapper {
        margin-top: 50px;
    }
    .accordion-header {
        align-items: self-start;
    }
    .accordion-number {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    button.accordion-toggle {
        position: relative;
        top: 5px;
        right: 6px;
    }
    .accordion-cta {
        width: 100%;
        text-align: center;
        padding-bottom: 29px;
        position: relative;
        left: -5px;
    }
    h2.services-title {
        line-height: 1.2;
        margin: 0 0 30px 0;
    }
    section#servicios {
        padding-top: 55px;
    }
    .testimonials-section {
        padding: var(--spacing-2xl) 0 18px;
    }
    .xvideo-blog-header-top,
    .xvideo-blog-social,
    .testimonial-card {
        text-align: center;
    }
    .author-info {
        text-align: left;
    }
    .xvideo-blog-cards-container {
        padding: 0 clamp(15px, 3.9vw, 20px);
        margin-top: -70px;
    }
    .xvideo-blog-card {
        width: 100%;
        max-width: 95%;
        margin: 0 auto clamp(25px, 6.5vw, 30px) auto;
        display: block;
    }
    .xvideo-blog-background-top {
        height: clamp(280px, 62.5vw, 280px);
        padding: clamp(50px, 7.8vw, 40px) clamp(15px, 3.9vw, 20px) 0 clamp(15px, 3.9vw, 20px);
    }
    .footer-container {
        flex-direction: initial;
    }
    a.footer-logo {
        width: 30%;
    }
    .footer-content {
        width: 54%;
        justify-content: flex-end;
        align-items: end;
        line-height: 1;
    }
    .footer-social {
        margin-top: 0;
    }
    span.footer-logo-icon {
        transform: rotate(-92deg);
        margin-right: 5px;
        position: relative;
        left: 15px;
    }
    span.footer-logo-text{
        display: none;
    }
    .stat-number {
        font-size: clamp(48px, 10vw, 72px);
    }
}
/* ========================================
   CUSTOM SWITCH CHECKBOX
======================================== */
.custom-switch-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: clamp(8px, 1.04vw, 12px);
    padding-left: 2px;
}

.custom-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.custom-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #404040;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: '';
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: var(--color-primary);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--color-primary);
}

input:checked + .slider:before {
    transform: translateX(20px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.custom-switch-label {
    color: var(--color-white);
    font-size: clamp(13px, 1.69vw, 15px);
    font-weight: 400;
    cursor: pointer;
    user-select: none;
    line-height: 1.2;
}

/* Hover effect */
.custom-switch-wrapper:hover .slider {
    background-color: #505050;
}

.custom-switch-wrapper:hover input:checked + .slider {
    background-color: #e6b800; /* Darker yellow */
}

/* ========================================
   GIF LIGHTBOX
======================================== */
.gif-lightbox-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gif-lightbox-modal.active {
    display: flex;
    opacity: 1;
}

.gif-lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    cursor: pointer;
}

.gif-lightbox-content {
    position: relative;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.gif-lightbox-image {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 12px;
    animation: scaleIn 0.3s ease;
}

.gif-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 32px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    transition: all 0.2s ease;
}

.gif-lightbox-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

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

/* Para dispositivos móviles */
@media (max-width: 768px) {
    .gif-lightbox-image {
        max-width: 95vw;
        max-height: 95vh;
    }
    
    .gif-lightbox-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
}

/* ========================================
   ABOUT STATS MODAL (Solo Mobile)
======================================== */
.about-stats-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.about-stats-modal.active {
    display: flex;
}

.about-stats-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    cursor: pointer;
}

.about-stats-modal-content {
    position: relative;
    width: 100%;
    max-width: 600px;
    background-color: var(--color-black);
    border-radius: 32px;
    padding: clamp(28px, 3.6vw, 40px) clamp(24px, 3.1vw, 36px);
    z-index: 10001;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

.about-stats-modal-close {
    position: absolute;
    top: clamp(16px, 2.1vw, 24px);
    right: clamp(16px, 2.1vw, 24px);
    background: none;
    border: none;
    color: var(--color-white);
    font-size: clamp(28px, 3.6vw, 36px);
    cursor: pointer;
    transition: var(--transition-fast);
    width: clamp(32px, 4.2vw, 40px);
    height: clamp(32px, 4.2vw, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-weight: 300;
    z-index: 10002;
}

.about-stats-modal-close:hover {
    color: var(--color-primary);
    transform: rotate(90deg);
}

.about-stats-modal-header {
    margin-bottom: clamp(20px, 2.6vw, 28px);
    text-align: center;
}

.about-stats-modal-title {
    font-size: clamp(24px, 3.1vw, 32px);
    font-weight: 700;
    color: var(--color-white);
    margin: 0;
    line-height: 1.2;
}

.about-stats-modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.stat-card-full {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-card-full:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.experience-card-full h3 {
    font-size: clamp(22px, 4vw, 28px);
    font-weight: 500;
    color: var(--color-white);
    margin-bottom: var(--spacing-xs);
}

.experience-card-full p {
    font-size: clamp(15px, 2.5vw, 18px);
    font-weight: 300;
    color: var(--color-white);
    line-height: 1.4;
    opacity: 0.9;
    margin-bottom: var(--spacing-sm);
}

.stat-number-full {
    font-size: clamp(56px, 10vw, 80px);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-top: var(--spacing-xs);
}

.stat-label-full {
    font-size: clamp(14px, 2.2vw, 18px);
    font-weight: 300;
    color: var(--color-white);
    opacity: 0.9;
    line-height: 1.5;
}

/* Responsive del modal */
@media (max-width: 767px) {
    .about-stats-modal {
        padding: clamp(10px, 2.6vw, 20px);
        align-items: flex-start;
        padding-top: clamp(20px, 5.2vw, 40px);
        padding-bottom: clamp(20px, 5.2vw, 40px);
    }

    .about-stats-modal-content {
        border-radius: clamp(24px, 6.25vw, 32px);
        padding: clamp(28px, 7.3vw, 40px) clamp(20px, 5.2vw, 28px);
        max-height: calc(100vh - clamp(30px, 7.8vw, 60px));
        width: 100%;
        margin: 0 auto;
    }

    .about-stats-modal-close {
        top: clamp(12px, 3.13vw, 18px);
        right: clamp(12px, 3.13vw, 18px);
        font-size: clamp(24px, 6.25vw, 32px);
        width: clamp(28px, 7.29vw, 36px);
        height: clamp(28px, 7.29vw, 36px);
    }

    .about-stats-modal-header {
        margin-bottom: clamp(18px, 4.69vw, 24px);
    }

    .about-stats-modal-title {
        font-size: clamp(20px, 5.21vw, 26px);
        line-height: 1.15;
    }
}