/* Configuración general del cuerpo de la página */
body {
    font-family: Arial, sans-serif; /* Define el tipo de letra */
    background-color: #f4f4f4; /* Color de fondo gris muy claro */
    color: #333; /* Color del texto principal */
    text-align: center; /* Centra todo el contenido de la página */
    margin: 0;
    padding: 20px;
}

/* Título principal */
h1 {
    font-size: 3rem; /* Tamaño de letra grande */
    color: #2c3e50; /* Color azul oscuro profesional */
    margin-bottom: 10px; /* Espacio debajo del título */
}

/* Subtítulo */
.subtitulo {
    font-size: 1.5rem; /* Tamaño de letra mediano */
    color: #7f8c8d; /* Color gris suave */
    margin-bottom: 30px; /* Espacio antes de la imagen */
}

/* Estilo para la imagen ovalada */
.imagen-ovalada {
    width: 640px; /* Ancho fijo de la imagen */
    height: 480px; /* Alto fijo de la imagen */
    object-fit: cover; /* Ajusta la imagen para que no se deforme al recortarse */
    border-radius: 50%; /* Esto crea el efecto ovalado/circular */
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); /* Sombra suave (horizontal, vertical, desenfoque, color) */
    margin-bottom: 30px; /* Espacio debajo de la imagen */
}

/* Sección de descripción */
.descripcion {
font-size: 2rem; /* Tamaño de letra medio-grande */
    max-width: 800px;  /* Aumenta el ancho máximo para que el texto grande quepa en menos líneas */
    margin: 0 auto 40px auto; /* Centra el bloque y añade espacio abajo */
    line-height: 1.4; /* Aumenta el espacio entre líneas de texto */
}

/* Contenedor de los botones */
.menu-botones {
    display: flex; /* Alinea los elementos en fila o bloque flexible */
    justify-content: right; /* Alinea los botones a la derecha */
    gap: 15px; /* Espacio entre cada botón */
    flex-wrap: wrap; /* Si no caben en una línea, saltan a la siguiente */
}

/* Estilo individual de los botones */
.boton {
    display: inline-block; /* Permite dar forma de botón al enlace */
    padding: 12px 25px; /* Espacio interno del botón (arriba/abajo, lados) */
    background-color: #76d0bd; /* Color de fondo azul brillante */
    color: white; /* Color del texto del botón */
    text-decoration: none; /* Quita el subrayado típico de los enlaces */
    border-radius: 5px; /* Bordes ligeramente redondeados */
    transition: background-color 0.3s; /* Suaviza el cambio de color al pasar el ratón */
}

/* Efecto al pasar el ratón sobre los botones */
.boton:hover {
    background-color: #006a4e; /* Oscurece el azul cuando se señala el botón */
}