/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/*---INDICE---
0-Variables generales
1-Titulos
2-Textos
3-Botones
4-Header
5-Footer
6-Distancias
7-Secciones
8-Responsive
*/

/* 0-VARIABLES GENERALES */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root{
    --color-oscuro:#191919;
    --color-claro:#FFF9ED;
    --fuente-texto: "DM Sans", serif;
	--fuente-titulos: "Bebas Neue", serif;
}

body{
	background-color: var(--color-claro)!important;
	font-family: var(--fuente-texto)!important;
}
/* 1-TITULOS */
.cs-h1-bebas h1{
    font-family: var(--fuente-titulos) !important;
    font-size: 80px !important;
    font-weight: 400 !important;
    color: var(--color-oscuro) !important;
}
.cs-h1-claro h1{
    font-family: var(--fuente-titulos) !important;
    font-size: 80px !important;
    font-weight: 400 !important;
    color: var(--color-claro) !important;
}
.cs-h1-slider h1{
    font-family: var(--fuente-titulos) !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    color: var(--color-claro) !important;
}
h2 {
    font-family: var(--fuente-titulos) !important;
    font-size: 42px !important;
    font-weight: 400 !important;
    color: var(--color-oscuro) !important;
}
.cs-h2-slider h2{
    font-family: var(--fuente-titulos) !important;
    font-size: 100px !important;
    font-weight: 400 !important;
    line-height: 83px !important;
    color: var(--color-claro) !important;
}

.cs-h2 h2{
    font-family: var(--fuente-titulos) !important;
    font-size: 80px !important;
    font-weight: 400 !important;
    color: var(--color-oscuro) !important;
}
.cs-h2-claro h2{
    font-family: var(--fuente-titulos) !important;
    font-size: 80px !important;
    font-weight: 400 !important;
    color: var(--color-claro) !important;
}

.cs-titulo-producto-tarjeta h3{
    font-family: var(--fuente-texto) !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 29px !important;
    color: var(--color-oscuro) !important;
    height: 60px !important;
}
.cs-h3-claro h3{
    font-family: var(--fuente-titulos) !important;
    font-size: 42px !important;
    font-weight: 400 !important;
    color: var(--color-claro) !important;
}

/* 2-TEXTOS */
.cs-texto-slider p{
    font-family: var(--fuente-texto) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 23px !important;
    color: var(--color-claro) !important;
}
.cs-texto p{
    font-family: var(--fuente-texto) !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 26px !important;
    color: var(--color-oscuro) !important;
}
.cs-texto-claro p{
    font-family: var(--fuente-texto) !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 26px !important;
    color: var(--color-claro) !important;
}

