/* Import de las fuentes */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

:root {
    /* Colores */
    --color-naranja: #FF6933;
    --color-naranja-hover: rgba(255, 105, 51, 0.9);
    --color-negro: #1A1A1A;
    --color-azul: #6CE0DA;
    --color-verde:#00ceb6;
    --color-verdeclaro: #D2F9F4;
    /* Tipografías */
    --font-primary: 'Inter', sans-serif;
    --font-heading: 'Playfair Display', serif;
    --bs-primary:#00ceb6;
}

body,p,ul,li{
    font-family: Inter, system-ui, sans-serif;
    color:var(--color-negro);
}
.text-orange{
    color:var(--color-naranja);
}
.btn-success{
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-naranja);
    --bs-btn-border-color: var(--color-naranja);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-naranja-hover);
    --bs-btn-hover-border-color: var(--color-naranja-hover);
    --bs-btn-focus-shadow-rgb: 38,213,193;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-naranja);
    --bs-btn-active-border-color: var(--color-naranja);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--color-naranja-hover);
    --bs-btn-disabled-border-color: var(--color-naranja-hover);
}
.alert-info{
    background: var(--color-naranja-hover);
    color: #fff;
    border:1px solid var(--color-naranja-hover);
    border-radius:10px;
}
.alert-outline-info{
    background: transparent;
    color: #000;
    border:1px solid var(--color-naranja-hover);
    border-radius:10px;
}
.input-group-append .btn{
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
.bg-primary {
    background-color: var(--color-azul) !important;
}
.bg-primary-subtle{
    background-color: var(--color-verdeclaro) !important;
    color: var(--color-verde) !important;
}
.bg-orange-light {
    background-color: rgba(255, 105, 51, 0.6) !important;
}
.border-bottom-orange{
    border-bottom:2px double var(--color-naranja);
    padding-bottom:10px;
}

.login-bottom {
    position: absolute;
    top:34%;
    right: 1%;
    width: 650px;
    display: block;
    background: transparent;
    z-index: 1;
    opacity: .03;

    transform: rotate(-25deg);
}
.text-underlined{
    text-decoration:underline
}
.pointer{
    cursor:pointer;
}

.iban-input {
    max-width: 120px;
}
.iban-input:last-child {
    max-width: 200px;
}
@media (max-width: 576px) {
    .iban-input {
        max-width: 100%;
    }
}
@media (max-width: 1299.98px) {
    .close-btn{
        right: -35px;
    }
}
@media (min-width: 1299.98px) {
    #headerCollapse{
        display:none;
    }
}

/*Newsletters*/
.newsletter-price-card {
    cursor: pointer;
}

.newsletter-price-card .card {
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.newsletter-price-card:hover .card {
    border-color: #dee2e6;
}

.newsletter-price-card input:checked + .card {
    border-color: var(--color-naranja);
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25);
}
/*Rating*/
.rating i {
    cursor: pointer;
    font-size: 1.6rem;
    color: #ffc107; /* Bootstrap warning */
}

.rating i.inactive {
    color: #e4e5e9;
}
/*Steps*/
.order-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 30px 0;
    position: relative;
}

.order-steps::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    height: 3px;
    background: #e5e7eb;
    z-index: 0;
}
.bs-stepper-circle{background-color:  var(--color-verde) !important;}
.step-order {
    position: relative;
    text-align: center;
    flex: 1;
    z-index: 1;
}

.step-order:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 18px;
    left: 50%;
    width: 100%;
    height: 3px;
    background: #e5e7eb;
    z-index: -1;
}

.step-order.done:not(:last-child)::after {
    background: var(--color-verde);
}

.circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-size: 16px;
    font-weight: bold;
}

.step-order.done .circle {
    background: var(--color-verde);
}

.step-order.current .circle {
    background: var(--color-verde);
}
.step-order.active .circle{
  background: var(--color-azul);
  color: #fff;
}
.step-order.active span{
  font-weight: 600;
}
.step-order span {
    font-size: 13px;
    color: #6b7280;
    display: block;
  margin: 0 auto;
  max-width: 100px;
  min-height: 80px;
}


.step-order.done span {
    color: #4b5563;
    font-weight: 500;
}
/*Progress*/
.progress-circle svg {

}

.progress-circle .bg,
.progress-circle .progress {
    fill: none;
    stroke-width: 4;
}

.progress-circle .bg {
    stroke: #eee;
}

.progress-circle .progress {
    stroke: #20c997;
    stroke-linecap: round;

    transition: stroke-dasharray 0.6s ease;
}

.progress-circle .percentage {
    fill: #333;
    font-size: 0.5em;
    font-weight: 600;
}
.js-draft-content img {
  max-width: 100%;
  height: auto;
}