@charset "UTF-8";
/*
Theme Name: Notas al norte
Text Domain: quarter
*/
/* Text Block Custom Style */
/* Brand color variables for easy editing */
:root {
				--brand-blue: #0387b5;
				--brand-red: #ef4444;
				--brand-purple: #BF55EC;
				--brand-electric-blue: #00BFFF;
				--brand-urban-green: #77dd77;
				--brand-urban-green-hover: #58a058;
				--brand-mustard: #d4b245;
				--brand-mustard-hover: #a16207;
				--brand-night-blue: #1e3a8a;
				--brand-ocre: #f97316;
				--brand-orange-gold: #f15e00;
				/* New social media colors */
				--color-facebook: #3b5998;
				--color-instagram: #E1306C;
				--color-facebook-pastel: #6f8ab5;
				--color-instagram-pastel: #e3829f;
				/* New pastel colors for tooltips */
				--tooltip-red: #f88a8a;
				--tooltip-electric-blue: #4cebff;
				--tooltip-light-blue: #c3e2ff;
				--tooltip-mustard: #e6c968;
				--tooltip-urban-green: #90ee90;
				--tooltip-night-blue: #5b79c3;
				/* Updated color for 'Provinciales' tooltip */
				--tooltip-provinciales: #f0a386;
				--tooltip-ruta-y-barro: #d99c7f;
				--tooltip-voces-y-miradas: #684460;
				--tooltip-purple: #c98cfa;
				--tooltip-tu-ciudad-en-fotos: #fd7e3b;
				--tooltip-ocre: #ff9d61;
				--tooltip-sobre-nosotros: #9ba0a6;
				--tooltip-brand-blue: #0387b5;
				--brand-dark-red: #db102f;
				--tooltip-dark-red: #e85c6f;
				--brand-dark-green: #88b741;
				--tooltip-dark-green: #8aac57;
				/* NUEVO: Color para el tooltip de 'A Fondo' */
				--tooltip-sea-green: #0bd7b8;
				--tooltip-orange-gold: #f7a26f;
				/* Colores categorias*/
				--azul: #0387b5;
				--celeste: #00BFFF;
				--azul-oscuro: #1e3a8a;
				--azul-claro: #5b79c3;
				--rojo-oscuro: #db102f;
				--rojo: #ef4444;
				--mostaza: #a16207;
				--ocre: #f97316;
				--naranja: #f15e00;
				--rosa: #f88a8a;
				--pastel: #f0a386;
				--naranja-claro: #fd7e3b;
				--rosa-oscuro: #e85c6f;
				--gold: #f7a26f;
				--verde: #88b741;
				--verde-urbano: #77dd77;
				--verde-oscuro: #58a058;
				--turquesa: #0bd7b8;
				--lila: #BF55EC;
				--violeta: #684460;
}

/* Base document styles */
html {
				scroll-behavior: smooth;
}

body {
				background-color: #121212;
				color: #e0e0e0;
				font-family: "Inter", sans-serif;
				overflow-x: hidden;
}

.font-anton {
				font-family: "Anton", sans-serif;
}

/* Title sizes that adjust to screen size */
h2.article-title {
				font-size: clamp(1.8rem, 4vw, 2.25rem);
}

h3.article-title {
				font-size: clamp(1.1rem, 2.5vw, 1.25rem);
}

/* Main logo styles with fluid sizes */
.logo-notas {
				font-size: clamp(4rem, 15vw, 12.1875rem);
				line-height: 1;
}

.logo-norte {
				font-size: clamp(3.5rem, 13vw, 10.5625rem);
				line-height: 1;
				letter-spacing: 0.035em;
}

.slogan {
				font-size: clamp(1.5rem, 5vw, 3.68rem);
				line-height: 1;
				letter-spacing: 0.05em;
}

/* Brand color classes for text */
.brand-blue {
				color: var(--brand-blue);
}

.brand-red-text {
				color: var(--brand-red);
}

.brand-purple-text {
				color: var(--brand-purple);
}

/* Navigation pill styles */
.pills-nav {
				-ms-overflow-style: none; /* Hides scrollbar on IE and Edge */
				scrollbar-width: none; /* Hides scrollbar on Firefox */
				scroll-behavior: smooth;
}

.pills-nav::-webkit-scrollbar {
				display: none; /* Hides scrollbar on Chrome, Safari and Opera */
}

