/*
 * SP-BuenaSuerte-Theme
 *
 * 1. Base: the GeneratePress defaults the pages were built on. Wrapped in
 *    :where() so they weigh nothing: Elementor's kit, the page style files
 *    and the site's Additional CSS win exactly where they won before.
 * 2. Header and footer, matching the Elementor ones (Oct 2026).
 * 3. Pages not built with Elementor.
 */

:root {
	--bs-top: #1e5299;
	--bs-head: #efefef;
	--bs-band: #f8da2e;
	--bs-nav: #174399;
	--bs-publish: #5daf14;
	--bs-cities: #4471b6;
	--bs-cities-list: #406fa5;
	--bs-foot-link: #1e2cf9;
	--bs-navy: #174399;
	--bs-body: #efefef;
	--bs-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--bs-ui: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--bs-wrap: 1400px;
}

/* ---------- 1. Base (GeneratePress defaults) ---------- */

html {
	-webkit-text-size-adjust: 100%;
	box-sizing: border-box; /* plain "html" so it outweighs the :where(*) below, as in GeneratePress */
}

:where(*, *::before, *::after) {
	box-sizing: inherit;
}

:where(body) {
	margin: 0;
	background-color: var(--bs-body);
	color: #222;
	font-family: var(--bs-font);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.5;
}

:where(a) {
	color: #1e73be;
}

:where(a:hover, a:focus) {
	color: #000;
}

:where(img) {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

:where(p) {
	margin: 0 0 1.5em;
}

:where(ul, ol) {
	margin: 0 0 1.5em 3em;
	padding: 0;
}

:where(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 20px;
	font-family: inherit;
	font-weight: 400;
	line-height: 1.2;
}

:where(h1) { font-size: 31px; }
:where(h2) { font-size: 27px; }
:where(h3) { font-size: 24px; }
:where(h4) { font-size: 22px; }
:where(h5) { font-size: 19px; }

@media (min-width: 769px) {
	:where(h1) { font-size: 42px; }
	:where(h2) { font-size: 35px; }
	:where(h3) { font-size: 29px; }
	:where(h4) { font-size: 24px; }
	:where(h5) { font-size: 20px; }
}

:where(table) {
	width: 100%;
	margin: 0 0 1.5em;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-width: 1px 0 0 1px;
}

:where(th, td) {
	padding: 8px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-width: 0 1px 1px 0;
}

:where(input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea) {
	max-width: 100%;
	padding: 10px 15px;
	border: 1px solid #ccc;
	border-radius: 0;
	background-color: #fafafa;
	color: #666;
	font: inherit;
}

:where(input, select, textarea):focus {
	border-color: #bfbfbf;
	background-color: #fff;
	color: #666;
}

:where(button, input[type="button"], input[type="reset"], input[type="submit"], a.button) {
	padding: 10px 20px;
	border: 1px solid transparent;
	border-radius: 0;
	background: #55555e;
	color: #fff;
	font: inherit;
	line-height: normal;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: button;
}

:where(button, input[type="button"], input[type="reset"], input[type="submit"], a.button):hover {
	background: #3f4047;
	color: #fff;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	word-wrap: normal !important;
}

.skip-link:focus {
	z-index: 100000;
	top: 6px;
	left: 6px;
	width: auto;
	height: auto;
	padding: 12px 18px;
	clip: auto;
	background: #fff;
	color: #174399;
}

.bs-main {
	display: block;
	min-height: 40vh;
}

.bs-wrap {
	max-width: var(--bs-wrap);
	margin: 0 auto;
	padding: 0 15px;
}

/* ---------- 2. Header ---------- */

.bs-header {
	position: relative;
	z-index: 50;
	font-family: var(--bs-ui);
}

.bs-header a {
	text-decoration: none;
}

.bs-top {
	background: var(--bs-top);
}

.bs-top__in {
	display: flex;
	justify-content: flex-end;
	min-height: 30px;
	align-items: center;
}

.bs-social {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bs-social a {
	display: flex;
	align-items: center;
	justify-content: center;
}

.bs-social .spbs-ico {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* Top bar: white rounded squares with the bar's blue inside */
.bs-social--top a {
	width: 21px;
	height: 21px;
	border-radius: 4px;
	background: #fff;
	color: var(--bs-top);
}

.bs-brand {
	background: var(--bs-head);
}

.bs-brand__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 6px;
	padding-bottom: 6px;
}

.bs-logo {
	display: block;
	flex: 0 1 auto;
	min-width: 0;
}

.bs-logo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 68px;
}

.bs-logo__text {
	color: var(--bs-nav);
	font-size: 28px;
	font-weight: 700;
}

.bs-publish {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	min-height: 76px;
	padding: 8px 42px;
	border-radius: 3px;
	background: var(--bs-publish);
	color: #fff !important;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.05;
	text-align: center;
}

.bs-publish:hover,
.bs-publish:focus {
	filter: brightness(1.06);
}

.bs-burger {
	display: none;
}

.bs-band {
	background: var(--bs-band);
	padding: 6px 0 6px;
}

.bs-navrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 24px;
}

