/* CSS Document */
/* --- 1. VARIABLES (Paleta de Colores B2B) --- */
:root {
    --primary: #0F4C81;       /* Azul Industrial (Confianza) */
    --primary-dark: #0a355c;  /* Azul más oscuro para hover */
    --accent: #E36414;        /* Naranja Quemado (Acción/CTA) */
    --bg-body: #F4F6F8;       /* Gris Humo (Fondo general) */
    --bg-card: #FFFFFF;       /* Blanco Puro (Fondo fichas) */
    --text-main: #2C3E50;     /* Gris Oscuro (Lectura) */
    --text-light: #546E7A;    /* Gris Medio (Metadatos) */
    --border-color: #E0E0E0;  /* Bordes sutiles */
}

/* --- 2. CONFIGURACIÓN BASE --- */
body {
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    line-height: 1.6;
    margin: 0;
}

#CAds1rAm {
    display: block;
    max-width: 100%;
    margin: 33px auto;
    text-align: center;
    overflow: hidden;
}
@media (min-width: 801px) {
    #CAds1rAm {
    max-width: 336px; 
    float: right;
    margin: 30px 0 21px 30px;
    }
}
.CAds1rAm {
    display: block;
    max-width: 100%;
    margin: 33px auto;
    text-align: center;
    overflow: hidden;
}
@media (min-width: 801px) {
    .CAds1rAm {
    max-width: 336px; 
    float: right;
    margin: 30px 0 21px 30px;
    }
}

/* --- Diseño para Anuncios en Medio de Contenido --- */

/* Estilos Base Unificados (Móvil y General) */

.ContenAdsEmc1, #ContenAdsEmc1,
.ContenAdsEmc2, #ContenAdsEmc2,
.ContenAdsEmc3, #ContenAdsEmc3 {
    display: block;
    text-align: center;
    margin: 30px auto;
    padding: 0;
    width: 100%;
    max-width: 100%;
    min-height: 250px;
    background-color: transparent;
    overflow: visible;
}

/* Ajuste para Escritorio (Pantallas grandes) */
@media (min-width: 900px) {
    .ContenAdsEmc1, #ContenAdsEmc1,
    .ContenAdsEmc2, #ContenAdsEmc2,
    .ContenAdsEmc3, #ContenAdsEmc3 {
        min-height: 250px; 
        max-width: 728px;
        margin-left: auto; 
        margin-right: auto;
    }
}

/* --- CONTENEDOR PRINCIPAL (La franja blanca completa) --- */
.header-container {
    width: 100%;
    background-color: #FFFFFF;
    display: block;
    padding: 0;
    margin: 0;
    /* CAMBIO CLAVE: Reemplazamos el borde gris por el Azul Corporativo */
    /* Esto crea un "techo" visual fuerte para la marca */
    border-bottom: 4px solid var(--primary); /* O usa #0F4C81 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Sombra suave para dar profundidad */
}

/* --- CONTENEDOR INTERNO (Centrado y Ancho) --- */
/* Unificamos las clases para evitar redundancia */
.header-container-C1, 
#DivHead1C1 {
    width: 100%;
    /* CAMBIO CRÍTICO: Aumentamos a 1200px para coincidir con el cuerpo de la web */
    max-width: 1200px; 
    margin: 0 auto; /* Centrado automático */
    padding: 15px 20px; /* Espacio interno para que el logo respire */
    box-sizing: border-box; /* Para que el padding no rompa el ancho */
    
    /* Flexbox para alinear verticalmente el logo */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Prepara el espacio por si pones un menú a la derecha */
}

/* --- EL LOGO --- */
#DivLogo1 {
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 0; /* Elimina espacios fantasma debajo de la imagen */
}

/* Enlace del Logo */
#DivLogo1 a {
    display: inline-block;
    transition: opacity 0.3s ease;
}

#DivLogo1 a:hover {
    opacity: 0.9; /* Pequeño efecto al pasar el mouse */
}

/* Imagen del Logo */
#DivLogo1 img {
    border: 0;
    /* Hacemos que el logo sea fluido pero respetando su tamaño máximo */
    max-width: 100%; 
    height: auto; 
    display: block;
}

