/* RESET */

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


/* VARIABLES */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap');

/* =========================================================
   TIPOGRAFÍA GLOBAL
========================================================= */

html,
body,
button,
input,
textarea,
select{
    font-family:'Rubik', sans-serif;
}

*,
*::before,
*::after{
    font-family:inherit;
}

section {
    padding: 7rem 5%;
}

:root {
    --c1: #968EEF;
    --c2: #FFBB95;
    --c3: #716BB3;
    --c4: #CDC9F7;
    --c5: #BF8C70;
    --c6: #FFDECC;

    --dark: #0E0D1A;
    --dark2: #16152A;

    --text: #F0EEF8;
    --muted: rgba(240, 238, 248, 0.55);
}



/* BASE */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Rubik', sans-serif;
    background: var(--dark);
    color: var(--text);
    overflow-x: hidden;
}





/* NAV */

nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;

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

    padding: 0.7rem 5%;

    background: transparent;
}

nav.scrolled {
    background: rgba(14, 13, 26, 0.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(150, 142, 239, 0.15);

    transition:
        background 0.4s,
        backdrop-filter 0.4s,
        border-color 0.4s;
}

.logo-img {
    height: 75px !important;
    max-width: 3000px !important;
    width: auto !important;
    display: block;
}

.nav-links {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    align-items: center;
}

.nav-links a {
    font-family: 'Rubik', sans-serif !important;

    color: rgba(240, 238, 248, 0.9);
    text-decoration: none;

    font-size: 1.15rem;
    font-weight: 700 !important;

    transition: color 0.2s;
}

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

.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.65rem 1.3rem !important;

    background: linear-gradient(
        135deg,
        #7C5CFF 0%,
        #A56BFF 40%,
        #FF9F8B 100%
    ) !important;

    color: #ffffff !important;

    border-radius: 10px;

    font-family: 'Rubik', sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;

    box-shadow:
        0 8px 24px rgba(124, 92, 255, 0.25),
        0 0 0 1px rgba(255,255,255,0.08);

    transition: all .3s ease;
}

nav,
nav a,
nav button {
    font-family: 'Rubik', sans-serif !important;
}

.nav-cta:hover {
    background: #ffffff !important;
    color: #7C5CFF !important;

    border-color: #FF9F8B;
    box-shadow: none;

    transform: translateY(-2px);
}

.menu-toggle {
    display: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--text);
}

.logo-link {
    display: block;
    text-decoration: none;
}

.logo-link .logo-img {
    display: block;
}

/* HERO */


#hero {
    min-height: 100vh;
    position: relative;

    display: flex;
    align-items: center;

    overflow: hidden;
    padding: 0;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image: url('../assets/imagenes/fondo_hero.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(
        105deg,
        rgba(14, 13, 26, 0.88) 0%,
        rgba(14, 13, 26, 0.72) 45%,
        rgba(14, 13, 26, 0.38) 100%
    );
}

.hero-overlay-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;

    height: 160px;
    background: linear-gradient(to top, var(--dark), transparent);
}

.hero-content {
    position: relative;
    z-index: 3;

    display: grid;
    grid-template-columns: 1fr 1.1fr;
    align-items: center;
    gap: 4rem;

    width: 100%;
    padding: 10rem 5% 5rem;
}



.hero-tag {
    display: inline-block;

    margin-bottom: 1.6rem;
    padding: 0.35rem 0.9rem;

    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;

    color: var(--c2);
    background: rgba(255, 187, 149, 0.08);
    border: 1px solid rgba(255, 187, 149, 0.35);
    border-radius: 100px;
}

