/*
    Rework START
*/

:root{
    --bg-main:#121212;
    --bg-secondary:#1E1E1E;
    --border:#3A3A3A;

    --brand:#3B82F6;
    --brand-alt:#2563EB;

    --text:#E4E4E4;
    --text-secondary:#9CA3AF;

    --bg-box: linear-gradient(135deg,rgba(255,255,255,0.04),rgba(255,255,255,0.015));
    --bg-box-secondary: linear-gradient( 135deg, rgba(59,130,246,.08), rgba(37,99,235,.04));

    --accent: rgba(59,130,246,.08);
    --accent-light: rgba(78, 143, 247, 0.08);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Inter', sans-serif;
    background: var(--bg-main);
    color: var(--text);
    line-height: 1.6;
}

h1, h2, h3 {
    font-family: 'Poppins', sans-serif;
}

.container{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-spacer{
    padding: 60px 20px;
    max-width: 1000px;
}

.breadcrumb{
    font-size: 14px;
    margin-bottom: 24px;
    color: var(--text-secondary);
    opacity: 0.8;
}

.breadcrumb a{
    color: var(--brand);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb a:hover{
    color: var(--brand);
}

.breadcrumb span{
    margin: 0 6px;
}

.spacer{
    padding: 60px 0px 0;
}

.content-header{
    max-width: 760px;
    margin-bottom: 3rem;
}

.content-header h2{
    margin: 1rem 0;
    font-size: 32px;
}

.content-header p{
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 620px;
    margin-bottom: 15px;
    text-align: justify;
}

.horizontal-separator {
    border-top: 1px solid var(--border);
}

/* Contact */
.grid-container{
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
    gap: 40px;
}

.primary-title{
    font-size: 32px;
    margin-bottom: 10px;
}

.grid-left p{
    text-align: justify;
}

.grid-text{
    font-size: 18px;
    color: var(--text);
    margin-bottom: 10px;
}

.grid-muted-text{
    color: var(--text-secondary);
    margin-bottom: 20px;
    max-width: 500px;
}

.grid-right img{
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
}

.button-actions{
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-primary{
    background: var(--brand);
    color: white;
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
    overflow: hidden;
}

.btn-primary:hover{
    background: var(--brand-alt);
    transform: translateY(-2px);
}

.btn-secondary{
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-secondary:hover{
    border-color: var(--brand);
    color: var(--brand);
}

.list{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.list-item{
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: 1px solid rgba(59,130,246,.15);
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.list-item::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(59,130,246,.25),
            transparent
        );
}

.list-item::before{
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background:  rgba(59,130,246,.05);
    filter: blur(50px);
    transition: transform .4s ease;
}

.list-item:hover{
    transform: translateY(-4px);
    border-color: rgba(59,130,246,.30);
    box-shadow:
        0 15px 35px rgba(0,0,0,.20),
        0 0 25px rgba(59,130,246,.05);
}

.list-item:hover::before{
    transform: scale(1.15);
}

.list-question{
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem 1.5rem;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
}

.question-title{
    display: flex;
    align-items: center;
    gap: 12px;
}

.question-title::before{
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand);
    flex-shrink: 0;
    transition:
        transform .3s ease,
        box-shadow .3s ease;    
}

.list-item:hover .question-title::before{
    transform: scale(1.3);
    box-shadow:
        0 0 12px rgba(59,130,246,.5);
}

.list-icon{
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(59,130,246,.08);

    border: 1px solid rgba(59,130,246,.15);

    color: var(--brand);

    font-size: 1.2rem;

    transition: all .3s ease;
}

.list-answer{
    max-height: 0;
    overflow: hidden;

    transition:
        max-height .4s ease,
        padding .3s ease;
}

.list-answer p{
        position: relative;
    padding: 0 1.5rem 1.5rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

.list-answer::before{
    content: "";

    display: block;

    margin: 0 1.5rem 1rem;

    height: 1px;

    background: rgba(255,255,255,.08);
}

.list-item.active{
    border-color: rgba(59,130,246,.35);
}

.list-item.active::after{
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 4px;
    height: 100%;

    background: var(--brand);

    border-radius: 0 4px 4px 0;
}

.list-item.active .list-answer{
    max-height: 300px;
}

.list-item.active .list-icon{
    transform: rotate(45deg);

    background: var(--brand);
    color: white;

    box-shadow:
        0 0 15px rgba(59,130,246,.25);
}

.email-form-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.email-form{
    position: relative;
    background: var(--bg-secondary);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid rgba(59,130,246,.15);
    overflow: hidden;
    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

.email-form::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(59,130,246,.25),
            transparent
        );
}

.email-form::before{
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: linear-gradient(
        to bottom,
        var(--accent),
        transparent
    );
}

.email-form:hover{
    transform: translateY(-2px);
    border-color: rgba(59,130,246,.30);
    box-shadow:
        0 15px 35px rgba(0,0,0,.20),
        0 0 25px rgba(59,130,246,.05);
}
.email-form h2{
    margin-bottom: 30px;
}

.email-form button{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    color: white;
    background: linear-gradient(
        135deg,
        #2563EB,
        #1D4ED8
    );
    cursor: pointer;
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.email-form button:hover{
    transform: translateY(-2px);
    box-shadow:
        0 10px 25px rgba(37,99,235,.35);
}

.email-form button:active{
    transform: translateY(0);
}

.form-group{
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.form-group label{
    margin-bottom: 5px;
    font-size: 14px;
}

.form-group input,
.form-group textarea{
    background: transparent;
    border: 1px solid var(--border);
    padding: 12px;
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    transition: 1ll 0.3s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder{
    color: var(--text-secondary);
}

.form-group input:focus,
.form-group textarea:focus{
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

textarea{
    resize: none;
    overflow: auto;
    min-height: 100px;
}

/* SVG animation */

.airplane-icon {
    display: inline-block;
    transform-origin: center;
    margin-left: 8px;
    flex-shrink: 0;
    animation: flyLoopAuto 5s linear infinite;
}

@keyframes flyLoopAuto {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
        animation-timing-function: cubic-bezier(0.36, 0, 0.66, -0.55);
    }

    6% {
        transform: translate(-6px, 4px) rotate(-10deg) scale(0.95);
        opacity: 1;
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    15% {
        transform: translate(220px, -120px) rotate(15deg) scale(1.1);
        opacity: 0;
    }

    17% {
        transform: translate(-250px, 120px) rotate(-15deg) scale(0.85);
        opacity: 0;
        animation-timing-function: cubic-bezier(0.05, 0.7, 0.1, 1.0);
    }

    42% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }

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

/* Contact End */

/* Nosotros */


.about-hero-grid{
    display: grid;
    grid-template-columns: .8fr 1fr;
    align-items: center;
    gap: 40px;
}

.about-hero-left h1{
    font-size: 36px;
    margin-bottom: 15px;
}

.about-hero-right{
    display: flex;
    justify-content: center;
}

.about-hero-img{
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(17, 40, 78, 0.221));
}

.details-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.details-grid-card{
    position: relative;
    padding: 2rem;
    border-radius: 12px;
    background:
        radial-gradient(circle at top right, rgba(77,163,255,.18), transparent 35%),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
         var(--bg-secondary);
    border: 1px solid rgba(59,130,246,.15);
    overflow: hidden;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.details-grid-card::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 135deg, rgba(255,255,255,.06), transparent 45%);
    opacity: 0;
    transition: opacity .35s ease;
}

.details-grid-card::after{
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(77,163,255,.08);
    filter: blur(20px);
    transition: transform .45s ease;
}

.details-grid-card:hover{
    transform: translateY(-10px);
    border-color: rgba(77,163,255,.35);
    box-shadow: 0 20px 40px rgba(0,0,0,.25),0 0 30px rgba(77,163,255,.08);
}

.details-grid-card:hover::before{
    opacity: 1;
}

.details-grid-card:hover::after{
    transform: scale(1.15);
}

.details-grid-icon{
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.174);
    pointer-events: none;
}

.details-grid-card h3{
    position: relative;
    z-index: 2;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    max-width: 80%;
}

.details-grid-card p{
    position: relative;
    z-index: 2;
    color: var(--text-muted);
    line-height: 1.85;
    font-size: .96rem;
    padding-top: 1.25rem;
    margin-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,.08);
    text-align: justify;
}


@media (max-width: 1024px){
    .details-grid{
        grid-template-columns: 1fr;
    }
}

/* Quality Section */

.quality-section{
    position: relative;
    padding: 50px 0;
    overflow: hidden;
}

.quality-section::before{
    content: "";
    position: absolute;
    top: -180px;
    right: -120px;
    width: 420px;
    height: 420px;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.044),
        transparent 50%
    );
    pointer-events: none;
    z-index: 0;
}


.quality-header,
.quality-content{
    position: relative;
    z-index: 1;
}

.quality-header{
    max-width: 700px;
    margin-bottom: 40px;
}

.quality-header h2{
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.1;
    margin: 18px 0;
    letter-spacing: -0.03em;
}

.quality-header p{
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-secondary);
    max-width: 700px;
}