.nav-pill {
				position: relative;
				padding: 0.8rem 1.6rem;
				border-radius: 0.375rem; /* Smoothed corners, equivalent to 'rounded-md' */
				text-transform: uppercase;
				font-weight: 600;
				letter-spacing: 0.5px;
				-webkit-transition: all 0.25s ease-in-out;
				transition: all 0.25s ease-in-out;
				text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.nav-pill:hover {
				-webkit-transform: translateY(-2px);
				        transform: translateY(-2px);
				-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
				        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.nav-pill.active {
				-webkit-transform: translateY(-2px) scale(1.05);
				        transform: translateY(-2px) scale(1.05);
				-webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
				        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

/* Navigation pill colors and effects *
.nav-pill.highlight-urgent,
.nav-pill.highlight-red {
    /* Cambio de gradiente para un efecto más notorio *
    background: linear-gradient(135deg, #ef4444, #dc2743);
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    animation: pulse-red 2s infinite;
}
.nav-pill.highlight-urgent:hover ,
.nav-pill.highlight-red:hover { 
    background: linear-gradient(135deg, #f87171, #ef4444);
}

.nav-pill.highlight-soft-pink {
    /* Cambio de gradiente para un efecto más notorio *
    background: linear-gradient(135deg, #ffa59c, #f87171);
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    animation: pulse-red 2s infinite;
}
.nav-pill.highlight-soft-pink:hover { 
    background: linear-gradient(135deg, #f87171, #ef4444);
}
*/
.flex-shrink-0 {
				-ms-flex-negative: 0;
				    flex-shrink: 0;
}

/* Ajustado el color de hover para "A Fondo" *
.nav-pill.highlight-afondo,
    .nav-pill.highlight-sea-green-pastel {
    background-color: var(--brand-electric-blue);
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.nav-pill.highlight-afondo:hover,
.nav-pill.highlight-sea-green-pastel:hover { 
    /* Modificación del color de hover para un cambio más sutil *
    background-color: #5ec5ff; 
}

/* Swapped colors: 'A campo abierto' colors applied to 'Tu Ciudad' *
.nav-pill.highlight-tu-ciudad {
    background-color: var(--brand-blue);
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.nav-pill.highlight-tu-ciudad:hover {
    background-color: #55aadd;
}

/* NEW: Pill for "Posta, Pasó Acá" with higher saturation and more presence *
.nav-pill.highlight-posta {
    background-color: var(--brand-orange-gold); 
    color: white;
    font-weight: 600; /* New: higher visual hierarchy *
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15); 
}
.nav-pill.highlight-posta:hover { 
    background-color: #ff7e29; /* Brighter orange for hover *
}

.nav-pill.highlight-agenda {
    background: linear-gradient(135deg, #7e22ce, #9333ea);
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    animation: pulse-purple 2s infinite;
}
.nav-pill.highlight-agenda:hover { background: linear-gradient(135deg, #8C2DA8, #9E49EC);
}

/* Swapped colors: 'Tu Ciudad' colors applied to 'A campo abierto' *
.nav-pill.highlight-campo-abierto,
.nav-pill.highlight-urban-green {
    background-color: #14b8a6;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.nav-pill.highlight-urban-green:hover,
.nav-pill.highlight-campo-abierto:hover {
    background-color: #33d6b8;
}

/* Uniform effect for all subheadings (volanta)s */
.volanta {
				font-size: 1.25rem; /* slightly increase text size */
				line-height: 1.4; /* ensure good readability */
				text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); /* subtle shadow to stand out on dark background */
				-webkit-transition: color 0.3s ease, text-shadow 0.3s ease, font-size 0.3s ease;
				transition: color 0.3s ease, text-shadow 0.3s ease, font-size 0.3s ease;
}

.volanta:hover {
				text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); /* more pronounced effect on hover */
}

/* Cambiado: el color de hover en el menú lateral para "A fondo" */
/* New custom tooltip colors for social media and search */
.custom-tooltip.facebook {
				background-color: var(--color-facebook);
				color: white;
}

.custom-tooltip.instagram {
				background-color: var(--color-instagram);
				color: white;
}

.custom-tooltip.brand-blue {
				background-color: var(--brand-blue);
				color: white;
}

/* New custom tooltip for the hamburger menu */
.custom-tooltip.light-blue {
				background-color: #A3D5FF;
				color: white;
}

/* Nuevos tooltips para los botones principales */
.custom-tooltip.pastel-afondo,
.custom-tooltip.sea-green-pastel {
				background-color: #70b4d4;
				color: white;
}

.custom-tooltip.pastel-tu-ciudad {
				background-color: #50c4c4;
				color: white;
}

.custom-tooltip.pastel-campo-abierto,
.custom-tooltip.pastel-urban-green {
				background-color: #33887c;
				color: white;
}

.custom-tooltip.pastel-posta {
				background-color: var(--tooltip-orange-gold);
				color: white;
}

.custom-tooltip.pastel-planazo {
				background-color: #c98cfa;
				color: white;
}

/* NUEVO: Clase de color para el tooltip de 'A Fondo' */
.custom-tooltip.sea-green-pastel {
				background-color: var(--tooltip-sea-green);
				color: white;
}

/* Nuevas clases para los íconos de redes sociales */
.social-icon-wrapper {
				-webkit-transition: -webkit-transform 0.3s ease-in-out;
				transition: -webkit-transform 0.3s ease-in-out;
				transition: transform 0.3s ease-in-out;
				transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}

.social-icon-wrapper:hover {
				-webkit-transform: scale(1.2);
				        transform: scale(1.2);
}

.social-icon-facebook {
				background-color: var(--color-facebook);
				color: white;
				border-radius: 50%;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				height: 32px;
				width: 32px;
}

.social-icon-instagram {
				background-color: var(--color-instagram);
				color: white;
				border-radius: 50%;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				height: 32px;
				width: 32px;
}

.social-icon-youtube {
				background-color: var(--brand-dark-red);
				color: white;
				border-radius: 50%;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				height: 32px;
				width: 32px;
}

.social-icon-tiktok {
				background-color: black;
				color: white;
				border-radius: 50%;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				height: 32px;
				width: 32px;
}

.social-icon-wrapper a {
				color: white; /* Asegura que el color del ícono sea blanco */
				padding: 0; /* Elimina el padding del enlace */
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				height: 100%;
				width: 100%;
}

/* Animations *
@keyframes pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}

@keyframes pulse-purple {
    0%, 100% { box-shadow: 0 0 0 0 rgba(147, 51, 234, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(147, 51, 234, 0); }
}
*/
/* Side navigation panel styles (new) */
.secondary-nav-panel {
				position: fixed;
				top: 0;
				right: -100%; /* Initially off-screen */
				width: 300px; /* Panel width */
				height: 100vh;
				background-color: #1a1a1a;
				-webkit-box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
				        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
				-webkit-transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
				transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
				z-index: 100;
				padding: 2rem;
				overflow-y: auto;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				    -ms-flex-direction: column;
				        flex-direction: column;
				border-left: 1px solid #333;
}

.secondary-nav-panel.is-open {
				right: 0;
}

.secondary-nav-panel a {
				display: block;
				padding: 0.8rem 0;
				font-size: 1.15rem;
				color: #e0e0e0;
				-webkit-transition: color 0.3s;
				transition: color 0.3s;
				text-transform: uppercase;
}

.volanta-ruta-y-barro:hover {
				color: #d38c71; /* Slightly brighter soft terracotta */
}

/* Cambiado el color de hover para "Ruta y barro" en el menú lateral para que coincida con la volanta */
.secondary-nav-panel a[href*=ruta-y-barro]:hover {
				color: var(--tooltip-ruta-y-barro);
}

.secondary-nav-panel a[href*=voces-y-miradas]:hover {
				color: #8e5884;
}

.secondary-nav-panel a[href*=tu-ciudad-en-fotos]:hover {
				color: #f2a24c;
}

.volanta-conta-tu-historia:hover {
				color: #ff6f61; /* More luminous soft coral */
}

.secondary-nav-panel a[href*=sobre-nosotros]:hover {
				color: var(--brand-blue);
}

/* Nuevas reglas de hover para consistencia con la barra principal */
.secondary-nav-panel a[href*=tu-ciudad-es-historia]:hover {
				color: #50c4c4;
}

.secondary-nav-panel a[href*=planazo]:hover {
				color: #8C2DA8;
}

/* Cambiado: el color de hover en el menú lateral para "A fondo" */
.secondary-nav-panel a[href*=a-fondo]:hover {
				color: #40BFFF;
}

/* NUEVA REGLA: Color de hover para "Contá tu historia" */
.secondary-nav-panel a[href*="14-contacto.html"]:hover {
				color: #ffa59c; /* soft-pink */
}

.secondary-nav-panel .close-btn {
				position: absolute;
				top: 1rem;
				right: 1.5rem;
				font-size: 1.5rem;
				color: #e0e0e0;
				-webkit-transition: color 0.3s;
				transition: color 0.3s;
}

.secondary-nav-panel .close-btn:hover {
				color: var(--brand-red);
}

.secondary-nav-panel .menu-group-title {
				color: var(--brand-blue);
				font-size: 0.9rem;
				text-transform: uppercase;
				letter-spacing: 0.1em;
				padding: 1.5rem 0 0.5rem 0;
				font-weight: bold;
}

/* Dark overlay when the menu is open */
.menu-overlay {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.6);
				z-index: 99;
				opacity: 0;
				visibility: hidden;
				-webkit-transition: opacity 0.4s ease, visibility 0.4s ease;
				transition: opacity 0.4s ease, visibility 0.4s ease;
}

.menu-overlay.is-open {
				opacity: 1;
				visibility: visible;
}

/* Animation for elements to "appear" on scroll */
.reveal {
				opacity: 0;
				-webkit-transform: translateY(30px);
				        transform: translateY(30px);
				-webkit-transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1), -webkit-transform 0.8s cubic-bezier(0.5, 0, 0, 1);
				transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1), -webkit-transform 0.8s cubic-bezier(0.5, 0, 0, 1);
				transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1), transform 0.8s cubic-bezier(0.5, 0, 0, 1);
				transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1), transform 0.8s cubic-bezier(0.5, 0, 0, 1), -webkit-transform 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.visible {
				opacity: 1;
				-webkit-transform: translateY(0);
				        transform: translateY(0);
}

/* Styles for the search overlay */
.search-overlay {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(18, 18, 18, 0.95);
				backdrop-filter: blur(8px);
				z-index: 101;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				opacity: 0;
				visibility: hidden;
				-webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
				transition: opacity 0.3s ease, visibility 0.3s ease;
}

.search-overlay.is-open {
				opacity: 1;
				visibility: visible;
}

.search-input {
				width: 80%;
				max-width: 600px;
				padding: 1rem;
				font-size: 1.5rem;
				color: white;
				background: transparent;
				border: none;
				border-bottom: 2px solid var(--brand-blue);
				outline: none;
}

/* Animation for the hamburger button */
.hamburger-lines {
				display: block;
				width: 32px;
				height: 4px;
				background: white;
				position: relative;
				-webkit-transform-origin: center;
				        transform-origin: center;
				-webkit-transition: background 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
				transition: background 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
				transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
				transition: transform 0.3s ease-in-out, background 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}

.hamburger-lines::before,
.hamburger-lines::after {
				content: "";
				position: absolute;
				width: 32px;
				height: 4px;
				background: white;
				-webkit-transition: -webkit-transform 0.3s ease-in-out;
				transition: -webkit-transform 0.3s ease-in-out;
				transition: transform 0.3s ease-in-out;
				transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}

.hamburger-lines::before {
				top: -10px;
}

.hamburger-lines::after {
				opacity: 0;
}

/* "Open" state of the hamburger button */
#menu-trigger.is-open .hamburger-lines {
				-webkit-transform: rotate(45deg);
				        transform: rotate(45deg);
}

#menu-trigger.is-open .hamburger-lines::before {
				top: 0;
				-webkit-transform: rotate(90deg);
				        transform: rotate(90deg);
}

#menu-trigger.is-open .hamburger-lines::after {
				opacity: 0;
}

/* Styles for section titles with a border */
.section-separator-title {
				font-family: "Anton", sans-serif;
				font-size: clamp(2.2rem, 6vw, 2.8rem);
				font-weight: 300;
				letter-spacing: 0.05em;
				color: white;
				text-align: left;
				padding-bottom: 0.5rem;
				margin-bottom: 2rem;
				text-transform: uppercase;
				width: 100%;
}

.section-separator-title.border-red {
				border-bottom: 2px solid var(--brand-red);
}

.section-separator-title.border-purple {
				border-bottom: 2px solid var(--brand-purple);
}

.section-separator-title.border-blue {
				border-bottom: 2px solid var(--brand-blue);
}