.hero-title {
    margin-bottom: 1.5rem;

    font-size: clamp(3rem, 5vw, 5.2rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.05em;
}

.hero-title .accent {
    background: linear-gradient(
        135deg,
        #7C5CFF 0%,
        #B56BFF 38%,
        #FF6FB5 68%,
        #FF9F74 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    max-width: 650px;
    margin-bottom: 2.8rem;

    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1.7;

    color: rgba(240, 238, 248, 0.82);
}

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

.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;

    min-height: 58px;
    padding: 0.9rem 2rem;
    border-radius: 9px;

    font-family: 'Rubik', sans-serif;
    font-size: 1rem;
    text-decoration: none;

    cursor: pointer;
}

.btn-primary {
    background: linear-gradient(135deg, var(--c1), #7B4DFF);
    color: #fff;
    border: none;

    font-weight: 600;

    box-shadow: 0 0 25px rgba(150, 142, 239, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary:hover {
    background: transparent;

    border: 1px solid #A56BFF;

    color: transparent;

    background-image: linear-gradient(
        135deg,
        #7C5CFF,
        #A56BFF,
        #FF9F8B
    );

    -webkit-background-clip: text;
    background-clip: text;

    transform: translateY(-2px);

    box-shadow: none;
}

.btn-secondary {
    background: rgba(14, 13, 26, 0.35);
    color: var(--text);
    border: 1px solid rgba(150, 142, 239, 0.55);

    font-weight: 600;

    transition: border-color 0.2s, color 0.2s;
}

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


.hero-left h1 {
    font-size: 3.36rem;
    line-height: 1.05;
}

.hero-left p {
    font-size: 1.1rem;
    line-height: 1.55;
}

.hero-right {
    position: relative;
    width: 700px;
    height: 260px;
    align-self: center;

    left: 200px;
}

.hero-card {
    position: absolute;

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

    text-align: center;

    background: transparent;
    border: none;

    animation: orbit 16s linear infinite;  
}

.hero-mobile-marquee{
    display:none;
}

.hero-card img {
    width: 82px;
    height: 82px;
    object-fit: cover;

    margin-bottom: 1.4rem;

    border-radius: 50%;
}
.hero-card h3 {
    margin-bottom: 0.6rem;

    font-size: 1.5rem;
    font-weight: 800;
}

.hero-card p {
    font-size: 1rem;
    line-height: 1.45;

    color: rgba(240, 238, 248, 0.82);
}

.hero-card:nth-child(1){
    animation-delay:0s;
}

.hero-card:nth-child(2){
    animation-delay:-4s;
}

.hero-card:nth-child(3){
    animation-delay:-8s;
}

.hero-card:nth-child(4){
    animation-delay:-12s;
}

@keyframes orbit {

    0%{
        transform:
        rotate(0deg)
        translateX(220px)
        rotate(0deg);

        opacity:1;
        scale:1;
        z-index:4;
    }

    25%{
        opacity:.75;
        scale:.90;
    }

    50%{
        opacity:.35;
        scale:.70;
    }

    75%{
        opacity:.75;
        scale:.90;
    }

    100%{
        transform:
        rotate(360deg)
        translateX(220px)
        rotate(-360deg);

        opacity:1;
        scale:1;
        z-index:4;
    }

}

/* Ocultar stats anteriores si quedan */
.hero-stats {
    display: none;
}


/* TITULOS DE SECCIÓN */

.section-tag {
    display: block;

    margin-bottom: 1rem;

    font-size: 4rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;

    color: var(--c1);
}

.section-title {
    margin-bottom: 1.2rem;

    font-size: clamp(1.9rem, 3.5vw, 2.8rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.section-subtitle {
    max-width: 560px;

    font-size: 1.05rem;
    font-weight: 300;
    line-height: 1.7;

    color: var(--muted);
}



/* SEcciones claro */

.secciones-claro {
    position: relative;
    overflow: hidden;
    background: #fff;
}

.secciones-claro::before {
    content: "";
    position: absolute;
    top: -220px;
    right: -260px;
    width: 1150px;
    height: 1150px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(124, 92, 255, .52) 0%,
        rgba(190, 91, 255, .38) 30%,
        rgba(255, 111, 181, .28) 52%,
        rgba(255, 149, 111, .18) 66%,
        transparent 76%
    );
    filter: blur(18px);
    pointer-events: none;
    animation: colorFloatOne 10s ease-in-out infinite alternate;
}

.secciones-claro::after {
    content: "";
    position: absolute;
    left: -280px;
    bottom: -260px;
    width: 1100px;
    height: 1100px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 126, 92, .42) 0%,
        rgba(255, 111, 181, .34) 30%,
        rgba(196, 112, 255, .30) 52%,
        rgba(108, 99, 255, .18) 68%,
        transparent 78%
    );
    filter: blur(22px);
    pointer-events: none;
    animation: colorFloatTwo 12s ease-in-out infinite alternate;
}


.secciones-claro > section {
    position: relative;
    z-index: 1;
}

@keyframes colorFloatOne {
    0% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(-260px, 180px) scale(1.18);
    }

    66% {
        transform: translate(-520px, 480px) scale(.92);
    }

    100% {
        transform: translate(-180px, 760px) scale(1.14);
    }
}

@keyframes colorFloatTwo {
    0% {
        transform: translate(0, 0) scale(1.05);
    }

    33% {
        transform: translate(280px, -220px) scale(.9);
    }

    66% {
        transform: translate(620px, -460px) scale(1.2);
    }

    100% {
        transform: translate(900px, -720px) scale(1);
    }
}

/* SERVICIOS */

#nosotros {
    padding-bottom: 6rem;
}

#servicios {
    padding-top: 6rem;
}

