.header-contact-email {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffffff !important;
}

.header-contact-email:hover {
    color: #f8ca48 !important;
}

.header-contact-email__icon {
    flex: 0 0 18px;
}

.footer-business-email {
    color: #f8ca48 !important;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.footer-business-email:hover {
    color: #ffffff !important;
}

/*
 * Botones de contacto del sitio: solo dos estilos de WhatsApp y su par de "Llamar".
 * - .contact-wa: botón principal (uno por tarjeta o sección): contorno verde con fondo verde
 *   muy claro, para que no compita con precios y títulos.
 * - .contact-wa--sm: el mismo, más chico, para listas que lo repiten (tabla de precios, sucursales).
 * - .contact-call: "Llamar" con la misma forma, contorno negro.
 * El verde es más oscuro que el de WhatsApp para que se lea bien sobre blanco.
 * El botón flotante y /lp tienen su propio estilo a propósito.
 */
.contact-wa,
.contact-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 22px;
    border: 2px solid #1f9d55;
    border-radius: 999px;
    background: #f3fbf6;
    color: #157a42;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.contact-wa:hover,
.contact-wa:focus-visible {
    border-color: #17834a;
    background: #dff3e7;
    color: #126a39;
}

.contact-wa svg,
.contact-call svg {
    flex: 0 0 auto;
}

.contact-wa--sm,
.contact-call--sm {
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    font-size: 15px;
}

.contact-call {
    border-color: #171717;
    background: #ffffff;
    color: #171717;
}

.contact-call:hover,
.contact-call:focus-visible {
    border-color: #171717;
    background: #171717;
    color: #ffffff;
}

.contact-wa:focus-visible,
.contact-call:focus-visible {
    outline: 3px solid rgba(31, 157, 85, .35);
    outline-offset: 2px;
}

/* ui-rounded-system.css fuerza 11px en todos los <button> con !important: los botones de contacto que son <button> conservan su forma. */
button.contact-wa,
button.contact-call {
    border-radius: 999px !important;
}

/* Enlaces de WhatsApp dentro de un texto (respuestas de preguntas frecuentes): verdes, no rojos. */
.contact-wa-link {
    color: #157a42 !important;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-wa-link:hover {
    color: #17834a !important;
}

/* ---------- Barra fija de contacto (<x-barra-contacto>): solo en celular y tableta ----------
   "Atención por WhatsApp" y "Sucursales" del mismo tamaño. Reemplaza al botón flotante de WhatsApp,
   que en esas pantallas tapaba botones y repetía el WhatsApp. El cuerpo deja espacio para no tapar el pie. */
.barra-contacto {
    display: none;
}

@media (max-width: 991.98px) {
    body:has(.barra-contacto) {
        padding-bottom: 74px;
    }

    .barra-contacto {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 90;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 10px 8px 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);
    }

    /* Mitad y mitad: texto y ícono un poco más chicos para que "Atención por WhatsApp" quepa en un renglón; si el celular
       es más angosto (o tiene letra más grande), pasa a dos renglones en vez de cortarse. */
    .barra-contacto > a {
        min-width: 0;
        gap: 4px;
        padding: 0 4px;
        font-size: clamp(12px, 3.4vw, 15px);
        letter-spacing: -0.01em;
        line-height: 1.15;
        text-align: center;
        white-space: normal;
    }

    .barra-contacto > a svg {
        width: 16px;
        height: 16px;
    }

    /* Celulares angostos: sin el ícono (el botón ya es verde de WhatsApp) para que el texto quepa en un renglón. */
    @media (max-width: 419.98px) {
        .barra-contacto > a svg {
            display: none;
        }
    }

    .site-whatsapp-float {
        display: none !important;
    }

    /* Botón de "subir": arriba de la barra (antes quedaba encimado en ella, a 50 px del borde con la barra de 65 px)
       y más chico, para tapar menos "Ver llanta" y los "+" de las preguntas. */
    body:has(.barra-contacto) #scroll__top {
        right: 14px;
        bottom: calc(82px + env(safe-area-inset-bottom, 0px) + var(--privacy-consent-height, 0px));
        width: 36px;
        height: 36px;
    }

    body:has(.barra-contacto) #scroll__top svg {
        width: 18px;
    }
}