.section-separator-title.border-posta {
				border-bottom: 2px solid var(--brand-orange-gold);
}

/* Custom tooltip styles */
.custom-tooltip {
				position: fixed;
				padding: 8px 12px;
				border-radius: 8px;
				font-size: 0.875rem;
				font-weight: 600;
				z-index: 1000;
				opacity: 0;
				visibility: hidden;
				pointer-events: none;
				-webkit-transition: opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
				transition: opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
				transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
				transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
				white-space: nowrap;
}

.custom-tooltip.show {
				opacity: 1;
				visibility: visible;
}

.custom-tooltip.red {
				background-color: var(--tooltip-red);
				color: white;
}

.custom-tooltip.electric-blue {
				background-color: var(--tooltip-electric-blue);
				color: white;
}

.custom-tooltip.urban-green {
				background-color: var(--tooltip-urban-green);
				color: white;
}

.custom-tooltip.mustard {
				background-color: var(--tooltip-mustard);
				color: white;
}

.custom-tooltip.purple {
				background-color: var(--tooltip-purple);
				color: white;
}

.custom-tooltip.ocre {
				background-color: #ff7d70;
				color: white;
}

.custom-tooltip.light-blue {
				background-color: #3c8acc;
				color: white;
}

.custom-tooltip.night-blue {
				background-color: var(--tooltip-night-blue);
				color: white;
}

.custom-tooltip.provinciales {
				background-color: var(--tooltip-provinciales);
				color: white;
}

.custom-tooltip.ruta-y-barro {
				background-color: var(--tooltip-ruta-y-barro);
				color: white;
}

.custom-tooltip.voces-y-miradas {
				background-color: var(--tooltip-voces-y-miradas);
				color: white;
}

.custom-tooltip.tu-ciudad-en-fotos {
				background-color: var(--tooltip-tu-ciudad-en-fotos);
				color: white;
}

.custom-tooltip.sobre-nosotros {
				background-color: var(--tooltip-sobre-nosotros);
				color: #121212;
}

.custom-tooltip.brand-blue {
				background-color: var(--tooltip-brand-blue);
				color: white;
}

.custom-tooltip.dark-red {
				background-color: var(--tooltip-dark-red);
				color: white;
}

.custom-tooltip.dark-green {
				background-color: var(--tooltip-dark-green);
				color: white;
}

.custom-tooltip.sea-green-pastel {
				background-color: var(--tooltip-sea-green);
				color: white;
}

.custom-tooltip.orange-gold {
				background-color: var(--tooltip-orange-gold);
				color: white;
}

/* Styles for ad spaces */
.advertisement-space {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				height: auto;
				min-height: 150px;
				background-color: #1a1a1a;
				border: 1px solid #333;
				border-radius: 8px;
				color: #ccc;
				text-align: center;
				font-size: 1rem;
				margin: 2rem 0;
				-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
				        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
				-webkit-transition: all 0.3s ease-in-out;
				transition: all 0.3s ease-in-out;
}

.advertisement-space:hover {
				-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
				        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
				-webkit-transform: translateY(-2px);
				        transform: translateY(-2px);
}

.advertisement-space-vertical {
				background-color: #1a1a1a;
				border: 1px solid #333;
				border-radius: 8px;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				color: #ccc;
				text-align: center;
				font-size: 1rem;
				width: 100%;
				height: 600px;
				margin-bottom: 2rem;
				-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
				        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
				-webkit-transition: all 0.3s ease-in-out;
				transition: all 0.3s ease-in-out;
}

.advertisement-space-vertical:hover {
				-webkit-box-shadow: 6px 12px rgba(0, 0, 0, 0.4);
				        box-shadow: 6px 12px rgba(0, 0, 0, 0.4);
				-webkit-transform: translateY(-2px);
				        transform: translateY(-2px);
}

/* Specific styles for the sidebar on tablets and desktops */
@media (min-width: 1024px) {
				.advertisement-sidebar {
								position: sticky;
								top: 8rem;
								height: auto;
								max-height: calc(100vh - 10rem);
								overflow-y: auto;
				}
}
/* Hide header icons on small screens */
@media (max-width: 768px) {
				.social-icons {
								display: none;
				}
}
/* Media Query para pantallas entre 1400px y 1600px (solución propuesta) */
@media (max-width: 1600px) {
				.nav-pill {
								padding: 0.6rem 1.2rem;
								font-size: 0.85rem;
				}
}
/* Estilos para el modo responsivo (botonerá más estilizada) */
@media (max-width: 1023px) {
				.nav-pill.highlight-urgent,
				.nav-pill.highlight-red {
								background: rgba(239, 68, 68, 0.8);
								backdrop-filter: blur(5px);
								border: 1px solid rgba(255, 255, 255, 0.2);
				}
				.nav-pill.highlight-afondo,
				.nav-pill.highlight-sea-green-pastel {
								background: rgba(0, 191, 255, 0.8);
								backdrop-filter: blur(5px);
								border: 1px solid rgba(255, 255, 255, 0.2);
				}
				.nav-pill.highlight-tu-ciudad {
								background: rgba(3, 135, 181, 0.8);
								backdrop-filter: blur(5px);
								border: 1px solid rgba(255, 255, 255, 0.2);
				}
				.nav-pill.highlight-campo-abierto,
				.nav-pill.highlight-urban-green {
								background: rgba(20, 184, 166, 0.8);
								backdrop-filter: blur(5px);
								border: 1px solid rgba(255, 255, 255, 0.2);
				}
				.nav-pill.highlight-posta {
								background: rgba(241, 94, 0, 0.8);
								backdrop-filter: blur(5px);
								border: 1px solid rgba(255, 255, 255, 0.2);
				}
				.nav-pill.highlight-agenda {
								background: rgba(191, 85, 236, 0.8);
								backdrop-filter: blur(5px);
								border: 1px solid rgba(255, 255, 255, 0.2);
				}
}
/* NUEVOS ESTILOS para los botones de desplazamiento, adaptados a las imágenes proporcionadas por el usuario */
.scroll-btn-subtle {
				/* Estilo del botón sin pasar el cursor, similar a 'boton frente.jpg' */
				background-color: #3864a7;
				-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
				        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
				border: 1px solid #6699CC;
				-webkit-transition: all 0.3s ease-in-out;
				transition: all 0.3s ease-in-out;
}

.scroll-btn-subtle:hover {
				/* Estilo del botón al pasar el cursor, similar a 'boton hover.jpg' */
				background-color: #3f609e;
				-webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.2);
				        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.2);
				-webkit-transform: translateY(-2px) scale(1.02);
				        transform: translateY(-2px) scale(1.02);
				border: 1px solid #7cb9e8;
}

/*

    $colors: (
    azul: #0387b5,
    celeste: #00BFFF,
    azul-oscuro: #1e3a8a,
    azul-claro: #5b79c3,
    rojo-oscuro: #db102f,
    rojo: #ef4444,
    mostaza: #a16207,
    ocre: #f97316,
    naranja: #f15e00,
    rosa: #f88a8a,
    pastel: #f0a386,
    naranja-claro: #fd7e3b,
    rosa-oscuro: #e85c6f,
    gold: #f7a26f,
    verde: #88b741,
    verde-urbano: #77dd77,
    verde-oscuro: #58a058,
    turquesa:#0bd7b8,
    lila: #BF55EC,
    violeta: #684460
);*/
.item img {
				-webkit-transition: all 0.5s ease;
				transition: all 0.5s ease;
				aspect-ratio: 16/9;
				-o-object-fit: cover;
				   object-fit: cover;
				border-radius: 0.5rem;
}
.item-mini img {
				-webkit-transition: all 0.5s ease;
				transition: all 0.5s ease;
				aspect-ratio: 1;
				-o-object-fit: cover;
				   object-fit: cover;
				border-radius: 0.5rem;
}
@media (hover: hover) and (pointer: fine) {
				.item-mini a:hover img {
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
				}
}
@media (hover: hover) and (pointer: fine) {
				.item a:hover img {
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
				}
}

body.single figure {
				position: relative;
				overflow: hidden;
}

body.single figure img,
.mid-article img {
				-webkit-transition-duration: 300ms;
				        transition-duration: 300ms;
				-webkit-transition-property: -webkit-transform;
				transition-property: -webkit-transform;
				transition-property: transform;
				transition-property: transform, -webkit-transform;
				-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
				        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
				-o-object-fit: cover;
				   object-fit: cover;
				width: 100%;
				aspect-ratio: 16/9;
				border-radius: 0.5rem;
}

.blogpagination {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-ms-flex-wrap: wrap;
				    flex-wrap: wrap;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				-webkit-box-align: start;
				    -ms-flex-align: start;
				        align-items: flex-start;
				gap: 10px;
}
.blogpagination .page-numbers {
				background-color: rgba(41, 41, 41, 0.5);
				color: white;
				border: none;
				cursor: pointer;
				width: 48px;
				height: 48px;
				border-radius: 9999px;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				opacity: 0.7;
				-webkit-transition: opacity 0.3s ease;
				transition: opacity 0.3s ease;
				-webkit-appearance: button;
}
.blogpagination .page-numbers:hover {
				background-color: var(--brand-blue);
				color: black;
}
.blogpagination .page-numbers.current {
				background-color: white;
				color: black;
}

.bajada {
				font-size: 1.375rem;
				line-height: 1.75;
				color: #a0aec0;
}

.volanta-agenda {
				color: var(--brand-purple);
}

h1.page-title {
				font-size: clamp(2.5rem, 6vw, 3.75rem);
				line-height: 1.1;
				font-weight: 700;
				font-family: "Anton", sans-serif;
				text-transform: uppercase;
				letter-spacing: 0.025em;
}

h2.wp-block-heading {
				font-size: 2rem;
				line-height: 1.75rem;
				font-weight: 600;
				margin-top: 2.5rem;
				margin-bottom: 1rem;
				color: #fff;
}

h3.wp-block-heading {
				font-size: 1.5rem;
				line-height: 1.75rem;
				font-weight: 600;
				margin-top: 2.5rem;
				margin-bottom: 1rem;
				color: #fff;
}

h4.wp-block-heading {
				font-size: 1.25rem;
				line-height: 1.75rem;
				font-weight: 600;
				margin-top: 2.5rem;
				margin-bottom: 1rem;
				color: #fff;
}

.article-body blockquote {
				border-left: 3px solid var(--brand-blue);
				padding-left: 1.5rem;
				margin: 2rem 0;
				font-style: italic;
				font-size: 1.25rem;
				color: #fff;
}

.container.paragraph {
				position: relative;
}
.container.paragraph p {
				font-size: 1.125rem;
				line-height: 1.8;
				color: #d1d5db;
				margin-bottom: 1.5rem;
}

.container .default_block {
				margin-bottom: 1.5rem;
}
.container .wp-block-embed__wrapper iframe {
				aspect-ratio: 16/9;
				width: 100%;
				overflow: hidden;
				-o-object-fit: cover;
				   object-fit: cover;
				border-radius: 0.75rem;
}
.container .wp-block-embed__wrapper .twitter-tweet {
				margin: 0 auto 0.75rem;
}

.text-block ul {
				margin-bottom: 30px;
}
.text-block ul li {
				display: list-item;
				list-style: disc;
				list-style-position: inside;
				margin-bottom: 4px;
}
.text-block ul li li {
				list-style: circle;
}
.text-block ul li li li {
				list-style: square;
}

/*
@media (min-width: 900px) and (max-width:1024px){


}
*/
.volanta-link {
				position: relative;
}

.secondary-nav-panel a[data-tooltip-color=azul]:hover {
				color: var(--azul);
}

a.nav-pill.highlight-azul {
				background-color: var(--azul);
}
a.nav-pill.highlight-azul:hover {
				background-color: color-mix(in srgb, var(--azul), black 50%);
}
a.nav-pill.highlight-azul.anim {
				-webkit-animation: pulse-azul 2s infinite;
				        animation: pulse-azul 2s infinite;
}

#custom-tooltip.custom-tooltip.azul {
				background-color: color-mix(in srgb, var(--azul), black 50%);
}

.volanta-azul {
				color: var(--azul);
}

.centered-title-section .divider.bg-azul {
				background-color: var(--azul);
				-webkit-box-shadow: 0 4px 8px rgba(var(--azul), 0.3);
				        box-shadow: 0 4px 8px rgba(var(--azul), 0.3);
}

.border-azul {
				border-bottom: 2px solid var(--azul);
}

@-webkit-keyframes pulse-azul {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--azul), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--azul), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--azul), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--azul), black 50%);
				}
}

@keyframes pulse-azul {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--azul), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--azul), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--azul), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--azul), black 50%);
				}
}
.secondary-nav-panel a[data-tooltip-color=celeste]:hover {
				color: var(--celeste);
}

a.nav-pill.highlight-celeste {
				background-color: var(--celeste);
}
a.nav-pill.highlight-celeste:hover {
				background-color: color-mix(in srgb, var(--celeste), black 50%);
}
a.nav-pill.highlight-celeste.anim {
				-webkit-animation: pulse-celeste 2s infinite;
				        animation: pulse-celeste 2s infinite;
}

#custom-tooltip.custom-tooltip.celeste {
				background-color: color-mix(in srgb, var(--celeste), black 50%);
}

.volanta-celeste {
				color: var(--celeste);
}

.centered-title-section .divider.bg-celeste {
				background-color: var(--celeste);
				-webkit-box-shadow: 0 4px 8px rgba(var(--celeste), 0.3);
				        box-shadow: 0 4px 8px rgba(var(--celeste), 0.3);
}

.border-celeste {
				border-bottom: 2px solid var(--celeste);
}

@-webkit-keyframes pulse-celeste {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--celeste), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--celeste), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--celeste), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--celeste), black 50%);
				}
}

@keyframes pulse-celeste {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--celeste), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--celeste), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--celeste), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--celeste), black 50%);
				}
}
.secondary-nav-panel a[data-tooltip-color=azul-oscuro]:hover {
				color: var(--azul-oscuro);
}

a.nav-pill.highlight-azul-oscuro {
				background-color: var(--azul-oscuro);
}
a.nav-pill.highlight-azul-oscuro:hover {
				background-color: color-mix(in srgb, var(--azul-oscuro), black 50%);
}
a.nav-pill.highlight-azul-oscuro.anim {
				-webkit-animation: pulse-azul-oscuro 2s infinite;
				        animation: pulse-azul-oscuro 2s infinite;
}

#custom-tooltip.custom-tooltip.azul-oscuro {
				background-color: color-mix(in srgb, var(--azul-oscuro), black 50%);
}

.volanta-azul-oscuro {
				color: var(--azul-oscuro);
}

.centered-title-section .divider.bg-azul-oscuro {
				background-color: var(--azul-oscuro);
				-webkit-box-shadow: 0 4px 8px rgba(var(--azul-oscuro), 0.3);
				        box-shadow: 0 4px 8px rgba(var(--azul-oscuro), 0.3);
}

.border-azul-oscuro {
				border-bottom: 2px solid var(--azul-oscuro);
}

@-webkit-keyframes pulse-azul-oscuro {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--azul-oscuro), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--azul-oscuro), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--azul-oscuro), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--azul-oscuro), black 50%);
				}
}

@keyframes pulse-azul-oscuro {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--azul-oscuro), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--azul-oscuro), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--azul-oscuro), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--azul-oscuro), black 50%);
				}
}
.secondary-nav-panel a[data-tooltip-color=azul-claro]:hover {
				color: var(--azul-claro);
}

a.nav-pill.highlight-azul-claro {
				background-color: var(--azul-claro);
}
a.nav-pill.highlight-azul-claro:hover {
				background-color: color-mix(in srgb, var(--azul-claro), black 50%);
}
a.nav-pill.highlight-azul-claro.anim {
				-webkit-animation: pulse-azul-claro 2s infinite;
				        animation: pulse-azul-claro 2s infinite;
}

#custom-tooltip.custom-tooltip.azul-claro {
				background-color: color-mix(in srgb, var(--azul-claro), black 50%);
}

.volanta-azul-claro {
				color: var(--azul-claro);
}

.centered-title-section .divider.bg-azul-claro {
				background-color: var(--azul-claro);
				-webkit-box-shadow: 0 4px 8px rgba(var(--azul-claro), 0.3);
				        box-shadow: 0 4px 8px rgba(var(--azul-claro), 0.3);
}

.border-azul-claro {
				border-bottom: 2px solid var(--azul-claro);
}

@-webkit-keyframes pulse-azul-claro {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--azul-claro), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--azul-claro), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--azul-claro), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--azul-claro), black 50%);
				}
}

@keyframes pulse-azul-claro {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--azul-claro), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--azul-claro), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--azul-claro), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--azul-claro), black 50%);
				}
}
.secondary-nav-panel a[data-tooltip-color=rojo-oscuro]:hover {
				color: var(--rojo-oscuro);
}