/* 3-BOTONES */
.cs-boton-claro .elementor-button {
    background-color: var(--color-claro) !important;
    font-family: var(--fuente-titulos) !important;
    font-size: 30px !important;
    width: 205px !important;
    padding: 8px 24px 5px 24px !important;
    border-radius: 30px !important;
    color: var(--color-oscuro) !important;
    text-align: center;
    transition: all .3s;
}
.cs-boton-claro .elementor-button:hover {
    background-color: var(--color-oscuro) !important;
    font-family: var(--fuente-titulos) !important;
    font-size: 30px !important;
    width: 205px !important;
    padding: 8px 24px 5px 24px !important;
    border-radius: 30px !important;
    color: var(--color-claro) !important;
    text-align: center;
    transition: all .3s;
}
.cs-formulario button {
    background-color: var(--color-oscuro) !important;
    font-family: var(--fuente-titulos) !important;
    font-size: 30px !important;
    width: 205px !important;
    padding: 8px 24px 5px 24px !important;
    border-radius: 30px !important;
    color: var(--color-claro) !important;
    text-align: center !important;
    transition: all .3s;
}
.cs-formulario button:hover {
    background-color: var(--color-claro) !important;
    font-family: var(--fuente-titulos) !important;
    font-size: 30px !important;
    width: 205px !important;
    padding: 8px 24px 5px 24px !important;
    border-radius: 30px !important;
    color: var(--color-oscuro) !important;
    text-align: center !important;
    transition: all .3s;
}
.cs-boton-oscuro .elementor-button {
    background-color: var(--color-oscuro) !important;
    font-family: var(--fuente-titulos) !important;
    font-size: 30px !important;
    width: 205px !important;
    padding: 8px 24px 5px 24px !important;
    border-radius: 30px !important;
    color: var(--color-claro) !important;
    text-align: center !important;
    transition: all .3s;
}
.cs-boton-oscuro .elementor-button:hover {
    background-color: var(--color-claro) !important;
    font-family: var(--fuente-titulos) !important;
    font-size: 30px !important;
    width: 205px !important;
    padding: 8px 24px 5px 24px !important;
    border-radius: 30px !important;
    color: var(--color-oscuro) !important;
    text-align: center !important;
    transition: all .3s;
}
/* 4-HEADER */
.cs-menu .elementor-nav-menu a{
    font-family: var(--fuente-titulos) !important;
    font-size: 22px !important;
    color: var(--color-claro) !important;
}
.cs-menu-full .elementor-nav-menu a{
    font-family: var(--fuente-titulos) !important;
    font-size: 68px !important;
    color: var(--color-claro) !important;
}
.cs-header {
    position: fixed !important; 
    width: 100%;
    height: 100px !important;
    /* Añade una transición suave de altura y fondo */
    /* transition: all 0.3s ease; */
}
.cs-logo{
    position: absolute !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

  /* Cuando el header tenga la clase "shrink" */
  .cs-header.shrink {
    height: 50px !important;
    background-color: var(--color-oscuro) !important; /* Ejemplo de fondo semitransparente */
  }
  
  /*
   * Si quieres que el logo desaparezca o cambie de tamaño cuando
   * el header se reduzca, puedes ajustar sus estilos dentro de
   * la clase .shrink.
   */
  .cs-header.shrink .cs-logo {
    /* Por ejemplo, ocultarlo */
    display: none!important; 
    /* O hacerlo más pequeño:
    transform: translateX(-50%) scale(0.5);
    top: 10px; 
    */
  }
  
  .cs-header.shrink .cs-logo-sin {
    /* Por ejemplo, ocultarlo */
    display: none!important; 
  
    /* O hacerlo más pequeño:
    transform: translateX(-50%) scale(0.5);
    top: 10px; 
    */
  }
  .cs-menu .current-menu-item a{
    text-decoration: line-through !important;
  }

/* 5-FOOTER */
.cs-texto-footer p{
    font-family: var(--fuente-textos) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--color-claro) !important;
}
.cs-menu-footer .elementor-nav-menu a{
    font-family: var(--fuente-titulos) !important;
    font-size: 42px !important;
    color: var(--color-claro) !important;
}


/* 6-DISTANCIAS */
.cs-padding{
    padding: 0 40px !important;
}
.cs-padding-total{
    padding: 40px !important;
}

