/* ==========================================================================
   Cofune · Tema 2026
   --------------------------------------------------------------------------
   Capa visual que se carga la ÚLTIMA en las páginas públicas (portada,
   listados, directorio y mapa). No cambia el HTML ni los ids que usa el
   JavaScript heredado: sólo redefine tipografía, color, espaciado y
   componentes. Para volver al aspecto anterior basta con no cargarla.
   ========================================================================== */

:root {
	--cf-ink: #15213a;
	--cf-ink-2: #34405a;
	--cf-muted: #667085;
	--cf-bg: #f6f4ef;
	--cf-surface: #ffffff;
	--cf-line: #e7e2d8;
	--cf-line-2: #d9d3c6;
	--cf-brand: #1f4fa3;
	--cf-brand-600: #163d82;
	--cf-brand-50: #eef3fb;
	--cf-brand-100: #dce7f7;
	--cf-accent: #a87b3e;
	--cf-accent-50: #f7efe3;
	--cf-ok: #2f7d5b;
	--cf-radius: 14px;
	--cf-radius-sm: 10px;
	--cf-shadow: 0 1px 2px rgba(21, 33, 58, .05), 0 8px 24px rgba(21, 33, 58, .06);
	--cf-shadow-lg: 0 2px 4px rgba(21, 33, 58, .06), 0 18px 48px rgba(21, 33, 58, .12);
	--cf-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
	--cf-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------- Base -------------------------------------------------------- */

html, body {
	background: var(--cf-bg) !important;
	color: var(--cf-ink-2);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*:where(:not(.glyphicon, .glyphicons, [class*="fa-"], [class*="glyphicon-"])) {
	font-family: var(--cf-sans) !important;
}

* { font-size: inherit; }
body { font-size: 15px; line-height: 1.55; }

h1, h2, h3,
#panel .title_intro, #panel .title_intro *,
#panel .title, .seo-content h2 {
	font-family: var(--cf-serif) !important;
	color: var(--cf-ink) !important;
	letter-spacing: -0.01em;
}

a { color: var(--cf-brand); }
a:hover, a:focus { color: var(--cf-brand-600); }

::selection { background: var(--cf-brand-100); color: var(--cf-ink); }

:focus-visible {
	outline: 3px solid rgba(31, 79, 163, .35) !important;
	outline-offset: 2px;
}

/* ---------- Botones ----------------------------------------------------- */

.btn {
	border-radius: 999px !important;
	font-weight: 600 !important;
	letter-spacing: .01em;
	transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.btn-primary, .btn-info,
#go_assist, #go_assist_bottom {
	background: var(--cf-brand) !important;
	border-color: var(--cf-brand) !important;
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(31, 79, 163, .25);
}

.btn-primary:hover, .btn-info:hover,
#go_assist:hover, #go_assist_bottom:hover {
	background: var(--cf-brand-600) !important;
	border-color: var(--cf-brand-600) !important;
	transform: translateY(-1px);
}

#go_assist, #go_assist_bottom {
	padding: 15px 34px !important;
	font-size: 16px !important;
}

/* ==========================================================================
   PORTADA (asistente)
   ========================================================================== */

#wrapper, #content { background: transparent !important; }

#topbar {
	height: auto !important;
	padding: 10px 24px 0 0 !important;
	font-size: 13.5px;
}

#topbar .item, #topbar .item * { color: var(--cf-ink-2) !important; }
#topbar .item:hover span { color: var(--cf-brand) !important; }

#navbar {
	max-width: 1080px !important;
	height: auto !important;
	margin: 6px auto 0 !important;
	padding: 6px 20px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

#navbar .left, #navbar .right { float: none !important; }

/* Pasos del asistente como "píldoras" */
.steps { display: flex; gap: 6px; flex-wrap: wrap; }

.steps .step {
	background: var(--cf-surface) !important;
	border: 1px solid var(--cf-line) !important;
	border-radius: 999px !important;
	padding: 6px 14px 6px 6px !important;
	color: var(--cf-muted) !important;
	font-size: 13px !important;
	height: auto !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.steps .step::before, .steps .step::after { display: none !important; }

.steps .step .number {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--cf-bg) !important;
	color: var(--cf-ink-2) !important;
	margin-right: 6px;
	font-weight: 700;
	font-size: 12px !important;
}

