:root{
    --fondo-general:radial-gradient(circle at 10% 15%, #f1f3f7 10%, #e6eaf0 50%, #dce1ea  100%);
    --texto-principal:#0c1015;
    --texto-secundario:#3c4450;
    --texto-atenuado:#646e7c;
    --texto-invertido:#ffffff;

    --vidrio-muy-claro:rgba(255,255,255,0.9); /*Es vidrio poque deja transparentar el color del fondo*/
    --vidrio-claro:rgba(255,255,255,0.25);

    --vidrio-claro-hover:rgba(255,255,255,0.92);
    --vidrio-claro-borde:rgba(255,255,255,0.75);
    --vidrio-claro-borde-2: rgba(255,255,255,0.45);
    --vidrio-claro-blur:blur(20px) saturate(180%);

    --vidrio-oscuro:rgba(14,18,22,0.88);
    --vidrio-oscuro-hover:rgba(14,18,22,0.96);
    --vidrio-oscuro-borde:rgba(255,255,255,0.22);
    --vidrio-oscuro-blur:blur(22px) saturate(190%);

    /* Botones Casuales */
    --estrella:#f59e0b;
    --corazon:#ef4444;
    --color-icono:#0c1015;

    /*formas*/
    --radio-xl:28px;
    --radio-lg:20px;
    --radio-md:14px;
    --radio-full:9999px;

    /* sombras */
    --sombra: 0 12px 32px rgba(12,16,24,0.06);
    --sombra-doble: 0 12px 32px rgba(12,16,24,0.06), inset 0 1px rgba(255,255,255,0.85);
    --sombra-flotante: 0 8px 24px rgba(0,0,0,0.12), inset 0 1px 1px rgba(255,255,255,0.9);
    --sombra-interior: inset 0 1px rgba(255,255,255,0.85);

    /* transiciones */
    --transicion-suave: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transicion-rapida: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after{
    margin: 0;
    padding: 0;
   box-sizing: border-box;
   -webkit-font-smoothing:antialiased;
   -moz-osx-font-smoothing: grayscale;
}
/*Se aplica a ambos porque html y body son dos capas diferentes, y para que ciertas propiedades funcionen correctamente (especialmente las de altura y ancho), ambos elementos deben estar coordinados.*/
/*El elemento html es la raíz de todo el documento. Por defecto, el navegador hace que el html mida solo lo que mide su contenido.
• Si le ponés min-height: 100vh solo al body, este intentará estirarse, pero en algunos navegadores antiguos o bajo ciertas configuraciones de diseño (como al usar porcentajes), el body no sabe respecto a qué estirarse porque su padre (html) no tiene un tamaño definido.
• Al declarar html, body, te asegurás de que toda la estructura raíz entienda que el espacio mínimo es el total de la pantalla.
*/
/*• Si ponés overflow-x: hidden solo en el body, es muy probable que la barra horizontal siga apareciendo en algunos navegadores si un elemento se desborda, porque el elemento html todavía tiene el permiso de mostrarla.
• Al ponérselo a los dos, bloqueás por completo cualquier intento de scroll horizontal erróneo.*/
/*Al ponerlo así estandarizamos todo y el body no se achica ni se estira*/


html,body{
    width: 100%;
    min-height: 100vh;
    font-family: "Plus Jakarta Sans", sans-serif;
    line-height: 1.45;
    overflow-x: hidden;
}
button{
    cursor: pointer;
}

a{
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
    text-transform: capitalize;
}
ul{
    list-style: none;
}
/*clases generales*/
.vidrio{
    background: var(--vidrio-muy-claro);
    backdrop-filter: var(--vidrio-claro-blur);
    -webkit-backdrop-filter: var(--vidrio-claro-blur);
    border: var(--vidrio-claro-borde);
    box-shadow: var(--sombra-doble);
}
.vidrio-gris{
    background: var(--vidrio-claro);
    backdrop-filter: var(--vidrio-claro-blur);
    -webkit-backdrop-filter: var(--vidrio-claro-blur);
    border: 2px solid white;
    box-shadow: var(--sombra-doble);
}
.vidrio-oscuro{
    background: var(--vidrio-oscuro);
    backdrop-filter: var(--vidrio-oscuro-blur);
    -webkit-backdrop-filter: var(--vidrio-oscuro-blur);
    border: var(--vidrio-oscuro-borde);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
@keyframes latido {

    0%{transform: scale(1);}
    25%{transform: scale(1.28);}
    40%{transform: scale(0.95);}
    60%{transform: scale(1.15);}
    100%{transform: scale(1);}
    
}
@keyframes aparecerDesdeArriba {
    from{
        opacity: 0;
        transform: translateY(-30px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes aparecerDesdeAbajo {
    from{
        opacity: 0;
        transform: translateY(30px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes aparecer {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
@keyframes aparecerDesdeIzq {
    from{
        opacity: 0;
        transform: translateX(-100px);
    }
    to{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes aparecerDesdeDer {
    from{
        opacity: 0;
        transform: translateX(100px);
    }
    to{
        opacity: 1;
        transform: translateX(0);
    }
}
/*El body va a ser flexbox, para que el main pueda tomar todo el espacio disponible, independientemente del tamaño de la pantalla*/

body{
    display: flex;
    flex-direction: column;
    gap:14px;
    padding: 14px 20px;
    background: var(--fondo-general);
    color: var(--texto-principal);

}

/*===========================================================================*/
  /*=========================== Header ====================================*/
/*===========================================================================*/

header{
  

   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   animation: aparecerDesdeArriba 0.3s ease forwards;

}

header a#logo{
    color:var(--texto-principal);
    font-size: 22px;
    font-weight: 800;
    line-height: 0.88;
    letter-spacing: -0.5px;

    padding-left: 2px;
    flex-shrink: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) ;
}

header a#logo:hover span{
    transform: scale(1.05) rotate(-4.5deg);
    opacity: 0.8;
}
header a#logo span{
    display: block;
    letter-spacing: -0.05em;
}

header .barra-busqueda{
    flex: 1;
    max-width: 520px;
    padding: 4px 6px 4px 18px;
    border-radius: var(--radio-full);

    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: var(--transicion-suave);

}
/*Cuando se presiona en un input en su interior*/
header .barra-busqueda:focus-within{
    background: var(--vidrio-claro-hover);
    border-color: rgba(255,255,255,0.98);
    box-shadow: 0 16px 36px rgba(0,0,0,0.1), 0 0 0 3px rgba(255,255,255,0.6), var(--sombra-interior);
    transform: translateY(-2px);
}
header .barra-busqueda  .grupo-input{
    display: flex;
    align-items: center;
    gap: 10px;
   
    flex:1;
}
header .barra-busqueda:focus-within  .grupo-input span{
    color: var(--texto-principal);
    transform: scale(1.15);
}

header .barra-busqueda  .grupo-input input{
    width: 100%;
    border: none;
    outline: none;
    background: transparent;

    font-size: 14px;
    font-weight: 600;
    color: var(--texto-principal);

}
header .barra-busqueda  .grupo-input input::placeholder{
    color: var(--texto-atenuado);
    font-weight: 500;
    transition: opacity 0.25s ease;
}
header .barra-busqueda:focus-within  .grupo-input input::placeholder{
    opacity: 0;
}

header .barra-busqueda button{
    color: white;
    border-radius: var(--radio-xl);
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 700;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;

    transition: var(--transicion-suave);
    overflow: hidden;
}
header .barra-busqueda button:hover{
    background: var(--vidrio-oscuro-borde);
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 20px rgba(14,18,22,0.25);
    color: var(--texto-principal);
}
header .barra-busqueda button:active{
    transform: translateY(0) scale(0.93);
}
header .barra-busqueda button span{
    transition: transform 0.3s ease;
}
header .barra-busqueda button:hover span{
    transform: rotate(15deg) scale(1.1);
    color: var(--texto-principal);
}

header .acciones{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.capsula{
    padding: 9px 18px;
    color: var(--texto-principal);
    border-radius: var(--radio-full);

    font-size: 13.5px;
    font-weight: 700;
    
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;


    transition: var(--transicion-suave);
}
.capsula span{
    transition: transform 0.3s ease;
}
.capsula:hover{
    background: var(--vidrio-claro-hover);
    border-color: white;
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(12,16,24,0.09), var(--sombra-interior);
}
.capsula:hover span{
    transform: scale(1.05);
}

.circulo{
    color: var(--texto-principal);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    /* Para que no se encoja */
    flex-shrink: 0;

    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transicion-suave);

}
.circulo:hover{
    background-color: #fff;
    transform: translateY(-3px) scale(1.06);
    border-color: #fff;
    box-shadow: 0 12px 24px rgba(0,0,0,0.1), var(--sombra-interior);
}
/* Momento exacto en el que se lo presiona, ya sea con mouse o dedo en celulares- Efecto hundimiento de un botón */
.circulo:active, .capsula:active{
    transform: translateY(0) scale(0.96);
}
.corazon{
    color: var(--corazon);
}
.circulo span{
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.circulo:hover span{
    transform: scale(1.2);
}
.circulo:hover span.corazon{
    animation: latido 0.6s ease-in-out infinite;
}
.canasta{
    position: relative;
}
.canasta #contador-carrito{
    position: absolute;
    top:-3px;
    right: -2px;
    background: var(--vidrio-oscuro);
    color: white;
    font-size: 10.5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    /* el contenido */
    display: flex;
    justify-content: center;
    align-items: center;

    transition: transform 0.3s ease;
}
.circulo:hover #contador-carrito{
    transform: scale(1.2) rotate(6deg);
}

.avatar{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.9);
    box-shadow: var(--sombra);
    cursor: pointer;
    transition: var(--transicion-suave);
}
.avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.avatar:hover{
    transform: translateY(-2px);
}
.avatar:active{
    transform: translateY(0) scale(0.93);
}
.avatar:hover img{
    transform: scale(1.12);
}
/*===========================================================================*/
  /*=========================== Nav ====================================*/
/*===========================================================================*/

nav{


   display: flex;
   align-items: center;
   justify-content: space-between;
   gap:14px;
   opacity: 0;
   animation: aparecer 0.3s ease 0.3s forwards;

}
nav ul{
    display: flex;
    align-items: center;
    gap:8px;
}
nav ul span{
    font-size: 18px;
    font-weight: 800;
    margin-right: 4px;
    white-space: nowrap;
    letter-spacing: -0.3px;
    flex-shrink: 0;
}
nav button{
    cursor: pointer;
}

nav button.activo,   nav button.activo:hover{
    background-color: var(--vidrio-oscuro);
    color: var(--texto-invertido);
    backdrop-filter: var(--vidrio-oscuro-blur);
    -webkit-backdrop-filter: var(--vidrio-oscuro-blur);
  }

nav button.ver-todos span{
    transition: transform 0.3s ease;
}
nav button.ver-todos:hover span{
    transform: rotate(90deg);
}

/*===========================================================================*/
  /*=========================== Main ====================================*/
/*===========================================================================*/

main{



    /* para su contenido/hijos */
    display: grid;
    grid-template-columns: 1fr 1.65fr;
    gap:14px;
   
}

main .tarjeta-principal{
    /* nos aseguramos que */
    min-height: 480px;
    max-height: 650px;
     /* Con estas propiedades armamos el rectángulo */
    background-image: url(imagenes/1.png);
    background-position: center;
    background-size: cover;

    border-radius: var(--radio-xl);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.95);
    box-shadow: var(--sombra), inset 0 1px 2px rgba(255,255,255,0.90);

    padding: 22px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    transition: var(--transicion-suave);

    opacity: 0;
   animation: aparecerDesdeIzq 0.8s ease 0.4s forwards; 
}

main .tarjeta-principal:hover{
    box-shadow: 0 20px 48px rgba(0,0,0,0.12), inset 0 1px 2px rgba(255,255,255,0.9);
    transform: translateY(-2px);
}

/*-------------------------------------------------------------*/
/*--------------- Tarjeta Principal --------------------------*/
/*-------------------------------------------------------------*/

main .tarjeta-principal .arriba {
    display: flex;
    flex-direction: column;
    gap:14px;
    z-index: 2;
}

main .tarjeta-principal .arriba .novedades{
   
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    
}

main .tarjeta-principal .arriba .novedades .titulo {
    padding: 12px 18px;
    border-radius: var(--radio-lg);
    transition: var(--transicion-suave);
}
main .tarjeta-principal:hover .arriba .novedades .titulo{
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(0,0,0,0.08), var(--sombra-interior);
}

main .tarjeta-principal .arriba .precio{
    width: fit-content;
    padding: 12px 18px;
    border-radius: var(--radio-lg);
    transition: var(--transicion-suave);
  
}
main .tarjeta-principal:hover .arriba .precio{
     transform: translateX(-2px);
    box-shadow: 0 16px 32px rgba(0,0,0,0.08), var(--sombra-interior);
}
main .tarjeta-principal .arriba .precio .valor-precio{
    font-size: 28px;
    font-weight: 800;
    color: var(--texto-principal);
    letter-spacing: -0.5px;
    line-height: 1.1;
}
main .tarjeta-principal .arriba .precio .detalle{
    font-family: 13.5px;
    color: var(--texto-secundario);
    font-weight: 700;
    margin-top: 1px;
}
main .tarjeta-principal .arriba .precio .btn-pedir-ahora{
    color: white;
    padding: 10px 22px;
  

    font-size: 13.5px;
    font-weight: 700;
    border-radius: var(--radio-full);

    /* Afecta a su contenido y a que margenes puede tener */
    display: inline-flex;
    margin-top: 10px;
    transition: var(--transicion-suave);    
}

main .tarjeta-principal .arriba .precio .btn-pedir-ahora svg{
    transition: var(--transicion-suave);
}

main .tarjeta-principal .arriba .precio .btn-pedir-ahora:hover{
    background: var(--vidrio-oscuro-hover);
    transform: translateX(4px) scale(1.03);
    box-shadow: 0 14px 28px rgba(0,0,0,0.32);
}
main .tarjeta-principal .arriba .precio .btn-pedir-ahora:active{
   transform: scale(0.96);
}
main .tarjeta-principal .arriba .precio .btn-pedir-ahora:hover svg{
   transform: translateX(8px);
}

main .tarjeta-principal .abajo{
    padding: 6px 10px;
    border-radius: var(--radio-full);

    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: var(--transicion-suave);
    z-index: 2;
}

main .tarjeta-principal .abajo:hover{
    box-shadow: 0 16px 32px rgba(0,0,0,0.1), var(--sombra-interior);
}

main .tarjeta-principal .abajo .flecha{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    transition: var(--transicion-suave);
}

main .tarjeta-principal .abajo .flecha{
    transition: transform 0.25s ease;
}
main .tarjeta-principal .abajo .flecha:hover{
    background-color: var(--vidrio-oscuro-hover);
    transform: scale(1.12);
    box-shadow: 0 6 12 rgba(0, 0, 0, 0.12);
}
main .tarjeta-principal .abajo .flecha.prev:hover{
    transform: translateX(-2px);
}
main .tarjeta-principal .abajo .flecha.sig:hover{
    transform: translateX(2px);
}
main .tarjeta-principal .abajo .paginacion{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:4px;
  
}
main .tarjeta-principal .abajo .paginacion .titulo{
    font-size: 12.5px;
    font-size: 700;
    color: var(--texto-principal);
}
main .tarjeta-principal .abajo .paginacion  .paginacion-puntos{
 display: flex;
 gap: 5px;
 align-items: center;
}
main .tarjeta-principal .abajo .paginacion  .paginacion-puntos span{
    width: 6px;
    height: 6px;
    background:rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    cursor: pointer;
}
main .tarjeta-principal .abajo .paginacion  .paginacion-puntos span:hover{
    background: rgba(0,0,0,0.6);
    transform: scale(1.3);
}
main .tarjeta-principal .abajo .paginacion  .paginacion-puntos span.activo{
    background: var(--texto-principal);
    width: 16px;
    border-radius: 4px;
}

/*-------------------------------------------------------------*/
    /*--------------- La Derecha  de la pagina-----------------*/
/*-------------------------------------------------------------*/

main .columna-derecha{
    /* en esta columna voy a tener como contenido 2 filas */
    display: grid;
    /* La primera solo toma su contenido(ofertas), la segunda todo lo que sobra (productos)*/
    grid-template-rows: auto 1fr;
    gap:14px;

    opacity: 0;
    transition: var(--transicion-suave);
    animation: aparecerDesdeDer 0.8s ease 0.4s forwards;
}
main .columna-derecha .ofertas{
    /*Tendremos 2 ofertas, una gde y otra mas chica*/
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap:14px;
}

main .columna-derecha .ofertas .dto{
  
    min-height:185px;
    /* Con estas propiedades armamos el rectángulo */
    background: linear-gradient(135deg, rgba(22,34,27,0.92) 0%, rgba(14,22,17,0.98) 100%);
    backdrop-filter: var(--vidrio-oscuro-blur);
    -webkit-backdrop-filter: var(--vidrio-oscuro-blur);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: var(--sombra-doble);
    border-radius: var(--radio-xl);

    padding: 22px;
    color: var(--texto-invertido);

    display: flex;
    justify-content: space-between;
    overflow: hidden;

    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease;

    /* para ubicar la foto */
    position: relative;

}
main .columna-derecha .ofertas .dto:hover{
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 20px 40px rgba(10,20,14);
    border-color: rgba(255,255,255,0.35);
}
main .columna-derecha .ofertas .dto .izquierda{
    max-width: 54%;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    z-index: 2;

    transition: transform 0.3s ease;
}
main .columna-derecha .ofertas .dto:hover .izquierda{
    transform: translateY(-2px);
}

main .columna-derecha .ofertas .dto .izquierda h3{
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.05px;
    color: white;
}
main .columna-derecha .ofertas .dto .izquierda p{
    font-size: 13px;
    color: #c4d4c8;
    margin-top: 6px;
    line-height: 1.35;
    font-weight: 600;
}
main .columna-derecha .ofertas .dto .izquierda .etiqueta-dto{
    color:var(--texto-principal);
    padding: 7px 15px;
    border-radius: var(--radio-full);
    font-size: 12px;
    font-weight: 800;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-top: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.16), var(--sombra-interior);
    transition: var(--transicion-suave);
}
main .columna-derecha .ofertas .dto:hover .izquierda .etiqueta-dto{
    transform: scale(1.05);
    background-color: white;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

main .columna-derecha .ofertas .dto .derecha {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    height: 90%;
    transition: transform 0.45s cubic-bezier(0.34, 1.56,0.64, 1);
}
main .columna-derecha .ofertas .dto .derecha img{
    width: 100%;
    height: 100%;
    object-fit: contain;

    /* sombra para fotos con fondo transparente */
    filter: drop-shadow(0 14px 20px rgba(0,0,0,0.45));
}

main .columna-derecha .ofertas .dto:hover .derecha {
    transform: translateY(-50%) scale(1.08) rotate(2deg);
}

main .columna-derecha .ofertas .personal{
  /*provisorio*/
    min-height: 200px;

     /* Con estas propiedades armamos el rectángulo */
    background: var(--vidrio-claro);
    backdrop-filter: var(--vidrio-claro-blur);
    -webkit-backdrop-filter: var(--vidrio-claro-blur);
    border: 1px solid var(--vidrio-claro-borde);
    box-shadow: var(--sombra-doble);
    border-radius: var(--radio-xl);

    padding: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transicion-suave);

}
main .columna-derecha .ofertas .personal:hover{
    background-color: var(--vidrio-claro-hover);
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1), var(--sombra-interior);
    border-color: white;
}



main .columna-derecha .ofertas .personal .imagen{
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

main .columna-derecha .ofertas .personal:hover .imagen{
    transform: scale(1.08) translateY(-2px);
}

main .columna-derecha .ofertas .personal img{
    width: 100%;
    max-height: 150px;
    object-fit: contain;
    filter:drop-shadow(0 14px 20px rgba(0,0,0,0.45));
}

main .columna-derecha .ofertas .personal h3{
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--texto-principal);
    letter-spacing: -0.03px;
    transition: transform 0.3s ease;
}
main .columna-derecha .ofertas .personal:hover h3{
    transform: translateY(-1px);
}

main .columna-derecha .ofertas .personal .personal-pie{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1px;
 }
 main .columna-derecha .ofertas .personal .personal-pie span{
    font-size: 13.5;
    font-weight: 800;
    color: var(--texto-principal);
    transition: transform 0.25s ease;
 }
  main .columna-derecha .ofertas .personal:hover .personal-pie span{
    transform: translateX(2px);
  }
main .columna-derecha .ofertas .personal .personal-pie button{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: var(--transicion-suave);
}
main .columna-derecha .ofertas .personal .personal-pie button  svg{
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}


main .columna-derecha .ofertas .personal:hover .personal-pie button {
   transform: scale(1.14);
   background: var(--vidrio-oscuro-hover);
   box-shadow: 0 8px 14px rgba(0,0,0,0.25);

}
main .columna-derecha .ofertas .personal:hover .personal-pie button  svg{
   transform: translateX(2px);
}

main .columna-derecha .ofertas .personal:hover .personal-pie button:active {
    transform: scale(0.92);
}



/*-------------   Productos --------------------------------*/

main .columna-derecha .productos{
    /* entre el titulo, la grilla y la paginacion */
    display: flex;
    flex-direction: column;
    gap:10px;
}

main .columna-derecha .productos .titulo{
    /* entre el h3 y el contador de productos */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
}
main .columna-derecha .productos .titulo span{
    font-size: 13px;
    font-weight: 600;
}

main .columna-derecha .productos .grilla-productos{
    display: flex;
    flex-wrap: wrap;
    gap:12px;
    justify-content: center;
  


}

.grilla-productos .tarjeta-producto{
    flex:1 1 225px;
    max-width: 500px;

    min-height: 180px;
    box-shadow: var(--sombra);
    border-radius: var(--radio-xl);

    padding: 14px 14px 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    box-shadow: var(--sombra);
    overflow: hidden;
    transition: var(--transicion-suave);
}


.grilla-productos .tarjeta-producto:hover{
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 22px 40px rgba(0,0,0,0.16);
}
.grilla-productos .tarjeta-producto .parte-superior{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.grilla-productos .tarjeta-producto .parte-superior .superior-derecha{
    display: flex;
    align-items: center;
    justify-content: end;
    gap:6px;
}
/* rating */
.grilla-productos .tarjeta-producto .parte-superior .superior-derecha span.capsula{
    background: white;
    padding: 3px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
}
.grilla-productos .tarjeta-producto:hover .parte-superior .superior-derecha span.capsula{
    transform: scale(1.03) ;
    
}
.grilla-productos .tarjeta-producto .parte-superior .superior-derecha button.circulo{
    width: 30px;
    height: 30px;
    padding-top: 4px;
    background: white;
}
/* corazon */
.grilla-productos .tarjeta-producto .parte-superior .superior-derecha button.circulo svg{
    width: 18px;
    height: 18px;
}
.grilla-productos .tarjeta-producto:hover .parte-superior .superior-derecha button.circulo svg{
    animation: latido 0.5s ease-in-out infinite;
}
.grilla-productos .tarjeta-producto .parte-superior .titulo{
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.2px;
    transition: var(--transicion-suave);
}
.grilla-productos .tarjeta-producto:hover .parte-superior .titulo{
    transform: rotate(-5deg) scale(1.05);
}
.grilla-productos .tarjeta-producto .imagen{
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.grilla-productos .tarjeta-producto:hover .imagen{
    transform: scale(1.1) translateY(-3px);
}
.grilla-productos .tarjeta-producto .imagen img{
    max-height: 200px;
    width: 100%;
    object-fit: contain;
    padding: 4px 0;
    filter: drop-shadow(0 10px 14px rgba(0,0,0,0.18));
    transition:  filter 0.3s ease;

}
.grilla-productos .tarjeta-producto:hover .imagen img{
    filter: drop-shadow(0 14px 20px rgba(0,0,0,0.18));
}

.grilla-productos .tarjeta-producto.terracota{
    background: linear-gradient(135deg, rgba(207, 97, 60, 0.94) 0%, rgba(175,74,40,0.98) 100%);
    backdrop-filter: var(--vidrio-claro-blur);
    -webkit-backdrop-filter: var(--vidrio-claro-blur);
    border:  1px solid rgba(255,255,255,0.65);
  
}
.grilla-productos .tarjeta-producto.light{
    background: var(--vidrio-claro);
    backdrop-filter: var(--vidrio-claro-blur);
    -webkit-backdrop-filter: var(--vidrio-claro-blur);
    border:  1px solid var(--vidrio-claro-borde);
    color: var(--texto-principal);
}
.grilla-productos .tarjeta-producto.charcoal{
    background: linear-gradient(135deg, rgba(28, 35, 39, 0.92) 0%, rgba(18,23,26,0.98) 100%);
    backdrop-filter: var(--vidrio-claro-blur);
    -webkit-backdrop-filter: var(--vidrio-claro-blur);
    border:  1px solid rgba(255,255,255,0.22);
    color: var(--texto-invertido);
}
.grilla-productos .tarjeta-producto .parte-inferior button{
    display: flex;
    margin-left: auto;
    margin-top: 10px;
    cursor: pointer;
    transition: var(--transicion-suave);
}

.grilla-productos .tarjeta-producto .parte-inferior button svg{
    transition: var(--transicion-suave);
}
.grilla-productos .tarjeta-producto .parte-inferior button:hover svg{

    transform: translateX(8px);
}




/* ===========  parte paginacion de productos===================== */

main .columna-derecha .productos .paginacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap:8px;
    margin: 10px;
}

.paginacion button{

    padding: 6px 14px;
    border-radius: var(--radio-full);
    font-size: 13px;
    font-weight: 700;

    background: var(--vidrio-muy-claro);
    backdrop-filter: var(--vidrio-claro-blur);
    -webkit-backdrop-filter: var(--vidrio-claro-blur);
    border: 1px solid var(--vidrio-claro-borde);
    box-shadow: var(--sombra);

    color:var(--texto-principal);
    transition: var(--transicion-suave);
}
.paginacion button:hover:not(:disabled){
    background: white;
    transform: translateY(-2px);

}
.paginacion button.activo{
    background: var(--vidrio-oscuro);
    color: white;
    border-color: var(--vidrio-oscuro-hover);
}
.paginacion button.activo:hover{
    background: var(--vidrio-oscuro);
    color: white;
    border-color: var(--vidrio-oscuro-hover);
}
.paginacion button:disabled{
    opacity: 0.4;
    cursor: not-allowed;
}



/*===========================================================================*/
  /*=========================== Footer ====================================*/
/*===========================================================================*/

footer{


    padding: 14px 26px;

    background: var(--vidrio-claro);
    backdrop-filter: var(--vidrio-claro-blur);
    -webkit-backdrop-filter: var(--vidrio-claro-blur);
    border-radius: var(--radio-xl);
    border: 1px solid var(--vidrio-claro-borde);
    box-shadow: var(--sombra-doble);

    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap:16px;
    transition: var(--transicion-suave);

    opacity: 0;
    animation: aparecerDesdeAbajo 0.3s ease 0.5s forwards;
}
footer:hover{
    box-shadow: 0 16px 36px rgba(12,16,24,0.09), var(--sombra-interior);
}
footer .footer-item{
    cursor: default;
    display: flex;
    align-items: center;
    gap:14px;

    padding: 4px;
    border-radius: var(--radio-md);

    transition: var(--transicion-suave);
}

footer .footer-item:hover{
    transform: translateY(-4px);
}
footer .footer-item span{
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid white;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transicion-suave);
}
footer .footer-item:hover span{
    transform: scale(1.12) rotate(-4deg);
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
    background-color: var(--texto-principal);
    --color-icono:var(--texto-invertido);
}

footer .footer-item h4{
    font-size: 13.5px;
    font-weight: 800;
    color: var(--texto-principal);
    line-height: 1.2;
    transition: color 0.25s ease;
}
footer .footer-item p{
    font-size: 12.5px;
    color: var(--texto-secundario);
    font-weight: 600;
    line-height: 1.2;
    transition: color 0.25s ease;
}
footer .footer-item:hover h4{
    color: black;
}
footer .footer-item:hover p{
    color:var(--texto-principal);
   
}

/*===========================================================================*/
  /*=========================== Modal vista individual de productos==========*/
/*===========================================================================*/
/* En el mundo del desarrollo web y el diseño, un overlay (capa de superposición) es un elemento visual que se coloca por encima de otros elementos de la página.
Su objetivo principal es llamar la atención del usuario o aislar un contenido específico, oscureciendo o aplicando un efecto borroso al fondo. */
/*Lo usamos tanto para el producto individual como para abrir el detalle del carrito*/
.modal-overlay{
    position: fixed;
    inset: 0;
    background: rgba(12,16,21,0.45);
    backdrop-filter: blur(8px);
    /* asegura que este efecto funcione correctamente en navegadores específicos (principalmente Safari de Apple). */
    -webkit-backdrop-filterblur:(8px);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.modal-overlay.activo{
    opacity: 1;
    pointer-events: auto;
}
.producto-modal{
    padding: 28px;

    position: fixed;
    top:50%;
    left:50%;
    transform: translate(-50%, -45%) scale(0.95);

    width: 90%;
    max-width: 800px;
    max-height: 70vh;
    overflow-y: auto;

    box-shadow: 0 24px 48px rgba(0,0,0,0.2), var(--sombra-interior);
    border-radius: var(--radio-xl);
    z-index:1001;
    
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) opacity 0.3s ease;


}
.producto-modal.abierto{
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.producto-modal .cerrar-modal-btn {
    position: absolute;
    top:18px;
    right: 18px;

    width: 36px;
    height: 36px;

    border-radius: 50%;
    background-color: var(--vidrio-claro);
    border: 1px solid var(--vidrio-claro-borde);
    color: var(--texto-principal);

    font-size: 16px;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transicion-suave);
}
.producto-modal .cerrar-modal-btn:hover {
    background: #fff ;
    transform: scale(1.1);
}

.producto-modal .modal-producto-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
}

.producto-modal .modal-producto-imagen {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.4);
    border-radius: var(--radio-lg);
    padding: 20px;
}

.producto-modal .modal-producto-imagen img {
    max-width: 100%;
    max-height: 240px;
    object-fit: contain;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.18));
}

