/*==================================================
    FIDUM - Asesorías Jurídicas
    Diseño Premium Azul
==================================================*/

:root {

    --azul-marino: #05204a;
    --azul-principal: #0b3f91;
    --azul-secundario: #2f67d8;
    --azul-claro: #edf4ff;
    --azul-extra: #f8fbff;

    --blanco: #ffffff;

    --texto: #17304d;
    --texto2: #5c6f86;

    --sombra: 0 12px 35px rgba(11, 63, 145, .12);

    --transition: .35s ease;

    --font: 'Montserrat', sans-serif;

}

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

html {
    scroll-behavior: smooth;
}

body {

    font-family: var(--font);

    color: var(--texto);

    background: var(--blanco);

    line-height: 1.7;

}

.container {

    width: 90%;
    max-width: 1150px;
    margin: auto;

}

a {

    text-decoration: none;

    transition: var(--transition);

}

section {

    padding: 90px 0;

}

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

.top-line {

    height: 5px;

    background: linear-gradient(90deg,
            #05204a,
            #0b3f91,
            #2f67d8);

}

header {

    position: sticky;

    top: 0;

    background: white;

    z-index: 999;

    box-shadow: 0 8px 20px rgba(0, 0, 0, .05);

}

.header-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 18px 0;

}

.main-logo {

    height: 85px;

    width: auto;

}

nav {

    display: flex;

    align-items: center;

    gap: 28px;

}

nav a {

    font-weight: 600;

    color: var(--azul-marino);

    position: relative;

}

nav a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 2px;

    background: #2f67d8;

    transition: .3s;

}

nav a:hover::after {

    width: 100%;

}

