/*
Theme Name: Udecide App Theme
Theme URI: http://udecideapp.com
Author: Tu Nombre
Author URI: http://udecideapp.com
Description: Tema personalizado de WordPress
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mi-tema
*/
/*--------------------------------------------------------------
## Barra Superior (Top Bar)
--------------------------------------------------------------*/
body {
    margin: 0px !important;
    font-family: 'open sans', 'HelveticaNeue', 'Helvetica Neue', 'Helvetica-Neue', Helvetica, Arial, sans-serif;
}

#top-bar {
    background-color: #f9f9f9;
    /* Un color de fondo gris muy claro */
    border-bottom: 1px solid #eaeaea;
    padding: 8px 0;
    font-size: 13px;
    /* Texto más pequeño */
}

/* Usamos la misma clase .container que ya definimos, 
  pero la adaptamos para #top-bar usando Flexbox.
*/
#top-bar .container {
    display: flex;
    justify-content: space-between;
    /* ¡Magia! Separa izquierda y derecha */
    align-items: center;

    /* (Estos valores deben coincidir con tu .container principal) */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Menú de la Izquierda (Términos, etc.) --- */
.top-bar-navigation ul#top-bar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    /* Pone los items en horizontal */
}

.top-bar-navigation li {
    margin-right: 20px;
    /* Espacio entre items */
}

.top-bar-navigation a {
    text-decoration: none;
    color: #666;
    font-size: 11px;
}

.top-bar-navigation a:hover {
    color: #111;
}


/* --- Iconos Sociales (Derecha) --- */
.social-icons a {
    text-decoration: none;
    color: #666;
    margin-left: 15px;
    /* Espacio entre iconos */
    font-size: 16px;
    /* Tamaño para los iconos */
}

.social-icons a:hover {
    color: #111;
}


/*--------------------------------------------------------------
## Header / Menú de Navegación (Tu CSS anterior)
--------------------------------------------------------------*/
.site-header {
    background: #ffffff;
    border-bottom: 1px solid #eaeaea;
}

/* El contenedor principal dentro del header */
.site-header .container {
    display: flex;
    justify-content: space-between;
    /* ¡Esto separa el logo (izquierda) del .header-right (derecha)! */
    align-items: center;
    /* ¡Esto centra todo verticalmente! */

    /* Define el ancho máximo de tu contenido */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    /* Espaciado en los lados para móviles */
}

/* --- 1. Logo (Izquierda) --- */
.site-branding {
    padding: 0;
    /* Elimina el padding del contenedor del logo */
}

.site-branding .custom-logo {
    max-height: 60px;
    /* Ajusta la altura máxima de tu logo */
    width: auto;
    display: block;
    /* Asegura que la imagen llene el contenedor */
}

.site-branding a {
    display: block;
    /* Hace que el enlace ocupe todo el espacio */
    text-decoration: none;
    color: #222;
    font-size: 24px;
    font-weight: bold;
}


/* --- 2. Contenedor (Derecha) --- */
.header-right {
    display: flex;
    align-items: center;
    /* Alinea el menú y el ícono de búsqueda */
}

/* --- Menú de Navegación --- */
.main-navigation ul#primary-menu {
    list-style: none;
    /* Quita los puntos de la lista */
    margin: 0;
    padding: 0;
    display: flex;
    /* ¡Pone los items del menú en horizontal! */
}

.main-navigation li {
    margin-left: 30px;
    /* Espacio entre cada item del menú (Home, Features, etc.) */
}

.main-navigation a {
    text-decoration: none;
    color: #333;
    font-size: 16px;
    font-weight: 500;
    /* Un grosor de fuente semi-negrita */
}

.main-navigation a:hover {
    color: #0073aa;
    /* Un color de hover */
}

/* --- Ícono de Búsqueda --- */
.header-search {
    margin-left: 30px;
    /* Espacio entre el último item del menú ("Blog") y el ícono */
}

.header-search .search-icon {
    font-size: 20px;
    text-decoration: none;
    color: #333;
}

/*--------------------------------------------------------------
## 3.0 Sección Hero (Homepage)
--------------------------------------------------------------*/

.hero-section-old {
    /* --- 1. El Fondo --- */
    /* IMPORTANTE: 
      1. Ve a tu carpeta 'images'.
      2. Guarda tu imagen de fondo (ej. 'hero-background.jpg').
    */
    background-size: cover;
    /* Cubre todo el espacio */
    background-position: center;
    /* Centra la imagen */
    padding: 200px 0;
    /* Espacio vertical (arriba y abajo) */
    color: #ffffff;
    /* Color del texto por defecto (blanco) */
    position: relative;
    /* Necesario para la superposición */
}