#nosotros,
#servicios {
    position: relative;
    background: transparent;
}


#servicios::before,
#servicios::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(20px);
}

#servicios::before {
    top: -220px;
    left: -180px;
    background: radial-gradient(circle, rgba(150,142,239,.16), transparent 68%);
}

#servicios::after {
    right: -180px;
    bottom: -230px;
    background: radial-gradient(circle, rgba(255,159,139,.18), transparent 68%);
}

.servicios-header {
    position: relative;
    z-index: 2;
    margin-bottom: 3.5rem;
    text-align: center;
}

.servicios-header .section-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    margin-bottom: 1.5rem;
    color: #7866ef;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.servicios-header .section-tag::before {
    content: "";
    width: 9px;
    height: 9px;
    background: #7866ef;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(120,102,239,.5);
}

.servicios-header .section-tag::after {
    content: "";
    width: 32px;
    height: 1px;
    background: rgba(120,102,239,.35);
}

.servicios-header .section-title {
    margin-bottom: .8rem;
    color: #091128;
    font-size: clamp(2.3rem, 4vw, 4rem);
    font-weight: 900;
    line-height: 1.05;
}

.servicios-header .section-title span {
    display: block;
    background: linear-gradient(90deg, #7866ef, #b66cfa, #ff8b72);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.servicios-header .section-subtitle {
    max-width: none;
    color: #656b7c;
    font-size: 1.05rem;
}

.servicios-slider {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    width: 100%;
    overflow: visible;
}

.servicios-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(180px, 1fr);
    gap: 1rem;
    width: 100%;
    padding: 4.5rem 1.5rem 5rem;
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

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


.servicio-link{
    display:block;
    text-decoration:none;
    color:inherit;
    height:100%;
}

.servicio-link .servicio-card{
    height:100%;
    cursor:pointer;
}

.servicio-card {
    position: relative;
    z-index: 1;
    min-height: 340px;
    padding: 2rem 1.5rem;
    scroll-snap-align: start;

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

    text-align: center;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(120,102,239,.12);
    border-radius: 22px;
    box-shadow: 0 14px 40px rgba(44,38,92,.08);

    overflow: hidden;
    isolation: isolate;
    transform-origin: center center;

    transition:
        transform .5s cubic-bezier(.2,.8,.2,1),
        box-shadow .5s ease,
        border-color .4s ease,
        opacity .35s ease,
        filter .35s ease;
}

.servicio-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background: linear-gradient(
        145deg,
        rgba(120,102,239,.18),
        rgba(196,112,255,.15),
        rgba(255,149,111,.18)
    );

    opacity: 0;
    transform: scale(.7) rotate(-10deg);
    transition:
        opacity .45s ease,
        transform .55s cubic-bezier(.2,.8,.2,1);
}