.bs-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bs-menu li {
	position: relative;
	margin: 0;
}

.bs-menu a {
	display: block;
	padding: 6px 0;
	color: var(--bs-nav);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
}

.bs-menu a:hover,
.bs-menu a:focus,
.bs-menu .current-menu-item > a {
	text-decoration: underline;
}

.bs-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	min-width: 180px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: var(--bs-cities-list);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.bs-menu .sub-menu a {
	padding: 10px 16px;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
}

.bs-menu li:hover > .sub-menu,
.bs-menu li:focus-within > .sub-menu {
	display: block;
}

.bs-cities {
	position: relative;
}

.bs-cities__btn {
	padding: 7px 16px;
	border: 0;
	border-radius: 3px;
	background: var(--bs-cities);
	color: #fff;
	font-family: var(--bs-ui);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.bs-cities__btn:hover,
.bs-cities__btn:focus {
	background: var(--bs-cities);
	filter: brightness(1.08);
}

.bs-cities__list {
	display: none;
	position: absolute;
	top: calc(100% + 2px);
	left: 0;
	z-index: 60;
	min-width: 130px;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: var(--bs-cities-list);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.bs-cities.is-open .bs-cities__list,
.bs-cities:hover .bs-cities__list,
.bs-cities:focus-within .bs-cities__list {
	display: block;
}

.bs-cities__list a {
	display: block;
	padding: 12px 18px;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.bs-cities__list a:hover,
.bs-cities__list a:focus {
	background: rgba(255, 255, 255, 0.12);
}

.bs-search {
	max-width: 1000px;
	margin: 6px auto 4px;
}

.bs-search input {
	max-width: 100%;
}

.bs-search-form input[type="search"] {
	display: block;
	width: 100%;
	height: 44px;
	padding: 8px 15px;
	border: 1px solid #e2e2e2;
	border-radius: 2px;
	background: #fafafa;
	color: #666;
	font-family: var(--bs-ui);
	font-size: 16px; /* 16px stops iPhone zooming in */
}

/* ---------- Header on phones ---------- */

@media (max-width: 767px) {
	.bs-top {
		display: none;
	}

	.bs-wrap {
		padding: 0 6px;
	}

	.bs-brand__in {
		gap: 8px;
		padding-top: 4px;
		padding-bottom: 4px;
	}

	.bs-logo img {
		max-height: 38px;
	}

	.bs-publish {
		width: auto;
		max-width: 132px;
		min-height: 0;
		margin-left: auto;
		padding: 4px 10px;
		font-size: 12px;
		line-height: 1.1;
	}

	.bs-burger {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 32px;
		height: 32px;
		padding: 0;
		border: 0;
		border-radius: 4px;
		background: #e2e2e2;
		color: #333;
	}

	.bs-burger:hover,
	.bs-burger:focus {
		background: #d6d6d6;
		color: #333;
	}

	.bs-burger .spbs-ico {
		width: 18px;
		height: 18px;
		fill: currentColor;
	}

	.bs-band {
		padding: 4px 0 8px;
	}

	.bs-navrow {
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 4px 0 8px;
	}

	.bs-header.is-open .bs-navrow {
		display: flex;
	}

	.bs-menu {
		flex-direction: column;
		gap: 0;
	}

	.bs-menu a {
		padding: 11px 8px;
		border-bottom: 1px solid rgba(23, 67, 153, 0.15);
		font-size: 16px;
	}

	.bs-menu .sub-menu {
		display: block;
		position: static;
		background: none;
		box-shadow: none;
		padding: 0 0 0 14px;
	}

	.bs-menu .sub-menu a {
		color: var(--bs-nav);
		font-size: 15px;
		font-weight: 500;
	}

	.bs-cities {
		padding-top: 10px;
	}

	.bs-cities__btn {
		width: 100%;
		padding: 11px 16px;
		font-size: 15px;
	}

	.bs-cities__list {
		position: static;
		box-shadow: none;
	}

	.bs-cities:hover .bs-cities__list {
		display: none;
	}

	.bs-cities.is-open .bs-cities__list {
		display: block;
	}

	.bs-search {
		margin: 4px 0 0;
	}
}

/* ---------- Footer ---------- */

.bs-footer {
	font-family: var(--bs-ui);
}

.bs-foot-band {
	background: var(--bs-band);
	padding: 8px 0 10px;
}

.bs-foot-band__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
	flex-wrap: wrap;
	max-width: none;
	padding: 0 5px;
}

.bs-foot-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0 12px;
	max-width: 470px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bs-foot-menu li {
	margin: 0;
}

.bs-foot-menu a {
	display: block;
	padding: 6px 0;
	color: var(--bs-foot-link);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

.bs-foot-menu a:hover,
.bs-foot-menu a:focus {
	text-decoration: underline;
}

.bs-social--foot {
	margin-right: auto;
	margin-left: auto;
}

.bs-social--foot a {
	width: 24px;
	height: 24px;
	border-radius: 3px;
	color: #fff;
}

.bs-social--foot .bs-social__facebook { background: #295dad; }
.bs-social--foot .bs-social__twitter { background: #1da1f2; }
.bs-social--foot .bs-social__instagram { background: #262626; }

.bs-foot-navy {
	background: var(--bs-navy);
	color: #fff;
	padding: 8px 0;
}

.bs-foot-navy__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px 30px;
	flex-wrap: wrap;
	max-width: none;
	padding: 0 10px;
	font-size: 15px;
	line-height: 1.5;
}

.bs-advertise {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-right: auto;
	margin-left: auto;
}

.bs-advertise__label {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-size: 12px;
	line-height: 1.4;
}

.bs-advertise__phone,
.bs-advertise__phone:visited {
	color: #fff !important;
	font-size: 22px;
	text-decoration: none !important;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.bs-foot-band__in {
		flex-direction: column;
		align-items: flex-start;
	}

	.bs-social--foot {
		align-self: center;
	}

	.bs-foot-navy__in {
		font-size: 13px;
	}

	.bs-advertise {
		width: 100%;
		justify-content: center;
	}
}

/* ---------- 3. Pages not built with Elementor ---------- */

.bs-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px 20px 40px;
}

.bs-content--full {
	max-width: none;
	padding: 0;
}

.bs-title {
	margin: 0 0 20px;
}

.bs-meta {
	margin: -10px 0 20px;
	color: #777;
	font-size: 14px;
}

.bs-thumb {
	margin: 0 0 20px;
}

.bs-entry::after {
	content: "";
	display: table;
	clear: both;
}

.bs-list__item {
	padding: 16px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.bs-list__title {
	margin: 0 0 6px;
	font-size: 22px;
}

.bs-btn,
.bs-btn:visited {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 3px;
	background: #295dad;
	color: #fff;
	text-decoration: none;
}

@media (max-width: 767px) {
	.bs-content {
		padding: 20px 12px 30px;
	}
}

/* ---------- Header and footer, held against site-wide rules ----------
   The old Additional CSS colors every link (a, a:visited) and pads every
   button (5px 40px !important), and Elementor's kit can style links and
   buttons site-wide. The Elementor header was immune through its long
   selectors; these give the theme's header and footer the same footing. */

.bs-header .bs-menu a,
.bs-header .bs-menu a:visited {
	color: var(--bs-nav);
}

.bs-header .bs-menu .sub-menu a,
.bs-header .bs-menu .sub-menu a:visited,
.bs-header .bs-cities__list a,
.bs-header .bs-cities__list a:visited {
	color: #fff;
}

.bs-header .bs-social--top a,
.bs-header .bs-social--top a:visited {
	color: var(--bs-top);
}

.bs-footer .bs-foot-menu a,
.bs-footer .bs-foot-menu a:visited {
	color: var(--bs-foot-link);
}

.bs-footer .bs-social--foot a,
.bs-footer .bs-social--foot a:visited {
	color: #fff;
}

.bs-header .bs-cities__btn {
	padding: 7px 16px !important;
	border-radius: 3px !important;
	background: var(--bs-cities);
	box-shadow: none;
	color: #fff;
}

.bs-header .bs-burger {
	padding: 0 !important;
	border-radius: 4px !important;
	box-shadow: none;
}

@media (max-width: 767px) {
	.bs-header .bs-menu .sub-menu a,
	.bs-header .bs-menu .sub-menu a:visited {
		color: var(--bs-nav);
	}

	.bs-header .bs-cities__btn {
		padding: 11px 16px !important;
	}
}

/* ---------- Digital edition (under the header, every page) ---------- */

.bs-digital {
	padding: 10px 10px 0;
	text-align: center;
}

.bs-digital__banner {
	display: inline-block;
	max-width: 728px;
	width: 100%;
}

.bs-digital__banner img {
	display: block;
	width: 100%;
	height: auto;
}

.bs-digital__btn {
	display: none;
}

@media (max-width: 767px) {
	.bs-digital {
		padding: 8px 10px 0;
	}

	.bs-digital__banner {
		display: none;
	}

	.bs-digital .bs-digital__btn,
	.bs-digital .bs-digital__btn:visited {
		display: inline-block;
		padding: 9px 22px;
		border-radius: 4px;
		color: #fff;
		font-family: var(--bs-ui);
		font-size: 15px;
		font-weight: 700;
		line-height: 1.2;
		text-decoration: none;
	}
}

/* ---------- Ad counter in the yellow band ---------- */

.bs-logo-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.bs-header .bs-count {
	color: #333;
	font-family: var(--bs-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.bs-header .bs-count--nav {
	margin-left: 18px;
}

.bs-header .bs-count--phone {
	display: none;
}

@media (max-width: 767px) {
	.bs-header .bs-count--nav {
		display: none;
	}

	.bs-header .bs-count--phone {
		display: block;
		padding: 2px 4px 4px;
		font-size: 12px;
		text-align: center;
	}
}

/* ---------- Boxed header and footer ----------
   The logo row, the yellow band and both footer bands share the page width
   (Elementor's 1140px), centered, as on the old sites. The thin blue top
   bar stays full width. Settings → Header → Width (0 = full screen). */

.bs-brand,
.bs-band,
.bs-foot-band,
.bs-foot-navy {
	background: transparent;
	padding: 0;
}

.bs-brand > .bs-wrap,
.bs-band > .bs-wrap,
.bs-foot-band > .bs-wrap,
.bs-foot-navy > .bs-wrap,
.bs-top > .bs-wrap {
	max-width: var(--bs-box, 1140px);
	margin-right: auto;
	margin-left: auto;
}

.bs-band > .bs-wrap {
	padding-top: 6px;
	padding-bottom: 6px;
	background: var(--bs-band);
}

.bs-foot-band > .bs-wrap {
	padding-top: 8px;
	padding-bottom: 10px;
	background: var(--bs-band);
}

.bs-foot-navy > .bs-wrap {
	padding-top: 8px;
	padding-bottom: 8px;
	background: var(--bs-navy);
}

.bs-footer {
	margin-top: 10px;
}

@media (max-width: 767px) {
	.bs-band > .bs-wrap {
		padding-top: 4px;
		padding-bottom: 8px;
	}
}

/* Sub-category links added by the theme: underlined, as on the other sites
   (outweighs Elementor's "no underline on links" rules). */
.elementor .bs-subcats a,
.elementor .bs-subcats a:visited {
	color: #000;
	text-decoration: underline;
}

/* ---------- Left banner column: no overlap with the digital-edition strip ----------
   The old Additional CSS pulls the banners up (.ImgBanner{margin-top:-80px})
   and, on some pages, pushes them back down with a wrapper
   (.banner-ads{margin-top:80px}). Where the wrapper is missing (subcategory
   pages), the banners rose into the digital-edition strip. Cancelling both
   halves keeps every page's banners level with its content. */
body.spbs .ImgBanner {
	margin-top: 0 !important;
}

body.spbs .banner-ads,
body.spbs .banner-ads-home {
	margin-top: 0 !important;
}

.bs-digital {
	position: relative;
	z-index: 2;
}

/* "Cambiar Ciudad" button only on phones (on computers it's a menu item). */
@media (min-width: 768px) {
	.bs-header .bs-cities--phone {
		display: none;
	}
}