:root {
    --tm-color-green: #5e7c77;
    --secondary-color: #2ecc71;
    --bg-color: #fff9f0;
    --text-color: #2c3e50;
    --primary-hover: #2980b9;
    --color-orange:   #D59F5F;
}
.bg-green
{
    background:var(--tm-color-green)!important
}
.bg-orange {
    background: var(--color-orange) !important
}
 .bg-header
 {background:var(--bg-color)!important}

.bg-body {
    background: var(--bg-color) !important
}
.text-orange {
    color:   var(--color-orange) !important
}

.logoalt {
    display: none
}
logomain {
    display: block
}
.navbar .navbar-brand {
    position: absolute;
    background: #fff9f0;
    border-radius: 20px;
    padding: 20px;
    top: 10px;
}
.navbar-stuck .navbar-brand {
    position: initial;
  
    border-radius: 0px;
    padding: 0px;
}

.navbar-stuck .logoalt {
    display: block !important
}

.navbar-stuck .logomain {
    display: none !important
}
.btn-primary, .product-card .count-input:not(.collapsed) .product-card-button, .product-card:hover .product-card-button, [data-bs-theme=dark] .product-card:hover .product-card-button {
    --cz-btn-color: #fff;
    --cz-btn-bg: #5E7C77;
    --cz-btn-border-color: #5E7C77;
    --cz-btn-hover-color: #fff;
    --cz-btn-hover-bg: #B4BFB7;
    --cz-btn-hover-border-color: #c44252;
    --cz-btn-focus-shadow-rgb: 247, 108, 125;
    --cz-btn-active-color: #fff;
    --cz-btn-active-bg: #c44252;
    --cz-btn-active-border-color: #b83e4d;
    --cz-btn-active-shadow: none;
    --cz-btn-disabled-color: #fff;
    --cz-btn-disabled-bg: #5E7C77;
    --cz-btn-disabled-border-color: #5E7C77;
}
.btn-primary, .product-card .count-input:not(.collapsed) .product-card-button, .product-card:hover .product-card-button, [data-bs-theme=dark] .product-card:hover .product-card-button {
    --cz-btn-hover-bg: #B4BFB7;
    --cz-btn-active-bg: #5E7C77;
    --cz-btn-hover-border-color: #B4BFB7;
    --cz-btn-active-border-color: #5E7C77;
}
.btn-primary, .product-card .count-input:not(.collapsed) .product-card-button, .product-card:hover .product-card-button, [data-bs-theme=dark] .product-card:hover .product-card-button {
    --cz-btn-hover-bg: #B4BFB7;
    --cz-btn-active-bg: #B4BFB7;
    --cz-btn-hover-border-color: #B4BFB7;
    --cz-btn-active-border-color: #5E7C77;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #5e7c77;
}

/* 1. Estado base: Borde naranja siempre visible */
.border-gray {
    position: relative;
    border: 2px solid #e7e7e7 !important; /* Naranja obligatorio */
    border-radius: 1rem; /* Ajusta según rounded-4 de Bootstrap */
    background: white;
    transition: all 0.3s ease;
    z-index: 1;
}

    /* 2. El "hilo" verde que hará el recorrido */
    .border-gray::before {
        content: '';
        position: absolute;
        /* El inset -2px es para que el verde se dibuje justo encima del naranja */
        inset: -2px;
        border: 2px solid #198754; /* Verde */
        border-radius: inherit;
        z-index: -1;
        /* Inicialmente el verde no se ve (usamos clip-path para "ocultarlo") */
        clip-path: inset(0 100% 100% 0);
        transition: none;
    }

    /* 3. Animación al hacer Hover */
    .border-gray:hover::before {
        animation: border-recorrido 2s linear forwards;
    }

/* 4. Definición del recorrido cuadro por cuadro */
@keyframes border-recorrido {
    0% {
        clip-path: inset(0 100% 100% 0); /* Esquina superior izquierda */
    }

    25% {
        clip-path: inset(0 0 100% 0); /* Recorre borde superior */
    }

    50% {
        clip-path: inset(0 0 0 0); /* Baja por el borde derecho */
    }

    75% {
        clip-path: inset(100% 0 0 0); /* Esta lógica es para cerrar el cuadro */
        /* Para un efecto más fluido de "llenado", usamos el siguiente ajuste: */
    }

    100% {
        clip-path: inset(0 0 0 0); /* Queda el borde verde totalmente visible */
    }
}

/* Opcional: Que la card suba un poco al hacer hover */
.border-orange:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.btn-orange {
    --cz-btn-color: #fff;
    --cz-btn-bg: var(--color-orange);
    --cz-btn-border-color: var(--color-orange);
    --cz-btn-hover-color: #fff;
    --cz-btn-hover-bg: #B4BFB7;
    --cz-btn-hover-border-color: #c44252;
    --cz-btn-focus-shadow-rgb: 247, 108, 125;
    --cz-btn-active-color: #fff;
    --cz-btn-active-bg: #c44252;
    --cz-btn-active-border-color: #b83e4d;
    --cz-btn-active-shadow: none;
    --cz-btn-disabled-color: #fff;
    --cz-btn-disabled-bg: var(--color-orange);
    --cz-btn-disabled-border-color: var(--color-orange);
}

.btn-orange {
    --cz-btn-hover-bg: #B4BFB7;
    --cz-btn-active-bg: var(--color-orange);
    --cz-btn-hover-border-color: #B4BFB7;
    --cz-btn-active-border-color: var(--color-orange);
}

