/* ==========================================================================
   toha-blocks / responsive: correcciones básicas para tablet y móvil.
   Todo va dentro de media queries con max-width <= 1199px: a 1200px o más
   (escritorio, 1440) el sitio queda idéntico.
   ========================================================================== */

/* --- Hamburguesa: oculta en escritorio (el JS la inserta en el header) --- */
.toha-menu-toggle { display: none; }

/* --------------------------------------------------------------------------
   <= 1199px: títulos, listas y fondos parallax
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1199px) {
	/* Títulos: el builder y el tema usan line-height fijo (16px, o .5 en el tema) menor que el
	   font-size; al partir en 2 líneas se montan. Sin !important para no pisar los inline. */
	#fbuilder_wrapper h1, #fbuilder_wrapper h2, #fbuilder_wrapper h3,
	#fbuilder_wrapper h4, #fbuilder_wrapper h5, #fbuilder_wrapper h6,
	.toha-post h1.toha-post-h, .toha-post h2.toha-post-h,
	.toha-post .toha-post-sidebar .widget-title,
	footer .footer-outer h1 { line-height: 1.15; }
	/* Títulos del acordeón (toha/toggle): el label tiene line-height 33px */
	#fbuilder_wrapper .frb_toggle .frb_toggle_item > label > h3 { line-height: 1.25; padding: 4px 0; }
	#fbuilder_wrapper .frb_toggle .frb_toggle_item > label > h3::after { content: ""; display: table; clear: both; }

	/* Lista con check: line-height 17px con texto de 19px */
	#fbuilder_wrapper ul.toha-bullets { line-height: 1.3; }
	#fbuilder_wrapper ul.toha-bullets > li { padding-left: 40px; }
	#fbuilder_wrapper ul.toha-bullets > li::before { width: 20px; margin-left: -30px; margin-right: 10px; }

	/* Fondos parallax: parallax.js fija la capa al alto de la ventana y la desplaza; si la fila es
	   más alta (texto que parte en más líneas) el texto blanco queda fuera del fondo. Aquí la capa
	   cubre siempre toda la fila (es lo mismo que ya pasa en pantallas táctiles, donde el JS no corre). */
	.fbuilder_row_background_parallax .fbuilder_row_back_image,
	.fbuilder_row_background_fixed .fbuilder_row_back_image {
		top: 0 !important;
		height: 100% !important;
		background-size: cover !important;
		opacity: 1 !important;
	}

	/* Textos largos (URLs en los posts) no deben desbordar */
	#fbuilder_wrapper, .toha-post { overflow-wrap: break-word; }
}

