:root{
    --color-1: #fff;
    --color-2: #222;
    --color-3: #cccbcb;
    --color-4: #ef74e0;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    text-align: center;
    padding: 0;
    margin: 0;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-image: url(./Fotos-Index/BACKGROUND-MP-DARK.webp);
    background-repeat: repeat;
    background-size: 50%;
    color: var(--color-1);
}
/* --------------HEADER---------------- */



/* ------------------MAIN------------------ */
main{
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* -----------------FOOTER----------------- */
footer{
    text-align: left;
    padding: 5px 10px 5px 10px;
    background-color: rgba(0, 0, 0);
}
.verM{
    display: block;
}
.verP{
    display: none;
}
/* ----------------CONTENIDO------------------- */

.navegacion{
    width: 100%;
    margin: 10px 0px 10px 0px;
    position: sticky;
    top: 0px;
    z-index: 4;
    background-color: #ef74e0 !important;

}


/* NAVBAR BETA */

#menu-burguer{
    background-color: rgb(239, 116, 224, 0.7);
    padding: 8px;
    margin: 5px 0;
    border-radius: 5px;
  }
  
  .burger {
      position: relative;
      width: 40px;
      height: 30px;
      background: transparent;
      cursor: pointer;
      display: block;
    }
    
    .burger input {
      display: none;
    }
    
    .burger span {
      display: block;
      position: absolute;
      height: 4px;
      width: 100%;
      background: rgb(255, 255, 255);
      border-radius: 9px;
      opacity: 1;
      left: 0;
      transform: rotate(0deg);
      transition: .25s ease-in-out;
    }
    
    .burger span:nth-of-type(1) {
      top: 0px;
      transform-origin: left center;
    }
    
    .burger span:nth-of-type(2) {
      top: 50%;
      transform: translateY(-50%);
      transform-origin: left center;
    }
    
    .burger span:nth-of-type(3) {
      top: 100%;
      transform-origin: left center;
      transform: translateY(-100%);
    }
    
    .burger input:checked ~ span:nth-of-type(1) {
      transform: rotate(45deg);
      top: 0px;
      left: 5px;
    }
    
    .burger input:checked ~ span:nth-of-type(2) {
      width: 0%;
      opacity: 0;
    }
    
    .burger input:checked ~ span:nth-of-type(3) {
      transform: rotate(-45deg);
      top: 28px;
      left: 5px;
    }
  
  #navBar1{
      position: sticky;
      top: 0;
      display: flex;
      flex-direction: row;
      width: 100%;
      background-color: var(--color-4);
      justify-content: space-between;
      align-items: center;
      padding: 5px 10px;
      z-index: 1001;
      transition: background-color 0.9s ease;
  
  }
  #navBar1.transparent{
    background-color: transparent;
  }
  #navBar1 img{
      display: block;
  }
  #menu-desplegable{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-right: 10px;
    position: fixed;
    top: 0px;
    right: -300px;
    width: 300px;
    background-color: var(--color-4);
    transition: right 0.4s ease;
    z-index: 1000;
    border-radius: 0 0 0 30px;
  }
  #menu-desplegable.visible{
    right: 0;
  }
  #menu-desplegable ul{
    text-align: right;
    padding-right: 15px;
    transition: transform 0.2s ease-in-out;
  }
  #menu-desplegable ul:hover{
    transform: scale(1.1);
    transform: translateX(-20px);
    font-weight: bold;
}


/* NAVBAR BETA */

.nav-item{
    width: 100%;
    text-align: center;
    transition: transform 0.2s ease-in-out;
    font-weight: normal;
}
.nav-item:hover{
    transform: scale(1.2);
    font-weight: bold;
}
.Negrita-Rosa{
    font-weight: bolder;
    color: rgb(239, 116, 224);
}
.no-visible-en-movil{
    display: none;
}
.text-slider{
    text-shadow: 2px 2px 5px black;
}
.titulo-marca{
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 10px;
    margin-bottom: 10px;
    width: 100%;
    background-color: rgb(239, 116, 224);
}


/* ---DIV PRESENTACION DE SECCIONES--- */
.presentacion-seccion{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.portada-secciones{
    width: 100%;
}
.titulos{
    background-color: #fff;
    color: #222;
    width: 100%;
    height: 50px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}
.titulos p{
    margin-bottom: 5px;
}
.logo-marcas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin: 5px;
}
.logo-marcas img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}
.logo-marcas-pequenos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    margin: 5px;
}
.logo-marcas-pequenos img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}
.imagen-final-seccion img{
    width: 90%;
}

/* --------CONTENIDO DEL HEADER------------ */


#portada_movil{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(10, 1fr);
    width: 100%;
}
#portada_pc{
    display: none;
}
#imagen{
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    position: relative;
    overflow: hidden;
}
#imagen img{
    width: 100%;
    height: 100%;
    object-fit: cover;

}

#texto{
    grid-column: 1 / 6;
    grid-row: 5 / 7;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    /* CAMBIO OPACITY A 1 PARA QUE EL LOGO SE VEA EN EL INDEX MIENTRAS LA ANIMACION ESTE DESACTIVADA */

    opacity: 1; /*Inicialmente, la imagen estará transparente*/
    /* animation-delay: 1s;  */
    /* Delay de 1 segundos antes de iniciar la animación de fade-in */
    animation: fadeIn 3s ease-out 2s forwards, blink 100ms 5s 3 forwards; /* Aplicamos la animación de fade-in y parpadeo */
}
/* Animación de fade-in */

/* ANULACION TEMPORAL DE LA ANIMACION FADE IN PORTADA */
/* @keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
} */

/* Animación de parpadeo */

/* ANULACION TEMPORAL DE ANIMACION BLINKING PORTADA */
/* @keyframes blink {
    0%, 49%, 100% {
        opacity: 1;
    }
    50%, 99% {
        opacity: 0;
    }
} */

#texto img{
    width: 95%;
}
#acc-rapido{
    grid-column: 1 / 6;
    grid-row: 8 / 11;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    z-index: 2;
    margin-bottom: 10px;
}
#acc-rapido img{
    width: 100px;
    height: auto;
    border-radius: 50%;
    margin: 10px;
}
/* BOTÓN CONCURSO // BOTÓN CONCURSO */

#countdown{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: auto;
    z-index: 10;
    font-size: 2em;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: #fff;
    background-color: #222;
    margin-bottom: 15px;
}

button.btn img {
    width: 100%;
    height: auto;
    border-radius: 30px;
}


@keyframes fadeInOut {
    0%, 100% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
}

#botonSorteo {
    animation: fadeInOut 3s infinite;
}

/* ------------------------------------------------ */

/* GANADOR CONCURSO BIENVENIDA 2025 */

#ganador img{
    width: 95%;
    border: solid pink;
    border-radius: 20px;
    margin-top: 10px;
}


/* ----------------------------------------------- */

#presentacion{
    font-family: "Titan One", sans-serif;
    font-style: italic;
    font-size: 2rem;
    color: var(--color-1)
}
#presentacion p{
    margin: 0px;
}
#presentacion img{
    width: 90%;
}

#texto-presentacion{
    background-color: rgb(34, 34, 34, 0.7);
    width: 90%;
    padding: 2%;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}
#texto-presentacion p{
    margin: 0px;
    font-size: 0.9rem;
}
#texto-presentacion img{
    width: 95%;
    height: auto;
    max-width: 100%;
    border-radius: 20px;
}

#espacio-vacio{
    height: 20px;
}
#slider-mascotas-pc{
    display: none;
}
#eslogan h2{
    font-family: "Titan One", sans-serif;
    font-style: italic;
    font-size: 1.7rem;
    color: var(--color-1)
}
#subir{
    position: fixed;
    z-index: 2;
}
#subir img{
    position: fixed;
    bottom: 68px;
    right: 8px;
    max-width: 50px;
    max-height: 50px;
}
#whatsapp-logo{
    position: fixed;
    z-index: 5;
}
#whatsapp-logo img{
    position: fixed;
    bottom: 8px;
    right: 8px;
    max-width: 50px;
    max-height: 50px;
}
#link-amr{
    text-decoration: none;
    color: #717171;
    font-size: smaller;
}
/* MODA -- MODA -- MODA */

.categoria-producto{
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 5px;
    margin: 5px;

}
.producto img{
    width: 100%;
    border-radius: 30px;
}
#como-medir{
    width: 100%;
}
#como-medir img{
    max-width: 95%;
    border-radius: 15px;
    margin-bottom: 20px;
}
#medidas-ABC{
    display: flex;
}
#medidas-ABC p{
    margin: 3px;
    margin-bottom: 20px;
}

/* ACCESORIOS -- ACCESORIOS -- ACCESORIOS */

#categoria-accesorios{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin: 20px 5px 40px 5px;
}
.tipo-acc img{
    width: 100%;
    border-radius: 50%;
}
.titulo-accesorio{
    display: flex;
    flex-direction: column;
    height: 60px;
    align-items: center;
    font-weight: bolder;
    color: rgb(239, 116, 224);
}
.titulo-accesorio p{
    margin: 5px 0px 5px 0px;

}
/* INFO Y CONTACTOS */
#logos-redes{
    display: flex;
    justify-content: center;
}
#logos-redes img{
    max-width: 60px;
    margin: 20px;
}
#direccion{
    display: flex;
    justify-content: center;
    align-items: center;
}
#formasPago{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 15px 0px 15px 0px;

}
#formasPago img{
    width: 40%;
    height: auto;
}

.video-vertical{
    width: 100%; /* Ocupa el 90% del ancho de la pantalla */
    height: auto; /* Mantiene la proporción de aspecto */
    max-width: 100%; /* Asegura que el video no se exceda del contenedor */
    border-radius: 20px;
}


/* NUESTRAS MASCOTAS */
#nuestras-mascotas img{
    width: 100%;
}

/* PERROS */

#amigos-caninos img{
    width: 95%;
    border-radius: 20px;
    margin-bottom: 15px;
}
#alimentacion-canina{
    width: 100%;
}
#cuidado-aseo-canino{
    width: 100%;
}
#cuidado-aseo-canino img{
    width: 95%;
    border-radius: 20px;
    margin-bottom: 10px;
}
#entretenimiento-canino{
    width: 100%;
}
#entretenimiento-canino img{
    width: 95%;
    border-radius: 20px;
    margin-bottom: 10px;

}

/* GATOS */

#amigos-felinos img{
    width: 95%;
    border-radius: 20px;
    margin-bottom: 10px;
}
#alimentacion-felina{
    width: 100%;
}
#cuidado-aseo-felino{
    width: 100%;
}
#cuidado-aseo-felino img{
    width: 95%;
    border-radius: 20px;
    margin-bottom: 10px;
}
#entretenimiento-felino{
    width: 100%;
}
#entretenimiento-felino img{
    width: 95%;
    border-radius: 20px;
    margin-bottom: 15px;

}

/* PEQUEÑAS MASCOTAS */

#amigos-pequenos img{
    width: 95%;
    border-radius: 20px;
    margin-bottom: 10px;
}
#alimentacion-pequeno{
    width: 100%;
}
#cuidado-entretenimiento-pequenos{
    width: 100%;
}
#cuidado-entretenimiento-pequenos img{
    width: 95%;
    border-radius: 20px;
    margin-bottom: 10px;
}

/* ALIMENTOS */

#alimentos-por-tipo-mascota-pc{
    display: none;
}
#alimentos-por-tipo-mascota{
    width: 100%;
}
#alimentos-por-tipo-mascota img{
    width: 95%;
    border-radius: 20px;
    margin-bottom: 10px;
}
#alimentos-por-tipo-mascota p{
    font-size: 2rem;
}

#ppl-alimentos-por-mascota{
    width: 100%;
}
#ppl-alimentos-por-mascota img{
    width: 95%;
    border-radius: 20px;
    margin-bottom: 10px;
}

#imagen-pre-footer-alim img {
    position: relative;
    width: 100%;
    z-index: 1;
    display: block;
    margin-bottom: -7%;
}
#imagen-pre-footer-perro img {
    position: relative;
    width: 100%;
    z-index: 1;
    display: block;
    margin-bottom: -15%;
}
#imagen-pre-footer-gato img {
    position: relative;
    width: 100%;
    z-index: 1;
    display: block;
    margin-bottom: -15%;
}
#imagen-pre-footer-peque img {
    position: relative;
    width: 100%;
    z-index: 1;
    display: block;
    margin-bottom: -15%;
}
footer p{
    position: relative;
    z-index: 2;
    text-shadow: 2px 2px 2px black;
    margin-bottom: 0;

}


/* IMAGEN A TEXTO */

.contenedor-info {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 20px;
}
.imagen-info {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    border-radius: 20px;
    transition: opacity 0.5s, transform 0.5s;
}
.texto-overlay-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0; /* Inicialmente invisible */
    transition: opacity 0.5s;
    padding: 10px;
}

/* ------------ */
/* Clase visible que se aplica cuando el div está entre los bloques 4 y 6 */
.visible .imagen-info {
    opacity: 0.3;
}

.visible .texto-overlay-info {
    opacity: 1;
}
.contenedor-info2 {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 20px;
}
.imagen-info {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    border-radius: 20px;
    transition: opacity 0.5s, transform 0.5s;
}
.texto-overlay-info2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0; /* Inicialmente invisible */
    transition: opacity 0.5s;
    padding: 10px;
}

/* ------------ */
/* Clase visible que se aplica cuando el div está entre los bloques 4 y 6 */
.visible .imagen-info {
    opacity: 0.3;
}

.visible .texto-overlay-info2 {
    opacity: 1;
}

/* ----------------- */

#finAlimPeque img{
    width: 80%;
    position: relative;
    margin-bottom: -10%;
}
#finAlimPeces img{
    width: 100%;
    margin-top: 20px;
}
#finAlim img{
    width: 70%;
}
.wsp-modal{
    color: rgb(11, 150, 64);
    text-decoration: none;
    font-weight: bold;
}






/* --------------------------------
VISUALIZACION EN PANTALLAS GRANDES
VISUALIZACION EN PANTALLAS GRANDES
-------------------------------- */


@media (min-width: 992px) {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }
    html {
        scroll-behavior: smooth;
    }
    body {
        padding: 0;
        margin: 0;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        color: var(--color-1);
    }


        /* NAVBAR BETA */

    /* Navbar por defecto */
    .navbar-custom {
        transition: all 0.5s ease;
        height: 80px; /* Altura original */
    }
    
    /* Logo por defecto */
    .navbar-brand img {
        transition: all 0.5s ease;
        height: 40px; /* Tamaño original del logo */
    }
    
    /* Efecto cuando se hace scroll (se reduce la altura y opacidad) */
    .navbar-shrink {
        height: 40px; /* Reduce la altura */
        background-color: #ef74e0 !important;
    }

    .navbar-shrink .navbar-brand img {
        height: 28px; /* Reduce el tamaño del logo */
        background-color: #ef74e0;

    }

    /* Asegura que el menú desplegable tenga un color de fondo */
    .navbar-collapse {
        background-color: #ef74e0; /* El mismo color que usas en el navbar */
    }
    
    /* Ajusta el color de fondo del botón hamburguesa cuando se hace scroll */
    .navbar-toggler {
        background-color: #ef74e0;
    }
    
    /* Asegura que el color de fondo no desaparezca cuando se hace scroll */
    .navbar-collapse.navbar-shrink {
        background-color: #ef74e0;
    }

    /* NAVBAR BETA */



    .navegacion{
        margin: 10px 0px 10px 0px;
        position: sticky;
        top: 0px;
        z-index: 1;
    }
    .nav-item{
        transition: transform 0.2s ease-in-out;
        font-weight: normal;
    }
    .nav-item:hover{
        transform: scale(1.2);
        font-weight: bold;
    }
    .navbar-nav .nav-item{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .no-visible-en-movil{
        display: block;
    }
    .portada-secciones{
        width: 80%;
        border-radius: 50px;
    }
    .verM{
        display: none;
    }
    .verP{
        display: block;
    }

    /* --------------- CONTENIDO HEADER --------------- */

    #portada_pc{
        display: grid;
        grid-template-columns: repeat(19, 1fr);
        grid-template-rows: repeat(15, 1fr);
        width: 100%;
    }
    #portada_movil{
        display: none;
    }
    #imagen{
        grid-column: 1 / -1;
        grid-row: 1 / -1;
        position: relative;
        overflow: hidden;
    }
    #portada-pc img{
        width: 100%;
        height: auto;

    }

    #texto{
        grid-column: 5 / 16;
        grid-row: 7 / 11;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2;
    }
    #texto img{
        width: 100%;
    }
    #acc-rapido{
        grid-column: 3 / 18;
        grid-row: 12 / 15;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        z-index: 2;
        margin-bottom: 10px;
    }
    #acc-rapido img{
        width: 150px;
        height: auto;
        border-radius: 50%;
        margin: 20px;
        transition: transform 0.3s ease;
    }
    #acc-rapido img:hover{
        transform: scale(1.2);
        
    }

    
/* BOTÓN CONCURSO // BOTÓN CONCURSO */


#cuenta-regresiva{
    display: flex;
    align-items: center;
    background-color: #ef74e0;
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    border-radius: 30px;
    margin: 30px;
}
#countdown{
    font-size: 4em;
    background-color: #ef74e0;
    margin: 50px;
}

/* --------GANADOR---------- */

#ganador {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center; /* Alinea las imágenes verticalmente en el centro */
    height: 500px; /* Establece la altura del contenedor (ajusta según tus necesidades) */
}

#ganador img {
    height: 100%;          /* Hace que la altura de las imágenes se ajuste al 100% de la altura del contenedor */
    width: auto;           /* Mantiene el ancho proporcional de la imagen */
    object-fit: contain;   /* Asegura que la imagen no se deforme y mantenga sus proporciones */
}


/* -------------------------------- */
    #presentacion{
        font-family: "Titan One", sans-serif;
        font-style: italic;
        font-size: 4rem;
        color: var(--color-1)
    }
    #presentacion p{
        margin: 0px;
    }
    #presentacion img{
        width: 70vw;
    }
    #texto-presentacion{
        background-color: rgb(34, 34, 34, 0.7);
        width: 80%;
        padding: 2%;
        border-radius: 50px;
        margin-top: 20px;
    }
    #texto-presentacion p{
        margin: 0px;
        font-size: larger;
    }
    #espacio-vacio{
        height: 50px;
    }
    #slider-mascotas-movil{
        display: none;
    }
    #slider-mascotas-pc{
        display: block;
    }
    #eslogan h2{
        font-family: "Titan One", sans-serif;
        font-style: italic;
        font-size: 3rem;
        color: var(--color-1)
    }
    #eslogan p{
        font-size: larger;
    }
    #nuestras-mascotas{
        display: flex;

    }
    footer{
        text-align: center;
    }

        /* BOTÓN CONCURSO // BOTÓN CONCURSO */
    #concurso{
        width: 100%;
        position: absolute;
        z-index: 2;
        bottom: -170px;

    }
    #concurso img{
        width: 30%;
        border-radius: 40px;
    }

    @keyframes fadeInOut {
        0%, 100% {
        opacity: 0;
        }
        50% {
        opacity: 1;
        }
    }

    .botonSorteo {
        animation: fadeInOut 5s infinite;
    }
    


    /* ALIMENTOS   ALIMENTOS   ALIMENTOS */

    #alimentos-por-tipo-mascota-pc{
        width: 80%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 50px;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    #alimentos-por-tipo-mascota-pc img{
        width: 100%;
        border-radius: 20px;
        margin-bottom: 10px;
    }
    #alimentos-por-tipo-mascota-pc p{
        font-size: 2rem;
    }
    #alimentos-mascotas-felices img{
        width: 100%;

    }
    #alimentos-por-tipo-mascota{
        display: none;
    }
    .contenedor-info:hover .imagen-info {
    opacity: 0.3;
    }
    .contenedor-info:hover .texto-overlay-info {
        opacity: 1;
    }


    /* HOVER SOBRE ALIMENTOS TIPO MASCOTA EN PC */

    .contenedor-info-pc {
        position: relative;
      }

      .imagen-info {
        width: 100%;
      }

      .texto-hover {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;

        background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semi-transparente */
        opacity: 0; /* Texto invisible por defecto */
        transition: opacity 0.3s ease;
      }

      .contenedor-info-pc:hover .texto-hover {
        opacity: 1; /* El texto se hace visible cuando haces hover */
      }

      #presentacion {
        color: white;
        font-size: 24px;
        text-align: center;
        margin: 0;
      }
      #alimentos-mascotas-felices{
        width: 70%;
        position: relative;
    }
    #ppl-alimentos-por-mascota{
        width: 100%;
    }
    #ppl-alimentos-por-mascota img{
        width: 50%;
        border-radius: 50px;
        margin-bottom: 10px;
    }
    #presentacion{
        font-family: "Titan One", sans-serif;
        font-style: italic;
        font-size: 3rem;
        color: var(--color-1)
    }
    #presentacion p{
        margin: 0px;
    }
    .contenedor-marcas{
        display: flex;
        justify-content: center;
    }
    .logo-marcas {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        width: 70%;
        gap: 20px;
        margin: 15px;
        margin-bottom: 40px;
    }
    .logo-marcas img {
        width: 100%;
        height: auto;
        border-radius: 20px;
    }
    .logo-marcas-pequenos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 40px;
        margin-top: 40px;
        gap: 20px;
        align-items: center;
        justify-items: center;

    }
    .logo-marcas-pequenos img {
        width: 100%;
        height: auto;
        border-radius: 20px;
    }

    /* MODA Y ACCESORIOS */

    .presentacion-seccion img{
        width: 50vw;
    }

    #categoria-accesorios{
        display: flex;
    }
    .tipo-acc img{
        width: 70%;
        border-radius: 50%;
    }
    .categoria-producto{
        max-width: 100%;
        display: grid;
        /* grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); */
        grid-template-columns: repeat(5, 1fr);
        gap: 5px;
        margin: 5px;

    }
    .producto img{
        width: 100%;
        border-radius: 15px;
    }
    #como-medir{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
        align-items: center;
        justify-items: center;
    }
    #como-medir img{
        max-width: 95%;
        border-radius: 15px;
        margin-bottom: 20px;
    }
    #medidas-ABC{
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 50px;
    }
    #medidas-ABC p{
        margin: 3px;
        margin-bottom: 20px;
    }
    #carouselExampleAutoplayingPC{
        padding-right: 25px;
        padding-left: 25px;
        padding-bottom: 25px;
    }
    #carouselExampleAutoplayingPC img{
        border-radius: 25px;
    }

    /* SECCION PERROS // GATOS  // PEQUEÑOS */

    #info-amigos-pc{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        justify-items: center;
    }

    .petContent{
        display: flex;
        flex-wrap: wrap;
        row-gap: 20px;
    }
    .contenedor-info2{
        width: 33%;
        position: relative;
        height: auto;
        overflow: hidden;
        border-radius: 20px;

    }

    .imagen-info {
        width: 100%;
        border-radius: 20px;
        transition: opacity 0.5s, transform 0.5s;
    }
    .texto-overlay-info2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        opacity: 0; /* Inicialmente invisible */
        transition: opacity 0.5s;
        padding: 20px;
    }
    .contenedor-info2:hover .imagen-info {
        opacity: 0.3;
    }
    .contenedor-info2:hover .texto-overlay-info2 {
        opacity: 1;
    }
    #finAlimPeces img{
        width: 50%;
        border-radius: 50%;
        margin: 20px;
    }
    #finAlimPeque img{
        position: relative;
        margin-bottom: -10%;

    }
    #finAlim{
        width: 100%;
    }
    #finAlim img{
        margin-top: 20px;
        width: 30%;
    }







}