/* video.css — pensado para tu HTML “de siempre” + tú controlas el espacio con <br> */

/* Caja del vídeo (misma clase de siempre) */
.video-container{
  width: 100%;
  max-width: 900px;
  margin: 12px auto 14px;        /* PC: separación moderada */
  background: #000;
  border-radius: 8px;            /* menos redondeado */
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
}

/* Móvil: un pelín más de aire para que nunca se “junten” */
@media (max-width: 768px){
  .video-container{
    margin: 12px auto 18px;
  }
}

/* Responsive del iframe aunque lleve width/height */
.video-container iframe{
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  border: 0;

  border-radius: 8px;
  transform: translateZ(0);
}

/* Clave: quita SOLO el <br> que pones justo después del vídeo */
.video-container + br{
  display: none;
}

/* Fix iOS para recortar bien el borde redondeado */
@supports (-webkit-touch-callout: none){
  .video-container{
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
}

/* Hover suave en escritorio */
@media (hover:hover){
  .video-container{
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .video-container:hover{
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(0,0,0,.20);
  }
}
/* =========================================================
   ENLACE AUTOMÁTICO A COMENTARIOS DE YOUTUBE
   ========================================================= */

.video-container.con-comentarios iframe{
  border-radius: 8px 8px 0 0;
}

.youtube-comentarios-auto{
  display: block;
  padding: 11px 16px;
  background: #fff9f0;
  border-top: 2px solid #f5a623;
  color: #b66a00;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}

.youtube-comentarios-auto:hover{
  background: #fff3df;
  color: #8f5200;
  text-decoration: none;
}

@media (max-width: 768px){
  .youtube-comentarios-auto{
    padding: 10px 12px;
    font-size: 14px;
  }
}