/* ===== Support page ===== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 100%; /* asegura 16px base */
}

.support-page{
  padding: 10px 16px 44px;
}

.support-title{
  text-align:center;
  color:#aaa;
  margin: 8px 0 14px;
  font-size: 1.6rem;
  font-weight: 600;
}

/* Grid de videos */
.video-grid{
  max-width: 1200px;
  margin: 0 auto 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  color:#444;
}

.video-card h3{
  text-align:center;
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 600;
}

/* Contenedor responsive 16:9 */
.video-embed{
  aspect-ratio: 16 / 9;          /* moderno */
  background:#000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.video-embed iframe{
  width:100%;
  height:100%;
  border:0;
}

/* FAQ / Texto */
.support-faq{
  max-width: 900px;
  margin: 18px auto 0;
  color:#333;
  text-align: justify;           /* desktop */
}
.support-faq h3{
  text-align:center;
  color:#635E5D;
  margin: 16px 0 8px;
}
.support-faq p{
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 12px;
}

/* ===== Responsive ===== */
@media (max-width: 992px){
  .support-title{ font-size: 1.5rem; }
  .video-grid{ gap: 20px; }
}

@media (max-width: 768px){
  .support-page{ padding: 6px 12px 28px; }
  .support-title{ font-size: 1.35rem; margin-bottom: 10px; }
  .video-grid{ gap: 14px; }
  .video-card h3{ font-size: 1rem; }

  .support-faq{
    text-align: left;            /* móvil: lectura más cómoda */
  }
  .support-faq h3{
    padding-top: 8px;            /* sustituye los inline paddings */
  }
}

@media (max-width: 380px){
  .support-title{ font-size: 1.25rem; }
}