/* =========================================================
   Instituto Brasbol — v4.27.0
   ORGANIZACIÓN RESPONSIVE: Página de producto individual
   ---------------------------------------------------------
   Se carga al final, solo en la página de producto. No cambia
   colores, tipografía ni el diseño ya aprobado: solo corrige
   puntos donde el celular/tablet quedaban sin ajustar.
   ========================================================= */

/* Miniaturas de la galería: 5 columnas fijas eran demasiado
   angostas en tablet y, sobre todo, en celular. Se reducen a
   4 y 3 columnas para que cada miniatura sea cómoda de tocar. */
@media (max-width:980px){
  body.single-product .brasbol-course-product-media .flex-control-thumbs{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}
@media (max-width:560px){
  body.single-product .brasbol-course-product-media .flex-control-thumbs{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }
}

/* Tabla dentro de la descripción/valoraciones: que nunca
   empuje el ancho de la tarjeta en celular. */
@media (max-width:768px){
  body.single-product .brasbol-course-product-details table{
    display:block!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }
}

/* Formulario de valoración: campos a ancho completo y
   suficientemente altos para tocar cómodo en celular. */
@media (max-width:560px){
  body.single-product #review_form_wrapper{
    padding:16px!important;
  }
  body.single-product #review_form input[type=text],
  body.single-product #review_form input[type=email]{
    width:100%!important;
  }
}

/* Cursos relacionados: en tablet vertical angosta (600-680px)
   quedaban entre el ajuste de 2 y el de 1 columna; se fija en
   2 columnas de forma consistente en todo ese rango. */
@media (max-width:680px){
  body.single-product .brasbol-course-product-details .related.products ul.products{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* =========================================================
   v4.28.0 — PRODUCTO: composición compacta real en móvil/tablet
   Corrige las tarjetas verticales excesivas vistas en teléfonos.
   ========================================================= */
@media (max-width:980px){
  body.single-product .brasbol-course-product-wrap,
  body.single-product .brasbol-course-product-main,
  body.single-product .brasbol-course-product-info,
  body.single-product .brasbol-course-product-media{min-width:0!important;max-width:100%!important}
  body.single-product .brasbol-product-benefits{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
  }
  body.single-product.brasbol-virtual-product-clean .brasbol-product-benefits>span,
  body.single-product.brasbol-presencial-product-clean .brasbol-product-benefits>span{
    grid-column:auto!important;
    min-width:0!important;
    min-height:96px!important;
    padding:12px 8px!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:7px!important;
    text-align:center!important;
  }
  body.single-product .brasbol-product-benefits .bb-benefit-copy{
    align-items:center!important;text-align:center!important;min-width:0!important;width:100%!important
  }
  body.single-product .brasbol-product-benefits .bb-benefit-copy small{
    white-space:normal!important;overflow-wrap:anywhere!important
  }
}
@media (max-width:620px){
  body.single-product .brasbol-course-product-info{padding:14px 12px!important}
  body.single-product .brasbol-enrolled-course-access{
    margin:8px 0 14px!important;padding:14px!important;border-radius:16px!important
  }
  body.single-product .brasbol-enrolled-course-access h3{font-size:20px!important;line-height:1.18!important;margin:6px 0 8px!important}
  body.single-product .brasbol-enrolled-course-access p{font-size:14px!important;line-height:1.5!important;margin:0 0 12px!important}
  body.single-product .brasbol-view-course-button{min-height:52px!important;padding:12px 14px!important;font-size:15px!important;line-height:1.25!important;text-align:center!important}
  body.single-product.brasbol-virtual-product-clean .brasbol-product-benefits,
  body.single-product.brasbol-presencial-product-clean .brasbol-product-benefits{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;margin:10px 0!important
  }
  body.single-product.brasbol-virtual-product-clean .brasbol-product-benefits>span,
  body.single-product.brasbol-presencial-product-clean .brasbol-product-benefits>span{
    min-height:92px!important;padding:9px 5px!important;border-radius:13px!important
  }
  body.single-product .brasbol-product-benefits .bb-mini-icon{width:32px!important;height:32px!important;margin:0 auto!important}
  body.single-product .brasbol-product-benefits .bb-benefit-copy b{font-size:17px!important;line-height:1!important}
  body.single-product .brasbol-product-benefits .bb-benefit-copy small{font-size:9.5px!important;line-height:1.18!important}
  body.single-product .brasbol-product-includes{margin:10px 0!important}
  body.single-product .brasbol-product-includes li{min-height:40px!important;padding-top:9px!important;padding-bottom:9px!important;font-size:12px!important}
}
@media (max-width:380px){
  body.single-product.brasbol-virtual-product-clean .brasbol-product-benefits,
  body.single-product.brasbol-presencial-product-clean .brasbol-product-benefits{gap:5px!important}
  body.single-product.brasbol-virtual-product-clean .brasbol-product-benefits>span,
  body.single-product.brasbol-presencial-product-clean .brasbol-product-benefits>span{padding:8px 3px!important;min-height:88px!important}
  body.single-product .brasbol-product-benefits .bb-benefit-copy small{font-size:8.8px!important}
}