/* Motion para pantallas táctiles: lo que en computador es "al pasar el mouse", aquí ocurre cuando
   la tarjeta llega al centro de la pantalla (.mv-activo). Solo aplica con la clase .mv que pone js/movil.js. */


/* Rebote al tocar */
.mv .mv-toque { animation: mv-toque .26s ease; }
@keyframes mv-toque { 40% { transform: scale(.95); } }

/* Entradas */
.mv .mv-entra { opacity: 0; translate: 0 34px; transition: opacity .8s ease, translate .9s cubic-bezier(.2,.7,.2,1); }
.mv .mv-entra.mv-dentro { opacity: 1; translate: 0 0; }

/* Servicios: tarjetas del acordeón */
.mv .sv-carta.mv-activo { box-shadow: 0 0 0 2px #C9A84C, 0 30px 60px rgba(0,0,0,.5); }
.mv .sv-carta.mv-activo img, .mv .sv-carta.mv-activo video { transform: scale(1); filter: none; }
.mv .sv-carta.mv-activo::before { scale: 1; rotate: 0deg; }
.mv .sv-carta { transition: box-shadow .5s; }
.mv .sv-vis-web.mv-activo .sv-pant-1 { transform: rotateY(10deg) rotateZ(-6deg) scale(.86) translate(-20px, -14px); }
.mv .sv-vis-web.mv-activo .sv-pant-3 { transform: rotateY(-10deg) rotateZ(6deg) scale(.86) translate(20px, 14px); }
.mv .sv-vis-web.mv-activo .sv-pant-2 { transform: none; }
.mv .sv-razon.mv-activo .ix-num { transform: translateY(-6px) scale(1.12); }

/* Inicio: lista de servicios que se llena de negro */
.mv .ix-serv.mv-activo::before { transform: scaleY(1); transform-origin: top; }
.mv .ix-serv.mv-activo > * { color: #F4EFE3; }
.mv .ix-serv.mv-activo h3 { color: #C9A84C; transform: translateX(10px); }
.mv .ix-serv.mv-activo .ix-ir { transform: rotate(0); color: #C9A84C; }
.mv .ix-dolor-item.mv-activo { background: #151513; box-shadow: inset 3px 0 0 #C9A84C; }

/* Portafolio */
.mv .pf-item.mv-activo img, .mv .pf-item.mv-activo video { transform: scale(1.05); }
.mv .pf-item.mv-activo { box-shadow: 0 0 0 2px #C9A84C; }
.mv .pf-item[data-video].mv-activo::after { transform: scale(1.15); background-color: #C9A84C; }

/* Contacto: canales que se llenan de dorado */
.mv .ct-canal.mv-activo::before { clip-path: circle(150% at 100% 0%); }
.mv .ct-canal.mv-activo { color: #0A0A0A; }
.mv .ct-canal.mv-activo svg { stroke: #0A0A0A; transform: scale(1.12) rotate(-6deg); }
.mv .ct-canal.mv-activo small { color: rgba(10,10,10,.7); }
.mv .ct-canal.mv-activo .ct-ir { transform: none; }

/* Contenido */
.mv .ce-formato.mv-activo .ce-tel { transform: translateY(-14px) scale(1.03); box-shadow: 0 50px 90px rgba(201,168,76,.18), inset 0 0 0 2px #C9A84C; }
.mv .ce-tipo.mv-activo { box-shadow: 0 0 0 2px #C9A84C, 0 30px 70px rgba(10,10,10,.12); }
.mv .ce-peli.mv-activo .ce-vid { transform: scale(1.04); }

/* Pauta y Conóceme */
.mv .pa-inc-col.mv-activo, .mv .cn-principio.mv-activo { box-shadow: inset 0 0 0 2px #C9A84C, 0 30px 60px rgba(0,0,0,.35); }
.mv .pa-inc-col.pa-inc-oro.mv-activo, .mv .cn-principio:nth-child(2).mv-activo { box-shadow: 0 30px 60px rgba(201,168,76,.3); }
.mv .pa-queja.mv-activo .ix-num { color: #E8C96A; }

/* Blog y tarjetas del blog en todas las páginas */
.mv .lc-post.mv-activo { border-color: rgba(201,168,76,.6); transform: translateY(-4px); }
.mv .bl-art.mv-activo .lc-portada { transform: scale(1.03) rotate(-1deg); }
.mv .bl-art.mv-activo h2 { color: #C9A84C; }
.mv .bl-art.mv-activo span::after { transform: translateX(6px); }
.mv .lc-modelo.mv-activo { box-shadow: 0 0 0 2px #C9A84C; }

/* Botones: brillo que recorre los botones dorados */
.mv .ix-btn-oro { position: relative; overflow: hidden; isolation: isolate; }
.mv .ix-btn-oro::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); animation: mv-brillo 3.6s ease-in-out infinite; }
@keyframes mv-brillo { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }