.elementor-1495 .elementor-element.elementor-element-fd540de{--display:flex;}.elementor-1495 .elementor-element.elementor-element-7c15a1e{width:auto;max-width:auto;}.elementor-1495 .elementor-element.elementor-element-7c15a1e > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-1495 .elementor-element.elementor-element-7c15a1e.elementor-element{--align-self:center;}.elementor-1495 .elementor-element.elementor-element-6b5c908{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;}.elementor-1495 .elementor-element.elementor-element-9f0adbc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1495 .elementor-element.elementor-element-7a3b162{width:auto;max-width:auto;}.elementor-1495 .elementor-element.elementor-element-7a3b162 > .elementor-widget-container{margin:11px 11px 11px 11px;padding:4px 4px 4px 4px;}.elementor-1495 .elementor-element.elementor-element-7a3b162.elementor-element{--align-self:center;--flex-grow:1;--flex-shrink:0;}.elementor-1495 .elementor-element.elementor-element-ccfa867{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-1495 .elementor-element.elementor-element-9f0adbc{--width:50%;}.elementor-1495 .elementor-element.elementor-element-ccfa867{--width:50%;}}/* Start custom CSS for wp-widget-gd_categories, class: .elementor-element-7c15a1e *//* CSS para hacer los botones de categoría/cantón pequeños y en una sola fila (v2.0 - Más preciso) */

/* Contenedor principal del widget Elementor */
.elementor-widget-container .gd-cantones-fila-unica {
    padding: 0 !important; /* Elimina cualquier padding interno del contenedor del widget Elementor */
}

/* El contenedor interno que Bootstrap convierte en "row" (fila de columnas) */
/* Esta es la clase más importante para el layout Flexbox */
.gd-cantones-fila-unica .gd-cptcat-row.row {
    display: flex; /* Activa Flexbox para ponerlos en una fila */
    flex-wrap: nowrap; /* IMPIDE que los elementos salten a la siguiente línea */
    overflow-x: auto;  /* Permite el desplazamiento horizontal si no caben todos */
    -webkit-overflow-scrolling: touch; /* Suaviza el desplazamiento en dispositivos iOS */
    padding-bottom: 10px; /* Un poco de padding para la barra de scroll si aparece */
    margin-left: 0 !important; /* Elimina márgenes de Bootstrap */
    margin-right: 0 !important;
    justify-content: flex-start; /* Alinea los ítems al inicio de la fila */
    align-items: center; /* Alinea los ítems verticalmente */
    gap: 10px; /* Espacio uniforme entre los botones (Flexbox gap) */
}

/* Ocultar scrollbar visible (opcional, para un diseño más limpio) */
.gd-cantones-fila-unica .gd-cptcat-row.row::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}
.gd-cantones-fila-unica .gd-cptcat-row.row {
    scrollbar-width: none;  /* Firefox */
}

/* Ajusta los ítems individuales de categoría (cada botón, que es una "columna") */
/* Esto anula el comportamiento de las columnas de Bootstrap para que estén en una fila */
.gd-cantones-fila-unica .gd-cptcat-ul.gd-cptcat-parent.col {
    flex-shrink: 0; /* Impide que se encojan y obliga a mantener su tamaño */
    width: auto; /* El ancho será el de su contenido, no el de una columna de Bootstrap */
    max-width: unset !important; /* Deshace cualquier límite de ancho impuesto por Bootstrap */
    margin-left: 5px !important; /* Espacio horizontal entre botones */
    margin-right: 5px !important;
    margin-bottom: 0 !important; /* Elimina el margen inferior */
    /* Añadir border-radius y box-shadow aquí para que afecte a la caja más externa */
    border-radius: 20px !important; /* Bordes redondeados para la pastilla */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; /* Sombra sutil */
}

/* Estilos para el contenedor de la tarjeta y el cuerpo de la tarjeta (el aspecto principal del botón) */
.gd-cantones-fila-unica .card {
    height: auto !important; /* La altura se ajustará al contenido */
    border: none !important; /* Elimina el borde de la tarjeta */
    background-color: transparent !important; /* Fondo transparente para la tarjeta */
    box-shadow: none !important; /* Elimina sombra de la tarjeta si la tiene */
}

.gd-cantones-fila-unica .card-body.btn.btn-outline-primary {
    padding: 8px 15px !important; /* Reduce el padding interno para hacerlo más pequeño */
    min-height: unset !important; /* Asegura que no tenga una altura mínima fija */
    background-color: #f0f8ff !important; /* Fondo azul muy claro */
    border: 1px solid #a3ccff !important; /* Borde sutil */
    transition: all 0.2s ease-in-out; /* Transición suave para efectos hover */
    border-radius: 20px !important; /* Aplica el borde redondeado al card-body */
}

/* Estilos para el texto del botón (ej. "Chone") y el enlace */
.gd-cantones-fila-unica .card-body a.stretched-link {
    font-size: 0.9em !important; /* Reduce el tamaño de la fuente */
    line-height: 1.2 !important; /* Ajusta la altura de línea */
    text-align: center;
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
    text-decoration: none; /* Elimina el subrayado */
    color: #0056b3 !important; /* Color de texto azul oscuro */
    /* display: flex; align-items: center; justify-content: center; ya lo tienen los padres */
}

/* Estilos para el contenedor del icono (el círculo blanco con el pin) */
.gd-cantones-fila-unica .gd-cptcat-cat-left {
    width: 28px !important; /* Reduce el tamaño del círculo del icono */
    height: 28px !important;
    min-width: 28px !important; /* Para asegurar que no se encoja */
    min-height: 28px !important;
    margin-right: 8px !important; /* Ajusta espacio entre icono y texto */
    background-color: #ffffff !important; /* Fondo blanco para el círculo */
    border: 1px solid #e9e9e9 !important; /* Borde sutil del círculo */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Pequeña sombra para el círculo */
}

/* Estilos para la imagen del icono dentro del círculo (el pin.png) */
.gd-cantones-fila-unica .gd-cptcat-cat-left img {
    width: 16px !important; /* Tamaño del icono */
    height: 16px !important;
}

/* Estilos para el texto de la categoría (Chone, Flavio Alfaro, etc.) */
.gd-cantones-fila-unica .gd-cptcat-cat-right {
    text-transform: capitalize !important; /* Opcional: Primera letra en mayúscula, el resto minúscula */
    text-overflow: ellipsis !important; /* Añade puntos suspensivos si el texto es muy largo */
    overflow: hidden !important; /* Asegura que el texto no se salga del contenedor */
    white-space: nowrap !important; /* Asegura que no se rompa la línea del texto principal */
    flex-grow: 1; /* Permite que el texto crezca y ocupe espacio */
}

/* Estilos para el contador (el número, ej. "2") */
.gd-cantones-fila-unica .gd-cptcat-count.badge {
    font-size: 0.75em !important; /* Tamaño del número de conteo */
    padding: 3px 8px !important;
    margin-left: 5px !important;
    background-color: #0056b3 !important; /* Fondo azul oscuro */
    color: white !important;
    border-radius: 12px !important; /* Más redondeado */
    flex-shrink: 0; /* Impide que se encoja para mostrar el número completo */
}

/* Efectos al pasar el ratón (hover) sobre los botones de categoría */
.gd-cantones-fila-unica .card-body.btn-outline-primary:hover {
    background-color: #c2d4ff !important; /* Fondo azul más intenso al pasar el ratón */
    border-color: #0056b3 !important;
    color: #003366 !important; /* Texto un poco más oscuro al pasar el ratón */
    transform: translateY(-1px); /* Pequeño efecto de elevación */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; /* Sombra un poco más pronunciada */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fd540de *//* CSS para hacer los botones de categoría de GeoDirectory pequeños y en una sola fila */

/* Contenedor principal de los botones de categoría */
/* El .elementor-1495 .elementor-element.elementor-element-fd540de apunta a la clase que acabas de añadir en Elementor y al contenedor Bootstrap */
.elementor-widget-container .gd-category-row-small .gd-cptcat-row.row {
    display: flex; /* Activa Flexbox para la fila */
    flex-wrap: nowrap; /* IMPIDE que los elementos salten a la siguiente línea */
    overflow-x: auto;  /* Permite el desplazamiento horizontal si no caben todos */
    -webkit-overflow-scrolling: touch; /* Suaviza el desplazamiento en dispositivos iOS */
    padding-bottom: 10px; /* Un poco de padding para la barra de scroll si aparece */
    margin-left: 0 !important; /* Elimina márgenes de Bootstrap que causan columnas */
    margin-right: 0 !important;
}

/* Ocultar scrollbar visible (opcional, para un diseño más limpio) */
.gd-category-row-small .gd-cptcat-row.row::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}
.gd-category-row-small .gd-cptcat-row.row {
    scrollbar-width: none;  /* Firefox */
}

