/* ========================================================= VIBRABUENA · Panel de Tweaks Variantes de identidad aplicadas via [data-*] en . Persistencia client-side (localStorage). No toca server. ========================================================= */ /* ─── Paletas ─────────────────────────────────────────── */ [data-palette="noche"] { --color-background: #0d1326; --color-surface: #16203f; --color-surface-strong: #1f2c52; --color-surface-soft: #1a2440; --color-ink: #f1e8c8; --color-text: #e3d8b3; --color-text-muted: #aab1c8; --color-primary: #6d8a3a; --color-primary-soft: #88a64f; --color-primary-glow: #b8d57a; --color-ember: #e88a3c; --color-ember-soft: #3b2918; --color-gold: #f0c562; --color-gold-soft: #4a3a16; --color-night: #060a18; --color-night-soft: #1a234a; --color-night-glow: #cdd5f0; --color-outline: rgba(241, 232, 200, 0.14); --color-outline-strong: rgba(241, 232, 200, 0.26); --shadow-soft: 0 30px 80px rgba(0, 0, 0, 0.55); --shadow-ambient: 0 16px 42px rgba(0, 0, 0, 0.45); --shadow-lift: 0 12px 28px rgba(0, 0, 0, 0.55); } [data-palette="oliva"] { --color-background: #f3efe2; --color-surface: #e7e1c8; --color-surface-strong: #d8d2b6; --color-surface-soft: #ede8d2; --color-ink: #1f2415; --color-text: #2b3320; --color-text-muted: #5e6748; --color-primary: #556b2a; --color-primary-soft: #6f8a3a; --color-primary-glow: #a3c264; --color-ember: #a76a2b; --color-ember-soft: #ecd6b8; --color-gold: #b89143; --color-gold-soft: #ecdba6; } [data-palette="cortijo"] { --color-background: #f7efd9; --color-surface: #ecdcb2; --color-surface-strong: #d9c389; --color-surface-soft: #f1e4c0; --color-ink: #2b1a08; --color-text: #38240f; --color-text-muted: #75583a; --color-primary: #6d4f1f; --color-primary-soft: #8d6b34; --color-primary-glow: #c8a05c; --color-ember: #c0481a; --color-ember-soft: #f6d3bb; --color-gold: #d1893a; --color-gold-soft: #f3dab1; } /* ─── Modo oscuro (sobre cualquier paleta clara) ──────── */ [data-mode="dark"]:not([data-palette="noche"]) { --color-background: #15170f; --color-surface: #1f2217; --color-surface-strong: #2a2e1f; --color-surface-soft: #1a1d13; --color-ink: #f1ead0; --color-text: #e3dcc1; --color-text-muted: #a8a487; --color-outline: rgba(241, 234, 208, 0.14); --color-outline-strong: rgba(241, 234, 208, 0.26); --shadow-soft: 0 30px 80px rgba(0, 0, 0, 0.55); --shadow-ambient: 0 16px 42px rgba(0, 0, 0, 0.45); --shadow-lift: 0 12px 28px rgba(0, 0, 0, 0.55); } [data-mode="dark"][data-palette="cortijo"] { --color-background: #1a1107; --color-surface: #251a0d; --color-surface-strong: #322310; --color-ink: #f5e3c0; --color-text: #ecd8af; --color-text-muted: #b8a274; } [data-mode="dark"][data-palette="oliva"] { --color-background: #131711; --color-surface: #1b2117; --color-surface-strong: #25301c; --color-ink: #ece8c8; } /* ─── Tipografías ─────────────────────────────────────── */ :root { --font-display: "Noto Serif", Georgia, serif; } [data-type="clasico"] { --font-display: "Cormorant Garamond", "Bodoni Moda", Didot, serif; } [data-type="humanista"] { --font-display: "Lora", "EB Garamond", Georgia, serif; } [data-type="grotesco"] { --font-display: "Bricolage Grotesque", "Manrope", system-ui, sans-serif; } /* ─── Densidad ────────────────────────────────────────── */ [data-density="compacto"] .section, [data-density="compacto"] .page-hero { padding: 3.5rem 0; } [data-density="compacto"] .section--compact { padding: 2.4rem 0; } [data-density="compacto"] .container-shell, [data-density="compacto"] .container-narrow { --container-width: min(1100px, calc(100vw - 2rem)); --container-narrow: min(820px, calc(100vw - 2rem)); } /* ─── Forma (curvatura) ───────────────────────────────── */ [data-shape="redondo"] { --radius-sm: 1rem; --radius-md: 1.4rem; --radius-lg: 1.85rem; --radius-xl: 2.4rem; } [data-shape="recto"] { --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-pill: 0; } /* ─── Acento CTA ──────────────────────────────────────── */ [data-cta="dorado"] { --color-ember: #c89436; --color-ember-soft: #f1dfb2; } [data-cta="dorado"] .floating-booking { background: linear-gradient(135deg, #c89436, #e0a84a); box-shadow: 0 16px 32px rgba(200, 148, 54, 0.32); } [data-cta="dorado"] .floating-booking:hover { box-shadow: 0 20px 38px rgba(200, 148, 54, 0.42); } [data-cta="higuera"] { --color-ember: #2f4719; --color-ember-soft: #d6e2c2; } [data-cta="higuera"] .floating-booking { background: linear-gradient(135deg, #2f4719, #4a662a); box-shadow: 0 16px 32px rgba(47, 71, 25, 0.32); } [data-cta="higuera"] .floating-booking:hover { box-shadow: 0 20px 38px rgba(47, 71, 25, 0.42); } /* ─── Textura ─────────────────────────────────────────── */ [data-texture="liso"] .site-texture { opacity: 0; } [data-texture="lino"] .site-texture { opacity: 0.08; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath fill='%23000' fill-opacity='0.35' d='M0 0h1v80H0zM20 0h1v80h-1zM40 0h1v80h-1zM60 0h1v80h-1zM0 0v1h80V0zM0 20v1h80v-1zM0 40v1h80v-1zM0 60v1h80v-1z'/%3E%3C/svg%3E"); } /* ─── Escala base (font-size root) ────────────────────── */ html { font-size: var(--root-font-size, 100%); } /* ─── Panel · FAB ─────────────────────────────────────── */ .tw-fab { position: fixed; left: 1.3rem; bottom: 1.3rem; z-index: 49; width: 2.85rem; height: 2.85rem; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 999px; background: rgba(26, 29, 18, 0.78); color: #f3eccf; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.08); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms ease, background 220ms ease; } .tw-fab:hover { transform: translateY(-2px) rotate(45deg); background: rgba(26, 29, 18, 0.92); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.14); } .tw-fab[data-on="1"] { transform: rotate(135deg); background: var(--color-ember, #b15224); color: #fff; } .tw-fab svg { width: 1.15rem; height: 1.15rem; } /* ─── Panel · drawer ──────────────────────────────────── */ .tw-panel { position: fixed; left: 1.3rem; bottom: 5rem; z-index: 50; width: 305px; max-height: calc(100vh - 7rem); display: flex; flex-direction: column; background: rgba(247, 243, 226, 0.78); color: #1a1d12; border: 0.5px solid rgba(255, 255, 255, 0.55); border-radius: 18px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 18px 60px rgba(0, 0, 0, 0.22); -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%); font: 12px/1.45 "Manrope", ui-sans-serif, system-ui, sans-serif; overflow: hidden; transform-origin: bottom left; animation: tw-pop 260ms cubic-bezier(.2,.85,.3,1.15); } [data-mode="dark"] .tw-panel, [data-palette="noche"] .tw-panel { background: rgba(22, 32, 63, 0.82); color: #f1e8c8; border-color: rgba(255, 255, 255, 0.08); } @keyframes tw-pop { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .tw-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 10px 13px 18px; border-bottom: 0.5px solid rgba(0, 0, 0, 0.08); } [data-mode="dark"] .tw-head, [data-palette="noche"] .tw-head { border-bottom-color: rgba(255, 255, 255, 0.08); } .tw-head b { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; } .tw-head small { display: block; font-weight: 500; color: rgba(0, 0, 0, 0.42); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; } [data-mode="dark"] .tw-head small, [data-palette="noche"] .tw-head small { color: rgba(255, 255, 255, 0.45); } .tw-x { appearance: none; border: 0; background: transparent; color: inherit; opacity: 0.55; width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font-size: 14px; line-height: 1; } .tw-x:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); } .tw-body { padding: 6px 18px 16px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.18) transparent; } .tw-body::-webkit-scrollbar { width: 7px; } .tw-body::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; } .tw-sect { margin: 12px 0 -2px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(0, 0, 0, 0.5); } .tw-sect:first-child { margin-top: 6px; } [data-mode="dark"] .tw-sect, [data-palette="noche"] .tw-sect { color: rgba(255, 255, 255, 0.5); } .tw-row { display: flex; flex-direction: column; gap: 6px; } .tw-row-h { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; } .tw-lbl { display: flex; justify-content: space-between; align-items: baseline; color: rgba(0, 0, 0, 0.72); font-weight: 500; } [data-mode="dark"] .tw-lbl, [data-palette="noche"] .tw-lbl { color: rgba(255, 255, 255, 0.78); } .tw-val { color: rgba(0, 0, 0, 0.45); font-variant-numeric: tabular-nums; font-weight: 500; } [data-mode="dark"] .tw-val, [data-palette="noche"] .tw-val { color: rgba(255, 255, 255, 0.5); } /* Segmented (radio horizontal pill) */ .tw-seg { position: relative; display: flex; padding: 3px; border-radius: 10px; background: rgba(0, 0, 0, 0.07); user-select: none; } [data-mode="dark"] .tw-seg, [data-palette="noche"] .tw-seg { background: rgba(255, 255, 255, 0.08); } .tw-seg-thumb { position: absolute; top: 3px; bottom: 3px; border-radius: 7px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); transition: left 0.18s cubic-bezier(.3,.7,.4,1.2), width 0.18s; } [data-mode="dark"] .tw-seg-thumb, [data-palette="noche"] .tw-seg-thumb { background: rgba(255, 255, 255, 0.16); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .tw-seg button { appearance: none; position: relative; z-index: 1; flex: 1; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; min-height: 26px; border-radius: 7px; cursor: pointer; padding: 4px 6px; line-height: 1.2; overflow-wrap: anywhere; opacity: 0.62; transition: opacity 0.18s; } .tw-seg button[aria-checked="true"] { opacity: 1; } /* Swatch row (paleta) */ .tw-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .tw-swatch { appearance: none; border: 1.5px solid transparent; background: transparent; padding: 5px 4px 6px; border-radius: 9px; cursor: pointer; transition: border-color 0.16s, transform 0.16s; color: inherit; } .tw-swatch:hover { transform: translateY(-1px); } .tw-swatch[aria-checked="true"] { border-color: rgba(0, 0, 0, 0.55); } [data-mode="dark"] .tw-swatch[aria-checked="true"], [data-palette="noche"] .tw-swatch[aria-checked="true"] { border-color: rgba(255, 255, 255, 0.75); } .tw-swatch-dot { width: 100%; aspect-ratio: 1.6 / 1; border-radius: 6px; margin-bottom: 4px; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18); } .tw-swatch-lbl { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; text-align: center; } /* Slider */ .tw-slider { appearance: none; -webkit-appearance: none; width: 100%; height: 4px; margin: 8px 0; border-radius: 999px; background: rgba(0, 0, 0, 0.14); outline: none; } [data-mode="dark"] .tw-slider, [data-palette="noche"] .tw-slider { background: rgba(255, 255, 255, 0.16); } .tw-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 0.5px solid rgba(0, 0, 0, 0.18); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28); cursor: pointer; } .tw-slider::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 0.5px solid rgba(0, 0, 0, 0.18); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28); } /* Botón */ .tw-btn { appearance: none; height: 30px; padding: 0 14px; border: 0; border-radius: 8px; background: rgba(0, 0, 0, 0.08); color: inherit; font: inherit; font-weight: 600; cursor: pointer; transition: background 0.16s; } .tw-btn:hover { background: rgba(0, 0, 0, 0.14); } [data-mode="dark"] .tw-btn, [data-palette="noche"] .tw-btn { background: rgba(255, 255, 255, 0.1); } [data-mode="dark"] .tw-btn:hover, [data-palette="noche"] .tw-btn:hover { background: rgba(255, 255, 255, 0.16); } .tw-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 4px; } .tw-foot small { color: rgba(0, 0, 0, 0.45); font-size: 10.5px; } [data-mode="dark"] .tw-foot small, [data-palette="noche"] .tw-foot small { color: rgba(255, 255, 255, 0.5); } /* Responsive: en móvil ocupa más */ @media (max-width: 640px) { .tw-panel { left: 0.7rem; right: 0.7rem; width: auto; max-width: 360px; } .tw-fab { left: 0.9rem; bottom: 0.9rem; } } /* Honra reduced motion */ @media (prefers-reduced-motion: reduce) { .tw-panel, .tw-fab, .tw-seg-thumb, .tw-swatch, .tw-slider::-webkit-slider-thumb { transition: none; animation: none; } }