.quality-header::after{
    content: "";
    display: block;
    width: 90px;
    height: 1px;
    margin-top: 28px;
    background: linear-gradient(
        to right,
        var(--accent),
        transparent
    );
}

.quality-content{
    position: relative;
    display: grid;
    gap: 40px;
    max-width: 1200px;
    margin-top: 16px;
}

.quality-lead{
    position: relative;
    padding-left: 0px;    
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    line-height: 1.8;
    color: var(--text-primary);
    font-weight: 500;
    max-width: 800px;
}

.quality-lead::before{
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 4px;
    height: calc(100% - 24px);
    border-radius: 999px;
    background: linear-gradient(
        to bottom,
        var(--accent),
        transparent
    );
}

.quality-text-flow{
    display: grid;
    max-width: 930px;
    gap: 28px;
}

.quality-text-flow p{
    position: relative;
    text-align: justify;
    padding: 0 0 0 28px;
    font-size: 1rem;
    line-height: 1.95;
    color: var(--text-secondary);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform .3s ease;
}

.quality-text-flow p:hover{
    transform: translateX(4px);
}

.quality-text-flow p::after{
    content: "";
    position: absolute;
    top: 18px;
    right: -20px;
    width: 60px;
    height: 1px;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0.08),
        transparent
    );
}

.quality-highlight{
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-top: 10px;
    padding: 30px;
    border: 1px solid rgba(59,130,246,.15);
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            rgba(59,130,246,.08),
            rgba(37,99,235,.04)
        );
    backdrop-filter: blur(14px);
    overflow: hidden;
}

.quality-highlight:hover{
    transform: translateY(-6px);
    border-color: rgba(59,130,246,.28);
    box-shadow:
        0 20px 50px rgba(0,0,0,.25),
        0 0 40px rgba(59,130,246,.08);
}

.quality-highlight::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at top right,
            rgba(59,130,246,.15),
            transparent 45%
        );
    pointer-events: none;
}

.quality-highlight span{
    width: 14px;
    height: 14px;
    margin-top: 10px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.426);
}

.quality-highlight p{
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--text-primary);
    font-weight: 500;
}

.inline-badge{
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    margin: 0 4px;
    border-radius: 999px;
    background: rgba(59,130,246,.08);
    border: 1px solid rgba(59,130,246,.15);
    color: var(--brand);
    font-size: .9rem;
}

.inline-badge:hover{
    transform: translateY(-6px);
    border-color: rgba(59,130,246,.28);
    box-shadow:
        0 20px 50px rgba(0,0,0,.25),
        0 0 40px rgba(59,130,246,.08);
}

.mission-vision{
    padding: 60px 0;
}

.tabs{
    margin-bottom: 4rem;
}

.tabs-header{
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

.tab-btn{
    position: relative;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    padding-bottom: 6px;
    transition: all 0.3s ease;
}

.tab-btn:hover{
    color: var(--brand);
}

.tab-btn::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(
        90deg,
        #3B82F6,
        #2563EB,
        #1D4ED8
    );
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.tab-btn.active{
    color: var(--text);
}

.tab-btn.active::after{
    width: 100%;
}

.tabs-content{
    max-width: 1000px;
    margin: 0 auto;
}

.tab-panel{
    display: none;
    position: relative;
    padding: 4rem;
    overflow: hidden;
    border-radius: 12px;
    background: var(--bg-box-secondary);
    border: 1px solid rgba(59,130,246,.15);
    text-align: center;
    animation: fadeTab .35s ease;
}

.tab-panel:hover{
    transform: translateY(-6px);
    border-color: rgba(59,130,246,.28);
    box-shadow:
        0 20px 50px rgba(0,0,0,.25),
        0 0 40px rgba(59,130,246,.08);
}

.tab-panel:hover .tab-icon{
    transform: scale(1.08);
    box-shadow:
        0 15px 35px rgba(59,130,246,.25);
}

.tab-panel::before{
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
            circle at top right,
            rgba(59,130,246,.15),
            transparent 45%
        );
    pointer-events: none;
}

.tab-panel::after{
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    top: -120px;
    right: -120px;
    border-radius: 50%;
    background: rgba(59,130,246,.08);
    filter: blur(40px);
}

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

.tab-panel h2{
    font-size: 2.4rem;
    margin-bottom: 1rem;
}

.tab-panel p{
    max-width: 700px;
    margin: 0 auto;
    color: var(--text-secondary);
    line-height: 1.9;
    font-size: 1.05rem;
}

.tab-icon{
    width: 84px;
    height: 84px;
    margin: 0 auto 1.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    background: rgba(59,130,246,.1);
    border: 1px solid rgba(59,130,246,.25);
    box-shadow:
        0 10px 30px rgba(59,130,246,.15);
    animation: iconFloat 4s ease-in-out infinite;
}

.tab-icon svg{
    width: 34px;
    height: 34px;
}
.tab-points{
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tab-points span{
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(59,130,246,.08);
    border: 1px solid rgba(59,130,246,.15);
    color: var(--brand);
    font-size: .9rem;
    font-weight: 600;
}

@keyframes iconFloat{
    0%,100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-4px);
    }
}

