/* Estilos específicos para PIER */
.pier-cta {
   margin-top: 12px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 8px;
}

.pier-video {
   margin-top: 14px;
}

.video-wrapper {
   max-width: 820px;
   margin: 12px auto 0;
   display: flex;
   justify-content: center;
   border-radius: 12px;
   overflow: hidden;
}

.video-wrapper.is-collapsed {
   display: none;
}

.video-toggle {
   cursor: pointer;
   user-select: none;
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

.video-toggle::after {
   content: "▼";
   font-size: 12px;
   transition: transform 0.2s ease;
}

.video-toggle.is-collapsed::after {
   transform: rotate(-90deg);
}

.video-player {
   display: block;
   width: 100%;
   height: auto;
   max-height: 480px;
   border-radius: 12px;
}

.video-player.is-hidden {
   display: none;
}

.video-player.is-visible {
   display: block;
}



.btn-doc {
   background: linear-gradient(135deg, var(--azul2) 0%, var(--azul1) 100%);
   color: #fff;
   border: none;
   padding: 10px 16px;
   border-radius: 8px;
   cursor: pointer;
   font-weight: 600;
   font-size: 13px;
   transition: all 0.2s ease;
   white-space: nowrap;
   box-shadow: 0 2px 8px rgba(54, 110, 175, 0.15);
 }
 
 .btn-doc:hover {
   background: linear-gradient(135deg, var(--azul1) 0%, #001f3f 100%);
   box-shadow: 0 6px 16px rgba(0, 51, 94, 0.25);
   transform: translateY(-2px);
 }
 
 .btn-doc:active {
   transform: translateY(0);
 }