/* --- MEDIA QUERY: MÓVIL (Menos de 630px) --- */
@media all and (max-width: 630px) {
    .header-container-C1 {
        justify-content: center; /* Centramos el logo en móviles */
        padding: 10px;
    }

    #DivLogo1 {
        text-align: center;
        width: 100%;
    }

    #DivLogo1 img {
        /* Ajustamos el tamaño para que no ocupe toda la pantalla en celulares */
        max-width: 220px; 
        margin: 0 auto;
    }
}
/* --- CONTENEDOR PRINCIPAL (La Hoja) --- */
#DivHoja1 {
    width: 100%;
    /* Aumentamos a 1200px para aprovechar pantallas modernas */
    max-width: 1200px; 
    padding: 0 20px; /* Un poco de aire a los lados */
    margin: 0 auto;
    border: 0px;
    /* Usamos transparente para que se vea el fondo moderno del body */
    background-color: transparent; 
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Espacio moderno entre columna izq y der */
    box-sizing: border-box;
}

/* --- COLUMNA IZQUIERDA (Contenido) --- */
#DivConten1 {
    width: 100%;
    padding: 0; /* Quitamos padding interno, dejamos que las tarjetas respiren */
    background-color: transparent; /* Sin fondo, para que resalten las tarjetas blancas */
    box-sizing: border-box;
    /* Eliminamos el borde punteado viejo */
    border: none; 
}

/* --- COLUMNA DERECHA (Sidebar/Menú) --- */
#DivColDer1 {
    width: 100%;
    background-color: transparent;
    min-width: 300px; /* Estándar para anuncios AdSense */
    padding: 0;
    box-sizing: border-box;
}

/* --- MEDIA QUERY: MÓVIL (Menos de 900px) --- */
@media all and (max-width: 900px) {
    #DivHoja1 {
        gap: 20px; /* Menos espacio en móvil */
        padding: 10px;
    }
    
    /* Tipografía Móvil Mejorada */
    h1 {
        font-size: 1.8rem; /* Más grande y legible */
        line-height: 1.3;
        color: var(--primary); /* Azul Industrial */
    }
    
    .dir-Pdescr1 {
        font-size: 1rem; /* 16px estándar */
        line-height: 1.6;
    }
    
    /* Ajuste de imágenes */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* El menú pasa abajo automáticamente por el flex-wrap */
}

/* --- MEDIA QUERY: ESCRITORIO (Más de 901px) --- */
@media (min-width: 901px) {
    #DivHoja1 {
        flex-wrap: nowrap; /* Forzamos dos columnas */
        padding-top: 30px;
    }

    #DivConten1 {
        flex: 1; /* Ocupa todo el espacio disponible */
        width: auto; 
        order: 1;
    }

    #DivColDer1 {
        width: 320px; /* Ancho fijo ideal para banners de 300px + margen */
        min-width: 300px;
        flex-shrink: 0; /* No permitimos que se encoja */
        order: 2;
        
        /* TRUCO PRO: Sidebar Pegajoso (Sticky) */
        /* Esto hace que el menú/anuncios te sigan al bajar */
        position: static;
        height: auto;
        margin-top: 0;
    }
    
    /* Tipografía Escritorio */
    h1 {
        font-size: 2.2rem; /* Impactante */
        margin-bottom: 20px;
        color: var(--primary);
    }
}

/* --- CONTENEDOR PRINCIPAL --- */
.DivMapeo1bc {
    /* Quitamos el margen negativo y damos aire arriba y abajo */
    margin: 0px 0 20px 0; 
    padding: 0;
    border: 0;
    font-family: 'Inter', sans-serif; /* Tipografía moderna */
}

/* --- LIMPIEZA DE LISTAS (UL / OL) --- */
.DivMapeo1bc ul, 
.DivMapeo1bc ol {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex; /* Alineación perfecta horizontal */
    flex-wrap: wrap; /* Si es muy largo en móvil, baja a la siguiente línea */
    align-items: center;
}

/* --- ITEMS DE LA LISTA (LI) --- */
.DivMapeo1bc li {
    display: inline-flex;
    align-items: center;
    font-size: 0.9rem; /* Tamaño auxiliar (aprox 14px), más pequeño que el texto base */
    color: var(--text-light); /* Gris medio (#546E7A) para la página actual (no clicable) */
    font-weight: 500;
}

/* --- EL SEPARADOR (/) --- */
.DivMapeo1bc li:after {
    content: "/";
    margin: 0 10px; /* Espacio generoso a los lados */
    color: #CCCCCC; /* Gris muy claro para que no distraiga */
    font-weight: normal;
}

/* Quitamos el separador del último elemento */
.DivMapeo1bc li:last-child:after {
    content: "";
    margin: 0;
}

/* --- LOS ENLACES (A) --- */
.DivMapeo1bc a {
    font-size: 0.9rem; /* Mismo tamaño que el texto */
    text-decoration: none; /* Sin subrayado inicial */
    color: var(--primary); /* Azul Industrial (#0F4C81) */
    transition: color 0.2s ease;
    padding: 0; /* Quitamos padding derecho innecesario */
}

/* Efecto Hover */
.DivMapeo1bc a:hover {
    color: var(--accent); /* Naranja (#E36414) */
    text-decoration: underline; /* Subrayado solo al pasar el mouse */
}

/* h1 */
.dir-H1 {
    margin: 12px 0px 12px 0px;
    padding: 0px;
    line-height: 36px;
}

/* Texto Introductorio */
.dir-Pdescr1a {
    line-height: 24px;
}
.dir-Pdescr1ab {
    line-height: 24px;
}
.dir-Pdescr1b {
    border-bottom: 3px solid var(--border-color);
    padding-bottom: 6px;
    line-height: 24px;
}

.dir-ULnotas1b {
    list-style: none; /* Quitamos los puntos negros feos */
    padding: 0;
    margin: 15px 0px 0px 18px;
}

.dir-ULnotas1Li1b {
    position: relative;
    padding-left: 25px; /* Espacio para el nuevo bullet */
    margin-bottom: 10px;

}

/* Creamos un bullet personalizado de color naranja */
.dir-ULnotas1Li1b::before {
    content: "✔"; /* O puedes usar "•" */
    color: var(--accent);
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}
.dir-ULnotas2Li1b {
    position: relative;
    padding-left: 25px; /* Espacio para el nuevo bullet */
    margin-bottom: 10px;
}

/* Creamos un bullet personalizado de color naranja */
.dir-ULnotas2Li1b::before {
    content: "✔"; /* O puedes usar "•" */
    color: var(--accent);
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}
.dir-ULnotas3Li1b {
    position: relative;
    padding-left: 25px; /* Espacio para el nuevo bullet */
    margin-bottom: 10px;
}

/* Creamos un bullet personalizado de color naranja */
.dir-ULnotas3Li1b::before {
    content: "✔"; /* O puedes usar "•" */
    color: var(--accent);
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

.dir-H2 {
    line-height: 27px;
}

/* --- 1. EL CONTENEDOR DESPLEGABLE DEL ÍNDICE) --- */
#DetIndice1 {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0; /* Borde sutil */
    border-radius: 8px;
    margin: 30px 0;
    padding: 0; /* Quitamos padding del contenedor para que el header toque los bordes */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Sombra suave */
    overflow: hidden; /* Para recortar las esquinas */
    clear: both;
    display: block;
}

/* Quitamos el efecto hover en todo el contenedor (solo debe ser en el botón) */
#DetIndice1:hover {
    background-color: #FFFFFF;
    border-color: #D0D0D0;
}

/* --- 2. EL BOTÓN DE APERTURA (Summary) --- */
.SumIndice1class {
    background-color: var(--primary); /* Azul Industrial (#0F4C81) */
    color: #FFFFFF; /* Texto Blanco */
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 15px 20px;
    cursor: pointer;
    list-style: none; /* Oculta el triángulo por defecto */
    display: flex;
    justify-content: space-between; /* Texto a la izq, icono a la der */
    align-items: center;
    transition: background 0.3s ease;
}

.SumIndice1class:hover {
    background-color: #0a355c; /* Azul más oscuro al pasar el mouse */
}

/* Ocultar el marcador por defecto en Chrome/Safari */
.SumIndice1class::-webkit-details-marker {
    display: none;
}

/* --- 3. EL ICONO DE APERTURA (+ / -) --- */
/* Reemplazamos "[mostrar]" por un signo más elegante */
.SumIndice1class::after {
    content: "+"; 
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--accent); /* Naranja (#E36414) */
    line-height: 1;
}

/* Cuando está abierto, cambiamos a signo menos */
#DetIndice1[open] > .SumIndice1class::after {
    content: "−"; 
}

/* --- 4. LA LISTA INTERNA (Grid System) --- */
#DetIndice1 ul.DivIndice1Ul {
    padding: 20px;
    margin: 0;
    list-style: none;
    display: grid;
    /* Magia Responsive: Columnas automáticas de mínimo 280px */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px; /* Espacio entre tarjetas */
    background-color: #F8F9FA; /* Fondo interior gris muy claro */
}

/* --- 5. CADA TARJETA DE EMPRESA (LI) --- */
.DivIndice1Li {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    padding: 15px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-left: 4px solid var(--primary); /* Borde azul a la izquierda */
}

/* Efecto Hover en la tarjeta */
.DivIndice1Li:hover {
    transform: translateY(-3px); /* Se levanta un poco */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-left-color: var(--accent); /* El borde cambia a naranja */
}

/* --- 6. EL ENLACE DEL NOMBRE (Título de la tarjeta) --- */
.Indice1Link {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary);
    text-decoration: none;
    margin-bottom: 10px;
    border-bottom: 1px solid #EEE;
    padding-bottom: 8px;
}