a.nav-pill.highlight-rojo-oscuro {
				background-color: var(--rojo-oscuro);
}
a.nav-pill.highlight-rojo-oscuro:hover {
				background-color: color-mix(in srgb, var(--rojo-oscuro), black 50%);
}
a.nav-pill.highlight-rojo-oscuro.anim {
				-webkit-animation: pulse-rojo-oscuro 2s infinite;
				        animation: pulse-rojo-oscuro 2s infinite;
}

#custom-tooltip.custom-tooltip.rojo-oscuro {
				background-color: color-mix(in srgb, var(--rojo-oscuro), black 50%);
}

.volanta-rojo-oscuro {
				color: var(--rojo-oscuro);
}

.centered-title-section .divider.bg-rojo-oscuro {
				background-color: var(--rojo-oscuro);
				-webkit-box-shadow: 0 4px 8px rgba(var(--rojo-oscuro), 0.3);
				        box-shadow: 0 4px 8px rgba(var(--rojo-oscuro), 0.3);
}

.border-rojo-oscuro {
				border-bottom: 2px solid var(--rojo-oscuro);
}

@-webkit-keyframes pulse-rojo-oscuro {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--rojo-oscuro), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--rojo-oscuro), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--rojo-oscuro), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--rojo-oscuro), black 50%);
				}
}

@keyframes pulse-rojo-oscuro {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--rojo-oscuro), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--rojo-oscuro), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--rojo-oscuro), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--rojo-oscuro), black 50%);
				}
}
.secondary-nav-panel a[data-tooltip-color=rojo]:hover {
				color: var(--rojo);
}

a.nav-pill.highlight-rojo {
				background-color: var(--rojo);
}
a.nav-pill.highlight-rojo:hover {
				background-color: color-mix(in srgb, var(--rojo), black 50%);
}
a.nav-pill.highlight-rojo.anim {
				-webkit-animation: pulse-rojo 2s infinite;
				        animation: pulse-rojo 2s infinite;
}

#custom-tooltip.custom-tooltip.rojo {
				background-color: color-mix(in srgb, var(--rojo), black 50%);
}

.volanta-rojo {
				color: var(--rojo);
}

.centered-title-section .divider.bg-rojo {
				background-color: var(--rojo);
				-webkit-box-shadow: 0 4px 8px rgba(var(--rojo), 0.3);
				        box-shadow: 0 4px 8px rgba(var(--rojo), 0.3);
}

.border-rojo {
				border-bottom: 2px solid var(--rojo);
}

@-webkit-keyframes pulse-rojo {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--rojo), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--rojo), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--rojo), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--rojo), black 50%);
				}
}

@keyframes pulse-rojo {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--rojo), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--rojo), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--rojo), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--rojo), black 50%);
				}
}
.secondary-nav-panel a[data-tooltip-color=mostaza]:hover {
				color: var(--mostaza);
}

a.nav-pill.highlight-mostaza {
				background-color: var(--mostaza);
}
a.nav-pill.highlight-mostaza:hover {
				background-color: color-mix(in srgb, var(--mostaza), black 50%);
}
a.nav-pill.highlight-mostaza.anim {
				-webkit-animation: pulse-mostaza 2s infinite;
				        animation: pulse-mostaza 2s infinite;
}

#custom-tooltip.custom-tooltip.mostaza {
				background-color: color-mix(in srgb, var(--mostaza), black 50%);
}

.volanta-mostaza {
				color: var(--mostaza);
}

.centered-title-section .divider.bg-mostaza {
				background-color: var(--mostaza);
				-webkit-box-shadow: 0 4px 8px rgba(var(--mostaza), 0.3);
				        box-shadow: 0 4px 8px rgba(var(--mostaza), 0.3);
}

.border-mostaza {
				border-bottom: 2px solid var(--mostaza);
}

@-webkit-keyframes pulse-mostaza {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--mostaza), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--mostaza), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--mostaza), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--mostaza), black 50%);
				}
}

@keyframes pulse-mostaza {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--mostaza), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--mostaza), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--mostaza), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--mostaza), black 50%);
				}
}
.secondary-nav-panel a[data-tooltip-color=ocre]:hover {
				color: var(--ocre);
}

a.nav-pill.highlight-ocre {
				background-color: var(--ocre);
}
a.nav-pill.highlight-ocre:hover {
				background-color: color-mix(in srgb, var(--ocre), black 50%);
}
a.nav-pill.highlight-ocre.anim {
				-webkit-animation: pulse-ocre 2s infinite;
				        animation: pulse-ocre 2s infinite;
}

#custom-tooltip.custom-tooltip.ocre {
				background-color: color-mix(in srgb, var(--ocre), black 50%);
}

.volanta-ocre {
				color: var(--ocre);
}

.centered-title-section .divider.bg-ocre {
				background-color: var(--ocre);
				-webkit-box-shadow: 0 4px 8px rgba(var(--ocre), 0.3);
				        box-shadow: 0 4px 8px rgba(var(--ocre), 0.3);
}

.border-ocre {
				border-bottom: 2px solid var(--ocre);
}

@-webkit-keyframes pulse-ocre {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--ocre), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--ocre), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--ocre), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--ocre), black 50%);
				}
}

@keyframes pulse-ocre {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--ocre), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--ocre), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--ocre), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--ocre), black 50%);
				}
}
.secondary-nav-panel a[data-tooltip-color=naranja]:hover {
				color: var(--naranja);
}

a.nav-pill.highlight-naranja {
				background-color: var(--naranja);
}
a.nav-pill.highlight-naranja:hover {
				background-color: color-mix(in srgb, var(--naranja), black 50%);
}
a.nav-pill.highlight-naranja.anim {
				-webkit-animation: pulse-naranja 2s infinite;
				        animation: pulse-naranja 2s infinite;
}

#custom-tooltip.custom-tooltip.naranja {
				background-color: color-mix(in srgb, var(--naranja), black 50%);
}

.volanta-naranja {
				color: var(--naranja);
}

.centered-title-section .divider.bg-naranja {
				background-color: var(--naranja);
				-webkit-box-shadow: 0 4px 8px rgba(var(--naranja), 0.3);
				        box-shadow: 0 4px 8px rgba(var(--naranja), 0.3);
}

.border-naranja {
				border-bottom: 2px solid var(--naranja);
}

@-webkit-keyframes pulse-naranja {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--naranja), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--naranja), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--naranja), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--naranja), black 50%);
				}
}

@keyframes pulse-naranja {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--naranja), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--naranja), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--naranja), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--naranja), black 50%);
				}
}
.secondary-nav-panel a[data-tooltip-color=rosa]:hover {
				color: var(--rosa);
}

a.nav-pill.highlight-rosa {
				background-color: var(--rosa);
}
a.nav-pill.highlight-rosa:hover {
				background-color: color-mix(in srgb, var(--rosa), black 50%);
}
a.nav-pill.highlight-rosa.anim {
				-webkit-animation: pulse-rosa 2s infinite;
				        animation: pulse-rosa 2s infinite;
}

#custom-tooltip.custom-tooltip.rosa {
				background-color: color-mix(in srgb, var(--rosa), black 50%);
}

.volanta-rosa {
				color: var(--rosa);
}

.centered-title-section .divider.bg-rosa {
				background-color: var(--rosa);
				-webkit-box-shadow: 0 4px 8px rgba(var(--rosa), 0.3);
				        box-shadow: 0 4px 8px rgba(var(--rosa), 0.3);
}

.border-rosa {
				border-bottom: 2px solid var(--rosa);
}

@-webkit-keyframes pulse-rosa {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--rosa), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--rosa), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--rosa), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--rosa), black 50%);
				}
}

@keyframes pulse-rosa {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--rosa), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--rosa), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--rosa), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--rosa), black 50%);
				}
}
.secondary-nav-panel a[data-tooltip-color=pastel]:hover {
				color: var(--pastel);
}

a.nav-pill.highlight-pastel {
				background-color: var(--pastel);
}
a.nav-pill.highlight-pastel:hover {
				background-color: color-mix(in srgb, var(--pastel), black 50%);
}
a.nav-pill.highlight-pastel.anim {
				-webkit-animation: pulse-pastel 2s infinite;
				        animation: pulse-pastel 2s infinite;
}

#custom-tooltip.custom-tooltip.pastel {
				background-color: color-mix(in srgb, var(--pastel), black 50%);
}

.volanta-pastel {
				color: var(--pastel);
}

.centered-title-section .divider.bg-pastel {
				background-color: var(--pastel);
				-webkit-box-shadow: 0 4px 8px rgba(var(--pastel), 0.3);
				        box-shadow: 0 4px 8px rgba(var(--pastel), 0.3);
}