.servicio-card:hover {
    z-index: 20;
    transform:
        translateY(-30px)
        scale(1.14)
        rotate(-5deg);

    border-color: rgba(120,102,239,.42);

    box-shadow:
        -10px 30px 45px rgba(36,28,90,.16),
        0 50px 90px rgba(74,54,170,.25);
}

.servicio-card:nth-child(even):hover {
    transform:
        translateY(-30px)
        scale(1.14)
        rotate(5deg);
}

.servicio-card:hover::after {
    opacity: 1;
    transform: scale(1.25) rotate(0);
}

.servicio-icon {
    position: relative;
    z-index: 2;
    display: block;
    width: 78px;
    height: 78px;
    margin-bottom: 1.4rem;
    object-fit: contain;
    border-radius: 50%;

    transition:
        transform .5s cubic-bezier(.2,.8,.2,1),
        filter .45s ease;
}

.servicio-card h3 {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #10162c;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.2;

    transition: transform .45s ease;
}

.servicio-card p {
    position: relative;
    z-index: 2;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;

    opacity: 0;
    transform: translateY(30px);

     color:#4f5368;
    font-size: .92rem;
    line-height: 1.65;

    transition:
        max-height .55s ease,
        opacity .35s ease .08s,
        transform .45s ease,
        margin-top .45s ease;
}

.servicio-card:hover .servicio-icon {
    transform:
        translateY(-12px)
        scale(1.15)
        rotate(-7deg);

    filter: drop-shadow(0 14px 22px rgba(120,102,239,.32));
}

.servicio-card:nth-child(even):hover .servicio-icon {
    transform:
        translateY(-12px)
        scale(1.15)
        rotate(7deg);
}

.servicio-card:hover h3 {
    transform: translateY(-8px);
}

.servicio-card:hover p {
    max-height: 170px;
    margin-top: 1rem;
    opacity: 1;
    transform: translateY(0);
}

.servicios-track:has(.servicio-card:hover) .servicio-card:not(:hover) {
    opacity: .5;
    transform: scale(.93);
    filter: blur(.4px);
}

.servicios-arrow {
    position: relative;
    z-index: 30;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: #7866ef;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(120,102,239,.14);
    border-radius: 50%;
    font-family: inherit;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(44,38,92,.09);
    transition: all .25s ease;
}

.servicios-arrow:hover {
    color: #fff;
    background: #7866ef;
    transform: scale(1.08);
}

.servicio-ver-mas{
    color:#7866ef;
}

/* BLOG */

#blog {
    position: relative;
    padding: 4rem 5%;
    color: #091128;
}

.blog-header{
    width:100%;
    max-width:none;
    margin-bottom:2.2rem;
    text-align:left;
}

.blog-header .section-tag {
    color: #735cff;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .18em;
}

.blog-header .section-title{
    max-width:1100px;
    margin-bottom:.8rem;

    color:#091128;
    font-size:clamp(2.5rem,3.8vw,4rem);
    line-height:1.02;
}

.blog-header .section-title span {
    display: block;
    background: linear-gradient(90deg, #6c63ff, #c470ff, #ff956f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.blog-header .section-subtitle{
    max-width:900px;

    color:#60667a;
    font-size:1.15rem;
    line-height:1.7;
}

.blog-layout {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 2rem;
    align-items: stretch;
}

.blog-featured{
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    border:1px solid rgba(90,80,180,.12);
    box-shadow:0 20px 50px rgba(32,24,80,.06);
}

.blog-featured-image{
    width:100%;
    height:300px;
    overflow:hidden;
    border-radius:22px 22px 0 0;
}

.blog-featured-image a{
    display:block;
    width:100%;
    height:100%;
}

.blog-featured-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:transform .4s ease;
}

.blog-featured-image:hover img{
    transform:scale(1.02);
}


.blog-featured:hover .blog-featured-image img {
    transform: scale(1.04);
}

.blog-featured-content{
     padding:1.8rem 2.2rem;
}

.blog-featured-content h3{
    margin:.8rem 0 1rem;
    color:#091128;
    font-size:clamp(2rem,2.7vw,2.8rem);
    line-height:1.08;
}

