/**
 * CrediTotal - Listado y detalle de comercios.
 * Fuente Gilroy (woff2 en wp-content/uploads/fonts).
 */

@font-face {
	font-family: 'Gilroy-Heavy';
	src: url('../../../../uploads/fonts/Gilroy-Heavy.woff2') format('woff2');
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Gilroy-Regular';
	src: url('../../../../uploads/fonts/Gilroy-Regular.woff2') format('woff2');
	font-weight: 300 600;
	font-style: normal;
	font-display: swap;
}

/* =========================================================
   LAYOUT: grid (izq) + sidebar (der)
   ========================================================= */
.ct-comercios {
	display: flex;
	align-items: flex-start;
	gap: 56px;
	color: #1F2933;
}
.ct-comercios__main { flex: 1 1 auto; min-width: 0; }
.ct-comercios__sidebar { flex: 0 0 300px; width: 300px; }

/* ---- Grid de cards ---- */
.ct-comercios__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	transition: opacity .2s ease;
}
.ct-comercios__grid.is-loading { opacity: .45; pointer-events: none; }

.ct-com-card { display: block; text-decoration: none; color: inherit; }
.ct-com-card__img {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 18px;
	background-size: cover;
	background-position: center;
	background-color: #EEF2F6;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .25s ease, box-shadow .25s ease;
}
.ct-com-card:hover .ct-com-card__img {
	transform: translateY(-4px);
	box-shadow: 0 18px 36px -18px rgba(15, 23, 42, .35);
}
.ct-com-card__icon svg { width: 64px; height: 64px; color: #C3CDD8; }
.ct-com-card__name {
	margin: 16px 0 0;
	/* Figma: título de card en peso normal (Gilroy-Regular), NO Heavy.
	   !important + clase para ganarle a la regla global `h1,h2,h3,h5{font-family:'Gilroy Heavy'!important}`. */
	font-family: 'Gilroy-Regular', sans-serif !important;
	font-weight: 400 !important;
	font-size: 18px;
	line-height: 1.25;
	color: #1F2933;
}

/* ---- Paginación ---- */
.ct-comercios__pag {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin-top: 44px;
}
.ct-com-pag__btn {
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	border-radius: 50%;
	font-family: 'Gilroy-Heavy', sans-serif;
	font-size: 16px;
	color: #64748B;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.ct-com-pag__btn:hover { background: #F1F5F9; }
.ct-com-pag__btn.is-active { background: #3AADCA; color: #fff; }
.ct-com-pag__next svg { width: 20px; height: 20px; color: #3AADCA; }
.ct-com-pag__next:hover { background: #E6F6FA; }
.ct-com-pag__dots { color: #94A3B8; padding: 0 2px; }

.ct-comercios__empty {
	text-align: center;
	color: #64748B;
	font-size: 16px;
	padding: 48px 0;
}

/* =========================================================
   SIDEBAR: buscador + ubicaciones
   ========================================================= */
.ct-com-search { position: relative; }
.ct-com-search__input {
	width: 100%;
	height: 50px;
	border: 1px solid #E2E8F0;
	border-radius: 10px;
	padding: 0 46px 0 16px;
	font-family: 'Gilroy-Regular', sans-serif;
	font-size: 15px;
	color: #1F2933;
	background: #fff;
	box-sizing: border-box;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.ct-com-search__input::placeholder { color: #94A3B8; }
.ct-com-search__input:focus {
	outline: none;
	border-color: #3AADCA;
	box-shadow: 0 0 0 3px rgba(58, 173, 202, .12);
}
.ct-com-search__icon {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: #3AADCA;
	display: inline-flex;
	pointer-events: none;
}
.ct-com-search__icon svg { width: 20px; height: 20px; }

.ct-com-sidebar__title {
	margin: 28px 0 10px;
	font-family: 'Gilroy-Heavy', sans-serif;
	font-weight: 400;
	font-size: 22px;
	color: #1F2933;
}

.ct-com-locs {
	max-height: 560px;
	overflow-y: auto;
	padding-right: 4px;
}
.ct-com-locs::-webkit-scrollbar { width: 6px; }
.ct-com-locs::-webkit-scrollbar-thumb { background: #D8E0E8; border-radius: 6px; }

.ct-com-loc {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 12px 14px;
	border: none;
	border-bottom: 1px solid #F1F5F9;
	background: transparent;
	text-align: left;
	cursor: pointer;
	color: #1F2933;
	font-family: 'Gilroy-Heavy', sans-serif;
	font-size: 13.5px;
	letter-spacing: .02em;
	text-transform: uppercase;
	border-radius: 8px;
	transition: background .15s ease, color .15s ease;
}
.ct-com-loc[data-slug=""] .ct-com-loc__txt { text-transform: none; }
.ct-com-loc__pin { display: inline-flex; flex: 0 0 auto; color: #94A3B8; }
.ct-com-loc__pin svg { width: 16px; height: 16px; }
.ct-com-loc__txt { flex: 1 1 auto; min-width: 0; }
.ct-com-loc:hover { background: #F7F9FB; }
.ct-com-loc.is-active {
	background: #E6F6FA;
	color: #3AADCA;
	border-bottom-color: transparent;
}
.ct-com-loc.is-active .ct-com-loc__pin { color: #3AADCA; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
	.ct-comercios { flex-direction: column; gap: 32px; }
	.ct-comercios__sidebar { order: -1; width: 100%; flex-basis: auto; }
	.ct-com-locs { max-height: 280px; }
	.ct-com-sidebar__title { margin-top: 22px; }
}
@media (max-width: 767px) {
	.ct-comercios__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.ct-com-card__name { font-size: 16px; margin-top: 12px; }
	.ct-com-card__icon svg { width: 48px; height: 48px; }
	.ct-com-pag__btn { width: 42px; height: 42px; font-size: 15px; }
}

/* =========================================================
   DETALLE DE UN COMERCIO (single-comercio)
   ========================================================= */
.ct-comercio-single { color: #1F2933; }

/* Banner a sangre completa (rompe cualquier contenedor del tema) */
.ct-com-banner {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	line-height: 0;
}
.ct-com-banner img { width: 100%; height: auto; display: block; }

.ct-com-detail {
	max-width: 1255px;
	margin: 0 auto;
	padding: 0 16px 90px;
	box-sizing: border-box;
}

/* Volver a comercios (en negrita, como el Figma) */
.ct-com-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 30px 0 36px;
	color: #3AADCA;
	font-family: 'Gilroy-Heavy', sans-serif;
	font-weight: 800;
	font-size: 15px;
	text-decoration: none;
}
.ct-com-back span {
	font-family: 'Gilroy-Heavy', sans-serif;
	font-weight: 800;
}
.ct-com-back svg { width: 20px; height: 20px; }
.ct-com-back:hover { color: #2E94AE; }

/* Foto + info */
.ct-com-detail__top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}
.ct-com-detail__photo {
	aspect-ratio: 1 / 1;
	border-radius: 20px;
	background-size: cover;
	background-position: center;
	background-color: #EEF2F6;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.ct-com-detail__icon svg { width: 96px; height: 96px; color: #C3CDD8; }

.ct-com-detail__name {
	margin: 0 0 22px;
	font-family: 'Gilroy-Heavy', sans-serif;
	font-weight: 400;
	font-size: 44px;
	line-height: 1.1;
	color: #1F2933;
}
.ct-com-detail__addr {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.ct-com-detail__pin { flex: 0 0 auto; color: #3AADCA; margin-top: 2px; }
.ct-com-detail__pin svg { width: 22px; height: 22px; }
.ct-com-detail__addr p {
	margin: 0;
	font-family: 'Gilroy-Regular', sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: #475569;
}
.ct-com-detail__map {
	margin-top: 32px;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 16px 38px -20px rgba(15, 23, 42, .25);
	/* El iframe se inyecta por JS tras window.load: reservar el alto desde el
	   inicio (sin layout shift) y mostrar un placeholder mientras llega. */
	position: relative;
	min-height: 360px;
	background: #eef2f6;
}
.ct-com-detail__map iframe {
	display: block;
	width: 100%;
	height: 360px;
	border: 0;
}
.ct-com-map-ph {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: #94a3b8;
	animation: ct-com-map-pulse 1.6s ease-in-out infinite;
	/* decorativo: nunca debe interceptar clicks del mapa que queda debajo */
	pointer-events: none;
}
.ct-com-map-ph__pin svg { width: 34px; height: 34px; display: block; }
.ct-com-map-ph__txt {
	font-family: 'Gilroy-Regular', sans-serif;
	font-size: 13px;
	letter-spacing: .4px;
}
.ct-com-detail__map.is-loaded .ct-com-map-ph { display: none; }
@keyframes ct-com-map-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .45; }
}

/* Otros comercios */
.ct-com-otros { margin-top: 80px; }
.ct-com-otros__title {
	margin: 0 0 32px;
	font-family: 'Gilroy-Heavy', sans-serif;
	font-weight: 400;
	font-size: 32px;
	color: #1F2933;
}
.ct-com-otros__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

@media (max-width: 1024px) {
	.ct-com-detail__top { grid-template-columns: 1fr; gap: 28px; }
	.ct-com-detail__photo { max-width: 520px; }
	.ct-com-otros__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.ct-com-detail__name { font-size: 32px; }
	.ct-com-otros__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.ct-com-otros__title { font-size: 26px; }
	.ct-com-detail__map iframe { height: 280px; }
	.ct-com-detail__map { min-height: 280px; }
}