/* 7-SECCIONES */
    /* Fondos */
    .cs-fondo-oscuro{
        background-color: var(--color-oscuro) !important;
    }
    /*Seccion categorias*/
    .cs-categorias{
        background-color: var(--color-claro) !important;
        border-radius: 8px !important;
        padding: 10px !important;
    }
    .cs-categorias img{
        height: 200px !important;
        object-fit: cover !important;
        border-radius: 2px !important;
        object-position: center center !important;
    }
    .cs-categorias h3{
        font-family: var(--fuente-titulos) !important;
        font-size: 50px !important;
        font-weight: 400 !important;
        color: var(--color-oscuro) !important;
    }
    .cs-categorias-flecha {
        opacity: 0 !important; /* Oculta el texto inicialmente */
        transition: opacity 0.3s ease !important; 
    }

    
    /* Mostrar flecha al hacer hover sobre todo el contenedor */
    .cs-categorias:hover .cs-categorias-flecha {
        opacity: 1 !important; /* Oculta la imagen */   
    }

    /* INICIO Tarjeta producto */
    .cs-img-producto img{
        height: auto !important;
        width: 100% !important;
        border-radius: 8px !important;
        object-fit: cover !important;
        object-position: center center !important;
        transition: opacity 0.3s ease; /* Transición suave para ocultar la imagen */
    }
    .cs-etiqueta p{
        background-color: var(--color-claro) !important;
        font-family: var(--fuente-textos) !important;
        text-transform: uppercase !important;
        font-size: 14px !important;
        padding: 7px 14px !important;
        border-radius: 30px !important;
        color: var(--color-oscuro) !important;
        text-align: center;
        transition: all .3s;
    }
    .cs-precio-producto-tarjeta p{
        font-family: var(--fuente-texto) !important;
        font-size: 22px !important;
        font-weight: 400 !important;
        line-height: 29px !important;
        color: var(--color-oscuro) !important;
    }

    .cs-card-producto {
        position: relative !important;
        border: 1px solid var(--color-claro) !important;
        border-radius: 8px !important;
    }
    
    .cs-card-producto:hover {
        border: 1px solid var(--color-oscuro) !important; /* Agrega el borde negro */
    }
    
    .cs-card-producto:hover .cs-img-producto img {
        opacity: 0 !important; /* Oculta la imagen */
    }
    .cs-card-producto:hover .cs-etiqueta {
        opacity: 0 !important; /* Oculta la imagen */
    }

    /* Posiciona y oculta inicialmente el texto */
    .cs-descripcion {
        position: absolute !important;
        top: 15px !important;
        left: 10px !important;
        right: 10px !important;
        opacity: 0 !important; /* Oculta el texto inicialmente */
        transition: opacity 0.3s ease !important; 
    }

    .cs-descripcion p{
        line-height: 34px !important;
        color: var(--color-oscuro) !important;
        font-size: 26px !important;
    }

    /* Muestra el texto al hacer hover en el contenedor */
    .cs-card-producto:hover .cs-descripcion {
        opacity: 1 !important;
    }
    /*Icono card*/
    .cs-icono-card .elementor-icon {
        background-color: transparent !important; /* Fondo transparente */
        transition: background-color 0.3s ease, fill 0.3s ease !important;
    }

    .cs-icono-card .elementor-icon svg {
        fill: var(--color-oscuro) !important; /* Color inicial del ícono */
        transition: fill 0.3s ease !important;
    }

    .cs-icono-card .elementor-icon {
        color: var(--color-oscuro) !important;
        border-color: var(--color-oscuro) !important;
    }

    /* Estado hover del contenedor que afecta al ícono */
    .cs-card-producto:hover .elementor-icon {
        background-color: var(--color-oscuro) !important; /* Fondo negro */
    }

    .cs-card-producto:hover .cs-icono-card .elementor-icon,
    .cs-card-producto:hover .cs-icono-card .elementor-icon svg {
        fill: var(--color-claro) !important; /* Color beige del ícono */
    }
    /* FIN Tarjeta producto */

    /*Marquee text*/
    .cs-marquee .qodef-qi-text-marquee .qodef-m-text-item {
        font-size: 50px !important;
        line-height: auto !important;
        font-family: var(--fuente-titulos) !important;
        color: var(--color-claro) !important;
    }

    /*Página Producto */
    .woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb {
        font-size: 14px !important;
        color: var(--color-oscuro) !important;
    }
    

    /*Metodo envio checkout*/
    tr.woocommerce-shipping-totals.shipping{
        display: flex !important;
        flex-direction: column !important;
    }
    #shipping_method li {
        justify-content: space-between !important;
        width: 425px !important;
    }
    .widget-woocommerce-checkout-page .woocommerce .shop_table tr {
        border: 0;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-top: 15px !important; 
    }
    ul#shipping_method>li {
        margin-bottom: 0px !important;
        padding: 0px !important;
    }
    .woocommerce ul#shipping_method li {
        margin: 0 !important;
        line-height: 0.1em !important;
    }
    /*Pagina de producto*/

    .woocommerce .price {
        font-family: var(--fuente-titulos) !important;
        font-size: 42px !important;
        font-weight: 400 !important;
        color: var(--color-oscuro) !important;
        margin-bottom: 0px !important;
    }
    .cs-texto-producto p{
        margin-bottom: 0px !important;
        font-family: var(--fuente-texto) !important;
        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 26px !important;
        color: var(--color-oscuro) !important;
    }
    .elementor-icon-list-text {
        font-family: var(--fuente-texto) !important;
        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 26px !important;
        color: var(--color-oscuro) !important;
    }
    .single_add_to_cart_button button {
        background-color: var(--color-oscuro) !important;
        font-family: var(--fuente-titulos) !important;
        font-size: 30px !important;
        color: var(--color-claro) !important;
        text-align: center !important;
        transition: all .3s;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        font-family: var(--fuente-titulos) !important;
        font-size: 20px !important;
        font-weight: 400 !important;
    }

