/* Tarjetas de servicios con foto, con el CSS de pintor.uy (23/10/2026, tomado de electricistasmontevideo.com): a la izquierda la foto que se funde
   en blanco hacia el texto; tarjeta blanca con sombra recta sin desenfoque que pasa a gris oscuro al pasar el mouse, y toda la tarjeta clickeable.
   Una columna en celular; dos desde 900 px. */
.grilla-servicios{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:16px}
.grilla-servicios__item{position:relative;isolation:isolate;display:flex;flex-direction:row;align-items:stretch;margin:0;padding:0;background:#fff;border:1px solid #E0E0E0;border-radius:16px;box-shadow:5px 5px 0 #DADADA;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.grilla-servicios__item:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 #2B2B2E;border-color:#2B2B2E}
.grilla-servicios__item:focus-within{outline:3px solid #D7262B;outline-offset:3px}
.grilla-servicios__foto{position:relative;z-index:-1;flex:0 0 44%;min-height:150px;overflow:hidden;background:#F5F5F5}
.grilla-servicios__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.grilla-servicios__item:hover .grilla-servicios__foto img{transform:scale(1.05)}
/* La foto se funde en blanco hacia el texto de la derecha */
.grilla-servicios__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0) 48%,rgba(255,255,255,.8) 82%,#fff 98%);pointer-events:none}
.grilla-servicios__txt{align-self:center;margin-left:-6%;padding:18px 20px 20px 0;font-family:var(--f);font-size:clamp(.875rem,.85rem + .1vw,.9375rem);line-height:1.55;color:#545454}
.grilla-servicios__item--sinfoto .grilla-servicios__txt{margin-left:0;padding:22px 20px}
.grilla-servicios__txt h3{margin:0 0 6px;font-family:var(--cab-f-titulos);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.25rem,1.15rem + .4vw,1.5rem);line-height:1.15;color:#2B2B2E}
.grilla-servicios__txt h3 a{color:inherit;text-decoration:none}
.grilla-servicios__txt h3 a::before{content:"";position:absolute;inset:0;z-index:2;border-radius:16px}
.grilla-servicios__txt h3 a::after{content:"\00a0\2192";position:relative;left:0;color:#A81C20;font-family:var(--f);white-space:nowrap;transition:left .2s ease}
.grilla-servicios__item:hover .grilla-servicios__txt h3 a::after{left:4px}
.grilla-servicios__txt h3 a:focus-visible{outline:0}
.grilla-servicios__txt p{margin:0;font-size:inherit;line-height:inherit;color:inherit}
@media (max-width:639px){
  .grilla-servicios{gap:14px}
  .grilla-servicios__item{box-shadow:4px 4px 0 #DADADA}
  .grilla-servicios__foto{min-height:140px}
  .grilla-servicios__txt{margin-left:-8%;padding:14px 14px 16px 0}
  .grilla-servicios__txt h3{font-size:1.125rem}
}
@media (min-width:640px){.grilla-servicios__foto{flex-basis:40%;min-height:180px}}
@media (min-width:900px){
  .grilla-servicios{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .grilla-servicios__foto{flex-basis:44%;min-height:210px}
}
@media (prefers-reduced-motion:reduce){.grilla-servicios__item,.grilla-servicios__foto img,.grilla-servicios__txt h3 a::after{transition:none}.grilla-servicios__item:hover,.grilla-servicios__item:hover .grilla-servicios__foto img{transform:none}}

/* Propio de volquetasmontevideo.com: encabezado alineado a la izquierda y el botón de cierre separado de la grilla */
.servicios .servicios__header{margin-bottom:28px}
.servicios .servicios__cta{display:flex;justify-content:flex-start;margin-top:28px}
.servicios .servicios__cta-btn{display:inline-flex;align-items:center;gap:.5em}
.servicios .servicios__cta-btn .icon{width:1.15em;height:1.15em}
.grilla-servicios__item{list-style:none}