/* ═══════════════════════════════════════════════════════════════
   Svenco Icon Card — Estilos base del widget
   Archivo: /wp-content/themes/wpresidence-child/css/svenco-icon-card.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Contenedor principal ──────────────────────────────────── */
.sic-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

    /* Animacion de hover — la velocidad la sobreescribe Elementor */
    transition: transform 0.35s cubic-bezier(0.34, 1.15, 0.64, 1);
}

/* ── Circulo del icono ─────────────────────────────────────── */
/*
   El tamano y el margin-bottom negativo lo gestiona Elementor
   a traves del control "Tamano del circulo".

   Logica del solapamiento:
   - margin-bottom: calc(SIZE * -0.5)
     → la mitad del circulo queda "dentro" de la tarjeta
   - La tarjeta usa padding-top: calc(SIZE * 0.5 + 24px)
     → el contenido empieza justo debajo del circulo
*/
.sic-icon-wrap {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;         /* Siempre encima de la tarjeta */
    flex-shrink: 0;

    /* Transicion para el efecto scale en hover */
    transition: transform 0.35s cubic-bezier(0.34, 1.15, 0.64, 1),
                box-shadow 0.3s ease;
}

/* Icono se agranda levemente al hacer hover sobre la tarjeta */
.sic-wrap:hover .sic-icon-wrap {
    transform: scale(1.07);
}

/* ── Recuadro / tarjeta ────────────────────────────────────── */
.sic-box {
    width: 100%;
    position: relative;
    z-index: 1;         /* Debajo del circulo */
    text-align: center;
    box-sizing: border-box;

    /* Transicion de color y sombra en hover */
    transition: background-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* El padding (relleno) lo gestiona Elementor via controles */
.sic-box-content {
    /* placeholder — rellenos definidos por Elementor */
}

/* ── Titulo ────────────────────────────────────────────────── */
.sic-title {
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.3;
}

/* ── Descripcion ───────────────────────────────────────────── */
.sic-desc {
    margin: 0;
    line-height: 1.65;
}

/* ── Imagen dentro del circulo ─────────────────────────────── */
.sic-icon-wrap img {
    object-fit: contain;
    display: block;
}

/* ── SVG de Font Awesome renderizado por Elementor ─────────── */
.sic-icon-wrap svg {
    display: block;
}