/* =========================================================
   ASEGURAN/SA · CONTENT SURFACE GLOBAL
   Fondo común para contenido interno
========================================================= */

.content-surface {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    background: radial-gradient( circle at 86% 14%, rgba(218, 174, 73, 0.22), transparent 30% ), radial-gradient( circle at 10% 82%, rgba(255, 247, 218, 0.72), transparent 36% ), linear-gradient( 135deg, #faf6eb 0%, #f3ead2 42%, #ead9aa 72%, #f8f2df 100% );
}


    /* =========================================================
   LÍNEAS DECORATIVAS
========================================================= */

    .content-surface::before {
        position: absolute;
        inset: -18%;
        z-index: -2;
        content: "";
        pointer-events: none;
        opacity: 0.30;
        background: radial-gradient( ellipse at 88% 62%, transparent 0%, transparent 43%, rgba(199, 142, 25, 0.15) 44%, transparent 45% ), radial-gradient( ellipse at 88% 62%, transparent 0%, transparent 50%, rgba(18, 74, 58, 0.07) 51%, transparent 52% );
        transform: rotate(-7deg) scale(1.15);
    }


    /* =========================================================
   TEXTURA
========================================================= */

    .content-surface::after {
        position: absolute;
        inset: 0;
        z-index: -1;
        content: "";
        pointer-events: none;
        opacity: 0.065;
        background-image: radial-gradient( circle, rgba(108, 80, 24, 0.48) 1px, transparent 1.1px );
        background-size: 29px 29px;
        mask-image: radial-gradient( circle at 82% 28%, black, transparent 58% );
        -webkit-mask-image: radial-gradient( circle at 82% 28%, black, transparent 58% );
    }


    /* =========================================================
   CONTENIDO
========================================================= */

    .content-surface > * {
        position: relative;
        z-index: 1;
        min-width: 0;
    }


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 920px) {

    .content-surface::before {
        inset: -12%;
        opacity: 0.24;
        transform: rotate(-5deg) scale(1.08);
    }

    .content-surface::after {
        opacity: 0.05;
        background-size: 27px 27px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .content-surface {
        background: radial-gradient( circle at 92% 10%, rgba(218, 174, 73, 0.16), transparent 28% ), radial-gradient( circle at 8% 88%, rgba(255, 247, 218, 0.58), transparent 34% ), linear-gradient( 145deg, #faf6eb 0%, #f4ecd7 48%, #efe1bb 100% );
    }

        .content-surface::before {
            inset: -8%;
            opacity: 0.18;
            transform: none;
        }

        .content-surface::after {
            opacity: 0.035;
            background-size: 25px 25px;
        }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .content-surface::before {
        opacity: 0.14;
    }

    .content-surface::after {
        opacity: 0.025;
    }
}


/* =========================================================
   REDUCED MOTION / RENDERING
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .content-surface::before {
        transform: none;
    }
}