:root {
    --azul: #0B2A55;
    --azul-claro: #144082;
    --naranja: #e07318;
    --blanco: #ffffff;
}


/* RESET */

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


body {
    font-family: "Segoe UI", Arial, sans-serif;
    background: var(--azul-claro);
}



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


.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 92px;
    z-index: 1000;
    display: flex;
    align-items: center;
    background: linear-gradient( 180deg, rgba(9,32,72,.82) 0%, rgba(9,32,72,.68) 55%, rgba(9,32,72,.35) 100% );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,.05);
}


.header-container {
    width: 100%;
    height: 100%;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}



/* LOGO */

.logo {
    display: flex;
    align-items: center;
}


    .logo a {
        color: white;
        text-decoration: none;
        font-size: 28px;
        font-weight: 700;
    }


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



/* MENU */


.menu {
    display: flex;
    align-items: center;
    gap: 35px;
}

.menu a {
    position: relative;
    display: inline-block;
    color: var(--blanco);
    text-decoration: none;
    font-size: 17px;
    font-weight: 500;
    padding: 8px 0;
    transition: color .25s ease, font-weight .25s ease;
}

    /* Barra inferior */
    .menu a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -8px;
        width: 100%;
        height: 3px;
        background: var(--naranja);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform .25s ease;
    }

    .menu a:hover {
        color: #ffffff;
        font-weight: 700;
    }

    .menu a:hover::after {
        transform: scaleX(1);
    }


    /* BOTON COTIZAR */


    .btn-cotizar {
        background: var(--naranja);
        color: white;
        padding: 12px 22px;
        border-radius: 8px;
        font-weight: 600;
        text-decoration: none;
    }


        .btn-cotizar:hover {
            background: #ff8a2a;
            color: white;
        }
    /* ================= CONTENIDO ================= */


    .main-content {
        min-height: 100vh;
    }
    /* ================= HERO ================= */


    .hero {
        height: 100vh;
        position: relative;
        background: url('/images/hero.jpg') center/cover no-repeat;
        padding-top: 120px;
    }


    .hero-overlay {
        position: absolute;
        inset: 0;
        background: rgba(20,64,130,.78);
    }



    .hero-content {
        position: relative;
        z-index: 2;
        height: 100%;
        display: flex;
        align-items: center;
    }


    .hero-text {
        max-width: 650px;
        color: white;
    }



    .tag {
        display: inline-block;
        font-size: 13px;
        background: rgba(255,255,255,.15);
        padding: 6px 14px;
        border-left: 4px solid var(--naranja);
        margin-bottom: 20px;
    }



    .hero-text h1 {
        font-size: 56px;
        line-height: 1.1;
        margin-bottom: 20px;
    }



    .hero-text p {
        font-size: 16px;
        opacity: .92;
    }
    /* BOTONES HERO */


    .buttons {
        display: flex;
        gap: 16px;
    }


    .btn-primary {
        background: var(--naranja);
        color: white;
        padding: 14px 26px;
        border-radius: 8px;
        text-decoration: none;
    }


    .btn-outline {
        border: 2px solid white;
        color: white;
        padding: 12px 26px;
        border-radius: 8px;
        text-decoration: none;
    }
    /* ================= RESPONSIVE ================= */


    @media(max-width:992px) {


        .hero-text h1 {
            font-size: 42px;
        }
    }



    @media(max-width:768px) {


        .header {
            height: auto;
        }


        .header-container {
            flex-direction: column;
            padding: 15px;
            gap: 15px;
        }


        .menu {
            flex-wrap: wrap;
            justify-content: center;
        }


        .hero {
            padding: 140px 20px 80px;
        }


        .hero-text h1 {
            font-size: 34px;
        }
    }