/**
 * Plantilla de sitio — Defensa Pública
 * Hoja de estilos principal
 *
 * Sustituye a devone.style.css + general.css + layout.css + custom.css de la
 * plantilla Joomla 3.x original. Se apoya en las utilidades de Bootstrap 5
 * (cargado una sola vez desde el gestor de activos web de Joomla, ver
 * index.php) en vez de reimplementar el grid o los componentes desde cero.
 *
 * Depende de css/variables.css (declarado como dependencia en
 * joomla.asset.json).
 */

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

body.tpl-defensa-publica {
	font-family: var(--dp-fuente-texto);
	color: var(--dp-texto);
	background-color: var(--dp-fondo);
}

.tpl-defensa-publica h1,
.tpl-defensa-publica h2,
.tpl-defensa-publica h3,
.tpl-defensa-publica h4,
.tpl-defensa-publica h5,
.tpl-defensa-publica h6 {
	font-family: var(--dp-fuente-titulos);
	color: var(--dp-azul-oscuro);
}

/* Enlace "saltar al contenido", visible solo con foco de teclado */
.tpl-skip-link {
	position: absolute;
	top: -3rem;
	left: 0.5rem;
	z-index: 1080;
	padding: 0.5rem 1rem;
	background-color: var(--dp-azul);
	color: var(--dp-texto-invertido);
	border-radius: var(--dp-radio);
	transition: top 0.15s ease-in-out;
}

.tpl-skip-link:focus {
	top: 0.5rem;
}

/*
 * Foco de teclado consistente en toda la plantilla. Reemplaza el hack
 * "*:focus { border: 2px solid red !important; }" de custom.css en la
 * versión Joomla 3.x, que aplicaba el mismo borde también a elementos con
 * foco por clic de mouse (ruido visual innecesario). Con :focus-visible
 * el borde de alto contraste solo aparece en navegación por teclado.
 */
.tpl-defensa-publica :focus-visible {
	outline: var(--dp-foco);
	outline-offset: var(--dp-foco-offset);
}

/* -------------------------------------------------------------------- */
/* Encabezado                                                            */
/* -------------------------------------------------------------------- */

/*
 * Hallazgo 26-ago-2026 (2): en la plantilla 3.x el <header> iba con
 * position:absolute, flotando TRANSPARENTE encima del slider/banner
 * (ver devone.style.css: "body main header{position:absolute;top:0;
 * z-index:999;width:100%}"). La primera reconstrucción de esta plantilla
 * lo había puesto como barra sólida arriba del contenido — visualmente
 * distinto del sitio original. Se repone el comportamiento original.
 *
 * Efecto secundario: al sacar el header del flujo normal, el contenido
 * de <main> arranca debajo de él. Se compensa con padding-top en
 * .tpl-contenido usando la variable --dp-header-alto (ver más abajo) —
 * en páginas sin imagen de fondo bajo el header esto deja un margen
 * fijo; en Inicio (con slider) el efecto es el buscado: menú superpuesto
 * a la imagen, igual que en el sitio 3.x.
 */
:root {
	--dp-header-alto: 6.5rem;
}

/*
 * Hallazgo 26-ago-2026 (11): con position:absolute el encabezado se
 * comporta como el resto del contenido y se desplaza fuera de vista al
 * hacer scroll ("el menú se pierde") — eso es correcto SOLO mientras el
 * encabezado está sobre el banner/slider de Inicio. En el sitio 3.x este
 * mismo problema se resolvía con un segundo encabezado clonado por JS
 * (selector "#doStiky" en custom.css), que se activaba al bajar y quedaba
 * con position:fixed y fondo sólido azul:
 *   body main #doStiky .mainmenucontent{background:#1d4589; ...}
 * Se reproduce el mismo comportamiento (fijo + fondo azul visible) con una
 * clase que js/template.js agrega/quita según el scroll, en vez de clonar
 * el encabezado — misma idea, con markup único.
 *
 * Hallazgo 26-ago-2026 (12): la clase se agregaba/quitaba bien (verificado
 * en el DOM), pero visualmente no pasaba nada — la causa es legacy.css, que
 * se carga DESPUÉS de este archivo a propósito para que sus !important
 * ganen (ver index.php). legacy.css trae, dentro de un media query propio:
 *   @media only screen and (max-width: 1023px){header{position:relative
 *   !important} ...}
 * Esa regla del sitio 3.x fuerza SIEMPRE "position:relative" en <header>
 * por debajo de 1023px (el mismo punto de quiebre del menú móvil), y al
 * ser !important le gana a cualquier "position" sin !important puesto acá,
 * sin importar el orden. Se agrega !important también en este lado para
 * que el encabezado fijo funcione en todos los anchos, no solo en
 * escritorio ancho.
 */
.tpl-header {
	position: absolute !important;
	inset-inline: 0;
	top: 0;
	z-index: 1030;
}

.tpl-header--fijo {
	position: fixed !important;
	background-color: var(--dp-azul-fijo);
	box-shadow: 0 0.1875rem 0.3125rem -0.1875rem rgba(0, 0, 0, 0.75);
	border-radius: 0 0 50px 50px !important; 
}

/*
 * En el sitio 3.x la versión fija ocultaba la barra de utilidades
 * (topmenu/logocontent) y mostraba solo el menú principal, para que la
 * barra fija quedara compacta. Se reproduce ocultando esa barra aquí.
 */
.tpl-header--fijo .tpl-header__utilidades {
	display: none;
}

.tpl-header--fijo .tpl-header__principal {
	background: var(--dp-azul-fijo);
	padding-block: 0.5rem;
	border-radius: 0 0 50px 50px !important; 
}

.tpl-header__utilidades {
	/* Color real del sitio 3.x (devone.style.css: .topmenucontent{background:#d59829}) */
	background-color: var(--dp-dorado);
	color: var(--dp-texto-invertido);
	padding-block: 3rem;
	font-size: 1rem;
}

.tpl-header__utilidades a {
	color: var(--dp-texto-invertido);
}

/* Menú de la barra de utilidades (posición "topmenu", módulo nativo mod_menu) */
.tpl-header__utilidades .mod-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Hallazgo 26-ago-2026 (8): el usuario detectó que el gris que se veía
 * detrás del encabezado venía de aquí — el degradado semitransparente
 * (rgba(10,40,87,...)) que se había agregado "para contraste" no existía
 * en el sitio 3.x (ver devone.style.css: el header ahí era 100%
 * transparente, sin fondo ni degradado propio). Se quita por completo,
 * junto con el padding-block que ya no hace falta sin el degradado, para
 * dejar el encabezado igual de transparente que el original.
 */
.tpl-header__principal {
	background: none;
}

.tpl-header__principal,
.tpl-header__principal a {
	color: var(--dp-texto-invertido);
}

/* Redes sociales junto al menú principal (posición "contactosheader") */
.tpl-header__principal .col-lg-9 > .mod-custom p {
	text-align: right;
	margin: 0 0 0.5rem;
	padding: 1% !important;
}

/*
 * Hallazgo 26-ago-2026 (10): los logotipos (ul.logos, posiciones
 * "logosheader" y "logosfooter") se veían como una lista sin estilo —
 * viñeta blanca del <li>, un solo logo visible — por la misma causa que
 * .gridinicio: la regla original de custom.css (ver legacy.css) era
 *   body main ul.logos { list-style:none; padding-left:0; margin:0;
 *   width:100%; display:table }
 * y en el sitio 3.x el <header> Y el <footer> estaban DENTRO de <main>, así
 * que "body main ul.logos" alcanzaba ambos. En la plantilla nueva
 * <header> y <footer> son hermanos de <main> (estructura semántica
 * correcta), así que ese selector ya no alcanza a ninguno de los dos y
 * ul.logos queda con el <ul>/<li> por defecto del navegador — de ahí la
 * viñeta blanca y el primer logo (100px !important) aplastado contra el
 * segundo. Se reconstruye la regla anclada a los dos contenedores reales.
 */