.btn-nav {

    color: white;

    padding: 12px 24px;

    border-radius: 50px;

    background: linear-gradient(135deg,
            #05204a,
            #2f67d8);

    box-shadow: 0 8px 18px rgba(47, 103, 216, .35);

}

.btn-nav:hover {

    transform: translateY(-3px);

}

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

/*==================================================
HERO PREMIUM FIDUM
==================================================*/

.hero-section {

    position: relative;

    overflow: hidden;

    min-height: 92vh;

    display: flex;

    align-items: center;

    background:

        radial-gradient(circle at 15% 15%, rgba(59, 130, 246, .18), transparent 22%),

        radial-gradient(circle at 85% 10%, rgba(255, 255, 255, .08), transparent 20%),

        radial-gradient(circle at 90% 90%, rgba(11, 79, 168, .25), transparent 30%),

        linear-gradient(135deg,
            #03152f 0%,
            #05204a 35%,
            #0b3f91 70%,
            #1b63d1 100%);

}

/* Gran círculo superior */

.hero-section::before {

    content: "";

    position: absolute;

    width: 900px;

    height: 900px;

    border-radius: 50%;

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

    right: -320px;

    top: -320px;

}

/* Círculo inferior */

.hero-section::after {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    border-radius: 50%;

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

    left: -250px;

    bottom: -250px;

}

.hero-overlay {

    position: absolute;

    inset: 0;

    overflow: hidden;

}

/* Onda 1 */

.hero-overlay::before {

    content: "";

    position: absolute;

    width: 900px;

    height: 900px;

    right: -250px;

    top: -100px;

    border-radius: 45%;

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

    transform: rotate(18deg);

}

/* Onda 2 */

.hero-overlay::after {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    left: -220px;

    bottom: -120px;

    border-radius: 48%;

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

    transform: rotate(-20deg);

}

.hero-container {

    position: relative;

    z-index: 2;

    padding: 120px 0;

}

.hero-text {

    position: relative;

    z-index: 20;

    max-width: 760px;

}

.hero-badge {

    display: inline-block;

    padding: 10px 22px;

    border-radius: 40px;

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

    backdrop-filter: blur(10px);

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

    color: white;

    margin-bottom: 30px;

    font-weight: 600;

}

.hero-text h1 {

    font-size: 4.3rem;

    color: white;

    line-height: 1.05;

    font-weight: 800;

    margin-bottom: 20px;

}

.hero-text h1 span {

    background: linear-gradient(90deg,
            #ffffff,
            #b9d9ff);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

.subtitle {

    color: #dbeaff;

    font-size: 1.45rem;

    margin-bottom: 25px;

    font-weight: 500;

}

.hero-description {

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

    font-size: 1.12rem;

    max-width: 650px;

    margin-bottom: 45px;

}

.hero-buttons {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

}

.btn-primary {

    background: white;

    color: #0b3f91;

    padding: 16px 36px;

    border-radius: 50px;

    font-weight: 700;

    box-shadow:

        0 20px 40px rgba(0, 0, 0, .20);

}

.btn-primary:hover {

    transform: translateY(-5px);

    box-shadow:

        0 25px 45px rgba(0, 0, 0, .30);

}

.btn-secondary {

    padding: 16px 36px;

    border: 2px solid rgba(255, 255, 255, .30);

    color: white;

    border-radius: 50px;

    backdrop-filter: blur(8px);

}

.btn-secondary:hover {

    background: white;

    color: #0b3f91;

}

/*==========================
TÍTULOS
===========================*/

.section-title {

    text-align: center;

    margin-bottom: 60px;

}

.section-title span {

    display: block;

    color: var(--azul-secundario);

    letter-spacing: 3px;

    font-weight: 700;

    margin-bottom: 10px;

    text-transform: uppercase;

}

.section-title h2 {

    font-size: 2.5rem;

    color: var(--azul-marino);

}

.line {

    width: 90px;

    height: 4px;

    border-radius: 10px;

    margin: 22px auto;

    background: linear-gradient(90deg,
            #05204a,
            #2f67d8);

}

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

.about-section {

    background: var(--blanco);

}

/*=========================================
PRESENTACIÓN
=========================================*/

.about-content {

    display: flex;

    align-items: center;

    gap: 60px;

    max-width: 1100px;

    margin: auto;

}

.about-photo {

    flex: 0 0 340px;

    display: flex;

    justify-content: center;

}

.about-photo img {

    width: 340px;

    height: 420px;

    object-fit: cover;

    border-radius: 20px;

    border: 6px solid white;

    box-shadow:
        0 20px 45px rgba(11, 63, 145, .18);

}

.about-text {

    flex: 1;

    background: white;

    padding: 50px;

    border-radius: 20px;

    box-shadow: var(--sombra);

}

.about-text h3 {

    font-size: 2rem;

    margin-bottom: 20px;

    color: var(--azul-marino);

}

.about-text p {

    margin-bottom: 18px;

    color: var(--texto2);

}

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

.services-section {

    background: linear-gradient(180deg,
            #edf4ff,
            white);

}

.services-grid {

    display: grid;

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

    gap: 35px;

}

.service-card {

    background: white;

    padding: 45px 35px;

    border-radius: 20px;

    box-shadow: var(--sombra);

    border-left: 8px solid var(--azul-principal);

    transition: .35s;

}

.service-card:hover {

    transform: translateY(-10px);

    background: linear-gradient(180deg,
            #0b3f91,
            #05204a);

    color: white;

}

.service-icon {

    font-size: 3rem;

    color: var(--azul-secundario);

    margin-bottom: 25px;

}

.service-card:hover .service-icon {

    color: white;

}

.service-card h3 {

    margin-bottom: 18px;

    color: var(--azul-marino);

}

.service-card:hover h3 {

    color: white;

}

.service-card p {

    color: var(--texto2);

}

.service-card:hover p {

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

}

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

.contact-section {

    background:
        linear-gradient(180deg,
            #05204a 0%,
            #0b3f91 100%);

    color: white;

}

.contact-section .section-title h2 {

    color: white;

}

.contact-section .section-title span {

    color: #bcd7ff;

}

.contact-section .line {

    background: linear-gradient(90deg,
            white,
            #8ec5ff);

}

.contact-container {

    max-width: 760px;

    margin: auto;

    text-align: center;

}

.contact-intro {

    font-size: 1.15rem;

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

    margin-bottom: 45px;

}

.contact-info {

    display: flex;

    flex-direction: column;

    gap: 22px;

    margin-bottom: 50px;

}

.contact-item {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    padding: 22px;

    border-radius: 18px;

    font-size: 1.08rem;

    font-weight: 600;

    transition: .35s;

}

.contact-item i {

    font-size: 1.6rem;

}

/* WhatsApp */

.whatsapp {

    background: #25D366;

    color: white;

    box-shadow: 0 15px 30px rgba(37, 211, 102, .30);

}

.whatsapp:hover {

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

    box-shadow: 0 25px 45px rgba(37, 211, 102, .45);

}

/* Teléfono fijo */

.phone{

    background:#1b63d1;

    color:white;

    box-shadow:0 15px 30px rgba(27,99,209,.30);

}

.phone:hover{

    background:#0b3f91;

    transform:translateY(-6px);

    box-shadow:0 25px 45px rgba(11,63,145,.45);

}

/* Email */

.email {

    background: white;

    color: #0b3f91;

    box-shadow: 0 15px 30px rgba(255, 255, 255, .15);

}

.email:hover {

    background: #dfeeff;

    transform: translateY(-6px);

}

/*==========================
REDES SOCIALES
===========================*/

.social-links {

    margin-top: 30px;

}

.social-links h3 {

    font-size: 1.25rem;

    margin-bottom: 25px;

    color: white;

}

.social-icons {

    display: flex;

    justify-content: center;

    gap: 25px;

}

.social-icons a {

    width: 65px;

    height: 65px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

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

    color: white;

    backdrop-filter: blur(10px);

    transition: .35s;

}

.social-icons a:hover {

    background: white;

    color: #0b3f91;

    transform: translateY(-8px) rotate(360deg);

}

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

footer {

    background:

        linear-gradient(180deg,
            #041631,
            #05204a);

    color: white;

}

.footer-content {

    text-align: center;

    padding: 45px 0;

}

.footer-content p {

    margin: 8px 0;

}

.legal-note {

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

    font-size: .92rem;

    letter-spacing: 1px;

}

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

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: #edf4ff;

}

::-webkit-scrollbar-thumb {

    background: #0b3f91;

    border-radius: 20px;

}

::-webkit-scrollbar-thumb:hover {

    background: #05204a;

}

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

.hero-text,
.about-content,
.service-card,
.contact-container {

    animation: fadeUp .9s ease;

}

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(35px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

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

button,
a,
.service-card {

    transition: .35s ease;

}

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

@media(max-width:1000px) {

    .hero-text h1 {

        font-size: 3.2rem;

    }

}

@media(max-width:768px) {

    .header-container {

        flex-direction: column;

        gap: 18px;

        padding: 20px 0;

    }

    nav {

        flex-wrap: wrap;

        justify-content: center;

        gap: 18px;

    }

    .hero-container {

        padding: 90px 0;

    }

    .hero-text {

        text-align: center;

        margin: auto;

    }

    .hero-text h1 {

        font-size: 2.5rem;

    }

    .subtitle {

        font-size: 1.15rem;

    }

    .hero-buttons {

        justify-content: center;

    }

    .about-text {

        padding: 35px 25px;

    }

    .section-title h2 {

        font-size: 2rem;

    }

    .services-grid {

        grid-template-columns: 1fr;

    }

    .contact-item {

        font-size: 1rem;

        padding: 18px;

    }

    .social-icons {

        gap: 18px;

    }

    .social-icons a {

        width: 58px;

        height: 58px;

    }

    .about-content {

        flex-direction: column;

        text-align: center;

    }

    .about-photo {

        flex: none;

    }

    .about-photo img {

        width: 260px;

        height: 320px;

    }

    .about-text {

        padding: 35px 25px;

    }

}

@media(max-width:480px) {

    section {

        padding: 70px 0;

    }

    .hero-text h1 {

        font-size: 2rem;

    }

    .btn-primary,
    .btn-secondary {

        width: 100%;

        text-align: center;

    }

    .contact-item {

        flex-direction: column;

        gap: 12px;

    }

}