@font-face {
        font-family: 'vandar';
        src: url('Vandar1.ttf') format('truetype');
    }

    :root {
        --primary-color: #3498db;
        --secondary-color: #2ecc71;
        --warning-color: #2ecc71;
        --font-size: 16px;
        --spacing: 1.5em;
        --html-bg-color: black;
        --section-bg-color: black;
        --section-primary-color: black;
        --section-secondary-color: black;

    }

    div {
        -webkit-tap-highlight-color: transparent;
    }

    div:active {
        /* background-color: transparent; */
        /* outline: none; */
        /* Si aparece un borde al presionar, puedes eliminarlo también */
    }

    * {
        margin: 0;
        padding: 0;
    }

    html {
        scroll-behavior: smooth;
    }

    html,
    body {
        width: 100%;
        height: 100%;
        background: #121013;
    }

    body {
        /* display: block; */
        background: #121013;
        /* overflow: hidden; */
        /* max-width: 800px; */
        margin: 0 auto;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: whitesmoke;
        margin: 0;
    }

    textarea {
        width: calc(100% - 22px);
        padding: 10px;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        resize: none;
        background: whitesmoke;
    }

    li {
        list-style: none;
        padding: 0 5px;
        line-height: 1em;
        margin: 3px;
    }

    ul {
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: baseline;
        border: 1px solid;
        padding: 10px;
        border-radius: 10px;
        width: fit-content;
        color: #979797;
        background: #000000;
    }

    .medidas {
        direction: rtl;
    }

    .logo {
        width: 256px;
        aspect-ratio: 1;
        background-image: url(/icon/logo.png);
        background-position: center;
        background-size: contain;
        opacity: 0;
        animation: fadein 5s 1s forwards;
        animation-duration: 2s;
        /* animation-fill-mode: forwards; */
        /* Mantiene el valor final de la animación */
        /* animation-iteration-count: 1; */
        /* La animación se ejecuta una vez */
    }

    .w1-2 {
        width: 40%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-flow: column;
    }

    section {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100% - 10px);
        flex-wrap: wrap;
        min-height: 100vh;
        padding: 5px;
        overflow: hidden;
        padding-top: 2em;
        position: relative;
        z-index: 10;
    }

    .tooltip {
        color: #eeecee;
        background: #000000;
        position: absolute;
        bottom: 0;
        width: 100%;
        user-select: none;
    }

    button#installApp {
        width: fit-content;
    }

    button {
        border: none;
        padding: 5px;
        color: #ececec;
        background: none;
        font-family: sans-serif;
        border-bottom: 2px solid #515151;
        text-transform: uppercase;
        cursor: pointer;
    }


    .button-holder {
        width: 100%;
        position: absolute;
        bottom: 0;
        height: 25%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        animation: slide-from-bottom 1s 2s forwards;
        transform: translateY(100%);
        margin: 0 auto;
        padding: 0;
        flex-wrap: wrap;
        background: #100e10;
        /* border-top: 1px solid #e5da74; */
        outline: 1px solid black;
        /* background: linear-gradient(0deg, #101010 2px, transparent 2px), linear-gradient(180deg, #101010 2px, transparent 2px); */
        /* background-size: 10px 10px; */
        /* Tamaño de cada celda de la rejilla */
    }

    .vandarbtn {
        font-family: 'vandar';
        letter-spacing: 4px;
        font-size: 1em;
        transition: all .2s linear;
        color: #eeecee;
    }

    a.vandar:hover {
        border-bottom-color: #e5db69;
        /* letter-spacing: 8px; */
        color: #eae7ea;
        text-decoration: none;
        scale: 1.2;
    }

    .color-v {
        color: #eae7ea;
    }

    .color-n {
        color: #d0d0cf;
    }

    .color-d {
        color: #afafaf;
    }

    .color-a {
        color: #6d6e69;
    }

    .color-r {
        color: #e4d972;
    }

    .color-1 {
        color: #eae7ea;
    }

    .color-2 {
        color: #d0d0cf;
    }

    .color-3 {
        color: #afafaf;
    }

    .color-4 {
        color: #6d6e69;
    }

    .color-5 {
        color: #e4d972;
    }

    nav {
        width: calc(100% - 20px);
        padding: 10px;
        background-color: #100e10;
        color: white;
        text-align: center;
        position: fixed;
        left: 0;
        z-index: 100;
        transition: top 0.3s;
        border-bottom: 1px solid black;
        height: 2em;
        font-size: .7em;
        top: -4em;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    img.imagen-empresa {
        width: 275px;
        margin: 0 auto;
    }

    nav.fixed {
        position: fixed !important;
        top: 0;
    }

    .nav-buttons {
        width: -webkit-fill-available;
        display: flex;
        align-items: center;
        justify-content: end;
    }

    .nav-buttons a {
        border-bottom: none;
        display: flex;
        align-items: center;
        border-radius: 5px;
        margin: 0 10px;
    }

    @keyframes fadein {
        from {
            opacity: 0;
            /* Estado inicial */
            scale: 3;
        }

        to {
            opacity: 1;
            /* Estado final */
            scale: 1;

        }
    }

    @keyframes slide-from-bottom {
        from {
            transform: translateY(100%);
            /* Estado inicial */
        }

        to {
            transform: translateY(0);
            /* Estado final */
        }
    }

    .vandar {
        font-family: 'vandar';
        letter-spacing: .25em;
    }

    /*********************** scrollbar ***************************/
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-track {
        border-radius: 0;
        background: #00000026;
        /* border: 1px solid #131313; */
    }

    ::-webkit-scrollbar-thumb {
        background: #323232;
        border-radius: 10px;

    }

    ::-webkit-scrollbar-thumb:hover {
        background: #535353;
    }


    ::-webkit-scrollbar-corner {
        background: #0000001a;
    }

    section.light {
        background: #181717;
        z-index: 11;
        display: block;
        text-align: center;
    }

    .section-title {
        font-family: 'vandar';
        letter-spacing: 6px;
        color: white;
        font-size: 2em;
        position: sticky;
        top: 0;
        user-select: none;
    }

    section>.dscripcion {
        width: 50%;
    }

    .item {
        width: calc(100% - 20px);
        max-width: 1000px;
        display: flex;
        justify-content: space-around;
        /* padding: 10px; */
        border-bottom: 1px solid black;
        box-shadow: 0px 1px 0px 0px #29292969;
        margin: 0 auto;
        padding: 4em 0px;
        min-height: 80vh;
        position: relative;
    }

    .item .imagen {
        height: 26vw;
        aspect-ratio: 3/4;
        background: black;
        background-position: center;
        background-size: cover;
        border: 1px solid black;
        border-radius: 10px;
        position: relative;
        /* overflow: hidden; */
        cursor: pointer;
    }

    .item .imagen:after {
        content: "VER FOTOS";
        background: #000000c7;
        position: absolute;
        top: calc(100% - 1.6em);
        height: 1.6em;
        font-size: .7em;
        color: #ffffff4f;
        RIGHT: 0;
        border-radius: 6px 0px 0px 0;
        padding: 0 1em;
    }

    .imagen:hover:after {
        color: white;
    }

    .info {
        width: calc(50% - 20px);
        padding: 10px;
    }

    .nombre {
        color: white;
        font-size: 1.5em;
        line-height: 1.1em;
        /* background: red; */
        width: 100%;
        margin-bottom: 1em;
    }

    .item .descripcion {
        margin-bottom: 5px;
        padding-bottom: 5px;
        border-bottom: 1px solid #e5da73;
    }

    .precio {
        font-size: 1.3em;
        width: 100%;
        text-align: right;
        color: white;
    }

    span.tachado {
        text-decoration: line-through;
        font-size: .7em;
        color: gray;
        margin-right: 10px;
    }

    span.oferta {
        display: block;
        font-size: .6em;
    }

    .envio,
    .social {
        text-align: right;
    }

    .social {
        display: flex;
        width: 100%;
        color: #e5da73 !important;
        justify-content: flex-end;
        padding: 5px;
    }

    button.comprar,
    .delivery-calc,
    .opciones-pago button,
    .footer button,
    .modal button {
        width: 45%;
        background: #3F51B5;
        border: none;
        border-radius: 5px;
        padding: 1em;
        margin: 1em auto;
        float: right;
    }

    .delivery-calc {
        background: #e5da66;
        color: black;
        padding: .5em;
    }

    .social .icono {
        color: #121013;
        padding: .5em;
        margin: 0 5px;
        border-radius: 4px;
        border: 1px solid black;
        background: #e5da73;
    }

    .social .icono:hover {
        color: #e5da73;
        background: #121013;
    }

    button.comprar:hover {
        box-shadow: 0px 5px 10px -3px #00000082;
        background: #007cff;
    }

    button.delivery-calc:hover {
        box-shadow: 0px 5px 10px -3px #00000082;
        background: #fceb37;
    }

    .envio {
        color: #e5da66;
    }

    button.comprar,
    .icono {
        transition: all .2s linear;
    }

    .h-scroll {
        width: 100vw;
        /* Asegura que la sección ocupe toda la vista */
        height: 100vh;
        /* Asegura que la sección ocupe toda la altura de la vista */
        overflow-x: auto;
        /* Permite el desplazamiento horizontal */
        white-space: nowrap;
        /* Evita que el contenido se envuelva */
        display: flex;
        /* Alinea el contenido en fila */
    }

    .h-scroll>div {
        min-width: 100vw;
        /* Cada hijo ocupa el ancho completo de la vista */
        height: 100%;
        /* Ocupa toda la altura de la sección */
        flex-shrink: 0;
        /* Evita que los elementos se encojan */
    }

    .buscador {
        width: 100%;
        padding: 2em;
        display: flex;
        align-items: center;
        justify-content: center;
    }



    .searchbox input[type="text"] {
        width: calc(100% - 40px);
        font-size: 2em;
        border-radius: 1em;
        border: none;
        outline: none;
    }

    .searchbox input[type="text"]:focus {
        outline: 3px solid #3f51b5;
    }

    .buscador {
        width: 100%;
        padding: 2em 0;
        display: block;
        background: #100e10;
    }



    .searchbox input[type="text"] {
        width: calc(100% - 40px);
        font-size: 1em;
        border-radius: 2em;
        border: none;
        outline: none;
        transition: all.2s;
        padding: 10px 2em;
    }

    .searchbox input[type="text"]:focus {
        outline: 3px solid #3f51b5;
    }

    .searchbox {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 90%;
        margin: 0 auto;
        max-width: 400px;
    }

    .searchbox i {
        margin-right: -1.5em;
    }

    .thumbs {
        width: 96%;
        min-height: 190px;
        border: 1px solid black;
        margin: 1em auto;
        /* border-radius: 10px; */
        background: #000000;
        position: relative;
        display: flex;
        overflow: scroll hidden;
        display: flex;
        align-items: center;
        padding: 0;
    }

    .thumb {
        aspect-ratio: 1;
        height: calc(33vw - 22px);
        max-height: 125px;
        background: #272727;
        margin: 5px;
        border-radius: 10px;
        background-image: url(/catalogo/001/image.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
        position: relative;
        border: none;
        padding: 0;
        margin-bottom: 4em;
    }

    .thumb .title {
        display: block;
        position: absolute;
        top: 100%;
        text-transform: capitalize;
        font-size: .75em;
        line-height: 1em;
        margin-top: 5px;
        user-select: none;
        text-align: center;
        width: 100%;
    }


    #gallery-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        overflow: hidden;
        z-index: 9999;
    }

    #gallery-container img {
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
        cursor: pointer;
        margin: 5px;
    }

    #gallery-container .grid-item {
        box-sizing: border-box;
        padding: 5px;
    }

    #gallery-container .close-btn {
        background-color: #fff;
        padding: 10px;
        cursor: pointer;
        font-size: 20px;
        text-align: center;
    }

    strong {
        font-family: 'vandar';
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    #empresa li {
        padding: 10px;
        color: #e5da67;
    }

    #empresa li strong {
        display: block;
        color: white;
    }

    p {
        color: #c3c3c3;
        padding: 5px;
        margin: 0;
        position: relative;
    }

    .dscripcion {
        color: #979797;
        text-align: left;
    }

    .paso1,
    .paso2 {
        width: 90%;
        margin: 10px;
    }

    .oferta {
        display: flex;
        align-items: end;
        justify-content: flex-end;
        flex-flow: column;
        font-size: .75em;
        color: floralwhite;
    }

    footer {
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        background: black;
        position: absolute;
        bottom: 0;
        padding: 3em;
    }

    footer .input-holder:last-of-type {
        direction: rtl;
    }

    footer .input-holder {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    footer button,
    footer a {
        border: 1px solid gray;
        border-radius: 10px;
        padding: 10px;
        text-transform: none;
    }

    footer a:hover {
        color: white;
        text-decoration: none;
    }

    span.dto:after {
        content: " Descuento  EXTRA";
    }

    @media only screen and (max-width: 600px) {
        .opciones-pago {
            flex-flow: column;

        }

        .section-title {
            font-size: 1em;
            margin-top: 2em;
            width: 100%;
            text-align: center;
            margin-bottom: 1em;
        }

        .w1-2 {
            width: 100%;
        }

        .vandarbtn {
            font-size: 1em;
            width: 70%;
            justify-content: center;
            display: flex;
            justify-content: center;
            border: none;
            /* border: 1px solid black; */
            /* height: 50%; */
        }

        a.vandar:hover {
            background: #252525;
        }

        .dscripcion {
            /* max-height: 30%; */
            /* overflow: hidden auto; */
            margin-bottom: 1em;
            line-height: 1.1em;
            /* width: 90% !important; */
            font-size: .9em;
        }

        .imagen {
            /* aspect-ratio: 1 !important; */
            width: 100% !important;
        }

        .item {
            flex-wrap: wrap;
        }

        .info {
            width: 100%;
        }

        button.comprar,
        .delivery-calc {
            width: 100%;
            padding: 1em;
            margin-left: 0;
        }

        .button-holder {
            /* background: none; */
            /* border: none; */
            /* box-shadow: none; */
            height: 50%;
            /* outline: none; */
            padding-bottom: 4em;
        }

        .logo {
            position: absolute;
            top: 10%;
        }

        .envio {
            width: 80%;
            margin-right: 0;
            line-height: 1em;
            margin-left: auto;
        }

        nav .isologo {
            display: none;
        }
    }

    .container-carousel {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: #e0e0e0;
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.66);
        border-radius: 15px;
        overflow: hidden;
        top: 0;
        left: 0;
        z-index: 1000;
    }

    .carruseles {
        width: 500%;
        height: 100%;
        display: flex;
    }

    .slider-section {
        width: calc(100% / 5);
        height: 100%;
    }

    .slider-section img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: black;
        padding: 5px;
    }

    .btn-left,
    .btn-right {
        display: flex;
        position: absolute;
        top: 50%;
        font-size: 1.5rem;
        background-color: transparent;
        /* border-radius: 50%; */
        padding: 0px;
        font-weight: 600;
        cursor: pointer;
        color: #ffffff81;
        transform: translate(0, -50%);
        transition: .5s ease;
        user-select: none;
        width: 4em;
        height: 100%;
    }

    .btn-left:hover,
    .btn-right:hover {
        /* background-color: #333333d4; */
        color: #fff;
    }

    .btn-left {
        left: 0;
    }

    .btn-right {
        right: 10px;
    }

    .btn-left:before {
        content: "";
        position: absolute;
        width: 1em;
        height: 1em;
        top: calc(50% - .5em);
        rotate: -45deg;
        left: .5em;
        border-top: 5px solid;
        border-left: 5px solid;
    }

    .btn-right:before {
        content: "";
        position: absolute;
        width: 1em;
        height: 1em;
        top: calc(50% - .5em);
        rotate: -45deg;
        right: .5em;
        border-bottom: 5px solid;
        border-right: 5px solid;
    }

    .btn-close {
        position: absolute;
        top: 1em;
        right: 1em;
        /* scale: 2; */
        color: white;
        z-index: 2000;
        cursor: pointer;
    }

    .oferta span {
        display: block;
    }

    .social-buttons a {
        margin: 0 5px;
        color: #2196F3;
        background: white;
        border-radius: 2em;
        padding: 0 11px;
        direction: rtl;
        font-size: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
    }

    .hidden {
        display: none;
    }

    /* Estilos para el modal */
    .modal {
        display: flex;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0 0 0 / 76%);
        z-index: 100;
        align-items: center;
        justify-content: center;
    }

    .modal-content {
        background-color: #1e1e1e;
        padding: 20px;
        border: 1px solid #000;
        width: 80%;
        max-width: 475px;
        border-radius: 10px;
        position: relative;
        display: flex;
        align-items: center;
        position: relative;
        justify-content: space-around;
        flex-flow: column;
    }

    .modal h1,
    .modal h2,
    .modal h3 {
        color: white;
        margin: 0 0 1em 0;
        padding: 0;
        position: relative;
    }

    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    .social-btn span,
    .comentarios span {
        user-select: none;
        margin-right: 5px;
    }

    .megusta.disabled svg path {
        color: red;
        stroke: red;
        fill: red !important;
    }

    .megusta.disabled {
        background: transparent;
        color: white;
    }

    nav h1,
    nav h2,
    nav h3,
    nav h4 {
        color: white;
        text-wrap: nowrap;
        margin: 0;
        padding: 0;
    }

    span.dto {
        display: inline-block;
        color: white;
        background: green;
        border-radius: 5px;
        padding: 1px 5px;
        /* font-size: .6em; */
        margin-right: 5px;
    }

    span.precio_oferta {
        display: inline;
        font-size: 1.3em;
    }

    .opciones-pago {
        /* position: absolute; */
        /* top: 50%; */
        /* left: 50%; */
        /* translate: -50% -50%; */
        /* background: #2f2f2f; */
        /* padding: 1em; */
        /* border-radius: 10px; */
        /* display: flex; */
        /* align-items: center; */
        /* flex-flow: column; */
    }

    .opciones-pago button {
        /* margin: 10px; */
        /* text-wrap: nowrap; */
        /* display: flex; */
        /* align-items: center; */
        /* justify-content: center; */
        width: 100%;
    }

    .opciones-pago button span {
        font-size: 1.2em;
    }

    .hidden {
        left: -100%;
        display: none !important;
    }

    input {
        font-size: 1.2em;
        /* border-radius: 2em; */
        border: none;
        outline: none;
        padding: 5px;
        display: block;
        margin: 4px auto;
        text-align: center;
    }

    .input-holder {
        width: 50%;
        display: flex;
        flex-flow: column;
        align-items: flex-start;
        position: relative;
        padding: 0;
        margin: 0;
    }

    .input-holder input {
        width: calc(100% - 15px);
        font-size: 1em;
    }

    .input-holder.w100 input {
        width: 90%;
    }

    .input-holder.w100 {
        width: 100%;
    }

    input:focus {
        outline: 3px solid #2196F3;
    }

    .input-holder label {
        padding-left: 1em;
    }

    .last-element {
        margin-bottom: 3em;
    }

    .item-info {
        display: flex;
        align-items: center;
        width: calc(100% - 2em);
        margin: 0 auto;
        max-width: 500px;
        border: 1px solid;
        border-radius: 10px;
        padding: .5em;
        font-size: .8em;
        justify-content: space-between;
    }

    .contact-holder {
        width: 75%;
        display: flex;
        flex-flow: column;
        align-items: center;
    }

    .footer {
        max-width: 600px;
        margin: 0 auto;
    }

    .footer a {
        text-transform: none;
        border: none;
        direction: rtl;
        display: flex;
        align-items: center;
    }

    .cart {
        position: fixed;
        top: 4em;
        right: 1em;
        background: #2196F3;
        color: white;
        border-radius: 50%;
        height: 2.5em;
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        opacity: .7;
    }

    .cart:hover {
        opacity: 1;
    }

    .cart .cart-items {
        position: absolute;
        top: 1.5em;
        right: -.2em;
        border-radius: 50%;
        width: 1.5em;
        aspect-ratio: 1;
        background: #e5da73;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        color: black;
    }

    .input-holder.inline {
        flex-flow: nowrap;
        align-items: center;
        justify-content: flex-start;
        width: auto;
    }

    .inline label,
    .inline input {
        width: min-content;
        margin: 5px;
    }

    span.total-transferencia,
    span.total-tarjeta {
        display: block;
        font-size: 1.1em;
        font-weight: 500;
        font-family: system-ui;
    }

    .social-buttons a svg {
        background: white;
        color: #2196F3;
        border-radius: 2em;
        padding: .2em;
        width: 1.5em;
        font-size: 20px;
        overflow: visible;
    }