/*
 * Páginas de Servicios (/servicios y /servicios/{servicio}).
 * Solo acomodo y reglas responsivas: colores, botones, etiquetas, precios y
 * tarjetas vienen de salinas-components.css y de las variables del tema.
 */

.services-page {
    background: #f4f5f7;
}

/* ---------- Cabecera: igual a Sucursales y Acerca de (sin franjas) ---------- */

.services-header {
    padding: 40px 0 8px;
}

.services-header__intro {
    display: grid;
    gap: 8px;
}

.services-header__intro::after {
    content: "";
    height: 3px;
    margin-top: 4px;
    background: var(--salinas-yellow, #f8ca48);
}

.services-header__intro .services-title {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
}

.services-header__intro .salinas-subtitle {
    margin: 0;
    color: #55575b;
    font-size: 17px;
    line-height: 1.5;
}

/* ---------- Secciones de contenido ---------- */

.services-section {
    padding: 48px 0;
}

.services-section--gray {
    background: transparent;
}

.services-section--first {
    padding-top: 24px;
    padding-bottom: 8px;
}

/* Títulos de sección como en Acerca de: a la izquierda, negros y más chicos. */
.services-page .salinas-section-title {
    margin: 0 0 16px;
    font-size: 28px;
    letter-spacing: 0;
    line-height: 1.2;
    text-align: left;
}

/* ---------- Hub: promociones del mes (texto, como las ofertas de servicio del inicio) ---------- */

.services-promos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.services-promo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
}

.services-promo__title {
    margin: 10px 0 0;
    color: var(--salinas-red, #c8272f);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.services-promo__detail {
    margin: 6px 0 0;
    color: #55575b;
    font-size: 17px;
    line-height: 1.45;
}

.services-promo__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 20px;
}

.services-promo__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    color: var(--salinas-black, #171717);
    font-size: 48px;
    line-height: 1;
}

