:root{--deep:#073B4C;--deep2:#062d3b;--teal:#087F8C;--water:#36C2C2;--seafoam:#A8E6CF;--mist:#F3FAF9;--ink:#102A33;--muted:#5D727A;--blue:#2563eb;--pink:#ec4899;--white:#fff;--shadow:0 18px 55px rgba(7,59,76,.12);--radius:22px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,sans-serif;background:var(--mist);color:var(--ink);line-height:1.55}#payment{display:none}a{color:inherit}img{max-width:100%;display:block}.container{width:min(1120px,calc(100% - 36px));margin:auto}nav{position:sticky;top:0;z-index:50;background:#f3faf9ee;backdrop-filter:blur(14px);border-bottom:1px solid #073b4c14}.nav{height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:800 1rem Montserrat;letter-spacing:.08em}.brand img{width:48px;height:48px;border-radius:50%}.links{display:flex;align-items:center;gap:18px}.links a{text-decoration:none;font-weight:700;font-size:.9rem}.btn{border:0;border-radius:999px;padding:13px 20px;font:800 .95rem Inter;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.18s}.primary{background:linear-gradient(135deg,var(--teal),#0aa4a6);color:white;box-shadow:0 12px 24px #087f8c38}.primary:hover{transform:translateY(-2px)}.secondary{background:white;border:1px solid #cfe0dd;color:var(--deep)}.hero{min-height:650px;display:grid;align-items:center;position:relative;overflow:hidden;background:linear-gradient(90deg,#f3faf9fa 0%,#f3faf9e8 46%,#073b4c2e),url('assets/hero-real-barbering.jpg') right 43%/auto 170% no-repeat}.hero:after{content:"";position:absolute;left:-5%;right:-5%;bottom:-70px;height:145px;background:var(--mist);border-radius:50% 50% 0 0/55% 55% 0 0}.hero-content{position:relative;z-index:2;max-width:620px;padding:78px 0 125px}.hero-logo{width:110px;border-radius:50%;box-shadow:var(--shadow)}h1,h2,h3{font-family:Montserrat;color:var(--deep);line-height:1.1}h1{font-size:clamp(3.5rem,9vw,6.7rem);margin:14px 0 2px}.slogan{font:800 clamp(1.3rem,3vw,2rem) Montserrat;color:var(--teal);margin:0 0 18px}.hero p{max-width:540px;font-size:1.07rem;color:#284851}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}section{padding:82px 0}.head{text-align:center;max-width:700px;margin:0 auto 38px}.head h2{font-size:clamp(2rem,5vw,3rem);margin-bottom:10px}.head p{color:var(--muted);margin:0}.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.gallery figure{position:relative;margin:0;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);height:300px;background:white}.gallery figure:nth-child(1),.gallery figure:nth-child(2){grid-column:span 2}.gallery figure:nth-child(3),.gallery figure:nth-child(4){grid-column:span 1}.gallery img{width:100%;height:100%;object-fit:cover}.gallery figcaption{position:absolute;left:10px;bottom:10px;background:#062d3bdc;color:white;padding:7px 10px;border-radius:999px;font-size:.75rem;font-weight:800}.gallery-cta{text-align:center;margin-top:24px}.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.trust>div,.barber-card,.booking-shell,.location,.pay-card,.social-card{background:white;border:1px solid #073b4c14;border-radius:var(--radius);box-shadow:var(--shadow)}.trust>div{padding:22px;text-align:center}.trust i{font-size:1.5rem;color:var(--teal)}.trust strong{display:block;color:var(--deep);margin-top:8px}.trust span{font-size:.88rem;color:var(--muted)}.barbers{display:grid;grid-template-columns:1fr 1fr;gap:20px}.barber-card{border:2px solid transparent;padding:26px;text-align:left}.barber-card.gabe{border-color:#2563eb55}.barber-card.malenny{border-color:#ec489955}.barber-card.selected.gabe{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb22}.barber-card.selected.malenny{border-color:var(--pink);box-shadow:0 0 0 4px #ec489922}.avatar{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:white;font:800 1.2rem Montserrat;margin-bottom:12px}.gabe .avatar{background:var(--blue)}.malenny .avatar{background:var(--pink)}.badge{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:.85rem}.dot{width:10px;height:10px;border-radius:50%;display:inline-block}.dot.blue{background:var(--blue)}.dot.pink{background:var(--pink)}.barber-card p{color:var(--muted)}.booking-shell{padding:30px;max-width:840px;margin:auto}.progress{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:28px}.p{padding:10px 4px;border-radius:10px;background:#edf7f5;text-align:center;font-size:.72rem;font-weight:800;color:var(--muted)}.p.active{background:var(--deep);color:white}.p.done{background:var(--seafoam);color:var(--deep)}.step{display:none}.step.active{display:block}.choices{display:grid;gap:11px}.service{display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px;border:1px solid #cfe0dd;border-radius:14px;background:#fbfefd;font:inherit;cursor:pointer;text-align:left}.service.selected{border-color:var(--teal);box-shadow:0 0 0 3px #36c2c222}.service small{color:var(--muted)}.actions{display:flex;justify-content:space-between;gap:10px;margin-top:24px}.actions .next{margin-left:auto}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.group{display:flex;flex-direction:column;gap:6px}.full{grid-column:1/-1}label{font-weight:800;font-size:.88rem;color:var(--deep)}input,textarea{border:1px solid #cfe0dd;border-radius:12px;padding:13px;font:inherit;color:var(--ink);background:#fbfefd}textarea{min-height:90px;resize:vertical}.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:10px}.slot{border:1px solid transparent;background:#edf7f5;border-radius:10px;padding:11px 6px;font-weight:800;cursor:pointer}.slot.selected{background:var(--teal);color:white}.summary{background:#edf7f5;border-radius:15px;padding:17px;margin:18px 0}.row{display:flex;justify-content:space-between;gap:15px;padding:6px 0}.error{background:#fff1f2;color:#9f1239;padding:12px;border-radius:10px;font-weight:700}.location{padding:28px;display:flex;justify-content:space-between;gap:20px;align-items:center}.payments{background:linear-gradient(180deg,#eaf8f6,#f7fbfa)}.payment-grid,.connect-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.pay-card,.social-card{padding:24px;text-align:center}.pay-card .handle{font-weight:800;color:var(--teal);margin-bottom:16px}.qr{width:180px;height:180px;object-fit:contain;margin:0 auto 16px;border-radius:14px;background:white}.pay-note{text-align:center;color:var(--muted);margin-top:22px}.social-card{text-decoration:none;transition:.18s}.social-card:hover{transform:translateY(-3px)}.social-card i{font-size:2rem;color:var(--teal);margin-bottom:12px}.social-card strong{display:block;color:var(--deep)}.social-card span{font-size:.9rem;color:var(--muted)}footer{background:var(--deep);color:white;padding:42px 0 26px}.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:30px}.footer-brand{display:flex;gap:14px;align-items:center}.footer-brand img{width:72px;height:72px;border-radius:50%}footer h3{color:white;margin-bottom:8px}footer p,footer a{color:#d2e6e4}.copyright{text-align:center;margin-top:34px;padding-top:20px;border-top:1px solid #ffffff1f;font-size:.85rem;color:#a8c6c4}.modal{display:none;position:fixed;inset:0;background:#011b24c7;z-index:100;align-items:center;justify-content:center;padding:20px}.modal.active{display:flex}.modal-card{background:white;width:min(480px,100%);border-radius:22px;padding:30px;box-shadow:0 30px 80px #0004}.mobile-book{display:none}@media(max-width:900px){.links{gap:8px}.links a:not(.book-link){display:none}.brand{font-size:.9rem}.gallery{grid-template-columns:repeat(2,1fr)}.gallery figure,.gallery figure:nth-child(n){grid-column:span 1;height:260px}.barbers,.payment-grid,.connect-grid,.footer-grid{grid-template-columns:1fr}.hero{background-size:auto 120%;background-position:64% center}}@media(max-width:700px){body{padding-bottom:84px}.container{width:min(100% - 24px,1120px)}.nav{height:66px}.brand img{width:42px;height:42px}.hero{min-height:570px;background-position:68% center}.hero-content{padding:60px 0 100px;max-width:92%}.hero-logo{width:86px}h1{font-size:clamp(3rem,18vw,5rem)}section{padding:64px 0}.trust{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.booking-shell{padding:20px 14px}.progress{gap:4px}.p{font-size:.58rem;padding:8px 2px}.slots{grid-template-columns:repeat(3,1fr)}.location{flex-direction:column;align-items:flex-start}.mobile-book{display:none!important}.row{align-items:flex-start}.row strong{text-align:right}}
