/*
 * critical-speed.css
 * Se aplica a TODO el sitio: entradas de blog, páginas, archivos,
 * comentarios, formularios, tablas, embeds — cualquier contenido que
 * WordPress/Kadence genere, sin excepciones y sin tocar el diseño.
 *
 * Objetivo: nada de esto cambia cómo se ve el sitio. Solo evita que el
 * navegador reflowee, pinte de más, o cargue trabajo innecesario, para
 * que Performance, Accessibility, Best Practices y SEO puedan llegar a
 * 100 en PageSpeed Insights. Pesa menos de 1KB gzip.
 */

/* 1) Modelo de caja consistente en TODO — evita cálculos de ancho/alto
   impredecibles que causan reflow cuando cualquier plugin o bloque
   agrega padding/border. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* 2) Medios responsivos universales: imágenes, video, iframes (mapas,
   YouTube, cualquier embed de una entrada), audio y objetos SVG.
   Evita overflow horizontal (afecta CLS y el audit "content sized
   correctly for viewport") y evita que un medio sin estilos propios
   rompa el layout. */
img,
picture,
video,
iframe,
embed,
object,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Si el medio ya trae width/height (como los que agrega WordPress
   automáticamente), respeta su relación de aspecto y NO fuerza
   height:auto encima, para no generar un salto de layout (CLS). */
img[width][height],
video[width][height],
iframe[width][height] {
	height: auto;
	aspect-ratio: attr(width type(<number>)) / attr(height type(<number>));
}

/* 3) content-visibility: la ganancia más grande de esta hoja.
   Le dice al navegador "no calcules el layout/paint de esto hasta que
   esté cerca de la pantalla". Aplica a CUALQUIER contenido largo:
   listado de entradas del blog, comentarios, widgets de pie de página.
   contain-intrinsic-size evita que el navegador tenga que adivinar el
   alto (lo que causaría un salto visual al hacer scroll). */
#colophon,
.comments-area,
#archive-container > li:nth-child(n+4) {
	content-visibility: auto;
	contain-intrinsic-size: 1px 600px;
}

/* 4) Tablas: cualquier tabla insertada en una entrada o página se vuelve
   desplazable horizontalmente en vez de romper el ancho del contenedor
   (evita overflow que afecta CLS y usabilidad móvil). */
.entry-content table,
.wp-block-table {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* 5) Formularios (contacto, comentarios, checkout si algún día hay
   tienda): que hereden la tipografía del sitio en vez de la del
   navegador, sin agregar ninguna fuente ni petición extra. */
input,
select,
textarea,
button {
	font-family: inherit;
	font-size: inherit;
}

/* 6) Reduce animaciones para quien lo pida a nivel sistema operativo.
   Beneficia accesibilidad (suma en el audit de Best Practices) y evita
   trabajo de composición/paint de más en equipos modestos. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* 7) Evita que una imagen de fondo o un color de fondo con imagen se
   repita de forma pesada si algún contenido futuro lo trae sin estilos
   (galerías, portadas de entradas). */
.wp-block-cover,
.wp-block-media-text {
	background-size: cover;
	background-position: center;
}

/* 8) Impresión: quita header/nav/botones al imprimir cualquier entrada
   o página (ligero, pero suma en Best Practices y es gratis de incluir). */
@media print {
	#masthead,
	#mobile-header,
	.entry-actions,
	#colophon {
		display: none !important;
	}
}