body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    /* FONDO*/
    background-color: #23629C; 
    color: #333;
}

header {
    /* CABECERA */
    background-color: #0A375A; 
    color: white;
    padding: 15px 0;
    text-align: center;
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background-color 0.3s;
}

nav a:hover {
    /* HOVER: Tono más claro para el efecto de interactividad */
    background-color: #195383; 
    border-radius: 4px;
}




.section {
    padding: 40px 0;
    display: none;
	    width: 80%;
    margin: 20px auto;
    padding: 20px;
    /* Contenedor principal blanco para que el texto resalte */
    background-color: white; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;

}

.section.active {
    display: block;
}

h2 {
    /* ENCABEZADOS: Azul brillante que llama la atención (simulando energía o flujo) */
    color: #0A375A;
	/* Añade un espacio considerable debajo del título */
    margin-bottom: 30px; 
    /* También puedes añadir espacio arriba para que no se pegue al contenido anterior */
    margin-top: 40px;
}
.imagen-derecha {
    float: right;
    width: 45%; 
    
    /* ESTO ES CRUCIAL: */
    /* Agrega un margen de 20px a la izquierda de la imagen */
    margin: 0 0 20px 20px; 
    /* Margen: arriba, derecha, abajo, izquierda */
}
.clear-float {
    /* Esto fuerza al elemento a posicionarse debajo de cualquier flotante (left o right) */
    clear: both; 
}
.separador {
    /* Color de la línea (un azul oscuro o gris sutil) */
    border-bottom: 1px solid #cccccc; 
    /* Espacio debajo de la línea */
    padding-bottom: 15px; 
    /* Espacio entre la línea y el siguiente elemento */
    margin-bottom: 30px; 
}
/* Regla para asegurar que el contenedor padre encierra a sus elementos flotantes */
.clearfix::after {
    content: ""; /* Crea un elemento invisible */
    display: table; /* Se comporta como una fila de tabla */
    clear: both; /* Limpia cualquier flotación que haya ocurrido */
}
.imagen-derecha {
    float: right;
    /* Mantén el ancho que te funcionó para que no se salga */
    width: 40%; 
    margin: 0 0 20px 20px; 
}

/* Agregamos una regla para el iframe para asegurar que no se salga */
.imagen-derecha iframe {
    /* Forzamos al iframe a ocupar el 100% del 40% que le dimos a la clase padre */
    max-width: 100%; 
    height: auto; /* Ajusta la altura automáticamente */
}
/* Estilos para el contenedor del botón (opcional, para centrar) */
.contenedor-boton {
    text-align: center;
    margin-top: 30px;
}

/* Estilos para transformar el enlace en un botón */
.boton-documento {
    /* Color de fondo: Azul oscuro de tu tema */
    background-color: #195383; 
    /* Color del texto: Blanco */
    color: white; 
    /* Añadir espacio interno (relleno) */
    padding: 12px 25px; 
    /* Quitar el subrayado típico de los enlaces */
    text-decoration: none; 
    /* Esquinas redondeadas */
    border-radius: 5px; 
    /* Hacer el texto más grueso */
    font-weight: bold; 
    /* Mostrar como bloque en línea para que respete el padding y width */
    display: inline-block; 
    /* Transición suave para el efecto hover */
    transition: background-color 0.3s ease;
}

/* Efecto al pasar el ratón (hover) */
.boton-documento:hover {
    /* Un azul más brillante o claro al pasar el ratón */
    background-color: #00BFFF; 
}
/* Estilos del logo */
.site-logo {
    /* Define un tamaño máximo para que no sea demasiado grande */
    height: 70px; 
    width: auto;
    /* Hace que flote a la izquierda para estar junto al título */
    float: left;
    /* Margen para separarlo ligeramente del título o del borde */
    margin-right: 15px; 
    margin-top: 5px; /* Ajuste vertical */
}

/* Estilo para asegurar que el título esté debajo de la barra de navegación */
header h1 {
    /* Asegura que el título no flote */
    float: none; 
    /* Ajusta el margen si es necesario */
    margin: 10px 0; 
    padding-top: 15px; /* Baja el texto si está muy pegado al borde */
}

/* Si tu header envuelve el logo y el título, puedes usar Flexbox para alinearlos */
header {
    display: flex; /* Permite alinear el logo y el h1 */
    align-items: center; /* Centra verticalmente el logo y el h1 */
    padding: 10px 20px;
}
/* Estilo para el contenedor que envuelve las secciones */
.main-content-wrapper {
    background-color: #195383; /* El color azul oscuro de tu tema */
    padding: 20px;
    min-height: 80vh; /* Asegura que se extienda por la página */
}

/* Estilo para los cuadros blancos de contenido */
.section {
    background-color: white;
    padding: 20px;
    margin: 20px auto; 
    border-radius: 8px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 1000px; /* Define el ancho de los cuadros */
    display: none;
}
.section.active {
    display: block;
}
/* Estilos para la barra principal (Título y Logo) */
header {
    background-color: #0A375A; /* Azul muy oscuro para la barra superior */
    color: white;
    padding: 10px 20px;
    display: flex; /* Para alinear el logo y el título */
    align-items: center;
}

/* Estilos para la barra de navegación (Menú) */
nav {
    background-color: #0A375A; /* Un azul medio para la barra de menú */
    display: flex; /* Distribuye los enlaces horizontalmente */
    justify-content: flex-start; /* Alinea los enlaces al inicio */
    padding: 10px 20px;
}
nav a:hover {
    /* HOVER: Tono más claro para el efecto de interactividad */
    background-color: #195383; 
    border-radius: 4px;
}

/* Estilos para los enlaces dentro de la navegación */
nav a {
    color: white;
    text-decoration: none;
    padding: 0 15px; /* Espacio horizontal entre enlaces */
    font-weight: bold;
    /* (Añade el hover si no lo tienes) */
}
.main-content-wrapper {
    /* ... otros estilos ... */
    /* Cambia el padding si es necesario */
    padding: 10px; /* Menos padding en móviles */
}

/* Las secciones blancas deben usar un ancho flexible */
.section {
    /* Usar ancho máximo para que no se extienda demasiado en escritorios */
    max-width: 1000px; 
    /* Usar ancho del 90% para dejar un margen en móviles */
    width: 90%; 
    margin: 15px auto;
    /* ... otros estilos ... */
}
/* Contenedor del Canvas */
#canvasHidraulica {
    width: 100%; /* Asegura que ocupe el espacio disponible */
    height: auto;
}
@media (max-width: 768px) {
    
    /* 1. Título y Logo (Asegura que el texto quepa) */
    header {
        /* Permite que los elementos se apilen si no caben */
        flex-direction: column; 
        text-align: center;
    }

    .site-logo {
        height: 50px; /* Logo más pequeño */
        float: none;
        margin: 0 auto 10px auto; /* Centrar el logo */
    }

    header h1 {
        font-size: 1.5em; /* Título más pequeño */
        padding: 0;
    }
    
    /* 2. Navegación (Enlaces apilados o más compactos) */
    nav {
        /* Si hay muchos enlaces, hazlos que se apilen verticalmente o usa scroll */
        flex-wrap: wrap; 
        justify-content: center;
        padding: 5px;
    }

    nav a {
        padding: 5px 10px; /* Menos espacio entre enlaces */
        font-size: 0.9em;
    }

    /* 3. Secciones (Reduce el padding) */
    .section {
        padding: 10px;
    }
}