.border-pastel {
				border-bottom: 2px solid var(--pastel);
}

@-webkit-keyframes pulse-pastel {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--pastel), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--pastel), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--pastel), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--pastel), black 50%);
				}
}

@keyframes pulse-pastel {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--pastel), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--pastel), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--pastel), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--pastel), black 50%);
				}
}
.secondary-nav-panel a[data-tooltip-color=naranja-claro]:hover {
				color: var(--naranja-claro);
}

a.nav-pill.highlight-naranja-claro {
				background-color: var(--naranja-claro);
}
a.nav-pill.highlight-naranja-claro:hover {
				background-color: color-mix(in srgb, var(--naranja-claro), black 50%);
}
a.nav-pill.highlight-naranja-claro.anim {
				-webkit-animation: pulse-naranja-claro 2s infinite;
				        animation: pulse-naranja-claro 2s infinite;
}

#custom-tooltip.custom-tooltip.naranja-claro {
				background-color: color-mix(in srgb, var(--naranja-claro), black 50%);
}

.volanta-naranja-claro {
				color: var(--naranja-claro);
}

.centered-title-section .divider.bg-naranja-claro {
				background-color: var(--naranja-claro);
				-webkit-box-shadow: 0 4px 8px rgba(var(--naranja-claro), 0.3);
				        box-shadow: 0 4px 8px rgba(var(--naranja-claro), 0.3);
}

.border-naranja-claro {
				border-bottom: 2px solid var(--naranja-claro);
}

@-webkit-keyframes pulse-naranja-claro {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--naranja-claro), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--naranja-claro), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--naranja-claro), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--naranja-claro), black 50%);
				}
}

@keyframes pulse-naranja-claro {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--naranja-claro), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--naranja-claro), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--naranja-claro), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--naranja-claro), black 50%);
				}
}
.secondary-nav-panel a[data-tooltip-color=rosa-oscuro]:hover {
				color: var(--rosa-oscuro);
}

a.nav-pill.highlight-rosa-oscuro {
				background-color: var(--rosa-oscuro);
}
a.nav-pill.highlight-rosa-oscuro:hover {
				background-color: color-mix(in srgb, var(--rosa-oscuro), black 50%);
}
a.nav-pill.highlight-rosa-oscuro.anim {
				-webkit-animation: pulse-rosa-oscuro 2s infinite;
				        animation: pulse-rosa-oscuro 2s infinite;
}

#custom-tooltip.custom-tooltip.rosa-oscuro {
				background-color: color-mix(in srgb, var(--rosa-oscuro), black 50%);
}

.volanta-rosa-oscuro {
				color: var(--rosa-oscuro);
}

.centered-title-section .divider.bg-rosa-oscuro {
				background-color: var(--rosa-oscuro);
				-webkit-box-shadow: 0 4px 8px rgba(var(--rosa-oscuro), 0.3);
				        box-shadow: 0 4px 8px rgba(var(--rosa-oscuro), 0.3);
}

.border-rosa-oscuro {
				border-bottom: 2px solid var(--rosa-oscuro);
}

@-webkit-keyframes pulse-rosa-oscuro {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--rosa-oscuro), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--rosa-oscuro), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--rosa-oscuro), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--rosa-oscuro), black 50%);
				}
}

@keyframes pulse-rosa-oscuro {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--rosa-oscuro), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--rosa-oscuro), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--rosa-oscuro), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--rosa-oscuro), black 50%);
				}
}
.secondary-nav-panel a[data-tooltip-color=gold]:hover {
				color: var(--gold);
}

a.nav-pill.highlight-gold {
				background-color: var(--gold);
}
a.nav-pill.highlight-gold:hover {
				background-color: color-mix(in srgb, var(--gold), black 50%);
}
a.nav-pill.highlight-gold.anim {
				-webkit-animation: pulse-gold 2s infinite;
				        animation: pulse-gold 2s infinite;
}

#custom-tooltip.custom-tooltip.gold {
				background-color: color-mix(in srgb, var(--gold), black 50%);
}

.volanta-gold {
				color: var(--gold);
}

.centered-title-section .divider.bg-gold {
				background-color: var(--gold);
				-webkit-box-shadow: 0 4px 8px rgba(var(--gold), 0.3);
				        box-shadow: 0 4px 8px rgba(var(--gold), 0.3);
}

.border-gold {
				border-bottom: 2px solid var(--gold);
}

@-webkit-keyframes pulse-gold {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold), black 50%);
				}
}

@keyframes pulse-gold {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold), black 50%);
				}
}
.secondary-nav-panel a[data-tooltip-color=verde]:hover {
				color: var(--verde);
}

a.nav-pill.highlight-verde {
				background-color: var(--verde);
}
a.nav-pill.highlight-verde:hover {
				background-color: color-mix(in srgb, var(--verde), black 50%);
}
a.nav-pill.highlight-verde.anim {
				-webkit-animation: pulse-verde 2s infinite;
				        animation: pulse-verde 2s infinite;
}

#custom-tooltip.custom-tooltip.verde {
				background-color: color-mix(in srgb, var(--verde), black 50%);
}

.volanta-verde {
				color: var(--verde);
}

.centered-title-section .divider.bg-verde {
				background-color: var(--verde);
				-webkit-box-shadow: 0 4px 8px rgba(var(--verde), 0.3);
				        box-shadow: 0 4px 8px rgba(var(--verde), 0.3);
}

.border-verde {
				border-bottom: 2px solid var(--verde);
}

@-webkit-keyframes pulse-verde {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde), black 50%);
				}
}

@keyframes pulse-verde {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde), black 50%);
				}
}
.secondary-nav-panel a[data-tooltip-color=verde-urbano]:hover {
				color: var(--verde-urbano);
}

a.nav-pill.highlight-verde-urbano {
				background-color: var(--verde-urbano);
}
a.nav-pill.highlight-verde-urbano:hover {
				background-color: color-mix(in srgb, var(--verde-urbano), black 50%);
}
a.nav-pill.highlight-verde-urbano.anim {
				-webkit-animation: pulse-verde-urbano 2s infinite;
				        animation: pulse-verde-urbano 2s infinite;
}

#custom-tooltip.custom-tooltip.verde-urbano {
				background-color: color-mix(in srgb, var(--verde-urbano), black 50%);
}

.volanta-verde-urbano {
				color: var(--verde-urbano);
}

.centered-title-section .divider.bg-verde-urbano {
				background-color: var(--verde-urbano);
				-webkit-box-shadow: 0 4px 8px rgba(var(--verde-urbano), 0.3);
				        box-shadow: 0 4px 8px rgba(var(--verde-urbano), 0.3);
}

.border-verde-urbano {
				border-bottom: 2px solid var(--verde-urbano);
}

@-webkit-keyframes pulse-verde-urbano {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde-urbano), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde-urbano), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde-urbano), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde-urbano), black 50%);
				}
}

@keyframes pulse-verde-urbano {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde-urbano), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde-urbano), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde-urbano), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde-urbano), black 50%);
				}
}
.secondary-nav-panel a[data-tooltip-color=verde-oscuro]:hover {
				color: var(--verde-oscuro);
}

a.nav-pill.highlight-verde-oscuro {
				background-color: var(--verde-oscuro);
}
a.nav-pill.highlight-verde-oscuro:hover {
				background-color: color-mix(in srgb, var(--verde-oscuro), black 50%);
}
a.nav-pill.highlight-verde-oscuro.anim {
				-webkit-animation: pulse-verde-oscuro 2s infinite;
				        animation: pulse-verde-oscuro 2s infinite;
}

#custom-tooltip.custom-tooltip.verde-oscuro {
				background-color: color-mix(in srgb, var(--verde-oscuro), black 50%);
}

.volanta-verde-oscuro {
				color: var(--verde-oscuro);
}

.centered-title-section .divider.bg-verde-oscuro {
				background-color: var(--verde-oscuro);
				-webkit-box-shadow: 0 4px 8px rgba(var(--verde-oscuro), 0.3);
				        box-shadow: 0 4px 8px rgba(var(--verde-oscuro), 0.3);
}

.border-verde-oscuro {
				border-bottom: 2px solid var(--verde-oscuro);
}

@-webkit-keyframes pulse-verde-oscuro {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde-oscuro), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde-oscuro), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde-oscuro), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde-oscuro), black 50%);
				}
}

@keyframes pulse-verde-oscuro {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde-oscuro), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde-oscuro), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde-oscuro), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde-oscuro), black 50%);
				}
}
.secondary-nav-panel a[data-tooltip-color=turquesa]:hover {
				color: var(--turquesa);
}