/* --- 2. La Superposición de Color --- */
.hero-section .hero-overlay {
    content: '';
    position: absolute;
    /* Se superpone sobre el .hero-section */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;


    z-index: 1;
    /* Se pone debajo del contenido pero encima de la imagen de fondo */
}

#page .hero-section {
    /* ... (tus estilos de fondo, color, position) ... */
    background-size: cover;
    background-position: center;
    color: #ffffff;
    position: relative;

    /* --- ESTAS LÍNEAS CENTRAN EL CONTENIDO --- */

    min-height: 80vh;
    /* O la altura que hayas elegido */

    /* 1. Convierte al .hero-section en un contenedor flex */
    display: flex;

    /* 2. Esta es la línea clave que centra el contenido verticalmente */
    align-items: center;

    /* 3. Mantenemos el padding para pantallas móviles */
    padding-top: 60px;
    padding-bottom: 60px;
}

/* 4. En pantallas grandes, quitamos el padding para que el centrado sea perfecto */
@media (min-width: 768px) {
    .hero-section {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Estilos específicos para móviles detectados por JS */
.is-mobile-device #page .hero-section {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 20vh !important;
    min-height: 20vh !important;
}

.is-mobile-device .effective-features .container {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

/* Ahora, nos aseguramos de que el hijo ocupe todo el ancho */
.hero-section .hero-content-container {
    position: relative;
    z-index: 2;
    display: flex;
    /* Esto mantiene tus 2 columnas (texto e imagen) */
    align-items: center;
    /* Esto las alinea verticalmente entre sí */
    justify-content: center;
    /* Centra horizontalmente */
    gap: 40px;

    width: 100%;
    /* ¡Importante! Añade esto para que ocupe todo el ancho */
}

/* --- 4. Las Columnas --- */
.hero-text {
    width: 70%;
    /* La columna de texto toma el 40% del ancho */
    display: flex;
    flex-direction: column;
    text-align: left;
    /* Centra el texto y los botones */
}

.hero-image {
    flex: 1;
    /* La columna de imagen toma el espacio disponible */
    text-align: center;
    /* Centra el teléfono */
}

.hero-image img {
    max-width: 100%;
    /* La imagen nunca será más ancha que su columna */
    height: auto;
}

/* --- 5. Tipografía del Hero --- */
.hero-text h2 {
    font-size: 38px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.hero-text h3 {
    font-size: 20px;
    font-weight: 300;
    /* Fuente delgada */
    margin-bottom: 5px;
}

.hero-text p {
    width: 65%;
    /* Limita el ancho del párrafo para mejor legibilidad */
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 30px;
    margin-top: 5px;
}

/* --- 6. Botones del Hero --- */
.hero-buttons .btn {
    background-color: #ffffff;
    color: #333;
    /* Color de texto oscuro para el botón blanco */
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 700;
    margin-right: 15px;
    display: inline-block;
    /* Permite que el margin-right funcione */
}

.hero-buttons .btn:hover {
    background-color: #f0f0f0;
    /* Un ligero hover */
}

/* Estilos para los botones de las tiendas de apps */
.hero-buttons .btn-store {
    display: inline-flex;
    /* Alinear ícono y texto */
    align-items: center;
    gap: 8px;
    /* Espacio entre el ícono y el texto */
}

.hero-buttons .btn-store i {
    color: #000000;
    /* Color del ícono negro */
    font-size: 1.2em;
    /* Hacer el ícono un poco más grande */
}



.container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0px 50px;
    box-sizing: border-box;
    /* Evita que el padding cause desbordamiento */
    clear: both;
}

.what-is-section {
    padding: 80px 20px 120px 20px;
    /* Espacio vertical y horizontal simétrico */
    background: #ffffff;
    border-bottom: 1px solid #eaeaea;
}

.what-is-container {
    display: flex;
    justify-content: center;
    /* Centra los elementos horizontalmente */
    align-items: center;
    /* Alinea verticalmente el texto y los videos */
    gap: 50px;
    /* Espacio entre la columna de texto y la de videos */
}

/* --- Columna Izquierda: Texto --- */
.what-is-text {
    text-align: left;
    /* Alinea el texto a la izquierda */
    flex: 0 1 450px;
    /* No crece, se encoge si es necesario, base de 450px */
    color: #444;
}

.what-is-text h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #666666;
}

.what-is-text p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 25px;
}

.what-is-text ul {
    list-style: disc;
    /* Puntos de viñeta */
    margin: 0;
}

.what-is-text li {
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin-bottom: 15px;
    /* Espacio entre cada punto */
}

/* --- Columna Derecha: Videos --- */
.what-is-videos {
    flex: 0 1 500px;
    /* No crece, se encoge si es necesario, base de 500px */
}

/* --- El truco para videos responsivos (16:9) --- */
.video-responsive {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 42.85%;
    /* Esto crea una relación de aspecto 16:9 */
    margin-bottom: 20px;
    /* Espacio entre los dos videos */
}

.video-responsive:last-child {
    margin-bottom: 0;
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.site-header-fixed {
    position: fixed;
    /* ¡La propiedad clave! */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    /* Asegura que esté por encima de todo */

    /* (Opcional) Sombra para que se vea "flotando" */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* 2. ¡IMPORTANTE! Empujar el contenido hacia abajo */
/*
  El header fijo se sale del flujo de la página.
  Tenemos que agregar un "padding" al contenido principal
  para que no quede oculto detrás del header.
*/
.site-content {
    /* Ajusta este valor. Debe ser la altura TOTAL de tu header.
      (Ej: 30px del top-bar + 80px del menu = 110px) 
    */
    padding-top: 100px !important;
}

/* 1. Para pantallas de escritorio (más de 782px) */
.admin-bar .site-header-fixed {
    top: 32px;
    /* Altura estándar de la barra de admin en escritorio */
}

/* * 2. Para pantallas móviles (menos de 783px), 
 * la barra de admin es más alta (46px).
 */
@media screen and (max-width: 782px) {
    .admin-bar .site-header-fixed {
        top: 46px;
        /* Altura de la barra de admin en móvil */
    }
}


.how-it-works-section {
    background-size: cover;
    /* Para que cubra toda la sección */
    background-position: center center;
    padding: 60px 0;
    /* Espaciado interno */
    color: #ffffff;
    /* Color de texto blanco, como en tu ejemplo */
}

.how-it-works-section .row {
    display: flex;
    align-items: center;
    /* Centra las columnas verticalmente */
    justify-content: center;
    /* Centra el contenido horizontalmente */
    gap: 200px;
    /* Espacio de 100px entre la imagen y el texto */
}

.how-it-works-section .col-md-6:first-child {
    display: flex;
    justify-content: center;
}

.how-it-works-section .col-md-6:last-child {
    text-align: center;
    /* Centra el texto en la columna derecha */
}

.how-it-works-section .how-it-works-phone-image {
    max-width: 100%;
    height: auto;
}

.how-it-works-section h2 {
    font-size: 2.5em;
    /* Texto más pequeño */
    font-weight: bold;
}

.how-it-works-section p {
    font-size: 0.9em;
    /* Texto más pequeño */
}

.how-it-works-section ul {
    list-style-position: inside;
    /* Mueve las viñetas adentro */
    padding-left: 0;
    /* Quita el padding para centrar la lista */
    margin-top: 20px;
    max-width: 500px;
    /* Ancho máximo para la lista */
    margin-left: auto;
    /* Centra la lista horizontalmente */
    margin-right: auto;
    /* Centra la lista horizontalmente */
}

.how-it-works-section li {
    font-size: 0.9em;
    /* Texto más pequeño */
    margin-bottom: 25px;
    text-align: left;
    /* Alinea el texto de la lista a la izquierda */
}

/*--------------------------------------------------------------
## Footer
--------------------------------------------------------------*/
.site-footer {
    background-color: #333333;
    color: #a0a0a0;
    padding: 20px 0;
    font-size: 14px;
}

.site-footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-footer .social-icons a {
    color: #ffffff;
    /* Iconos en color blanco */
    font-size: 18px;
}

.site-footer .social-icons a:hover {
    color: #bbbbbb;
    /* Un gris claro al pasar el mouse */
}

.effective-features {
    text-align: center;
    padding: 60px 0;
}

.effective-features .feature-text {
    text-align: left;
    /* Mantenemos el texto de las características alineado a la izquierda */
}



.features-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
}

.features-column-left,
.features-column-right {
    flex-basis: 30%;
    /* 30% del ancho */
    display: flex;
    flex-direction: column;
    gap: 30px;
    /* Espacio entre items */
}

.features-column-center {
    flex-basis: 35%;
    /* 35% del ancho para el teléfono */
    display: flex;
    justify-content: center;
    /* Centra la imagen horizontalmente */
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Espacio entre icono y texto */
}

.feature-item .feature-icon .iconlist_icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    /* Tamaño del ícono de fuente */
    line-height: 1;
    flex-shrink: 0;
    /* Evita que el círculo se encoja */
}

