/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/


.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: #FF3D00;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/* --- Tarjetas de entrada -------------------------------------------
   El campo de cantidad era una raya blanca con dos flechitas y ni una
   palabra que dijera para qué servía; la gente llegaba al final de la
   compra sin haber elegido nada. Ahora lleva etiqueta y se ve. */
.entrada-cinta {
    background: #0b5ed7; color: #fff; font-size: 13px; font-weight: 600;
    margin: -3rem -3rem 1.25rem; padding: 8px 12px; border-radius: 6px 6px 0 0;
}
.entrada-destacado {
    background: rgba(11, 94, 215, .08); border: 1px solid rgba(11, 94, 215, .35);
    border-radius: 8px; padding: 12px 14px; margin: 1rem 0; text-align: left;
    font-size: 14px; line-height: 1.45;
}
.entrada-beneficios { list-style: none; padding-left: 0; text-align: left; }
.entrada-beneficios li::before { content: "✓ "; font-weight: 700; color: #198754; }
.entrada-cantidad label { font-size: 15px; }
.entrada-cantidad input[type="number"] { max-width: 160px; margin: 0 auto; }
.entrada-cantidad small { color: #6c757d; font-size: 12px; }

/* --- Legibilidad dentro de las tarjetas de color -------------------
   Las tarjetas tienen fondo naranja o azul y texto blanco. Las clases
   de Bootstrap que usa el partial (text-muted, form-label) pintan gris
   oscuro, que sobre ese fondo no se lee. Se vio en la vista previa del
   CRM: el subtítulo salía casi invisible y montado sobre el precio. */
.pricing-box.vip-option,
.pricing-box.general-option { color: #fff; }

.pricing-box.vip-option .text-muted,
.pricing-box.general-option .text-muted,
.pricing-box.vip-option .entrada-cantidad small,
.pricing-box.general-option .entrada-cantidad small {
    color: rgba(255, 255, 255, .85) !important;
}

.pricing-box.vip-option .entrada-cantidad label,
.pricing-box.general-option .entrada-cantidad label { color: #fff; }

/* El precio y su subtítulo se pisaban: el tema le pone una altura fija
   a .pricing-price que no contaba con una línea debajo. */
.pricing-box .pricing-price { height: auto; line-height: 1.15; margin-bottom: .75rem; }
.pricing-box .pricing-price small { margin-top: .35rem; font-size: 13px; }

.entrada-beneficios li { margin-bottom: .35rem; }
.pricing-box.vip-option .entrada-beneficios li::before,
.pricing-box.general-option .entrada-beneficios li::before { color: #fff; }

/* --- Que se vea que hay oferta --------------------------------------
   La tachadura se hacía con .text-decoration-line-through de Bootstrap,
   que esta plantilla no trae: comprobado en el navegador, resolvía a
   «none». O sea que el precio viejo salía sin tachar y parecía otro
   precio más, con lo que la oferta no sólo no se entendía: hacía dudar.
   Se pone aquí, con la decoración escrita a mano. */
.entrada-antes {
    font-size: 14px; opacity: .85; margin-bottom: .15rem;
}
.entrada-tachado {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: #dc3545;   /* que la raya se vea, no se intuya */
}
.entrada-oferta {
    display: inline-block; margin-top: .4rem; padding: 4px 12px;
    border-radius: 999px; font-size: 13px; font-weight: 700;
    background: #ffc107; color: #212529;
}
/* Sobre las tarjetas de color, la raya en rojo se pierde: va en blanco. */
.pricing-box.vip-option .entrada-tachado,
.pricing-box.general-option .entrada-tachado {
    text-decoration-color: rgba(255, 255, 255, .9);
}

/* El recuadro destacado, sobre fondo de color, necesita su propio
   contraste en vez del azul claro que vale sobre blanco. */
.pricing-box.vip-option .entrada-destacado,
.pricing-box.general-option .entrada-destacado {
    background: rgba(0, 0, 0, .18); border-color: rgba(255, 255, 255, .35); color: #fff;
}

/* Las dos tarjetas a la misma altura: con textos de distinta longitud
   quedaban desalineadas y el conjunto parecía descuadrado. */
#pricing-switch { align-items: stretch; }
#pricing-switch > [class^="col-"] { display: flex; }
#pricing-switch .pricing-box { display: flex; flex-direction: column; width: 100%; }
#pricing-switch .pricing-features { flex: 1 1 auto; }