/* =========================================================
   Correcciones responsive de SuperFicct.
   No cambian el diseño: solo arreglan lo que se rompía en
   celulares, tablets y laptops chicas.
   Se carga después de style.css y responsive.css.
   ========================================================= */

/* ---------- General ---------- */
img { max-width: 100%; }
/* Palabras largas (ej. "TELECOMUNICACIONES") ya no se salen de la pantalla */
h1, h2, h3, h4, h5, h6, p, li, a { overflow-wrap: break-word; }

/* Mural de Trámites / Sala de cómputo: tarjetas que entran en pantallas de 320px */
.mural-container .mural-grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

/* ---------- Laptops chicas (992–1199px): el menú entraba en 2 líneas ---------- */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.header .nav li { margin-right: 4px; }
	.header .nav li a { padding: 25px 8px; font-size: 13.5px; }
	.schedule .single-schedule h4 { font-size: 18px; line-height: 1.3; }
}

/* ---------- Flechas del slider: abajo a la derecha para no tapar los botones ---------- */
@media only screen and (max-width: 1199px) {
	.slider .owl-carousel .owl-nav {
		top: auto;
		bottom: 24px;
		right: 24px;
		left: auto;
		width: 104px;
		height: 46px;
		margin-top: 0;
	}
	.slider .owl-carousel .owl-nav div { height: 46px; width: 46px; line-height: 46px; font-size: 22px; }
	.slider .owl-carousel .owl-controls .owl-nav .owl-prev { left: 0; right: auto; }
	.slider .owl-carousel .owl-controls .owl-nav .owl-next { right: 0; left: auto; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	/* Las tarjetas de centros internos se montan sobre el slider: subir las flechas */
	.slider .owl-carousel .owl-nav { bottom: 175px; }
}

/* ---------- Tablets (768–991px) ---------- */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	/* El texto del slider ya no se encima con el escudo */
	.slider .single-slider .col-lg-7 { flex: 0 0 60%; max-width: 60%; }
	.slider .single-slider { background-position: right center; }
}

/* ---------- Menú móvil (hamburguesa) desde 991px hacia abajo ----------
   Antes solo aparecía debajo de 768px y en tablets el menú no entraba. */
@media only screen and (max-width: 991px) {
	.header .header-inner { position: relative; padding-bottom: 20px; }
	.header .header-inner .inner > .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
	/* El topbar usaba una columna angosta y se partía en 2 líneas */
	.header .topbar .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
	.header .main-menu { display: none; }

	.slicknav_menu { display: block; background: transparent; padding: 0; }
	.slicknav_btn { background: transparent; padding: 0; margin-top: 28px; }
	.slicknav_menu .slicknav_icon-bar {
		display: block;
		width: 25px;
		height: 3px;
		border-radius: 1px;
		background-color: #1A76D1;
		box-shadow: none;
	}
	.slicknav_nav { clear: both; color: #2C2D3F; margin: 0; font-size: .875em; background: transparent; }
	.header .slicknav_nav { margin-top: 65px; }
	.slicknav_nav li a { color: #2C2D3F; background: none; padding: 4px 10px; transition: all .4s ease; }
	.slicknav_nav .slicknav_item a, .slicknav_nav .slicknav_parent-link a { padding: 0 10px; background: transparent; }
	.slicknav_nav li a i { display: none; margin: 0; }
	.slicknav_nav li:hover a, .slicknav_nav li .dropdown li a:hover { color: #1A76D1; }
	.slicknav_nav li .dropdown li a { color: #2C2D3F; background: transparent; }
	.slicknav_nav li .slicknav_item { background: transparent; }
	.slicknav_nav .slicknav_row, .slicknav_nav a { margin: 0; padding: 6px 0; font-weight: 400; }
	.slicknav_nav .slicknav_arrow { color: #2C2D3F; }
	.slicknav_nav li:hover .slicknav_arrow { color: #1A76D1; }
}

/* ---------- Celulares (hasta 767px) ---------- */
@media only screen and (max-width: 767px) {
	/* El escudo del slider se veía cortado a la derecha */
	.slider .single-slider { background-position: right center; }

	/* Títulos de las páginas internas más chicos */
	.breadcrumbs { padding: 70px 0; }
	.breadcrumbs h2 { font-size: 26px; line-height: 1.25; }

	/* Pestaña "Super": vertical y angosta para no tapar el menú ni los títulos */
	.get-pro {
		top: 50%;
		left: -30px;
		width: 30px;
		height: 84px;
		margin-top: -42px;
		line-height: 30px;
		font-size: 13px;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
	}

	/* Títulos de las páginas de enlaces */
	.links-inner h1 { font-size: 24px !important; }
}

/* ---------- Celulares chicos (hasta 450px) ---------- */
@media only screen and (max-width: 450px) {
	/* El topbar ocupaba 2 líneas */
	.header .topbar { padding: 10px 0; }
	.header .top-link { text-align: center; }
	.header .top-link li { margin: 0 6px; }
	.header .top-link li a { font-size: 13px; }

	.breadcrumbs h2 { font-size: 22px; }
}