body {
    font-family: Arial, sans-serif; /* Fuente principal para el texto */
    background-color: #f4f4f4; /* Color de fondo de la página */
    color: #333; /* Color del texto principal */
    margin: 0; /* Elimina el Margen predeterminado */
    padding: 0; /* Elimina el Margen predeterminado */
    background-image: url(/img/images.avif);
    background-size: cover; /*se vea entera*/
    background-repeat: no-repeat; /*se vea entera*/
    background-attachment: fixed; /* Para que el fondo no se mueva al bajar */
}

.base {
    max-width: 800px; /* Ancho máximo para el contenedor */
    margin: 20px auto; /* Centra el contenedor con espacio arriba y abajo */
    background: #f9fbfc; /* Color de fondo del contenedor */
    padding: 20px; /* Espacio interno alrededor del contenido */
    box-shadow: 0 0 10px hsl(313, 97%, 41%); /* Sombra alrededor */
    border-radius: 8px; /* Bordes redondeados */
    overflow: hidden; /* Evita que el contenido sobresalga */
}

header {
    text-align: center; /* Alinia al centro*/
    padding-bottom: 20px; /* Espacio debajo*/
    border-bottom: 2px solid #eaeaea; /* Linea debajo*/
}

.imagen {
    width: 150px; /* Ancho */
    height: 150px; /* Altura */
    border-radius: 50%; /* Circula */
    object-fit: cover; /* Se ajusta sin distorsion */
    transition: transform 0.3s ease; /* Suaviza la animacion */
}

.imagen:hover {
    transform: scale(1.2); /* Agranda la imagen */
}

h1 {
    font-size: 2em; /* Tamaño fuente */
    color: #ac41af;
    margin: 10px 0; /* Espacios arriba y abajo  */
    transition: transform 0.5s ease, color 0.5s ease, text-shadow 0.5s ease; 
    cursor: pointer; 
}

h1:hover {
    transform: rotate(-5deg) scale(1.1); /* Gira y Agranda */
    color: #ff00dd; 
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); 
}

.contacto {
    display: inline-block; /* Permite que sea un boton */
    margin-top: 10px;
    text-decoration: none; /* Subrayado fuera */
    color: #7c2088;
    border: 3px solid #70005d;
    padding: 8px 15px; /* Esapcio interno */
    border-radius: 20px;
    transition: background 0.3s ease;
}

.contacto:hover {
    background: #ff83da;
    color: #6b046e;
}

section {
    margin-top: 30px;
}

h2 {
    font-size: 1.5em;
    color: #b1008ac4;
    border-bottom: 2px solid #fa39d0;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

h2 {
    transition: transform 0.3s ease; 
    transform-origin: left ; 
}

h2:hover {
    cursor: pointer;
    transform: scale(1.1); 
}

.trabajo, .educacion, .experiencia {
    margin-bottom: 20px;
}

h3 {
    font-size: 1.1em;
    margin: 0;
    color: rgb(141, 4, 107);
}

p {
    margin: 5px 0 10px 0;
}

ul {
    list-style-type: square; /* Colcoa cuadrados por defecto */
    padding-left: 20px;
    color: grey
}

li {
    margin-bottom: 5px;
    list-style-type:square
}