/**
 * 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;
	flex-wrap: wrap; /* red de seguridad: nunca ensanchar la página */
	gap: 12px;
	margin-top: 44px;
	max-width: 100%;
}
.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,
.ct-com-pag__prev svg { width: 20px; height: 20px; color: #3AADCA; }
.ct-com-pag__next:hover,
.ct-com-pag__prev:hover { background: #E6F6FA; }
.ct-com-pag__prev svg { transform: scaleX(-1); }   /* misma chevron, apuntando a la izquierda */
.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; }
	/* En columna, el align-items:flex-start del contenedor encoge el main al ancho de
	   su CONTENIDO (los nombres de las cards) → el tamaño de las imágenes variaba
	   según los nombres de cada página al paginar. Ancho completo siempre. */
	.ct-comercios__main { width: 100%; }
	.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; }
	/* En páginas intermedias la fila crece a 7 botones + "…" (prev, 1, n-1, n, n+1,
	   última, next): con 42px + gap 12 desbordaba el viewport (medido: 421px en un
	   móvil de 390) y el navegador perdía el layout responsive. Compactado para que
	   el caso máximo quepa incluso en 320px. */
	.ct-comercios__pag { gap: 6px; margin-top: 36px; }
	.ct-com-pag__btn { width: 38px; height: 38px; font-size: 14px; }
	.ct-com-pag__next svg,
	.ct-com-pag__prev svg { width: 18px; height: 18px; }
}
@media (max-width: 359px) {
	.ct-com-pag__btn { width: 34px; height: 34px; font-size: 13px; }
}

/* =========================================================
   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; }
}

/* =========================================================
   DETALLE — fix móvil/tablet: el header del tema es FIJO y en pantallas chicas
   se solapaba sobre el banner (lo ocultaba) y sobre el link "Volver a comercios"
   (un overlay invisible del header interceptaba el tap → el botón "no funcionaba").
   (1) clearance arriba = alto del header (mismo criterio que los banners de las
       demás páginas: 64px tablet / 56px móvil) → el banner baja y se ve, y el link
       queda debajo del header.
   (2) el link "Volver" se sube por encima del overlay del header para que reciba
       el tap aunque ese overlay siga presente.
   NOTA: el header móvil depende de JS del tema (no es fiable en headless); verificar
   el "Volver" en un teléfono real.
   ========================================================= */
/* Desktop: el banner arrancaba en y=0 y el header fijo (~73px) le tapaba la parte
   superior → se veía distinto al banner de la página principal (que sí tiene este
   clearance). Igualamos: 72px desktop / 64px tablet / 56px móvil. */
body.single-comercio .ct-comercio-single { padding-top: 72px; }
@media (max-width: 1024px) {
	/* 64px = mismo clearance que usa la SECCIÓN del banner en la página principal de
	   comercios (medido: padding-top 64px en móvil). Con 56px el header recortaba el
	   borde superior del banner del detalle y se veía más corto. Tablet + móvil. */
	body.single-comercio .ct-comercio-single { padding-top: 64px; }

	/* El "Volver" NO recibía el tap: el header del tema es position:fixed con
	   z-index:9999 y su .sticky-wrapper se extiende (zona muerta) por debajo de la
	   barra visible, sobre el contenido. El link vive en .site (z-index:1), un
	   stacking context INFERIOR, así que su z-index nunca le gana al header (9999).
	   Solución: la zona muerta del wrapper deja pasar los clicks (pointer-events:none),
	   pero la barra visible (logo, hamburguesa, menú) sigue clickeable (> * = auto). */
	body.single-comercio header.site-header { pointer-events: none; }
	body.single-comercio header.site-header .sticky-wrapper > *,
	body.single-comercio header.site-header .navbar-inner { pointer-events: auto; }
}