/* ======================================
   VECTURIA PREMIUM FINAL
   ====================================== */

:root {

    --primary: #3D4A6B;
    --primary-dark: #34415B;
    --primary-mid: #455779;
    --primary-light: #4D618A;

    --white: #FFFFFF;

    --text: #FFFFFF;

    --text-secondary:
        rgba(255,255,255,.92);

    --card-bg:
        rgba(10,21,52,.58);

    --card-border:
        rgba(255,255,255,.10);

    --input-bg:
        rgba(255,255,255,.04);

    --shadow:
        0 20px 40px rgba(0,0,0,.18);

    --radius: 22px;

}

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

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

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

    color:
        var(--white);

    line-height: 1.7;

    overflow-x: hidden;

    background:

        radial-gradient(
            circle at top center,
            rgba(95,120,175,.28) 0%,
            rgba(95,120,175,0) 42%
        ),

        radial-gradient(
            circle at 50% 25%,
            rgba(120,145,210,.08) 0%,
            rgba(120,145,210,0) 50%
        ),

        linear-gradient(
            180deg,
            #4D618A 0%,
            #455779 18%,
            #3F4F72 45%,
            #394867 75%,
            #34415B 100%
        );

    background-attachment: fixed;

}

/* ======================================
   LAYOUT
   ====================================== */

.container {

    width: min(1280px, 92%);

    margin: 0 auto;

}

.section,
.about,
.contact-section {

    padding: 180px 0;

    position: relative;

}

.section-alt {

    background:
        rgba(255,255,255,.015);

}

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

h1,
h2,
h3,
label,
.social-links a {

    color: #FFFFFF;

}

p,
.about-text,
.section-description,
.card p {

    color:
        rgba(255,255,255,.92);

}

.hero h1 {

    font-size:
        clamp(
            3.5rem,
            6vw,
            5.6rem
        );

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -.04em;

    margin-bottom: 30px;

}

h2 {

    text-align: center;

    font-size:
        clamp(
            2.6rem,
            4vw,
            3.6rem
        );

    font-weight: 800;

    letter-spacing: -.03em;

    margin-bottom: 22px;

}

h3 {

    font-size: 1.55rem;

    margin-bottom: 14px;

    font-weight: 700;

}

.section-description {

    max-width: 850px;

    margin: 0 auto 80px auto;

    text-align: center;

    font-size: 1.12rem;

}

.about-text {

    max-width: 900px;

    margin: auto;

    text-align: center;

    font-size: 1.1rem;

}

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

.hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

}

.hero-container {

    width: min(1400px, 94%);

    margin: auto;

    position: relative;

}

.hero-content {

    max-width: 1000px;

    margin: auto;

    text-align: center;

    position: relative;

    z-index: 2;

}

.hero-subtitle {

    max-width: 850px;

    margin: 0 auto 50px auto;

    font-size: 1.2rem;

}

.hero-wave {

    position: absolute;

    top: 50%;

    right: -120px;

    width: 520px;

    height: 520px;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(255,255,255,.10),
            rgba(255,255,255,0)
        );

    filter:
        blur(40px);

    pointer-events: none;

}

/* ======================================
   BOTÓN
   ====================================== */

.cta-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    background: white;

    color: #30415f;

    padding: 18px 36px;

    border-radius: 999px;

    font-weight: 700;

    transition: .3s;

}

.cta-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.20);

}

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

.cards-grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap: 32px;

}

.card {

    background:
        rgba(10,21,52,.58);

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

    backdrop-filter:
        blur(12px);

    border-radius:
        var(--radius);

    padding: 40px;

    transition: .3s;

    box-shadow:
        0 20px 40px rgba(0,0,0,.18);

}

.card:hover {

    transform:
        translateY(-8px);

}

.card-icon {

    font-size: 2rem;

    margin-bottom: 18px;

}

.benefit {

    display: block;

    margin-top: 20px;

    font-weight: 600;

}

/* ======================================
   ABOUT
   ====================================== */

.about {

    text-align: center;

}

.social-links {

    display: flex;

    justify-content: center;

    gap: 30px;

    flex-wrap: wrap;

    margin-top: 50px;

}

.social-links a {

    text-decoration: none;

    display: flex;

    align-items: center;

    gap: 10px;

    font-weight: 500;

}

.social-links i {

    font-size: 1.15rem;

}

/* ======================================
   FORMULARIO
   ====================================== */

.contact-section {

    text-align: center;

}

.contact-card {

    max-width: 900px;

    margin: 0 auto;

    padding: 45px;

    border-radius: 24px;

    background:
        rgba(12,24,58,.68);

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

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 25px 60px rgba(0,0,0,.22);

}

form {

    display: flex;

    flex-direction: column;

    gap: 14px;

    text-align: left;

}

label {

    font-size: .95rem;

    font-weight: 600;

}

input,
textarea {

    width: 100%;

    padding: 16px;

    border-radius: 12px;

    background:
        rgba(255,255,255,.04);

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

    color: white;

    outline: none;

}

input::placeholder,
textarea::placeholder {

    color:
        rgba(255,255,255,.50);

}

textarea {

    resize: vertical;

}

button {

    border: none;

    margin-top: 12px;

    padding: 18px;

    border-radius: 12px;

    cursor: pointer;

    font-weight: 700;

    background: white;

    color: #30415f;

    transition: .3s;

}

button:hover {

    transform:
        translateY(-2px);

}

/* ======================================
   FOOTER
   ====================================== */

footer {

    padding: 60px 0;

    text-align: center;

    border-top:
        1px solid rgba(255,255,255,.08);

}

footer p {

    color:
        rgba(255,255,255,.75);

}

/* ======================================
   ANIMACIONES
   ====================================== */

.fade-section {

    opacity: 1;

    transform:
        translateY(0);

    filter:
        blur(0);

    transition:

        opacity .9s ease,

        transform .9s ease,

        filter .9s ease;

}

.fade-section.pre-hidden {

    opacity: 0;

    transform:
        translateY(50px);

    filter:
        blur(8px);

}

.fade-section.visible {

    opacity: 1;

    transform:
        translateY(0);

    filter:
        blur(0);

}

.fade-section.fade-out {

    opacity: .85;

    filter:
        blur(2px);

}

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

@media (max-width: 960px) {

    .cards-grid {

        grid-template-columns: 1fr;

    }

    .section,
    .about,
    .contact-section {

        padding: 120px 0;

    }

}

@media (max-width: 768px) {

    .hero {

        min-height: auto;

        padding: 140px 0 100px;

    }

    .hero-wave {

        display: none;

    }

    .contact-card {

        padding: 28px;

    }

    .hero h1 {

        font-size: 3rem;

    }

}