@keyframes fadeTab{
    from{
        opacity: 0;
        transform: translateY(10px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

.principles-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.principle-card{
    position: relative;
    background: var(--bg-box);
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 160px;
    overflow: hidden;
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.principle-card::after{
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(77, 163, 255, 0.014);
    filter: blur(10px);
    transition: transform .35s ease;
}

.principle-card:hover{
    border-color: rgba(77,163,255,.35);
    transform: translateY(-4px);
    box-shadow:
        0 12px 30px rgba(0,0,0,.18);
}

.principle-card:hover::after{
    transform: scale(1.08);
}

.principle-card h3{
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    margin-bottom: 14px;
    line-height: 1.35;
}

.principle-card h3::before{
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand);
    flex-shrink: 0;
}
.principle-card p{
    position: relative;
    z-index: 2;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.75;
    text-align: justify;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.principle-icon{
    position: absolute;
    top: 20px;
    right: 20px;
    color: rgba(59,130,246,.18);
    z-index: 1;
    transition: all .35s ease;
}

.principle-card:hover .principle-icon{
    color: rgba(59,130,246,.35);
    transform:
        rotate(12deg)
        scale(1.08);
}

.cta-section{
    display: flex;
    justify-content: center;
}

.cta-content{
    position: relative;
    max-width: 1000px;
    width: 100%;
    text-align: center;
    padding: 60px 40px;
    background:
        linear-gradient(
            135deg,
            rgba(59,130,246,.08),
            rgba(37,99,235,.04)
        );
    border: 1px solid rgba(59,130,246,.15);
    border-radius: 12px;
    overflow: hidden;
}

.cta-content::before{
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 240px;
    height: 240px;
    border-radius: 12px;
    background: rgba(59,130,246,.08);
    filter: blur(50px);
}

.cta-badge{
    display: inline-flex;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(59,130,246,.1);
    color: var(--brand);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .08em;
    margin-bottom: 20px;
}

.cta-content h2{
    font-size: 32px;
    margin-bottom: 18px;
}

.cta-content p{
    max-width: 700px;
    margin: 0 auto 30px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.cta-features{
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 40px;
    color: var(--text-secondary);
    font-size: .95rem;
}

.cta-features span{
    display: flex;
    align-items: center;
    gap: 6px;
}

.cta-actions{
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.cta-actions .btn-primary{
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.phone-ring {
    transform-origin: center;
    animation: phoneRing 1s infinite;
}

.cta-content:hover{
    transform: translateY(-6px);
    border-color: rgba(59,130,246,.28);
    box-shadow:
        0 20px 50px rgba(0,0,0,.25),
        0 0 40px rgba(59,130,246,.08);
}

.cta-content:hover .cta-badge{
    transform: scale(1);
    box-shadow:
        0 5px 35px rgba(59,130,246,.25);
}

@keyframes phoneRing {
    0%   { transform: rotate(0deg); }
    10%  { transform: rotate(-15deg); }
    20%  { transform: rotate(15deg); }
    30%  { transform: rotate(-15deg); }
    40%  { transform: rotate(15deg); }
    50%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

/* Nosotros End */

@media (max-width: 480px){

    .quality-section{
        padding: 60px 0;
    }

    .quality-header h2{
        font-size: 2rem;
    }

    .quality-lead{
        font-size: 1.05rem;
    }

    .quality-highlight{
        padding: 20px;
    }

    .inline-badge{
        display: inline-flex;
        margin-bottom: 8px;
    }

}

@media (max-width: 768px){

    .container{
        padding: 0 16px;
    }

    .container-spacer{
        padding: 40px;
        max-width: 100%;
    }

    .breadcrumb{
        font-size: 13px;
        margin-bottom: 16px;
    }

    /* Contact */
    .grid-container{
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .grid-left h1{
        font-size: 26px;
    }

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

    .grid-muted-text{
        font-size: 15px;
        line-height: 1.7;
    }

    .button-actions{
        display: flex;
        justify-content: center;
    }

    .grid-right img{
        border-radius: 10px;
    }

    .list-question{
        padding: 1.2rem;
        font-size: .95rem;
    }

    .list-answer p{
        padding: 0 1.2rem 1.2rem;
        font-size: .95rem;
    }

    .email-form-grid{
        grid-template-columns: 1fr;
        gap: 30px;
    }
    /* Contact End */

    /* Nosotros */

    .about-hero-grid{
        grid-template-columns: 1fr;
        text-align: center;
    }

    .about-hero-left h1{
        font-size: 26px;
    }

    .about-hero-img{
        max-width: 80%;
    }

    .tabs-header{
        flex-direction: column;
        align-items: center;
    }

    .tab-panel{
        padding: 2.5rem 1.5rem;
        border-radius: 18px;
    }

    .tab-panel h2{
        font-size: 1.8rem;
    }

    .tab-panel p{
        font-size: .95rem;
    }

    .tabs-header{
        gap: 20px;
        flex-wrap: wrap;
    }

    .tab-btn{
        width: 100%;
        max-width: 250px;
    }

    .principles-grid{
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .principle-card{
        padding: 24px;
        min-height: auto;
    }

    .principle-icon{
        top: 18px;
        right: 18px;
    }

    .principle-icon svg{
        width: 22px;
        height: 22px;
    }

    .principle-card h3{
        font-size: 1rem;
        padding-right: 40px;
    }

    .principle-card p{
        font-size: 0.92rem;
        line-height: 1.7;
    }

    .cta-content{
        padding: 45px 25px;
        border-radius: 16px;
    }

    .cta-content h2{
        font-size: 2rem;
        line-height: 1.2;
    }

    .cta-content p{
        font-size: .95rem;
        line-height: 1.7;
    }

    .cta-actions{
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .cta-actions a{
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }

    .cta-features{
        flex-direction: column;
        gap: 12px;
        margin-top: 25px;
    }

    .quality-section{
        padding: 70px 0;
    }

    .quality-section::before{
        width: 260px;
        height: 260px;
        top: -100px;
        right: -120px;
        opacity: .7;
    }

    .quality-header{
        margin-bottom: 40px;
    }

    .quality-header h2{
        line-height: 1.15;
        letter-spacing: -0.02em;
    }

    .quality-header p{
        font-size: 1rem;
        line-height: 1.8;
    }

    .quality-header::after{
        width: 70px;
        margin-top: 22px;
    }

    .quality-content{
        gap: 28px;
        margin-top: 14px;
    }

    .quality-lead{
        font-size: 1.15rem;
        line-height: 1.8;
        padding-left: 18px;
    }

    .quality-lead::before{
        width: 3px;
        top: 10px;
        height: calc(100% - 20px);
    }

    .quality-text-flow{
        gap: 24px;
    }

    .quality-text-flow p{
        padding-left: 18px;
        font-size: .98rem;
        line-height: 1.9;
        text-align: left;
    }

    .quality-text-flow p:hover{
        transform: none;
    }

    .quality-text-flow p::after{
        display: none;
    }

    .quality-highlight{
        gap: 14px;
        padding: 22px;
        border-radius: 18px;
    }

    .quality-highlight::before{
        left: 22px;
        width: 90px;
    }

    .quality-highlight span{
        width: 12px;
        height: 12px;
        margin-top: 9px;
    }

    .quality-highlight p{
        font-size: 1rem;
        line-height: 1.8;
    }

    .inline-badge{
        gap: 40px;
        margin-top: 20px;
        padding: 7px 12px;
        font-size: .85rem;
        border-radius: 10px;
    }

    /* Nosotros End */

}

/*
    Rework END
*/







/* horizontal separator */
.linear-separator{
    border-top: 1px solid var(--border);
}
/* horizontal separator */
.section-separator{
    margin-top: 100px;
    border-top: 1px solid var(--border);
}

.fadeup-animation{
    animation: fadeUp 0.8s ease forwards;
}

/* spacer */
.box-spacer{
    padding: 100px 20px 0;
}
/* spacer */
.box-small-spacer{
    padding: 50px 0;
}

.secondary-title {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    margin-bottom: 1rem;
    max-width: 730px;
}

.text-content {
    color: var(--text-secondary);
    margin-top: 1rem;

    max-width: 650px;
}

.text-link{
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 2rem;
    color: var(--brand);
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none;
    transition:
        color .3s ease,
        transform .3s ease,
        opacity .3s ease;
}

.text-link:hover{
    color: var(--brand-alt);
    transform: translateX(4px);
}

.brand-text {
    color: var(--brand);
}

.button-left{
    display: flex;
    justify-content: start;
    gap: 15px;
    flex-wrap: wrap;
}

.button-left .btn-primary{
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-up-down svg {
    animation: floatIcon 3s cubic-bezier(.37,0,.63,1) infinite;
}

.arrow-primary-button{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--brand);
    color: white;
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
}


.arrow-primary-button:hover{
    background: var(--brand-alt);
    transform: translateY(-2px);
}

.arrow-primary-button svg{
    transition: transform .3s ease;
}

.arrow-primary-button:hover svg{
    transform: translateX(4px);
}

.arrow-secondary-button{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.arrow-secondary-button:hover{
    border-color: var(--brand);
    color: var(--brand);
}

.arrow-secondary-button svg{
    transition: transform .3s ease;
}

.arrow-secondary-button:hover svg{
    transform: translateX(4px);
}

/* Animations */

@keyframes floatIcon{

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

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

}

@keyframes fadeSlide{
    from{
        opacity: 0;
        transform: translateY(12px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

/* Navbar */

.navbar{
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.navbar-content{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 20px 16px;
}

.nav-left{
    justify-self: start;
}

.nav-center{
    z-index: 999;
}

.nav-right{
    display: flex;
    align-items: center;
    gap: 20px;
    justify-self: end;
}

.logo{
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}

.logo-img{
    height: 40px;
    width: auto;
    display: block;
}

.nav-links{
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-links a{
    position: relative;
    color: var(--text);
    text-decoration: none;
    padding-bottom: 8px;
    display: inline-block;
    transition: all 0.3s ease;
}

.nav-links a:hover{
    color: var(--brand);
    transform: translateY(-2px);
}

.nav-links a::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(
        90deg,
        #3B82F6,
        #2563EB,
        #1D4ED8
    );
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-links a:hover::after,
.nav-links a.active::after{
    width: 100%;
}

.btn-contact{
    background: var(--brand);
    padding: 10px 18px;
    border-radius: 6px;
    color: white;
    text-decoration: none;
    font-weight: 500;
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-contact:hover{
    background: var(--brand-alt);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

.btn-contact:active{
    transform: translateY(0px);
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.2);
}

.menu-toggle{
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
}

.menu-toggle span{
    width: 25px;
    height: 2px;
    background: var(--text);
    display: block;
}

@media (max-width: 768px){
    .navbar-content{
        grid-template-columns: auto 1fr;
    }

    .nav-center{
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: var(--bg-secondary);
        border-top: 1px solid var(--border);
        display: none;
    }

    .nav-center.active{
        display: block;
    }

    .nav-links{
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }

    .btn-contact{
        display: none;
    }

    .menu-toggle{
        display: flex;
    }
}

/* Navbar End */

/* Footer */

.footer-divider{
    width: 100%;
    height: 1px;
    background: var(--border);
    margin: 40px 0 20px;
}

.footer{
    padding: 40px 0 20px;
    background: var(--bg-main);
}

.footer-top{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    padding-bottom: 10px;
}

.footer-top-left{
    max-width: 620px;
}

.footer-label{
    display: inline-block;
    margin-bottom: 14px;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;

    color: var(--brand);
}

.footer-top-left h2{
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    line-height: 1.15;
    color: var(--text);
}

.footer-social{
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer-social a{
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    border: 1px solid var(--border);

    color: var(--text-secondary);
    background: var(--bg-secondary);

    transition: all .3s ease;
}

.footer-social a:hover{
    transform: translateY(-4px);

    border-color: var(--brand);

    color: white;
    background: var(--brand);

    box-shadow: 0 10px 30px rgba(59, 130, 246, .25);
}

.footer-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.footer-left p{
    color: var(--text-secondary);
    font-size: 14px;
}

.footer-left a{
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.footer-left a:hover{
    color: var(--brand);
}

.footer-right{
    display: flex;
    gap: 20px;
}

.footer-right a{
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-right a:hover{
    color: var(--brand);
    text-decoration: underline;
}

@media (max-width: 480px){

    .footer{
        padding: 28px 0 18px;
    }

    .footer-top{
        gap: 22px;
    }

    .footer-top-left h2{
        font-size: 1.55rem;
    }

    .footer-social{
        gap: 10px;
    }

    .footer-social a{
        width: 42px;
        height: 42px;
    }

    .footer-right{
        flex-direction: column;
        gap: 10px;
    }

}

@media (max-width: 768px){
    .footer{
        padding: 32px 40px 40px;
    }

    .footer-top{
        align-items: center;
        text-align: center;
        gap: 28px;

        padding-bottom: 24px;
    }

    .footer-top-left{
        width: 100%;
    }

    .footer-label{
        font-size: 12px;
        margin-bottom: 12px;
    }

    .footer-top-left h2{
        font-size: clamp(1.7rem, 7vw, 2.3rem);
        line-height: 1.2;
        margin: 0 auto;
    }

    .footer-social{
        width: 100%;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .footer-social a{
        width: 44px;
        height: 44px;
    }
    .footer-divider{
        margin: 0px 0 16px;
    }

    .footer-content{
        flex-direction: column;
        justify-content: center;
        align-items: center;

        text-align: center;
        gap: 16px;
    }

    .footer-left p{
        font-size: 13px;
        line-height: 1.7;
    }

    .footer-right{
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 14px;
    }

    .footer-right a{
        font-size: 13px;
    }

}

@media (max-width: 1024px){

    .footer-top{
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .footer-top-left{
        max-width: 100%;
    }

    .footer-top-left h2{
        max-width: 700px;
    }

}

/* Footer End */

/* Wts Float*/

.whatsapp-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.whatsapp-float {
    width: 60px;
    height: 60px;
    background-color: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    cursor: pointer;
    text-decoration: none;
    opacity: 0;
    transform: scale(0.8);
    animation: fadeIn 0.5s ease-out 0.5s forwards;
}

.whatsapp-float svg {
    width: 30px;
    height: 30px;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

.whatsapp-float::after {
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #25D366;
    opacity: 0.5;
    z-index: -1;
    animation: pulse 2s infinite;
}

.whatsapp-tooltip {
    position: absolute;
    right: 70px;
    bottom: 50%;
    transform: translateY(50%);
    background-color: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.whatsapp-tooltip::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent #333;
}

.whatsapp-container:hover .whatsapp-tooltip {
    opacity: 1;
}


@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    70% {
        transform: scale(1.6);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Wts Float End*/

/* Home */

.hero-home{
    position: relative;
    width: 100%;
    min-height: 92vh;
    display: flex;
    background: url('/assets/images/hero-home-bg.webp') center center / cover no-repeat;
}

.hero-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(4, 10, 24, 0.92) 0%,
        rgba(4, 10, 24, 0.82) 40%,
        rgba(4, 10, 24, 0.55) 100%
    );
    z-index: 1;
}

.hero-content{
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-text{
    max-width: 720px;
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero-eyebrow{

    display: inline-block;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: #4da3ff;
    letter-spacing: 0.04em;
}

.hero-home h1{
    font-size: clamp(2.8rem, 5vw, 5rem);
    line-height: 1.05;
    font-weight: 700;
    color: #fff;
    max-width: 680px;
    margin-bottom: 1.5rem;
}

.hero-home p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.82);
    max-width: 620px;
    margin-bottom: 2rem;
}

.hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
}

.hero-trust {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.68);
}

.hero-trust span{
    top: -1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hero-trust svg{
    color: #ffffff;
    stroke: #ffffff;
    opacity: .92;
    flex-shrink: 0;
    position: relative;
    top: -1px;
}

.home-services{
    padding: 100px 20px;
}

.services-intro{
    max-width: 760px;
    margin-bottom: 4rem;
}

.section-tag{
    display: inline-block;
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--brand);
    margin-bottom: 1rem;
}



.services-stack{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.service-panel{
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 2rem;
    padding: 2rem 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    transition: all .3s ease;
}

.service-panel:last-child{
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.service-panel:hover {
    transform: translateX(8px);
}

.service-number{
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-alt);
    line-height: 1;
}

.service-body h3{
    font-size: 1.5rem;
    margin-bottom: .75rem;
}

.service-body p{
    color: var(--text-secondary);
    margin-bottom: 1rem;
    max-width: 650px;
} 

.service-body ul{
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-body ul li{
    position: relative;
    padding-left: 1rem;
    color: var(--text);
    font-size: .95rem;
}

.service-body ul li::before{
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text);
    position: absolute;
    left: 0;
    top: .5rem;
}

.services-cta{
    margin-top: 3rem
}

.why-us{
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.why-us-header{
    max-width: 720px;
    margin-bottom: 3rem;
}

.why-us-header h2{
    margin-bottom: 1rem;
}

.why-layout{
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 1.5rem;
    align-items: stretch;
}

.why-featured{
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.06), transparent 35%),
        var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
}

.why-badge{
    display: inline-flex;
    padding: .45rem .85rem;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--border);
    font-size: .8rem;
    margin-bottom: 1.25rem;
}

.why-featured h3{
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    line-height: 1.15;
    margin-bottom: 1rem;
    max-width: 90%;
}

.why-featured p{
    color: var(--text-primary);
    line-height: 1.8;
    max-width: 90%;
}

.why-featured-stats{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 2rem;
}

.why-featured-stats div{
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.why-featured-stats strong{
    display: block;
    font-size: 1rem;
    margin-bottom: .35rem;
}

.why-featured-stats span{
    color: var(--text-muted);
    font-size: .92rem;
    line-height: 1.6;
}

.why-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.why-card{
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 1.75rem;
    min-height: 220px;
    transition: all .35s ease;
    position: relative;
    overflow: hidden;
}

.why-card::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.04), transparent 60%);
    opacity: 0;
    transition: opacity .35s ease;
}

.why-card:hover{
    transform: translateY(-8px);
    border-color: var(--accent);
}

.why-card:hover::before{
    opacity: 1;
}

.why-icon{
    display: inline-block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--brand-alt);
    margin-bottom: 1rem;
    line-height: 1;
}

.why-card h3{
    font-size: 1.05rem;
    margin-bottom: .75rem;
}

.why-card p{
    color: var(--text-primary);
    line-height: 1.7;
    font-size: .92rem;
}

.industries-grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
    margin-top: 2.5rem;
}

.industry-card{
    flex: 1 1 auto;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 14px 22px;
    background:
        linear-gradient(
            135deg,
            rgba(59,130,246,.08),
            rgba(37,99,235,.04)
        );
    border: 1px solid rgba(59,130,246,.15);
    border-radius: 12px;
    color: var(--text);
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    transition: all .3s ease;
    cursor: default;

}

.industry-card:hover{
    transform: translateY(-6px);
    border-color: rgba(59,130,246,.28);
    box-shadow:
        0 20px 50px rgba(0,0,0,.25),
        0 0 40px rgba(59,130,246,.08)
}

.industry-card:hover::before{
    opacity: 1;
}

.industry-card h3{
    font-size: 1.05rem;
    line-height: 1.5;
    max-width: 100%;
}


.testimonials-header{
    text-align: start;
    max-width: 760px;
    margin: 0 0 3rem;
}

.testimonial-wrapper{
    position: relative;
    width: 100%;
}

.testimonial-track{
    width: 100%;
    overflow: hidden;
    position: relative;
}

.testimonial-card{
    display: none;
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: clamp(1.8rem, 3vw, 3rem);
    min-height: 320px;
    transition: all .35s ease;
}

.testimonial-card.active{
    display: block;
    animation: fadeSlide .45s ease;
}

.testimonial-controls{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
}

.testimonial-top{
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.testimonial-logo{
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.testimonial-logo img{
    width: 100%;
    height: auto;
    object-fit: contain;
}

.testimonial-meta h3{
    font-size: 1.15rem;
    margin-bottom: .35rem;
}

.testimonial-stars{
    font-size: 1rem;
    letter-spacing: 2px;
    color: #f5b301;
}

.testimonial-text{
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--text-muted);
    margin-bottom: 2rem;
    max-width: 90%;
    text-align: justify;
    min-height: 100px;
}

.testimonial-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.testimonial-bottom strong{
    font-size: .95rem;
}

.testimonial-bottom span{
    font-size: .9rem;
    color: var(--text-muted);
}

.testimonial-nav{
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .25s ease;
}

.testimonial-nav:hover{
    border-color: var(--brand);
    color: white;
    background: var(--brand);

    transform: translateY(-2px);
}

.testimonial-company{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.testimonial-company h3{
    margin: 0;
}

.testimonial-link{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    transition: all 0.3 ease;
}

.testimonial-link:hover{
    background: var(--brand);
    border-color: var(--brand);
    color: white;

    transform: translateY(-2px);
}

.metrics-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 4rem;
}

.metrics-linear-separator{
    margin: 4rem 0 4rem;
    border-top: 1px solid var(--border);
}

.metric-card{
    position: relative;

    padding-left: 1.5rem;
}

.metric-card::before{
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 3px;
    height: 100%;

    border-radius: 999px;

    background: var(--brand);
}

.metric-card h3{
    font-size: clamp(2.2rem, 4vw, 3.5rem);

    line-height: 1;

    margin-bottom: .75rem;

    color: var(--brand);

    font-weight: 500;

    letter-spacing: -0.03em;
}

.metric-card p{
    color: var(--text-secondary);

    font-size: .95rem;

    letter-spacing: .18em;

    text-transform: uppercase;

    line-height: 1.7;
}

@media (max-width: 540px){

    .hero-carousel{
        height: 280px;
        padding: 40px;
    }

    .hero-slide img{
        width: 94%;
        height: 88%;
    }

}

@media (max-width: 1024px){
    .why-layout{
        grid-template-columns: 1fr;
    }

    .why-featured h3,
    .why-featured p{
        max-width: 100%;
    }

    .industries-grid{
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 768px){
    
    .hero-home{
        min-height: 78vh;
        background-position: center;
    }

    .hero-text{
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }


    .hero-home h1{
        font-size: 2.5rem;
        line-height: 1.1;
        margin-bottom: 1.25rem;
    }

    .hero-home p{
        font-size: 1rem;
        line-height: 1.75;
        margin-bottom: 1.75rem;
    }

    .hero-actions{
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions a{
        width: 100%;
        text-align: center;
    }

    .hero-trust{
        gap: .5rem;
        font-size: .85rem;
        line-height: 1.6;
    }

    .home-services{
        padding: 70px 40px;
    }

    .services-intro{
        margin-bottom: 3rem;
    }

    .services-intro h2{
        line-height: 1.15;
    }

    .service-panel{
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.75rem 0;
    }

    .service-number{
        font-size: 1.15rem;
    }

    .service-body h3{
        font-size: 1.3rem;
    }

    .service-body p{
        font-size: .96rem;
        line-height: 1.7;
    }

    .service-body ul{
        gap: .75rem;
    }

    .service-body ul li{
        width: 100%;
    }

    .service-panel:hover{
        transform: none;
    }
    
    .why-us{
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .why-us-header{
        margin-bottom: 2rem;
    }

    .why-us-header h2{
        line-height: 1.15;
    }

    .why-featured{
        padding: 1.5rem;
        border-radius: 22px;
    }

    .why-featured h3{
        font-size: 1.8rem;
        line-height: 1.2;
    }

    .why-featured p{
        line-height: 1.75;
        font-size: .97rem;
    }

    .why-featured-stats{
        gap: .75rem;
        margin-top: 1.5rem;
    }

    .why-card{
        padding: 1.5rem;
        border-radius: 20px;
    }

    .why-card h3{
        font-size: 1rem;
    }

    .why-card p{
        font-size: .92rem;
        line-height: 1.65;
    }

    .why-grid{
        grid-template-columns: 1fr;
    }

    .why-featured{
        padding: 2rem;
    }

    .why-card{
        min-height: auto;
    }

    .why-featured-stats{
        grid-template-columns: 1fr;
    }

    .industries{
        padding: 70px 40px;
    }

    .industries-grid{
        justify-content: flex-start;
        gap: 12px;
    }

    .industry-card{
        flex: 1 1 calc(50% - 12px);
        min-height: 54px;

        padding: 12px 16px;
        font-size: .9rem;
    }

     .testimonials{
        padding: 70px 40px;
    }

    .testimonials-header{
        margin-bottom: 2rem;
    }

    .testimonial-card{
        padding: 1.5rem;
        border-radius: 22px;
    }

    .testimonial-top{
        flex-direction: column;
        align-items: flex-start;
    }

    .testimonial-logo{
        width: 60px;
        height: 60px;
        border-radius: 14px;
    }

    .testimonial-company{
        align-items: flex-start;
        flex-wrap: wrap;
        gap: .5rem;
    }

    .testimonial-company h3{
        font-size: 1rem;
        line-height: 1.4;
    }

    .testimonial-link{
        width: 28px;
        height: 28px;
    }

    .testimonial-text{
        font-size: .96rem;
        line-height: 1.8;
        margin-bottom: 1.5rem;
    }

    .testimonial-bottom{
        gap: .35rem;
    }

    .testimonial-text{
        max-width: 100%;
        font-size: .98rem;
    }

    .testimonial-bottom{
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-carousel{
        height: 360px;
        padding: 40px;
    }

    .hero-carousel-track{
        padding: 10px;
    }
    
    .metrics-grid{
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.counter-cards{
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));

    gap: 1.5rem;

    width: 100%;
    margin-top: 2.5rem;
}

.stat-card{
    position: relative;
    overflow: hidden;

    padding: 2rem;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.02),
            rgba(255,255,255,.01)
        );

    border: 1px solid var(--border);
    border-radius: 12px;

    min-height: 240px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.stat-card::before{
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at top right,
            rgba(59,130,246,.12),
            transparent 45%
        );

    opacity: 0;
    transition: opacity .35s ease;
}

.stat-card::after{
    content: "";

    position: absolute;

    width: 140px;
    height: 140px;

    right: -50px;
    bottom: -50px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.04),
            transparent 70%
        );

    pointer-events: none;
}

.stat-card:hover{
    transform: translateY(-6px);

    border-color: rgba(59,130,246,.45);

    box-shadow:
        0 18px 40px rgba(0,0,0,.28),
        0 0 0 1px rgba(59,130,246,.08);
}

.stat-card:hover::before{
    opacity: 1;
}

.stat-card h2{
    position: relative;
    z-index: 2;

    font-size: 1.05rem;
    line-height: 1.5;
    font-weight: 600;

    margin-bottom: 2rem;

    color: var(--text);
}

.wrapper-counter{
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    min-width: 170px;

    margin: 0 auto;

    padding: 1rem 1.4rem;

    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.03),
            rgba(255,255,255,.015)
        );

    border: 1px solid rgba(255,255,255,.06);

    backdrop-filter: blur(10px);
}

.wrapper-counter::before{
    content: "";

    position: absolute;
    inset: 0;

    border-radius: inherit;

    padding: 1px;

    background:
        linear-gradient(
            135deg,
            rgba(59,130,246,.35),
            transparent 60%
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
            mask-composite: exclude;

    pointer-events: none;
}

.counter{
    margin: 0;

    font-size: clamp(2rem, 3vw, 2.6rem);
    line-height: 1;

    font-weight: 800;
    letter-spacing: -0.04em;

    color: var(--brand-alt);

    font-variant-numeric: tabular-nums;

    position: relative;
    z-index: 2;

    will-change: transform, opacity, filter;
}

.counter::after{
    content: "+";

    margin-left: 2px;

    font-size: .7em;
    opacity: .75;
}

.counter-label{
    position: relative;
    z-index: 2;

    margin-top: 1.8rem;

    color: var(--text-secondary);

    font-size: .95rem;
    line-height: 1.75;

    max-width: 260px;
}

.animate-entry{
    animation: upAndOut .38s forwards cubic-bezier(0.55, 0.08, 0.68, 0.53);
}

.animate-exit{
    animation: inFromBelow .42s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 960px){

    .counter-cards{
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }

    .counter-cards > .stat-card:last-child:nth-child(odd){
        grid-column: 1 / -1;
    }

}

@media (max-width: 640px){

    .counter-cards{
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .stat-card{
        min-height: 220px;
        padding: 1.6rem;
    }

    .wrapper-counter{
        min-width: 150px;
        padding: .9rem 1.2rem;
    }

    .counter{
        font-size: clamp(1.8rem, 8vw, 2.2rem);
    }

    .counter-label{
        font-size: .92rem;
        line-height: 1.65;
    }

}

@media (prefers-reduced-motion: reduce){

    .stat-card,
    .animate-entry,
    .animate-exit{
        transition: none;
        animation-duration: .01ms;
        animation-iteration-count: 1;
    }

}

@keyframes upAndOut{

    0%{
        transform: translateY(0);
        opacity: 1;
        filter: blur(0);
    }

    100%{
        transform: translateY(-120%);
        opacity: 0;
        filter: blur(6px);
    }

}

@keyframes inFromBelow{

    0%{
        transform: translateY(120%);
        opacity: 0;
        filter: blur(6px);
    }

    100%{
        transform: translateY(0);
        opacity: 1;
        filter: blur(0);
    }

}

/* Home End */


/* Politica de Privacidad */

/* Replaced by .container-policy*/
.policy{
    padding: 60px 20px;
    max-width: 1000px;
}

.policy-header{
    margin-bottom: 40px;
}

.policy h1{
    font-size: 32px;
    margin-bottom: 10px;
}

.policy h2{
    font-size: 22px;
    margin-top: 40px;
    margin-bottom: 25px;
    color: var(--text);
}

.policy ul{
    margin: 10px 0 20px 20px;
    color: var(--text-secondary);
}

.policy li{
    margin-bottom: 8px;
}

.policy a{
    color: var(--brand);
    text-decoration: none;
}

.policy p{
    margin-bottom: 15px;
    text-align: justify;
}

.policy a:hover{
    text-decoration: underline;
}

.policy section{
    margin-bottom: 30px;
}

.policy-date{
    margin-top: 20px;
    font-size: 14px;
    color: var(--text-secondary);
}

@media (max-width: 768px){
    /* Replaced by .container-policy*/
    .policy{
        padding: 40px;
        max-width: 100%;
    }

    .policy h1{
        font-size: 26px;
    }

    .policy h2{
        font-size: 20px;
    }

    .policy ul{
        margin-left: 16px;
    }

    .policy p, .policy li{
        font-size: 15px;
        line-height: 1.7;
    }

    .policy section{
        margin-bottom: 24px;
    }
}

/* Politica de Privacidad End */

/* Servicios */

.hero-center{
    max-width: 750px;
    margin: 0 auto 50px;
}

.hero-center h1{
    font-size: 40px;
    margin-bottom: 15px;
}

.hero-center p{
    color: var(--text-secondary);
    font-size: 18px;
    margin-bottom: 25px;
    line-height: 1.7;
}

.hero-actions{
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.services-header{
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.services-header h2{
    font-size: 30px;
    margin-bottom: 10px;
}

.services-header p{
    color: var(--text-secondary);
    line-height: 1.7;
}

.services-header{
    text-align: left;
    max-width: 700px;
    margin: 0 0 60px;
}

.services-header h2{
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 12px 0 18px;
    line-height: 1.1;
}

.services-header p{
    position: relative;

    color: var(--text-secondary);
    line-height: 1.8;
    max-width: 620px;

    padding-top: 22px;
}

.services-header p::before{
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 90px;
    height: 1px;

    background: linear-gradient(
        90deg,
        var(--brand),
        transparent
    );
}

.services-list{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 28px;
}

.service-detail-card{
    height: 100%;
}

.service-detail-card .btn-primary{
    width: fit-content;
    align-self: flex-start;
}

.service-detail-card .btn-primary,
.service-detail-card .cta-actions{
    margin-top: auto;
}

.service-detail-card{
    position: relative;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(
            135deg,
            rgba(59,130,246,.08),
            rgba(37,99,235,.04)
        );
    border: 1px solid rgba(59,130,246,.15);
    border-radius: 12px;
    padding: 34px;
    overflow: hidden;
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.service-detail-card .linear-separator{
    padding: 15px 0 10px;
}

.service-detail-card .cta-actions{
    justify-content: start;
}

.service-detail-card::after{
    content: "";
    position: absolute;
    top: -90px;
    right: -90px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(59,130,246,.08);
    filter: blur(40px);
    transition: transform .4s ease;
}

.service-detail-card:hover::after{
    transform: scale(1.15);
}

.service-detail-card::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--brand),
        transparent
    );
}

.service-detail-card:hover{
    transform: translateY(-6px);
    border-color: rgba(77,163,255,.35);
    box-shadow:
        0 20px 40px rgba(0,0,0,.22);
}

.service-card-number{
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(255,255,255,.05);
    pointer-events: none;
}

.service-detail-card h3{
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.5rem;
    margin-bottom: 14px;
}

.service-detail-card h3::before{
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand);
    flex-shrink: 0;
    box-shadow:
        0 0 10px rgba(59,130,246,.4);
}

.service-detail-card p{
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 24px;
    text-align: justify;
}

.service-detail-card ul{
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
}

.service-detail-card li{
    position: relative;
    padding-left: 32px;
    margin-bottom: 16px;
    color: var(--text-secondary);
    transition:
        transform .25s ease,
        color .25s ease;
}

.service-detail-card li:hover{
    color: var(--text);
    transform: translateX(5px);
}

.service-detail-card li::before{
    content: "✓";
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(59,130,246,.14);
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
}

.service-detail-card li:hover{
    transform: translateX(4px);
    color: var(--text);
}

.service-detail-card a{
    margin-top: auto;
    max-width: 60%;
}

.service-icon{
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 14px;
    color: var(--brand);
    background:
        linear-gradient(
            135deg,
            rgba(59,130,246,.08),
            rgba(37,99,235,.04)
        );
    border: 1px solid rgba(59,130,246,.15);
    box-shadow:
        0 0 20px rgba(59,130,246,.05);
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.service-detail-card:hover .service-icon{
    transform: translateY(-3px);
    border-color: rgba(59,130,246,.30);
    box-shadow:
        0 10px 25px rgba(0,0,0,.12),
        0 0 25px rgba(59,130,246,.08);
}

.service-icon svg{
    width: 26px;
    height: 26px;
    stroke: currentColor;
}

.pricing{
    padding: 60px 0;
}

.pricing-header{
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.pricing-header h2{
    font-size: 30px;
    margin-bottom: 10px;
}

.pricing-header p{
    color: var(--text-secondary);
    line-height: 1.7;
}

.pricing-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.pricing-card{
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.pricing-card:hover{
    transform: translateY(-6px);
    border-color: var(--brand);
    transform: scale(1.05);
}

.pricing-card.featured{
    border: 2px solid var(--brand);
    transform: scale(1.05);
}

.badge{
    display: inline-block;
    background: var(--brand);
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.price{
    font-size: 26px;
    margin: 15px 0;
    font-weight: 600;
}

.pricing-card ul{
    list-style: none;
    margin: 20px 0;
    padding: 0;
}

.pricing-card li{
    margin-bottom: 10px;
    color: var(--text-secondary);
}

.pricing-card a{
    margin-top: 10px;
}

.process-header{
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.process-header h2{
    font-size: 30px;
    margin-bottom: 10px;
}

.process-header p{
    color: var(--text-secondary);
    line-height: 1.7;
}

.process-steps{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    align-items: stretch;
}

.process-step{
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 260px;
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.75rem;
    text-align: left;
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.process-step::before{
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(59,130,246,.08);
    filter: blur(40px);
    transition: transform .4s ease;
}

.process-step:hover{
    transform: translateY(-5px);
    border-color: rgba(59,130,246,.30);
    box-shadow:
        0 15px 35px rgba(0,0,0,.20),
        0 0 25px rgba(59,130,246,.05);
}

.process-step:hover::before{
    transform: scale(1.15);
}

.process-step h3{
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

.process-step h3::before{
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand);
    flex-shrink: 0;
}

.process-step p{
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.step-number{
    font-size: .85rem;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: 1rem;
    letter-spacing: 1px;
}

.step-icon{
    position: absolute;
    top: 1rem;
    right: 1.4rem;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    pointer-events: none;
}

.step-icon svg{
    width: 18px;
    height: 18px;
}



.step-content{
    max-height: none;
    opacity: 1;
        flex: 1;
    overflow: visible;
}

.step-content p{
    color: var(--text-secondary);
    line-height: 1.8;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.06);
}
.benefits-content{
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.benefits-content::before{
    content: "";
    display: block;
    width: 70px;
    height: 4px;
    margin: 0 auto 24px;
    border-radius: 12pxpx;
    background: linear-gradient(
        90deg,
        #3B82F6,
        #2563EB,
        #1D4ED8
    );
}

.benefits-tag{
    display: inline-block;

    margin-bottom: 1rem;

    padding: .45rem .9rem;

    border-radius: 999px;

    font-size: .8rem;
    font-weight: 600;

    color: var(--brand);

    background: rgba(59,130,246,.08);

    border: 1px solid rgba(59,130,246,.15);
}

.benefits-content h2{
    font-size: 32px;
    line-height: 1.1;
    margin-bottom: 1.25rem;

}

.benefits-main{
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 15px;
}

.benefits-sub{
    color: var(--text-secondary);

    line-height: 1.8;

    max-width: 650px;

    margin: 0 auto;
}

.benefits-points{
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 2rem;
}

.benefits-points span{
    padding: .75rem 1rem;

    border-radius: 12px;

    background: rgba(59,130,246,.08);
    border: 1px solid rgba(59,130,246,.15);
    color: var(--brand);

    font-size: .9rem;

    transition: all .3s ease;
}

.benefits-points span:hover{
    border-color: rgba(59,130,246,.30);

    transform: translateY(-2px);
}

@media (max-width: 768px){

    .services-header{
        text-align: center;
    }

    .services-list{
        grid-template-columns: 1fr;
    }

    .service-detail-card{
        padding: 28px;
    }

    .services-hero-alt{
        padding: 70px 0;
    }

    .hero-center h1{
        font-size: 28px;
    }

    .hero-center p{
        font-size: 16px;
    }

    .services-header h2{
        font-size: 24px;
    }

    .pricing-grid{
        grid-template-columns: 1fr;
    }

    .pricing-card.featured{
        transform: none;
    }

    .process-steps{
        grid-template-columns: 1fr;
    }

    .step-content{
        max-height: none;
        opacity: 1;
        margin-top: 10px;
    }

}

/* Servicios End */

/* Pricing */

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

.pricing-header{
    max-width: 760px;
    margin-bottom: 60px;
}

.pricing-header h2{
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.1;
    margin: 18px 0;
    letter-spacing: -0.03em;
}

.pricing-header p{
    color: var(--text-secondary);
    line-height: 1.8;
}

.pricing-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.pricing-card{
    position: relative;
    padding: 34px;
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            rgba(59,130,246,.08),
            rgba(37,99,235,.04)
        );
    border: 1px solid rgba(59,130,246,.15);
    backdrop-filter: blur(14px);
    transition: all .35s ease;
    overflow: hidden;
}

.pricing-card:hover{
    transform: translateY(-6px);
    border-color: var(--brand);
}

.pricing-card::before{
    content: "";
    position: absolute;
    top: 0;
    left: 32px;
    width: 120px;
    height: 1px;
    background: linear-gradient(
        to right,
        var(--accent),
        transparent
    );
}

.pricing-card-featured{
    border-color: rgba(37,99,235,0.35);
    background:
        linear-gradient(
            180deg,
            rgba(98, 145, 247, 0.178),
            rgba(141, 24, 24, 0.02)
        );
}

.pricing-badge{
    display: inline-flex;
    padding: 8px 14px;
    margin-bottom: 18px;
    border-radius: 999px;
    font-size: .82rem;
    background: rgba(59,130,246,.1);
    color: var(--brand);
    border: 1px solid rgba(37,99,235,0.25);
}   

.pricing-plan{
    display: block;
    margin-bottom: 12px;
    color: var(--text-secondary);
    font-size: .95rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pricing-card h3{
    font-size: 1.5rem;
    margin-bottom: 18px;
}

.pricing-header h3{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
}

.pricing-header h3::before{
    content: "";
    width: 42px;
    height: 1px;
    background: linear-gradient(
        to right,
        var(--accent),
        transparent
    );
    opacity: .9;
}

.pricing-header h3::after{
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 14px rgba(255,255,255,0.35);
}

.pricing-price{
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 18px;
    letter-spacing: -0.04em;
}

.pricing-description{
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 28px;
}

.pricing-features{
    display: grid;
    gap: 14px;
    margin-bottom: 34px;
    padding: 0;
    list-style: none;
}

.pricing-features li{
    position: relative;
    padding-left: 24px;
    color: var(--text-secondary);
}

.pricing-features li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px rgba(255,255,255,0.4);
}

.included-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.included-card{
    position: relative;
    padding: 30px;
    border-radius: 12px;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            rgba(59,130,246,.08),
            rgba(37,99,235,.04)
        );

    border: 1px solid rgba(59,130,246,.15);
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.included-card::before{
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(59,130,246,.08);
    filter: blur(40px);
    pointer-events: none;
}

.included-card::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--brand),
        transparent
    );
}

.included-card:hover{
    transform: translateY(-6px);
    border-color: rgba(59,130,246,.30);
    box-shadow:
        0 20px 40px rgba(0,0,0,.20);
}

.included-icon{
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            rgba(59,130,246,.12),
            rgba(37,99,235,.06)
        );
    border: 1px solid rgba(59,130,246,.18);
    color: var(--brand);
    position: relative;
    z-index: 1;
}

.included-card h3{
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
}

.included-card p{
    position: relative;
    z-index: 1;
    color: var(--text-secondary);
    line-height: 1.8;
    margin: 0;
}

@media(max-width:992px){
    .included-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){
    .included-grid{
        grid-template-columns:1fr;
    }
}

.comparison-table-wrapper{
    backdrop-filter: blur(14px);
    transition: all .35s ease;
    overflow: hidden;
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            rgba(59,130,246,.08),
            rgba(37,99,235,.04)
        );
    border: 1px solid rgba(59,130,246,.15);
}

.comparison-table{
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.comparison-table th{
    text-align: left;
    padding: 24px;
    font-size: .95rem;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.comparison-table td{
    padding: 22px 24px;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.gray-text{
    margin: 12px 0 22px;
    color: var(--text-secondary);
}

.pricing-comparison-row{
    background: rgba(255,255,255,0.02)
}

.comparison-table .item-comparison{
    color: var(--brand);
}

.comparison-table tr:last-child td{
    border-bottom: none;
}

.comparison-table td:not(:first-child),
.comparison-table th:not(:first-child){
    text-align: center;
}

.comparison-table tbody tr:hover{
    background: rgba(255,255,255,0.02);
}

.comparison-note{
    text-align: center;
    padding: 20px 20px 0;
    justify-content: center;
}

.comparison-note a{
    color: var(--brand);
    text-decoration: none;
}

@media (max-width: 1024px){

    .pricing-grid{
        grid-template-columns: 1fr;
    }

}

@media (max-width: 768px){

    .pricing-section{
        padding: 80px 0;
    }

    .pricing-card{
        padding: 28px;
        border-radius: 24px;
    }

    .pricing-price{
        font-size: 1.7rem;
    }

    .comparison-section{
        padding-bottom: 80px;
    }

    .comparison-table-wrapper{
        border-radius: 18px;
    }

    .comparison-table{
        min-width: 620px;
    }

    .comparison-table th{
        padding: 14px 12px;
        font-size: .78rem;
        white-space: nowrap;
    }

    .comparison-table td{
        padding: 14px 12px;
        font-size: .76rem;
        line-height: 1.5;
    }

    .comparison-table td:first-child,
    .comparison-table th:first-child{
        min-width: 170px;
        text-align: left;
    }

    .comparison-table td:not(:first-child),
    .comparison-table th:not(:first-child){
        min-width: 110px;
    }    

}

/* Pricing End*/