/* ═══════════════════════════════════════════════════════════════════ HEIMKEY — Página de huésped (lo que ve quien escanea el QR) Mobile-first. Cada plantilla setea --accent / --accent-2 / --hero-*. Soporta data-view="static|dynamic" para mostrar la diferencia de modalidad. ═══════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --accent: #2E5085; --accent-2: #4A6FA5; --hero-1: #36486A; --hero-2: #1F2D43; --bg: #F4F6F9; --surface: #FFFFFF; --ink: #14202E; --muted: #6B7A8C; --line: #E6EBF1; --ok: #2F9E6B; --font-display: 'Plus Jakarta Sans', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; padding-bottom: 64px; transition: opacity .2s ease; } /* Anti-parpadeo de idioma: el script del agrega .hk-pre y oculta el contenido hasta que guest.js aplica el idioma del dispositivo (luego lo quita y el body aparece con un fade). Si JS está deshabilitado, .hk-pre nunca se agrega y el contenido se muestra normal. */ html.hk-pre body { opacity: 0; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } .guest { max-width: 480px; margin: 0 auto; background: var(--bg); min-height: 100vh; box-shadow: 0 0 60px rgba(20,32,46,.06); } /* ── Top bar ──────────────────────────────────────────────────── */ .g-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: rgba(244,246,249,.9); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; } .g-topbar.scrolled { border-bottom-color: var(--line); } .g-brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: -.01em; } .g-brand .dot { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; } .g-lang { display: flex; gap: 2px; font-family: var(--font-display); font-size: 11px; font-weight: 700; } .g-lang button { background: none; border: none; cursor: pointer; padding: 6px 8px; color: var(--muted); border-radius: 6px; text-transform: uppercase; letter-spacing: .08em; } .g-lang button.active { color: var(--ink); background: var(--surface); } /* ── Hero ─────────────────────────────────────────────────────── */ .g-hero { position: relative; min-height: 326px; padding: 38px 22px 26px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; overflow: hidden; margin: 2px 16px 0; border-radius: 22px; /* Foto de la propiedad al 100% (sin velo). El degradé de marca es solo fallback si todavía no hay foto; el ::after inferior asegura que el texto se lea. */ background: var(--hero-photo, none) center/cover no-repeat, linear-gradient(160deg, var(--hero-1) 0%, var(--hero-2) 100%); } .g-hero::before { content: none; } .g-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8,15,24,.22) 0%, rgba(8,15,24,0) 32%, rgba(8,15,24,.42) 64%, rgba(8,15,24,.9) 100%); } .g-hero-tag, .g-hero h1, .g-hero p { text-shadow: 0 1px 18px rgba(8,15,24,.5); } .g-hero-tag { position: relative; z-index: 1; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: 10px; display: inline-flex; align-items: center; gap: 8px; } .g-hero-tag .chip { background: rgba(255,255,255,.18); padding: 3px 10px; border-radius: 999px; backdrop-filter: blur(4px); } .g-hero h1 { position: relative; z-index: 1; font-family: var(--font-display); font-size: clamp(2.1rem, 8.5vw, 2.7rem); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; } .g-hero p { position: relative; z-index: 1; margin-top: 10px; color: rgba(255,255,255,.88); font-size: 15px; line-height: 1.5; max-width: 32ch; } /* ── Content wrap ─────────────────────────────────────────────── */ .g-body { padding: 22px 16px 0; } .g-section { margin-bottom: 20px; } .g-card { background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 18px; padding: 20px; box-shadow: 0 1px 2px rgba(20,32,46,.05), 0 14px 34px -22px rgba(20,32,46,.22); } .g-h { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .g-h svg { color: var(--accent); } /* ── WiFi block (primero, destacado) ──────────────────────────── */ .g-wifi { background: var(--accent); color: #fff; border-radius: 16px; padding: 22px; position: relative; overflow: hidden; box-shadow: 0 6px 18px -10px rgba(20,32,46,.18); } .g-wifi::after { content: ''; position: absolute; top: -40px; right: -30px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.1); } .g-wifi-top { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; margin-bottom: 16px; } .g-wifi-top .ic { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .g-wifi-top b { font-family: var(--font-display); font-size: 16px; display: block; } .g-wifi-top small { color: rgba(255,255,255,.8); font-size: 12.5px; } .g-wifi-rows { position: relative; z-index: 1; } .g-wifi-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.18); } .g-wifi-row .k { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); } .g-wifi-row .v { font-family: var(--font-display); font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; } .g-copy { background: rgba(255,255,255,.2); border: none; color: #fff; cursor: pointer; border-radius: 8px; padding: 5px 10px; font-family: var(--font-display); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; transition: background .2s; } .g-copy:hover { background: rgba(255,255,255,.32); } .g-copy.copied { background: #fff; color: var(--accent); } .g-wifi-note { position: relative; z-index: 1; margin-top: 14px; font-size: 12px; color: rgba(255,255,255,.78); display: flex; align-items: center; gap: 8px; } /* ── Quick facts grid ─────────────────────────────────────────── */ .g-facts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin: 18px 0; } .g-fact { background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 16px; padding: 16px 12px; text-align: center; box-shadow: 0 1px 2px rgba(20,32,46,.04), 0 8px 22px -18px rgba(20,32,46,.18); } .g-fact .ic { color: var(--accent); margin-bottom: 8px; display: flex; justify-content: center; } .g-fact .lbl { font-family: var(--font-display); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .g-fact .val { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; margin-top: 3px; } /* ── Lists / steps inside cards ───────────────────────────────── */ .g-steps { list-style: none; counter-reset: s; } .g-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); align-items: start; } .g-steps li:first-child { border-top: none; } .g-steps li::before { counter-increment: s; content: counter(s); width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, white); color: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; } .g-steps li b { font-family: var(--font-display); font-size: 14.5px; display: block; margin-bottom: 1px; } .g-steps li span { font-size: 13.5px; color: var(--muted); } .g-rules { list-style: none; } .g-rules li { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; } .g-rules li:first-child { border-top: none; } .g-rules li svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; } /* ── Map + recommendations ────────────────────────────────────── */ .g-map { height: 172px; border-radius: 16px; position: relative; overflow: hidden; margin-bottom: 16px; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); background: radial-gradient(135px 100px at 19% 82%, color-mix(in srgb, var(--accent) 17%, #E8EEE9), transparent 72%), radial-gradient(150px 120px at 93% 12%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%), linear-gradient(180deg, #EFF2F6 0%, #E6EBF1 100%); } /* Red de calles: avenida diagonal (arriba) + grilla de calles secundarias */ .g-map .grid { position: absolute; inset: 0; background: linear-gradient(24deg, transparent calc(58% - 3px), rgba(255,255,255,.5) calc(58% - 3px), rgba(255,255,255,.5) calc(58% + 3px), transparent calc(58% + 3px)), repeating-linear-gradient(90deg, transparent 0 50px, rgba(255,255,255,.82) 50px 54px), repeating-linear-gradient(0deg, transparent 0 50px, rgba(255,255,255,.82) 50px 54px); } .g-map .road { position: absolute; background: #FFFFFF; border-radius: 3px; box-shadow: 0 0 0 1.5px rgba(20,32,46,.07); z-index: 1; } .g-map .pin { position: absolute; transform: translate(-50%,-100%); color: var(--accent); filter: drop-shadow(0 3px 4px rgba(20,32,46,.32)); z-index: 2; } .g-map .pin.home { color: var(--ink); z-index: 3; } .g-map .pin.home::after { content: ''; position: absolute; left: 50%; top: 100%; width: 30px; height: 30px; border-radius: 50%; transform: translate(-50%,-52%); background: color-mix(in srgb, var(--accent) 22%, transparent); z-index: -1; } .g-recs { list-style: none; } .g-rec { display: flex; align-items: center; gap: 12px; padding: 11px 8px; margin: 0 -8px; border-top: 1px solid var(--line); cursor: pointer; border-radius: 10px; transition: background .15s; } .g-rec:first-child { border-top: none; } .g-rec:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); } .g-rec::after { content: ''; width: 7px; height: 7px; border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); transform: rotate(45deg); opacity: .4; flex-shrink: 0; } .g-rec .pinx { width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, white); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .g-rec b { font-family: var(--font-display); font-size: 14px; display: block; } .g-rec small { color: var(--muted); font-size: 12.5px; } .g-rec .dist { margin-left: auto; font-family: var(--font-display); font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; } /* ── Contact / host ───────────────────────────────────────────── */ .g-host { display: flex; align-items: center; gap: 14px; } .g-host .av { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 18px; flex-shrink: 0; } .g-host b { font-family: var(--font-display); font-size: 15px; } .g-host small { color: var(--muted); font-size: 12.5px; } .g-host .call { margin-left: auto; background: var(--accent); color: #fff; border-radius: 10px; padding: 10px 14px; font-family: var(--font-display); font-size: 12px; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; } /* ── Footer ───────────────────────────────────────────────────── */ .g-foot { text-align: center; padding: 28px 16px 8px; color: var(--muted); font-size: 11.5px; } .g-foot .made { font-family: var(--font-display); font-weight: 600; } .g-foot .made b { color: var(--accent); } /* ── View toggle (estática vs dinámica) ───────────────────────── */ .g-viewbar { position: sticky; top: 52px; z-index: 15; margin: 0; padding: 10px 16px; background: var(--bg); } .g-viewbar-inner { display: flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; } .g-viewbar button { flex: 1; border: none; background: none; cursor: pointer; padding: 9px; border-radius: 999px; font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--muted); transition: all .2s; display: inline-flex; gap: 6px; align-items: center; justify-content: center; } .g-viewbar button.active { background: var(--accent); color: #fff; } .g-viewbar .hint { text-align: center; font-size: 11px; color: var(--muted); margin-top: 8px; padding: 0 8px; } /* Static mode: hide dynamic-only blocks, show locks */ [data-view="static"] [data-dynamic-only] { display: none !important; } .g-locked { display: none; } [data-view="static"] .g-locked { display: block; } .g-lock { background: var(--surface); border: 1px dashed var(--line); border-radius: 16px; padding: 18px; display: flex; gap: 12px; align-items: center; color: var(--muted); } .g-lock .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .g-lock b { font-family: var(--font-display); font-size: 13.5px; color: var(--ink); display: block; } .g-lock small { font-size: 12.5px; } @media (min-width: 520px) { .guest { margin-top: 24px; margin-bottom: 24px; min-height: auto; border-radius: 24px; overflow: hidden; } body { padding-bottom: 24px; } .g-topbar { border-radius: 0; } } /* ── Páginas de servicio (Google/Instagram/WiFi) ── */ .g-cta { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; background:var(--accent); color:#fff; border:none; border-radius:14px; padding:16px; font-family:var(--font-display); font-weight:800; font-size:15px; cursor:pointer; text-decoration:none; transition:filter .2s, transform .2s; box-shadow:0 12px 26px -14px var(--accent); } .g-cta:hover { filter:brightness(1.07); transform:translateY(-2px); } .g-cta.ghost { background:var(--surface); color:var(--ink); border:1.5px solid var(--line); box-shadow:none; } .g-svc-card { text-align:center; } .g-svc-card h2 { font-family:var(--font-display); font-size:20px; font-weight:800; letter-spacing:-.01em; margin:6px 0 4px; } .g-svc-card p.sub { color:var(--muted); font-size:14px; margin-bottom:18px; line-height:1.5; } .g-stars { display:flex; gap:7px; justify-content:center; margin:14px 0 6px; color:#FBBC05; } .g-avatar { width:88px; height:88px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--accent) 14%, white); } .g-handle { font-family:var(--font-display); font-weight:700; color:var(--accent); font-size:15px; margin-bottom:16px; } .g-ig-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px; margin:16px 0; } .g-ig-grid div { aspect-ratio:1/1; border-radius:9px; background:color-mix(in srgb,var(--accent) 16%, white); } .g-linkbtn { display:flex; align-items:center; gap:14px; width:100%; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:11px; text-decoration:none; color:var(--ink); transition:border-color .2s, transform .2s; } .g-linkbtn:hover { border-color:var(--accent); transform:translateX(3px); } .g-linkbtn .lic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; } .g-linkbtn b { font-family:var(--font-display); font-size:14.5px; } .g-linkbtn small { display:block; color:var(--muted); font-size:12px; } .g-linkbtn .arr { margin-left:auto; color:var(--muted-2); flex-shrink:0; }