/* ============================================================ puntocar-shared.css Estilos compartidos para todas las páginas de PuntoCar Incluir DESPUÉS de style.css en el ============================================================ */ /* ── FIX CRÍTICO: Navbar siempre visible ── style.css pone .rd-navbar { display:none } por defecto y espera a que core.min.js añada .rd-navbar-fixed / .rd-navbar-static. Si el JS es lento o falla, el header queda invisible en TODAS las páginas excepto index (que tiene otros elementos que lo fuerzan). Forzamos display:block en el wrapper. */ .rd-navbar-wrap .rd-navbar { display: block !important; } /* ── Logo responsive ── */ @media (max-width: 991px) { .rd-navbar-brand .logo-desktop { display: none !important; } .rd-navbar-brand .logo-mobile { display: inline-block !important; } .rd-navbar-wrap { min-height: 0 !important; height: auto !important; } .page > header + *, .page > .swiper-container, .swiper-slider { margin-top: 0 !important; } /* ── Contenedor del navbar ── */ .rd-navbar-main { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 6px 15px !important; position: relative !important; } .rd-navbar-panel { display: flex !important; align-items: center !important; width: 100% !important; justify-content: space-between !important; /* Asegurar que el panel fijo del navbar sea siempre visible */ position: sticky !important; top: 0 !important; z-index: 1080 !important; background: rgba(44, 45, 46, 0.97) !important; height: 56px !important; min-height: 56px !important; } /* ── FIX: Menú desplegable – oculto por defecto ── La clase .open la añade puntocar.js al pulsar la hamburguesa. Usamos position:fixed para cubrir toda la pantalla bajo el navbar. */ .rd-navbar-main-element { display: none !important; position: fixed !important; top: 56px !important; /* exactamente bajo el panel del navbar */ left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; background: #111 !important; padding: 0 !important; z-index: 1079 !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; overflow-y: auto !important; } /* ── FIX CRÍTICO: Anular el drawer lateral de core.min.js ── core.min.js pone .rd-navbar-nav-wrap con: position:fixed, transform:translateX(-110%), width:270px Eso hace que el contenido del menú quede FUERA de pantalla aunque .rd-navbar-main-element sea visible. Lo reseteamos completamente para que fluya dentro del contenedor. */ .rd-navbar-fixed .rd-navbar-nav-wrap, .rd-navbar-fixed .rd-navbar-nav-wrap.active, .rd-navbar-nav-wrap { position: static !important; transform: none !important; width: 100% !important; height: 100% !important; padding: 0 !important; background: transparent !important; overflow: visible !important; top: auto !important; left: auto !important; bottom: auto !important; z-index: auto !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } .rd-navbar-main-element.open { display: flex !important; flex-direction: column !important; justify-content: center !important; } /* ── Lista de items: columna vertical centrada ── */ .rd-navbar-nav { display: flex !important; flex-direction: column !important; padding: 0 !important; margin: 0 !important; list-style: none !important; width: 100% !important; justify-content: center !important; flex: 1 !important; } .rd-navbar-nav > li, .rd-navbar-nav > .rd-nav-item { display: flex !important; flex: 1 !important; max-height: 80px !important; margin: 0 !important; padding: 0 !important; float: none !important; } .rd-navbar-nav > li[style*="display:none"], .rd-navbar-nav > li[style*="display: none"] { display: none !important; flex: 0 !important; max-height: 0 !important; } .rd-navbar-nav > li > a, .rd-navbar-nav > .rd-nav-item > .rd-nav-link { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding: 0 20px !important; margin: 0 !important; color: #fff !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1.2 !important; text-transform: uppercase !important; letter-spacing: 0.03em !important; text-decoration: none !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; background: transparent !important; box-sizing: border-box !important; transition: background 0.15s, color 0.15s !important; } .rd-navbar-nav > li:last-child > a, .rd-navbar-nav > .rd-nav-item:last-child > .rd-nav-link { border-bottom: none !important; } .rd-navbar-nav > li > a:hover, .rd-navbar-nav > .rd-nav-item > .rd-nav-link:hover, .rd-navbar-nav > .rd-nav-item.active > .rd-nav-link { color: #da2626 !important; background: rgba(218,38,38,0.1) !important; } /* ── Wrapper del nav sin padding extra ── */ .rd-navbar-nav-wrap { padding: 0 !important; margin: 0 !important; width: 100% !important; height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } /* ── Botón hamburguesa visible ── */ .rd-navbar-toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; background: transparent !important; border: none !important; cursor: pointer !important; position: relative !important; z-index: 1081 !important; /* sobre el menú abierto */ } .section-lg, .section-xl { padding-top: 40px !important; padding-bottom: 40px !important; } } @media (min-width: 992px) { .rd-navbar-brand .logo-desktop { display: inline-block; } .rd-navbar-brand .logo-mobile { display: none; } .rd-navbar-toggle { display: none !important; } } /* ── Animación X en el icono hamburguesa cuando está activo ── */ .rd-navbar-toggle.active span { background-color: transparent; } .rd-navbar-toggle.active span:before { top: 0; transform: rotate(45deg); } .rd-navbar-toggle.active span:after { top: 0; transform: rotate(-45deg); } /* ============================================================ SCHEDULE OVERLAY (Modal de horario) Oculto por defecto. Se muestra SOLO al añadir clase .show ============================================================ */ .schedule-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 99999; display: none; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; } .schedule-overlay.show { display: flex; opacity: 1; visibility: visible; } /* Modal interior */ .schedule-modal { background: linear-gradient(135deg, #ffffff, #f8f9fa); padding: 40px 35px; border-radius: 20px; text-align: center; color: #333; max-width: 450px; width: 100%; margin: 20px; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3); position: relative; border: 3px solid #da2626; animation: slideInSchedule 0.35s ease-out; } @keyframes slideInSchedule { from { transform: translateY(-24px) scale(0.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .schedule-modal h2 { color: #da2626; font-size: 1.8em; margin-bottom: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; text-transform: uppercase; letter-spacing: -0.02em; } /* Toggle regular / verano */ .schedule-toggle-buttons { display: flex; margin-bottom: 20px; border-radius: 10px; overflow: hidden; box-shadow: 0 3px 10px rgba(0,0,0,0.1); background: white; } .schedule-toggle-btn { flex: 1; padding: 12px 16px; border: none; background: #f8f9fa; color: #666; font-weight: 600; font-size: 0.9em; cursor: pointer; transition: all 0.25s ease; display: flex; align-items: center; justify-content: center; gap: 6px; border-right: 1px solid #e0e0e0; } .schedule-toggle-btn:last-child { border-right: none; } .schedule-toggle-btn:hover { background: #ffe8e8; } .schedule-toggle-btn.active { background: linear-gradient(135deg, #ff4444 0%, #e01010 50%, #bb0000 100%); color: white; box-shadow: 0 3px 12px rgba(218,38,38,0.3); } .schedule-toggle-btn.active.summer { background: linear-gradient(45deg, #ff9800, #ffc107); box-shadow: 0 3px 12px rgba(255,152,0,0.3); } /* Tabla de horarios */ .schedule-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .schedule-table th, .schedule-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #eee; } .schedule-table th { background: linear-gradient(135deg, #ff4444 0%, #e01010 50%, #bb0000 100%); color: white; font-weight: 600; font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.5px; } .schedule-table td { font-size: 0.92em; color: #555; } .schedule-table tr:last-child td { border-bottom: none; } .schedule-table tr:nth-child(even) { background: #f8f9fa; } .schedule-table .weekend { color: #da2626; font-weight: 600; } .schedule-table .closed { color: #888; font-style: italic; } .schedule-table .highlight { background-color: #fff3cd !important; font-weight: 600; color: #856404; } /* Nota informativa */ .schedule-note { font-size: 0.88em; color: #666; margin-bottom: 18px; font-style: italic; background: #f0f8ff; padding: 10px 12px; border-radius: 8px; border-left: 4px solid #da2626; text-align: left; } /* Botón Cerrar */ .schedule-close-btn { background: linear-gradient(135deg, #ff4444 0%, #e01010 50%, #bb0000 100%); border: none; color: white; padding: 11px 28px; border-radius: 25px; font-size: 0.95em; font-weight: 700; cursor: pointer; transition: all 0.25s ease; text-transform: uppercase; letter-spacing: 1px; } .schedule-close-btn:hover { background: #c41e1e; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(218,38,38,0.35); } /* Responsive móvil */ @media (max-width: 480px) { .schedule-modal { padding: 24px 16px; margin: 12px; } .schedule-modal h2 { font-size: 1.4em; } .schedule-table th, .schedule-table td { padding: 8px 10px; font-size: 0.82em; } .schedule-toggle-btn { padding: 10px; font-size: 0.82em; flex-direction: column; gap: 3px; } } /* ============================================================ PROTECCIÓN: deshabilitar selección de texto (global) ============================================================ */ * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } input, textarea, [contenteditable] { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } /* ============================================================ FIX: .page opacity pageTransition de core.min.js pone opacity:0 y luego lo anima. Sin él la página queda gris. Forzamos opacity:1 siempre. ============================================================ */ .page { opacity: 1 !important; } /* ============================================================ HEADER EN PÁGINAS SIN HERO (no-index) El navbar usa rd-navbar-wrap-absolute (position:absolute) que lo hace flotar sobre el contenido. En páginas sin hero banner esto puede hacer que quede "encima" del primer bloque sin reservar espacio. Añadimos padding-top al primer section. ============================================================ */ @media (max-width: 991px) { /* Espacio superior para el navbar fijo en móvil */ .page > header ~ section:first-of-type, .page > header + section, .page > header + div { padding-top: 70px !important; } /* Excepto páginas con swiper/hero que ya lo gestionan */ .page > .swiper-container, .page > header + .swiper-container { padding-top: 0 !important; margin-top: 0 !important; } } @media (min-width: 992px) { /* En desktop con navbar absoluto sobre hero, el primer section necesita padding para no quedar bajo el navbar */ .rd-navbar-wrap-absolute ~ section:first-of-type, .rd-navbar-wrap-absolute + section { /* No tocar — lo gestiona el hero/swiper */ } }