/* Día de la promoción junto al precio ("solo los martes"): rojo y en negritas para que no se pase. */
.salinas-price__when {
    color: var(--salinas-red, #c8272f);
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.services-promo__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.services-promo__more {
    color: var(--salinas-black, #171717);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

.services-promo__more:hover {
    color: var(--salinas-red, #c8272f);
}

/* ---------- Hub: todos los servicios (lista de filas, como un menú) ---------- */

.services-rows {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

.services-rows > li + li {
    border-top: 1px solid #ebecf0;
}

/* Foto | nombre | línea | flecha. Toda la fila es el enlace. */
.services-row {
    display: grid;
    grid-template-columns: 88px minmax(200px, 280px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 28px;
    padding: 18px 28px 18px 18px;
    color: inherit;
    text-decoration: none;
    transition: background-color .2s ease;
}

.services-row:hover,
.services-row:focus-visible {
    background: #fafafb;
    color: inherit;
}

.services-row:focus-visible {
    outline: 3px solid rgba(200, 39, 47, .35);
    outline-offset: -3px;
}

/* Foto cuadrada, todas del mismo tamaño para que se vean parejas. */
.services-row__photo {
    width: 88px;
    height: 88px;
    overflow: hidden;
    border-radius: 12px;
    background: #f1f2f5;
}

.services-row__photo picture,
.services-row__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.services-row:hover .services-row__photo img {
    transform: scale(1.05);
}

.services-row__name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.services-row__title {
    margin: 0;
    color: var(--salinas-black, #171717);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
}

/* Etiqueta discreta (gris claro), para no competir con las promociones amarillas. */
.services-row__note {
    padding: 3px 10px;
    border-radius: 999px;
    background: #f1f2f5;
    color: #3d3f44;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.services-row__text {
    color: var(--salinas-text, #3d3d40);
    font-size: 17px;
    line-height: 1.45;
}

/* "Ver servicios" + flecha en círculo; en celular solo la flecha (el patrón ya se entiende). */
.services-row__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.services-row__cta-text {
    color: var(--salinas-black, #171717);
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    transition: color .2s ease;
}

.services-row:hover .services-row__cta-text {
    color: var(--salinas-red, #c8272f);
}

/* Flecha en círculo: se vuelve roja al pasar el cursor. */
.services-row__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f1f2f5;
    color: var(--salinas-black, #171717);
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.services-row:hover .services-row__title {
    color: var(--salinas-red, #c8272f);
}

.services-row:hover .services-row__go {
    background: var(--salinas-red, #c8272f);
    color: #ffffff;
    transform: translateX(3px);
}

/* Servicio por lanzar: una sola línea bajo las tarjetas. */
.services-soon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 20px 0 0;
    color: var(--salinas-text, #3d3d40);
    font-size: 17px;
}

.services-soon a {
    color: #17834a;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Franja de sucursales ---------- */

.services-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 24px 28px;
}

.services-band__title {
    margin: 0;
    color: var(--salinas-black, #171717);
    font-size: 24px;
    font-weight: 800;
}

.services-band__hours {
    margin: 4px 0 0;
    color: var(--salinas-gray, #6f6f72);
    font-size: 17px;
}

.services-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---------- Detalle: presentación ---------- */

.services-header--detail {
    padding: 40px 0 44px;
}

/* Escritorio: foto a la izquierda, presentación a la derecha. */
.service-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas:
        "media intro"
        "media details";
    grid-template-rows: auto 1fr;
    gap: 18px 40px;
    align-items: start;
}

.service-hero__intro {
    grid-area: intro;
}

/* Mismo título que el de /servicios, Sucursales y Acerca de. */
.service-hero__intro .services-title {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
}

.service-hero__intro .salinas-subtitle {
    margin-top: 8px;
    color: #55575b;
    font-size: 18px;
}

.service-hero__intro .service-badge {
    margin-bottom: 10px;
}

.service-hero__soon {
    margin: 12px 0 0;
    color: var(--salinas-text, #3d3d40);
    font-size: 16px;
    line-height: 1.55;
}

.service-hero__media {
    grid-area: media;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--salinas-surface-radius, 11px);
    background: var(--salinas-gray-light, #f3f3f3);
}

.service-hero__media picture,
.service-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-hero__details {
    grid-area: details;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.service-promo {
    padding: 18px 20px 20px;
}

.service-promo__title {
    margin: 10px 0 0;
    color: var(--salinas-black, #171717);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
}

.service-promo__price {
    margin: 4px 0 0;
    font-size: 30px;
}

.service-promo__conditions {
    margin: 10px 0 12px;
    padding-left: 18px;
    color: var(--salinas-text, #3d3d40);
    font-size: 17px;
    line-height: 1.5;
}

.service-promo__conditions li {
    margin: 0 0 4px;
    list-style: disc;
    line-height: 1.5;
}

.service-promo__conditions li::marker {
    color: var(--salinas-gray, #6f6f72);
}

/* Argumento principal (por ejemplo, "instalación incluida"): tarjeta blanca con la palomita roja de las listas. */
.service-highlight {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 14px 18px;
    border: 1px solid #e6e7ec;
    border-radius: 12px;
    background: #ffffff;
    color: var(--salinas-black, #171717);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

.service-highlight svg {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--salinas-red, #c8272f);
}

/* Buscador de llantas y enlace a los precios del mes (Llantera). */
.service-hero__finder {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

.service-hero__prices {
    color: var(--salinas-black, #171717);
    font-size: 16px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.service-hero__prices:hover {
    color: var(--salinas-red, #c8272f);
}

.service-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---------- Detalle: contenido ---------- */


.services-section--tight {
    padding-top: 0;
}

/* Venta de refacciones en mostrador: una franja con su botón. */
.service-parts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    padding: 20px 28px;
}

.service-parts__title {
    margin: 0;
    color: var(--salinas-black, #171717);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
}

.service-parts__text {
    margin: 4px 0 0;
    color: #55575b;
    font-size: 17px;
    line-height: 1.45;
}

/* Lista completa de la categoría: grupos en columnas dentro de una tarjeta. */
.service-catalog {
    padding: 26px 28px 18px;
}

.service-catalog__groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px 32px;
}

.service-catalog__title {
    margin: 0 0 10px;
    color: var(--salinas-black, #171717);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
}

.service-panel {
    padding: 24px 26px;
}

.service-panel__title {
    margin: 0 0 14px;
    color: var(--salinas-black, #171717);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
}

.service-list {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--salinas-text, #3d3d40);
    font-size: 17px;
    line-height: 1.5;
}

.service-list li {
    position: relative;
    margin: 0 0 8px;
    line-height: 1.5;
    padding-left: 20px;
}

.service-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--salinas-gray, #6f6f72);
}

.service-list--check li::before {
    left: 2px;
    top: 0.35em;
    width: 6px;
    height: 10px;
    border: solid var(--salinas-red, #c8272f);
    border-width: 0 2px 2px 0;
    border-radius: 0;
    background: none;
    transform: rotate(45deg);
}


.service-prices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.service-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 20px 24px 22px;
    text-align: center;
}

.service-price__vehicle {
    margin: 0;
    color: var(--salinas-black, #171717);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
}

/* "desde" arriba, en gris y pequeño; el precio abajo, rojo y grande. */
.service-price__amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 4px 0 0;
}

.service-price__amount .salinas-price__from {
    font-size: 15px;
}

.service-price__amount .salinas-price {
    font-size: 36px;
}

.service-price__quote {
    display: inline-block;
    margin-top: 12px;
    font-size: 16px;
}

/* Sucursales: título con horario y estado; una fila por sucursal. */
.service-branches__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 24px;
    margin-bottom: 16px;
}

.service-branches__head .salinas-section-title {
    margin: 0;
}

.service-branches__hours {
    margin: 0;
    color: #55575b;
    font-size: 16px;
}

.service-branches__status {
    color: #5f6368;
    font-weight: 700;
}

.service-branches__status--open {
    color: #1d7a35;
}

.service-branches {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

.service-branch {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 18px;
    padding: 16px 24px;
}

.service-branch + .service-branch {
    border-top: 1px solid #ebecf0;
}

/* Mismo número rojo que en la página de Sucursales. */
.service-branch__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--salinas-red, #c8272f);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
}

.service-branch__name {
    margin: 0;
    color: var(--salinas-black, #171717);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
}

.service-branch__ref {
    margin: 2px 0 0;
    color: #55575b;
    font-size: 15px;
    line-height: 1.4;
}

.service-branch__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.service-branch__map {
    color: var(--salinas-black, #171717);
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.service-branch__map:hover {
    color: var(--salinas-red, #c8272f);
}

.service-faq,
.services-page .faq-list {
    width: 100%;
    max-width: none;
    margin: 0;
}

.service-related {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.service-related__item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    overflow: hidden;
    padding: 10px;
    color: var(--salinas-black, #171717);
    text-decoration: none;
}

.service-related__media {
    flex: 0 0 84px;
    height: 84px;
    overflow: hidden;
    border-radius: var(--salinas-badge-radius, 6px);
    background: var(--salinas-gray-light, #f3f3f3);
}

.service-related__media picture,
.service-related__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-related__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    font-size: 18px;
}

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

.service-related__item:hover .service-related__more {
    color: var(--salinas-red, #c8272f);
}

/* ---------- Barra fija de contacto (solo celular) ---------- */

.services-sticky {
    display: none;
}

/* ---------- Responsivo ---------- */

@media (max-width: 1199.98px) {

}

@media (max-width: 991.98px) {
    .services-section {
        padding: 40px 0;
    }

    /* Celular y tableta: título y beneficio, luego foto, luego promoción y contacto. */
    .service-hero {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "intro"
            "media"
            "details";
        grid-template-rows: auto;
        gap: 18px;
    }

    .service-related {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .services-header {
        padding: 24px 0 4px;
    }

    .services-header__intro .services-title,
    .service-hero__intro .services-title {
        font-size: 28px;
    }

    .services-page .salinas-section-title {
        font-size: 24px;
    }

    .services-section {
        padding: 32px 0;
    }

    /* Celular: foto a la izquierda; nombre y línea al lado; flecha a la derecha. */
    .services-row {
        grid-template-columns: 72px minmax(0, 1fr) auto;
        gap: 4px 14px;
        padding: 14px 16px 14px 14px;
    }

    .services-row__photo {
        grid-row: 1 / span 2;
        width: 72px;
        height: 72px;
    }

    .services-row__name,
    .services-row__text {
        grid-column: 2;
    }

    .services-row__cta {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .services-row__cta-text {
        display: none;
    }

    .services-row__go {
        width: 38px;
        height: 38px;
    }

    .services-row__title {
        font-size: 21px;
    }

    .services-row__text {
        font-size: 16px;
    }

    .services-promos {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .services-promo {
        padding: 18px 20px;
    }

    .services-promo__price {
        font-size: 34px;
    }

    .services-band {
        padding: 20px;
    }

    .services-band__actions,
    .services-band__actions > a {
        width: 100%;
    }

    .service-hero__actions > a {
        flex: 1 1 100%;
    }

    .service-panel,
    .service-catalog {
        padding: 20px;
    }

    .service-panel__title {
        font-size: 22px;
    }

    .service-prices {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .service-price {
        padding: 14px 18px 16px;
    }

    .service-price__amount .salinas-price {
        margin-top: -2px;
        font-size: 30px;
    }

    /* Celular: número y nombre arriba; botones debajo, a lo ancho. */
    .service-branch {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 16px 18px;
    }

    .service-branch__actions {
        grid-column: 1 / -1;
    }

    .service-branch__actions .contact-call {
        flex: 1 1 0;
    }

    /* Barra de contacto fija; el cuerpo deja espacio para no tapar el pie. */
    .services-body {
        padding-bottom: 74px;
    }

    .services-sticky {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 90;
        display: flex;
        gap: 10px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--salinas-surface-border, #ebebeb);
        background: #ffffff;
        box-shadow: 0 -4px 16px rgba(17, 17, 17, 0.08);
    }

    .services-sticky > .contact-wa {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0 14px;
    }

    .services-sticky > .contact-call {
        flex: 0 0 auto;
        padding: 0 16px;
    }
}