body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background-color: #ffffff;
    color: #222;
}

/* Contenedor para una sección (<section class="info-section">) */
.info-section {
    display: flex;          /* Pone texto e imagen uno al lado del otro */
    align-items: center;    /* Centra verticalmente */
    gap: 40px;              /* Espacio entre texto e imagen */
    margin-bottom: 50px;    /* Espacio entre secciones */
    background-color: #ffffff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* El bloque (div) que contiene el título y el párrafo (<div class="text-content">) */
.info-section .text-content {
    flex: 1; /* Ocupa 1 parte del espacio flex (la mitad) */
    max-width: 50%;
}

/* La imagen (<img class="info-image">) dentro de la sección */
.info-section .info-image {
    flex: 1;              /* Ocupa la otra parte del espacio flex (la otra mitad) */
    width: 100%; 
    max-width: 50%;       
    height: 350px;        
    object-position: center; /* Centra la imagen */
    object-fit: cover;    /* Evita que la imagen se deforme (la recorta) */
    border-radius: 5px;
}

/* Clase especial para la sección "Por qué elegir" (<section class="info-section reverse">) */
.info-section.reverse {
    flex-direction: row-reverse; /* Invierte el orden (imagen a la izquierda) */
}

/* Estilos del texto dentro de las secciones de información */

/* El título (<h1>Misión</h1>, <h1>Visión</h1>) dentro del bloque de texto */
.text-content h1 {
    font-size: 4em;
    margin-top: 0;
    margin-bottom: 20px;
    color: #222;
}

/* El párrafo (<p>...</p>) dentro del bloque de texto */
.text-content p {
    font-size: 1.7em;
    color: #555;
}