.feature-item .feature-icon .iconlist_icon .iconlist-char {
    display: inline-block;
    vertical-align: middle;
}

/* Estilo para que el pseudo-elemento :before muestre el ícono */
.feature-item .feature-icon .iconlist_icon .iconlist-char:before {
    content: attr(data-av_icon);
}

/* Específico para la columna izquierda */
.features-column-left .feature-item {
    flex-direction: row;
    /* Pone el icono a la derecha */
}

.features-column-left .feature-text {
    text-align: left;
}

.effective-features .container h2 {
    color: #666666;
    font-size: 40px;
    font-weight: bold
}

.feature-text h3 {
    color: #222222;
}

.feature-text p {
    color: #919191;
    font-size: 14px;
    line-height: 1.6;
}


/* --- Estilos de la Sección de Screenshots --- */

.screenshots-section {
    position: relative;
    /* Necesario para la superposición */
    padding: 80px 0;
    text-align: center;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
    /* Para contener los elementos */
}

/* Superposición oscura */
.screenshots-section .section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(30, 40, 60, 0.75);
    /* Un azul/gris oscuro. Ajusta opacidad */
    z-index: 1;
}

/* Contenedor principal (para centrar y estar sobre la superposición) */
.screenshots-section .container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Título principal */
.screenshots-section h2 {
    font-size: 3em;
    /* 3 veces el tamaño de letra normal */
    color: #ffffff;
    font-weight: bold;
    margin-bottom: 15px;
}

/* Subtítulo con fondo */
.screenshots-section .subtitle {
    display: inline-block;
    /* Para que el fondo solo cubra el texto */
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 8px 20px;
    border-radius: 5px;
    margin-bottom: 50px;
}

/* Contenedor de las imágenes (usando Flexbox) */
.screenshot-slider {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Oculta los elementos que se salen del contenedor */
    width: 100%;
    max-width: 1250px;
    /* 250px por item * 5 items */
    margin: 0 auto;
}

/* Cada item de teléfono */
.screenshot-item {
    flex: 0 0 250px;
    /* No crece, no se encoge, base de 250px */
    max-width: 250px;
    /* Ancho máximo para la imagen del teléfono */
    padding: 0 10px;
    /* Espacio entre items */
    box-sizing: border-box;
}

/* Asegura que la imagen se ajuste a su contenedor */
.screenshot-item img {
    width: 100%;
    height: auto;
}

/* Estilo para los puntos de navegación */
.slider-dots {
    margin-top: 40px;
}

.slider-dots .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    /* Punto inactivo */
    margin: 0 5px;
    cursor: pointer;
}

.slider-dots .dot.active {
    background-color: #ffffff;
    /* Punto activo */
}

.download-cta-section {
    padding: 80px 15px;
    text-align: center;
    /* Centra todo el texto */
    background-color: #f8f9fa;
    /* Un fondo gris muy claro o blanco */
}

.download-cta-section .pre-title {
    font-size: 1.1em;
    color: #555;
    margin-bottom: 10px;
}

.download-cta-section h2 {
    font-size: 3.5em;
    font-weight: bold;
    color: #555;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.download-cta-section p {
    font-size: 1.1em;
    color: #555;
    margin-bottom: 30px;
}

/* Contenedor de botones (usa Flexbox) */
.button-wrapper {
    display: flex;
    justify-content: center;
    /* Centra los botones horizontalmente */
    align-items: center;
    gap: 20px;
    /* Espacio entre los botones */
    flex-wrap: wrap;
    /* Para que se apilen en móviles */
}

/* Estilo general del botón */
.cta-button {
    display: inline-flex;
    /* Para alinear el icono y el texto */
    align-items: center;
    background-color: #5a7a9c;
    /* Color azul-gris de tu imagen */
    color: #ffffff;
    padding: 15px 30px;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #4a6a8c;
    /* Un poco más oscuro al pasar el mouse */
}

