/* ============================================================
   MI NEGOCIO DIGITAL — Fotos en «Soluciones que impulsan tu negocio»
   La foto va arriba de cada tarjeta y el ícono queda montado sobre ella.
   Fotos de Unsplash (licencia libre) en images/servicios/.
   ============================================================ */
.svc-foto {
    margin: -2rem -2rem .25rem;
    height: 180px;
    overflow: hidden;
    position: relative;
}
.svc-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.svc-foto::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(25, 41, 46, 0) 45%, rgba(25, 41, 46, .35) 100%);
}
.svc-card:hover .svc-foto img { transform: scale(1.05); }
.svc-foto + .svc-icon-wrap {
    margin-top: -46px; position: relative; z-index: 1;
    background: #fff; box-shadow: 0 6px 18px rgba(25, 41, 46, .15);
}
.svc-card--featured .svc-foto + .svc-icon-wrap { background: #1f3a40; color: #fff; }
.svc-card .svc-number { z-index: 1; color: rgba(255, 255, 255, .85); text-shadow: 0 2px 8px rgba(0, 0, 0, .35); }

/* 7.ª tarjeta a todo el ancho: la foto ocupa una columna a la izquierda */
@media (min-width: 1024px) {
    .svc-grid > .svc-card:last-child:nth-child(3n + 1) { grid-template-columns: 300px auto 1fr 1fr; }
    .svc-grid > .svc-card:last-child:nth-child(3n + 1) > .svc-foto {
        grid-column: 1; grid-row: 1 / -1; align-self: stretch; height: auto; min-height: 240px; margin: -2rem 0 -2rem -2rem;
    }
    .svc-grid > .svc-card:last-child:nth-child(3n + 1) > .svc-icon-wrap { grid-column: 2; margin-top: 0; }
    .svc-grid > .svc-card:last-child:nth-child(3n + 1) > .svc-title,
    .svc-grid > .svc-card:last-child:nth-child(3n + 1) > .svc-desc { grid-column: 3; }
    .svc-grid > .svc-card:last-child:nth-child(3n + 1) > :is(ul, .svc-price, a, .btn) { grid-column: 4; }
}

/* Logo de Euro: el archivo viene sin márgenes (300x168) y los demás traen mucho aire (1024x1024),
   así que con la misma altura se veía el doble de grande. Se fuerza a la escala de los otros. */
.logo-ticker-track .client-logo[src*="euro-supermercado"] {
    height: 46px !important;
    max-width: 96px !important;
    align-self: center;
}

/* Logos ya recortados (sin aire alrededor): misma escala visual que los demás */
.logo-ticker-track .client-logo--recortado {
    height: 48px !important;
    max-width: 130px !important;
    align-self: center;
}