/* ===================== AJUSTA AQUÍ TU MARCA ===================== */ #ssMenu.ss-menu{ --ss-bg:#ffffff; /* fondo del menú (blanco) */ --ss-surface:#f6f5f1; /* superficies */ --ss-text:#1b1b19; /* texto principal (casi negro) */ --ss-muted:#6f6c65; /* texto secundario */ --ss-gold:#bf9a57; /* acento dorado/ocre (marca) */ --ss-gold-2:#d4b374; /* dorado claro */ --ss-gold-ink:#8a6d34; /* dorado oscuro (texto) */ --ss-dark:#1b1b19; /* botón oscuro */ --ss-soft:rgba(191,154,87,.14); /* hover / pulsado */ --ss-tint:rgba(191,154,87,.12); /* fondo iconos */ --ss-line:rgba(0,0,0,.10); /* líneas divisorias */ --ss-font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --ss-serif:'Playfair Display',Georgia,'Times New Roman',serif; } /* ================================================================ */@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');#ssMenu.ss-menu, #ssMenu.ss-menu *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }#ssMenu.ss-menu{ padding:20px 16px calc(20px + env(safe-area-inset-bottom)); background: radial-gradient(120% 55% at 100% 0%, rgba(191,154,87,.06) 0%, rgba(191,154,87,0) 50%), var(--ss-bg); color:var(--ss-text); font-family:var(--ss-font); -webkit-font-smoothing:antialiased; line-height:1.3; }/* ---- Sistema de páginas deslizantes ---- */ #ssMenu .ss-stack{ position:relative; overflow:hidden; } #ssMenu .ss-page{ position:absolute; top:0; left:0; width:100%; transform:translateX(100%); opacity:0; pointer-events:none; transition:transform .36s cubic-bezier(.33,1,.68,1), opacity .28s ease; } #ssMenu .ss-page.is-active{ position:relative; transform:translateX(0); opacity:1; pointer-events:auto; } #ssMenu .ss-page.is-left{ transform:translateX(-24%); opacity:0; pointer-events:none; }/* ---- Marca ---- */ #ssMenu .ss-brand{ display:flex; align-items:center; padding:2px 4px 12px; } #ssMenu .ss-brand img{ height:38px; width:auto; display:block; }#ssMenu .ss-note{ display:flex; align-items:center; gap:9px; padding:11px 13px; margin-bottom:14px; background:var(--ss-tint); border:1px solid rgba(191,154,87,.28); border-radius:11px; font-size:13px; color:var(--ss-text); } #ssMenu .ss-note svg{ width:18px; height:18px; color:var(--ss-gold); flex:0 0 18px; } #ssMenu .ss-note b{ font-weight:600; color:var(--ss-gold-ink); }/* ---- Cabecera de subpágina ---- */ #ssMenu .ss-sub{ display:flex; align-items:center; gap:12px; padding:2px 2px 14px; margin-bottom:8px; border-bottom:1px solid var(--ss-line); } #ssMenu .ss-back{ display:inline-flex; align-items:center; gap:5px; padding:9px 14px 9px 10px; border:0; cursor:pointer; background:var(--ss-tint); color:var(--ss-gold-ink); font-family:var(--ss-font); font-size:13.5px; font-weight:600; border-radius:999px; transition:background .2s ease, transform .1s ease; } #ssMenu .ss-back:active{ transform:scale(.97); } @media (hover:hover){ #ssMenu .ss-back:hover{ background:var(--ss-soft); } } #ssMenu .ss-back svg{ width:17px; height:17px; } #ssMenu .ss-sub__title{ font-size:17px; font-weight:600; color:var(--ss-text); font-family:var(--ss-serif); }/* ---- Nav base ---- */ #ssMenu .ss-nav{ display:flex; flex-direction:column; gap:6px; }#ssMenu .ss-row{ display:flex; align-items:center; gap:13px; width:100%; padding:14px 12px; min-height:56px; border:0; background:transparent; color:var(--ss-text); font-family:var(--ss-font); font-size:16.5px; font-weight:600; letter-spacing:.1px; text-align:left; text-decoration:none; cursor:pointer; border-radius:12px; position:relative; transition:background .2s ease, transform .1s ease; } #ssMenu .ss-row:active{ transform:scale(.99); background:var(--ss-soft); } #ssMenu .ss-row::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); height:0; width:3px; border-radius:3px; background:var(--ss-gold); transition:height .25s ease; } @media (hover:hover){ #ssMenu .ss-row:hover{ background:var(--ss-soft); } #ssMenu .ss-row:hover::before{ height:22px; } }#ssMenu .ss-ico{ display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; border-radius:10px; background:var(--ss-tint); color:var(--ss-gold); } #ssMenu .ss-ico svg{ width:20px; height:20px; } #ssMenu .ss-txt{ flex:1 1 auto; } #ssMenu .ss-arw{ color:var(--ss-muted); opacity:.55; display:flex; } #ssMenu .ss-arw svg{ width:18px; height:18px; }/* ---- Enlaces finales (hojas) ---- */ #ssMenu .ss-leaves{ display:flex; flex-direction:column; gap:4px; } #ssMenu .ss-leaf{ display:flex; align-items:center; min-height:52px; padding:13px 14px; font-size:15.5px; font-weight:500; color:var(--ss-text); text-decoration:none; border-radius:11px; border-left:2px solid transparent; transition:background .18s ease, border-color .18s ease, color .18s ease; } #ssMenu .ss-leaf:active{ background:var(--ss-soft); } @media (hover:hover){ #ssMenu .ss-leaf:hover{ background:var(--ss-soft); border-left-color:var(--ss-gold); color:var(--ss-gold-ink); } } #ssMenu .ss-leaf--pdf{ color:var(--ss-gold-ink); font-weight:600; }/* ---- Oficinas ---- */ #ssMenu .ss-office{ display:flex; flex-direction:column; gap:3px; padding:14px 15px; text-decoration:none; border:1px solid var(--ss-line); border-left:3px solid var(--ss-gold); border-radius:11px; transition:background .18s ease; } #ssMenu .ss-office:active{ background:var(--ss-soft); } @media (hover:hover){ #ssMenu .ss-office:hover{ background:var(--ss-soft); } } #ssMenu .ss-office__city{ font-size:16px; font-weight:600; color:var(--ss-text); } #ssMenu .ss-office__addr{ font-size:12.5px; color:var(--ss-muted); } #ssMenu .ss-office__tel{ font-size:13.5px; font-weight:600; color:var(--ss-gold-ink); margin-top:2px; }/* ---- Secundarios ---- */ #ssMenu .ss-secondary{ display:flex; gap:8px; margin-top:2px; } #ssMenu .ss-secondary a{ flex:1; text-align:center; padding:12px 10px; font-size:14px; font-weight:500; color:var(--ss-muted); text-decoration:none; border-radius:10px; border:1px solid var(--ss-line); transition:background .18s ease, color .18s ease; } @media (hover:hover){ #ssMenu .ss-secondary a:hover{ background:var(--ss-soft); color:var(--ss-gold-ink); } }/* ---- Botón principal ---- */ #ssMenu .ss-btn{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:54px; margin-top:16px; padding:14px 18px; border-radius:999px; font-size:16px; font-weight:600; letter-spacing:.2px; text-decoration:none; cursor:pointer; transition:transform .12s ease, filter .2s ease; } #ssMenu .ss-btn svg{ width:19px; height:19px; } #ssMenu .ss-btn:active{ transform:scale(.98); } #ssMenu .ss-btn--dark{ background:var(--ss-dark); color:#fff; } @media (hover:hover){ #ssMenu .ss-btn--dark:hover{ filter:brightness(1.15); } }/* ---- Teléfonos ---- */ #ssMenu .ss-phones{ display:flex; flex-direction:column; gap:8px; margin-top:12px; } #ssMenu .ss-phone{ display:flex; align-items:center; gap:12px; padding:12px 14px; text-decoration:none; border:1px solid var(--ss-line); border-radius:11px; transition:background .18s ease; } #ssMenu .ss-phone:active{ background:var(--ss-soft); } @media (hover:hover){ #ssMenu .ss-phone:hover{ background:var(--ss-soft); } } #ssMenu .ss-phone__ico{ display:grid; place-items:center; width:32px; height:32px; flex:0 0 32px; border-radius:9px; background:var(--ss-tint); color:var(--ss-gold); } #ssMenu .ss-phone__ico svg{ width:17px; height:17px; } #ssMenu .ss-phone__city{ flex:1; font-size:14.5px; font-weight:600; color:var(--ss-text); } #ssMenu .ss-phone__num{ font-size:14.5px; font-weight:600; color:var(--ss-gold-ink); }/* ---- WhatsApp + email ---- */ #ssMenu .ss-contact-row{ display:flex; gap:8px; margin-top:10px; } #ssMenu .ss-wa, #ssMenu .ss-email{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; border-radius:999px; text-decoration:none; font-size:14.5px; font-weight:600; transition:transform .12s ease, filter .2s ease, background .2s ease; } #ssMenu .ss-wa svg, #ssMenu .ss-email svg{ width:18px; height:18px; } #ssMenu .ss-wa{ background:#25d366; color:#0b3d20; } #ssMenu .ss-email{ background:transparent; color:var(--ss-text); border:1px solid var(--ss-line); } #ssMenu .ss-email svg{ color:var(--ss-gold); } #ssMenu .ss-wa:active, #ssMenu .ss-email:active{ transform:scale(.98); } @media (hover:hover){ #ssMenu .ss-wa:hover{ filter:brightness(1.05); } #ssMenu .ss-email:hover{ background:var(--ss-soft); } }/* ---- Horario ---- */ #ssMenu .ss-hours{ margin-top:14px; text-align:center; font-size:11.5px; color:var(--ss-muted); line-height:1.5; }/* ---- Idiomas ---- */ #ssMenu .ss-langs{ display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-top:14px; padding-top:14px; border-top:1px solid var(--ss-line); } #ssMenu .ss-lang{ min-width:40px; text-align:center; padding:7px 10px; font-size:12.5px; font-weight:600; letter-spacing:.5px; color:var(--ss-muted); text-decoration:none; border:1px solid var(--ss-line); border-radius:8px; transition:background .18s ease, color .18s ease, border-color .18s ease; } #ssMenu .ss-lang.is-active{ background:var(--ss-gold); color:#fff; border-color:var(--ss-gold); } @media (hover:hover){ #ssMenu .ss-lang:hover{ border-color:var(--ss-gold); color:var(--ss-gold-ink); } }/* ---- Legales ---- */ #ssMenu .ss-legal{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:14px; } #ssMenu .ss-legal a{ color:var(--ss-muted); font-size:12px; font-weight:500; text-decoration:none; } #ssMenu .ss-legal span{ color:var(--ss-line); } @media (hover:hover){ #ssMenu .ss-legal a:hover{ color:var(--ss-gold-ink); } }@media (max-width:360px){ #ssMenu .ss-row{ font-size:15.5px; } #ssMenu .ss-ico{ width:34px; height:34px; flex-basis:34px; } }(function(){ var root = document.getElementById('ssMenu'); if(!root) return; var pages = {}; root.querySelectorAll('.ss-page').forEach(function(p){ pages[p.id] = p; }); var current = 'p-root';function go(id, dir){ if(!pages[id] || id === current) return; var cur = pages[current]; var tgt = pages[id]; if(dir === 'fwd'){ cur.classList.remove('is-active'); cur.classList.add('is-left'); } else { cur.classList.remove('is-active'); cur.classList.remove('is-left'); /* sale por la derecha */ } tgt.classList.remove('is-left'); tgt.classList.add('is-active'); current = id; try{ root.scrollIntoView({block:'nearest'}); }catch(e){} }root.addEventListener('click', function(e){ var fwd = e.target.closest('[data-goto]'); if(fwd && root.contains(fwd)){ go(fwd.getAttribute('data-goto'), 'fwd'); return; } var back = e.target.closest('[data-back]'); if(back && root.contains(back)){ var page = back.closest('.ss-page'); var parent = page && page.getAttribute('data-parent'); if(parent) go(parent, 'back'); } }); })();