.Indice1Link:hover {
    color: var(--accent);
}

/* --- 7. DATOS DE LA TARJETA (DL, DT, DD) --- */
.Indice1LiDl {
    margin: 0;
    font-size: 0.9rem;
    display: grid;
    grid-template-columns: auto 1fr; /* Etiqueta | Dato */
    gap: 5px 10px; /* Espacio entre filas y columnas */
}

.Indice1LiDt {
    font-weight: 600;
    color: #666; /* Gris medio */
}

.Indice1LiDd {
    margin: 0;
    color: #333; /* Gris oscuro */
}

/* --- Imagen del directorio --- */

.dir-ImgDivCenter {margin: 24px auto 24px auto; width: auto; max-width: 99%; height: auto; padding: 0px; border: 0px; text-align: center;}
.dir-ImgDivCenter img{max-width: 100%; height: auto; margin: 0px auto; padding: 0px; border: 0px;border: 3px solid #ccc;border-radius: 6px;filter: contrast(1.06) brightness(1.03);box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);}

/* --- 3. LA FICHA (Tarjeta / Card) --- */
/* Antes: Un div simple. Ahora: Una tarjeta profesional con sombra */
.dir-FabsDiv1bb {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;          /* Bordes redondeados modernos */
    padding: 30px;               /* Espacio interno generoso */
    margin-bottom: 30px;         /* Separación entre fábricas */
    box-shadow: 0 4px 6px rgba(0,0,0,0.04); /* Sombra sutil y elegante */
    transition: all 0.3s ease;   /* Animación suave al pasar el mouse */
    position: relative;
}

/* Efecto Hover: Al pasar el mouse, la tarjeta "se levanta" y el borde se pone azul */
.dir-FabsDiv1bb:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px rgba(15, 76, 129, 0.1);
    border-color: var(--primary);
}

/* --- 4. TÍTULOS Y ENLACES --- */
.dir-FabsTitleH3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2rem; /* Título grande y legible */
    line-height: 24px;
}

.dir-FabsTitleH3Link {
    color: var(--primary);
    text-decoration: underline;
    font-weight: 700;
}

.dir-FabsTitleH3Link:hover {
    color: var(--accent); /* Cambia a naranja al pasar el mouse */
    text-decoration: underline;
}

/* --- 5. DESCRIPCIÓN Y TEXTO --- */
.dir-FabsDescrP1 {
    font-size: 1rem;
    color: var(--text-main);
    margin-bottom: 15px;
}

/* --- 6. IMAGEN (Logotipo / Foto) --- */
/* Quitamos el círculo y lo hacemos cuadrado redondeado (más corporativo) */
.dir-FabsCircleImgContainer {
    float: right; /* Mantiene la imagen a la derecha */
    width: 120px;
    height: 120px;
    margin-left: 20px;
    margin-bottom: 10px;
    border-radius: 8px; /* Cuadrado con bordes suaves */
    overflow: hidden;
    border: 1px solid #eee;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dir-FabsCircleImgContainer img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Asegura que la imagen llene el cuadro sin deformarse */
}

/* --- CONTENEDOR PRINCIPAL RATING STAR --- */
.dir-FabsRtgDiv1 {
    margin: 0 0 10px 0; /* Un poco de margen abajo para separar del texto */
    padding: 0;
    display: block;
    height: auto;
    /* Eliminamos min/max height fijos para evitar que se corte el contenido */
}

/* --- WRAPPER DEL RATING (Donde ocurre la magia) --- */
.tnt_ratings {
    font-family: 'Inter', sans-serif; /* Usamos tu fuente moderna */
    font-size: 14px;
    
    /* LA SOLUCIÓN DE ALINEACIÓN: */
    display: flex;       /* Convierte el contenedor en flexible */
    align-items: center; /* Centra verticalmente todos los elementos (estrellas y texto) */
    gap: 8px;            /* Espacio automático entre las estrellas y el texto */
    
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
}

/* --- CONTENEDOR DE LAS ESTRELLAS --- */
.rating_stars {
    display: flex; /* Asegura que las estrellas estén en fila */
    align-items: center;
    margin: 0;
    padding: 0;
}

/* --- CADA ESTRELLA INDIVIDUAL --- */
.rating_star {
    float: none; /* ¡IMPORTANTE! Quitamos el float que causaba el desalineado */
    padding: 0 1px; /* Pequeño aire entre estrellas */
    
    /* CAMBIO ESTÉTICO: */
    color: #F39C12; /* Dorado/Naranja (Mejor que rojo #F00) */
    /* Si prefieres el rojo original, usa: color: #F00; */
    
    font-size: 18px; /* Tamaño visualmente agradable */
    cursor: pointer;
    line-height: 1; /* Evita espacios fantasma arriba/abajo */
}

/* --- TEXTO PRINCIPAL (Ej: "Excelente") --- */
.rating_message_1 {
    color: #113610; /* Verde oscuro (Mantenemos tu color original) */
    font-weight: 700;
    font-size: 14px;
    margin: 0;
    padding: 0;
    line-height: 1; /* Dejamos que Flexbox se encargue del centrado */
}

/* --- TEXTO SECUNDARIO (Ej: "(15 votos)") --- */
.rating_message_2 {
    color: #7F8C8D; /* Gris medio moderno */
    font-size: 12px;
    margin: 0;
    padding: 0;
    line-height: 1;
    margin-left: 2px; /* Pequeña separación extra si es necesario */
}

/* --- 7. LISTAS E-E-A-T (Puntos clave) --- */
.dir-FabsDescrUl1bc {
    list-style: none; /* Quitamos los puntos negros feos */
    padding: 0;
    margin: 20px 0;
}

.dir-FabsDescrUl1Libc {
    position: relative;
    padding-left: 25px; /* Espacio para el nuevo bullet */
    margin-bottom: 10px;
    color: var(--text-light);
}

/* Creamos un bullet personalizado de color naranja */
.dir-FabsDescrUl1Libc::before {
    content: "✔"; /* O puedes usar "•" */
    color: var(--accent);
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

/* --- 8. CAJA DE CONTACTO (El área gris) --- */
.dir-FabsubTitleH4 {
    font-size: 1.1rem;
    color: var(--primary);
    margin-top: 25px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--bg-body);
    padding-bottom: 5px;
}

.dir-FabsContacUl1b {
    background-color: #FAFAFA; /* Fondo gris muy claro */
    padding: 20px;
    border-radius: 6px;
    border-left: 4px solid var(--accent); /* Borde naranja a la izquierda */
    list-style: none;
}

.dir-FabsContacUl1b li {
    margin-bottom: 8px;
    display: flex; /* Alinea íconos y texto */
    align-items: flex-start;
    font-size: 0.95rem;
}

/* --- 9. ICONOGRAFÍA AUTOMÁTICA (Sin añadir HTML) --- */
/* CSS para poner iconos antes de cada dato */

.dir-WebLi1::before { content: "🌐"; margin-right: 10px; }
.dir-TelLi1::before { content: "📞"; margin-right: 10px; }
.dir-DirLi1::before { content: "📍"; margin-right: 10px; }
.dir-HoraLi1::before { content: "🕒"; margin-right: 10px; }
.dir-RsLi1::before  { content: "👍"; margin-right: 10px; }

/* CSS para poner iconos antes de cada dato en Fichas Indiv. */

.dir-indivPweb::before { content: "🌐"; margin-right: 10px; }
.dir-indivPtel::before { content: "📞"; margin-right: 10px; }
.dir-indivPdir::before { content: "📍"; margin-right: 10px; }
.dir-IndivPhora::before { content: "🕒"; margin-right: 10px; }
.dir-indivPrs::before  { content: "👍"; margin-right: 10px; }

/* CSS para iconos por país */
/* --- AMÉRICA DEL NORTE --- */
/* México */
.dir-PaisMexLi1::before, .dir-PaisMexP1::before { content: "🇲🇽"; margin-right: 10px; }
/* Estados Unidos */
.dir-PaisUsaLi1::before, .dir-PaisUsaP1::before { content: "🇺🇸"; margin-right: 10px; }

/* --- AMÉRICA DEL SUR --- */
/* Argentina */
.dir-PaisArgLi1::before, .dir-PaisArgP1::before { content: "🇦🇷"; margin-right: 10px; }
/* Brasil */
.dir-PaisBraLi1::before, .dir-PaisBraP1::before { content: "🇧🇷"; margin-right: 10px; }
/* Chile */
.dir-PaisChiLi1::before, .dir-PaisChiP1::before { content: "🇨🇱"; margin-right: 10px; }
/* Colombia */
.dir-PaisColLi1::before, .dir-PaisColP1::before { content: "🇨🇴"; margin-right: 10px; }
/* Ecuador */
.dir-PaisEcuLi1::before, .dir-PaisEcuP1::before { content: "🇪🇨"; margin-right: 10px; }
/* Perú */
.dir-PaisPerLi1::before, .dir-PaisPerP1::before { content: "🇵🇪"; margin-right: 10px; }
/* Paraguay */
.dir-PaisParLi1::before, .dir-PaisParP1::before { content: "🇵🇾"; margin-right: 10px; }
/* Uruguay */
.dir-PaisUruLi1::before, .dir-PaisUruP1::before { content: "🇺🇾"; margin-right: 10px; }
/* Venezuela */
.dir-PaisVenLi1::before, .dir-PaisVenP1::before { content: "🇻🇪"; margin-right: 10px; }

/* --- EUROPA --- */
/* España */
.dir-PaisEspLi1::before, .dir-PaisEspP1::before { content: "🇪🇸"; margin-right: 10px; }

/* Estilos para los enlaces dentro del contacto */
.dir-WebLinkDivDecor1, 
.dir-LinksDivDecor1, 
.dir-GoomapLinkDivDecor1 {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.dir-WebLinkDivDecor1:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* Business Card Ficha Individual */
.dir-DivCardFab1 {margin: 27px auto 27px auto; width: auto; max-width: 100%; height: auto; padding: 0px; border: 0px; text-align: center;}
.dir-DivCardFab1 img{max-width: 100%; height: auto; margin: 0px auto; padding: 0px; border: 0px;}
.dir-ImgCardFab1 {display: block; max-width: 100%; height: auto; margin: 0 auto;}

/* Estilos Maps */
#map {
	width: 96%;
	max-width: 540px;
	height: 360px;
	margin: 18px auto;
	text-align: center;
}
.map {
	width: 96%;
	max-width: 540px;
	height: 360px;
	margin: 18px auto;
	text-align: center;
}

/* --- 10. EL BOTÓN DEL MAPA (Modal Trigger) --- */
.map-trigger {
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    margin-left: 5px;
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.map-trigger:hover {
    text-decoration: underline;
    color: var(--primary);
}

/* 1. El fondo/superposición del modal */
.modal-overlay {
    display: none; /* Oculto por defecto */
    position: fixed; /* Se queda fijo en la pantalla */
    z-index: 1000; /* Por encima de todo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Permite scroll si el modal es muy grande */
    background-color: rgba(0, 0, 0, 0.7); /* Fondo negro semitransparente */
}

/* 2. El contenedor del contenido (la caja blanca) */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: 5% auto; /* 5% desde arriba y centrado horizontalmente */
    padding: 27px;
    border: 1px solid #888;
    width: 90%; /* Responsivo */
    max-width: 800px; /* Ancho máximo */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

/* 3. El botón de cerrar (la 'X') */
.modal-close-button {
    color: #aaa;
    position: absolute;
    top: 5px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
}
.modal-close-button:hover,
.modal-close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* 4. Contenedor responsivo del Iframe (Truco de Aspect Ratio 16:9) */
.modal-map-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* Proporción 16:9 (9 / 16 = 0.5625) */
    height: 0;
}
/* Para una proporción 4:3, usa padding-top: 75% */

.modal-map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --- CONTENEDOR GRID (Igual que antes, perfecto para móviles y PC) --- */
.dir-UlLinks1R1 {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    /* Crea columnas automáticas según el espacio disponible */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); 
    gap: 15px; 
}

/* --- LA TARJETA (LI) --- */
.dir-LiLinks1R1c {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    /* Aquí está el truco: Un borde izquierdo de color en lugar de un icono */
    border-left: 5px solid var(--primary); /* Azul Industrial */
    transition: all 0.2s ease;
    position: relative;
}
.dir-LiLinks1R1 {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    /* Aquí está el truco: Un borde izquierdo de color en lugar de un icono */
    border-left: 5px solid var(--primary); /* Azul Industrial */
    transition: all 0.2s ease;
    position: relative;
}