.steps .step.current, .steps .step.active, .steps .step.selected,
.steps .step[class*="on"] {
	border-color: var(--cf-brand) !important;
	color: var(--cf-brand) !important;
	background: var(--cf-brand-50) !important;
}

.steps .step.current .number, .steps .step.active .number,
.steps .step.selected .number, .steps .step[class*="on"] .number {
	background: var(--cf-brand) !important;
	color: #fff !important;
}

/* Hero */
#panel {
	position: relative;
	min-height: 360px !important;
	padding: 64px 24px 72px !important;
	background:
		radial-gradient(1200px 380px at 50% -40px, rgba(31, 79, 163, .10), transparent 70%),
		radial-gradient(600px 260px at 88% 110%, rgba(168, 123, 62, .10), transparent 70%),
		linear-gradient(180deg, #fbfaf7 0%, var(--cf-bg) 100%) !important;
	border-top: 1px solid var(--cf-line);
	border-bottom: 1px solid var(--cf-line);
	filter: none !important;
}

#panel .block { max-width: 760px !important; }

#panel .title_intro {
	margin-bottom: 18px !important;
	font-size: clamp(30px, 4.4vw, 50px) !important;
	line-height: 1.08 !important;
}

#panel .title_intro h1, #panel .title_intro strong {
	font-size: inherit !important;
	font-weight: 600 !important;
	margin: 0;
}

#panel .title_text, #panel .title_text h2 {
	font-family: var(--cf-sans) !important;
	font-size: clamp(16px, 1.7vw, 19px) !important;
	line-height: 1.6 !important;
	color: var(--cf-muted) !important;
	font-weight: 400 !important;
	margin: 0 auto 30px !important;
	max-width: 620px;
}

#panel .title {
	font-size: clamp(22px, 2.6vw, 30px) !important;
	font-weight: 600 !important;
	margin-bottom: 26px !important;
}

/* Respuestas del asistente: tarjetas seleccionables */
#panel .answers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 12px;
	max-width: 640px;
	margin: 0 auto;
}

#panel .answers p {
	position: relative;
	margin: 0 !important;
	background: var(--cf-surface);
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-radius-sm);
	box-shadow: var(--cf-shadow);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

#panel .answers p:hover {
	border-color: var(--cf-brand);
	box-shadow: var(--cf-shadow-lg);
	transform: translateY(-2px);
}

/* La tarjeta entera es el botón: sin círculo de radio, con flecha de avance */
#panel .answers label {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 64px;
	padding: 16px 18px 16px 20px !important;
	left: 0 !important;
	margin: 0 !important;
	cursor: pointer;
	color: var(--cf-ink) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.3;
	text-align: left;
}

#panel .answers label::after {
	content: "";
	flex: none;
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--cf-brand-50) no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f4fa3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	transition: background-color .15s ease, transform .15s ease;
}

#panel .answers p:hover label::after { transform: translateX(3px); }

#panel .answers .input { display: none !important; }

/* Opción elegida al volver atrás en el asistente */
#panel .answers p:has(.input.on) { border-color: var(--cf-brand); box-shadow: 0 0 0 3px var(--cf-brand-50), var(--cf-shadow); }
#panel .answers p:has(.input.on) label::after {
	background-color: var(--cf-brand);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

@media (max-width: 600px) {
	#panel .answers { grid-template-columns: 1fr; gap: 10px; }
}

#assist_provinces, #assist_cities { margin-top: 6px; }

#panel .info-container .info {
	color: var(--cf-muted) !important;
	font-size: 13.5px !important;
	margin-top: 16px;
}

/* Selectores (bootstrap-select) */
.bootstrap-select .btn, .bootstrap-select > .dropdown-toggle {
	border-radius: var(--cf-radius-sm) !important;
	border: 1px solid var(--cf-line-2) !important;
	background: var(--cf-surface) !important;
	color: var(--cf-ink) !important;
	box-shadow: none !important;
	min-height: 46px;
	font-weight: 500 !important;
}

.dropdown-menu {
	border-radius: var(--cf-radius-sm) !important;
	border: 1px solid var(--cf-line) !important;
	box-shadow: var(--cf-shadow-lg) !important;
	padding: 6px !important;
}

