@font-face {
    font-family: gotham;
    src: url(../font/Gotham/GothamBold.otf);
    src: url(../font/Gotham/GothamBold.woff);
    src: url(../font/Gotham/GothamBold.ttf);
}

@font-face {
    font-family: gotham-compressed;
    src: url(../font/Gotham/GothamCondensed-Bold.otf);
    src: url(../font/Gotham/GothamCondensed-Bold.woff);
    src: url(../font/Gotham/GothamCondensed-Bold.ttf);
}

@font-face {
    font-family: firma;
    src: url(../font/br-firma/BR-Firma-Light.otf);
    src: url(../font/br-firma/BR-Firma-Light.woff);
    src: url(../font/br-firma/BR-Firma-Light.ttf);
}

:root {
    --red: rgb(233, 25, 25);
    --green: rgb(0, 117, 83);
    --product-green: rgb(2, 128, 57);
    --product-yellow: rgb(248, 153, 0);
    --product-cyan: rgb(38, 165, 194);
    --white: rgb(245, 245, 245);


    --newred: rgb(200, 41, 37);
    --newred-a: rgba(200, 41, 37, 0.6);
    --newyellow: rgb(239, 169, 63);
    --newyellow-a: rgba(239, 169, 63, 0.3);
    --newgreen: rgb(89, 158, 49);
    --newgreen-a: rgba(89, 158, 49, 0.3);
    --invisible: rgba(0, 0, 0, 0);

    --color-wp: rgb(28, 208, 0);
    --color-ig: rgb(252, 176, 69);
    --color-fb: rgb(57, 86, 147);
    --color-em: rgb(234, 67, 53);
}

body {
    background-color: var(--white);

}

h1,
h2,
h3 {
    font-family: firma;
    font-weight: bold;
    text-align: center;
}


/* --------  NAV  --------  */


nav {
    background-color: var(--white);
    height: 100%;
}

nav figure {
    height: 100%;
}

nav ul li,
nav ul li .dropdown-toggle {
    font-family: firma;
    font-weight: bold;
}

nav .dropdown-toggle+.show {
    position: absolute;
}

nav ul li:nth-child(odd) {
    background-color: rgb(235, 235, 235);
}

nav ul li a {
    text-align: center;
    font-size: 0.6em !important;
}

@media All and (min-width: 550px) {

    nav ul li a {
        font-size: inherit !important;
    }
}

@media All and (min-width: 1440px) {

    nav ul li a {
        font-size: 1.5em !important;
    }
}


main {
    overflow-x: hidden;
}


/* --------  CABEZA  --------  */

#cabeza {
    height: 9cm;
    color: white;
    overflow: hidden;
    text-align: right;
    user-select: none;
}

#contenido-cabeza {
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

#fondo-cabeza {
    overflow: hidden;
    width: 100%;
    height: 100%;

    background-repeat: no-repeat;
    background-image: url(../img/galeria/planta.jpg);
    background-size: 150%;
    background-position: 75% 60%;
}

#rojo-cabeza {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 0, 0, 0.4));
}


@media All and (min-width:319px) {

    #fondo-cabeza {
        background-size: 250%;
        background-position: 40% 60%;
    }
}

@media All and (min-width:520px) {

    #fondo-cabeza {
        background-position: 25% 60%;
    }
}

@media All and (min-width:720px) {

    #fondo-cabeza {
        background-size: 150%;
        background-position: 25% 60%;
    }
}

@media All and (min-width:1023px) {

    #fondo-cabeza {

        background-size: 100%;
        background-position: 40% 60%;
    }
}

#cabeza h1 {
    text-align: right;
    background: linear-gradient(to left, var(--green), 30%, rgba(0, 0, 0, 0));
    font-family: gotham;
    opacity: 1;
}

#cabeza h2 {
    text-align: right;
    background: linear-gradient(to left, var(--newyellow), 15%, rgba(0, 0, 0, 0));
    font-family: firma;
    opacity: 1;
}

#cabeza h3 {
    background: linear-gradient(to left, var(--newred),5%, rgba(0, 0, 0, 0));
    text-align: right;
    font-family: gotham-compressed;
    font-stretch: extra-expanded;
    text-transform: uppercase;
    justify-self: right;
    color: var(white);
}



/* --------  ABOUT  --------  */

#about {
    background-color: var(--green);
    color: var(--white);
}

#about p,
#about li {
    font-family: firma;
    font-weight: lighter;
    user-select: none;
}

#about p strong {
    font-family: gotham;
}

@media All and (min-width: 320px) {

    #about p,
    #about li {
        font-size: 0.7em;
    }
}

