/*
    Theme Name: Nomenai theme.
    Theme URI: 
    Author: Josué Antonio Contreras Guzmán.
    Author URI: www.linkedin.com/in/josué-antonio-contreras-guzmán-8803092a9
    Description: Theme Diseñado para Cliente por Medra. 
    Version: 1.0.0.
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: alimento para mascotas, alimento para perro, alimento para gato.
    Text Domain: 
*/

/*Estilos Globales */
:root {

    /** Fuentes **/
    --mikado-black: 'mikado-black', sans-serif;
    --mikado-bold: 'mikado-bold', sans-serif;
    --mikado-light: 'mikado-light', sans-serif;
    --mikado-medium: 'mikado-medium', sans-serif;
    --mikado-regular: 'mikado-regular', sans-serif;
    --mikado-ultra: 'mikado-ultra', sans-serif;
    --quinn-bold: 'quinn-bold', sans-serif;
    --quinn-extra-bold: 'quinn-extra-bold', sans-serif;
    --quinn-light: 'quinn-light', sans-serif;
    --quinn-regular: 'quinn-regular', sans-serif;
    --quinn-semi-bold: 'quinn-semi-bold', sans-serif;


    /** Colores **/
    --color-gris: #E5E5E5;
    --color-rojo: #F80031;
    --color-negro: black;
    --color-blanco: white;
}

/* fonts mikado */
@font-face {
    font-family: 'mikado-black';
    src: url('fonts/HvDTrial_Mikado-Black-BF65c194eb898ed.otf');
}

@font-face {
    font-family: 'mikado-bold';
    src: url('fonts/HvDTrial_Mikado-Bold-BF65c194eb8b644.otf');
}

@font-face {
    font-family: 'mikado-light';
    src: url('fonts/HvDTrial_Mikado-Light-BF65c194eb834dc.otf');
}

@font-face {
    font-family: 'mikado-medium';
    src: url('fonts/HvDTrial_Mikado-Medium-BF65c194eb9f610.otf');
}

@font-face {
    font-family: 'mikado-regular';
    src: url('fonts/HvDTrial_Mikado-Regular-BF65c194eb0d360.otf');
}

@font-face {
    font-family: 'mikado-ultra';
    src: url('fonts/HvDTrial_Mikado-Ultra-BF65c194eb9190a.otf');
}

/* fonts Quinn */
@font-face {
    font-family: 'quinn-bold';
    src: url('fonts/Quinn_Bold.otf');
}

@font-face {
    font-family: 'quinn-extra-bold';
    src: url('fonts/Quinn_Extra_Bold.otf');
}

@font-face {
    font-family: 'quinn-light';
    src: url('fonts/Quinn_Light.otf');
}

@font-face {
    font-family: 'quinn-regular';
    src: url('fonts/Quinn_Regular.otf');
}

@font-face {
    font-family: 'quinn-semi-bold';
    src: url('fonts/Quinn_Semi_Bold.otf');
}



html {
    box-sizing: border-box;
    font-size: 62.5%;
    scroll-behavior: smooth;
    /* 10px = 1rem*/
}

*,
*:before,
*:after {
    box-sizing: inherit;

}

/** globales **/
p {
    margin: 0;

}

a {
    text-decoration: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

hr {
    border: 1px solid var(--gris-claro);
}

a,
a:visited {
    color: white;
}

.contenedor {
    width: min(95%, 120rem);
    margin: 0 auto;
}

br {
    display: none;
}

@media(min-width: 1190px) {
    br {
        display: block;
    }
}

/** Estilos - Seccion index **/
.contenedor-header-index {
    width: 100%;
    height: auto;
    min-height: 88px;
    background-color: var(--color-rojo);
    display: flex;
    flex-direction: row;
    align-items: center;
}

.contenedor-header-index img {
    width: 150px;
}

.contenedor-principal-index {
    display: flex;
    flex-direction: column;
    transition: filter 0.5s ease;
    overflow-x: hidden;
}


@media(min-width:900px) {
    .contenedor-principal-index {
        flex-direction: row;
    }
}

@media(min-width:900px) {

    /* Cuando el contenedor principal TIENE un hover en el GATO: */
    .contenedor-principal-index:has(.division-index-team-gato:hover) {

        /* Selecciona la división PERRO (hija del contenedor) y aplícale el filtro. */
        .division-index-team-perro {
            filter: brightness(0.6);
            /* Valor de atenuación */
        }
    }
}


@media(min-width:900px) {

    /* Cuando el contenedor principal TIENE un hover en el PERRO: */
    .contenedor-principal-index:has(.division-index-team-perro:hover) {

        /* Selecciona la división GATO (hija del contenedor) y aplícale el filtro. */
        .division-index-team-gato {
            filter: brightness(0.6);
            /* Valor de atenuación */
        }
    }
}

.division-index-team-perro,
.division-index-team-gato {
    will-change: width, filter, transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}


.division-index-team-perro {
    width: 100%;
    height: 50dvh;
    background-image: url(img/imgPortadaTeamPerro.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 2%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
}

@media(min-width:900px) {
    .division-index-team-perro:hover {
        width: 85%;
    }
}


@media(min-width:900px) {
    .division-index-team-perro {
        width: 50%;
        height: 92dvh;
        filter: brightness(1);
        transition: width 0.5s ease-in-out, filter 0.5s ease;
        transform: translateZ(0);
    }
}

.division-index-team-perro img {
    width: 100%;
    height: auto;
    max-width: 250px;
}

@media(min-width:900px) {
    .division-index-team-perro img {
        max-width: 350px;
        transform: translateY(6rem);
        transition: transform 0.5s ease;
    }
}

.division-index-team-perro:hover img {
    transform: translateY(0);
}


.division-index-team-perro p {
    font-size: clamp(2rem, 5vw, 2.6rem);
    color: var(--color-blanco);
    text-align: start;
    font-family: var(--quinn-regular);
}


@media(min-width:900px) {
    .division-index-team-perro p {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease, visibility 0s 0.5s;
    }
}

.division-index-team-perro:hover p {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0s 0s;
}

.division-index-team-perro a button {
    width: 100%;
    height: 40px;
    max-width: 150px;
    background-color: var(--color-rojo);
    color: var(--color-blanco);
    border: .2rem solid var(--color-blanco);
    font-size: clamp(1.6rem, 5vw, 1.8rem);
    font-family: var(--quinn-regular);
}

.division-index-team-perro a {
    width: 100%;
    height: auto;
    margin-top: 1rem;
}

@media(min-width:900px) {
    .division-index-team-perro a button {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease, visibility 0s 0.5s;
    }
}

.division-index-team-perro:hover a button {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0s 0s;
    cursor: pointer;
}

.division-index-team-perro a button:hover {
    background-color: var(--color-blanco);
    color: var(--color-rojo);
    border: .3rem solid var(--color-rojo);
}


.division-index-team-gato {
    width: 100%;
    height: 50dvh;
    background-image: url(img/imgPortadaTeamGato.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 2%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: end;
}

@media(min-width:900px) {
    .division-index-team-gato:hover {
        width: 85%;
    }
}

@media(min-width:900px) {
    .division-index-team-gato {
        width: 50%;
        height: 92dvh;
        filter: brightness(1);
        transition: width 0.5s ease-in-out, filter 0.5s ease;
        transform: translateZ(0);
    }
}

.division-index-team-gato img {
    width: 100%;
    height: auto;
    max-width: 250px;
}

@media(min-width:900px) {
    .division-index-team-gato img {
        max-width: 350px;
        transform: translateY(6rem);
        transition: transform 0.5s ease;
    }
}

.division-index-team-gato:hover img {
    transform: translateY(0);
}


.division-index-team-gato p {
    font-size: clamp(2rem, 5vw, 2.4rem);
    color: var(--color-blanco);
    text-align: end;
    font-family: var(--quinn-regular);
}

@media(min-width:900px) {
    .division-index-team-gato p {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease, visibility 0s 0.5s;
    }
}

.division-index-team-gato:hover p {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0s 0s;
}

.division-index-team-gato a button {
    width: 100%;
    height: 40px;
    max-width: 150px;
    background-color: var(--color-rojo);
    color: var(--color-blanco);
    border: .2rem solid var(--color-blanco);
    font-size: clamp(1.6rem, 5vw, 1.8rem);
    font-family: var(--quinn-regular);
}

.division-index-team-gato a {
    width: 100%;
    height: auto;
    margin-top: 1rem;
    text-align: end;
}

@media(min-width:900px) {
    .division-index-team-gato a button {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease, visibility 0s 0.5s;
    }
}

.division-index-team-gato:hover a button {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0s 0s;
    cursor: pointer;
}

.division-index-team-gato a button:hover {
    background-color: var(--color-blanco);
    color: var(--color-rojo);
    border: .3rem solid var(--color-rojo);
}

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
        pointer-events: none;
        /* Desactivado */
    }

    100% {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
        /* Activado */
    }
}

.division-index-team-perro,
.division-index-team-gato {
    animation-name: slideInFromLeft;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    opacity: 0;
    pointer-events: none;
}

.division-index-team-gato {
    animation-delay: 0.3s;
}


/** Estilos - Seccion footer **/
footer {
    width: 100%;
    height: auto;
    background-color: var(--color-rojo);
    padding: 6% 0;
}

.contenedor-secciones-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    text-align: center;
}

@media(min-width: 900px) {
    .contenedor-secciones-footer {
        flex-direction: row;
        text-align: left;
    }
}

.contenedor-logo-footer {
    width: 100%;
    height: auto;
}

.contenedor-logo-footer img {
    width: 100%;
    height: auto;
    max-width: 220px;

}

.contenedor-menu-footer {
    width: 100%;
    height: auto;
    text-align: right;
}

.contenedor-enlaces-menu-footer {
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    font-family: var(--quinn-regular);
    color: var(--color-blanco);
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 1rem;
}

@media(min-width: 900px) {
    .contenedor-enlaces-menu-footer {
        text-align: right;
    }
}


.enlace-menu-footer:hover {
    cursor: pointer;
    text-shadow: 2px 2px 6px black;
    transition: 0.2s ease;
}