/*
 * Componentes compartidos entre el inicio y las páginas de Servicios.
 * Reutilizan las variables del tema (brand-theme-2026.css y ui-rounded-system.css)
 * para que ambas páginas se vean igual y se actualicen juntas.
 */

:root {
    --salinas-surface-border: #ebebeb;
    --salinas-surface-shadow: 0 6px 22px rgba(17, 17, 17, 0.07);
    --salinas-text: #3d3d40;
}

/* ---------- Títulos y textos (mismo tratamiento que el inicio) ---------- */

.salinas-title {
    margin: 0;
    color: var(--salinas-black, #171717);
    font-size: clamp(26px, 2.7vw, 40px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.salinas-title__highlight {
    color: var(--salinas-red, #c8272f);
}

.salinas-subtitle {
    margin: 10px 0 0;
    color: var(--salinas-gray, #6f6f72);
    font-size: clamp(15px, 1.45vw, 20px);
    font-weight: 400;
    line-height: 1.45;
}

.salinas-section-title {
    margin: 0 0 30px;
    color: var(--salinas-black, #171717);
    font-size: clamp(26px, 3vw, 44px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-align: center;
}

@media (max-width: 991.98px) {
    .salinas-section-title {
        margin-bottom: 24px;
    }
}

@media (max-width: 575.98px) {
    .salinas-section-title {
        margin-bottom: 20px;
    }
}

/* ---------- Botones ---------- */

/* Principal: el botón negro redondeado de las promociones de servicios; rojo al pasar el cursor. */
.salinas-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 22px;
    border: 0;
    border-radius: 2.4rem;
    background: var(--salinas-black, #171717);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 42px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.salinas-btn:hover,
.salinas-btn:focus-visible {
    background: var(--salinas-red, #c8272f);
    color: #ffffff;
}

/* Secundario: llamadas y navegación, con el borde negro de los botones de Sucursales. */
.salinas-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 18px;
    border: 2px solid var(--salinas-black, #171717);
    border-radius: var(--salinas-pill-radius, 11px);
    background: #ffffff;
    color: var(--salinas-black, #171717);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.salinas-btn-secondary:hover,
.salinas-btn-secondary:focus-visible {
    background: var(--salinas-black, #171717);
    color: #ffffff;
}

.salinas-text-link {
    color: var(--salinas-red, #c8272f);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.salinas-text-link:hover {
    color: var(--salinas-red-dark, #a91f27);
}

/* ---------- Etiquetas y precios ---------- */

.salinas-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    background: var(--salinas-yellow, #f8ca48);
    color: var(--salinas-black, #171717);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.salinas-tag--muted {
    background: var(--salinas-gray-light, #f3f3f3);
}

.salinas-price {
    color: var(--salinas-red, #c8272f);
    font-weight: 800;
    line-height: 1.1;
}

.salinas-price__from {
    color: var(--salinas-gray, #6f6f72);
    font-size: 15px;
    font-weight: 400;
}

/* Precio pendiente de confirmar: se ofrece cotizar en lugar de un importe. */
.salinas-price-quote {
    color: var(--salinas-red, #c8272f);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Superficies ---------- */

.salinas-surface {
    border: 1px solid var(--salinas-surface-border);
    border-radius: var(--salinas-surface-radius, 11px);
    background: #ffffff;
    box-shadow: var(--salinas-surface-shadow);
}

/*
 * ---------- Ofertas de servicio (inicio y /servicios) ----------
 * Tarjetas blancas con foto arriba. El precio es lo único en rojo, la etiqueta
 * es el único amarillo y el botón usa el negro de la marca.
 * El inicio conserva su radio propio (--pl-radius); el resto usa el compartido.
 */
.promotions-landing__services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.promotions-landing__service {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--salinas-surface-border);
    border-radius: var(--pl-radius, var(--salinas-surface-radius, 11px));
    background: #fff;
    box-shadow: var(--salinas-surface-shadow);
}

.promotions-landing__service picture {
    display: block;
    background: var(--salinas-gray-light, #f3f3f3);
}

.promotions-landing__service-photo {
    display: block;
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.promotions-landing__service-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 24px 24px;
}

.promotions-landing__service-title {
    margin: 12px 0 0;
    color: var(--salinas-black, #171717);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.promotions-landing__service-title a {
    color: inherit;
}

.promotions-landing__service-title a:hover {
    color: var(--salinas-red, #c8272f);
}

.promotions-landing__service-price {
    margin: 6px 0 0;
    font-size: 34px;
}

.promotions-landing__service-details {
    margin: 14px 0 20px;
    padding-left: 18px;
    color: var(--salinas-text);
    font-size: 15px;
    line-height: 1.6;
}

.promotions-landing__service-details li {
    margin: 0 0 4px;
    list-style: disc;
    line-height: 1.5;
}

.promotions-landing__service-details li::marker {
    color: var(--salinas-gray, #6f6f72);
}

.promotions-landing__service-btn {
    margin-top: auto;
}

@media (max-width: 767.98px) {
    .promotions-landing__services {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .promotions-landing__service-photo {
        height: 210px;
    }

    .promotions-landing__service-body {
        padding: 18px;
    }

    .promotions-landing__service-btn {
        align-self: stretch;
    }
}

.promotions-landing__service-quote {
    margin: 8px 0 0;
    font-size: 18px;
}