/* Compatibilidad movil basica para FrutArt.
   ponytail: arreglos minimos sobre el layout de tablas fijas existente,
   no es un rediseno responsive completo. Subir a grid/flex si se rehace el front. */

/* Las imagenes nunca desbordan el ancho de pantalla y mantienen proporcion */
img, object, embed { max-width: 100%; height: auto; }

/* Encabezados de seccion semanticos, con el verde corporativo (sustituyen a <font size=+1>) */
h1.sec, h2.sec { color: #90A524; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; margin: 0 0 6px; padding: 0; }
h1.sec { font-size: 22px; }
h2.sec { font-size: 19px; }

/* Nombre del item activo en la galeria (sustituye al <i><strong> anterior) */
.galActive { font-weight: bold; font-style: italic; }

/* products.asp: layout fluido (3 columnas en escritorio, apiladas en movil) */
.prod-wrap { max-width: 760px; margin: 0 auto; text-align: left; font-family: Verdana, Arial, Helvetica, sans-serif; }
.prod-col  { display: inline-block; vertical-align: top; }
.prod-img img { width: 200px; max-width: 100%; height: auto; border: 0; }
.prod-text { width: 380px; padding: 0 12px; }
.prod-dvd  { width: 160px; text-align: center; }
.prod-dvd img { max-width: 100%; height: auto; border: 0; }
.prod-h    { color: #90A524; font-weight: bold; font-size: 18px; margin: 8px 0 2px; }
.prod-li   { color: #F0F0F0; font-size: 13px; line-height: 1.4; margin: 0 0 8px; }
.prod-li b { color: #90A524; }

/* En moviles/tablets pequenas, las tablas de ancho fijo (720-800px) se ajustan */
@media (max-width: 820px) {
  table { width: 100% !important; max-width: 100% !important; }
  td, th { word-break: break-word; }
  /* permite scroll horizontal si algo no cabe, en vez de cortar */
  body { overflow-x: auto; -webkit-text-size-adjust: 100%; }
  /* logo y pieza de la portada: reducidos para que queden con margen a los lados */
  .home-art { max-width: 70%; height: auto; }
  /* products.asp en movil: imagen principal a la izq (mitad de tamano) + texto a la
     der (media object); el bloque DVD baja debajo con las imagenes reducidas. */
  .prod-img  { display: block; float: left; width: auto !important; }
  .prod-img img { width: 100px; }
  .prod-text { display: block; width: auto !important; overflow: hidden; padding: 0 0 0 10px; }
  .prod-dvd  { display: block; clear: both; width: auto !important; text-align: center; margin-top: 16px; }
  .prod-dvd img { max-width: 45%; height: auto; }
}