/* =========================
   GOOGLE FONTS
========================= */

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



/* =========================
   RESET
========================= */

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



/* =========================
   VARIABLES
========================= */

:root{

    --color-fondo: #f3f6fb;
    --color-blanco: #ffffff;

    --color-texto: #0f172a;
    --color-texto-secundario: #64748b;

    --color-borde: rgba(255,255,255,0.6);

    --color-principal: #0f172a;

    --color-whatsapp: #25D366;
    --color-whatsapp-hover: #1ebe5d;

    --azul-metalico:
        linear-gradient(
            135deg,
            #7dd3fc 0%,
            #60a5fa 20%,
            #2563eb 40%,
            #3b82f6 60%,
            #38bdf8 80%,
            #93c5fd 100%
        );

    --azul-brillo:
        radial-gradient(
            circle at top,
            rgba(96,165,250,0.35),
            transparent 60%
        );

    --glass:
        rgba(255,255,255,0.65);

    --sombra-suave:
        0 10px 40px rgba(15,23,42,0.08);

    --sombra-hover:
        0 20px 50px rgba(37,99,235,0.15);

    --radio: 26px;

}



/* =========================
   HTML
========================= */

html{
    scroll-behavior: smooth;
}



/* =========================
   BODY
========================= */

body{

    font-family: 'Inter', sans-serif;

    background:
        radial-gradient(
            circle at top left,
            rgba(125,211,252,0.18),
            transparent 30%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(59,130,246,0.10),
            transparent 30%
        ),
        var(--color-fondo);

    color: var(--color-texto);

    line-height: 1.6;

    overflow-x: hidden;
}



/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar{
    width: 10px;
}

::-webkit-scrollbar-thumb{

    background:
        linear-gradient(
            180deg,
            #60a5fa,
            #2563eb
        );

    border-radius: 999px;
}



/* =========================
   CONTENEDOR GENERAL
========================= */

section,
header,
footer{

    width: 100%;

    padding-left: 7%;
    padding-right: 7%;
}



/* =========================
   HEADER
========================= */

.header{

    width: 100%;
    height: 92px;

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

    position: fixed;
    top: 0;
    left: 0;

    z-index: 9999;

    padding-left: 7%;
    padding-right: 7%;

    background:
        rgba(255,255,255,0.42);

    backdrop-filter: blur(14px);

    border-bottom:
        1px solid rgba(255,255,255,0.28);

    transition:
        height 0.4s ease,
        background 0.4s ease,
        box-shadow 0.4s ease,
        backdrop-filter 0.4s ease,
        border 0.4s ease;
}



/* =========================
   HEADER SCROLL
========================= */

.header.scrolled{

    height: 72px;

    background:
        rgba(255,255,255,0.68);

    backdrop-filter: blur(22px);

    border-bottom:
        1px solid rgba(255,255,255,0.55);

    box-shadow:
        0 10px 30px rgba(15,23,42,0.08);
}



/* =========================
   LOGO
========================= */

.logo h2{

    font-family: 'Manrope', sans-serif;

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

    letter-spacing: -1px;

    background: var(--azul-metalico);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: transform 0.35s ease, letter-spacing 0.35s ease;
}

/* =========================
   LOGO SCROLL
========================= */

.header.scrolled .logo h2{

    transform: scale(0.92);

    letter-spacing: -0.5px;
}

/* =========================
   NAV
========================= */

.nav{

    display: flex;
    align-items: center;
    
    gap: 2rem;
}

.nav a{

    text-decoration: none;

    color: var(--color-texto);

    font-size: 0.95rem;
    font-weight: 600;

    padding: 0.4rem 0;

    position: relative;

    transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.nav a::after{

    content: "";

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 0%;
    height: 2px;

    background: #2563eb;

    transition: 0.3s;
}

.nav a:hover{

    color: #2563eb;
    transform: translateY(-1px)
}

.nav a:hover::after{

    width: 100%;
}



/* =========================
   HERO
========================= */

.hero{

    min-height: 95vh;

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

    text-align: center;

    position: relative;

    overflow: hidden;
}



/* =========================
   EFECTOS HERO
========================= */

.hero::before{

    content: "";

    position: absolute;

    width: 800px;
    height: 800px;

    background: var(--azul-brillo);

    top: -200px;
    right: -100px;

    filter: blur(40px);

    z-index: 0;
}

.hero::after{

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    background:
        radial-gradient(
            circle,
            rgba(125,211,252,0.25),
            transparent 70%
        );

    bottom: -150px;
    left: -100px;

    filter: blur(30px);

    z-index: 0;
}



/* =========================
   HERO CONTENIDO
========================= */

.hero-contenido{

    max-width: 950px;

    position: relative;

    z-index: 1;
}



/* =========================
   BADGE
========================= */

.hero-badge{

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

    padding: 0.8rem 1.3rem;

    margin-bottom: 2rem;

    border-radius: 999px;

    background: rgba(255,255,255,0.75);

    border:
        1px solid rgba(255,255,255,0.8);

    backdrop-filter: blur(12px);

    font-size: 0.9rem;
    font-weight: 700;

    color: #2563eb;

    box-shadow:
        0 10px 30px rgba(37,99,235,0.08);
}



/* =========================
   TITULO HERO
========================= */

.hero h1{

    font-family: 'Manrope', sans-serif;

    font-size: clamp(3.2rem, 8vw, 6rem);

    line-height: 0.95;

    letter-spacing: -4px;

    margin-bottom: 1.8rem;

    color: #0f172a;
}



/* =========================
   TEXTO HERO
========================= */

.hero p{

    font-size: 1.2rem;

    color: var(--color-texto-secundario);

    max-width: 750px;

    margin: auto;

    margin-bottom: 2.5rem;
}



/* =========================
   BOTON
========================= */

.btn-whatsapp{

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

    padding: 1rem 2.2rem;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #25D366,
            #18b757
        );

    color: white;

    text-decoration: none;

    font-size: 1rem;
    font-weight: 700;

    transition: 0.35s;

    box-shadow:
        0 12px 30px rgba(37,211,102,0.25);
}

.btn-whatsapp:hover{

    transform:
        translateY(-4px)
        scale(1.02);

    box-shadow:
        0 18px 40px rgba(37,211,102,0.35);
}



/* =========================
   SECCIONES
========================= */

.servicios,
.pc,
.confianza,
.sobre-mi,
.cta,
.contacto{

    padding-top: 8rem;
    padding-bottom: 8rem;
}



/* =========================
   TITULOS
========================= */

.titulo-seccion{

    text-align: center;

    margin-bottom: 4rem;
}

.titulo-seccion h2,
.pc-contenido h2,
.sobre-contenido h2,
.confianza h2{

    font-family: 'Manrope', sans-serif;

    font-size: 3rem;

    letter-spacing: -2px;

    margin-bottom: 1rem;
}

.titulo-seccion p,
.pc-contenido p,
.sobre-contenido p{

    color: var(--color-texto-secundario);

    max-width: 750px;

    margin: auto;
}



/* =========================
   GRID SERVICIOS
========================= */

.contenedor-servicios{

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

    gap: 2rem;
}



/* =========================
   CARDS
========================= */

.card-servicio{

    position: relative;

    overflow: hidden;

    background: rgba(255,255,255,0.72);

    backdrop-filter: blur(14px);

    border:
        1px solid rgba(255,255,255,0.9);

    border-radius: var(--radio);

    padding: 2.2rem;

    transition: 0.35s;

    box-shadow: var(--sombra-suave);
}



/* =========================
   BRILLO CARD
========================= */

.card-servicio::before{

    content: "";

    position: absolute;

    top: -100px;
    right: -100px;

    width: 220px;
    height: 220px;

    background:
        radial-gradient(
            circle,
            rgba(96,165,250,0.18),
            transparent 70%
        );

    transition: 0.4s;
}



