body { font-family: Arial, sans-serif; margin:0; padding:0; background:#f5f5f5; }

.header { display:flex; justify-content:space-between; padding:1rem; background: #1a4ea4; color:#fff; align-items:center; }
.header .logo img { height:40px; margin-right:0.5rem; }
.nav ul { list-style:none; display:flex; gap:1rem; }
.nav ul li a { color:#fff; text-decoration:none; }

.hero { text-align:center; padding:2rem; background:#e2f0ff; background-image: url(../img/mar.jpg); background-size: 100% auto; background-position: 0px 23%; }
.section { padding: 2rem; margin: 0px 10px; }

footer{ text-align: center; background-color: #1a4ea4; color: #FFF; padding: 8px; margin: 0px 10px; border-radius: 0px 0px 10px 10px; margin-bottom: 20px;}

h2 { color: #1a4ea4; }

hr { border-top: 1px solid #dbdbdb; }

.negocios, .comer { background-color: #FFF; }

.cards { display:flex; flex-wrap:wrap; gap:1rem; }

.card { background:#fff; padding:1rem; border-radius:8px; flex:1 1 calc(33% - 1rem); box-shadow:0 2px 6px rgba(0,0,0,0.1); opacity:1; transform:translateY(0); transition:all 0.5s ease; }
.card-comer { flex: none; }

.card.fade-out { opacity:0; transform:translateY(20px); }
.card.fade-in { opacity:0; transform:translateY(20px); animation: fadeIn 0.5s forwards; }

.menu-toggle { background: transparent; font-size: 29px; color: #FFF; cursor: pointer; border: 0px; display:none; }
@keyframes fadeIn { to { opacity:1; transform:translateY(0); } }

.pagination a { margin:0 3px; text-decoration:none; color:#0073aa; }
.pagination a.active { font-weight:bold; }

@media (max-width:768px){ .card { flex:1 1 calc(50% - 1rem); } }
@media (max-width:480px){ .card { flex:1 1 100%; } .menu-toggle {display:block; grid-area: boton;} nav{display:none; grid-area: menu;} 
header{display: grid !important; grid-template-areas: "logo boton" "menu menu"; grid-template-columns: auto 50px;}
nav ul{ list-style: none; display: flex; gap: 1rem; padding-inline-start: 0px; }
.active{ display:block !important;}
}

.card img { width: 150px; border-radius: 13px; }

select {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

select:hover {
    border-color: #0073aa;
}

select:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 4px rgba(0, 115, 170, 0.3);
}