a.nav-pill.highlight-turquesa {
				background-color: var(--turquesa);
}
a.nav-pill.highlight-turquesa:hover {
				background-color: color-mix(in srgb, var(--turquesa), black 50%);
}
a.nav-pill.highlight-turquesa.anim {
				-webkit-animation: pulse-turquesa 2s infinite;
				        animation: pulse-turquesa 2s infinite;
}

#custom-tooltip.custom-tooltip.turquesa {
				background-color: color-mix(in srgb, var(--turquesa), black 50%);
}

.volanta-turquesa {
				color: var(--turquesa);
}

.centered-title-section .divider.bg-turquesa {
				background-color: var(--turquesa);
				-webkit-box-shadow: 0 4px 8px rgba(var(--turquesa), 0.3);
				        box-shadow: 0 4px 8px rgba(var(--turquesa), 0.3);
}

.border-turquesa {
				border-bottom: 2px solid var(--turquesa);
}

@-webkit-keyframes pulse-turquesa {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--turquesa), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--turquesa), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--turquesa), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--turquesa), black 50%);
				}
}

@keyframes pulse-turquesa {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--turquesa), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--turquesa), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--turquesa), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--turquesa), black 50%);
				}
}
.secondary-nav-panel a[data-tooltip-color=lila]:hover {
				color: var(--lila);
}

a.nav-pill.highlight-lila {
				background-color: var(--lila);
}
a.nav-pill.highlight-lila:hover {
				background-color: color-mix(in srgb, var(--lila), black 50%);
}
a.nav-pill.highlight-lila.anim {
				-webkit-animation: pulse-lila 2s infinite;
				        animation: pulse-lila 2s infinite;
}

#custom-tooltip.custom-tooltip.lila {
				background-color: color-mix(in srgb, var(--lila), black 50%);
}

.volanta-lila {
				color: var(--lila);
}

.centered-title-section .divider.bg-lila {
				background-color: var(--lila);
				-webkit-box-shadow: 0 4px 8px rgba(var(--lila), 0.3);
				        box-shadow: 0 4px 8px rgba(var(--lila), 0.3);
}

.border-lila {
				border-bottom: 2px solid var(--lila);
}

@-webkit-keyframes pulse-lila {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--lila), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--lila), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--lila), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--lila), black 50%);
				}
}

@keyframes pulse-lila {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--lila), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--lila), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--lila), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--lila), black 50%);
				}
}
.secondary-nav-panel a[data-tooltip-color=violeta]:hover {
				color: var(--violeta);
}

a.nav-pill.highlight-violeta {
				background-color: var(--violeta);
}
a.nav-pill.highlight-violeta:hover {
				background-color: color-mix(in srgb, var(--violeta), black 50%);
}
a.nav-pill.highlight-violeta.anim {
				-webkit-animation: pulse-violeta 2s infinite;
				        animation: pulse-violeta 2s infinite;
}

#custom-tooltip.custom-tooltip.violeta {
				background-color: color-mix(in srgb, var(--violeta), black 50%);
}

.volanta-violeta {
				color: var(--violeta);
}

.centered-title-section .divider.bg-violeta {
				background-color: var(--violeta);
				-webkit-box-shadow: 0 4px 8px rgba(var(--violeta), 0.3);
				        box-shadow: 0 4px 8px rgba(var(--violeta), 0.3);
}

.border-violeta {
				border-bottom: 2px solid var(--violeta);
}

@-webkit-keyframes pulse-violeta {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--violeta), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--violeta), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--violeta), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--violeta), black 50%);
				}
}

@keyframes pulse-violeta {
				0% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--violeta), white 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--violeta), white 50%);
				}
				70% {
								color: white;
								-webkit-transform: scale(1.05);
								        transform: scale(1.05);
								-webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
								        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
				}
				100% {
								-webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--violeta), black 50%);
								        box-shadow: 0 0 0 0 color-mix(in srgb, var(--violeta), black 50%);
				}
}
/* New styles for the centered title and line */
.centered-title-section {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				    -ms-flex-direction: column;
				        flex-direction: column;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				text-align: center;
				padding-top: 2rem;
				padding-bottom: 2rem;
}

.centered-title-section .title {
				font-family: "Anton", sans-serif;
				font-size: clamp(5rem, 12vw, 9rem);
				line-height: 1;
				font-weight: 700;
				text-transform: uppercase;
				letter-spacing: 0.05em;
				color: white;
}

.centered-title-section .divider {
				height: 4px;
				width: 100%;
				max-width: 600px;
				margin: 1.5rem auto;
				-webkit-box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
				        box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
}

.centered-title-section .subtitle {
				font-size: clamp(1.5rem, 3vw, 2.5rem);
				line-height: 1.6;
				color: #d1d5db;
				max-width: none;
				margin-top: 0;
}

.items-center {
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
}

.flex {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
}

.form-input-container {
				position: relative;
				margin-bottom: 1.5rem;
}

.form-input-label {
				position: absolute;
				top: 0.75rem;
				left: 1rem;
				font-size: 0.875rem;
				color: #e5e7eb;
				-webkit-transition: all 0.2s ease-in-out;
				transition: all 0.2s ease-in-out;
				pointer-events: none;
				display: none;
}

.form-control {
				width: 100%;
				background-color: rgb(31 41 55/var(--tw-bg-opacity, 1));
				color: rgb(255 255 255/var(--tw-text-opacity, 1));
				padding: 0.75rem;
				border-width: 1px;
				border-radius: 0.375rem;
}

textarea.form-control {
				height: 150px;
}

.wpcf7-form .flex.items-center {
				margin-bottom: 1.5rem;
}
.wpcf7-form .flex.items-center .wpcf7-list-item {
				margin-left: 0;
}
.wpcf7-form .flex.items-center label {
				color: rgb(156, 163, 175);
				font-size: 0.875rem;
				line-height: 1.25rem;
}

.masonry {
				/* Define el número de columnas para pantallas medianas/grandes por defecto */
				-webkit-column-count: 3;
				   -moz-column-count: 3;
				        column-count: 3;
				/* Espacio entre las columnas */
				-webkit-column-gap: 1.5rem;
				   -moz-column-gap: 1.5rem;
				        column-gap: 1.5rem;
				/* Opcional: añade un poco de espacio alrededor de la galería */
				padding: 1rem;
				width: 100%;
				margin: 0 auto;
}

/* Elemento de la galería (el enlace <a> que contiene la imagen) */
.image-link {
				/* CRUCIAL: Previene que el elemento se rompa en medio de las columnas */
				-webkit-column-break-inside: avoid;
				   -moz-column-break-inside: avoid;
				        break-inside: avoid;
				/* Asegura que el elemento ocupe todo el ancho de su columna */
				width: 100%;
				display: block;
				/* Espacio vertical entre las imágenes. Debe ser igual al column-gap para consistencia */
				margin-bottom: 1.5rem;
				/* Para transiciones suaves al pasar el ratón */
				-webkit-transition: opacity 0.2s ease-in-out;
				transition: opacity 0.2s ease-in-out;
}

.image-link:hover {
				opacity: 0.9;
}

/* La imagen en sí */
.image-link img {
				/* Hace que la imagen ocupe el 100% del ancho de su contenedor */
				width: 100%;
				/* Mantiene la proporción de la imagen */
				height: auto;
				display: block;
				/* Opcional: bordes redondeados y sombra para un mejor look */
				border-radius: 6px;
				-webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
				        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
				/* Asegura que no haya espacio extra debajo de la imagen */
				vertical-align: middle;
}

/* --- */
/*
## Responsividad con Media Queries

Ajustamos el número de columnas para diferentes tamaños de pantalla:


/* Dispositivos Móviles (menos de 600px): 2 columnas */
@media (max-width: 599px) {
				.masonry {
								-webkit-column-count: 2;
								   -moz-column-count: 2;
								        column-count: 2;
				}
}
/* Tabletas y Pantallas Medianas (600px y más): 3 columnas */
@media (min-width: 600px) {
				.masonry {
								-webkit-column-count: 3;
								   -moz-column-count: 3;
								        column-count: 3;
				}
}
/* Desktops y Pantallas Grandes (1024px y más): 4 columnas */
@media (min-width: 1024px) {
				.masonry {
								-webkit-column-count: 4;
								   -moz-column-count: 4;
								        column-count: 4;
				}
}
/* NEW: Styles for the image modal */
.image-modal-overlay {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.9);
				backdrop-filter: blur(8px);
				z-index: 200;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				opacity: 0;
				visibility: hidden;
				-webkit-transition: opacity 0.3s ease;
				transition: opacity 0.3s ease;
}

