/* ==========================================================
   HEADER
   ========================================================== */

.kuali-header {
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .05);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 9999;
}

.kuali-header-container {
    max-width: 1400px;
    margin: auto;
    padding: 0 30px;

    display: grid;

    grid-template-columns:
        220px
        1fr
        80px;

    align-items: center;
}

.kuali-logo img {
    height: 75px;
    width: auto;
    display: block;
}


/* ==========================================================
   NAV
   ========================================================== */

.kuali-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.kuali-nav > a {
    color: #222;
    text-decoration: none;
    font-family: 'Lora', serif;
    font-size: 1.05rem;
    transition: color .3s ease;
}

.kuali-nav > a:hover {
    color: #C3592D;
}


/* ==========================================================
   LANGUAGE SELECTOR
   ========================================================== */

.kuali-language {
    position: relative;
}

.kuali-language-button {
    display: flex;
    align-items: center;
    gap: 6px;

    border: none;
    background: transparent;

    padding: 7px 8px;

    cursor: pointer;

    color: #222;

    font-family: 'Lora', serif;
    font-size: 1rem;
}

.kuali-language-button:hover {
    color: #C3592D;
}

.kuali-language-flag {
    font-size: 18px;
    line-height: 1;
}

.kuali-language-code {
    font-size: 14px;
}

.kuali-language-arrow {
    font-size: 12px;
    transition: transform .2s ease;
}

.kuali-language.is-open
.kuali-language-arrow {
    transform: rotate(180deg);
}


/* ==========================================================
   LANGUAGE MENU
   ========================================================== */

.kuali-language-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;

    min-width: 150px;

    background: #fff;

    border: 1px solid #ece8e2;
    border-radius: 10px;

    padding: 6px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .10);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-5px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;
}

.kuali-language.is-open
.kuali-language-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.kuali-language-option {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 10px 12px;

    border: none;
    border-radius: 7px;

    background: transparent;

    color: #222;

    font-family: 'Lora', serif;
    font-size: 14px;

    text-align: left;

    cursor: pointer;
}

.kuali-language-option:hover {
    background: #f7f3ee;
    color: #C3592D;
}


/* ==========================================================
   CART
   ========================================================== */

.kuali-cart {
    justify-self: end;
}

.kuali-cart a {
    display: flex;
    align-items: center;

    color: #222;

    text-decoration: none;
}

.kuali-cart a:hover {
    color: #C3592D;
}

.cart-count {
    margin-left: 6px;

    min-width: 24px;
    height: 24px;

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

    background: #C3592D;
    color: #fff;

    border-radius: 50%;

    padding: 0 6px;

    font-size: 12px;
    line-height: 1;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 768px) {

    .kuali-header {
        position: relative;
    }

  .kuali-header-container {
        position: relative;

        width: 100%;
        min-height: 82px;

        padding: 10px 18px;

        display: grid;

        grid-template-columns: 1fr auto auto;

        align-items: center;

        column-gap: 18px;

        box-sizing: border-box;
    }

    .kuali-logo {
    width: auto;

    display: flex;
    justify-content: flex-start;
    align-items: center;

    grid-column: 1;
}

.kuali-logo img {
    width: 68px;
    height: 68px;

    object-fit: contain;

    display: block;
}

  .kuali-cart {
    width: auto;

    display: flex;
    justify-content: flex-end;
    align-items: center;

    margin: 0;
    padding: 0;

    grid-column: 2;
}


}
/* ==========================================================
   EXPERIENCES - DROPDOWN
   ========================================================== */

.kuali-nav-dropdown {
    position: relative;
}


/* ==========================================================
   BOTÓN
   ========================================================== */

.kuali-nav-dropdown .kuali-nav-dropdown-button {
    display: flex;
    align-items: center;
    gap: 7px;

    padding: 0;
    margin: 0;

    border: 0;
    background: transparent;

    /* misma tipografía que los enlaces del header */
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    color: #111 !important;

    cursor: pointer;
}

.kuali-nav-dropdown .kuali-nav-dropdown-button span {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}


/* FLECHA */

