/* ═══════════════════════════════════════════════════════════════ HABITAT 180° — Modo Oscuro Sobrescribe tokens y componentes para tema nocturno. Activado con [data-theme="dark"] en . ═══════════════════════════════════════════════════════════════ */ /* ═══ TOKENS OSCUROS ═══ */ [data-theme="dark"] { --sky: #38bdf8; --sky-light: #7dd3fc; --sky-pale: rgba(14,165,233,0.12); --primary: #38bdf8; --primary-hover: #7dd3fc; --deep: #7dd3fc; --deep-dark: #bae6fd; --navy: #bae6fd; --green: #34d399; --green-light: #6ee7b7; --mint: #6ee7b7; --mint-pale: rgba(52,211,153,0.1); --bg: #0f172a; --bg-alt: #1e293b; --bg-card: #1e293b; --surface: #334155; --text: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-dim: #64748b; --border: rgba(56,189,248,0.12); --border-solid: #334155; --shadow-xs: 0 1px 3px rgba(0,0,0,0.2); --shadow-sm: 0 2px 8px rgba(0,0,0,0.25); --shadow: 0 8px 30px rgba(0,0,0,0.35); --shadow-lg: 0 20px 60px rgba(0,0,0,0.4); --shadow-xl: 0 32px 80px rgba(0,0,0,0.45); --shadow-blue: 0 8px 30px rgba(56,189,248,0.15); --shadow-green: 0 8px 30px rgba(52,211,153,0.12); color-scheme: dark; } /* ═══ BODY ═══ */ [data-theme="dark"] body { background: var(--bg); color: var(--text); } /* ═══ NAVBAR — Glass oscuro ═══ */ [data-theme="dark"] .nav-container { background: rgba(15,23,42,0.7); border-color: rgba(51,65,85,0.6); box-shadow: 0 4px 30px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05); } [data-theme="dark"] .navbar.scrolled .nav-container { background: rgba(15,23,42,0.88); box-shadow: 0 8px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06); } [data-theme="dark"] .nav-brand { color: var(--sky-light); } [data-theme="dark"] .nav-links { background: rgba(56,189,248,0.06); } [data-theme="dark"] .nav-links a { color: var(--text-muted); } [data-theme="dark"] .nav-links a:hover { color: var(--sky-light); background: rgba(56,189,248,0.1); } [data-theme="dark"] .nav-links a.active { background: linear-gradient(135deg, var(--primary), #0369a1); color: white; } [data-theme="dark"] .mobile-toggle span { background: var(--text); } /* ═══ BOTÓN TOGGLE TEMA ═══ */ .theme-toggle { width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer; background: rgba(14,165,233,0.08); color: var(--text-secondary); font-size: 1.15rem; display: flex; align-items: center; justify-content: center; transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .theme-toggle:hover { background: rgba(14,165,233,0.15); color: var(--primary); transform: rotate(20deg); } [data-theme="dark"] .theme-toggle { background: rgba(56,189,248,0.1); color: var(--sky-light); } [data-theme="dark"] .theme-toggle:hover { background: rgba(56,189,248,0.2); } /* Ícono: sol visible en dark, luna visible en light */ .theme-toggle .ri-moon-line { display: inline; } .theme-toggle .ri-sun-line { display: none; } [data-theme="dark"] .theme-toggle .ri-moon-line { display: none; } [data-theme="dark"] .theme-toggle .ri-sun-line { display: inline; } /* ═══ CARDS GENÉRICAS ═══ */ [data-theme="dark"] .card { background: var(--bg-card); border-color: var(--border-solid); } [data-theme="dark"] .card-glass { background: rgba(30,41,59,0.7); border-color: rgba(51,65,85,0.5); } /* ═══ PROPERTY CARDS ═══ */ [data-theme="dark"] .property-card { background: var(--bg-card); border-color: var(--border-solid); } [data-theme="dark"] .property-card:hover { border-color: var(--sky); } [data-theme="dark"] .property-img { background: linear-gradient(135deg, rgba(14,165,233,0.1), rgba(52,211,153,0.08)); } [data-theme="dark"] .property-badge { background: var(--bg-card); color: var(--sky-light); box-shadow: var(--shadow-sm); } [data-theme="dark"] .property-fav { background: rgba(30,41,59,0.85); color: var(--text-muted); } [data-theme="dark"] .property-fav:hover { background: var(--bg-card); } [data-theme="dark"] .property-feat { background: var(--surface); color: var(--text-muted); } [data-theme="dark"] .property-price { color: var(--sky-light); } [data-theme="dark"] .property-footer { border-top-color: var(--border-solid); } /* ═══ SEARCH CARD (hero reservación) ═══ */ [data-theme="dark"] .search-card { background: rgba(30,41,59,0.85); border-color: rgba(51,65,85,0.5); } [data-theme="dark"] .search-card h3 { color: var(--sky-light); } [data-theme="dark"] .search-field input, [data-theme="dark"] .search-field select { background: var(--surface); border-color: var(--border-solid); color: var(--text); } [data-theme="dark"] .search-field input:focus, [data-theme="dark"] .search-field select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(56,189,248,0.12); } /* ═══ FORMULARIOS ═══ */ [data-theme="dark"] .form-input, [data-theme="dark"] .form-select, [data-theme="dark"] .form-textarea { background: var(--surface); border-color: var(--border-solid); color: var(--text); } [data-theme="dark"] .form-input:focus, [data-theme="dark"] .form-select:focus, [data-theme="dark"] .form-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(56,189,248,0.12); } [data-theme="dark"] .form-input::placeholder { color: var(--text-dim); } /* ═══ BOTONES ═══ */ [data-theme="dark"] .btn-outline { background: var(--bg-card); color: var(--sky-light); border-color: var(--border-solid); } [data-theme="dark"] .btn-outline:hover { border-color: var(--primary); color: var(--primary); } [data-theme="dark"] .btn-ghost { color: var(--sky-light); } [data-theme="dark"] .btn-ghost:hover { background: rgba(56,189,248,0.1); } /* ═══ SECCIONES ═══ */ [data-theme="dark"] .section-alt { background: var(--bg-alt); } [data-theme="dark"] .section-tag { background: linear-gradient(135deg, rgba(56,189,248,0.1), rgba(52,211,153,0.08)); border-color: rgba(56,189,248,0.2); color: var(--sky-light); } /* ═══ SERVICIOS PREVIEW ═══ */ [data-theme="dark"] .service-preview-card { background: var(--bg-card); border-color: var(--border-solid); } [data-theme="dark"] .service-preview-card:hover { border-color: var(--sky); } [data-theme="dark"] .service-preview-card h3 { color: var(--sky-light); } [data-theme="dark"] .service-icon-wrap { background: linear-gradient(135deg, rgba(56,189,248,0.12), rgba(52,211,153,0.1)); } /* ═══ TESTIMONIOS ═══ */ [data-theme="dark"] .testimonial-card { background: var(--bg-card); border-color: var(--border-solid); } [data-theme="dark"] .testimonial-text { color: var(--text-secondary); } [data-theme="dark"] .author-avatar { background: linear-gradient(135deg, var(--sky), var(--mint)); } /* ═══ AMENITY BAR ═══ */ [data-theme="dark"] .amenity-bar { border-bottom-color: var(--border-solid); } /* ═══ PRÓXIMAMENTE ═══ */ [data-theme="dark"] .prox-card { background: linear-gradient(135deg, rgba(56,189,248,0.08), rgba(52,211,153,0.06)); border-color: var(--border-solid); } [data-theme="dark"] .prox-amenity { background: var(--surface); color: var(--text-secondary); } /* ═══ CTA GRADIENT — se mantiene, solo ajuste de overlay ═══ */ [data-theme="dark"] .cta-gradient .btn-outline { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); } /* ═══ FLIP CARDS (animaciones) ═══ */ [data-theme="dark"] .flip-card-front { background: linear-gradient(135deg, var(--bg-card), rgba(56,189,248,0.08)); border-color: var(--border-solid); } /* ═══ FOOTER ═══ */ [data-theme="dark"] .footer { background: linear-gradient(180deg, var(--bg-alt), var(--bg)); border-top-color: var(--border-solid); } [data-theme="dark"] .footer-col h4 { color: var(--sky-light); } [data-theme="dark"] .footer-bottom { border-top-color: var(--border-solid); } /* ═══ WHATSAPP FLOAT ═══ */ [data-theme="dark"] .wa-float .wa-tooltip { background: var(--bg-card); color: var(--text); box-shadow: var(--shadow-lg); } [data-theme="dark"] .wa-float .wa-tooltip::after { border-left-color: var(--bg-card); } /* ═══ SCROLLBAR ═══ */ [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--sky), #0369a1); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--primary); } /* ═══ SELECCIÓN ═══ */ [data-theme="dark"] ::selection { background: rgba(56,189,248,0.3); color: #f1f5f9; } /* ═══ SKELETON ═══ */ [data-theme="dark"] .skeleton { background: linear-gradient(90deg, var(--surface) 25%, rgba(56,189,248,0.1) 50%, var(--surface) 75%); background-size: 200% 100%; } /* ═══ PÁGINAS INTERNAS — Estilos inline por componente ═══ */ /* Filtros (alojamientos) */ [data-theme="dark"] .filters-bar { background: var(--bg-card); border-color: var(--border-solid); } [data-theme="dark"] .filter-select { background: var(--surface); border-color: var(--border-solid); color: var(--text); } /* Contacto */ [data-theme="dark"] .contact-card { background: var(--bg-card); border-color: var(--border-solid); } [data-theme="dark"] .contact-card:hover { border-color: var(--sky); } [data-theme="dark"] .social-link { background: var(--bg-card); border-color: var(--border-solid); } [data-theme="dark"] .social-link:hover { background: rgba(56,189,248,0.1); border-color: var(--primary); } [data-theme="dark"] .contact-form-wrap { background: var(--bg-card); border-color: var(--border-solid); } /* Nosotros */ [data-theme="dark"] .timeline-item::before { background: var(--bg-card); } [data-theme="dark"] .value-card { background: var(--bg-card); border-color: var(--border-solid); } [data-theme="dark"] .value-card:hover { border-color: var(--sky); } [data-theme="dark"] .company-card { background: var(--bg-card); border-color: var(--border-solid); } [data-theme="dark"] .company-card:hover { border-color: var(--sky); } /* Propiedad detalle */ [data-theme="dark"] .gallery-more { background: var(--bg-card); color: var(--text); } [data-theme="dark"] .booking-card { background: var(--bg-card); border-color: var(--border-solid); } [data-theme="dark"] .booking-card input, [data-theme="dark"] .booking-card select { background: var(--surface); border-color: var(--border-solid); color: var(--text); } /* ═══ ORBS — Reducir opacidad en dark ═══ */ [data-theme="dark"] .parallax-orb { opacity: 0.15; } /* ═══ GRADIENTE ANIMADO BG ═══ */ [data-theme="dark"] .gradient-bg-animated { background: linear-gradient(135deg, rgba(14,165,233,0.08), rgba(52,211,153,0.06), rgba(14,165,233,0.08), var(--bg-alt)); background-size: 400% 400%; } /* ═══ TRANSICIÓN SUAVE DE TEMA ═══ */ html[data-theme] body, html[data-theme] .nav-container, html[data-theme] .card, html[data-theme] .property-card, html[data-theme] .footer, html[data-theme] .section-alt, html[data-theme] .testimonial-card, html[data-theme] .service-preview-card, html[data-theme] .search-card, html[data-theme] .btn-outline, html[data-theme] .btn-ghost { transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease; }