/* FONT QUICKSAND */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

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

:root {
    /**************/
    /* BACKGROUND */
    /**************/
    --color-background: #FEFDF4;
    --color-background-gradient: linear-gradient(135deg, #FEFDF4, #FBFBEE);

    /***************/
    /* NAV BUTTONS */
    /***************/
    --color-nav-button: #FEFDF4;
    --color-nav-button-shadow: #000000;
    --color-nav-button-hover: #F85C5C;
    --color-nav-button-active: #F0595A;

    /**************/
    /* CART COUNT */
    /**************/
    --color-cart-count-bg: #F0595A;
    --color-cart-count-txt: #FEFDF4;

    /*****************************/
    /* FULLSCREEN NAV BACKGROUND */
    /*****************************/
    --color-fullscreen-bg: #000002;
    --color-fullscreen-bg-gradient: linear-gradient(180deg, #000002 0%, #000100 100%);

    --color-fullscreen-link: #FBFBEE;
    --color-fullscreen-link-shadow: rgba(248, 92, 92, 0.3);
    --color-fullscreen-link-hover: #F85C5C;
    --color-fullscreen-link-active: #F0595A;

    /****************/
    /* HERO CONTENT */
    /****************/
    --color-hero-content-bg: rgba(0, 0, 0, 0.5);
    --color-hero-content-border: #000000;

    --color-hero-content-title: #FEFDF4;
    --color-hero-content-subtitle: #FBFBEE;
    --color-hero-content-highlight: #F85C5C;

    --color-hero-content-whatsapp-bg: #25D366;
    --color-hero-content-whatsapp-text: #ffffff;
    --color-hero-content-whatsapp-border: #25D366;
    --color-hero-content-whatsapp-bg-hover: #1ebe57;

    /****************/
    /* SECTION TEXT */
    /****************/
    --section-heading-color: #000100;
    --section-heading-shadow: rgba(0, 0, 0, 0.1);

    --section-subheading-color: #444444;
    --section-subheading-shadow: none;

    --section-description-color: #555555;
    --section-description-shadow: none;

    /*********/
    /* CARDS */
    /*********/
    --color-card-bg: #FBFBEE;
    --color-card-bg-gradient: linear-gradient(135deg, #FBFBEE, #FDFDF0);
    --color-card-border: #B9B9B1;
    --color-card-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);

    --color-card-title: #000100;
    --color-card-subtitle: #444444;
    --color-card-text-shadow: rgba(0,0,0,0.05);

    --color-card-highlight: #D4A017;
    --color-card-highlight-shadow: rgba(212, 160, 23, 0.3);

    /**************/
    /* CARDS BACK */
    /**************/
    --color-card-back-bg: #000002;
    --color-card-back-bg-gradient: linear-gradient(135deg, #000002, #000100);
    --color-card-back-border: #B9B9B1;
    --color-card-back-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);

    --color-card-back-title: #FEFDF4;
    --color-card-back-subtitle: #FBFBEE;
    --color-card-back-text-shadow: rgba(255, 255, 255, 0.1);
    --color-card-back-highlight: #F85C5C;

    /*********************/
    /* PRINCIPAL BUTTONS */
    /*********************/
    --btn-primary-bg: #F85C5C;
    --btn-primary-bg-gradient: linear-gradient(135deg, #F85C5C, #F0595A);
    --btn-primary-border: #F0595A;
    --btn-primary-shadow: 0 6px 15px rgba(248, 92, 92, 0.4);

    --btn-primary-text: #FEFDF4;
    --btn-primary-text-shadow: rgba(0,0,0,0.2);

    /*********************/
    /* SECONDARY BUTTONS */
    /*********************/
    --btn-secondary-bg: #FDFDF0;
    --btn-secondary-bg-gradient: linear-gradient(135deg, #FDFDF0, #FBFBEE);
    
    --btn-secondary-text: #000100;
    --btn-secondary-border: #B9B9B1;
    --btn-secondary-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --btn-secondary-hover-bg: #EC7366;
    --btn-secondary-hover-text: #FEFDF4;
    --btn-secondary-hover-shadow: 0 6px 15px rgba(236, 115, 102, 0.3);

    /*************/
    /* PAGINATOR */
    /*************/
    --paginator-bg: transparent;
    --paginator-text: #B9B9B1;
    --paginator-border: rgba(0, 0, 0, 0.05);

    --paginator-active-bg: var(--rojo-vivo, #F85C5C);
    --paginator-active-text: var(--btn-primary-text, #FEFDF4);
    --paginator-active-shadow: 0 4px 8px rgba(248, 92, 92, 0.3);

    --paginator-hover-bg: rgba(248, 92, 92, 0.1);
    --paginator-hover-text: var(--rojo-vivo, #F85C5C);

    --paginator-disabled-text: #B9B9B1;
    --paginator-disabled-bg: rgba(0, 0, 0, 0.02);

    /***********/
    /* DIVIDER */
    /***********/
    --divider-gradient: linear-gradient(
        to right,
        transparent,
        rgba(248, 92, 92, 0.15),
        rgba(240, 89, 90, 0.6),
        rgba(248, 92, 92, 0.15),
        transparent
    );

    --divider-shadow: 0 0 3px rgba(240, 89, 90, 0.25);

    /**********/
    /* FOOTER */
    /**********/
    --footer-bg: #000002;
    --footer-text: #B9B9B1;
    --footer-link: #FBFBEE;
    --footer-link-hover: #F85C5C;
    --footer-border-top: rgba(255, 255, 255, 0.05);

    /* SOCIAL ICONS */
    --social-icon-color: #FBFBEE;
    --social-icon-hover: #F85C5C;
    --social-icon-bg: transparent;
    --social-icon-shadow: 0 2px 6px rgba(248, 92, 92, 0.3);
}

html {
    scroll-behavior: smooth;
}

/* BODY STYLES */
body {
    font-family: 'Quicksand', Arial, Helvetica, sans-serif;
    
    background: var(--color-background-gradient, var(--color-background));

    overflow-x: hidden;
}

/* GLOBAL STYLES FOR ANY ELEMENTS */
ul {
    list-style-type: none;
}

a {
    text-decoration: none;
}

button {
    font-family: 'Quicksand', Arial, Helvetica, sans-serif;
    cursor: pointer;
}

/* CONTAINER */
.container {
    max-width: 1440px;
    margin: 0 auto;
}

/* SECTIONS STYLES */
.section {
    padding: 3.125rem 1.25rem; /*50 y 20*/
}

/* HEADING SECTIONS */
.header-section {
    margin-bottom: 1.875rem; /*30px*/
}

.title-section {
    font-size: 1.3125rem; /*21*/
    font-weight: 600;

    color: var(--section-heading-color);
    text-shadow: 0px 0px 3px var(--section-heading-shadow);

    text-transform: uppercase;
}

/***********/
/* DIVIDER */
/***********/
.divider-container {
	max-width: 1440px;
    margin: 0 auto;
	padding: 0 1.25rem;
}

.divider {
	width: 100%;
	height: 1px;

    border: none;
    border-radius: 5px;
    
	background: var(--divider-gradient);
    box-shadow: var(--divider-shadow);
}

@media screen and (min-width: 425px) {
    /* SECTIONS STYLES */
    .section {
        padding: 3.125rem 1.875rem; /*50 y 30*/
    }

    .title-section {
        font-size: 1.5rem; /*24*/
    }

    /* DIVIDER */
    .divider-container {
        padding: 0 1.875rem; /*30*/
    }
}

@media screen and (min-width: 600px) {
    /* SECTIONS STYLES */
    .section {
        padding: 3.125rem 2.5rem; /*50 y 40*/
    }

    .title-section {
        font-size: 1.875rem; /*30*/
    }
}

@media screen and (min-width: 768px) {
    /* SECTIONS STYLES */
    .section {
        padding: 3.125rem 3.125rem; /*50 y 50*/
    }
}

@media screen and (min-width: 992px) {
    /* SECTIONS STYLES */
    .section {
        padding: 3.125rem 3.75rem; /*50 y 60*/
    }
}