.dropdown-menu li a { border-radius: 8px; }
.dropdown-menu li a:hover, .dropdown-menu li a:focus { background: var(--cf-brand-50) !important; color: var(--cf-brand) !important; }

/* Ventajas y contadores */
#icons {
	background: transparent !important;
	max-width: 1080px;
	margin: 0 auto;
	padding: 48px 20px 30px !important;
}

#icons > .point {
	background: var(--cf-surface);
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-radius);
	box-shadow: var(--cf-shadow);
	max-width: 240px !important;
	width: calc(25% - 18px);
	min-width: 210px;
	margin: 8px;
	padding: 24px 20px !important;
	text-align: left;
}

#icons .point_icon {
	width: 46px !important;
	height: 46px !important;
	margin: 0 0 14px !important;
	border-radius: 12px;
	background-color: var(--cf-brand-50) !important;
	background-size: 28px !important;
	background-position: center !important;
}

#icons .point_title {
	font-family: var(--cf-serif) !important;
	color: var(--cf-ink) !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	margin-bottom: 6px;
}

#icons .point_text { color: var(--cf-muted) !important; font-size: 14px !important; line-height: 1.55; }

#icons hr { border-color: var(--cf-line) !important; margin: 36px auto !important; max-width: 760px; }

#counters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 40px; }

#counters .point { background: none; border: 0; box-shadow: none; text-align: center; }

#counters .count-title {
	font-family: var(--cf-serif) !important;
	font-size: 38px !important;
	font-weight: 600 !important;
	color: var(--cf-ink) !important;
	line-height: 1.1;
}

#counters .count-text {
	color: var(--cf-muted) !important;
	font-size: 12.5px !important;
	text-transform: uppercase;
	letter-spacing: .08em;
}

/* Resultados del asistente */
#result-header {
	font-family: var(--cf-serif) !important;
	font-size: 24px !important;
	color: var(--cf-ink) !important;
	text-align: center;
	margin-bottom: 18px;
}

.result-block {
	background: var(--cf-surface) !important;
	border: 1px solid var(--cf-line) !important;
	border-radius: var(--cf-radius) !important;
	box-shadow: var(--cf-shadow) !important;
	overflow: hidden;
}

#result-cheapest, #result-recom {
	background: var(--cf-brand-50) !important;
	color: var(--cf-brand) !important;
	font-weight: 600 !important;
	border: 0 !important;
}

#result-recom { background: var(--cf-accent-50) !important; color: var(--cf-accent) !important; }

.result-name { font-family: var(--cf-serif) !important; color: var(--cf-ink) !important; font-size: 18px !important; }
.result-photo img { border-radius: var(--cf-radius-sm); }

#go_results, #go_repeat {
	border-radius: 999px !important;
	border-color: var(--cf-line-2) !important;
	color: var(--cf-brand) !important;
	padding: 8px 18px !important;
	max-width: 260px !important;
}

/* ==========================================================================
   LISTADOS (/funerarias/...)
   ========================================================================== */

body { background-image: none !important; }

.wrapper {
	background: transparent !important;
	max-width: 1200px !important;
}

/* Barra superior: clara, con el menú en tinta */
#topbar-nav { max-width: none !important; }

.content > #topbar {
	height: 72px !important;
	padding: 0 !important;
	background: rgba(255, 255, 255, .85);
	border-bottom: 1px solid var(--cf-line);
	-webkit-backdrop-filter: saturate(1.4) blur(8px);
	backdrop-filter: saturate(1.4) blur(8px);
}

#menu { height: 72px !important; }

.menu-item .menu-label, .menu-item .menu-phone, #locale_sel {
	color: var(--cf-ink-2) !important;
	font-size: 14px !important;
	font-weight: 500;
}

#menu a { text-decoration: none !important; }
#menu a:hover .menu-label, #menu a:hover .menu-phone { color: var(--cf-brand) !important; }

#menu .menu-icon, .filters-open-btn { filter: brightness(0) saturate(100%) opacity(.55); }

#info_list, #locale_list {
	background: var(--cf-surface) !important;
	border: 1px solid var(--cf-line) !important;
	border-radius: var(--cf-radius-sm) !important;
	box-shadow: var(--cf-shadow-lg) !important;
	color: var(--cf-ink-2) !important;
	overflow: hidden;
}