.kuali-nav-dropdown-arrow {
    font-family: Arial, sans-serif !important;
    font-size: 11px !important;

    transition: transform 0.2s ease;
}


/* ==========================================================
   MENÚ
   ========================================================== */

.kuali-nav-dropdown-menu {
    position: absolute;

    top: calc(100% + 12px);
    left: 0;

    min-width: 210px;

    padding: 10px 0;

    background: #fff;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.12);

    border-radius: 4px;

    opacity: 0;
    visibility: hidden;

    transform: translateY(-6px);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;

    z-index: 9999;
}


/* OPCIONES */

.kuali-nav-dropdown-menu a {
    display: block;

    padding: 11px 20px;

    color: #111;

    text-decoration: none;

    white-space: nowrap;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.kuali-nav-dropdown-menu a:hover {
    color: #b43d0b;

    background-color: #f8f8f8;
}


/* ==========================================================
   MENÚ ABIERTO
   ========================================================== */

.kuali-nav-dropdown.is-open
.kuali-nav-dropdown-menu {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.kuali-nav-dropdown.is-open
.kuali-nav-dropdown-arrow {
    transform: rotate(180deg);
}


/* ==========================================================
   KUALI - LANGUAGE FLAG
   ========================================================== */

.kuali-language-flag {
    width: 18px;
    height: 13px;

    display: inline-block;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    flex-shrink: 0;
}

.kuali-language-flag.flag-en {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' fill='%23fff'/%3E%3Cg fill='%23b22234'%3E%3Crect y='0' width='24' height='2'/%3E%3Crect y='4' width='24' height='2'/%3E%3Crect y='8' width='24' height='2'/%3E%3Crect y='12' width='24' height='2'/%3E%3C/g%3E%3Crect width='10' height='8.6' fill='%233c3b6e'/%3E%3C/svg%3E");
}

.kuali-language-flag.flag-es {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='8' height='16' fill='%23006647'/%3E%3Crect x='8' width='8' height='16' fill='%23fff'/%3E%3Crect x='16' width='8' height='16' fill='%23ce1126'/%3E%3Ccircle cx='12' cy='8' r='2.1' fill='%238b5a2b'/%3E%3C/svg%3E");
}



/* ==========================================================
   KUALI MOBILE MENU
   ========================================================== */

/* Oculto en escritorio */

.kuali-mobile-menu-button {
    display: none;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 768px) {

    .kuali-header-container {
    position: relative;

    width: 100%;
    min-height: 82px;

    padding: 10px 18px;

    display: grid;

    grid-template-columns: 40px 1fr auto auto;

    align-items: center;

    column-gap: 16px;

    box-sizing: border-box;
}

    /* ======================================================
       HAMBURGUESA
       ====================================================== */

    .kuali-mobile-menu-button {
        grid-column: 3;

        justify-self: end;

        width: 32px;
        height: 32px;

        padding: 0;

        border: 0;
        background: transparent;

        display: flex;

        flex-direction: column;

        justify-content: center;
        align-items: flex-start;

        gap: 5px;

        cursor: pointer;

        z-index: 1100;
    }


    .kuali-mobile-menu-button span {
        display: block;

        width: 24px;
        height: 2px;

        background: #111;

        transition:
            transform 0.25s ease,
            opacity 0.25s ease;
    }


    /* X cuando está abierto */

    .kuali-mobile-menu-button.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .kuali-mobile-menu-button.active span:nth-child(2) {
        opacity: 0;
    }

    .kuali-mobile-menu-button.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }


    /* ======================================================
       LOGO
       ====================================================== */

   .kuali-logo {
    width: auto;

    display: flex;

    justify-content: flex-start;
    align-items: center;

    grid-column: 1;
}

.kuali-logo img {
    width: 68px;
    height: 68px;

    object-fit: contain;

    display: block;
}

    /* ======================================================
       CARRITO
       ====================================================== */

  .kuali-cart {
    width: auto;

    display: flex;

    justify-content: flex-end;
    align-items: center;

    margin: 0;
    padding: 0;

    grid-column: 3;
}

.kuali-cart svg {
    width: 28px;
    height: 28px;
}

.cart-count {
    min-width: 28px;
    height: 28px;

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

    border-radius: 50%;

    font-size: 13px;
}

.kuali-mobile-menu-button {
    grid-column: 3;

    justify-self: end;
}


    /* ======================================================
       MENÚ
       ====================================================== */

    .kuali-nav {
        position: absolute;

        top: 100%;
        left: 0;

        width: 100%;

        padding: 22px 20px 25px;

        background: #fff;

        display: flex;
        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

        box-sizing: border-box;

        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.08);

        opacity: 0;
        visibility: hidden;

        transform: translateY(-10px);

        transition:
            opacity 0.25s ease,
            transform 0.25s ease,
            visibility 0.25s ease;

        z-index: 1050;
    }


    /* MENÚ ABIERTO */

    .kuali-nav.mobile-menu-open {
        opacity: 1;
        visibility: visible;

        transform: translateY(0);
    }


    /* ======================================================
       ENLACES
       ====================================================== */

    .kuali-nav > a {
        width: 100%;

        margin: 0;
        padding: 4px 0;

        font-size: 18px;

        text-align: left;

        white-space: normal;
    }


    /* ======================================================
       EXPERIENCES
       ====================================================== */

    .kuali-nav-dropdown {
        width: 100%;

        margin: 0;
        padding: 0;
    }


    .kuali-nav-dropdown-button {
        width: 100%;

        justify-content: space-between;

        padding: 4px 0;

        font-size: 18px;
    }


  /* ======================================================
   SUBMENÚ EXPERIENCES - MOBILE
   ====================================================== */

.kuali-nav-dropdown {
    width: 100%;
    margin: 0;
    padding: 0;
}


.kuali-nav-dropdown-button {
    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    margin: 0;
    padding: 4px 0;

    font-size: 18px;

    background: transparent;
    border: none;

    color: #111;

    text-align: left;

    cursor: pointer;
}


/* MENÚ CERRADO */

.kuali-nav-dropdown-menu {
    position: static !important;

    width: 100% !important;

    margin: 8px 0 0 !important;

    padding: 0 0 0 20px !important;

    display: none !important;

    flex-direction: column;

    gap: 12px;

    background: transparent !important;

    box-shadow: none !important;

    visibility: hidden !important;

    opacity: 0 !important;
}


/* ======================================================
   MENÚ ABIERTO
   ====================================================== */

.kuali-nav-dropdown.open
.kuali-nav-dropdown-menu,

.kuali-nav-dropdown.is-open
.kuali-nav-dropdown-menu {
    display: flex !important;

    visibility: visible !important;

    opacity: 1 !important;
}


/* ======================================================
   ENLACES DEL SUBMENÚ
   ====================================================== */

.kuali-nav-dropdown-menu a {
    display: block !important;

    width: 100% !important;

    padding: 4px 0 !important;

    color: #111 !important;

    font-size: 16px !important;

    line-height: 1.4;

    text-decoration: none;
}


/* ======================================================
   MENÚ DE IDIOMA - MOBILE
   ====================================================== */

.kuali-language {
    position: relative;
}

.kuali-language-menu {
    position: absolute !important;

    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: auto !important;

    width: 180px !important;
    min-width: 180px !important;

    max-width: calc(100vw - 36px) !important;

    box-sizing: border-box !important;

    padding: 6px !important;

    background: #fff !important;

    border: 1px solid #ece8e2 !important;

    border-radius: 10px !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .10) !important;

    z-index: 1200 !important;
}



/* ======================================================
   IDIOMA INGLÉS
   ====================================================== */

body.kuali-language-en
.kuali-nav-dropdown-menu
.kuali-lang-en {
    display: inline !important;
}

body.kuali-language-en
.kuali-nav-dropdown-menu
.kuali-lang-es {
    display: none !important;
}


/* ======================================================
   IDIOMA ESPAÑOL
   ====================================================== */

body.kuali-language-es
.kuali-nav-dropdown-menu
.kuali-lang-es {
    display: inline !important;
}

body.kuali-language-es
.kuali-nav-dropdown-menu
.kuali-lang-en {
    display: none !important;
}
}