/* =========================
   HOVER CARD
========================= */

.card-servicio:hover{

    transform:
        translateY(-8px);

    box-shadow: var(--sombra-hover);
}

.card-servicio:hover::before{

    transform: scale(1.2);
}



/* =========================
   TITULO CARD
========================= */

.card-servicio h3{

    font-size: 1.3rem;

    margin-bottom: 1rem;

    position: relative;

    z-index: 1;
}



/* =========================
   TEXTO CARD
========================= */

.card-servicio p{

    color: var(--color-texto-secundario);

    position: relative;

    z-index: 1;
}



/* =========================
   PC SECTION
========================= */

.pc{

    position: relative;
}

.pc::before{

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0),
            rgba(255,255,255,0.6)
        );

    pointer-events: none;
}



/* =========================
   CONFIANZA
========================= */

.confianza{

    position: relative;

    background:
        linear-gradient(
            180deg,
            #0f172a,
            #111827
        );

    color: white;

    overflow: hidden;
}



/* =========================
   GLOW CONFIANZA
========================= */

.confianza::before{

    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,0.18),
            transparent 70%
        );

    top: -200px;
    right: -100px;
}



/* =========================
   BENEFICIOS
========================= */

.beneficios{

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(260px, 1fr));

    gap: 2rem;
}



/* =========================
   BENEFICIO
========================= */

.beneficio{

    background:
        rgba(255,255,255,0.05);

    border:
        1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(12px);

    padding: 2rem;

    border-radius: var(--radio);

    transition: 0.3s;
}

.beneficio:hover{

    transform: translateY(-6px);

    border-color:
        rgba(96,165,250,0.3);
}

.beneficio h3{

    margin-bottom: 1rem;

    font-size: 1.2rem;
}

.beneficio p{

    color:
        rgba(255,255,255,0.7);
}



/* =========================
   SOBRE MI
========================= */

.sobre-contenido{

    max-width: 850px;

    margin: auto;

    text-align: center;
}

.sobre-contenido p{

    font-size: 1.1rem;

    margin-bottom: 1.5rem;
}



/* =========================
   CTA
========================= */

.cta{

    text-align: center;
}



/* =========================
   CTA BOX
========================= */

.cta-contenido{

    max-width: 900px;

    margin: auto;

    padding: 5rem 3rem;

    border-radius: 40px;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.85),
            rgba(255,255,255,0.65)
        );

    backdrop-filter: blur(18px);

    border:
        1px solid rgba(255,255,255,0.8);

    box-shadow:
        0 20px 60px rgba(15,23,42,0.08);
}



/* =========================
   BRILLO CTA
========================= */

.cta-contenido::before{

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    background:
        radial-gradient(
            circle,
            rgba(96,165,250,0.22),
            transparent 70%
        );

    top: -150px;
    right: -100px;
}



/* =========================
   CTA TEXTO
========================= */

.cta h2{

    font-size: 3rem;

    line-height: 1.05;

    margin-bottom: 1.5rem;

    position: relative;

    z-index: 1;
}

.cta p{

    color: var(--color-texto-secundario);

    margin-bottom: 2rem;

    position: relative;

    z-index: 1;
}



/* =========================
   CONTACTO
========================= */

.contacto{

    background:
        linear-gradient(
            180deg,
            #0f172a,
            #020617
        );

    color: white;

    text-align: center;
}



/* =========================
   CONTACTO TEXTO
========================= */

.contacto h2{

    font-size: 2.2rem;

    margin-bottom: 2rem;
}

.contacto p{

    color:
        rgba(255,255,255,0.7);

    margin-bottom: 1rem;
}



/* =========================
   RESPONSIVE
========================= */

