/* SupportContactCard.css — Tarjeta oscura de "Asistencia técnica" de la ficha de producto. Nodos
   2611:25959 (PC), 2611:26792 (tablet) y 2611:26509 (mobile). Tipografía base: site.css.

   Ícono en círculo, título, teléfono, horario y botón a todo el ancho, centrados. PC: título
   semibold 13, teléfono bold 28 en mayúsculas, botón regular 16. TABLET y MOBILE: título y botón
   bold 12.5, teléfono black 24, horario 11.

   SIN DESBORDES: los textos envuelven (overflow-wrap) aunque no tengan espacios; nada usa nowrap. */

/* --- Sección. --- */
/* Su lugar es la zona lateral de Product Detail Hero, que pone los márgenes (ahí el relleno se anula
   desde ProductDetailHero.css). Suelta en una columna del layout (col-md-*, 12px de gutter) lleva su
   propio relleno para no pegarse a los bordes: 48px con el gutter (36 + 12), como el hero. */
.SupportContactCard {
    width: 100%; /* Ancho de su columna. */
    padding: 0 36px 24px;
    box-sizing: border-box; /* El relleno entra en el ancho. */
    font-family: var(--font-brand); /* Pila de marca. */
}

    .SupportContactCard *,
    .SupportContactCard *::before,
    .SupportContactCard *::after {
        box-sizing: border-box; /* Medidas predecibles. */
    }

    .SupportContactCard p {
        margin: 0; /* El espaciado lo pone la tarjeta. */
    }

/* --- Tarjeta. --- */
.SupportContactCard-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* Separación del nodo. */
    padding: 20px; /* Relleno del nodo. */
    border-radius: 6px; /* Esquinas del nodo. */
    background-color: #454f63; /* Gris azulado del nodo. */
    color: #ffffff;
    text-align: center;
}

/* Círculo translúcido del ícono (34px). Sin ícono queda vacío, como el diseño. */
.SupportContactCard-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.22); /* Blanco translúcido del nodo. */
}

    .SupportContactCard-icon img {
        display: block;
        width: 20px; /* El ícono dentro del círculo, con aire. */
        height: 20px;
        max-width: none; /* Anula el max-width de Bootstrap. */
        object-fit: contain; /* Sin deformar. */
    }

.SupportContactCard-title {
    max-width: 100%;
    font-size: 13px; /* Label/L2 del nodo. */
    font-weight: 600; /* Semibold. */
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.9);
    overflow-wrap: anywhere;
}

.SupportContactCard-phone {
    max-width: 100%;
    font-size: 28px; /* Display 4 del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.15;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff;
    overflow-wrap: anywhere;
}

.SupportContactCard-schedule {
    max-width: 100%;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.2px;
    color: rgba(255, 255, 255, 0.8);
    overflow-wrap: anywhere;
}

/* Botón celeste a todo el ancho que llama al teléfono. */
.SupportContactCard-button,
.SupportContactCard-button:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px 16px; /* Relleno vertical del nodo. */
    border-radius: 6px; /* Esquinas del nodo. */
    background-color: #429cde; /* Celeste del nodo. */
    color: #ffffff;
    font-size: 16px; /* Body/Default del nodo. */
    font-weight: 400;
    line-height: 1.6;
    text-decoration: none;
    overflow-wrap: anywhere; /* Un texto largo del editor envuelve. */
    transition: transform 0.2s ease-out;
}

    .SupportContactCard-button:hover,
    .SupportContactCard-button:focus-visible {
        color: #ffffff;
        text-decoration: none;
        transform: scale(1.03); /* Realce estándar de botones. */
    }

    .SupportContactCard-button:focus-visible {
        outline: 2px solid #ffffff; /* Visible sobre la tarjeta oscura. */
        outline-offset: 2px;
    }

/* --- TABLET: hasta 1024px (nodo 2611:26792). Textos más chicos; la tarjeta ocupa el ancho. --- */
@media (max-width: 1024px) {
    .SupportContactCard {
        padding: 0 20px 22px; /* 32px a los lados con el gutter de la columna, como el nodo. */
    }

    .SupportContactCard-title {
        font-size: 12.5px;
        font-weight: 700; /* Bold del nodo de tablet. */
        line-height: normal;
    }

    .SupportContactCard-phone {
        font-size: 24px;
        font-weight: 900; /* Black del nodo de tablet. */
        line-height: normal;
        letter-spacing: -0.24px;
        text-transform: none;
    }

    .SupportContactCard-schedule {
        font-size: 11px;
        line-height: normal;
        letter-spacing: 0;
    }

    .SupportContactCard-button,
    .SupportContactCard-button:visited {
        font-size: 12.5px;
        font-weight: 700; /* Bold del nodo de tablet. */
        line-height: normal;
    }
}

/* --- MOBILE: hasta 500px (nodo 2611:26509). Mismos textos que tablet; solo cambia el margen. --- */
@media (max-width: 500px) {
    .SupportContactCard {
        padding: 0 8px 18px; /* 20px a los lados con el gutter de la columna, como el nodo. */
    }
}

@media (prefers-reduced-motion: reduce) {
    .SupportContactCard-button {
        transition: none;
    }

    .SupportContactCard-button:hover,
    .SupportContactCard-button:focus-visible {
        transform: none;
    }
}