.modal-producto-detalle {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.producto-modal .modal-etiqueta {
    display: flex;
    gap: 8px;
    align-items: center;
}

.producto-modal .modal-categoria {
    background: var(--vidrio-oscuro);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radio-full);
    text-transform: uppercase;
}

.producto-modal .modal-producto-detalle {
    font-size: 24px;
    font-weight: 800;
    color: var(--texto-principal);
    line-height: 1.2;
}
.producto-modal .modal-producto-detalle h2 {
    text-transform: capitalize;
    font-size: 1.5rem;
}

.producto-modal .modal-descripcion {
    font-size: 13.5px;
    color: var(--texto-secundario);
    line-height: 1.5;
}

.producto-modal .modal-precio {
    font-size: 26px;
    font-weight: 800;
    color: var(--texto-principal);
    margin-top: 6px;
}
.producto-modal .btn-comprar{
    width: fit-content;
    align-self: flex-end;
}


/* ============================================================ */
/* ESTILOS DEL CARRITO (SIDE DRAWER) Y PAGINACIÓN               */
/* ============================================================ */


.carrito-lateral {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 380px;
    height: 100vh;
    background: var(--fondo-general);
    backdrop-filter: var(--vidrio-blur);
    -webkit-backdrop-filter: var(--vidrio-blur);
    border-left: 1px solid var(--vidrio-claro-borde);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
    z-index: 1060;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.carrito-lateral.abierto {
    transform: translateX(0);
}

.carrito-lateral  .carrito-encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom:3px solid var(--vidrio-claro-borde);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}

