/* =============================================================
   PUNTOS DE VENTA — listado de sucursales + mapa OSM
   ============================================================= */

.pf-puntos {
	padding: 60px 0 90px;
}

.pf-puntos-head {
	text-align: center;
	margin-bottom: 48px;
}

.pf-puntos-head .pf-eyebrow-yellow {
	margin-bottom: 12px;
	font-size: 23px;
	color: #f4df35;
}

.pf-puntos-head .pf-section-title-lg {
	margin: 0;
	font-size: 55px;
	font-family: 'Londrina Solid', sans-serif;
}

/* --- Filtro por provincia --- */
.pf-puntos-filtros {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 40px;
}

.pf-filtro {
	background: var(--pf-bg);
	color: var(--pf-white);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	padding: 9px 22px;
	font-family: 'Onest', sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background var(--pf-transition), color var(--pf-transition), border-color var(--pf-transition);
}

.pf-filtro:hover {
	border-color: var(--pf-red);
}

.pf-filtro.is-active {
	background: var(--pf-red);
	border-color: var(--pf-red);
	color: #ffffff;
}

/* --- Grid de tarjetas --- */
.pf-puntos-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}

.pf-punto-card {
	background: var(--pf-bg);
	border-radius: 0 0 14px 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform var(--pf-transition), box-shadow var(--pf-transition);
}

.pf-punto-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.pf-punto-img {
	height: 485px;
	background-color: var(--pf-bg-dark);
	background-size: cover;
	background-position: center;
}

.pf-punto-body {
	padding: 20px 22px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
	text-align: center;
}

.pf-punto-zona {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--pf-yellow);
	text-transform: uppercase;
	margin: 0 0 6px;
}

.pf-punto-nombre {
	font-family: 'Londrina Solid', sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.15;
	color: var(--pf-white);
	margin: 0 0 18px;
}

.pf-punto-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: auto;
}

/* --- Botón WhatsApp (color de marca) --- */
.pf-btn-whatsapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #25d366;
	color: #ffffff;
	font-family: 'Londrina Solid', sans-serif;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 15px 38px;
	border-radius: 6px;
	transition: background var(--pf-transition);
}

.pf-btn-whatsapp:hover {
	background: #1ebe5b;
	color: #ffffff;
}

/* --- Botón Waze (borde y logo en color de marca) --- */
.pf-btn-waze {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: transparent;
	color: #33ccff;
	font-family: 'Londrina Solid', sans-serif;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 15px 38px;
	border: 2px solid #33ccff;
	border-radius: 6px;
	transition: background var(--pf-transition), color var(--pf-transition);
}

.pf-btn-waze:hover {
	background: #33ccff;
	color: #ffffff;
}

.pf-btn-whatsapp svg,
.pf-btn-waze svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	flex-shrink: 0;
}

/* Igualar ambos botones (gana a .pf-btn-sm por especificidad). */
.pf-punto-actions .pf-btn-whatsapp,
.pf-punto-actions .pf-btn-waze {
	font-size: 15px;
	padding: 11px 18px;
	letter-spacing: 0.03em;
	flex: 1;
}

/* --- Botón Mapa (segunda línea, centrado) --- */
.pf-punto-actions-map {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

.pf-btn-mapa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: transparent;
	color: var(--pf-white);
	border: 2px solid rgba(255, 255, 255, 0.25);
	border-radius: 6px;
	padding: 11px 26px;
	font-family: 'Londrina Solid', sans-serif;
	font-size: 15px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	transition: background var(--pf-transition), border-color var(--pf-transition), color var(--pf-transition);
}

.pf-btn-mapa:hover {
	background: var(--pf-white);
	border-color: var(--pf-white);
	color: var(--pf-bg-dark);
}

.pf-btn-mapa svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
	flex-shrink: 0;
}

/* --- Horarios --- */
.pf-punto-horarios {
	font-size: 13px;
	line-height: 1.5;
	color: var(--pf-gray);
	margin: 0 0 16px;
}

.pf-punto-horarios p { margin: 0 0 4px; }
.pf-punto-horarios :last-child { margin-bottom: 0; }

/* --- Contenido del editor --- */
.pf-puntos-content {
	max-width: 900px;
	margin: 64px auto 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--pf-gray);
}

.pf-puntos-content h2,
.pf-puntos-content h3 {
	font-family: 'Londrina Solid', sans-serif;
	color: var(--pf-white);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.15;
	margin: 30px 0 12px;
}

.pf-puntos-content h2:first-child,
.pf-puntos-content h3:first-child { margin-top: 0; }

.pf-puntos-content p { margin: 0 0 16px; }
.pf-puntos-content p:last-child { margin-bottom: 0; }

/* --- Mapa --- */
.pf-puntos-map-wrap {
	margin-top: 72px;
}

.pf-puntos-map-wrap .pf-section-title {
	text-align: center;
}

.pf-puntos-map {
	width: 100%;
	height: 520px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--pf-bg);
	z-index: 0;
}

/* Popups de Leaflet en tema oscuro */
.pf-puntos-map .leaflet-popup-content-wrapper {
	background: var(--pf-bg);
	color: var(--pf-white);
	border-radius: 10px;
}

.pf-puntos-map .leaflet-popup-tip {
	background: var(--pf-bg);
}

.pf-map-popup {
	text-align: center;
	min-width: 180px;
}

.pf-map-popup-img {
	width: 100%;
	height: 110px;
	background-size: cover;
	background-position: center;
	border-radius: 8px;
	margin-bottom: 10px;
}

.pf-map-popup h4 {
	font-family: 'Londrina Solid', sans-serif;
	font-size: 18px;
	font-weight: 400;
	margin: 0 0 10px;
	color: var(--pf-white);
}

.pf-map-popup-actions {
	display: flex;
	gap: 8px;
	justify-content: center;
}

.pf-map-popup-actions a {
	font-family: 'Londrina Solid', sans-serif;
	font-size: 14px;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 5px;
}

.pf-map-popup-actions .pf-wa {
	background: #25d366;
	color: #fff;
}

.pf-map-popup-actions .pf-waze {
	background: #33ccff;
	color: #fff !important;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
	.pf-puntos-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
	.pf-puntos-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
	.pf-puntos-map { height: 420px; }
	.pf-punto-actions .pf-btn-whatsapp,
	.pf-punto-actions .pf-btn-waze { font-size: 14px; padding: 11px 12px; }
}

@media (max-width: 480px) {
	.pf-puntos-grid { grid-template-columns: 1fr; }
}