#info_list li:hover, #locale_list li:hover { background: var(--cf-brand-50) !important; color: var(--cf-brand) !important; }

/* Panel de filtros */
.filters {
	background: var(--cf-surface) !important;
	border-right: 1px solid var(--cf-line);
	box-shadow: none;
	min-height: 100%;
}

.filters-header {
	background: var(--cf-surface) !important;
	border-bottom: 1px solid var(--cf-line);
	height: 72px !important;
}

.logo {
	top: 18px !important;
	left: 40px !important;
	width: 151px !important;
	height: 42px !important;
	padding: 0 !important;
	background: url("/img/admin/logo-mail.png") no-repeat left center !important;
}

.filters-close-btn { filter: brightness(0) opacity(.5); }

.panels .panel-title {
	font-family: var(--cf-sans) !important;
	color: var(--cf-ink) !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: 11.5px !important;
}

.panels .panel-content { color: var(--cf-ink-2); }

.panels .price_slider .noUi-connect, .panels .price .noUi-connect { background: var(--cf-brand) !important; }

.panels .price_slider .noUi-handle {
	border-radius: 50% !important;
	border: 2px solid var(--cf-brand) !important;
	box-shadow: 0 2px 6px rgba(21, 33, 58, .2) !important;
}

.panels .type .service-filter-group,
.panels .service-filter-type .type-button,
.panels .service-filter-field .field-button {
	border-radius: 999px !important;
	border-color: var(--cf-line-2) !important;
}

.panels .type .on, .panels .service-filter-type .on, .panels .value .on {
	/* background-color, no background: el atajo borraba la imagen de las estrellas */
	background-color: var(--cf-brand-50) !important;
	border-color: var(--cf-brand) !important;
	color: var(--cf-brand) !important;
}

/* Cabecera del listado: el H1 pasa a ser visible (antes estaba oculto) */
.area { max-width: 820px !important; }

.area h1.sp {
	position: static !important;
	top: auto !important;
	margin: 6px 0 16px !important;
	font-size: clamp(24px, 3vw, 34px) !important;
	font-weight: 600 !important;
	line-height: 1.15;
}

#order {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	color: var(--cf-muted);
	margin-bottom: 14px;
}

#order .left, #order .right { float: none !important; }
#order .highlight { color: var(--cf-ink) !important; font-weight: 600; }

/* Tarjetas de servicio */
#services-list { border-top: 0 !important; }

.service {
	background: var(--cf-surface);
	border: 1px solid var(--cf-line) !important;
	border-radius: var(--cf-radius);
	box-shadow: var(--cf-shadow);
	margin-top: 16px !important;
	padding: 18px;
	transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.service:last-child { border-bottom: 1px solid var(--cf-line) !important; }

.service:hover {
	border-color: var(--cf-brand-100) !important;
	box-shadow: var(--cf-shadow-lg);
	transform: translateY(-1px);
}


.service-photo img {
	border: 0 !important;
	padding: 0 !important;
	border-radius: var(--cf-radius-sm);
	box-shadow: 0 2px 8px rgba(21, 33, 58, .08);
}

.service-name a, .service-name span.type-1 {
	font-family: var(--cf-serif) !important;
	color: var(--cf-ink) !important;
	font-size: 19px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

.service-name .btn.service-info {
	background: transparent !important;
	color: var(--cf-brand) !important;
	border: 1px solid var(--cf-brand-100) !important;
	box-shadow: none !important;
	padding: 2px 10px !important;
	font-size: 12px !important;
	margin-left: 8px;
	vertical-align: 3px;
}

.service-name .btn.service-info:hover { background: var(--cf-brand-50) !important; }

.service-description { color: var(--cf-muted) !important; font-size: 14px !important; line-height: 1.6; }

.service-price-block {
	width: 120px !important;
	height: auto !important;
	display: block !important;
	padding: 12px 6px 8px;
	border: 1px solid var(--cf-line) !important;
	border-bottom: 0 !important;
	border-radius: var(--cf-radius-sm) var(--cf-radius-sm) 0 0;
	background: #fbfaf7;
}

.service-price {
	font-family: var(--cf-serif) !important;
	font-size: 26px !important;
	font-weight: 600 !important;
	color: var(--cf-ink) !important;
	height: auto !important;
	line-height: 1.1;
}

.service-tax { color: var(--cf-muted) !important; font-size: 11px !important; }

.service-interested button,
.service-interested button:active,
.service-interested button:visited,
.service-interested button:focus {
	width: 120px !important;
	height: 38px !important;
	border-radius: 0 0 var(--cf-radius-sm) var(--cf-radius-sm) !important;
	background: var(--cf-brand) !important;
	box-shadow: none !important;
	font-size: 13.5px !important;
}

.service-interested button:hover { background: var(--cf-brand-600) !important; transform: none; }

.service-data .recommend { color: var(--cf-muted) !important; font-size: 12px !important; }


.pagination > li > a, .pagination > li > span {
	border-radius: 8px !important;
	margin: 0 3px;
	border-color: var(--cf-line) !important;
	color: var(--cf-ink-2) !important;
}

.pagination > .active > a, .pagination > .active > span {
	background: var(--cf-brand) !important;
	border-color: var(--cf-brand) !important;
	color: #fff !important;
}

/* Bloque de contenido SEO */
.seo-content {
	max-width: 820px !important;
	border: 1px solid var(--cf-line) !important;
	border-radius: var(--cf-radius) !important;
	box-shadow: var(--cf-shadow);
	padding: 32px 30px !important;
	color: var(--cf-ink-2) !important;
}

.seo-content h2 { font-size: 26px !important; margin-bottom: 12px !important; }
.seo-content h3 { font-family: var(--cf-serif) !important; color: var(--cf-brand) !important; font-size: 19px !important; }
.seo-content p { font-size: 15px !important; line-height: 1.7; }

.fallback-notice { border-radius: var(--cf-radius-sm) !important; }

/* ==========================================================================
   Modales (bootstrap)
   ========================================================================== */

.modal-backdrop.in { opacity: .45 !important; background: var(--cf-ink); }

.modal-content {
	border: 0 !important;
	border-radius: 18px !important;
	box-shadow: var(--cf-shadow-lg) !important;
	overflow: hidden;
}

.modal-header {
	background: var(--cf-surface) !important;
	border-bottom: 1px solid var(--cf-line) !important;
	padding: 18px 22px !important;
}

.modal-header .modal-title, .modal-title {
	font-family: var(--cf-serif) !important;
	color: var(--cf-ink) !important;
	font-size: 21px !important;
	font-weight: 600 !important;
}

.modal-body { padding: 20px 22px !important; color: var(--cf-ink-2); }
.modal-footer { border-top: 1px solid var(--cf-line) !important; background: #fbfaf7; }

.form-control, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea {
	border-radius: var(--cf-radius-sm) !important;
	border: 1px solid var(--cf-line-2) !important;
	box-shadow: none !important;
	min-height: 42px;
}

.form-control:focus, input:focus, textarea:focus {
	border-color: var(--cf-brand) !important;
	box-shadow: 0 0 0 3px rgba(31, 79, 163, .15) !important;
}

/* ==========================================================================
   "Te llamamos gratis": botón flotante en lugar de la imagen antigua
   ========================================================================== */

#callback_container {
	right: 20px !important;
	bottom: 20px !important;
	width: auto !important;
	height: auto !important;
	background: none !important;
	box-shadow: none !important;
}

#callback_container #callback {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px 14px 18px;
	border-radius: 999px;
	background: var(--cf-ink);
	color: #fff !important;
	text-decoration: none !important;
	font-weight: 600;
	font-size: 15px;
	box-shadow: 0 10px 30px rgba(21, 33, 58, .35);
	transition: transform .15s ease, background-color .15s ease;
}

#callback_container #callback:hover { background: var(--cf-brand); transform: translateY(-2px); }

#callback_container #callback img { display: none !important; }

#callback_container #callback::before {
	content: "";
	width: 20px; height: 20px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

#callback_container #callback::after { content: "Te llamamos gratis"; }

#callback_close {
	position: absolute !important; /* era fixed: la × acababa en la esquina de la pantalla */
	bottom: auto !important;
	top: -8px !important;
	right: -6px !important;
	left: auto !important;
	width: 24px; height: 24px;
	border-radius: 50%;
	background: var(--cf-surface) !important;
	border: 1px solid var(--cf-line);
	color: var(--cf-ink-2) !important;
	display: flex !important;
	align-items: center; justify-content: center;
	font-size: 10px;
	box-shadow: var(--cf-shadow);
}