.blog-featured-content p{
    margin-bottom:1.5rem;
    color:#60667a;
    font-size:1.05rem;
    line-height:1.7;
}

.blog-category {
    display: inline-block;
    margin-bottom: .8rem;
    color: #735cff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.blog-featured h3 {
    max-width:780px;
    margin-bottom:.7rem;
    font-size:1.8rem;
    line-height:1.12;
}

.blog-featured p {
    color: #62687a;
    font-size: 1rem;
    line-height: 1.7;
}

.blog-featured a,
.blog-small-card a {
    display: inline-flex;
    margin-top: 1.3rem;
    color: #735cff;
    font-weight: 700;
    text-decoration: none;
}

.blog-secondary {
    display:grid;
    grid-template-rows:repeat(3, 1fr);
    gap:1rem;
}

.blog-small-card {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1.2rem;
    align-items: center;

    padding: 1rem;
    background: #fff;
    border: 1px solid rgba(115, 92, 255, .12);
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(24, 29, 65, .07);

    transition: transform .3s ease, box-shadow .3s ease;
}

.blog-small-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(24, 29, 65, .12);
}

.blog-small-card img {
    width:150px;
    height:110px;
    object-fit:cover;
    border-radius:14px;
}

.blog-small-card h3 {
    font-size: 1.15rem;
    line-height: 1.3;
}

.blog-small-card a {
    margin-top:.4rem;
    font-size:.9rem;
}

.blog-button {
    margin-top: 3rem;
    text-align: center;
}

/* CONTACTO */

#contacto{
    position:relative;
    overflow:hidden;
    padding:7rem 5%;
    background:
        radial-gradient(circle at 90% 35%,rgba(183,72,255,.20),transparent 30%),
        radial-gradient(circle at 80% 70%,rgba(255,104,120,.14),transparent 32%),
        linear-gradient(135deg,#05051a 0%,#08071f 50%,#0c0923 100%);
}

.contacto-spirals{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
}

.spiral{
    position:absolute;
    display:block;
    object-fit:contain;
    opacity:.2;
    transform-origin:center;
    animation:spiralSpin 22s linear infinite;
}

.spiral-1{
    width:440px;
    height:440px;
    top:-100px;
    right:-80px;
    opacity:.25;
    animation-duration:24s;
}

.spiral-2{
    width:260px;
    height:260px;
    top:18%;
    left:-70px;
    opacity:.15;
    animation-duration:18s;
    animation-direction:reverse;
}

.spiral-3{
    width:320px;
    height:320px;
    top:34%;
    right:28%;
    opacity:.12;
    animation-duration:28s;
}

.spiral-4{
    width:220px;
    height:220px;
    bottom:4%;
    left:12%;
    opacity:.13;
    animation-duration:20s;
    animation-direction:reverse;
}

.spiral-5{
    width:340px;
    height:340px;
    right:-60px;
    bottom:-100px;
    opacity:.18;
    animation-duration:32s;
}

@keyframes spiralSpin{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}

.contacto-inner{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1400px;
    margin:0 auto;
}

.contacto-copy{
    max-width:900px;
    margin:0 auto 4rem;
    text-align:center;
}

.contacto-copy .section-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:2rem;
    padding:.55rem 1.2rem;
    color:#c485ff;
    background:rgba(120,74,255,.08);
    border:1px solid rgba(145,86,255,.55);
    border-radius:100px;
    font-size:.85rem;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.contacto-copy .section-title{
    margin:0 auto 1.5rem;
    color:#fff;
    font-size:clamp(3rem,5vw,5rem);
    font-weight:900;
    line-height:1.05;
    letter-spacing:-.045em;
}

