/* ==========================================================================
   Bloque de precio de las fichas de servicio
   Usado en Pages/Servicios con: <div class="precio-servicio">.
   Se carga desde _Layout despues de cta-sucursales.css.
   ========================================================================== */

.precio-servicio {
    margin: 1.25rem 0 1.5rem;
    padding: 1rem 1.25rem;
    background: #f4fafb;
    border-left: 4px solid #007994;
    border-radius: 8px;
}

.precio-servicio__etiqueta {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #007994;
}

.precio-servicio__monto {
    display: block;
    font-size: 1.7rem;
    line-height: 1.2;
    color: #051350;
}

.precio-servicio__nota {
    margin: .35rem 0 0;
    font-size: .95rem;
}

/* Variante de precio escalonado (por numero de jeringas):
   <ul class="precio-servicio__lista"><li><span>3 jeringas</span><strong>$X</strong></li>...
   El selector lleva .precio-servicio delante porque .texto-servicio ul (0,1,1) mete
   padding-left: 1.75rem y list-style: disc; con (0,2,0) se gana sin !important. */
.precio-servicio .precio-servicio__lista {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
}

.precio-servicio__lista li {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem 1rem;
    padding: .4rem 0;
    border-bottom: 1px dashed rgba(5, 19, 80, .18);
}

.precio-servicio__lista li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.precio-servicio__lista strong {
    color: #051350;
    font-size: 1.15rem;
    white-space: nowrap;
}