* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    scroll-behavior: smooth;

}
:root{
    --color-1: #776519;

    --color-2: #E4E4E4;

    --color-3: #0E0D0D;

    --color-4: #E2DEDE;

    --bkg-light: #F2F2F2d1;

    --bkg-dark: #383838;

}
body {
    font-family: 'DM Sans', sans-serif !important;
    background-color: #f3f3f3;
    
}
header {
    background-color: #F7F9FA !important;
}
h1 {
    font-size: 35px;
    margin-bottom: 3rem;
}

h2 {
    font-size: 25px;
    margin-bottom: 2rem;
}

h3 {
    font-size: 20px;
    margin-bottom: 0.3rem;
}
a {
    text-decoration: none !important;
}
p {
    font-size: 16px;
    font-weight: 200;
    margin-bottom: 2rem;
}

article {
    display: flex !important;
}

article img {
    width: 100%;
    height: min-content;
    border-radius: 3px;
}

nav {
    height: auto;
    color: #f5f5f5;
    font-weight: 500;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
}

nav a {
    color: var(--color-1);
    font-weight: 500;
    transition: 0.4s;
}

nav a:hover {
    color: var(--color-3);
    text-shadow: #7e6767;

}

nav img {
    /* height: 80px;
    height: max-content; */
}

.logo {
    padding-right: 5rem;
    height: 30px;

}

.enlaces-menu {
    justify-content: end;
    align-items: center;
}

.enlaces-menu li {
    padding-left: 2rem;

}

.ham {
    color: var(--color-1);
    cursor: pointer;
    border: none;
    margin: 0;
    padding: 0;
    background-color: transparent;
    align-items: end;

}

.ham span {
    display: none;
    background-color: var(--color-1);
    height: 3px;
    width: 28px;
    margin: 6px auto;
    border-radius: 3px;
}

/* estilos barra de navegacion */




.btn_light {
    position: relative;
    padding: 10px 20px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    background-color: #e2d9d9;
    overflow: hidden;
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    cursor: pointer;
}

.btn_light:hover {
    background-color: #472e47;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.btn_light:hover::before {
    -webkit-animation: sh02 0.5s 0s linear;
    -moz-animation: sh02 0.5s 0s linear;
    animation: sh02 0.5s 0s linear;
}


.btn_light:active {
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: box-shadow 0.2s ease-in;
    -moz-transition: box-shadow 0.2s ease-in;
    transition: box-shadow 0.2s ease-in;
}

.btn_light a{
    color: #E9096E;
}

.btn_light a:hover {
    color: var(--color-1);
}

/* estilo boton par fondos oscuros o de imagen */
.btn_dark a {
    color: var(--color-2);
}

.btn_dark a:hover {
    color: var(--color-3);
}

.btn_dark {
    position: relative;
    padding: 10px 20px;
    border-radius: 7px;
    border: none !important;
    box-shadow: #0E0D0D 20 2 2px;
    font-size: 14px;
    font-weight: 600;
    color: #e5ccd7;
    overflow: hidden;
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    cursor: pointer;
    background-color: var(--color-1);
}

.btn_dark:hover {
    background: rgb(234, 239, 255);
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    color: var(--color-3)
}

.btn_dark:hover::before {
    -webkit-animation: sh02 0.5s 0s linear;
    -moz-animation: sh02 0.5s 0s linear;
    animation: sh02 0.5s 0s linear;
}

.btn_dark::before {
    content: '';
    display: block;
    width: 0px;
    height: 86%;
    position: absolute;
    top: 7%;
    left: 0%;
    opacity: 0;
    background: #fff;
    box-shadow: 0 0 50px 30px #fff;
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
    transform: skewX(-20deg);
}
/* .bkg_hero:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgb(251, 251, 251) 0%, transparent 0%);
  } */
.bkg_hero {
    background-image: url("../assets/img/bkg.jpg");
    background-repeat: no-repeat;  
    background-size: cover;
}

.bkg_dark {
    background-color: #141312;
}

.como_card .icono {
    width: 80px !important;
    color: #7d517d !important;
}

.ej_codigo {
    width: 100px;
}

.fr_bdr {
    border: 1px solid #dedede;
    border-radius: 0.5rem;
    padding: 3rem;
}

.fr_bdr_dark {
    border: 1px solid #472e47;
    border-radius: 0.5rem;
    padding: 3rem;
    color: #472e47;
}



.fr_light {
    padding: 3rem;
    background-color: #d9d9d9c9;
    border-radius: 0.5rem;
    color: #141312;
}

.fr {
    font-weight: 200;
    padding: 2rem;
    border-radius: 0.5rem;
}

.fr_grey {
    padding: 3rem;
    background-color: #c0c5c9;
    border-radius: 0.5rem;
}

.fr_dark {
    padding: 3rem;
    color: #d7cfc4;
    background-color: #472e47d1;
    border-radius: 0.5rem;
}

.fr_dark_right {
    padding: 3rem;
    color: #d7cfc4;
    background-color: #472e47d1;
    border-radius: 0 0.5rem 0.5rem 0;
}

.fr_dark_left {
    padding: 3rem;
    color: #d7cfc4;
    background-color: #472e47d1;
    border-radius: 0.5rem 0 0 0.5rem;
}

.cita::before {
    content: open-quote;
    padding-right: 1rem;
    font-size: 40px;
    font-weight: 400;
}

.cita {
    padding: 3rem;
    color: #b3a98c;
}

.footer {
    background-color: var(--bkg-dark);
    color: var(--color-4);
}
.logo_footer{
    height: 50px;
}
.footer p {
    font-size: 14px;
}
.footer a{
    font-size: 12px;
}

.menu_footer a {
    color: var(--bkg-light);
}

.menu_footer a:hover {
    color: var(--color-2);
}

/* menu responsivo */

@media (max-width:768px) {
    nav {
        height: 100%;
    }

    .logo {
        justify-content: center;
        padding-right: 0rem;
        width: 50%;
    }

    .enlaces-menu {
        display: none !important;
        align-items: center;
        width: 100%;
        flex-direction: column;
        margin: 1rem 0;

    }

    .enlaces-menu ul {}

    .enlaces-menu li {
        padding: 1.5rem 0 !important;
    }

    .enlaces-menu .activado{
        display: flex;
    }
    .ham {
        width: 25%;
    }
    .ham span{
        display: block;
    }
    /* Animaciones */

@keyframes muestraMenu {
    from {opacity: 0;}
    to {opacity: 1;}
  }

  .enlaces-menu.activado{
      display:flex !important; 
      animation: muestraMenu 1s ease-in-out both;
  }

  }

}