@media All and (min-width: 550px) {

    #about p,
    #about li {
        font-size: 1em;
    }
}

@media All and (min-width: 768px) {

    #about p,
    #about li {
        font-size: 1.1em;
    }
}


/* --------  PRODUCTOS  --------  */

#productos {
    padding-top: 1%;
    padding-bottom: 5%;
}

.rueda-cargando-productos {
    justify-content: center;
    /*transform: translateY(5vh);*/
}

.rueda-cargando-productos i {
    animation: 1s rotate infinite ease;
    box-sizing: border-box;
    max-width: max-content;
    scale: 4;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.contenedor-opcion-producto {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-family: firma;
    background: linear-gradient(var(--newyellow), var(--invisible));
    border-radius: 5%;
    color: black;
    font-weight: bold;
    transition: 0.5s ease-in-out background-color;
}

.contenedor-opcion-producto:focus-within {
    background-color: var(--newred-a);
    transition: 0.5s ease-in-out;
}


#selector-productos select {
    border-color: var(--newyellow);
}

#selector-productos select option {
    transition: 0.2s ease;
}

.card-producto {
    scale: 1;
    transition: 0.2s ease-in-out scale;
    user-select: none;
}

.card-producto:hover {
    scale: 1.08;
    transition: 0.2s ease-in-out;
}

.card {
    margin: 2em;
}

.card figure {
    height: 20rem;
    overflow: hidden;
}

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.desc-prod {
    font-family: firma;
}

/* LISTADO DE CAPACIDADES*/

.card-producto figure {
    position: relative;
}


.card-producto ul {
    list-style: none;
    position: absolute;
    top: 0;
    right: 0;

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-end;
}

.card-producto ul li {
    width: auto;
    height: 25%;

    display: flex;
    overflow: hidden;
}

.card-producto ul li img {
    pointer-events: painted;
}


/* FIN LISTADO DE CAPACIDADES*/

.btn-prod {
    font-family: gotham;
    color: var(--color-wp);
    width: 100%;
    transform: skewY(0deg);
}

.btn-prod:hover {
    background-color: var(--color-wp);
    color: white;
}

.nombre-prod {
    color: var(--white);
    font-family: gotham-compressed;
    width: 100%;
    transform: skewY(0deg);
    text-align: left;
}

.producto-lubricante h3 {
    background-color: var(--product-green);
    clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
    padding-right: 8%;
    padding-left: 0.2rem;
}

.producto-combustible h3 {
    background-color: var(--product-yellow);
    clip-path: polygon(8% 0, 100% 0, 100% 100%, 0% 100%);
    padding-left: 8%;
    padding-right: 0.2rem;
}

.producto-especialidad h3 {
    background-color: var(--product-cyan);
    clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
    padding-right: 8%;
    padding-left: 0.2rem;
}


/* ITEMS NAVEGACION */

#productos .pagination li {
    padding: 0.2em;
}

/*  --------  SEDE  --------  */

#sede {
    background-color: var(--newgreen);
    padding-top: 1%;
    padding-bottom: 5%;
    font-family: firma;
}

#sede h2 {
    color: white;
}


/*  --------  GALERIA  --------  */

#galeria {
    background-color: var(--newyellow);
}

#galeria figure {
    background-color: var(--newred);
    border-radius: 0% 0% 15% 0%;
    border: 0.3em solid var(--white);
    overflow: hidden;
    padding: 0.5em;
}

#galeria img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

#galeria .carousel button {
    background-color: rgba(0, 0, 0, 0.2);
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    width: 10%;
}

#galeria figure figcaption {
    color: black;
    background-color: var(--white);
    text-align: center;
    font-family: firma;
    font-style: italic;
    font-size: 1.3em;
    border-left: 0.4em var(--newyellow) solid;
    padding: 0.2em;
}

/*  --------  FOOTER  --------  */

footer {
    font-weight: lighter;
    user-select: none;
}

footer li {
    display: flex;
    align-items: center;
    justify-content: center;
}

footer a {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgb(54, 54, 54);
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    padding: 1.4em;
    color: white;
    transition: 0.2s ease;
    font-size: 0.7em;
}

footer a:hover {
    color: black;
    transform: rotate(-15deg);
    transform: translateY(3px);
    transition: 0.2s ease;
}

#item-wp a {
    background-color: var(--color-wp);
}

#item-fb a {
    background-color: var(--color-fb);
}

#item-ig a {
    background-color: var(--color-ig);
}

#item-mail a {
    background-color: var(--color-em);
}

#item-wp a:hover,
#item-fb a:hover,
#item-ig a:hover,
#item-mail a:hover {
    background-color: white;
}