/* SP-BuenaSuerte-Inicio — the look buenasuerte.com had with Hello Elementor +
   Elementor, written as plain CSS. Sizes and colors match the old layout. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body.bsi {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #333;
	background: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.bsi h1, .bsi h2, .bsi h3, .bsi h4, .bsi h5, .bsi h6 {
	margin-block-start: .5rem;
	margin-block-end: 1rem;
	font-family: inherit;
	font-weight: 500;
	line-height: 1.2;
	color: inherit;
}
.bsi h1 { font-size: 2.5rem; }
.bsi h2 { font-size: 2rem; }
.bsi h3 { font-size: 1.75rem; }
.bsi h4 { font-size: 1.5rem; }
.bsi h5 { font-size: 1.25rem; }
.bsi h6 { font-size: 1rem; }
.bsi p { margin-block-start: 0; margin-block-end: .9rem; }
.bsi a { color: #c36; text-decoration: none; background-color: transparent; }
.bsi a:hover, .bsi a:active { color: #336; }
.bsi b, .bsi strong { font-weight: bolder; }
.bsi small { font-size: 80%; }
.bsi img { max-width: 100%; height: auto; border-style: none; }
.bsi ul, .bsi ol { margin-block-start: 0; margin-block-end: 0; }
.bsi label { display: inline-block; line-height: 1; vertical-align: middle; }
.bsi button, .bsi input, .bsi select, .bsi textarea { font-family: inherit; font-size: 1rem; line-height: 1.5; margin: 0; }
.bsi input[type="date"], .bsi input[type="email"], .bsi input[type="number"], .bsi input[type="password"],
.bsi input[type="search"], .bsi input[type="tel"], .bsi input[type="text"], .bsi input[type="url"],
.bsi select, .bsi textarea {
	width: 100%;
	border: 1px solid #666;
	border-radius: 3px;
	padding: .5rem 1rem;
	transition: all .3s;
}
.bsi select { display: block; }
.bsi [type="button"], .bsi [type="submit"], .bsi button {
	display: inline-block;
	font-weight: 400;
	color: #c36;
	text-align: center;
	white-space: nowrap;
	user-select: none;
	background-color: transparent;
	border: 1px solid #c36;
	padding: .5rem 1rem;
	font-size: 1rem;
	border-radius: 3px;
	transition: all .3s;
	cursor: pointer;
}
.bsi [type="button"]:hover, .bsi [type="submit"]:hover, .bsi button:hover { color: #fff; background-color: #c36; }

.bsi-skip { position: absolute; left: -9999px; top: 0; }
.bsi-skip:focus { left: 10px; top: 10px; z-index: 100; background: #fff; color: #0f508f; padding: 8px 12px; border: 2px solid #0f508f; }
.bsi a:focus-visible, .bsi summary:focus-visible { outline: 3px solid #0f508f; outline-offset: 2px; }

/* ---------- Header ---------- */
.bsi-header__in { max-width: 1140px; margin: 0 auto; padding: 20px; text-align: center; }
.bsi-logo { display: block; margin: 0 0 20px; line-height: 0; }
.bsi-logo img { display: inline-block; max-width: 100%; height: auto; vertical-align: middle; }
.bsi .bsi-tagline { margin: 0; font-size: 2.5rem; font-weight: 500; line-height: 1; color: #000; }

/* ---------- Buttons ---------- */
.bsi a.bsi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	padding: 12px 24px;
	border-radius: 3px;
	color: #fff;
	fill: #fff;
	background-color: #61ce70;
	text-align: center;
	transition: all .3s;
}
.bsi a.bsi-btn:hover, .bsi a.bsi-btn:focus { color: #fff; }
.bsi-ico { height: 1em; width: auto; fill: currentColor; flex: none; }
.bsi .bsi-actions { margin: 0 0 20px; text-align: center; }
/* 1.0.4: anything an ad script drops in beside a button (AdSense "ad intent" links) goes on its own line under it */
.bsi .bsi-actions > :not(.bsi-btn) { display: block !important; width: -moz-fit-content; width: fit-content; margin: 10px auto 0 !important; }

/* outlined, light blue (city buttons, "Versión Impresa") */
.bsi a.bsi-btn--line {
	font-size: 20px;
	padding: 10px;
	border: 2px solid #6ec1e4;
	border-radius: 2px;
	color: #6ec1e4;
	background-color: transparent;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
}
.bsi a.bsi-btn--line:hover, .bsi a.bsi-btn--line:focus { background-color: #6ec1e4; color: #fff; border-color: #32aadd; }
.bsi a.bsi-btn--print { padding: 10px 80px; }
/* solid dark blue ("Métodos de pago Online") */
.bsi a.bsi-btn--navy { font-size: 18px; font-weight: 600; padding: 20px 40px; border-radius: 5px; background-color: #0f508f; }
/* white (footer phone) */
.bsi a.bsi-btn--white { display: inline-block; font-size: 18px; padding: 20px 60px; border-radius: 5px; color: #000; background-color: #fff; }
.bsi a.bsi-btn--white:hover, .bsi a.bsi-btn--white:focus { color: #000; }

/* ---------- Home ---------- */
.bsi-cities { max-width: 1000px; margin: 0 auto; padding: 20px 20px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bsi-cities .bsi-btn { display: flex; }
.bsi-home__more { max-width: 1000px; margin: 0 auto; padding: 71px 10px 10px; }
.bsi-ad--phone { display: none; margin: 0 0 20px; }
.bsi-ad--desktop { width: 75.408%; margin: 0 auto; }
.bsi-ad ins { max-width: 100%; }

/* ---------- Footer ---------- */
.bsi-footer { margin: 0 0 5px; }
.bsi-footer__box { max-width: 1050px; margin: 0 auto; padding: 10px; display: grid; grid-template-columns: 1fr 1fr 1fr; background: #0f508f; border-radius: 8px; }
.bsi-footer__mid { grid-column: 2; padding: 10px; }
.bsi-footer__side { grid-column: 3; padding: 10px; display: flex; align-items: center; justify-content: center; }
.bsi .bsi-footer__call { margin: 0 0 20px; text-align: center; }
.bsi .bsi-footer__copy { margin: 0 0 -6px; color: #fff; }

/* ---------- Pages ---------- */
.bsi-box { width: 100%; margin-inline: auto; }
@media (max-width: 575px) { .bsi-box { padding-inline: 10px; } }
@media (min-width: 576px) { .bsi-box { max-width: 500px; } }
@media (min-width: 768px) { .bsi-box { max-width: 600px; } }
@media (min-width: 992px) { .bsi-box { max-width: 800px; } }
@media (min-width: 1200px) { .bsi-box { max-width: 1140px; } }
.bsi-content { overflow-wrap: break-word; }
.bsi-content::after { content: ""; display: table; clear: both; }

.bsi-wrap { max-width: 1140px; margin: 0 auto; padding: 10px; }
.bsi-wrap--900 { max-width: 900px; }
.bsi-page { display: flex; flex-direction: column; }
.bsi-page > * { margin-top: 0; margin-bottom: 20px; min-width: 0; }
.bsi-page > :last-child { margin-bottom: 0; }
.bsi .bsi-title { margin: 0 0 20px; padding: 0; font-size: 2rem; font-weight: 500; line-height: 1; color: #6ec1e4; }
.bsi-space { margin: 0 0 20px; flex: none; }
.bsi .bsi-icon { margin: 0; height: 56px; line-height: 0; }
.bsi-icon__svg { width: 50px; height: 50px; }
.bsi .bsi-figure { margin: 0 0 20px; text-align: center; line-height: 0; }
.bsi-embed [style*="width:650px"] { max-width: 100%; }

/* open/close lists (was Elementor's "Toggle") */
.bsi-toggle > summary {
	display: block;
	list-style: none;
	cursor: pointer;
	padding: 15px;
	font-weight: 700;
	line-height: 1;
	color: #333;
	border-bottom: 1px solid #d5d8dc;
}
.bsi-toggle > summary::-webkit-details-marker { display: none; }
.bsi-toggle > summary:focus:not(:focus-visible) { outline: 0; }
.bsi-toggle > summary::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 16px;
	margin-right: 4px;
	vertical-align: -2px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bsi-toggle[open] > summary::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3E%3C/svg%3E");
}
.bsi-toggle__body { padding: 15px; border-bottom: 1px solid #d5d8dc; }
.bsi-toggle__body > :last-child { margin-bottom: 0; }

/* Pagos */
.bsi-page--pagos .bsi-toggles { margin-bottom: 60px; } /* 1.0.3: room under Zelle for whatever comes next */
/* 1.0.3: Zelle logo about as wide as half a payment button, keeping its shape */
.bsi .bsi-page--pagos .bsi-icon { height: auto; margin: 10px 0 10px; }
.bsi-page--pagos .bsi-icon__svg { width: 150px; height: auto; aspect-ratio: 1200 / 633; border-radius: 4px; }
/* 1.0.1: the Zelle logo, "Aceptamos Zelle" and its answer sit in the middle, under the buttons */
.bsi-page--pagos .bsi-icon,
.bsi-page--pagos .bsi-toggle > summary,
.bsi-page--pagos .bsi-toggle__body { text-align: center; }

/* 1.0.5: the page title is centered like everything under it */
.bsi-page--pagos .bsi-title { text-align: center; }

/* Preguntas frecuentes */
.bsi-page--faq .bsi-title { font-size: 40px; font-weight: 600; color: #2b65ed; text-align: center; }
.bsi-page--faq .bsi-toggle > summary { color: #2b65ed; }
.bsi-page--faq .bsi-toggle > summary::before { margin-right: 19px; }
.bsi-page--faq .bsi-toggle__body { color: #7a7a7a; }
.bsi-page--faq .bsi-toggle__body p { margin-bottom: 0; }

/* Paypal payment */
.bsi-page--paypal .bsi-title { color: #000; text-align: center; }
.bsi-page--paypal .bsi-embed { padding: 0 200px; }

/* Aumente sus ventas */
.bsi-page--promo { padding: 0; }
.bsi .bsi-page--promo > * { width: 59.16%; margin-left: auto; margin-right: auto; }
.bsi-page--promo .bsi-title { color: #3b5a95; text-align: center; margin-bottom: 10px; }
.bsi-page--promo .bsi-title + .bsi-figure { margin-top: 10px; }
.bsi-page--promo .bsi-photo { width: 40%; height: 250px; border-radius: 200px; }
.bsi-page--promo a.bsi-btn { gap: 15px; font-size: 20px; font-weight: 600; padding: 15px 30px; border-radius: 4px; background-color: #2838d8; }

/* Versión impresa, Puntos de distribución: the middle column */
.bsi-page--impresa, .bsi-page--puntos { padding: 10px 0; }
.bsi-page--impresa > * { margin-left: calc(23.506% + 10px); width: calc(47.21% - 20px); }
.bsi-page--puntos > * { margin-left: calc(24.559% + 10px); width: calc(59.404% - 20px); }

/* titled pages (Privacy Policy, Versión impresa) */
.bsi .bsi-entry-title { margin: .5rem 0 1rem; font-size: 2.5rem; font-weight: 500; line-height: 1.2; }

/* ---------- Tablet and phone ---------- */
@media (max-width: 767px) {
	.bsi-header__in { padding-top: 21px; padding-bottom: 21px; }
	.bsi .bsi-tagline { font-size: 20px; }
	.bsi-cities { grid-template-columns: 1fr; padding: 10px 10px 10px; }
	.bsi-cities .bsi-btn { width: 90%; margin: 0 auto; }
	.bsi-home__more { padding-top: 33px; }
	.bsi-home .bsi-actions .bsi-btn { display: flex; }
	.bsi a.bsi-btn--navy { padding: 15px 20px; }
	.bsi a.bsi-btn--print { font-size: 16px; padding: 15px 40px; }
	.bsi-ad--phone { display: block; }
	.bsi-ad--desktop { display: none; }
	.bsi-footer__box { grid-template-columns: 1fr; }
	.bsi-footer__mid, .bsi-footer__side { grid-column: 1; }
	.bsi-hide-phone { display: none; }
	.bsi-page--pagos a.bsi-btn { display: flex; }
	.bsi-toggle > summary { padding: 12px; }
	.bsi-toggle__body { padding: 12px 10px; }
	.bsi-page--paypal .bsi-embed { padding: 0; }
	.bsi .bsi-page--promo > * { width: 100%; }
	.bsi-page--promo .bsi-photo { width: 70%; }
	.bsi-page--impresa > *, .bsi-page--puntos > * { margin-left: 10px; width: calc(100% - 20px); }
	.bsi-page--impresa [style*="min-width:400px"] { min-width: 0 !important; }
}