/* --------------------------------------------------------------------------
   <= 1009px: menú colapsable. Bajo ~1000px el menú ya no cabe junto al logo,
   cae debajo y se sale del navbar (alto fijo de 82px); bajo 768 se apila en
   una columna de ~480px. El JS agrega .toha-nav-ready al <nav>; sin JS el
   menú queda visible como hoy.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1009px) {
	nav.navbar.toha-nav-ready { height: auto; min-height: 82px; }
	nav.navbar.toha-nav-ready .top-m { position: relative; }
	nav.navbar.toha-nav-ready .top-m::after { content: ""; display: table; clear: both; }
	nav.navbar.toha-nav-ready .navbar-header { float: left; margin: 0; }

	nav.navbar.toha-nav-ready .toha-menu-toggle {
		display: block;
		position: absolute;
		top: 16px;
		right: 0;
		width: 48px;
		height: 48px;
		padding: 0;
		margin: 0;
		border: 1px solid #005BA6;
		border-radius: 0;
		background: #fff;
		color: #005BA6;
		cursor: pointer;
	}
	nav.navbar.toha-nav-ready .toha-menu-toggle:hover,
	nav.navbar.toha-nav-ready .toha-menu-toggle[aria-expanded="true"] { background: #005BA6; color: #fff; }
	nav.navbar.toha-nav-ready .toha-menu-toggle:focus { outline: none; }
	nav.navbar.toha-nav-ready .toha-menu-toggle:focus-visible { outline: 2px solid #005BA6; outline-offset: 2px; }
	.toha-menu-toggle__bars,
	.toha-menu-toggle__bars::before,
	.toha-menu-toggle__bars::after {
		display: block;
		position: absolute;
		width: 24px;
		height: 2px;
		background: currentColor;
		transition: transform .2s, background-color .2s;
	}
	.toha-menu-toggle__bars { top: 50%; left: 50%; margin: -1px 0 0 -12px; }
	.toha-menu-toggle__bars::before, .toha-menu-toggle__bars::after { content: ""; left: 0; }
	.toha-menu-toggle__bars::before { top: -7px; }
	.toha-menu-toggle__bars::after { top: 7px; }
	.toha-menu-toggle[aria-expanded="true"] .toha-menu-toggle__bars { background: transparent; }
	.toha-menu-toggle[aria-expanded="true"] .toha-menu-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
	.toha-menu-toggle[aria-expanded="true"] .toha-menu-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

	/* Menú cerrado: oculto. Abierto: lista vertical a todo el ancho bajo el logo. */
	nav.navbar.toha-nav-ready .menu-menu-1-container { display: none; clear: both; }
	nav.navbar.toha-nav-ready.is-open .menu-menu-1-container { display: block; padding-bottom: 10px; }
	nav.navbar.toha-nav-ready .menu-menu-1-container .navbar-nav { float: none; margin: 0; padding: 0; }
	nav.navbar.toha-nav-ready .menu-menu-1-container .navbar-nav > li { float: none; display: block; padding: 0; border-top: 1px solid #e6e6e6; }
	nav.navbar.toha-nav-ready .menu-menu-1-container .navbar-nav > li > a { display: block; padding: 14px 15px; line-height: 20px; }
	nav.navbar.toha-nav-ready .menu-menu-1-container .navbar-nav > li > a:focus-visible { outline: 2px solid #005BA6; outline-offset: -2px; color: #fff; background: #005BA6; }

	/* Flechas del slider: 100x100px tapan buena parte de la infografía cuando el slider escala */
	.toha-slider .toha-slider__arrow { width: 44px; height: 44px; margin-top: -22px; }
	.toha-slider .toha-slider__arrow::before { line-height: 44px; font-size: 18px; }
	.toha-slider .toha-slider__thumb { display: none; }

	/* El <ul> vacío navbar-right del tema no aporta nada */
	nav.navbar.toha-nav-ready .navbar-right { display: none; }
}
@media screen and (max-width: 1009px) and (prefers-reduced-motion: reduce) {
	.toha-menu-toggle__bars, .toha-menu-toggle__bars::before, .toha-menu-toggle__bars::after { transition: none; }
}
.toha-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* --------------------------------------------------------------------------
   <= 767px: móvil
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
	/* El tema fija .container-fluid al 80 %: en 390px quedaban ~280px de contenido.
	   Con el padding de 15px y el .row a -15px, esto deja un margen de 16px por lado. */
	.container-fluid { width: calc(100% - 32px) !important; }

	/* Tamaños de título más contenidos (evita palabras que no caben, p. ej. INTERNACIONALES) */
	#fbuilder_wrapper h1, .toha-post h1.toha-post-h { font-size: 32px; }
	#fbuilder_wrapper h2, .toha-post h2.toha-post-h, .toha-post .toha-post-sidebar .widget-title { font-size: 26px; }
	#fbuilder_wrapper h3 { font-size: 22px; }
	footer .footer-outer h1 { font-size: 30px; margin-top: 24px; }
	footer { padding-bottom: 16px; }

	/* Texto justificado en columnas angostas deja ríos de espacio */
	#fbuilder_wrapper .has-text-align-justify { text-align: left; }

	/* Bullets */
	#fbuilder_wrapper ul.toha-bullets { font-size: 17px; }

	/* Iframes (mapa de Google 1024x450, videos) */
	#fbuilder_wrapper iframe, .toha-post iframe { max-width: 100%; }
	#fbuilder_wrapper iframe[src*="google.com/maps"] { width: 100%; height: 320px; }

	/* Formulario de contacto: el tema deja los inputs al 50 % y el botón al 20 % */
	.wpcf7-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
	.wpcf7-form textarea,
	.wpcf7-form select { width: 100%; max-width: 100%; }
	.wpcf7-form .wpcf7-submit { width: auto; min-width: 50%; height: 44px; }

}