.contacto-copy .section-title span{
    background:linear-gradient(90deg,#a765ff,#e45fff,#ff8170);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.contacto-copy .section-subtitle{
    max-width:780px;
    margin:0 auto;
    color:rgba(240,238,248,.68);
    font-size:1.08rem;
    line-height:1.75;
}

.contacto-options{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
    width:100%;
    max-width:1000px;
    margin:0 auto;
}

.contacto-option{
    position:relative;
    min-height:225px;
    padding:2rem 1.3rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    text-decoration:none;
    color:#fff;
    background:rgba(12,10,43,.72);
    border:1px solid rgba(126,83,255,.24);
    border-radius:16px;
    box-shadow:0 20px 50px rgba(0,0,0,.15);
    overflow:hidden;
    transition:transform .4s ease,border-color .4s ease,box-shadow .4s ease;
}

.contacto-option::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(145deg,rgba(109,72,255,.16),rgba(213,64,255,.08),rgba(255,105,83,.12));
    opacity:0;
    transition:opacity .4s ease;
}

.contacto-option:hover{
    transform:translateY(-12px) scale(1.04);
    border-color:rgba(171,95,255,.65);
    box-shadow:0 30px 65px rgba(80,45,180,.28);
}

.contacto-option:hover::before{
    opacity:1;
}

.contacto-option .opt-icon,
.contacto-option .opt-label,
.contacto-option .opt-value,
.contacto-option .opt-line{
    position:relative;
    z-index:2;
}

.contacto-option .opt-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:68px;
    height:68px;
    margin-bottom:1.4rem;
    background:radial-gradient(circle,rgba(135,78,255,.35),rgba(88,44,191,.15));
    border:1px solid rgba(150,90,255,.35);
    border-radius:50%;
    font-size:1.8rem;
    box-shadow:0 0 30px rgba(119,72,255,.25);
    transition:transform .4s ease;
}

.opt-icon img{
    width:34px;
    height:34px;
    object-fit:contain;
}

.contacto-option:nth-child(2) .opt-icon{
    background:radial-gradient(circle,rgba(222,67,255,.3),rgba(120,35,155,.12));
}

.contacto-option:nth-child(3) .opt-icon{
    background:radial-gradient(circle,rgba(255,111,72,.32),rgba(160,62,35,.12));
}

.contacto-option:hover .opt-icon{
    transform:scale(1.12) rotate(-6deg);
}

.contacto-option .opt-label{
    margin-bottom:.7rem;
    color:rgba(240,238,248,.58);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.contacto-option .opt-value{
    max-width:150px;
    font-size:1.05rem;
    font-weight:700;
    line-height:1.35;
}

.opt-line{
    display:block;
    width:26px;
    height:3px;
    margin-top:1.4rem;
    background:#805cff;
    border-radius:20px;
}

.contacto-option:nth-child(2) .opt-line{
    background:#e552f7;
}

.contacto-option:nth-child(3) .opt-line{
    background:#ff875d;
}

.contacto-cierre{
    max-width:760px;
    margin:4.5rem auto 0;
    text-align:center;
}

.contacto-cierre p{
    max-width:680px;
    margin:0 auto 2rem;
    color:rgba(240,238,248,.68);
    font-size:1.08rem;
    line-height:1.7;
}

.contacto-cierre .btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:54px;
    padding:.85rem 1.7rem;
}

/* CLIENTES */

#clientes{
    position:relative;
    padding:7rem 5%;
    overflow:hidden;
    background:transparent;
}

.clientes-header{
    margin-bottom:3.5rem;
    text-align:center;
}

.clientes-header .section-tag{
    margin-bottom:1rem;
    color:#735CFF;
    font-size:.9rem;
    font-weight:700;
    letter-spacing:.18em;
}

.clientes-header .section-title{
    color:#091128;
    font-size:clamp(2.6rem,4vw,4.2rem);
    line-height:1.05;
}

.clientes-header .section-title span{
    display:block;
    background:linear-gradient(90deg,#6C63FF,#C470FF,#FF956F);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.clientes-marquee{
    position:relative;
    width:100%;
    overflow:hidden;
    background:transparent;
}



.clientes-track{
    display:flex;
    align-items:center;
    gap:5rem;
    width:max-content;

    animation:clientesScroll 28s linear infinite;
}

.clientes-track img{
    flex:0 0 auto;
    width:300px;
    height:180px;
    object-fit:contain;

    filter:grayscale(100%);
    opacity:.65;

    transition:
        filter .3s ease,
        opacity .3s ease,
        transform .3s ease;
}

.clientes-track img:hover{
    filter:grayscale(0%);
    opacity:1;
    transform:scale(1.08);
}

.clientes-marquee:hover .clientes-track{
    animation-play-state:paused;
}

@keyframes clientesScroll{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(calc(-50% - 2.5rem));
    }
}