.carrito-lateral  .carrito-items {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.carrito-lateral  .carrito-item-tarjeta {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.6);
    padding: 10px 14px;
    border-radius: var(--radio-md);
    border: 1px solid var(--vidrio-oscuro-borde);
}

.carrito-lateral  .carrito-item-tarjeta img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.carrito-lateral  .carrito-item-info {
    flex: 1;
}
.carrito-lateral  .carrito-encabezado h3{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap:10px;
}
.carrito-lateral  .carrito-item-titulo {
    font-size: 13.5px;
    font-weight: 700;
}

.carrito-lateral  .carrito-item-precio {
    font-size: 13px;
    font-weight: 800;
    color: var(--texto-principal);
}

.carrito-lateral  .carrito-cant-control {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.carrito-lateral  .cant-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--texto-principal);
    color: #fff;
    cursor: pointer;
    font-weight: 800;
}
.carrito-lateral .cant-val{
    font-size: 13px;
    font-weight: 700;
}
.carrito-lateral .eliminar-carrito-item {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
}

.carrito-lateral .carrito-pie {
    padding: 20px;
    background: rgba(255, 255, 255, 0.6);
    border-top: 1px solid var(--vidrio-claro-borde);
    display: flex;
    flex-direction: column;
    gap: 14px;
    
}

