/*V 2.0 Shared Service List - subservicios de las 5 paginas de servicio en rejilla de tarjetas con foto de fondo (Eco, 04/11): 3 arriba y 3 abajo, o 3 y 2 si hay 5; nombre y texto sobre la foto y flecha solo si tiene pagina propia. Todo cuelga de .service-list--tiles, asi que en las demas paginas no hace nada.*/

/* === 1. Rejilla === */
.service-list--tiles .service-list__items {display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:20px; max-width:1160px; margin:0 auto; padding:0 20px;}
.service-list--tiles .service-list__items:has(> :nth-child(5):last-child) .service-list__item:nth-child(n+4) {grid-column:span 3;}

/* === 2. Tarjeta y foto de fondo === */
.service-list--tiles .service-list__item {position:relative; grid-column:span 2; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; min-height:340px; padding:26px; overflow:hidden; border-radius:16px; text-align:left; background:var(--primary-black); isolation:isolate;}
.service-list--tiles .service-list__thumb {display:block; position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease;}
.service-list--tiles .service-list__item:hover .service-list__thumb {transform:scale(1.04);}

/* === 3. Texto: el velo va en este bloque y empieza siempre encima del titulo, mida lo que mida el texto === */
.service-list--tiles .service-list__body {display:block; margin:0 -26px -26px; padding:72px 26px 26px; background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.74) 66px, rgba(0, 0, 0, 0.9) 100%);}
.service-list--tiles .service-list__body h3 {margin:0; font-size:22px; line-height:1.25; font-weight:700; color:var(--primary-white);}
.service-list--tiles .service-list__body h3 a {color:inherit; text-decoration:none;}
.service-list--tiles .service-list__body p {margin:8px 0 0; font-size:14px; line-height:1.55; color:rgba(255, 255, 255, 0.85); transition:color 0.3s ease;}
.service-list--tiles .service-list__item:hover .service-list__body p {color:var(--primary-white);}
.service-list--tiles .service-list__body p strong {color:var(--primary-white);}
.service-list--tiles .service-list__body p a {font-weight:600; color:var(--primary-white); text-decoration:underline;}
.service-list--tiles .card-link:focus-visible::after {outline:3px solid var(--primary-green); outline-offset:-3px; border-radius:16px;}

/* === 4. Flecha: solo en las tarjetas con pagina propia === */
.service-list--tiles .service-list__arrow {position:absolute; top:20px; right:20px; display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; border:1.5px solid var(--primary-green); background:var(--primary-green); color:var(--primary-black); font-size:16px; transition:background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;}
.service-list--tiles .service-list__item:hover .service-list__arrow {background:var(--primary-white); border-color:var(--primary-white); transform:rotate(-45deg);}

/* === 5. Boton de llamar de la tarjeta de emergencia === */
.service-list__call {display:inline-flex; align-items:center; gap:10px; min-height:48px; margin-top:16px; padding:12px 26px; border-radius:999px; background:var(--primary-green); color:var(--primary-black); font-size:15px; font-weight:700; text-decoration:none; transition:background 0.3s ease, transform 0.3s ease;}
.service-list__call:hover {background:var(--primary-white); transform:translateY(-2px);}
.service-list__call:focus-visible {outline:3px solid var(--primary-white); outline-offset:3px;}

/* === 6. Tablet y celular === */
@media (max-width:991px) {.service-list--tiles .service-list__items {grid-template-columns:repeat(2, minmax(0, 1fr));}
 .service-list--tiles .service-list__item {grid-column:span 1;}
 .service-list--tiles .service-list__items:has(> :nth-child(5):last-child) .service-list__item:nth-child(n+4) {grid-column:span 1;}
 .service-list--tiles .service-list__items:has(> :nth-child(5):last-child) .service-list__item:nth-child(5) {grid-column:span 2;}
}
@media (max-width:640px) {.service-list--tiles .service-list__items {grid-template-columns:minmax(0, 1fr); gap:14px; padding:0 16px;}
 .service-list--tiles .service-list__items:has(> :nth-child(5):last-child) .service-list__item:nth-child(5) {grid-column:span 1;}
 .service-list--tiles .service-list__item {min-height:280px; padding:22px 20px;}
 .service-list--tiles .service-list__body {margin:0 -20px -22px; padding:72px 20px 22px;}
 .service-list--tiles .service-list__body h3 {font-size:20px;}
}