/* ==========================================
   ALAN BARRAGÁN WEBSITE
   Diseño Jurídico Premium
   ========================================== */


:root {

    --azul: #081c3a;
    --azul2: #102d55;
    --dorado: #c8a248;
    --blanco: #ffffff;
    --gris: #f4f6f9;
    --texto: #222;

}


* {

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

}


html {

    scroll-behavior:smooth;

}


body {

    font-family:'Poppins', Arial, sans-serif;
    color:var(--texto);
    background:white;
    overflow-x:hidden;

}


h1,
h2,
h3,
h4 {

    font-family:'Playfair Display', serif;

}


section {

    padding:100px 0;

}


/* ===========================
   NAVBAR
=========================== */


.navbar {

    background:rgba(8,28,58,.20);
    backdrop-filter:blur(12px);
    transition:.4s;
    padding:20px 0;

}


.navbar.scrolled {

    background:var(--azul);
    box-shadow:0 10px 30px rgba(0,0,0,.25);

}


.navbar-brand {

    color:white!important;
    font-size:28px;
    font-weight:700;

}


.nav-link {

    color:white!important;
    margin-left:20px;
    font-weight:500;
    position:relative;

}


.nav-link:after {

    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:var(--dorado);
    transition:.3s;

}


.nav-link:hover:after {

    width:100%;

}



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


header {

    min-height:100vh;

    background:

    linear-gradient(
    rgba(0,0,0,.65),
    rgba(0,0,0,.65)
    ),

    url('../img/hero.jpg');

    background-size:cover;
    background-position:center;

    display:flex;
    align-items:center;

    color:white;

}



.hero-content {

    position:relative;
    z-index:2;

}



.hero-content h1 {

    font-size:75px;
    line-height:1.1;
    margin-bottom:25px;

}



.hero-content p {

    font-size:22px;
    max-width:650px;
    line-height:1.8;
    margin-bottom:35px;

}



.btn-premium {

    background:var(--dorado);
    color:white;
    padding:15px 35px;
    border-radius:40px;
    font-weight:600;
    transition:.3s;

}



.btn-premium:hover {

    background:#a9822f;
    transform:translateY(-5px);

}



.hero-img {

    width:420px;

    animation:flotar 5s infinite;

}



@keyframes flotar {

    0% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(-20px);

    }


    100% {

        transform:translateY(0);

    }

}



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


.titulo {

    text-align:center;
    margin-bottom:60px;

}


.titulo h2 {

    font-size:45px;
    color:var(--azul);

}



.titulo span {

    color:var(--dorado);

}



/* ===========================
   TARJETAS
=========================== */


.card-premium {

    background:white;
    padding:35px;
    border-radius:20px;

    box-shadow:

    0 15px 40px rgba(0,0,0,.10);

    transition:.4s;

    height:100%;

}



.card-premium:hover {

    transform:translateY(-12px);

    box-shadow:

    0 25px 60px rgba(0,0,0,.18);

}



.card-premium i {

    font-size:45px;
    color:var(--dorado);
    margin-bottom:20px;

}



/* ===========================
   GALERIA
=========================== */


.galeria {

    width:100%;
    height:300px;
    object-fit:cover;
    border-radius:15px;
    transition:.4s;

}



.galeria:hover {

    transform:scale(1.05);

}



/* ===========================
   BIBLIOTECA
=========================== */


.archivo {

    background:white;
    padding:35px;
    text-align:center;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.1);

}



.archivo i {

    font-size:50px;
    color:var(--dorado);

    margin-bottom:20px;

}



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


#contacto {

    background:var(--azul);
    color:white;

}



.redes a {

    font-size:35px;
    color:white;
    margin-right:20px;

}



.redes a:hover {

    color:var(--dorado);

}



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


footer {

    background:#050f20;
    color:white;
    padding:25px;

    text-align:center;

}