@font-face{font-family:'Instrument Sans'; src:url('/assets/fonts/instrument-sans-latin.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Instrument Sans'; src:url('/assets/fonts/instrument-sans-latin-ext.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Fraunces Display'; src:url('/assets/fonts/fraunces-display-latin.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{color-scheme:dark; --paper:#141210; --paper-tint:#1e1a17; --ink:#f4efe9; --ink-soft:#bdb2a8; --orange:#f58220; --orange-legible:#ffa945; --rule:#6f665f; --whatsapp:#25d366; --sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; --display:'Fraunces Display','Instrument Sans',Georgia,serif; --step--1:clamp(1.0625rem,1.03rem + 0.16vw,1.15rem); --step-0:clamp(1.1875rem,1.14rem + 0.22vw,1.3125rem); --step-1:clamp(1.375rem,1.3rem + 0.35vw,1.625rem); --display-1:clamp(2.5rem,1.6rem + 4vw,4.5rem); --display-2:clamp(1.875rem,1.5rem + 1.7vw,2.75rem); --gutter:clamp(1.5rem,5vw,4rem); --shell:66rem; --measure:34rem; --bar:calc(8.4rem + 1px + env(safe-area-inset-bottom,0px)); --ease:cubic-bezier(0.16,1,0.3,1)} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%; background:var(--paper); scroll-padding-bottom:calc(var(--bar) + 1rem)} body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:var(--step-0); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; padding-bottom:var(--bar)} img{max-width:100%; height:auto; display:block} h1,h2,h3,p,ul,ol{margin:0} ul{padding:0; list-style:none} a{color:inherit}:focus-visible{outline:3px solid var(--orange-legible); outline-offset:3px; border-radius:2px} .shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-left:max(var(--gutter),env(safe-area-inset-left,0px)); padding-right:max(var(--gutter),env(safe-area-inset-right,0px))} .nb{white-space:nowrap} .visually-hidden{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap} .skip-link{position:absolute; left:1rem; top:-5rem; z-index:60; padding:0.9rem 1.25rem; background:var(--ink); color:var(--paper); font-weight:700; border-radius:0.35rem} .skip-link:focus{top:1rem} .icon-sprite{position:absolute} body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")} body>*{position:relative; z-index:1} h1,h2{font-family:var(--display); font-weight:600; letter-spacing:-0.021em; text-wrap:balance; overflow-wrap:break-word} h1{font-size:var(--display-1); line-height:1.04} h2{font-size:var(--display-2); line-height:1.12} .btn{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0.7rem; width:100%; min-height:3.5rem; padding:1rem clamp(0.75rem,3vw,1.5rem); border:1px solid transparent; border-radius:0.25rem; font-family:var(--sans); font-size:var(--step-1); font-weight:700; line-height:1.2; letter-spacing:-0.005em; text-decoration:none; text-align:center; min-width:0; overflow-wrap:break-word; transition:background-color 180ms var(--ease),border-color 180ms var(--ease),color 180ms var(--ease),transform 180ms var(--ease)} .btn svg{width:1.4rem; height:1.4rem; flex:none} .btn--call{background:var(--ink); border-color:var(--ink); color:var(--paper)} .btn--whatsapp{background:transparent; border-color:var(--rule); color:var(--ink)} .btn--whatsapp svg{color:var(--whatsapp)} @media (hover:hover){.btn--call:hover{background:#fffaf3; border-color:#fffaf3; transform:translateY(-1px)} .btn--whatsapp:hover{background:var(--paper-tint); border-color:var(--ink); transform:translateY(-1px)}} .btn:active{transform:translateY(0)} .actions{display:grid; gap:0.85rem; margin-top:2.25rem; max-width:var(--measure)} .hero{position:relative; padding-block:clamp(2.5rem,6vw,5rem) clamp(3.75rem,9vw,4.5rem)} .hero>picture,.footer picture{display:block} .masthead{width:min(15rem,56%)} .hero h1{margin-top:clamp(1.75rem,4vw,2.75rem); max-width:15ch} .hero h1::after{content:""; display:block; width:4.5rem; height:2px; margin-top:clamp(1.25rem,2.5vw,1.75rem); background:var(--orange); transform-origin:left center; animation:draw 900ms var(--ease) 260ms both} @keyframes draw{from{transform:scaleX(0)} to{transform:scaleX(1)}} .hero .lede{margin-top:1.25rem; max-width:var(--measure); font-size:var(--step-1); line-height:1.5; color:var(--ink-soft); text-wrap:pretty} .hours{margin-top:1.75rem; font-size:var(--step-0)} .hours b{font-weight:700} .hours span{min-width:0; text-wrap:balance} .now{display:inline-flex; align-items:center; gap:0.45em; margin-top:1.75rem; margin-bottom:0.75rem; padding:0.3em 0.8em; border:1px solid var(--rule); border-radius:999px; font-size:var(--step--1); font-weight:700; text-transform:uppercase; letter-spacing:0.08em; line-height:1.2; color:var(--ink-soft); white-space:nowrap} .now:empty{display:none} .now:not(:empty) + .hours{margin-top:0} .now--open{color:var(--orange-legible); border-color:color-mix(in srgb,var(--orange-legible) 55%,transparent)} .now--open::before,.now--happy::before{content:""; width:0.42em; height:0.42em; border-radius:50%; background:currentColor; flex:none} .now--happy{background:var(--orange); border-color:var(--orange); color:var(--paper)} .quiet{margin-top:1.1rem; max-width:30rem; font-size:var(--step--1); color:var(--ink-soft); text-wrap:pretty} .hero__lead>*,.hero__act>*{animation:rise 700ms var(--ease) both} .hero__lead>*:nth-child(2){animation-delay:60ms} .hero__lead>*:nth-child(3){animation-delay:120ms} .hero__act>*:nth-child(1){animation-delay:180ms} .hero__act>*:nth-child(2){animation-delay:240ms} .hero__act>*:nth-child(3){animation-delay:300ms} .hero__act>*:nth-child(4){animation-delay:360ms} @keyframes rise{from{opacity:0.001; transform:translateY(0.6rem)} to{opacity:1; transform:none}} .section{padding-block:clamp(3.75rem,9vw,4.5rem)} .section>* + *{margin-top:1.25rem} .section>p{max-width:var(--measure); color:var(--ink-soft); text-wrap:pretty} .services{margin-top:2rem} .services li + li{border-top:1px solid var(--rule)} .services li{padding-block:1.05rem; font-family:var(--sans); font-size:clamp(1.3rem,1rem + 0.7vw,1.4rem); font-weight:550; line-height:1.45; letter-spacing:0.005em} .faq{margin-top:2rem; max-width:62ch} .faq h3{margin-top:2.25rem; font-family:var(--sans); font-size:var(--step-0); font-weight:600; line-height:1.35} .faq h3:first-child{margin-top:0} .faq p{margin-top:0.5rem; color:var(--ink-soft)} .visit{display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:2.5rem; margin-top:2rem} .visit h3{font-size:var(--step--1); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:1rem} .address-name{font-weight:700} .visit address{font-style:normal; font-size:var(--step-1); line-height:1.5; text-wrap:pretty} .contact a{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; min-height:3.5rem; padding-block:0.9rem; font-size:var(--step-1); font-weight:600; text-decoration:none; transition:color 160ms var(--ease); min-width:0; overflow-wrap:break-word} .contact a + a{border-top:1px solid var(--rule)} .contact--single{margin-top:1.5rem} .contact a svg{width:1.35rem; height:1.35rem; flex:none; color:var(--orange-legible)} .contact a svg.contact__go{margin-left:auto; color:var(--ink-soft); transition:transform 220ms var(--ease)} @media (hover:hover){.contact a:hover{color:var(--orange-legible)} .contact a:hover .contact__go{color:var(--orange-legible); transform:translateX(4px)}} .footer{padding-block:clamp(2.5rem,5vw,3.5rem); background:var(--paper-tint)} .footer img{width:9.5rem} .footer p{margin-top:1.25rem; max-width:var(--measure); font-size:var(--step--1); color:var(--ink-soft); line-height:1.6} .footer a{display:inline-flex; align-items:center; min-height:3rem; margin-top:0.5rem; font-size:var(--step-0); font-weight:700; color:var(--ink); text-decoration-color:var(--rule); text-underline-offset:0.3em} .footer__choice{min-height:3rem; margin-top:0.5rem; padding:0; border:0; background:transparent; color:var(--ink); font:inherit; font-size:var(--step-0); font-weight:700; text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:0.3em; cursor:pointer} .analytics-consent{position:fixed; z-index:55; left:0; right:0; bottom:var(--bar); padding-block:1rem; border-top:1px solid var(--rule); background:color-mix(in srgb,var(--paper-tint) 97%,transparent); backdrop-filter:blur(16px)} .analytics-consent[hidden]{display:none} .analytics-consent__inner{display:grid; gap:1rem} .analytics-consent h2{font-family:var(--sans); font-size:var(--step-0); line-height:1.3} .analytics-consent p{margin-top:0.4rem; max-width:62ch; color:var(--ink-soft); font-size:var(--step--1)} .analytics-consent__actions{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.65rem} .consent-button{min-height:3.25rem; padding:0.7rem; border:1px solid var(--rule); border-radius:0.25rem; background:transparent; color:var(--ink); font:inherit; font-weight:700; cursor:pointer} .consent-button--accept{border-color:var(--ink); background:var(--ink); color:var(--paper)} @media (min-width:48rem){.analytics-consent__inner{grid-template-columns:minmax(0,1fr) auto; align-items:center} .analytics-consent__actions{min-width:20rem}} @media (hover:hover){.footer a:hover{text-decoration-color:var(--orange-legible)}} .dock{position:fixed; z-index:50; left:0; right:0; bottom:0; height:var(--bar); padding-top:0.5rem; padding-bottom:calc(0.5rem + env(safe-area-inset-bottom,0px)); background:var(--paper); border-top:1px solid var(--rule)} @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){.dock{background:color-mix(in srgb,var(--paper) 94%,transparent); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%)}} .dock::before{content:""; position:absolute; left:0; right:0; bottom:100%; height:2.5rem; pointer-events:none; background:linear-gradient(to top,var(--paper),transparent)} .dock__inner{display:grid; align-content:center; height:100%} .dock__acts{display:grid; grid-template-columns:1fr; gap:0.6rem} .btn__label{overflow:hidden; text-overflow:ellipsis} .dock .btn{font-size:var(--step--1); min-height:0; height:3.25rem; min-width:0; gap:0.5rem; padding-inline:0.4rem; white-space:nowrap} @media (max-width:20rem){.dock__inner{padding-left:max(6vw,env(safe-area-inset-left,0px)); padding-right:max(6vw,env(safe-area-inset-right,0px))}} @media (min-width:20rem){:root{--bar:calc(4.5rem + 1px + env(safe-area-inset-bottom,0px))} .dock__acts{grid-template-columns:1fr 1fr}} @media (min-width:34rem){.visit{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:3.5rem} .visit address{max-width:40ch}} @media (min-width:48rem){.actions{grid-template-columns:1fr 1fr; max-width:42rem}} @media (min-width:64rem){.dock__acts{grid-template-columns:repeat(2,minmax(0,12rem)); justify-self:end}} @media (max-height:416px){:root{--bar:calc(4.5rem + 1px + env(safe-area-inset-bottom,0px))} .dock__acts{grid-template-columns:1fr 1fr}} @media (max-height:740px){.hero{padding-block-start:1.5rem} .masthead{width:min(15rem,44%)} .hero h1{margin-top:1.25rem} .hero__act .now{margin-top:1.25rem}} @media (min-width:60rem){.services{display:grid; grid-auto-flow:column; grid-template-rows:repeat(5,auto); grid-template-columns:1fr 1fr; column-gap:4rem} .services li:nth-child(6){border-top:0} .hero{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,0.8fr); column-gap:4rem; row-gap:clamp(1.75rem,4vw,2.75rem); align-items:start} .hero>picture{grid-column:1 / -1} .hero__lead h1{margin-top:0} .hero__lead h1{max-width:none} .hero__act .now,.hero__act .hours{margin-top:0} .hero__act .actions{grid-template-columns:1fr; max-width:none}} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.001ms !important; animation-delay:0ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; transition-delay:0ms !important}} @media print{:root{--paper:#ffffff; --paper-tint:#ffffff; --ink:#1a1714; --ink-soft:#4a423b; --orange-legible:#a04a00; --rule:#948d85} body{padding:0; background:#ffffff} body::before,.hero::before,.hero h1::after{display:none} .hero>*{animation:none} .now,.dock,.skip-link{display:none} .now:not(:empty) + .hours{margin-top:1.75rem} .btn--call{background:transparent; color:var(--ink); border-color:var(--ink)}}
