/* Contenedor principal */
.company-intro {
    display: flex; /* Esto es clave para poner elementos uno al lado del otro */
    align-items: flex-start; /* Alinea los ítems al inicio (arriba) */
    width: 97%; /* Ancho total del contenedor, ajusta según necesites */
    margin: 50px auto; /* Centra el bloque en la página */
    background-color: #fff;
    border: 1px solid #e0e0e0; /* Borde general si lo necesitas */
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sutil sombra */
}

/* Imagen */
.intro-image {
    flex-shrink: 0; /* Evita que la imagen se encoja */
    margin-right: 20px; /* Espacio entre la imagen y el texto */
    border: 1px solid #c0c0c0; /* Borde alrededor de la imagen */
    padding: 5px; /* Relleno entre el borde y la imagen */
    background-color: #fff;
}

.intro-image img {
    display: block; /* Elimina el espacio extra debajo de la imagen */
    width: 150px; /* Ancho de la imagen, ajusta según tu imagen */
    height: auto; /* Mantiene la proporción original de la imagen */
}

/* Contenido de texto */
.intro-content {
    flex-grow: 1; /* Permite que el contenido ocupe el espacio restante */
    text-align: left; /* Alineación del texto */
}

.heading-large {
    font-family: Arial, sans-serif;
    font-size: 1.2em; /* Tamaño de letra más grande */
    font-weight: bold;
    color: #444; /* Color gris oscuro */
    margin-bottom: 5px; /* Espacio debajo */
    text-transform: uppercase; /* Todo en mayúsculas */
}

.heading-small {
    font-family: Arial, sans-serif;
    font-size: 1.1em; /* Un poco más pequeño */
    font-weight: bold;
    color: #007bff; /* Color azul, ajusta el hex a tu gusto */
    margin-top: 0; /* Elimina el margen superior predeterminado */
    margin-bottom: 15px; /* Espacio debajo */
    text-transform: uppercase;
}

.description-bold {
    font-family: Georgia, serif;
    font-size: 1em;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    line-height: 1.5; /* Espaciado entre líneas */
}

.description-text {
    font-family: Georgia, serif;
    font-size: 0.95em;
    color: #555;
    margin-top: 0;
    line-height: 1.6;
}

.read-more {
    margin-top: 15px;
    font-family: Arial, sans-serif;
    font-size: 0.9em;
}

.read-more a {
    color: #a0a0a0; /* Color del enlace */
    text-decoration: underline; /* Subrayado */
    font-weight: bold;
}

.read-more a:hover {
    color: #007bff; /* Cambia de color al pasar el ratón */
}

.read-more .arrow {
    color: #a0a0a0; /* Color de la flecha */
    margin-right: 5px;
    font-size: 1.1em;
    font-weight: bold;
}

/* ================================== */
/* 1. Estilo Estructural de la Tabla  */
/* ================================== */

.tabla-verde-lateral {
    width: 100%; /* Ancho de la tabla (ajusta si se ve muy estrecha) */
    border-collapse: collapse; 
    margin: 20px auto; 
    table-layout: fixed; /* Ayuda a controlar el ancho de las columnas */
    font-family: Arial, sans-serif;
    font-size: 0.9em;
}

.tabla-verde-lateral td {
    border: 1px solid #ccc;
    padding: 10px;
    vertical-align: top; 
    /* Fondo para la celda principal si se requiere un color 'verde' */
    /* background-color: #f7fff7;  Ejemplo de fondo muy claro */
}

/* Define el ancho de la segunda columna (donde van las imágenes p_1 a p_4) */
/* La primera columna (key-notes) ocupará el espacio restante */
.tabla-verde-lateral td:nth-child(2) {
    width: 50%; 
}

/* ================================== */
/* 2. Estilo de las Celdas de Contenido */
/* ================================== */

/* Estilo para los títulos principales de las celdas grandes */
.tabla-verde-lateral .heading-large {
    font-size: 1em;
    font-weight: bold;
    color: #444;
    margin-top: 0;
    margin-bottom: 8px;
    /* Subrayado opcional para los títulos: */
    /* border-bottom: 1px dashed #ccc; */
    padding-bottom: 5px;
}

/* Estilo para los bloques de enlaces con imágenes (p_1, p_2, etc.) */
.tabla-verde-lateral .content-link p {
    margin: 0;
    line-height: 1.2;
    overflow: hidden; /* Limpia el flotado de la imagen */
}

/* Imagen de contenido (p_1, p_2, etc.) */
.tabla-verde-lateral .content-img {
    float: left; /* Coloca la imagen a la izquierda del texto */
    width: 45%; /* La imagen ocupa casi la mitad de la celda */
    height: auto; 
    margin-right: 8px;
    border: 1px solid #eee; /* Borde sutil */
}

/* ================================== */
/* 3. Estilos de Noticias y Enlaces     */
/* ================================== */

/* Estilo para la lista de noticias (COMPANY HEADLINE NEWS) */
.tabla-verde-lateral .news-item {
    margin: 5px 0;
}

/* Íconos de flecha (arr_1.gif) */
.tabla-verde-lateral .arrow-icon {
    width: 10px;
    height: 10px;
    vertical-align: middle;
    margin-right: 5px;
    float: none; /* Asegura que la flecha no flote */
}

/* Estilo para los enlaces de noticias */
.tabla-verde-lateral .news-item a, 
.tabla-verde-lateral .read-more a {
    text-decoration: underline;
    color: #0000ff; /* Color azul estándar para enlaces */
    font-size: 0.9em;
}