/* Efecto Hover: La tarjeta sube y el borde cambia a naranja */
.dir-LiLinks1R1c:hover {
    transform: translateY(-3px);
    border-left-color: var(--accent); /* Cambia a Naranja */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.dir-LiLinks1R1:hover {
    transform: translateY(-3px);
    border-left-color: var(--accent); /* Cambia a Naranja */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* --- LIMPIEZA DE SPANS INTERNOS --- */
.dir-SpanIco1aR1c, .dir-SpanIco1bR1c, .dir-SpanIco1cR1c, .dir-SpanIco1dR1c, .dir-SpanIco1eR1c, .dir-SpanIco1fR1c, .dir-SpanIco1gR1c, .dir-LinkDiv1R1 {
    display: block;
    width: 100%;
    height: 100%;
}

/* --- EL ENLACE (Texto) --- */
.dir-Link1R1 {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Texto a la izquierda, Flecha a la derecha */
    padding: 15px 20px;
    text-decoration: none;
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.95rem;
}

/* --- EL ICONO ESTANDARIZADO (Izquierda) --- */
/* En lugar de un zapato o pantalón, usamos un icono genérico de "Enlace/Directorio" */
/* Usamos el selector *[class*="dir-SpanIco"] para que aplique a TODAS las variantes (a,b,c,d...) */
[class*="dir-SpanIco"] .dir-Link1R1::before {
    content: "📂"; /* Icono de Carpeta/Directorio (Universal) */
    /* Opcional: Puedes usar "🏭" (Fábrica) o "🔗" (Enlace) */
    margin-right: 12px;
    font-size: 1.1rem;
    opacity: 0.7; /* Un poco transparente para no robar atención */
    filter: grayscale(100%); /* Lo hacemos gris para que sea neutro */
}

/* --- LA FLECHA DE ACCIÓN (Derecha) --- */
.dir-Link1R1::after {
    content: "➔"; 
    color: var(--border-color); /* Gris claro al inicio */
    font-size: 1.1rem;
    transition: all 0.2s;
}

/* Cuando pasas el mouse por la tarjeta, la flecha se pone naranja y se mueve */
.dir-LiLinks1R1c:hover .dir-Link1R1::after {
    color: var(--accent);
    transform: translateX(5px);
}

.hideshow1 {margin: 18px 0px 36px 0px;}
.hideshow1 h3{font-weight: normal;}
.hideshow1 input{display:none;}
.hideshow1 label{background:#F3F3F3;cursor:pointer;display:block;margin:-15px 0px 0px 0px;padding:9px 3px 12px 3px;z-index:20;font-size:16px;font-family:Arial, Helvetica, sans-serif;color:#666666;text-decoration:none;}
.hideshow1 label:hover{background:#F9F9F9;cursor:pointer;display:block;margin:-15px 0px 0px 0px;padding:9px 3px 12px 3px;z-index:20;font-size:16px;font-family:Arial, Helvetica, sans-serif;color:#333333;text-decoration:none;}
.hideshow1 label .check1span{font-size: 14px;padding-left: 3px; color:#000066; font-weight:normal; text-decoration:underline;}
.hideshow1 label .check1span::after{content:"  [mostrar texto]";}
.hideshow1 input:checked + label{background:#F5F5F5;color:#000099;margin-bottom:0;}
.hideshow1 input:checked + label .check1span::after{content:" [ocultar]";}
.hideshow1 .DivText1{background:#FFFFFF;height:0px !important;overflow:hidden;z-index:10;}
.hideshow1 .DivText1 p{padding:3px;margin:3px 0px 6px 0px;font-size:15px;line-height:21px;background:#F9F9F9;}
.hideshow1 input:checked ~ .DivText1{height:auto !important;margin-bottom:.125em;background:#F9F9F9;}
.hideshow1 input:checked ~ .DivText1 p, span{font-size:15px;line-height:21px;}
.hideshow1 input:checked ~ .DivText1 li{font-size:15px;line-height:21px;}

/* Tabla de FAQ Ficha Individual*/

.DlFaq1 {
	width: 100%;
	margin: 20px 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.FaqRow {
	display: flex;
	flex-direction: column;
	border: 1px solid #ddd;
	border-radius: 6px;
	background-color: #fdfdfd;
	padding: 12px 15px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	transition: background-color 0.3s;
}
.FaqRow:hover {
	background-color: #f9f9f9;
}
.DtFaq1 {
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 6px;
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
}
.DdFaq1 {
	font-size: 15px;
	color: #555;
	line-height: 1.5;
	font-family: Arial, Helvetica, sans-serif;
	margin-left: 15px;
}

/* Link back al directorio principal*/
.dir-P-LinkBack1 {
	text-align: center;
	line-height: 24px;
}
.dir-LinkBack1 {
	font-size: 18px;
	color: #000066;
	text-decoration: underline;
	font-weight: bold;
}
 
/* Coments */
.dir-H2Coment {
    line-height: 27px;
} 
#coment-ID-Div1 {
    margin: 10px 5px 20px 5px;
}

/* MENUS COLDER */

/* --- CONTENEDOR DEL MENÚ (Caja Blanca) --- */
.colder-DivMenus1 {
    width: auto;
    display: block;
    padding: 0; /* Quitamos padding para que los botones toquen los bordes */
    background-color: #FFFFFF;
    text-align: left;
    margin-bottom: 30px; /* Separación con el siguiente elemento */
    
    /* Estilo unificado con las tarjetas de fábrica */
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.04);
    overflow: hidden; /* Para que los bordes redondeados recorten el contenido */
}

/* --- TÍTULO DEL MENÚ --- */
.colder-Title1 {
    font-size: 1.1rem; 
    font-weight: 700;
    margin: 0;
    padding: 15px 20px;
    background-color: var(--primary); /* Azul Industrial */
    color: #FFFFFF; /* Texto blanco */
    border-bottom: 3px solid var(--accent); /* Línea naranja decorativa */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- LISTA PRINCIPAL (UL) --- */
.colder-Ul1 {
    list-style: none; /* Adiós puntos */
    margin: 0;
    padding: 0;
}

/* --- ITEMS DE LISTA (LI) --- */
.colder-Li1 {
    border-bottom: 1px solid #F0F0F0; /* Líneas separadoras sutiles */
    margin: 0;
    padding: 0;
}

.colder-Li1:last-child {
    border-bottom: none; /* Quitamos borde al último */
}

/* --- ENLACES PRINCIPALES (A) --- */
.colder-Links1 {
    display: block; /* Ocupa todo el ancho (Botón) */
    padding: 12px 20px;
    text-decoration: none;
    color: var(--text-main); /* Gris oscuro */
    font-size: 1rem; /* Tamaño legible (16px aprox) */
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
}

/* Efecto Hover: Fondo gris claro y texto azul */
.colder-Links1:hover {
    background-color: #F8F9FA;
    color: var(--primary);
    padding-left: 25px; /* Pequeño desplazamiento a la derecha */
}

/* Flechita automática al hacer hover */
.colder-Links1:hover::before {
    content: "›";
    position: absolute;
    left: 10px;
    color: var(--accent);
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1;
}

/* --- SUB-MENÚ (El Blog y sus hijos) --- */
.colder-Ul1-2 {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #FAFAFA; /* Fondo ligeramente más oscuro para diferenciar */
    border-top: 1px solid #F0F0F0;
}

/* --- ITEMS DEL SUB-MENÚ --- */
.colder-Li1-2 {
    margin: 0;
    padding: 0;
}

/* Enlaces del Sub-menú */
.colder-Li1-2 .colder-Links1 {
    font-size: 0.9rem; /* Un poco más pequeño */
    padding: 10px 20px 10px 35px; /* Más indentación a la izquierda */
    color: var(--text-light); /* Gris medio */
    border-left: 3px solid transparent; /* Preparamos borde para hover */
}

/* Hover específico para sub-menú */
.colder-Li1-2 .colder-Links1:hover {
    color: var(--accent); /* Naranja */
    background-color: #FFFFFF;
    border-left-color: var(--accent); /* Borde naranja a la izquierda */
    padding-left: 40px; /* Desplazamiento */
}

/* Eliminamos la flechita automática del padre para el submenú si queremos un estilo distinto, 
o dejamos que herede la animación de arriba. En este caso, el borde izquierdo ya es suficiente feedback. */
.colder-Li1-2 .colder-Links1:hover::before {
    content: none; 
}

/* --- CONTENEDOR PRINCIPAL DEL FOOTER --- */
footer {
    width: 100%;
    background-color: var(--primary); /* Azul Industrial (#0F4C81) */
    color: #FFFFFF; /* Texto blanco */
    margin-top: 50px; /* Separación del contenido principal */
}

/* Reemplazamos el estilo viejo de .footer-content */
.footer-content, .footer-content-2 {
    background-color: transparent; /* Quitamos el blanco */
    border: none; /* Quitamos el borde gris feo */
    padding: 30px 20px;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- TEXTO Y ENLACES --- */
.foot-cont1 {
    font-family: 'Inter', sans-serif; /* Fuente moderna */
    font-size: 0.95rem;
    color: #E0E0E0; /* Blanco suave para no cansar la vista */
    line-height: 2 !important; /* !important para vencer al estilo inline del HTML */
}

/* Negritas (El nombre del sitio) */
.foot-cont1 b {
    color: #FFFFFF;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

/* --- ENLACES (Links) --- */
.foot-cont1 a {
    color: #BDC3C7; /* Gris claro */
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block; /* Para que el padding funcione */
    padding: 2px 5px; /* Área de clic más grande */
    border-bottom: 1px solid transparent;
}

/* Efecto Hover: Se vuelven Naranjas */
.foot-cont1 a:hover {
    color: var(--accent); /* Naranja (#E36414) */
    border-bottom-color: var(--accent);
}

/* --- ELIMINAR BASURA VISUAL --- */
/* Ese div vacío de 63px al final es innecesario y crea espacio muerto */
footer > div[style*="height: 63px"] {
    display: none !important;
}

/* --- 11. RESPONSIVE (Móvil) --- */
@media (max-width: 768px) {
    .dir-FabsDiv1bb {
        padding: 20px; /* Menos padding en móvil */
    }
    
    .dir-FabsTitleH3 {
        font-size: 1.3rem;
    }
}