.btn-orange {
    --cz-btn-hover-bg: #B4BFB7;
    --cz-btn-active-bg: #B4BFB7;
    --cz-btn-hover-border-color: #B4BFB7;
    --cz-btn-active-border-color: #5E7C77;
}
.hotspot {
    position: absolute;
    width: 20px;
    height: 20px;
    cursor: pointer;
    z-index: 10;
    transform: translate(-50%, -50%);
}

/* El punto sólido central */
.hotspot-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fd7e14; /* Tu naranja */
    border-radius: 50%;
    border: 2px solid white;
    transition: background-color 0.3s ease;
}

/* El efecto de pulso animado */
.hotspot-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fd7e14;
    border-radius: 50%;
    opacity: 0.6;
    animation: hotspot-pulse-animation 2s infinite;
}

/* Cambio a verde al hacer hover */
.hotspot:hover .hotspot-inner,
.hotspot:hover .hotspot-pulse {
    background-color: #198754; /* Tu verde */
}

@keyframes hotspot-pulse-animation {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(3);
        opacity: 0;
    }
}

/* Ajuste para móviles (720px) */
@media (max-width: 720px) {
    .hotspot {
        width: 15px;
        height: 15px;
    }
}
 

/* Contenedor del video con altura mediana */
.video-container {
    position: relative;
    width: 100%;
    height: 60vh; /* Altura mediana (60% de la pantalla) */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}

/* El video con efecto fixed */
.video-background {
    position: fixed; /* Mantiene el video quieto al hacer scroll */
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que cubra todo el espacio sin deformarse */
    z-index: -1; /* Lo coloca detrás de todo el contenido */
}

/* Estilo para el contenido sobre el video */
.content-overlay {
   
}

/* Sección de relleno para probar el scroll */
.spacer {
    
    background-color: white;
    padding: 50px;
    position: relative;
    z-index: 999; /* Asegura que esta sección pase por encima del video */
}
.video-container:before {
    background: #5e7c77;
    content: '';
    width: 100%;
    height: 100%;
    opacity: 0.6;
    position: absolute;
    z-index: 0;
}

p, small, span, ul li, .Poppins, a, .popover-body {
    font-family: "Poppins", sans-serif !important;
    font-weight: normal;
    font-style: normal;
}
.popover-body {
     
    font-weight: 400;
  font-size:12px
}
small
{font-weight:100}
.fs-12 {
    font-size: 12px !important
}
.fs-14 {
    font-size: 14px !important
}
.fs-16 {
    font-size: 16px !important
}
.fs-18 {
    font-size: 18px !important
}

ul li span, ul li a, ul li strong, ul li p {
    font-size: 16px !important
}
[data-bs-theme=dark] .form-control:not([data-bs-theme=light]), [data-bs-theme=dark] .form-select:not([data-bs-theme=light]) {
    --cz-form-control-bg: transparent;
    --cz-form-control-border-color: #ffffff;
    --cz-form-control-focus-bg: transparent;
    --cz-form-control-focus-border-color: #fff;
    color: white;
}
/* Asegúrate de que no haya espacios incorrectos y apunta al elemento raíz */
[data-bs-theme="dark"] .form-control::placeholder {
    color: white !important; /* Usamos !important si Bootstrap está ganando por especificidad */
    opacity: 0.8;
}

/* Si quieres excluir explícitamente cuando el input tenga un tema light forzado */
[data-bs-theme="dark"] .form-control:not([data-bs-theme="light"])::placeholder {
    color: white;
    opacity: 0.8;
}
.img-newsletter
{width:40px}


/* Estilo inicial del label (oculto) */
.btn-whatsapp-dynamic .label-chat {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    transition: all 0.5s ease; /* Controla la suavidad del desplazamiento */
    margin-left: 0;
}

/* Estado cuando pasas el ratón por el botón padre */
.btn-whatsapp-dynamic:hover .label-chat {
    max-width: 200px; /* Un ancho suficiente para el texto */
    opacity: 1;
    margin-left: 10px; /* Espacio entre el icono y el texto */
}

/* Opcional: un pequeño efecto de escala en el icono */
.btn-whatsapp-dynamic:hover i {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* Asegura que el link se comporte como bloque para que el truncado funcione */
.custom-topbar-link {
    display: block;
    max-width: 100%; /* Evita que se salga del slide */
}
.ico-product {
    width: 140px;
}

#title-producto, #img-product {
    transition: all 0.3s ease-in-out;
}

.flavor-check {
    cursor: pointer;
}
.text-brown {
    color: #a75b25
}
/* Regla específica para pantallas menores a 720px */
@media (max-width: 720px) {

    .hero-overlay {
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.85); /* blanco translúcido */
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 1;
        opacity:0.7
    }

    .ico-product {
        width: 100px;
    }

    .custom-topbar-link {
        max-width: 250px; /* Ajusta este valor según cuánto espacio quieras dejar a los lados */
        margin: 0 auto;
    }

    .img-newsletter {
        width: 30px
    }

    .navbar-brand {
        margin-right: auto !important
    }

    .navbar .navbar-brand {
        position: initial !important
    }

    #searchBox {
        height: 90% !important
    }
}
/* === Cart row remove animation === */
.cart-row { transition: opacity .2s ease, transform .2s ease; }
.cart-row-removing { opacity: 0; transform: translateX(20px); pointer-events: none; }