/* =========================================================
   SERVICIOS - INTERACCIÓN AISLADA
   Solo afecta servicios.php
   ========================================================= */
.section-cards .interactive-service-box{
  height: 318px;
  border: 1px solid rgba(33,77,36,.09);
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(33,77,36,.08);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  isolation: isolate;
}
.section-cards .interactive-service-box:hover{
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(33,77,36,.14);
  border-color: rgba(33,77,36,.16);
}
.section-cards .interactive-service-front{
  position: relative;
  z-index: 1;
}
.section-cards .service-image-wrapper{
  height: 210px;
}
.section-cards .service-image-wrapper::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:55%;
  background:linear-gradient(to top,rgba(20,48,25,.48),transparent);
  pointer-events:none;
}
.section-cards .service-image-wrapper img{
  transition:transform .55s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}
.section-cards .interactive-service-box:hover .service-image-wrapper img{
  transform:scale(1.055);
  filter:saturate(1.04);
}

/* Separación sutil entre el texto introductorio y las tarjetas */
.section-cards .section-header-center{
  margin-bottom: 14px;
}

/* Iconos institucionales SVG */
.section-cards .service-icon{
  position:absolute;
  left:18px;
  top:18px;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:rgba(255,255,255,.94);
  color:#214d24;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 9px 22px rgba(0,0,0,.15);
  z-index:3;
  backdrop-filter:blur(6px);
}
.section-cards .service-icon svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.section-cards .service-icon-psiquiatria{color:#4f11b3}
.section-cards .service-icon-nutricion{color:#b66a12}
.section-cards .service-icon-medicina{color:#214d24}
.section-cards .service-icon-sustancias{color:#3c7651}

.section-cards .service-front-title{
  min-height:108px;
  padding:1rem 1rem .85rem;
  gap:.55rem;
  justify-content:center;
}
.section-cards .service-front-title h3{
  margin:0;
  font-size:1.08rem;
}
.section-cards .service-detail-trigger,
.section-cards .service-close-trigger{
  font-family:inherit;
  cursor:pointer;
}
.section-cards .service-detail-trigger{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border:1px solid rgba(33,77,36,.14);
  background:#f3f8ec;
  color:#214d24;
  border-radius:999px;
  padding:.46rem .78rem;
  font-size:.8rem;
  font-weight:600;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.section-cards .service-detail-trigger span{
  font-size:1rem;
  line-height:1;
}
.section-cards .service-detail-trigger:hover{
  background:#214d24;
  color:#fff;
  transform:translateY(-1px);
}

/* La interacción es por clic/tap, no por hover. */
.section-cards .interactive-service-overlay{
  z-index:5;
  opacity:0;
  visibility:hidden;
  transform:translateY(18px) scale(.985);
  transition:opacity .28s ease, visibility .28s ease, transform .35s ease;
  border-radius:inherit;
  padding:1.5rem;
}
.section-cards .interactive-service-box:hover .interactive-service-overlay{
  opacity:0;
  visibility:hidden;
  transform:translateY(18px) scale(.985);
}
.section-cards .interactive-service-box.is-open .interactive-service-overlay{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}
.section-cards .overlay-content{
  width:min(100%,360px);
}
.section-cards .overlay-label{
  display:inline-flex;
  margin-bottom:.6rem;
  padding:.28rem .62rem;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.25);
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.section-cards .overlay-content h3{
  font-size:1.35rem;
  margin:0 0 .55rem;
}
.section-cards .overlay-content p{
  margin:0;
  line-height:1.65;
  color:rgba(255,255,255,.94);
}
.section-cards .service-close-trigger{
  margin-top:1rem;
  padding:.45rem .75rem;
  border:1px solid rgba(255,255,255,.45);
  border-radius:999px;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:.78rem;
}
.section-cards .service-close-trigger:hover{
  background:rgba(255,255,255,.2);
}

/* Imagen de apoyo */
.section-cards .services-image-fill{
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(145deg,#f5f8f3,#edf4eb);
  border:1px solid rgba(33,77,36,.08);
  box-shadow:0 12px 30px rgba(33,77,36,.07);
}

/* Internación */
.section-cards .internacion-box{
  position:relative;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.section-cards .internacion-box:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(33,77,36,.12);
}
.section-cards .internacion-icon{
  position:relative;
}
.section-cards .internacion-icon svg{
  width:34px;
  height:34px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
}

/* Valores institucionales */
.section-cards .servicios-values{
  background:linear-gradient(135deg,#f8f7f1,#f3f8ec);
}
.section-cards .servicio-value{
  transition:transform .22s ease;
}
.section-cards .servicio-value:hover{
  transform:translateY(-2px);
}
.section-cards .servicio-value .value-icon{
  transition:transform .22s ease, background .22s ease;
}
.section-cards .servicio-value:hover .value-icon{
  transform:scale(1.06);
  background:#d9efd7;
}
.section-cards .servicio-value svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Accesibilidad: teclado */
.section-cards .interactive-service-box:focus-within{
  outline:3px solid rgba(255,155,43,.3);
  outline-offset:3px;
}

@media (max-width: 768px){
  .section-cards .interactive-service-box{
    height:315px;
  }
  .section-cards .service-image-wrapper{
    height:205px;
  }
  .section-cards .service-front-title{
    min-height:110px;
  }
  .section-cards .interactive-service-box:hover{
    transform:none;
  }
  .section-cards .services-image-fill{
    min-height:240px;
  }
  .section-cards .internacion-box{
    align-items:flex-start;
  }
}
@media (prefers-reduced-motion: reduce){
  .section-cards .interactive-service-box,
  .section-cards .interactive-service-overlay,
  .section-cards .service-image-wrapper img{
    transition:none !important;
  }
}