/* =========================================
   AICO — Servicios
   Hoja de página. Se carga DESPUÉS de style.css.
   .split, .narrow y .page-cta vienen del sistema.
   ========================================= */

/* -----------------------------------------
   Fondo decorativo (mismo criterio que ¿Quiénes somos?)
   ----------------------------------------- */
.top-shell>.deco-blue {
    inset: 0 0 auto 0;
    height: 1400px;
}

.deco-wash {
    position: absolute;
    inset: auto 0 0 0;
    height: 1800px;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(55% 38% at 100% 72%, rgba(27, 75, 255, .16), transparent 70%),
        radial-gradient(45% 30% at 0% 32%, rgba(33, 58, 120, .14), transparent 70%);
}

/* -----------------------------------------
   Panel de modelos de entrega
   ----------------------------------------- */
.delivery-models {
    position: relative;
    z-index: 1;
    padding-bottom: var(--sp-10);
}

.models-panel {
    background: linear-gradient(180deg, var(--navy-900) 0%, var(--primary-blue) 100%);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-6) var(--sp-6);
    color: var(--bg-white);
    box-shadow: var(--shadow-dark);
}

.models-logo {
    width: 150px;
    margin: 0 auto var(--sp-6);
}

.models-logo img {
    width: 100%;
    height: auto;
    border-radius: var(--r-md);
}

/* Dentro del panel las filas respiran menos que en una página de texto */
.models-panel .split+.split {
    margin-top: var(--sp-6);
}

.models-panel .split-media img {
    aspect-ratio: 16 / 10;
    box-shadow: none;
    border-radius: var(--r-sm);
}

/* -----------------------------------------
   Catálogo — reutiliza .benefit-card con panel gris-azul
   ----------------------------------------- */
.service-catalog {
    position: relative;
    z-index: 1;
    padding-bottom: var(--sp-10);
}

.catalog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
}

.benefit-card--service {
    background: var(--bg-white);
    padding: var(--sp-2);
}

.benefit-card--service .card-img-wrapper {
    height: 300px;
}

.benefit-card--service .card-body {
    background: var(--bg-panel);
    margin-right: var(--sp-6);
}

.benefit-card--service .card-body h3 {
    font-size: var(--fs-lg);
    color: var(--orange-700);
    margin-bottom: var(--sp-1);
}

.benefit-card--service .card-body p {
    color: var(--text-main);
    line-height: 1.6;
}

/* -----------------------------------------
   Responsive
   ----------------------------------------- */
@media (max-width: 992px) {
    .models-panel {
        padding: var(--sp-3) var(--sp-4) var(--sp-4);
    }

    .models-logo {
        width: 120px;
        margin-bottom: var(--sp-4);
    }

    /* Dentro del panel las fotos no se acotan: el panel ya es estrecho */
    .models-panel .split-media {
        max-width: none;
    }

    .benefit-card--service .card-img-wrapper {
        height: 240px;
    }

    .benefit-card--service .card-body {
        margin-right: var(--sp-4);
    }

    .catalog-grid {
        gap: var(--sp-3);
    }
}

@media (max-width: 768px) {
    .delivery-models,
    .service-catalog {
        padding-bottom: var(--sp-8);
    }

    .models-panel {
        padding: var(--sp-3);
    }

    .catalog-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-2);
    }

    /* Igual que en la home: bajo 768px la tarjeta se desuperpone */
    .benefit-card--service {
        padding: 0;
    }

    .benefit-card--service .card-img-wrapper {
        height: 200px;
    }

    .benefit-card--service .card-body {
        margin-right: 0;
    }
}