.tpl-header ul.logos,
.tpl-footer ul.logos {
	display: table;
	width: 100%;
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.tpl-header ul.logos li,
.tpl-footer ul.logos li {
	display: table-cell;
	vertical-align: middle;
}

.tpl-header ul.logos li:nth-child(1),
.tpl-footer ul.logos li:nth-child(1) {
	padding-right: 10px;
	text-align: center;
}

.tpl-header ul.logos li:nth-child(1) img,
.tpl-footer ul.logos li:nth-child(1) img {
	width: 75%;
}

.tpl-header ul.logos li:nth-child(2) img,
.tpl-footer ul.logos li:nth-child(2) img {
	width: 115%;
}

.tpl-header ul.logos li a,
.tpl-footer ul.logos li a {
	overflow: hidden;
}

.tpl-header ul.logos li a img,
.tpl-footer ul.logos li a img {
	width: 100%;
	height: auto;
}

@media only screen and (max-width: 700px) {
	.tpl-header ul.logos li:nth-child(1),
	.tpl-footer ul.logos li:nth-child(1) {
		padding-right: 15px;
	}
}

@media only screen and (max-width: 575px) {
	.tpl-footer ul.logos {
		width: 100%;
	}
	.tpl-footer ul.logos li {
		display: block;
		width: 100%;
		text-align: center;
	}
	.tpl-footer ul.logos li:nth-child(1) {
		padding-right: 0;
	}
	.tpl-footer ul.logos li a img {
		width: 50%;
	}
}

.tpl-nav {
	font-family: var(--dp-fuente-titulos);
}

/* -------------------------------------------------------------------- */
/* Menú principal (módulo DJ-MegaMenu Light, posición "mainmenu")        */
/* -------------------------------------------------------------------- */

/*
 * Hallazgo 26-ago-2026: el sitio 3.x usaba DJ-MegaMenu (módulo de terceros,
 * mod_djmegamenu) para el menú principal, con su propio marcado
 * (.dj-megamenu, .dj-up, .dj-subwrap...) y su propio CSS/JS. Ese marcado no
 * existe si se usa el módulo nativo de menú de Joomla, así que ninguna
 * regla de legacy.css (heredada de devone.style.css/custom.css) le aplicaba.
 *
 * Se instaló la versión de DJ-MegaMenu Light compatible con Joomla 6
 * (misma familia de extensión que el sitio original, ya no la "Light"
 * gratuita vieja v4.0.1 sino la v4.5.1 actual) en la posición "mainmenu".
 * Genera el mismo marcado de clases (.dj-megamenu, .dj-up, .dj-up_a,
 * .dj-subwrap, .dj-subcol, .dj-submenu), así que el comportamiento
 * (submenús, teclado, WCAG) es el original. Lo que sigue es una hoja de
 * estilo propia — NO una copia de legacy.css — que replica los colores y
 * la forma del menú viejo pero contra los selectores reales del módulo,
 * sin arrastrar el prefijo "body main header section.navegacionGlobal..."
 * que asumía que <header> vivía dentro de <main> (ya no es el caso: nuestra
 * plantilla pone <header> fuera de <main>, que es lo correcto).
 */

.dj-megamenu-wrapper {
	width: 100%;
}

/*
 * Hallazgo 26-ago-2026 (6): el usuario aportó el archivo real del tema de
 * fábrica del módulo (modules/mod_djmegamenu/themes/default/css/
 * djmegamenu.css, idéntico byte a byte al que ya carga esta instalación) y
 * preguntó si había que "darle prioridad". Se revisó ese archivo junto con
 * el custom.css real del sitio 3.x (ver legacy.css, selectores históricos
 * "body main header section.navegacionGlobal .mainmenucontent div.row
 * div:nth-child(2) .dj-megamenu...") y la respuesta es más matizada:
 *
 *   - El tema de fábrica (djmegamenu.css) por sí solo pinta una barra
 *     oscura con degradado, ítems de 60px con bordes verticales, texto
 *     mayúscula y fondo azul en hover — un menú horizontal clásico
 *     estilo 2015.
 *   - Pero el sitio 3.x NUNCA mostró esa barra oscura: su propio
 *     custom.css la anulaba explícitamente con "!important" (fondo
 *     ninguno, sin bordes, sin mayúsculas, sin flecha, alto automático),
 *     dejando un menú transparente de texto blanco que solo se resalta en
 *     dorado al pasar el mouse — el look real que se veía en pantalla.
 *     Lo único que SÍ conservaba forma redondeada era el cuadro del
 *     submenú desplegable (border-radius:13px, fondo dorado), que ya
 *     estaba bien replicado en la primera versión de esta hoja.
 *
 * Los botones grandes y redondeados que describió el usuario no
 * corresponden entonces al ítem de nivel superior del menú (que en el
 * sitio real era chato y transparente), sino a otro elemento de la
 * cabecera (un botón de call-to-action junto a los íconos sociales, con
 * su propio border-radius:60px). Se corrige aquí el nivel superior del
 * menú para que reproduzca fielmente lo que el sitio 3.x realmente
 * mostraba, no una interpretación nueva.
 */
.dj-megamenu {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 0;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.dj-megamenu .dj-up {
	position: relative;
	background: none !important;
}

.dj-megamenu .dj-up_a {
	display: inline-flex !important;
	align-items: center;
	height: auto !important;
	padding: 0.5rem 0.75rem !important;
	color: var(--dp-texto-invertido);
	background: none !important;
	font-size: 1rem;
	font-family: var(--dp-fuente-texto);
	font-weight: 400;
	text-transform: none !important;
	text-decoration: none;
	border: 0 !important;
	border-radius: 0 !important;
	transition: color 0.15s ease-in-out;
}

.dj-megamenu .dj-up_a:hover,
.dj-megamenu .dj-up_a:focus,
.dj-megamenu .dj-up_a:active,
.dj-megamenu .dj-up.current > .dj-up_a,
.dj-megamenu .dj-up_a.active {
	background: none !important;
	color: var(--dp-dorado);
}

/* El sitio 3.x ocultaba la flechita de los ítems de primer nivel */
.dj-megamenu .dj-up_a .arrow {
	display: none;
}

/* Submenús desplegables — aquí sí iba el redondeado (13px) y el dorado */
.dj-megamenu .dj-subwrap {
	background-color: var(--dp-dorado);
	border-radius: 0.8125rem;
	padding: 1.25rem 0;
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

/* Color real del borde entre columnas del sitio 3.x (custom.css: #d7b068) */
.dj-megamenu .dj-subcol:not(:last-child) {
	border-right: 0.0625rem solid #d7b068;
}

.dj-megamenu .dj-submenu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dj-megamenu .dj-submenu > li > a {
	display: block;
	padding: 0.5rem 1.25rem;
	color: var(--dp-texto-invertido);
	font-family: var(--dp-fuente-texto);
	font-size: 0.875rem;
	text-decoration: none;
}

/* Color real de hover del submenú del sitio 3.x (custom.css: #d9af60) */
.dj-megamenu .dj-submenu > li > a:hover,
.dj-megamenu .dj-submenu > li > a:focus {
	background-color: #d9af60;
}

/* Tercer nivel (p. ej. "Defensa Técnica > Penal > Impugnaciones") */
.dj-megamenu .dj-submenu .dj-submenu {
	padding-left: 0.5rem;
}

.dj-megamenu .dj-submenu .dj-submenu > li > a {
	font-size: 0.8rem;
	padding-block: 0.35rem;
}

/*
 * Hallazgo 26-ago-2026 (7): se cambió el tema del módulo de "default" a
 * "modern" (Módulos → DJ-MegaMenu → tema), lo que trae dos cambios reales:
 *   1. La clase del <ul> pasó de "dj-megamenu-default" a "dj-megamenu-modern",
 *      así que las reglas de esta hoja que apuntaban a
 *      ".dj-megamenu.dj-megamenu-default" dejaron de aplicar del todo. Se
 *      corrige apuntando solo a ".dj-megamenu" (la clase base, presente en
 *      cualquier tema) para no depender de cuál tema esté activo.
 *   2. El tema "modern" sí trae un panel "offcanvas" real para móvil
 *      (<aside class="dj-offcanvas...">, ver HTML renderizado), igual que
 *      los selectores históricos que aparecían en legacy.css
 *      (".dj-megamenu-offcanvas-dark .dj-mobile-open-btn") — antes, con el
 *      tema "default", el módulo no generaba ese panel. El punto de quiebre
 *      real ahora es el que el propio módulo define en data-trigger (1023px
 *      con este tema), no el 979px que se había asumido antes.
 */
@media (max-width: 1023px) {
	.dj-megamenu {
		flex-direction: column;
		align-items: stretch;
	}

	.dj-megamenu .dj-subwrap {
		position: static !important;
		border-radius: 0;
	}
}

/* -------------------------------------------------------------------- */
/* Contenido                                                             */
/* -------------------------------------------------------------------- */

/*
 * Hallazgo 26-ago-2026 (4): el padding-top que se había puesto aquí para
 * "compensar" el header absoluto era un error — empujaba TODO el
 * contenido de <main> hacia abajo, incluido el slider/banner de Inicio,
 * así que el header ya no quedaba encima de la imagen sino encima de un
 * espacio en blanco (el fondo de <body>). Resultado: la franja blanca que
 * se ve en la captura, justo lo contrario de lo buscado.
 *
 * La evidencia del sitio 3.x (devone.style.css) solo muestra
 * "position:absolute" en el header, sin ningún padding de compensación en
 * el contenido — es decir, el sitio viejo aceptaba que el header se
 * superpusiera al principio de CUALQUIER página, no solo a las que tienen
 * slider. Se quita el padding-top para reproducir ese mismo comportamiento
 * exactamente, en vez de "mejorarlo" por nuestra cuenta.
 */
.tpl-contenido {
	padding-block: var(--dp-espaciado);
	min-height: 60vh;
}

/*
 * Hallazgo 26-ago-2026 (5): SP Page Builder ya maneja su propio sistema de
 * filas/columnas a ancho completo (.sppb-section, .sppb-row-container...),
 * pero nuestro index.php envuelve el jdoc:include del componente en la
 * grilla de Bootstrap (.container-fluid > .row > .col-12), que trae su
 * propio "gutter" (padding izquierdo/derecho ~0.75rem por defecto). El
 * resultado es una franja de aire a los lados que el slider/banner de
 * Inicio no tenía en el sitio 3.x (ahí se pegaba a los bordes). Se anula
 * ese padding solo para el contenido del componente — el resto de la
 * plantilla (encabezado, pie) conserva su .container-fluid normal.
 */
.tpl-contenido.container-fluid {
	padding-inline: 0;
}

.tpl-contenido > .row {
	margin-inline: 0;
}

.tpl-contenido > .row > .col-12 {
	padding-inline: 0;
}

/*
 * Hallazgo 26-ago-2026 (9): la cuadrícula de fotos "Defensa Técnica"
 * (módulo Custom HTML, clase .gridinicio) se veía sin ningún estilo —
 * imágenes apiladas de ancho completo, sin recorte ni pie de foto — porque
 * las reglas originales de esta cuadrícula (custom.css del sitio 3.x,
 * preservadas en legacy.css) estaban ancladas a la cadena de selectores de
 * la plantilla vieja:
 *   body main section.containerCustom .row .col-xl .gridinicio ...
 * Esa cadena ya no existe: el contenido ahora se sirve dentro de
 * <main class="tpl-contenido"><div class="row"><div class="col-12">, no
 * de <section class="containerCustom"><div class="row"><div class="col-xl">.
 * Como ningún selector coincidía, el navegador nunca aplicó la regla — no
 * es un problema de orden de carga ni de especificidad, sino de que la
 * regla apuntaba a una estructura de DOM que dejó de existir.
 *
 * Se reconstruyen aquí los mismos valores (verificados contra legacy.css),
 * anclados a la estructura real de la plantilla nueva. El pie de foto del
 * sitio 3.x usaba <h4>, pero el HTML real que entrega el módulo (tanto en
 * el sitio viejo como en el nuevo) usa <p> — se cubren ambos casos por si
 * el módulo llega a usar alguno de los dos.
 */
.tpl-contenido .gridinicio > div {
	display: inline-block;
	vertical-align: top;
	width: 49%;
	height: auto;
}

.tpl-contenido .gridinicio > div div div {
	display: inline-block;
	vertical-align: top;
	width: 49%;
	height: auto;
}

.tpl-contenido .gridinicio div {
	padding: 5px;
}

.tpl-contenido .gridinicio div img {
	width: 100%;
}

.tpl-contenido .gridinicio div img:hover {
	opacity: 0.7;
}

.tpl-contenido .gridinicio div h4,
.tpl-contenido .gridinicio div p {
	text-transform: uppercase;
	margin: 12px 0;
	font-size: 20px;
}

@media only screen and (max-width: 991px) {
	.tpl-contenido .gridinicio div h4,
	.tpl-contenido .gridinicio div p {
		font-size: 14px;
	}
}

@media only screen and (max-width: 767px) {
	.tpl-contenido .gridinicio > div {
		width: 100%;
	}
	.tpl-contenido .gridinicio div h4,
	.tpl-contenido .gridinicio div p {
		font-size: 20px;
		text-align: center;
	}
}

@media only screen and (max-width: 479px) {
	.tpl-contenido .gridinicio > div div div {
		width: 100%;
	}
}

/* -------------------------------------------------------------------- */
/* Pie de página                                                        */
/* -------------------------------------------------------------------- */

.tpl-footer {
	background-color: transparent !important;
    color: black !important;
    padding-block: 0rem !important;
    margin-top: 0rem !important;
}

.tpl-footer a {
	color: black !important;
}

/* -------------------------------------------------------------------- */
/* Página de error                                                       */
/* -------------------------------------------------------------------- */

.tpl-error__codigo {
	font-family: var(--dp-fuente-titulos);
	font-size: 4rem;
	color: var(--dp-azul);
}

/* -------------------------------------------------------------------- */
/* Utilidades de accesibilidad                                          */
/* -------------------------------------------------------------------- */

/*
 * Bootstrap 5 ya trae .visually-hidden-focusable; se documenta aquí para
 * quien mantenga esta hoja: no se reimplementa a mano.
 */

.sppb-btn .sppb-btn-custom .sppb-btn-rounded .sppb-button-wrapper
 {
    padding: 2% !important;
	border-radius: 25px !important;
}

.sppb-btn-custom
{
	border-radius: 25px !important;
	padding: 3% !important;
}
 
 a{
 text-decoration: none !important;}
 
 .sppb-form-control {
	 border-radius:25px !important;
	 border-color: #d59829 !important;
	 
 }
 
 body main form[class*="form"] input[type="submit"], body main form.bfQuickMode input[type="submit"], body main #sppb-addon-1603114609028 table input[type="submit"]
 {
    background: #d59829;
    color: #FFFFFF;
    padding: 15px !important;
    border-radius: 25px !important;
    font-weight: 700;
    cursor: pointer;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --bs-gutter-x: 0rem !important;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-left: auto;
    margin-right: auto;
}

/*************************/

/* 1. Forzar que la lista sea vertical y limpiar espacios por defecto */
#MenuFooter .mod-menu.mod-list.nav {
    display: flex;
    flex-direction: column; /* Apila los elementos uno debajo del otro */
    padding: 0;
    margin: 0;
    list-style: none; /* Quita los puntos por defecto de la lista */
}

/* 2. Asegurar que cada elemento ocupe todo el ancho */
#MenuFooter .mod-menu.mod-list.nav li {
    display: block;
    width: 100%;
    margin-bottom: 8px; /* Espacio entre cada enlace, ajústalo a tu gusto */
}

/* 3. Estructura del enlace para alinear la flecha y el texto */
#MenuFooter .mod-menu.mod-list.nav li a {
    display: flex;
    align-items: center; /* Centra verticalmente la flecha con el texto */
    text-decoration: none;
    padding: 5px 0;
}