@media(max-width: 950px){

    .header{

        flex-direction: column;

        justify-content: center;

        gap: 1rem;

        height: auto;

        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .nav{

        flex-wrap: wrap;

        justify-content: center;
    }

    .hero{

        min-height: 85vh;
    }

    .hero h1{

        letter-spacing: -2px;
    }

}



@media(max-width: 600px){

    section,
    header,
    footer{

        padding-left: 6%;
        padding-right: 6%;
    }

    .hero h1{

        font-size: 3rem;
    }

    .hero p{

        font-size: 1rem;
    }

    .titulo-seccion h2,
    .pc-contenido h2,
    .sobre-contenido h2,
    .confianza h2,
    .cta h2{

        font-size: 2rem;
    }

    .cta-contenido{

        padding: 3rem 2rem;
    }

}
/* =========================
   WHATSAPP CRYSTAL
========================= */

.whatsapp-crystal{

    position: fixed;

    right: 24px;
    bottom: 24px;

    display: flex;
    align-items: center;

    gap: 1rem;

    padding:
        0.9rem 1rem 0.9rem 1.4rem;

    border-radius: 999px;

    text-decoration: none;

    z-index: 9999;

    color: var(--color-texto);

    background:
        rgba(255,255,255,0.45);

    backdrop-filter: blur(18px);

    border:
        1px solid rgba(255,255,255,0.55);

    box-shadow:
        0 10px 35px rgba(15,23,42,0.10),
        0 0 20px rgba(96,165,250,0.08);

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}



/* =========================
   BRILLO CRYSTAL
========================= */

.whatsapp-crystal::before{

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,0.28),
            transparent
        );

    transform: translateX(-140%);

    transition: 0.9s ease;
}

.whatsapp-crystal:hover::before{

    transform: translateX(140%);
}



/* =========================
   HOVER
========================= */

.whatsapp-crystal:hover{

    transform:
        translateY(-5px);

    background:
        rgba(255,255,255,0.62);

    box-shadow:
        0 18px 45px rgba(15,23,42,0.12),
        0 0 30px rgba(96,165,250,0.14);
}



/* =========================
   TEXTO
========================= */

.wsp-texto{

    font-size: 0.95rem;
    font-weight: 700;

    letter-spacing: -0.2px;

    white-space: nowrap;
}



/* =========================
   ICONO
========================= */

.wsp-icono{

    width: 46px;
    height: 46px;

    border-radius: 50%;

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

    color: white;

    background:
        linear-gradient(
            135deg,
            #25D366,
            #18b757
        );

    box-shadow:
        0 8px 20px rgba(37,211,102,0.22);

    flex-shrink: 0;

    transition: 0.35s ease;
}



/* =========================
   HOVER ICONO
========================= */

.whatsapp-crystal:hover .wsp-icono{

    transform:
        scale(1.06);
}



/* =========================
   MOBILE
========================= */

@media(max-width: 600px){

    .whatsapp-crystal{

        right: 16px;
        bottom: 16px;

        padding:
            0.8rem 0.9rem 0.8rem 1.1rem;
    }

    .wsp-texto{

        font-size: 0.88rem;
    }

    .wsp-icono{

        width: 42px;
        height: 42px;
    }

}

/* =========================
   SLIDER CARD
========================= */

.slider-servicio{

    position: relative;

    width: 100%;
    height: 220px;

    overflow: hidden;

    border-radius:
        calc(var(--radio) - 8px);

    margin-bottom: 1.5rem;
}



/* =========================
   IMAGENES
========================= */

.slide{

    position: absolute;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0;

    transition:
        opacity 1s ease,
        transform 6s ease;

    transform: scale(1);
}



/* =========================
   IMAGEN ACTIVA
========================= */

.slide.active{

    opacity: 1;

    transform: scale(1.08);
}



/* =========================
   CONTENIDO CARD
========================= */

.contenido-card{

    position: relative;

    z-index: 2;
}



/* =========================
   HOVER PREMIUM
========================= */

.card-servicio:hover .slide.active{

    transform: scale(1.12);
}