/* Estilo del icono */
.cta-button i {
    font-size: 1.3em;
    margin-right: 10px;
    /* Espacio entre icono y texto */
}

/*--------------------------------------------------------------
## Página de Blog (home.php)
--------------------------------------------------------------*/
.page-header {
    padding: 100px 0;
    border-bottom: 0px solid #eaeaea;
    margin-bottom: 40px;
    max-width: 76%;
    /* Mismo ancho que el contenedor de posts */
    margin: 0 auto;
    /* Centra el header */
}

.page-header .page-title {
    font-size: 36px;
    color: #333;
}

.blog-posts-container {
    max-width: 82%;
    /* Un ancho más legible para el blog */
    margin: 0 auto 200px;
    /* Centra el contenedor de posts */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    /* Crea una cuadrícula responsive */
    gap: 30px;
    /* Espacio entre las tarjetas */
}

.blog-post-card {
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    overflow: hidden;
    /* Asegura que la imagen no se salga del borde redondeado */
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.blog-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.post-thumbnail img {
    width: 100%;
    height: 200px;
    /* Altura fija para la imagen */
    object-fit: cover;
    /* Asegura que la imagen cubra el espacio sin deformarse */
}

.post-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Permite que este contenedor crezca para llenar el espacio */
}

.blog-post-card .entry-title {
    margin-top: 0;
}

.blog-post-card .entry-title a {
    text-decoration: none;
    color: #222;
    font-size: 22px;
}

.blog-post-card .entry-title a:hover {
    color: #0073aa;
}

.blog-post-card .entry-meta {
    color: #777;
    font-size: 14px;
    margin-bottom: 15px;
}

.blog-post-card .entry-summary {
    flex-grow: 1;
    /* Empuja el botón "Leer más" hacia abajo */
}

.read-more-link {
    text-decoration: none;
    color: #0073aa;
    font-weight: bold;
    margin-top: 15px;
    align-self: flex-start;
    /* Alinea el botón a la izquierda */
}

.read-more-link:hover {
    text-decoration: underline;
}

/*--------------------------------------------------------------
## Single Post (single.php)
--------------------------------------------------------------*/
.single-post-layout {
    display: flex;
    gap: 40px;
    /* Espacio entre el contenido y la barra lateral */
    padding-top: 120px;
    padding-bottom: 60px;
    max-width: 1100px;
    margin: 0 auto;
}

.main-column {
    flex: 2;
    /* Ocupa 2/3 del espacio */
}

.sidebar-column {
    flex: 1;
    /* Ocupa 1/3 del espacio */
}

.single-post-content .entry-header {
    margin-bottom: 30px;
    text-align: center;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 20px;
}

.single-post-content .entry-title {
    font-size: 38px;
    color: #222;
    margin-bottom: 10px;
}

.single-post-content .entry-meta {
    color: #777;
    font-size: 14px;
}

.post-thumbnail-single {
    margin-bottom: 30px;
}

.post-thumbnail-single img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.entry-content {
    line-height: 1.7;
    font-size: 16px;
    color: #444;
}

/* Estilos para los Widgets de la Barra Lateral */
.widget {
    margin-bottom: 0px;
    background-color: #ffffff;
    padding: 20px;
    padding-bottom: 0px;
    border-radius: 4px;
}

.widget-title {
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eaeaea;
}

.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget li {
    margin-bottom: 10px;
}

.widget a {
    text-decoration: none;
    color: #0073aa;
}

/* Estilos para la Nube de Etiquetas (Tag Cloud) */
.tagcloud a,
.tag-cloud-link {
    display: inline-block;
    background-color: #f2f2f2;
    /* Un fondo gris claro */
    color: #555 !important;
    /* Texto oscuro */
    padding: 5px 12px;
    /* Espaciado interno */
    margin: 0 5px 8px 0;
    /* Margen para separar las etiquetas */
    border-radius: 4px;
    /* Bordes redondeados */
    text-decoration: none;
    /* Quitar el subrayado */
    font-size: 14px !important;
    /* Forzar un tamaño de fuente consistente */
    transition: background-color 0.2s, color 0.2s;
    /* Transición suave */
}

.tagcloud a:hover,
.tag-cloud-link:hover {
    background-color: #0073aa;
    /* Color de fondo al pasar el mouse */
    color: #ffffff !important;
    /* Color de texto al pasar el mouse */
}