:root {
    --cw-hc-color-border: #ca4638;
    --cw-hc-color-text: #1e1e1e;
    --cw-hc-color-accent: #f1453d;
    --cw-hc-color-bg: #ffffff;
    --cw-hc-color-hover-wa: rgba(34, 206, 67, .08);
    --cw-hc-color-hover-tel: rgba(202, 70, 56, .08);
    --cw-hc-font-family: 'Poppins', sans-serif;
    --cw-hc-font-weight: 600;
    --cw-hc-font-size: 13px;
    --cw-hc-line-height: normal;
    --cw-hc-box-height: 38px;
    --cw-hc-box-pad-x: 15px;
    --cw-hc-border-radius: 13px;
    --cw-hc-border-width: 1px;
    --cw-hc-row-gap: 1px;
    --cw-hc-gap-wa: 4px;
    --cw-hc-gap-phone: 3px;
    --cw-hc-icon-wa: 14px;
    --cw-hc-icon-phone-w: 15px;
    --cw-hc-icon-phone-h: 16px;
}

/* ── Reset mínimo ────────────────────────────────────────────────────────────── */
.cw-hc-box *,
.cw-hc-box *::before,
.cw-hc-box *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Section: el botón/caja con borde y background ──────────────────────────── */
.cw-hc-box {
    display:         inline-flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             var(--cw-hc-row-gap);
    min-height:      var(--cw-hc-box-height);  /* mínimo 50px, crece si hace falta */
    height:          auto;
    padding:         1px 0px;
    min-width:       175px;
    border:          var(--cw-hc-border-width) solid var(--cw-hc-color-border);
    border-radius:   var(--cw-hc-border-radius);
    background:      var(--cw-hc-color-bg);
    overflow:        visible;   /* no cortar filas */
}

/* ── Filas de contacto: cada <a> es clicable de forma independiente ─────────── */
.cw-hc-row {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--cw-hc-gap-wa);
    text-decoration: none;
    color:           var(--cw-hc-color-text);
    cursor:          pointer;
    border-radius:   8px;
    padding:         2px 5px;
    transition:      background-color 0.18s ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}

.cw-hc-row--phone { gap: var(--cw-hc-gap-phone); }

/* Hover independiente por fila */
.cw-hc-row--wa:hover,
.cw-hc-row--wa:focus-visible {
    background-color: var(--cw-hc-color-hover-wa);
    outline:          none;
}

.cw-hc-row--phone:hover,
.cw-hc-row--phone:focus-visible {
    background-color: var(--cw-hc-color-hover-tel);
    outline:          none;
}

/* Leve escala al hacer clic (feedback táctil) */
.cw-hc-row:active {
    transform: scale(0.97);
}

/* ── Iconos ──────────────────────────────────────────────────────────────────── */
.cw-hc-icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    line-height:     0;
}

.cw-hc-icon svg { display: block; }

/* ── Texto numérico ──────────────────────────────────────────────────────────── */
.cw-hc-number {
    font-family:  var(--cw-hc-font-family)  !important;
    font-weight:  var(--cw-hc-font-weight)  !important;
    font-size:    var(--cw-hc-font-size)    !important;
    line-height:  1.2                       !important;
    color:        var(--cw-hc-color-text)   !important;
    white-space:  nowrap;
    display:      inline                    !important;
    visibility:   visible                   !important;
    opacity:      1                         !important;
}

/* ── "(Línea gratuita)" en rojo ──────────────────────────────────────────────── */
.cw-hc-free {
    color:       var(--cw-hc-color-accent)  !important;
    font-family: var(--cw-hc-font-family)   !important;
    font-weight: var(--cw-hc-font-weight)   !important;
    font-size:   var(--cw-hc-font-size)     !important;
    line-height: 1.2                        !important;
    display:     inline                     !important;
    visibility:  visible                    !important;
    opacity:     1                          !important;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --cw-hc-font-size:    10px;
        --cw-hc-box-pad-x:    10px;
        --cw-hc-icon-phone:   16px;
    }

    .cw-hc-wrapper {
        width: 100%;
        justify-content: center;
        padding: 4px 8px;
    }

    .cw-hc-row {
        padding: 1px 3px;
    }

    .cw-hc-box {
        min-width: 0;
        width: 100%;
        max-width: 260px;
        padding: 2px 0px;
    }
}

@media (max-width: 360px) {
    :root {
        --cw-hc-font-size:    11px;
        --cw-hc-box-pad-x:    10px;
        --cw-hc-icon-phone:   16px;
    }
}