.clientes-proyectos{
    display:flex;
    justify-content:center;
    margin-top:3.5rem;
}

.btn-clientes-proyectos{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:1rem 2rem;
    border-radius:100px;
    background:linear-gradient(90deg,#7465ff,#bd71ff,#ff9878);
    color:#fff;
    font-size:.95rem;
    font-weight:600;
    text-decoration:none;
    transition:transform .3s ease,box-shadow .3s ease;
}

.btn-clientes-proyectos:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(123,92,255,.3);
}


/* FOOTER */

.footer {
    padding: 4rem 5%;

    background: #0E0D1A;
    color: rgba(240, 238, 248, 0.8);
}

.footer-top{
    display:flex;
    align-items:flex-start;
    margin-bottom:2rem;
}

.footer-top .logo-img{
    width:320px;
    height:auto;
}

.footer-middle{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    align-items:start;

    width:55%;
    margin-left:auto;
    margin-top:-5.8rem;

    gap:6rem;
}

.footer-middle .footer-col:first-child{
    transform: translateX(-65px);
}

.footer-col {
    flex: 0 0 auto;
}

.footer-col h4 {
    margin-bottom: 1.2rem;

    font-size: 2rem;
    font-weight: 700;
}

.footer-col p {
    margin-bottom: 0.9rem;

    font-size: 1.25rem;
    font-weight: 400;
}

.social-icons {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.social-icons img {
    width: 58px;
    height: 58px;
    object-fit: contain;

    opacity: 0.8;
    cursor: pointer;

    transition: all 0.3s ease;
}

.social-icons img:hover {
    opacity: 1;
    transform: scale(1.1);
}

.footer-bottom {
    padding-top: 1.5rem;

    text-align: center;
    font-size: 0.9rem;

    border-top: 1px solid rgba(150, 142, 239, 0.2);
}


/* WHATSAPP FLOTANTE */

.whatsapp-float {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    z-index: 9999;

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

    width: 58px;
    height: 58px;

    background: #25D366;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);

    transition: transform 0.2s, box-shadow 0.2s;
}

.whatsapp-float:hover {
    transform: translateY(-4px) scale(1.07);
    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.6);
}

.whatsapp-float img {
    width: 32px;
    height: 32px;
}


/* ANIMACIONES */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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





#servicios::before,
#servicios::after{
    display:none !important;
}


#servicios .section-title{
    color:#fff;
}

#servicios .section-subtitle{
    color:rgba(255,255,255,.75);
}


/* =========================================================
   ANIMACIONES DE ENTRADA
========================================================= */
.reveal-up,.reveal-left,.reveal-right,.reveal-scale{
    opacity:0;
    transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1);
    will-change:opacity,transform;
}
.reveal-up{transform:translateY(35px);}
.reveal-left{transform:translateX(-40px);}
.reveal-right{transform:translateX(40px);}
.reveal-scale{transform:scale(.94);}
.reveal-up.is-visible,.reveal-left.is-visible,.reveal-right.is-visible,.reveal-scale.is-visible{
    opacity:1;
    transform:none;
}
.reveal-delay-1{transition-delay:.1s;}
.reveal-delay-2{transition-delay:.2s;}
.reveal-delay-3{transition-delay:.3s;}
.reveal-delay-4{transition-delay:.4s;}
.reveal-delay-5{transition-delay:.5s;}
.reveal-delay-6{transition-delay:.6s;}

@media(prefers-reduced-motion:reduce){
    .reveal-up,.reveal-left,.reveal-right,.reveal-scale{
        opacity:1;
        transform:none;
        transition:none;
    }
}


/* FLECHAS OCULTAS POR DEFECTO */
.servicios-arrow,
.web-showcase-toggle{
    display:none;
}