:root { --ink:#4c2a16; --muted:#846b53; --gold:#b88a47; --cream:#f6ecdd; --line:#c8a572; }
* { box-sizing:border-box; }
html { color-scheme:light; }
body { margin:0; min-height:100svh; color:var(--ink); font-family:Tahoma,Arial,sans-serif; background:radial-gradient(ellipse at 8% 20%,#b9873c24,transparent 43%),radial-gradient(ellipse at 94% 70%,#b9873c1a,transparent 40%),linear-gradient(125deg,#f6ecdd,#fffaf3 47%,#efdfc8); }
body::before { content:''; position:fixed; inset:12px; border:1px solid #b88a4740; border-radius:24px; pointer-events:none; }
a { color:inherit; text-decoration:none; touch-action:manipulation; -webkit-tap-highlight-color:#b88a4720; }
a:focus-visible { outline:3px solid #825524; outline-offset:5px; }
svg { display:block; width:24px; height:24px; }
.svg-defs { position:absolute; width:0; height:0; overflow:hidden; }
.page { width:min(100%,1160px); margin-inline:auto; padding:36px 48px 26px; }
.topline { display:flex; justify-content:space-between; align-items:center; gap:20px; color:var(--muted); font-size:13px; }
.topline .name { display:flex; align-items:center; gap:12px; }
.topline .name::before { content:''; width:24px; height:1px; background:var(--gold); }
.location { display:flex; gap:6px; align-items:center; }
.location svg { width:17px; height:17px; }
.main-grid { display:grid; grid-template-columns:1fr 1.12fr; gap:clamp(32px,5vw,72px); align-items:center; padding-block:48px 36px; }
.brand { text-align:center; position:relative; }
.arch { position:relative; isolation:isolate; border:1px solid var(--gold); border-radius:220px 220px 20px 20px; padding:64px 30px 42px; background:linear-gradient(117deg,transparent 20%,#c4a1740a 20.2%,transparent 20.6%,transparent 63%,#c4a1740c 63.2%,transparent 64%),radial-gradient(ellipse at 40% 10%,#fffaf5,#f0e2cd); box-shadow:inset 0 0 0 5px #e0c69c90,inset 0 0 0 7px #fff7e7,0 18px 48px #79542f12; }
.arch::before { content:''; position:absolute; inset:12px; border:1px solid #b88a4770; border-radius:210px 210px 14px 14px; pointer-events:none; }
.logo { display:block; width:min(100%,278px); height:auto; margin-inline:auto; mix-blend-mode:multiply; }
.brand h1 { margin:28px 0 0; font-size:clamp(18px,2vw,23px); font-weight:400; line-height:1.8; }
.brand .divider { width:140px; height:1px; margin:17px auto 0; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.pedestal { position:relative; width:110%; margin:0 -5%; height:28px; border-radius:50%; background:linear-gradient(#fffbef,#dfc08b 50%,#ac7630 55%,#d3b275 90%); border:1px solid #af8240; box-shadow:0 14px 20px #87624020; }
.links-heading { margin:0 8px 18px; display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; font-weight:400; }
.links-heading::after { content:''; height:1px; flex:1; background:linear-gradient(90deg,transparent,#b88a4770); }
.links { display:grid; gap:15px; }
.social { position:relative; display:grid; grid-template-columns:70px minmax(0,1fr) 34px; align-items:center; gap:18px; min-height:108px; padding:15px 22px; border:1px solid #ba8c48; border-radius:26px 60px 60px 26px; background:radial-gradient(ellipse at 80% 0%,#fffdf8,#f5e9d7 85%); box-shadow:inset 0 0 0 3px #fff9e8,inset 0 0 0 4px #d2b68085,0 6px 16px #79502d0c; }
.social .button-leaf { position:absolute; inset-inline-end:64px; bottom:12px; width:64px; height:36px; color:#b78b48; opacity:.2; pointer-events:none; }
.social.menu { border-color:#a77733; background:radial-gradient(ellipse at 80% 0%,#fff8e8,#eddbbc); }
.social:hover .arrow { transform:translateX(-3px); }
.social:hover { border-color:#895618; background:linear-gradient(110deg,#f0dfc4,#fffaf0); box-shadow:inset 0 0 0 3px #fff9e8,inset 0 0 0 4px #c29a56,0 10px 22px #79502d18; }
.social:active { transform:translateY(1px); }
.medallion { display:grid; place-items:center; width:70px; height:70px; border-radius:50%; padding:6px; background:linear-gradient(145deg,#fff3cd,#a67029 45%,#f6d58c 68%,#94612b); box-shadow:0 3px 8px #4c2a1626; }
.medallion-inner { display:grid; place-items:center; width:100%; height:100%; border-radius:50%; border:2px solid #fff9eb; background:var(--icon-bg); color:white; box-shadow:inset 0 2px 6px #0002; }
.medallion svg { width:33px; height:33px; }
.whatsapp { --icon-bg:linear-gradient(135deg,#45c86a,#078436); }
.instagram { --icon-bg:radial-gradient(circle at 25% 105%,#ffd067 12%,#f77c27 30%,#c72279 62%,#723bbc 92%); }
.facebook { --icon-bg:linear-gradient(135deg,#3484cc,#174b94); }
.menu { --icon-bg:linear-gradient(135deg,#a57a48,#513018); }
.social-copy { min-width:0; }
.social-copy strong { display:block; font-size:22px; font-weight:700; line-height:1.5; }
.social-copy small { display:block; font-size:14px; line-height:1.8; color:var(--muted); margin-top:3px; }
.arrow { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; border:1px solid #fff6d9; color:#fff8e7; background:linear-gradient(135deg,#bd924e,#794b16); box-shadow:0 2px 5px #71441726; }
.arrow svg { width:17px; height:17px; }
.info-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid #c5a473; border-radius:24px; padding:24px 12px; background:#fffaf066; box-shadow:inset 0 0 0 4px #fff9ee; }
.info { display:flex; align-items:center; justify-content:center; gap:14px; padding:4px 18px; min-width:0; }
.info + .info { border-inline-start:1px solid #c8a57255; }
.info-icon { flex-shrink:0; width:38px; height:38px; display:grid; place-items:center; color:#a07334; }
.info strong { font-size:15px; line-height:1.8; display:block; font-weight:700; }
.info p { font-size:13px; line-height:1.8; color:var(--muted); margin:2px 0 0; }
.info a { display:inline-flex; align-items:center; min-height:44px; }
.info a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.phone-number { white-space:nowrap; }
.footer { display:flex; align-items:center; justify-content:center; gap:20px; margin:30px 0 4px; color:#997037; }
.footer p { margin:0; font-size:14px; }
.footer svg { width:54px; height:30px; }
.footer .leaf-end { transform:scaleX(-1); }
.menu-page { min-height:100svh; display:grid; place-items:center; padding:32px 20px; }
.menu-panel { width:min(100%,600px); padding:52px 36px 32px; border:1px solid var(--gold); border-radius:150px 150px 24px 24px; background:#fffaf080; box-shadow:inset 0 0 0 6px #fff8e6,0 18px 70px #72502c12; text-align:center; }
.menu-panel .logo { width:220px; max-width:80%; }
.menu-panel h1 { font-size:clamp(25px,6vw,34px); margin:30px 0 12px; }
.menu-panel p { color:var(--muted); line-height:2; margin-bottom:28px; }
.button { display:inline-flex; gap:10px; align-items:center; justify-content:center; min-height:50px; padding:12px 24px; border:1px solid #b88a47; border-radius:999px; color:#fff8e9; background:linear-gradient(135deg,#a78044,#674016); }
.button:hover { background:#674016; }
.back { display:block; padding:16px 12px; margin-top:12px; color:#775025; font-size:14px; }
.back:hover { text-decoration:underline; }
@media (min-width:1400px) { .page { padding-top:60px; } .main-grid { padding-block:64px 48px; } }
@media (max-width:800px) { .page { width:min(100%,640px); padding:26px 30px 24px; } .main-grid { grid-template-columns:1fr; gap:40px; padding-block:30px; } .brand { width:min(100%,360px); margin-inline:auto; } .arch { padding:42px 28px 32px; } .logo { width:240px; } .brand h1 { font-size:19px; margin-top:20px; } .links-heading { justify-content:center; } .links-heading::after { display:none; } .info-grid { padding:20px 8px; } .info { padding:4px 10px; flex-direction:column; gap:7px; text-align:center; } }
@media (max-width:480px) { body::before { inset:7px; border-radius:18px; } .page { padding:22px 20px; } .topline { font-size:11px; gap:12px; } .topline .name { gap:7px; } .topline .name::before { width:14px; } .brand { width:min(100%,300px); } .arch { padding:34px 22px 26px; } .logo { width:212px; } .brand h1 { font-size:17px; } .main-grid { gap:34px; padding-top:24px; } .links { gap:12px; } .social { grid-template-columns:56px minmax(0,1fr) 26px; gap:12px; padding:14px 17px; min-height:92px; border-radius:22px 50px 50px 22px; } .medallion { width:56px; height:56px; padding:5px; } .medallion svg { width:27px; height:27px; } .social-copy strong { font-size:19px; } .social-copy small { font-size:12px; margin-top:1px; } .arrow { width:26px; height:26px; } .info-grid { grid-template-columns:1fr 1fr; gap:18px 0; padding:20px 10px; } .info { padding:0 10px; } .info strong { font-size:14px; } .info p { font-size:12px; } .info.call { grid-column:1 / -1; flex-direction:row; border-inline-start:0; border-top:1px solid #c8a57255; padding-top:18px; } .info.call .info-icon { width:32px; } .footer { gap:12px; margin-top:25px; } .footer p { font-size:13px; } .footer svg { width:40px; } .menu-panel { padding:40px 22px 24px; } }
@media (max-width:350px) { .page { padding-inline:16px; } .social { gap:8px; padding-inline:12px; grid-template-columns:50px minmax(0,1fr) 24px; } .medallion { width:50px; height:50px; } .social-copy strong { font-size:17px; } .social-copy small { font-size:11px; } }
@media (max-width:480px) { .social .button-leaf { inset-inline-end:40px; width:38px; height:23px; bottom:10px; opacity:.15; } }
@media (prefers-reduced-motion:no-preference) { .social { transition:box-shadow .18s,background .18s,transform .18s; } .arrow { transition:transform .18s; } .social:hover { transform:translateY(-2px); } .social:active { transform:translateY(1px); } .brand { animation:arrive .5s ease-out both; } .links { animation:arrive .5s .08s ease-out both; } @keyframes arrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } }