/* Global base + header. Loaded on every page. La fuente Montserrat se carga vía en el (header.php). */ :root { --bg-dark:#292927; /* Carbón del fondo del logo */ --blue-cobalt:#125cc4; /* Azul cobalto de las sillas y branding */ --blue-hover:#0f4ba3; /* Azul un poco más oscuro para el hover */ --text-white:#ffffff; /* Texto blanco puro */ --text-gray:#b3b3b3; /* Texto gris para enlaces inactivos */ /* Variables heredadas usadas por el resto del sitio */ --bg:#15171a; --fg:#f5f5f5; --accent:#2f6bff; --accent-soft:#7da6ff; --silver:#cdd3da; --silver-bright:#eef2f6; --navy:#1b2940; --navy-deep:#121b2c; --royal:#1e3fc4; --royal-line:#3f63e6; --rule:rgba(47,107,255,.45); } * { box-sizing: border-box; } body { margin:0; min-height:100vh; display:flex; flex-direction:column; font-family: 'Montserrat', system-ui, sans-serif; background: linear-gradient(rgba(12,18,32,.80), rgba(12,18,32,.90)), url('/img/background.png') center center / cover no-repeat fixed, var(--bg); color:var(--fg); line-height:1.6; } a { color:var(--accent); } main { flex:1 0 auto; width:100%; max-width:900px; margin:0 auto; padding:2.5rem 2rem; } /* ---------- Header ---------- */ .site-header { background-color: var(--bg-dark); border-bottom: 2px solid rgba(18, 92, 196, 0.2); /* Sutil línea azul abajo */ padding: 15px 0; width: 100%; position: sticky; top: 0; z-index: 1000; font-family: 'Montserrat', sans-serif; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); } /* Contenedor alineado */ .header-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; } /* Logo */ .header-logo img { height: 90px; width: auto; display: block; transition: transform 0.3s ease; } .header-logo img:hover { transform: scale(1.02); } /* Menú de navegación */ .header-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 30px; } .header-nav .nav-link { text-decoration: none; color: var(--text-gray); font-size: 14px; font-weight: 600; letter-spacing: 1px; transition: color 0.3s ease; } .header-nav .nav-link:hover, .header-nav .nav-link.active { color: var(--blue-cobalt); } /* Botón de reserva (CTA) */ .btn-book { background-color: var(--blue-cobalt); color: var(--text-white); text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; padding: 12px 24px; border-radius: 4px; box-shadow: 0 4px 15px rgba(18, 92, 196, 0.4); transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; display: inline-block; } .btn-book:hover { background-color: var(--blue-hover); box-shadow: 0 6px 20px rgba(18, 92, 196, 0.6); transform: translateY(-1px); } .btn-book:active { transform: translateY(1px); } /* ---------- Menú hamburguesa (oculto en escritorio) ---------- */ .nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; cursor: pointer; } .nav-burger span { display: block; width: 26px; height: 3px; border-radius: 3px; background: var(--text-white); transition: transform .25s ease, opacity .25s ease; } /* ---------- Responsive ---------- */ @media (max-width: 768px) { .header-container { flex-wrap: wrap; } /* Muestra las tres rallitas y empújalas a la derecha */ .nav-burger { display: flex; margin-left: auto; } /* Menú y botón colapsados por defecto */ .header-nav, .header-cta { flex-basis: 100%; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s ease, opacity .3s ease, padding .3s ease; } .header-nav ul { flex-direction: column; align-items: center; gap: 18px; } .header-cta { text-align: center; } /* Al marcar el checkbox, se despliega */ .nav-toggle:checked ~ .header-nav { max-height: 360px; opacity: 1; padding-top: 18px; } .nav-toggle:checked ~ .header-cta { max-height: 120px; opacity: 1; padding-top: 16px; } /* Animación de las rallitas a "X" */ .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; } .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } }