* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --fondo: #FFD1DC; /*rosa pastel*/
   
    /*Negro mate: #121212 */
    --fondo-secundario: #FFFFFF;
    --fondo-terciario: #8E8E8E;
    --texto: #000000;  /* negro puro*/
   
    --texto-secundario: #8E8E8E; /*gris ceniza*/
    
    --texto-terciario: #FFFFFF;

}

/* Código compatible con todos los navegadores */

/* Firefox y Estándar */
/* --- Compatibilidad para Firefox --- */
html {
    scrollbar-width: thin;
    scrollbar-color: #E5737D #f1f5f9;
    /* Tirador (Rosa) y Fondo (Gris muy claro) */
}

/* --- Compatibilidad para Chrome, Edge y Safari --- */

/* 1. Ancho de la barra */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    /* Para el scroll horizontal */
}

/* 2. Pista / Fondo del scroll (Gris claro para que el rosa resalte) */
::-webkit-scrollbar-track {
    background-color: #f1f5f9;
    border-radius: 10px;
}

/* 3. El tirador de la barra (Tu color elegido) */
::-webkit-scrollbar-thumb {
    background-color: #E5737D;
    border-radius: 10px;
    border: 2px solid #f1f5f9;
    /* Crea un margen elegante alrededor del tirador */
}

/* 4. Efecto Hover (Un tono coral más intenso y oscuro) */
::-webkit-scrollbar-thumb:hover {
    background-color: #C84B56;
}

body {
    background: var(--fondo);
    background-attachment: fixed;
    -webkit-tap-highlight-color: transparent;
    font-family: 'Rubik', sans-serif;
    /* Tu fuente principal */
    -webkit-font-smoothing: antialiased;
    /* Mejora el renderizado en móviles */
}

main,
section[id] {
    scroll-margin-top: 80px;
    /*
- propiedad para desplazar 80px debajo de cada seccion cuando se le hace referencia 
a travez de los atajos del menu
- ajustar los 80px dependiendo del alto que se le proporcione al header
- solo necesario para encabezados fixed*/
}




/*contenedor del header
-fijo, padre del h1+img + ancla/index y boton del menu hamburguesa*/
.header-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: var(--fondo-secundario);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-shadow: 0px 1px 5px 1px rgba(142, 142, 142, 0.7);
    z-index: 1000;
}

/*propiedades del contenedor ancla que envuelve al logo. con id al index.html*/
.logo-content a {
    display: block;
    width: 70px;
    height: 70px;
    outline: none;
    text-decoration: none;
    overflow: hidden;
    border-radius: 50%;
    transition: transform 0.3s ease-out;
}

.logo-content a:hover {
    transform: translateY(-5px);


}

/*propiedades de la imagen del logo*/
.logo-content img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}


/*propiedades del menu hamburguesa*/


/*propiedad para ocultar el input checkbox*/
.menu-check {
    display: none;

}

/*propiedades para el boton de menu hamburguesa
  con un area de 50x50px para el margen del tap en moviles
  
  contenedor de las barras del menu que en estado active forman una x*/

.menu-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    border: none;
    touch-action: manipulation;

}

/* propiedades para las barras de spans que forman el boton del menu*/
.menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    transition: transform 0.3s ease-out;
    background-color: var(--fondo);
}

/*efecto de hundimiento del boton del menu hamburguesa*/
.menu-toggle:active {
    transform: scale(0.9);
}

/*transformacion del boton en x cuando el menu esta activo*/
.menu-check:checked~.menu-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

/* 2. Desvanecer la barra del medio (segunda) */
.menu-check:checked~.menu-toggle span:nth-child(2) {
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    /* Opcional: le da un efecto de salida lateral */
}

/* 3. Rotar la barra de abajo (tercera) */
.menu-check:checked~.menu-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/*propiedades del contenido de la navegacion del menu*/

/*propiedades del nav. estos atributos son mobile first
    ajustamos la media para la version de desktop
    lo mantenemos oculto para que se muestre al ser activado
    con el checkbox*/

.menu-nav {
    position: fixed;
    top: 80px;
    right: 0px;
    width: 75%;
    height: 100%;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out, opacity 0.3s ease, visibility 0.3s;
    z-index: 99;
    /*para que se sobreponga a todo*/
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background-color: rgba(255, 255, 255, 0.5);
}

/*habilita el menu cuando el input esta activo*/
.menu-check:checked~.menu-nav {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}

/*contenedr ul de los items del menu*/
.menu-nav-items-content {

    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 1.5rem 1rem;

}

/*li pertenecientes al ul-contenedor*/
.menu-nav-items {
    list-style: none;
    width: 100%;
    display: block;
    right: 0;
}

/*propiedades para los enlaces dentro del menu*/
.menu-nav-link {
    text-decoration: none;
    color: #E5737D;
    font-size: 1.4rem;
    font-weight: bold;
    padding: .5rem;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;

}

/*propiedades para los favicons del menu*/
.menu-nav-img {
    display: block;
    width: 25px;
    height: 25px;
    object-fit: contain;
    outline: none;
    transition: transform 0.2s ease-in-out;
}

/*estilos del submenu*/

/*propiedades del input check para activar o desactiar el submenu
    posicion absoluta para que cubra toda el area del ancla y en estado oculto*/
.submenu-check {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/*propiedad para rotar el favicon del submenu cuando esta activo*/
.menu-nav-items:has(.submenu-check:checked) .menu-nav-img {
    transform: rotate(90deg);
    /* Rota la imagen 180 grados */
}

/*propiedades de las sub-categorias (etiqueta ul)*/
.submenu-categorias {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    height: 0;
    padding: 0 20px;
}

/* propiedades para mostrar el submenu cuando esta activo input checkbox */
.menu-nav-items:has(.submenu-check:checked) .submenu-categorias {
    opacity: 1;
    visibility: visible;
    height: calc(50vh - 80px);
    padding: 20px;
    overflow: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Hace que el scroll en iPhone sea ultra fluido */
}


.submenu-categorias li a {
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none;
    color: #F7B547; /*color de los enlaces del submenu*/
    /* Gris ceniza #8E8E8E */
    display: inline-block;
    background-color: var(--fondo-secundario);
    border-radius: 15px;
    padding: 5px 15px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: transform 0.1s ease-out;
    touch-action: manipulation;
}

/*efecto para hundir los botones y cambiar el color*/
.submenu-categorias li a:active {
    transform: scale(0.9);
    color: var(--texto-terciario);
}


/*propiedades del contenedor principal del aside + main*/
.top-80 {
    margin-top: 80px;
}

.principal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/*propiedades del sidebar*/
.sidebar-content {
    display: none;
    visibility: hidden;
    opacity: 0;
    

    width: 100%;
    height: 100%;
    overflow: hidden;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.sidebar-items {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: .8rem;
    /*background-color: #FDFDFD;*/
    background-color: var(--fondo-secundario);
}

.sidebar-items span {
    color: #333333;
    font-weight: bold;
    font-size: 1.5rem;
    text-align: center;
    padding: 0.8rem 0;

}

.sidebar-items li a {
    text-decoration: none;
    color: #E5737D;
    /* color: #4A1521; */
    /* color: #FDFDFD; */
    font-weight: bold;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: transform 0.3s ease-out;
}

.sidebar-items li a:hover {
    color: #7193F1;
    transform: translate(-2px, -2px);
}


.main-content {
    width: 100%;
    height: auto;
    overflow: visible;
    padding: 5px;
}


/*tarjetas*/
/*estilos para las tarjetas de los producrtos*/

.producto-container {

    display: flex;
    flex-wrap: wrap;
    gap: 8px;


    /* display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(180px, 45vw, 250px), 1fr));
    gap: 8px;
    /* Espaciado corto ideal para móviles */
    justify-content: center;
    padding: 0.5rem;
    */
}

.producto-card {
    background-color: var(--fondo-secundario);
    border-radius: 12px;
    /* Bordes redondeados para suavidad */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 1 150px;
    text-align: center;
    width: 100%;
    max-width: 450px;
    height: 100%;
    min-height: 385px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    /* Sombra suave para dar profundidad */
    transition: transform 0.2s ease;


}

/* 3. Indicador visual para que el usuario sepa que hay un modal */
/* .producto-card::after {
    content: "Ver detalles";
    display: block;
    font-size: 0.8rem;
    font-weight: bold;
    color: #E5737D;
    padding-bottom: 15px;
    text-decoration: none;
    cursor: pointer;
} */

/*estilos del titulo de categorias*/
.categoria-titulo {
    color: #333333;
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: -0.5px;
    padding: 2rem;


}

/*estilos para el texto del nombre del producto*/
.producto-name {
    font-weight: 700;
    font-size: 1.1rem;
    padding: 1rem;
    color: #333;
    
}

/*estiloos para la descripcion de los productos*/

.producto-card-info {
    /* list-style: none; */
    text-align: left;
    color: var(--texto-secundario);
    font-size: 0.9rem;
    line-height: 1.4;
    /* margin: 0 auto; */
    padding: 0.5rem 1rem;
    overflow: hidden;
}

.producto-card-info li {

    /* 1. Obliga al texto a quedarse en una sola línea */
    white-space: nowrap;

    /* 2. Esconde el texto que se desborde del ancho del li */
    overflow: hidden;

    /* 3. Agrega los tres puntos (...) al final del corte */
    text-transform: capitalize;
    /* Por si quieres mantener el formato de nombres */
    text-overflow: ellipsis;

}



/*estilos para las imagenes de los productos*/
.producto-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    object-fit: cover;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    /* Separa imagen de texto */
}

/*efecto de hundimiento en las tarjetas para un feedback visula*/
.producto-card:active {
    transform: scale(0.98);
    /* Feedback táctil al tocar */
}

/*propiedades del boton fijo de whatsapp*/

.ws-button-fixed {
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 9999;
    /* Asegúrate de que siempre esté arriba */
}

.ws-button-fixed a {
    width: 60px;
    height: 60px;
    text-decoration: none;
    display: block;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
}

.ws-button-fixed img {
    width: 100%;
    /* Un poco más pequeño para que respire */
    height: 100%;
    object-fit: contain;
}

/*clase para hacer la animacion de pulso*/
.pulse-scale {
    animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
        /* Crece un 5% */
    }

    100% {
        transform: scale(1);
    }
}


/* Estilos de la Sección Contacto */
.seccion-contacto {
    padding: 40px 20px;
    background-color: var(--fondo);
    text-align: center;
}

.contacto-container {
    background-color: var(--fondo-secundario);
    border-radius: 20px;
    padding: 30px 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin-top: 20px;
}

.contacto-texto {
    color: var(--texto-secundario);
    font-weight: 500;
    margin-bottom: 25px;
    font-size: 1rem;
}

/* Contenedor de iconos */
.redes-sociales {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
}

.social-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9f9f9;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform 0.1s ease;
    -webkit-touch-callout: none;
    /* Evita que salga el menú contextual al dejar pegado el dedo */
    outline: none;
}

.social-icon img {
    width: 35px;
    height: 35px;
    object-fit: contain;
    outline: none;
}

/* Efecto visual al tocar (Feedback táctil) */
.social-icon:active {
    transform: scale(0.9);
    background-color: var(--fondo);
}

.contacto-info-extra {
    border-top: 1px solid #eee;
    padding-top: 20px;
    color: #333;
    font-size: 0.9rem;
    line-height: 1.8;
}

/*estilos para el footer*/

.footer-final {
    padding: 10px;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.05);

}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.footer-copy {
    color: var(--texto-secundario);
    font-size: 0.85rem;
}

.footer-dev {
    color: #E5737D;
    /* El rosa de tu marca */
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 5px;
    text-transform: uppercase;
}
.footer-dev a {
    color: #C84B56;
    
}


/*estilos del menu version desktop*/

@media (min-width: 768px) {

    /*desaparecemos el boton del menu*/
    .menu-toggle {
        display: none;
        visibility: hidden;
    }

    /*reseteo de propiedades para el nav*/
    .menu-nav {
        position: static;
        background-color: initial;
        opacity: 1;
        visibility: visible;
        top: auto;
        right: auto;
        width: auto;
        height: auto;
        transform: none;
        transition: none;
        cursor: initial;

    }

    /*propiedades para ajustar el contenedor del los items del menu 
    a la version desktop*/
    .menu-nav-items-content {
        display: flex;
        flex-direction: row;
        gap: 25px;
        background-color: initial;
        padding: 0;
    }


    .menu-nav-link {
        font-size: 1.2rem;
        font-weight: bold;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 5px;
        position: relative;
        transition: transform 0.3 ease-out;
    }

    .menu-nav-link:hover {
        color: #F7B547;
        transform: translate(-2px, -2px);
    }

    .menu-nav-img {
        display: none;
    }

    /*submenu oculto*/
    .submenu-content {
        display: none;
    }

    /*el problema es que confundi los contenedores*/
    .principal-content {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 5px;
        grid-auto-rows: auto;
    }

    .producto-container {

        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;

        /* display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
        gap: 8px;
        /* Espaciado corto ideal para móviles */
        justify-content: center;
        */
    }

    .producto-card {
        flex: 1 1 400px;
        max-width: 400px;
        min-height: 600px;
    }

    .producto-card:hover {
        transform: translateY(-5px);
        /* Efecto de elevación al pasar el mouse */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .categoria-titulo {
        font-size: 3rem;
        letter-spacing: -0.5px;
    }

    .sidebar-content {
        display: block;
        visibility: visible;
        opacity: 1;
        position: sticky;
        top: 80px;
        /* Se clava justo debajo de tu header de 80px */
        height: calc(100vh - 80px);
        /* Ocupa el alto visible restante */
        overflow-y: auto;
        /* Si la lista de productos es larguísima, el sidebar tendrá su propio scroll interno de forma segura */
    }

    .menu-nav-items-content li:nth-child(2) {
        display: none;
    }

    .social-icon:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

}