/* ============================================================
   /products/tutorial/ — adaptación responsive
   ------------------------------------------------------------
   Hoja añadida en 2026. Se carga DESPUÉS de style.css y sólo afecta a esta
   carpeta: no toca el CSS del sitio principal ni ningún archivo de la
   plantilla original. No cambia tipografías, colores, textos ni estructura.

   Qué corrige. En la plantilla de 2017 el artículo es
       article { float: left; }
   Un elemento flotado se dimensiona por «shrink-to-fit»: si su contenido tiene
   un ancho mínimo mayor que el hueco disponible, el flotado crece hasta ese
   ancho mínimo en lugar de quedarse en el del contenedor. Medido a 390 px:

     single.html  el <pre> del código fuente usa white-space:pre, así que su
                  ancho mínimo es el de la línea de código más larga.
                  article -> 1182 px, columna de texto -> 1152 px.
     sonoff.html  el <object width="550"> del mapa de Google My Maps.
                  article ->  580 px, columna de texto ->  550 px.

   Los <iframe width="460"> y <iframe width="500"> de los videos empujaban en
   la misma dirección, por debajo de esos dos.

   Y #page { overflow-x: hidden } ocultaba el resultado: el texto que quedaba
   fuera no se recortaba «visualmente», simplemente era inalcanzable, porque
   tampoco había barra de desplazamiento con la que llegar hasta él.

   Cómo se corrige. Se limita el ancho del flotado, se hacen fluidos los medios
   y los bloques que no pueden encogerse (el código) pasan a desplazarse por
   dentro. Al final se devuelve #page a overflow-x visible, de modo que si en
   el futuro algo volviera a desbordar se vería, en lugar de desaparecer.
   ============================================================ */

/* 1 — La columna del artículo deja de estirarse con su contenido. */
article {
  max-width: 100%;
}

/* 2 — Los bloques que no pueden encogerse se desplazan por dentro.
       El listado de código conserva su formato original: forzar el ajuste de
       línea rompería la indentación y las líneas del programa. */
article pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
article table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* 3 — Medios fluidos: mapa, videos e imágenes.
       El max-width gana sobre los atributos width= del HTML de 2017. */
article img,
article iframe,
article object,
article embed,
article video {
  max-width: 100%;
}
article img {
  height: auto;
}

/* 4 — Pie del índice: fila anidada dentro de otra fila.
       En index.html, al comentar el bloque «Most Popular» quedó dentro del
       comentario el </div> que cerraba .row.row-pb-md, así que .row.copyright
       pasó a ser hija de otra .row. Las dos aplican margin:0 -15px, se suman y
       el pie sobresale 15 px por cada lado. Se anula el margen de la fila
       anidada; el contenido va centrado, así que no cambia nada a la vista.
       Con esto desaparecen también los dos síntomas que arrastraba: el
       viewport de maquetación se ensanchaba a 405 px y con él la barra
       .gtco-nav y el botón del menú, ambos position:fixed con width:100%. */
#gtco-footer .row .row {
  margin-left: 0;
  margin-right: 0;
}

/* 5 — Se retira el recorte global.
       #gtco-offcanvas (el menú lateral) es position:fixed y no genera
       desplazamiento horizontal, así que no hace falta recortar nada.
       Si en el futuro algo volviera a desbordar, se verá en lugar de
       desaparecer sin dejar rastro. */
#page {
  overflow-x: visible;
}