/* 4. Crear la flecha amarilla usando CSS puro (Unicode) */
#MenuFooter .mod-menu.mod-list.nav li a::before {
    content: "\276F"; /* Código Unicode de flecha (❯). Otras opciones: "\25B8" (▸) o "\279C" (➜) */
    color: #a56a00; /* Color amarillo oro. Puedes usar 'yellow' si lo quieres más chillón */
    font-size: 14px;
    margin-right: 10px; /* Separación entre la flecha y el texto */
    font-weight: bold;
    transition: transform 0.2s ease-in-out; /* Prepara una pequeña animación */
}

/* 5. (Opcional) Efecto hover: la flecha se mueve a la derecha al pasar el mouse */
#MenuFooter .mod-menu.mod-list.nav li a:hover::before {
    transform: translateX(4px);
}

/* Creamos una utilidad personalizada */
.letter-spacing-md {
    letter-spacing: 5px;
}

.dj-megamenu-default li div.dj-subwrap, .dj-megamenu-default li:hover div.dj-subwrap li div.dj-subwrap, .dj-megamenu-default li.hover div.dj-subwrap li div.dj-subwrap
 {
    background-color: #d59829 !important;
	color: black !important;	
}

.dj-megamenu-default li ul.dj-submenu > li > a {
     color: black !important;
    
}

