/* casos-pip.css - PiP "ventana-en-ventana" reusado fuera de la home (casos.html,
   caso-catalogo.html). Las clases .showcase/.showcase-bar/.showcase-viewport/
   .showcase-overlay/.showcase-foot ya viven en v2.css (mismo patrón que index.html);
   este archivo SOLO agrega lo que falta para reusarlas aquí: el trigger "Ver el caso"
   y una variante alta del viewport para la página de caso dedicada. No se edita v2.css. */

/* botón "Ver el caso ›" que abre el panel PiP inline (casos.html) */
.pip-trigger{cursor:pointer;background:none;}
.pip-trigger[aria-expanded="true"]{border-color:var(--amber);color:var(--amber);}

/* el panel PiP nace oculto con [hidden]; nada que hacer, es el default nativo del
   atributo. Al abrirse se le agrega esta clase para una entrada suave (respeta
   prefers-reduced-motion vía el guard en casos-pip.js, que no la añade si aplica). */
.pip-panel{margin:18px 0 0;}
.pip-panel.pip-in{animation:pipIn .35s ease both;}
@keyframes pipIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* variante alta del viewport, para la pieza central de una página de caso dedicada
   (caso-catalogo.html) en vez del recuadro compacto de una tarjeta de listado */
.showcase-viewport.tall{height:460px;}
@media (max-width:819px){.showcase-viewport.tall{height:380px;}}

@media (prefers-reduced-motion:reduce){
  .pip-panel.pip-in{animation:none;}
}