/* ============================================================
   Illustrations — shared primitives
   Todas las ilustraciones de servicios comparten estas clases base.
   Los estilos de cada ilustración están en su propio partial PHP.
   ============================================================ */

.illu {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
    font-family: 'Nunito', sans-serif;
    color: #fbfbfb;
}

.illu .grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

.illu .grid-bg.warm {
    background-image:
        linear-gradient(rgba(252,198,28,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(252,198,28,.06) 1px, transparent 1px);
}

.illu .glow {
    position: absolute;
    pointer-events: none;
    background: radial-gradient(circle, rgba(252,198,28,.22), transparent 60%);
    filter: blur(8px);
}

/* Sizing override when inside .card-image (desktop) */
.card-image .illu {
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

/* Sizing override when inside .card-bg-image (mobile) */
.card-bg-image .illu {
    border-radius: 0;
    width: calc(100% / 0.65);
    height: calc(100% / 0.65);
    transform: scale(0.65);
    transform-origin: top left;
}