.carrito-lateral .carrito-subtotal {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 800;
}

.carrito-lateral  .carrito-btn-pedido {
    width: 100%;
    background: var(--vidrio-oscuro);
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: var(--radio-full);
    font-weight: 700;
    cursor: pointer;
    text-shadow: none;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.carrito-lateral  .cerrar-carrito-btn {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
}
.carrito-lateral .carrito-vacio{
    text-align: center;
    color: var(--texto-atenuado);
    margin: 0 auto;
    font-weight: 600;
    margin-top: 3rem;
}

@media (min-width:2200px) {
    body{
        max-width: 2200px;
        margin: 0 auto;
     
    }
}
@media (max-width:1200px) {
      .solo-escritorio{
        display: none!important;
    }
    header{
      
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
          "logo acciones"
          "busqueda busqueda";
         
    }
    header .acciones{
        display: flex;
        justify-content: end;
      
    }
    header a#logo{
        grid-area: logo;
        font-size: 20px;
        margin-right: auto;
    }
    header a.telefono{
        padding: 4px 8px;
        font-size: 13px;
    }
    header .barra-busqueda{
        grid-area: busqueda;
    }
    header .barra-busqueda{
    flex: 1;
  
    padding: 2px 6px 2px 18px;
    }
    header .acciones{
        grid-area: acciones;
    }
    header .acciones .canasta, header .acciones .avatar{
        width: 38px;
        height: 38px;
    }
    main{

    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "derecha"
    "principal" ;
    
}
    main .tarjeta-principal{
        grid-area: principal;
    }
     
    main .columna-derecha{
         grid-area: derecha;
         display: grid;
         grid-template-columns: 1fr ;
         grid-template-areas: 
         "catalogo"
         "ofertas";
    }
        main .columna-derecha .ofertas{
        grid-area: ofertas;

        display: grid;
        grid-template-columns: 1fr 1fr;
       
    }
    
   
     main .columna-derecha .productos .grilla-productos{
     
        grid-area: catalogo;
      

    }
     footer{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap:16px;
    }
      footer .footer-item{
        background: white;
        border-radius: var(--radio-md);
        box-shadow: var(--sombra-doble);
      }
  

}

@media (max-width:578px) {
    .producto-modal .modal-producto-layout {
        display: grid;
        grid-template-columns: 1fr;
    }
      main .columna-derecha .ofertas{
        grid-area: ofertas;

        display: grid;
        grid-template-columns: 1fr;
       
    }
    
   
     main .columna-derecha .productos .grilla-productos{
     
        display: flex;
        flex-direction: column;
        grid-area: catalogo;

    }
  

    footer{
        display: grid;
        grid-template-columns: 1fr;
        gap:16px;
    }
      
}

/*  Al final */

@media(prefers-reduced-motion: reduce){
    *, *::before,*::after{
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-duration: 0.01ms !important;
    }
}