.dj-megamenu-default li ul.dj-subtree > li > a {
     color: black !important;
    
}

.tpl-header__utilidades a:hover {
    color: #1d4589 !important;
}

.dj-megamenu-default li a.dj-up_a span:hover

 {
        background: #007bff !important;
}

#sliderGeneralData {
    position: relative !important;
    z-index: 9999 !important;
}

#sliderGeneralData {
    margin-top: 0px !important;
}

h1.tpl-phoca__titulo
 {
    display: none !important;
}

.btn-primary
 {
    --bs-btn-color: #fff;
    --bs-btn-bg: #d59829;
    --bs-btn-border-color: #d59829;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #d59829;
    --bs-btn-hover-border-color: #d59829;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #d59829;
    --bs-btn-active-border-color: #d59829;
    --bs-btn-active-shadow: inset 0 3px 5px #00000020;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #d59829;
    --bs-btn-disabled-border-color: #d59829;
    border-radius: 25px !important;
    padding: 10px !important;
}

.card-body {
    background-color: #e89910 !important;
    border-radius: 25px !important;
    font-weight: bold !important;
}

article.tpl-articulo.container-fluid.containerCustom
 {
    padding: 2% !important;
}

.gmapfp-category
 {
    padding: 2% !important;
}

.g-2, .gy-2 {
    --bs-gutter-y: .5rem;
    padding: 0% 2% 0% 0% !important;
}