/* ==========================================================================
   Calculadora de Ración Diaria — Frontend
   La calculadora en sí (#pamipet-calculator-app) se apoya en las utilidades
   de Tailwind ya compiladas en frontend-wc-mascotas-tailwind.css. Este
   archivo solo cubre el encabezado previo al widget (fuera del x-data).
   ========================================================================== */

.wcm-calc__header {
    font-family: 'ABeeZee', sans-serif;
}

.wcm-calc__title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: var(--pamipet-dark, #1E293B);
}

.wcm-calc__lead {
    font-size: 14px;
    line-height: 21px;
    color: var(--grey-600, #757575);
}

/* CTA "Calcula la ración" -- link de texto corto para páginas de producto,
   debajo de la descripción, que lleva a la pestaña de la calculadora sin
   duplicar el widget completo ahí mismo. Deliberadamente sutil: solo texto
   + ícono, sin fondo ni borde de botón. */
.wcm-calc-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--primary-blue, #1c34c7);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.3;
    cursor: pointer;
    transition: opacity .2s ease;
}

.wcm-calc-cta:hover,
.wcm-calc-cta:focus-visible {
    opacity: .75;
}

.wcm-calc-cta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(28, 52, 199, 0.1);
    color: inherit;
    flex-shrink: 0;
}