/********************************************
/* GENERALES                               
********************************************/

/*

:root {
    --color-destacado: #37a769;
    --color-leyenda: #939393;
}
*/

/********************************************
/* PAGOS – CUOTAS
********************************************/

/*
 * Cuotas - Estilos generales
 * variables:
 * --color-cuotas:                        #37a769;
 * --font-size-cuotas:                   16px;
 * --font-size-cuotas-small:             14px;
 * --font-weight-cuotas:                500;
 * --margin-top-cuotas:                 10px;
 * --margin-top-cuotas-producto:        20px;
 */

/* Bloque general de cuotas */
.cuotas {
  margin-top: var(--margin-top-cuotas, 10px);
  color: var(--color-cuotas, #37a769);
  font-size: var(--font-size-cuotas, 16px);
}

/* Imagen de cuotas */
.cuotas-imagen {
  padding-top: 0;
  margin-bottom: 10px;
}

/*
 * Leyenda de cuotas
 * variables:
 * --color-cuotas-leyenda:              #939393;
 * --font-size-cuotas-leyenda:          13px;
 * --line-height-cuotas-leyenda:        20px;
 * --margin-cuotas-leyenda:             25px;
 */
.cuotas-leyenda {
  line-height: var(--line-height-cuotas-leyenda, 20px);
  font-size: var(--font-size-cuotas-leyenda, 13px);
  margin-top: var(--margin-cuotas-leyenda, 25px);
  margin-bottom: var(--margin-cuotas-leyenda, 25px);
  color: var(--color-cuotas-leyenda, #939393);
}

/* Cuotas en la página de producto */
.cuotas-producto {
  margin-top: var(--margin-top-cuotas-producto, 20px);
  color: var(--color-cuotas, #37a769);
  font-size: var(--font-size-cuotas, 16px);
  font-weight: var(--font-weight-cuotas, 500);
}

/* Cuotas en promociones/descuentos */
.cuotas-descuento {
  color: var(--color-cuotas, #37a769);
  font-size: var(--font-size-cuotas, 16px);
  font-weight: var(--font-weight-cuotas, 500);
}

/* Cuotas en la categoría */
.cuotas-categoria {
  margin-top: var(--margin-top-cuotas, 10px);
  color: var(--color-cuotas, #37a769);
  font-size: var(--font-size-cuotas-small, 16px);
}

/*
 * Aplicar el color destacado a los montos en las cuotas
 */
.cuotas-sin-interes .woocommerce-Price-amount.amount .woocommerce-Price-currencySymbol,
.cuotas-sin-interes .woocommerce-Price-amount.amount bdi,
.woocom-list-content .cuotas-categoria .woocommerce-Price-amount.amount bdi,
.woocom-list-content .cuotas-categoria .woocommerce-Price-amount.amount .woocommerce-Price-currencySymbol {
  color: var(--color-cuotas, #37a769);
}



/********************************************
/* ENVÍOS                                  
********************************************/


.envios { 
    margin-top: 10px; 
    color: var(--color-destacado) !important; 
    font-size: 16px;
    margin-bottom: 5px; 
}

/* Texto principal de envíos */
.envios-texto { 
    font-size: 16px; 
    color: var(--color-destacado);
    margin-bottom: 5px; 
}

/* Texto secundario */
.envios-texto-secundario { 
    font-size: 16px; 
    color: var(--color-destacado); 
    margin-top: 5px; 
    margin-bottom: 0; 
}

/* Leyenda de envío */
.envios-leyenda { 
    font-size: 12px; 
    color: var(--color-leyenda); 
    margin-top: 0; 
}

/* Monto mínimo de envío */
.envios-minimo { 
    font-size: 16px; 
    color: var(--color-destacado); 
    margin-top: 5px; 
}

/* Enlace de información */
.envios-link { 
    font-size: 12px; 
    color: var(--color-leyenda); 
}

.envios-link a {
    color: var(--color-destacado); 
    text-decoration: none;
}

.envios-link a:hover {
    text-decoration: underline;
}

.envios-gratis{
    margin-bottom: 0px;
}


/********************************************
/* GENERALES                                  
********************************************/

/* Promociones */

.destacado-diferenciadores {
    position: relative;
    overflow: hidden;
    width: 100%; /* o un ancho fijo si está dentro de otro bloque */
}

.indextienda-promocion,
.indextienda-promocion-estatica {
    position: relative !important;
    display: block !important;
    font-weight: 500;
    color: var(--color-destacado, #fff);
    background-color: transparent;
    padding: 8px 0; 
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
}

/* Animada */
.indextienda-promocion {
    opacity: 0;
}

/* Estática */
.indextienda-promocion-estatica {
    opacity: 1;
}

/********************************************
/* Avanzadas                                
********************************************/

.precio-sin-impuestos { 
    line-height: 20px; 
    font-size: 12px; 
    margin-top: -15px; 
    margin-bottom: 0; 
    color: var(--color-leyenda); 
}



/********************************************
/* ANIMACIONES
/********************************************/
.reiniciar {
    animation: none;
    animation-name: inherit;
}

/* 1. Fade + Slide desde la derecha*/
.anim-fade-slide-left {
    transform: translateX(100%);
    animation-name: fadeSlideLeft;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

@keyframes fadeSlideLeft {
    0%   { opacity: 0; transform: translateX(100%); }
    10%  { opacity: 1; transform: translateX(0); }
    70%  { opacity: 1; transform: translateX(0); }
    90%  { opacity: 0; transform: translateX(-100%); }
    100% { opacity: 0; transform: translateX(-100%); }
}


/* 2. Fade + Slide desde la izquierda */
.anim-fade-slide-right {
    transform: translateX(-100%);
    animation-name: fadeSlideRight;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

@keyframes fadeSlideRight {
    0%   { opacity: 0; transform: translateX(-100%); }
    10%  { opacity: 1; transform: translateX(0); }
    70%  { opacity: 1; transform: translateX(0); }
    90%  { opacity: 0; transform: translateX(100%); }
    100% { opacity: 0; transform: translateX(100%); }
}

/* 3. Fade loop desde arriba */
.anim-fade-loop-top {
    animation-name: promoLoopTop;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    display: inline-block;
    position: relative;
}

@keyframes promoLoopTop {
    0%   { opacity: 0; transform: translateY(-20px); }
    10%  { opacity: 1; transform: translateY(0); }
    70%  { opacity: 1; transform: translateY(0); }
    90%  { opacity: 0; transform: translateY(20px); }
    100% { opacity: 0; transform: translateY(-20px); }
}

/* 3. Fade loop desde abajo */
.anim-fade-loop-bottom {
    animation-name: promoLoopBottom;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    display: inline-block;
    position: relative;
}

@keyframes promoLoopBottom {
    0%   { opacity: 0; transform: translateY(20px); }
    10%  { opacity: 1; transform: translateY(0); }
    70%  { opacity: 1; transform: translateY(0); }
    90%  { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 0; transform: translateY(20px); }
}