/* Mejoras de animacion e interaccion de cards (sin cambiar el diseno). JS: assets/js/cards.js */

/* ---- Home: cards de planes (#swiper-productos) ---- */
#swiper-productos .card-producto{position:relative;overflow:hidden;cursor:pointer}
#swiper-productos .card-producto .thumbnail{transition:opacity .45s ease,filter .45s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
#swiper-productos .card-producto:hover .thumbnail,#swiper-productos .card-producto:focus-visible .thumbnail{transform:scale(1.04)}
#swiper-productos .card-producto .info{transition:opacity .25s ease,transform .35s ease}
#swiper-productos .card-producto:hover .info,#swiper-productos .card-producto:focus-visible .info{display:block;opacity:0;transform:translateY(8px)}
/* La capa hover pasa de display:none a opacity: se anima y el boton queda siempre dentro de la card. */
#swiper-productos .card-producto .hover-card-producto{display:flex!important;flex-direction:column;position:absolute;top:0;left:0;height:100%;width:100%;padding:36px 28px 24px;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1),visibility 0s .45s}
#swiper-productos .card-producto:hover .hover-card-producto,#swiper-productos .card-producto:focus-visible .hover-card-producto{opacity:1;visibility:visible;transform:none;transition-delay:0s}
#swiper-productos .card-producto .hover-card-producto ul{margin:10px 0 0;padding:0;list-style:none;min-height:0;overflow:hidden}
/* Solo los primeros 6 (8 en escritorio) beneficios caben; el detalle completo esta en la pagina del plan. */
#swiper-productos .card-producto .hover-card-producto ul li:nth-child(n+7){display:none}
@media (min-width:992px){#swiper-productos .card-producto .hover-card-producto ul li:nth-child(7),#swiper-productos .card-producto .hover-card-producto ul li:nth-child(8){display:list-item}#swiper-productos .card-producto .hover-card-producto ul li:nth-child(n+9){display:none}}
#swiper-productos .card-producto .hover-card-producto ul li{opacity:0;transform:translateX(-8px);transition:opacity .3s ease,transform .3s ease}
#swiper-productos .card-producto:hover .hover-card-producto ul li,#swiper-productos .card-producto:focus-visible .hover-card-producto ul li{opacity:1;transform:none}
#swiper-productos .card-producto:hover .hover-card-producto ul li:nth-child(1),#swiper-productos .card-producto:focus-visible .hover-card-producto ul li:nth-child(1){transition-delay:.08s}
#swiper-productos .card-producto:hover .hover-card-producto ul li:nth-child(2),#swiper-productos .card-producto:focus-visible .hover-card-producto ul li:nth-child(2){transition-delay:.13s}
#swiper-productos .card-producto:hover .hover-card-producto ul li:nth-child(3),#swiper-productos .card-producto:focus-visible .hover-card-producto ul li:nth-child(3){transition-delay:.18s}
#swiper-productos .card-producto:hover .hover-card-producto ul li:nth-child(4),#swiper-productos .card-producto:focus-visible .hover-card-producto ul li:nth-child(4){transition-delay:.23s}
#swiper-productos .card-producto:hover .hover-card-producto ul li:nth-child(5),#swiper-productos .card-producto:focus-visible .hover-card-producto ul li:nth-child(5){transition-delay:.28s}
#swiper-productos .card-producto:hover .hover-card-producto ul li:nth-child(6),#swiper-productos .card-producto:focus-visible .hover-card-producto ul li:nth-child(6){transition-delay:.33s}
#swiper-productos .card-producto:hover .hover-card-producto .btn,#swiper-productos .card-producto:focus-visible .hover-card-producto .btn,#swiper-productos .card-producto .hover-card-producto .btn{margin-top:auto!important;align-self:flex-start;transition:transform .2s ease,background-color .2s ease}
#swiper-productos .card-producto .hover-card-producto .btn:hover{transform:translateY(-2px)}
#swiper-productos .card-producto:focus-visible{outline:3px solid #fff;outline-offset:-6px}

/* ---- Plan: carrusel "incluye" (.servicios) ---- */
.servicios .item{cursor:pointer;transition:width .5s cubic-bezier(.2,.7,.2,1);will-change:width}
.servicios .item:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.servicios .item .img-destacada{transition:opacity .5s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.servicios .item.active .img-destacada{transform:scale(1.04)}
.servicios .item-desc{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.servicios .item .detalle-servicio{opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .45s ease}
.servicios .item.active .detalle-servicio{opacity:1;transform:none;transition-delay:.18s}
.servicios .item-desc .incluye{display:block!important;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.7,.2,1),opacity .35s ease}
.servicios .item.active .item-desc .incluye{max-height:520px;opacity:1;transition-delay:.12s}
.servicios .item-desc .incluye ul li{opacity:0;transform:translateX(-8px);transition:opacity .3s ease,transform .3s ease}
.servicios .item.active .item-desc .incluye ul li{opacity:1;transform:none}
.servicios .item.active .item-desc .incluye ul li:nth-child(1){transition-delay:.2s}
.servicios .item.active .item-desc .incluye ul li:nth-child(2){transition-delay:.26s}
.servicios .item.active .item-desc .incluye ul li:nth-child(3){transition-delay:.32s}
.servicios .item.active .item-desc .incluye ul li:nth-child(4){transition-delay:.38s}
.servicios .item.active .item-desc .incluye ul li:nth-child(n+5){transition-delay:.44s}
/* En pantallas tactiles/angostas la card activa no puede pasar del ancho visible. */
@media (max-width:575px){.servicios .item.active{width:min(500px,86vw)}}

@media (prefers-reduced-motion:reduce){
  #swiper-productos .card-producto *,.servicios .item,.servicios .item *{transition:none!important;animation:none!important}
}