/* Ajusta los ítems individuales de categoría (las columnas 'col') */
/* Esto anula el comportamiento de las columnas de Bootstrap para que estén en una fila */
.gd-category-row-small .gd-cptcat-ul.gd-cptcat-parent.col {
    flex-shrink: 0; /* Impide que se encojan y obliga a mantener su tamaño */
    width: auto; /* El ancho será el de su contenido, no el de una columna de Bootstrap */
    max-width: unset; /* Deshace cualquier límite de ancho impuesto por Bootstrap */
    margin-left: 5px !important; /* Espacio horizontal entre botones */
    margin-right: 5px !important;
    margin-bottom: 0 !important; /* Elimina el margen inferior */
}

/* Estilos para el botón/card interno (el aspecto principal del botón de categoría) */
.gd-category-row-small .gd-cptcat-ul.gd-cptcat-parent .card-body {
    padding: 8px 15px !important; /* Reduce el padding para hacerlo más pequeño */
    min-height: unset !important; /* Asegura que no tenga una altura mínima fija */
    border-radius: 20px !important; /* Bordes más redondeados para aspecto de "pastilla" */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; /* Sombra sutil para darle relieve */
}

/* Estilos para el texto del botón (ej. "Portoviejo") y el enlace */
.gd-category-row-small .gd-cptcat-ul.gd-cptcat-parent .card-body a.stretched-link {
    font-size: 0.9em !important; /* Reduce el tamaño de la fuente */
    line-height: 1.2 !important; /* Ajusta la altura de línea */
    text-align: center;
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
    text-decoration: none; /* Si son enlaces, quita el subrayado */
    display: flex; /* Para alinear el icono y el texto dentro del botón */
    align-items: center; /* Alinea verticalmente */
    justify-content: center; /* Alinea horizontalmente */
    min-width: 90px; /* Ancho mínimo para que no sean demasiado pequeños */
    height: 38px; /* Altura fija para uniformidad, ajusta si es necesario */
    color: #0056b3; /* Color de texto azul oscuro */
}

/* Estilos para el contenedor del icono (el círculo blanco con el pin) */
.gd-category-row-small .gd-cptcat-cat-left {
    width: 28px !important; /* Reduce el tamaño del círculo del icono */
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    margin-right: 8px !important; /* Ajusta espacio entre icono y texto */
}

/* Estilos para la imagen del icono dentro del círculo (el pin.png) */
.gd-category-row-small .gd-cptcat-cat-left img {
    width: 16px !important; /* Tamaño del icono */
    height: 16px !important;
}

/* Estilos para el contador (el número al lado del nombre, ej. "2") */
.gd-category-row-small .gd-cptcat-count.badge {
    font-size: 0.75em !important; /* Tamaño del número de conteo */
    padding: 3px 6px !important;
    margin-left: 5px !important;
    background-color: #e0edff !important; /* Fondo azul claro */
    color: #0056b3 !important; /* Texto azul oscuro */
    border-radius: 10px !important; /* Bordes redondeados */
}

/* Efecto al pasar el ratón (hover) sobre los botones de categoría */
.gd-category-row-small .gd-cptcat-ul.gd-cptcat-parent .card-body.btn-outline-primary:hover {
    background-color: #c2d4ff !important; /* Fondo azul más intenso al pasar el ratón */
    border-color: #0056b3 !important;
    color: #003366 !important; /* Texto un poco más oscuro */
    transform: translateY(-1px); /* Pequeño efecto de elevación */
}

/* Asegura que el contenedor del texto de la categoría no tenga truncamiento forzado */
.gd-category-row-small .gd-cptcat-cat-right {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

/* Ajustes para el contenedor principal de Elementor, si tiene padding interno */
.elementor-widget-container .gd-category-row-small {
    padding: 0 !important; /* Elimina cualquier padding interno del contenedor del widget Elementor */
}/* End custom CSS */