@charset "utf-8"; /* CSS Document */ body{ background-repeat:no-repeat; background-size:cover; background-attachment:fixed; } .navbar{ background:rgba(0,0,0,0.4); backdrop-filter:flur (5px); padding:20px; display:flex; justify-content:center; } .nav-list{ list-style-type:none; margin:0; padding:0; display:flex; } .nav-item{ margin:0 20px; } .nav-link{ font-family:Arial, sans-serif; font-size:18px; color:#999; text-decoration:none; transition:color 0.3s ease; } .nav-link:hover{ color:#FFF; } .nav-link:active{ transform:scale(0.9); } footer{ color:#FFFFFF; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:16px; text-align:center; background-color:rgba(0,0,0,0.5); padding:5px; position:fixed; bottom:0; width:100%; font-weight:bold; } table.bienvenida{ margin-left:auto; margin-right:auto; width:100%; table-layout:fixed; align-items: start; } table.bienvenida td, table.bienvenida th{ margin: 10px; height: 50px; width: 150px; text-align: center; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 4rem; color:#FFF; border-radius: 50px; } /*------------------------------------HISTORIA*/ table.historia{ margin-left:auto; background-color:rgba(0,0,0,0.4); margin-right:auto; width:100%; table-layout:fixed; padding: 15px; } table.historia td, table.historia th{ margin: 10px; height: 50px; width: 150px; text-align: justify; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 16px; color: #FFF; border-radius: 50px; padding: 10px; vertical-align:top; } .his{ background:rgba(0,0,0,0.4); backdrop-filter:flur (5px); padding:10px; display:flex; justify-content:center; color:#FFFFFF; font-size: 40px; font-family: "Lucida Sans Unicode"; font-weight:bold; } table.historia td img{ max-width:100%; height:auto; } /*---------------------------------CONTACTO*/ .container { display: flex; justify-content: space-between; align-items: center; padding: 50px; background:rgba(0,0,0,0.4); backdrop-filter:flur (5px); display:flex; } .contact-info, .contact-form { flex: 1; padding: 20px; } .contact-info h1 { margin-bottom: 20px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-weight:bold; color:#FFF; } .contact-info img { max-width: 100%; height: auto; } .contact-form h2 { margin-bottom: 20px; color:#FFF; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; } .contact-form input, .contact-form textarea, .contact-form button { width: 100%; margin-bottom: 20px; padding: 10px; border: none; border-radius: 5px; } .contact-form input, .contact-form textarea { background-color:#333; color: white; } .contact-form button { background-color:#066; color: black; cursor: pointer; color:#CCC; } .contact-form button:hover { background-coloR:#036; } .whatsapp { display: flex; align-items: center; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; color:#FFF; } .whatsapp img { width: 30px; margin-right: 10px; } /*--------------------------------------------TURISMO*/ table.turismo{ margin-left:auto; background-color:rgba(0,0,0,0.4); margin-right:auto; width:100%; table-layout:fixed; padding: 15px; } table.turismo td, table.turismo th{ margin: 10px; height: 50px; width: 150px; text-align: justify; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 16px; color: #FFF; border-radius: 50px; padding: 10px; vertical-align:top; } table.historia td img{ width:95%; height:auto; } .sub { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 24px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; text-transform: none; color: #FFF; padding:0; text-decoration: none; } .turistitulo { font-weight: bold; font-size: 18px; } table.turismo td img{ width:95%; height:auto; } /*--------------------------------------------TURISMO*/ table.tradiciones{ margin-left:auto; background-color:rgba(0,0,0,0.4); margin-right:auto; width:100%; table-layout:fixed; padding: 15px; } table.tradiciones td, table.tradiciones th{ margin: 10px; height: 50px; text-align: justify; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 16px; color: #FFF; padding: 10px; vertical-align:top; } table.tradiciones td img{ max-width:100%; height:auto; } section{ display:flex; width:480px; height:250px; margin:0 auto; } section img { width:0px; flex-grow:1; object-fit:cover; opacity: .8; transition: .5s ease; } section img:hover { width:200px; opacity:1; filter:contrast(120%); } /*--------------------------------------------------------GASTRONOMIA*/ table.turismo td img:hover{ transition: .5s ease; width:100%; opacity:1; filter:contrast(120%); } #s2{ display:flex; width:750px; height:450px; margin:0 auto; } #s2 img { width:0px; flex-grow:1; object-fit:cover; opacity: .8; transition: .5s ease; } #s2 img:hover { cursor:crosshair; width:400px; opacity:1; filter:contrast(120%); } .HOV:HOVER{ width:400px; opacity:1; filter:contrast(120%); } /*-----------------------------------------INFRAESTRUCTURA*/ table.disco th, table.disco td{ border-color: #FFF; width: 25%; height: 200px; border: 1px solid #FFF; border-radius: 5px; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 16px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color:#FFF; text-decoration: none; text-align: center; white-space: normal; margin-left:auto; background-color:rgba(0,0,0,0.4); margin-right:auto; table-layout:fixed; padding: 15px; vertical-align:top; } table.disco img{ margin-left:auto; margin-right:auto; width:95%; border-collapse:separate; border-spacing:20px; } table.disco img:hover{ width:100%; } table.disco{ margin-left:auto; margin-right:auto; width:100%; border-collapse:separate; border-spacing:20px; }
.nav-link {
    font-family: Arial, sans-serif;
    font-size: 18px;
    color: #FFFFFF; /* Texto en blanco para contraste */
    text-decoration: none;
    transition: color 0.3s ease;
} 
/* Cambio de color al pasar el cursor */
.nav-link:hover {
    color: #FFD700; /* Dorado */
}
.img-responsive {
    width: 300px; /* Ajusta el tamaño deseado */
    height: 200px; /* Ajusta el tamaño deseado */
    object-fit: cover; /* Para mantener la proporción sin deformar */
}