.image-modal-overlay.is-open {
				opacity: 1;
				visibility: visible;
}

.image-modal-content {
				position: relative;
				max-width: 90%;
				max-height: 90vh;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
}

.image-modal-content img {
				max-width: 100%;
				max-height: 100%;
				-o-object-fit: contain;
				   object-fit: contain;
				border-radius: 12px;
				-webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
				        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.image-modal-close {
				position: absolute;
				top: 1rem;
				right: 1rem;
				background: rgba(41, 41, 41, 0.5);
				color: white;
				border: none;
				cursor: pointer;
				width: 40px;
				height: 40px;
				border-radius: 9999px;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				font-size: 1.5rem;
				-webkit-transition: background-color 0.3s ease;
				transition: background-color 0.3s ease;
}

.image-modal-close:hover {
				background-color: rgba(41, 41, 41, 0.8);
}

/* --- Estilos para las tarjetas interactivas de "Flip Effect" --- */
.flip-card {
				background-color: transparent;
				width: 100%;
				height: 350px; /* Altura fija para las tarjetas */
				-webkit-perspective: 1000px;
				        perspective: 1000px;
				cursor: pointer;
}

.flip-card-inner {
				position: relative;
				width: 100%;
				height: 100%;
				text-align: center;
				-webkit-transition: -webkit-transform 0.6s;
				transition: -webkit-transform 0.6s;
				transition: transform 0.6s;
				transition: transform 0.6s, -webkit-transform 0.6s;
				-webkit-transform-style: preserve-3d;
				        transform-style: preserve-3d;
				-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
				        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
				border-radius: 8px;
}

.flip-card.is-flipped .flip-card-inner {
				-webkit-transform: rotateY(180deg);
				        transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
				position: absolute;
				width: 100%;
				height: 100%;
				-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
				border-radius: 8px;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				    -ms-flex-direction: column;
				        flex-direction: column;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				padding: 1.5rem;
				-webkit-box-sizing: border-box;
				        box-sizing: border-box;
}

.flip-card-front {
				background-image: linear-gradient(135deg, #1a1a1a 0%, var(--brand-blue) 100%);
				color: white;
				z-index: 2;
}

.flip-card-back {
				background-image: linear-gradient(135deg, var(--brand-orange-gold), var(--brand-blue));
				color: white;
				-webkit-transform: rotateY(180deg);
				        transform: rotateY(180deg);
				position: relative; /* Para el posicionamiento del ícono */
				z-index: 2;
}

.flip-card-front .text-content {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				    -ms-flex-direction: column;
				        flex-direction: column;
				-webkit-box-pack: start;
				    -ms-flex-pack: start;
				        justify-content: flex-start; /* Alinea el contenido al inicio (arriba) */
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				min-height: 200px; /* Altura fija para el contenedor de texto */
				max-height: 340px;
				height: auto;
				padding: 2rem 1rem 1rem; /* Padding superior para bajar el texto y horizontal para evitar bordes */
}

.flip-card-front h3 {
				font-size: clamp(1.5rem, 4vw, 2rem);
				font-family: "Anton", sans-serif;
				line-height: 1.2;
				text-transform: uppercase;
				letter-spacing: 1.5px; /* Ajuste del interletrado */
				text-align: center;
				width: 100%;
				text-shadow: 1px 1px 1px black, -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black;
}

.flip-card-front p {
				font-size: clamp(1rem, 2.5vw, 1.25rem);
				line-height: 1.6;
				text-align: center;
}

.flip-card-back p {
				font-size: clamp(1rem, 2.5vw, 1.25rem);
				line-height: 1.6;
}

.flip-card-back a {
				-webkit-text-decoration: dashed;
				        text-decoration: dashed;
				line-height: 1.6;
}
.flip-card-back a:hover {
				color: var(--brand-orange-gold);
}

/* Estilos para el botón de "Ver más" */
#load-more-btn {
				background-image: linear-gradient(135deg, var(--brand-blue) 0%, #5ec5ff 100%);
				color: white;
				padding: 1rem 2rem;
				border-radius: 9999px;
				font-weight: bold;
				text-transform: uppercase;
				letter-spacing: 0.05em;
				-webkit-transition: all 0.3s ease;
				transition: all 0.3s ease;
				cursor: pointer;
				border: none;
				outline: none;
				-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
				        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

#load-more-btn:hover {
				-webkit-transform: translateY(-2px);
				        transform: translateY(-2px);
				background-image: linear-gradient(135deg, var(--brand-orange-gold), var(--brand-blue));
				-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
				        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* --- Nuevos estilos de animación --- */
/* Estado inicial de las tarjetas nuevas */
.initial-hidden {
				opacity: 0;
				-webkit-transform: translateY(50px) rotateX(15deg);
				        transform: translateY(50px) rotateX(15deg);
}

/* Transición para la aparición de las tarjetas */
.fade-in-up {
				opacity: 1;
				-webkit-transform: translateY(0) rotateX(0deg);
				        transform: translateY(0) rotateX(0deg);
				-webkit-transition: opacity 0.6s ease-out, -webkit-transform 0.6s ease-out;
				transition: opacity 0.6s ease-out, -webkit-transform 0.6s ease-out;
				transition: opacity 0.6s ease-out, transform 0.6s ease-out;
				transition: opacity 0.6s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
}

/* Animación para las tarjetas que se van */
.fade-out-down {
				-webkit-animation: fadeOutDown 0.6s forwards;
				        animation: fadeOutDown 0.6s forwards;
}

@-webkit-keyframes fadeOutDown {
				0% {
								opacity: 1;
								-webkit-transform: translateY(0);
								        transform: translateY(0);
				}
				100% {
								opacity: 0;
								-webkit-transform: translateY(50px);
								        transform: translateY(50px);
				}
}

@keyframes fadeOutDown {
				0% {
								opacity: 1;
								-webkit-transform: translateY(0);
								        transform: translateY(0);
				}
				100% {
								opacity: 0;
								-webkit-transform: translateY(50px);
								        transform: translateY(50px);
				}
}
/* --- ANIMACIONES DE PULSO --- */
@-webkit-keyframes pulse-red {
				0%, 100% {
								-webkit-box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
								        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
				}
				50% {
								-webkit-box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
								        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
				}
}
@keyframes pulse-red {
				0%, 100% {
								-webkit-box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
								        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
				}
				50% {
								-webkit-box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
								        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
				}
}
.nav-pill.highlight-urgent {
				-webkit-animation: pulse-red 2s infinite ease-in-out;
				        animation: pulse-red 2s infinite ease-in-out;
}

@-webkit-keyframes pulse-purple {
				0%, 100% {
								-webkit-box-shadow: 0 0 0 0 rgba(147, 51, 234, 0.7);
								        box-shadow: 0 0 0 0 rgba(147, 51, 234, 0.7);
				}
				50% {
								-webkit-box-shadow: 0 0 0 10px rgba(147, 51, 234, 0);
								        box-shadow: 0 0 0 10px rgba(147, 51, 234, 0);
				}
}

@keyframes pulse-purple {
				0%, 100% {
								-webkit-box-shadow: 0 0 0 0 rgba(147, 51, 234, 0.7);
								        box-shadow: 0 0 0 0 rgba(147, 51, 234, 0.7);
				}
				50% {
								-webkit-box-shadow: 0 0 0 10px rgba(147, 51, 234, 0);
								        box-shadow: 0 0 0 10px rgba(147, 51, 234, 0);
				}
}
.nav-pill.highlight-agenda {
				-webkit-animation: pulse-purple 2.5s infinite ease-in-out;
				        animation: pulse-purple 2.5s infinite ease-in-out;
}

/* Estilos para el ícono de información y su tooltip */
.info-icon-wrapper {
				position: absolute;
				bottom: 1rem;
				right: 1rem;
				cursor: help;
}

a.info-icon-wrapper {
				cursor: pointer;
}
a.info-icon-wrapper:hover i {
				color: var(--naranja);
}

.info-icon-wrapper .tooltip-text {
				visibility: hidden;
				width: 200px;
				background-color: #333;
				color: #fff;
				text-align: center;
				border-radius: 6px;
				padding: 5px 0;
				position: absolute;
				z-index: 3;
				bottom: 125%; /* Posiciona el tooltip encima del ícono */
				right: 0%;
				opacity: 0;
				-webkit-transition: opacity 0.3s;
				transition: opacity 0.3s;
}

.info-icon-wrapper:hover .tooltip-text {
				visibility: visible;
				opacity: 1;
}
/*# sourceMappingURL=style.css.map */