/* 8 - RESPONSIVE */

/* 8.1 - MOBIL */

@media only screen and (max-width: 600px) {

    .cs-h1-slider h1{
        font-family: var(--fuente-titulos) !important;
        font-size: 22px !important;
        font-weight: 400 !important;
        color: var(--color-claro) !important;
    }
    .cs-padding{
        padding: 0 15px !important;
    }
    .cs-padding-total{
        padding: 15px !important;
    }
    .cs-padding-total-movil{
        padding: 15px !important;
    }
    .cs-texto p{
        font-family: var(--fuente-texto) !important;
        font-size: 18px !important;
        font-weight: 400 !important;
        line-height: 26px !important;
        color: var(--color-oscuro) !important;
    }
    .cs-categoria img{
        border-radius: 100% !important;
        height: 120px !important;
        width: 120px !important;
        object-fit: cover !important;
    }
    .cs-categoria-titulo h3{
        font-family: var(--fuente-texto) !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 29px !important;
        color: var(--color-oscuro) !important;
    }
    #shipping_method li {
        justify-content: space-between !important;
        width: 290px !important;
    }
    .cs-header {
        position: fixed !important; 
        width: 100%;
        height: 50px !important;
        /* Añade una transición suave de altura y fondo */
        /* transition: all 0.3s ease; */
    }
    .cs-h1-slider h1{
        font-size: 18px !important;
    }
    .cs-h2 h2{
        font-size: 68px !important;
    }
    .cs-h2-claro h2{
        font-size: 68px !important;
    }
    .cs-padding-arriba-movil {
        padding-top: 30px !important;
    }
    .cs-padding-abajo-movil {
        padding-bottom: 30px !important;
    }
    .cs-marquee .qodef-qi-text-marquee .qodef-m-text-item {
        font-size: 56px !important;
    }
    .cs-h1-claro h1{
        font-size: 68px !important;
    }
    .cs-padding-arriba-header {
        padding-top: 100px !important;
    }
    .cs-titulo-producto-tarjeta h3{
        height: auto !important;
    }
    .cs-h1-bebas h1{
        font-size: 68px !important;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs {
        padding: 0 0 0 5px !important;
    }
    .woocommerce div.product.elementor .woocommerce-tabs .panel {
        padding: 20px 0 0 0 !important;
    }
    .cs-descripcion-producto h2 {
        margin-bottom: 0px !important;
    }
    .cs-logo{
        top: 10px !important;
    }
    .cs-logo-sin{
        position: absolute !important;
        top: 10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

}

/* 8.2 - PANTALLAS GRANDES */
@media only screen and (min-width: 1441px) {
.cs-categorias img{
    height: 260px !important;
    object-fit: cover !important;
    border-radius: 2px !important;
    object-position: center center !important;
}
}