/* ==========================================================================
   Pie
   ========================================================================== */

#content_footer { background: transparent !important; margin-top: 30px; }
#content_footer.cf-footer-full { margin: 40px 0 0 !important; }
.cf-footer-full #footer { margin: 0 !important; }
.cf-footer-full #footer_menu { max-width: 820px; margin-left: auto; margin-right: auto; }

#footer {
	background: var(--cf-ink) !important;
	color: rgba(255, 255, 255, .6) !important;
	padding: 34px 20px 28px !important;
	font-size: 13px !important;
	text-align: center;
	border: 0 !important;
}

#footer_menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 22px;
	margin-bottom: 16px;
}

#footer_menu > div { display: block !important; float: none !important; padding: 0 !important; border: 0 !important; }

#footer a, #footer_menu a {
	color: rgba(255, 255, 255, .85) !important;
	font-size: 13.5px !important;
	text-decoration: none !important;
}

#footer a:hover { color: #fff !important; text-decoration: underline !important; }
#footer .cf-footer-highlight a { color: #f0d6a8 !important; font-weight: 600; }

/* Barra de cookies */
/* Fija y fuera del flujo: antes era absolute al final del body y, en la portada
   (donde el body tiene scroll propio), creaba un segundo scroll vertical. */
#cookie-bar, .cookie-bar {
	position: fixed !important;
	top: auto !important;
	left: 16px !important;
	bottom: 16px !important;
	width: auto !important;
	max-width: 520px;
	z-index: 2000 !important;
	background: var(--cf-ink) !important;
	color: rgba(255, 255, 255, .88) !important;
	font-size: 13px !important;
	line-height: 1.5;
	text-align: left !important;
	padding: 14px 18px !important;
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(21, 33, 58, .28);
}

#cookie-bar p { margin: 0 !important; }
#cookie-bar a { color: #f0d6a8 !important; }
#cookie-bar .btn, #cookie-bar .cb-enable {
	position: static !important;
	display: inline-block;
	margin: 10px 0 0 !important;
	padding: 6px 16px !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--cf-ink) !important;
	text-decoration: none !important;
	font-weight: 600;
}
#cookie-bar .cb-enable:hover { background: #f0d6a8 !important; }

@media (max-width: 900px) {
	#cookie-bar, .cookie-bar { left: 8px !important; right: 8px !important; bottom: 8px !important; max-width: none; }
	/* Mientras el aviso está visible, el botón flotante espera (vuelve al aceptar). */
	body:has(#cookie-bar) #callback_container { display: none !important; }
}

/* ==========================================================================
   Directorio y mapa
   ========================================================================== */

.directory, #directory, .citymap, #citymap { color: var(--cf-ink-2); }

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Ajustes de portada (2ª pasada) ---------------------------- */

#go_assist, #go_assist_bottom { border-radius: 999px !important; border: 0 !important; }

#icons .point_title { text-transform: lowercase !important; }
#icons .point_title::first-letter { text-transform: uppercase; }

.cf-eyebrow {
	display: inline-block;
	margin-bottom: 16px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--cf-surface);
	border: 1px solid var(--cf-line);
	color: var(--cf-accent);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.cf-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 22px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	color: var(--cf-muted);
	font-size: 13.5px;
}

.cf-trust li { display: inline-flex; align-items: center; gap: 7px; }

.cf-trust li::before {
	content: "";
	width: 16px; height: 16px;
	border-radius: 50%;
	background: var(--cf-ok) no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ==========================================================================
   LISTADO · tarjeta de servicio en grid (3ª pasada)
   Sustituye el maquetado antiguo de floats con márgenes negativos, que en
   pantallas estrechas sacaba el bloque del precio fuera de la tarjeta.
   ========================================================================== */

.service-main {
	display: grid !important;
	grid-template-columns: 126px minmax(0, 1fr) 136px;
	grid-template-areas:
		"photo name   data"
		"photo desc   data"
		"photo fields data";
	grid-template-rows: auto auto 1fr;
	column-gap: 20px;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
}

.service-content { display: contents !important; }

.service-photo, .service-data {
	float: none !important;
	position: static !important;
	right: auto !important;
	margin: 0 !important;
}

.service-photo { grid-area: photo; width: auto !important; padding: 0 !important; }
.service-photo img { display: block; width: 100%; height: auto; }

.service-name {
	grid-area: name;
	top: 0 !important;
	line-height: 1.25 !important;
	margin-bottom: 8px !important;
	overflow-wrap: anywhere;
}

.service-name a { margin-right: 6px !important; }
.service-description { grid-area: desc; }
.service-fields { grid-area: fields; }
.service-data { grid-area: data; width: auto !important; padding: 0 !important; }

.service-price-block, .service-interested button { width: 100% !important; }
.service-value { margin-top: 10px; }
.service-value img { max-width: 100%; }

.service-top .service-name .service_idnum { display: inline-block; margin-left: 4px; }

/* ---------- Móvil y tableta ------------------------------------------------ */
@media (max-width: 900px) {
	.content { padding-left: 0 !important; }
	.area { margin: 14px 12px 24px !important; max-width: none !important; }

	/* Barra superior compacta en una sola línea */
	.content > #topbar, #menu { height: 56px !important; }
	#menu-content {
		display: flex !important;
		align-items: center;
		justify-content: flex-end;
		gap: 4px;
		height: 56px;
		padding: 0 10px !important;
		float: none !important;
		width: auto !important;
	}
	.menu-item { float: none !important; margin: 0 !important; padding: 0 !important; }
	.menu-item .menu-label, .menu-item .menu-phone { display: none !important; }
	#menu-info a, #menu-register a, #menu-contact a {
		display: inline-flex !important;
		align-items: center; justify-content: center;
		width: 44px; height: 44px;
	}
	#locale_sel { padding: 10px 6px !important; }

	/* Logo visible en la barra (en escritorio está en el panel de filtros). El
	   botón de filtros de la barra superior se oculta: está en la barra inferior. */
	.cf-topbar-logo {
		display: block !important;
		width: 118px; height: 34px;
		margin-right: auto;
		background: url("/img/admin/logo-mail.png") no-repeat left center / contain;
	}
	#topbar-btns { display: none !important; }
	#menu .menu-icon {
		display: block;
		width: 20px; height: 20px;
		padding: 0 !important;
		margin: 0 !important;
		top: 0 !important;
		font-size: 0;
		background-size: contain !important;
		background-position: center !important;
	}
	#locale_sel { font-size: 13px !important; }

	/* Filtros: cajón lateral fijo con scroll propio */
	.filters {
		position: fixed !important;
		top: 0; bottom: 0; left: 0;
		width: min(320px, 88vw) !important;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		z-index: 3000 !important;
		box-shadow: 0 0 0 100vmax rgba(21, 33, 58, .45), 0 10px 40px rgba(21, 33, 58, .3);
		padding-bottom: 90px !important;
	}
	.filters-header { width: auto !important; }
	.filters-close-btn { left: auto !important; right: 14px; top: 14px !important; width: 28px !important; height: 28px !important; background-position: center !important; }

	/* Cabecera del listado */
	#order { gap: 8px; }
	#order .info { width: 100%; font-size: 14px; }
	#order .selector { width: 100%; display: flex; align-items: center; gap: 10px; }
	#order .selector_content, #order .bootstrap-select { flex: 1; width: auto !important; }
	#order .bootstrap-select > .btn { min-height: 44px; }

	/* La barra fija inferior sustituye al botón flotante de llamada */
	#callback_container { display: none !important; }
}

@media (max-width: 750px) {
	.service {
		padding: 14px !important;
		margin-top: 12px !important;
	}
	.service:hover { transform: none; }

	.service-main {
		grid-template-columns: 72px minmax(0, 1fr);
		grid-template-areas:
			"photo  name"
			"desc   desc"
			"fields fields"
			"data   data";
		grid-template-rows: auto;
		column-gap: 14px;
	}

	.service-photo img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; }
	.service-name { align-self: center; margin-bottom: 0 !important; }
	.service-name a { font-size: 17px !important; }
	.service-name .btn.service-info { margin: 6px 0 0 !important; display: inline-block; vertical-align: 0; padding: 3px 10px !important; }

	.service-description {
		margin: 12px 0 10px !important;
		font-size: 14px !important;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.service-top .service-description { display: block; -webkit-line-clamp: unset; overflow: visible; }

	.service-fields { margin-bottom: 12px !important; }

	/* Precio y botón en una fila, dentro de la tarjeta */
	.service-data { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
	.service-block {
		display: flex;
		width: 100%;
		border: 1px solid var(--cf-line);
		border-radius: 12px;
		overflow: hidden;
	}
	.service-price-block {
		flex: 1 1 auto;
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		width: auto !important;
		padding: 8px 14px !important;
		border: 0 !important;
		border-radius: 0 !important;
		text-align: left;
	}
	.service-price { font-size: 24px !important; }
	.service-interested { flex: 0 0 46%; display: flex; }
	.service-interested button,
	.service-interested button:active,
	.service-interested button:focus,
	.service-interested button:visited {
		width: 100% !important;
		height: auto !important;
		min-height: 58px;
		border-radius: 0 !important;
		font-size: 15px !important;
		font-weight: 600;
	}
	.service-value { margin: 0 !important; text-align: left; }
	.service-value img { height: 16px; width: auto; }
	.service-data .recommend { margin: 0 0 0 auto !important; padding: 8px 4px !important; font-size: 13px !important; }

	/* Detalle: campos incluidos en una columna; los botones van en la barra fija */
	.service-details-fields-block { width: 100% !important; float: none !important; }
	.service-details-field, .service-details-field-left { margin-right: 0 !important; }
	body.cf-has-mobilebar #details-buttons { display: none; }

	.pagination > li > a, .pagination > li > span { min-width: 40px; min-height: 40px; display: inline-flex !important; align-items: center; justify-content: center; }
}

/* ---------- Barra fija inferior (solo móvil) --------------------------------- */
.cf-mobilebar, .cf-topbar-logo { display: none; }

@media (max-width: 900px) {
	body.cf-has-mobilebar { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
	.cf-mobilebar {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 1500;
		display: flex;
		gap: 8px;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, .96);
		border-top: 1px solid var(--cf-line);
		box-shadow: 0 -6px 24px rgba(21, 33, 58, .1);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
	.cf-mobilebar button {
		flex: 1 1 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 50px;
		padding: 0 12px;
		border: 1px solid var(--cf-line-2);
		border-radius: 14px;
		background: var(--cf-surface);
		color: var(--cf-ink);
		font-family: var(--cf-sans);
		font-size: 15px;
		font-weight: 600;
		line-height: 1.1;
		white-space: nowrap;
	}
	.cf-mobilebar button svg { width: 18px; height: 18px; flex: none; }
	.cf-mobilebar .cf-mb-primary { background: var(--cf-brand); border-color: var(--cf-brand); color: #fff; flex-grow: 1.5; }
	.cf-mobilebar .cf-mb-icon { flex: 0 0 50px; padding: 0; }
	.cf-mobilebar [hidden] { display: none !important; }
	body:has(#cookie-bar) .cf-mobilebar,
	body.modal-open .cf-mobilebar { display: none; }
}

/* Etiqueta editorial "Recomendada por Cofune" (servicios de la funeraria destacada) */
.cf-badge-rec {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
	padding: 4px 11px 4px 9px;
	border-radius: 999px;
	background: #fbf3e4;
	border: 1px solid #ecd9b4;
	color: #8a5f22 !important;
	font-family: var(--cf-sans) !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	line-height: 1.2;
	letter-spacing: .01em;
	white-space: nowrap;
}
.cf-badge-rec svg { width: 13px; height: 13px; color: #c08a2c; flex: none; }
.service-name .cf-badge-rec { display: flex; width: max-content; }
.result-block .cf-badge-rec { margin: 10px auto 2px; display: flex; width: max-content; }
.service:has(.cf-badge-rec) { border-color: #ecd9b4 !important; box-shadow: 0 0 0 3px #fbf3e4, var(--cf-shadow); }