html {padding: 0;background:linear-gradient(to right, #1b4332, #e9f5db);font-family: Ubuntu;}
body {margin: 0;}

header{display:flex;}
#header-enlaces{flex:1;}
#header-enlaces ul{display:flex;justify-content:center;gap:20px;padding:35px;list-style:none;font-size:x-large;}
#header-texto{flex:4;}


h1,h2 {padding-left: 20px;color:#ffffff;}
a {color: #1b4332;text-decoration: none;font-weight:bold;text-decoration:none;}


/* Contenedor principal del carrusel */
.principal {position: relative;max-width: 800px;margin: -18px auto;overflow: hidden;background: #e9f5db;border-radius: 10px;}
/* Cada slide/proyecto */
.section{min-width: 100%;          /* MUY IMPORTANTE para el carrusel: cada slide ocupa todo el ancho */
    box-sizing: border-box;padding: 20px;text-align: center;transition: transform 0.3s;    
    /* Colocamos contenido en columna: imagen arriba, descripción debajo */
    display: flex;flex-direction: column;align-items: center;}

/* Quita floats antiguos que molestan */
.section img {height: 200px;width: auto;margin-bottom: 10px;}
/* Descripción debajo de la imagen */
.section .description {    max-width: 600px;    padding:15px;}
/* Animacion Basica*/
.section:hover img {    transform: scale(1.03);}

/* Botones del carrusel */
button{border:0;background:rgba(255,255,255,.75);width:60px;height:60px;position:absolute;top:50%;transform:translateY(-50%);border-radius:50%;font-size:30px;line-height:60px;text-align:center;cursor:pointer;}button:hover{background:#fff;}
button:hover {background:rgba(255,255,255,1);}
/* Botón atras y delante del carrusel */
.boton-atras {    left: 10px;}
.boton-delante {    right: 10px;}