/*@font-face {
    font-family: "logo";
    src: url(/fonts/F25_Bank_Printer_Bold.ttf);
    font-weight: 400;
}
*/
@font-face {
    font-family: "logo-main-uno";
    src: url(../fonts/logo/BebasNeue-Regular.woff);
    font-weight: 400;
}
@font-face {
    font-family: "encabezados";
    src: url(../fonts/encabezados/Sandra.ttf);
}
@font-face {
    font-family: "parrafos";
    src: url(../fonts/parrafos/Coolvetica\ Rg.otf);
}
@font-face {
    font-family: "modelaje-uno";
    src: url(../fonts/encabezados/Moderniz.otf);
}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Nueva línea */
}
:root{
    --color-primario: #000;
    --color-secundario: #fff;
    --color-parrafos: #414141;
}
html {
    font-size: 62.5%; /* 16px × 0.625 = 10px */
}
header, main, nav{
    margin: 0;
    padding: 0;
}
body{
    background-color: rgb(255, 255, 255);
    height: 100%;
    width: 100%;
}

a{
    text-decoration: none;
    font-family: "parrafos";
    letter-spacing: 0.1rem;
    font-size: 1.5rem;
    margin: 0;
    padding: 0;
}
h1, h2, h3{
    font-family: "encabezados";
    font-size: 2.5rem;
    
}
p{
    font-size: 1.7rem;
    letter-spacing: .1rem;
    font-family: "parrafos";
    color: var(--color-parrafos);

}
ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
button {
    all: unset; /* Elimina todos los estilos (no siempre 100% efectivo) */
    cursor: pointer;
    font-family: inherit;
}

/* Opcional: Reset para estados */
button:hover,
button:focus,
button:active {
    background: transparent !important;
    transform: none;
    box-shadow: none;
}
/*Globales*/
.parrafo-espaciado {
    margin-bottom: 20px; /* Ajusta este valor según el espacio que quieras */
}
.texto-espaciado {
    letter-spacing: 3px; /* Ajusta el valor según lo que necesites */
}
.contenedor{
    width: 70%;
    margin: 0 auto;
}
@media(max-width: 750px){ /*Aqui a los 750 px el contenedor cambia de tamaño el
    contenedor que le da formato al main*/
    .contenedor{
        width: 80%;
    }
}
@media(max-width: 480px){/*Aqui a los 750 px el contenedor cambia de tamaño el
    contenedor que le da formato al main*/
    .contenedor{
        width: 90%;
    }
}

/*Barra de navegacion*/

.header__logo a{ /*Este es el contenedor que aplica los estilos globales y que se eredan al logo*/
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 1rem;

    color: var(--color-primario);
}
.logo-main{
    text-transform: uppercase;
    font-size: 5rem;
    font-family: "logo-main-uno";
}
.logo-sub{
    margin-left: .5rem;
    font-size: 1.5rem;
    padding-bottom: .8rem;
    font-family: "parrafos";
    /*font-style: italic;*/
}

.navegacion{
    width: 100%;
    height: auto;
    background-color: var(--color-primario);
    padding: 1rem 0;
}
.navegacion__contenedor{
    display: flex;
    justify-content: space-between;
}
.navegacion__lista{
    display: flex;
    width: auto;
    justify-content: start;
    align-items: center;
    gap: 1rem;
    /*background-color: var(--color-secundario);*/
    border-radius: 1.5rem;
    padding: 1rem 0;
    height: 1.5rem;
    height: 100%;
}

.navegacion__lista__item a{
    color: var(--color-secundario);
    display: flex;
    gap: .5rem;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
}

.marquee {
    width: 33%; /* Ancho del contenedor */
    /*border: 2px solid var(--color-secundario);*/
    height: auto;
    overflow: hidden;
    padding: 1rem;
    position: relative;
    margin: 0 .5rem;
}

.marquee ul li {
    font-size: 1rem;
    color: var(--color-secundario);
    font-family: "modelaje-uno";
    text-transform: uppercase;
    /*letter-spacing: 4px;*/
}

.marquee__content {
    display: flex;
    list-style: none;
    gap: 3rem;
    width: max-content; /* El ancho se ajusta al contenido */
    animation: marquee 10s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(0); /* Empieza en la posición inicial */
    }

    100% {
        transform: translateX(-50%); /* Mueve el contenido a la izquierda */
    }
}
@media (max-width: 420px){
    .marquee{
        display: none;
    }
}

.navegacion__contenedor__utilidades{
    width: auto;
    display: flex;
    gap: 1.5rem;
}
.navegacion__contenedor__utilidades a{ 
    color: var(--color-secundario);
}

.navegacion__contenedor__menu-hamburguesa{
    display: none;
}
/*
@media (max-width: 850px){
    .marquee {
        width: 50%;
    }
    .navegacion__contenedor__menu-hamburguesa{
        display: inline;
    }   
    body{
        position: relative;
    }
    .navegacion__contenedor--enlaces{
        background-color: rgba(220, 223, 223, 0.849);
        position:fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: auto;
        padding: 15% 50% 0 50%;
    }
    .navegacion__lista{
        display: inline-block;
        padding: 0;
        margin: 0;
    }
    .navegacion__lista__item{
        width: 100%;
    }
    .navegacion__lista__item a {
        display: block;
        padding: 1rem 0;
        margin: 0;
        text-decoration: none;
        color: red;
        font-family: var();
    }

}*/

/*Foooter*/
.footer{
    width: 100%;
    background-color:rgb(0, 0, 0);
    padding: 2.5rem 0;
}
.footer__contenedor{
    /*background-color: rgba(121, 121, 121, 0.299);*/
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    grid-template-rows:1fr;
    gap: 2rem;
}

.footer__h4--styles{
    color: var(--color-secundario);
    text-transform: uppercase;
    font-weight: bolder;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}
.footer__enlaces--styles{
    color: #b4b4b4;
}
    

.footer__flex--column{
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
.footer__redes-sociales-enlaces a:first-child{
    margin-right: 1rem;
}

.footer__derechos-de-autor{
    color: var(--color-primario);
    font-size: 1.3rem;
    text-align: center;
    padding: 2rem;
}