@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&display=swap');
/* Keeps the familiar dark, refined mood with an independently drawn layout and assets. */
:root{--paper:#111a17;--ink:#f2eee5;--blue:#263c32;--copper:#caa76b;--line:#566258;--muted:#b3bbb2}
body{background:var(--paper);color:var(--ink)}
.topbar{background:#101814;border-color:#566258;color:var(--ink)}
.brand-mark{color:#ead7ae}.brand-mark span{color:var(--copper)}
.nav-cta{border-color:#bdad86;color:#ead7ae}.nav-cta:hover{background:#bdad86;color:#101814}
.hero-copy{background:#131e19}
.hero h1{font-size:clamp(60px,7vw,120px)}
.hero h1 em,h2 em{color:#d3b982}
.intro{color:#c8cec5}
.primary{background:#c5a974;color:#17231d}.primary:hover{background:#e0c892}
.hero-art{background:#283c32}
.hero-art:before{background:repeating-linear-gradient(90deg,transparent 0 89px,#ffffff0c 90px 91px)}
.art-sun{background:#9c7950}
.art-arch{border-color:#e6d6ae}
.art-comb,.art-comb:before{background-color:#ecdfc1}
.art-comb{background:repeating-linear-gradient(90deg,#ecdfc1 0 10px,transparent 10px 18px)}
.art-blade{background:#c2a66e}.art-blade:after{background:#e8dac2}
.art-stamp{border-color:#eddfbe;color:#f4eddf}
.ticker{background:#ae8a56;color:#16231c}
.story{background:#16231d}.story-content>p:not(.overline){color:#bbc5bb}
.story-symbol span{color:#ae8a56}
.services{background:#1e2c23}
.services-head>p,.service p,.service-price small{color:#b3c0b4}
.services .section-label,.service{border-color:#617163}
.service button{border-color:#d5bd8d;color:#d5bd8d}
.service button:hover{background:#d5bd8d;color:#19231d}
.quote{background:#34483b}.quote span{color:#d8bc87}
.visit{background:#141f1a}
.visit-card{background:#2e4335}
.visit-card p{color:#c2cfc2}
.booking{background:#202f26}
.bc-card{background:#f3efe5;color:#1a2921;border-color:#d8d0bd}
.bc-card .bc-kicker{color:#8a6338}
.bc-card h3,.bc-card strong,.bc-card dt{color:#1a2921}
.bc-card p,.bc-card small{color:#626d64}
.bc-btn{background:#344c3b;border-color:#344c3b;color:#fff}
.bc-outline{background:transparent;color:#344c3b}
.bk-progress button{color:#6b766b}
.bk-services .bk-service{color:#1a2921}
.bk-services .bk-service[aria-pressed=true],.bk-slots button[aria-pressed=true],.bk-days button[aria-pressed=true]{background:#eee1c9}
.bk-main input,.bk-main textarea{color:#1a2921}
.bk-month button,.bk-review button{color:#344c3b}
.bk-price{color:#936f40}
.faq{background:#121d17}.faq details p{color:#bac5b9}
footer{background:#0a120e}.footer-top .brand-mark{color:#ead7ae}
@media(max-width:620px){.hero h1{font-size:clamp(56px,13vw,82px)}}
/* The atmospheric photo is new. The left-aligned composition is deliberately distinct. */
.hero{display:block;position:relative;min-height:720px;isolation:isolate;background:#142016}
.hero-art{position:absolute;inset:0;min-height:0;z-index:-1;background:linear-gradient(90deg,#101813ed 0%,#101813b9 43%,#10181324 78%),url('./principal-la-barberia-de-osuna-835x557.jpg') center center/cover no-repeat}
.hero-art:before,.art-sun,.art-arch,.art-comb,.art-blade,.art-word,.art-stamp{display:none}
.hero-copy{background:transparent;max-width:880px;min-height:720px;padding-top:145px;padding-bottom:34px}
.hero h1{font-size:clamp(65px,8.2vw,125px);max-width:840px;line-height:.92;letter-spacing:-.045em}
.hero h1 em{color:#e3c88e}
.hero .eyebrow{color:#e3c88e}
.hero .intro{color:#f0ede4;max-width:470px}
.hero-foot{color:#d8d9cf}
.photo-note{position:absolute;bottom:18px;right:24px;font-size:10px;letter-spacing:.1em;color:#efece1c9;text-transform:uppercase}
@media(max-width:620px){.hero,.hero-copy{min-height:650px}.hero-copy{padding-top:125px}.hero h1{font-size:clamp(58px,14vw,83px)}.hero-art{background-position:62% center;background-image:linear-gradient(90deg,#101813ec 0%,#101813ad 74%,#10181378),url('./principal-la-barberia-de-osuna-835x557.jpg')}}
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&display=swap');
.topbar{position:absolute;top:0;left:0;right:0;width:100%;height:84px;background:transparent;border:0;color:#f8f4e9}
.topbar .brand-name{font:700 26px/1 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:.03em}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.2em;padding:16px 0 16px 20px}
.menu summary::-webkit-details-marker{display:none}
.menu summary span{font-size:17px;margin-left:10px}
.menu nav{position:absolute;display:flex;right:0;top:100%;width:220px;background:#111c17f5;border:1px solid #c9a875;box-shadow:0 18px 40px #0008;padding:15px;flex-direction:column;gap:0}
.menu nav a{display:block;padding:12px 10px;border-bottom:1px solid #ffffff1b;font-size:13px}
.menu nav a:last-child{border-bottom:0}
.hero{min-height:750px}
.hero-art{background-image:linear-gradient(#0a100fc0,#0a100f9e),url('./principal-la-barberia-de-osuna-835x557.jpg');background-position:center}
.hero-copy{max-width:none;min-height:750px;width:100%;align-items:center;justify-content:center;text-align:center;padding:145px 30px 34px}
.hero h1{font:700 clamp(80px,10.5vw,155px)/.8 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:.015em;text-transform:uppercase;max-width:1100px;margin:10px 0 30px}
.hero h1 em{font-style:normal;font-weight:500;letter-spacing:.11em;font-size:.64em;display:block;margin-top:19px;color:#d9bb7f}
.hero .eyebrow{font-size:11px;letter-spacing:.34em;margin-bottom:12px}
.hero .intro{font:italic 24px/1.35 Georgia,serif;max-width:none;margin-bottom:0}
.hero-actions{margin-top:28px}
.hero .primary{font-size:11px;letter-spacing:.18em;min-width:205px;border-radius:3px}
.hero-foot{width:100%;justify-content:center;margin-top:auto;padding:40px 0 0;color:#d4d2c7;font-size:9px}
.story{grid-template-columns:17% 42% 41%;gap:0}
.story-content{padding:65px 50px 0 0}
.story-photo{margin:65px 0 0;position:relative;min-height:510px}
.story-photo img{width:100%;height:510px;object-fit:cover;display:block;filter:saturate(.8)}
.story-photo figcaption{position:absolute;left:12px;bottom:12px;background:#111a17d9;color:#ece4d2;padding:8px 10px;text-transform:uppercase;font-size:9px;letter-spacing:.1em}
.space{background:#17251e}
.space-head{display:grid;grid-template-columns:1fr 1fr;gap:20px 70px;align-items:end;padding-top:60px}
.space-head .overline{grid-column:1/-1;margin:0}
.space h2{font:normal clamp(52px,6vw,90px)/.98 'DM Serif Display',Georgia,serif;letter-spacing:-.04em;margin:0}
.space-head>p:last-child{line-height:1.7;color:#b3c0b4;max-width:410px}
.space-gallery{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;margin-top:50px}
.space-gallery figure{margin:0;position:relative;height:470px;overflow:hidden}
.space-gallery img{width:100%;height:100%;object-fit:cover}
.space-gallery figure:nth-child(2) img{object-position:right center}
.space-gallery figcaption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#0b130dbf);padding:50px 22px 22px;font-size:10px;font-weight:700;letter-spacing:.17em;color:#fff}
@media(max-width:900px){.story{grid-template-columns:1fr 1fr}.story .section-label{grid-column:1/-1}.story-content{padding-top:45px}.story-photo{margin-top:45px}.topbar .brand-name{font-size:22px}}
@media(max-width:620px){.topbar{height:68px}.topbar .brand-name{font-size:20px}.menu summary{font-size:10px}.hero,.hero-copy{min-height:650px}.hero-copy{padding:115px 18px 25px}.hero h1{font-size:clamp(64px,16vw,100px);line-height:.83}.hero h1 em{font-size:.7em;letter-spacing:.08em}.hero .intro{font-size:19px}.hero-art{background-position:60% center}.story{display:block}.story-content{padding:45px 0 0}.story-photo{min-height:0;margin-top:35px}.story-photo img{height:390px}.space-head,.space-gallery{display:block}.space-head>p:last-child{margin-top:25px}.space-gallery figure{height:340px;margin-top:14px}}
@media(max-width:620px){.hero-foot{padding-bottom:27px}.photo-note{bottom:11px;right:14px;font-size:8px}}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:#101814}
.hero-copy{position:relative;z-index:1}
.hero-slide{position:absolute;inset:-2%;opacity:0;background-image:var(--slide);background-size:cover;background-position:center;transition:opacity 1.3s ease;transform:scale(1.04)}
.hero-slide::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0b130ec7,#0b130e80 50%,#0b130e9e)}
.hero-slide.is-active{opacity:1;animation:hero-drift 7s ease-out forwards}
@keyframes hero-drift{to{transform:scale(1.12)}}
.hero-controls{position:absolute;right:clamp(24px,6vw,88px);bottom:34px;display:flex;align-items:center;gap:15px;color:#f4e9d2;font-size:10px;letter-spacing:.17em;z-index:2}
.hero-controls button,.space-nav button{width:35px;height:35px;border:1px solid #d6bd8e88;background:#1928208a;color:#f6ecd7;border-radius:50%;font-size:17px;line-height:1}
.hero-controls button:hover,.space-nav button:hover{background:#c9a875;color:#16241b}
.story-photo img{object-position:center;object-fit:cover}
.space-nav{display:flex;justify-content:flex-end;align-items:center;gap:15px;margin-top:25px;color:#d9c39c;font-size:11px;letter-spacing:.15em}
.space-gallery{display:flex;gap:16px;margin-top:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-color:#b39563 #253b2f;scrollbar-width:thin;padding-bottom:18px}
.space-gallery figure{flex:0 0 clamp(220px,28vw,380px);height:460px;scroll-snap-align:start;margin:0;position:relative}
.space-gallery figure button{display:block;width:100%;height:100%;padding:0;border:0;background:#17221b;overflow:hidden}
.space-gallery img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease}
.space-gallery button:hover img{transform:scale(1.05)}
.space-gallery figcaption{pointer-events:none}
.photo-viewer{border:1px solid #b99e6f;background:#0c1510;color:#f6edd8;padding:48px 16px 15px;max-width:min(94vw,1080px);max-height:92vh;box-shadow:0 28px 90px #000c}
.photo-viewer::backdrop{background:#040a07dc}
.photo-viewer[open]{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center;gap:10px}
.photo-viewer img{max-width:100%;max-height:calc(88vh - 110px);object-fit:contain;justify-self:center}
.photo-viewer p{grid-column:1/-1;text-align:center;font-size:11px;letter-spacing:.17em;margin:8px 0 0}
.photo-viewer button{border:1px solid #a18c66;background:#1c2d22;color:#fff;width:38px;height:38px;border-radius:50%;font-size:20px}
.photo-viewer .photo-close{position:absolute;top:9px;right:12px}
@media(max-width:620px){.hero-controls{bottom:48px;right:12px;gap:7px}.hero-controls button{width:30px;height:30px;font-size:14px}.hero-controls span{display:none}.hero-foot{justify-content:flex-start}.space-gallery figure{flex-basis:76vw;height:410px}.photo-viewer{padding-inline:5px}.photo-viewer[open]{grid-template-columns:30px minmax(0,1fr) 30px;gap:3px}.photo-viewer button{width:30px;height:30px;font-size:15px}}
@media(prefers-reduced-motion:reduce){.hero-slide,.space-gallery img{transition:none}.hero-slide.is-active{animation:none}}

/* Negro profundo, acentos cálidos y movimiento editorial. */
html{scroll-behavior:smooth;background:#050505}
body{background:#050505;color:#f4f0e8}
.topbar{background:#050505c9;backdrop-filter:blur(16px);border-bottom:1px solid #ffffff1b}
.menu nav{background:#0b0b0bf5}
.hero,.story,.services,.quote,.space,.visit,.booking,.faq,footer{background-color:#050505}
.hero-copy{background:transparent}
.hero-media{background:linear-gradient(90deg,#000b,#0005 48%,#0008),url('./principal-la-barberia-de-osuna-835x557.jpg') center/cover no-repeat}
.hero-slide::after{background:linear-gradient(90deg,#000b,#0005 48%,#0008)}
.hero-slide{inset:0;opacity:1;clip-path:inset(0 100% 0 0);transform:scale(1.12);transition:clip-path 1.05s cubic-bezier(.77,0,.18,1),transform 7s ease-out}
.hero-slide.is-active{clip-path:inset(0);animation:hero-drift-black 7s ease-out both}
@keyframes hero-drift-black{from{transform:scale(1.12)}to{transform:scale(1.02)}}
.hero .eyebrow,.hero h1 em,.overline,.section-label,.service-no,.service-price,.quote span,.space-nav{color:#d5b980}
.ticker{background:#c7a66b;color:#090909}
.story-content>p:not(.overline),.services-head>p,.service p,.service-price small,.space-head>p:last-child,.visit-card p,.faq details p{color:#bdb9b0}
.story-photo figcaption,.visit-card,.bc-card{background:#151515;color:#f4f0e8;border-color:#4d4536}
.services .section-label,.service,.faq details{border-color:#39342b}
.service button,.hero-controls button,.space-nav button{background:#131313;border-color:#9d8355;color:#e2c68d}
.service button:hover,.hero-controls button:hover,.space-nav button:hover{background:#d5b980;color:#050505}
.quote{border-top:1px solid #39342b;border-bottom:1px solid #39342b}
.space-gallery figure button{background:#111}
.space-gallery{scrollbar-color:#c7a66b #181818}
.photo-viewer{background:#090909}.photo-viewer::backdrop{background:#000e}.photo-viewer button{background:#181818}
.visit-card{border:1px solid #4d4536}
.bc-card .bc-kicker,.bk-price{color:#d5b980}
.bc-card h3,.bc-card strong,.bc-card dt,.bk-service,.bk-progress [aria-current=step] button{color:#f4f0e8}
.bc-card p,.bc-card small,.bk-service small,.bk-main>p,.bk-aside p,.bk-progress button,.bk-week{color:#bdb9b0}
.bk-service,.bk-days button,.bk-slots button{background:#1c1c1c;color:#f4f0e8;border-color:#514a3f}
.bk-service[aria-pressed=true],.bk-slots button[aria-pressed=true],.bk-days button[aria-pressed=true]{background:#443723;color:#fff;border-color:#d5b980}
.bk-progress button{border-color:#514a3f}.bk-progress [aria-current=step] button{border-color:#d5b980}
.bk-aside hr,.bk-review{border-color:#514a3f}
.bc-btn{background:#c7a66b;border-color:#c7a66b;color:#080808}.bc-btn:hover{background:#edd5a4;border-color:#edd5a4}
.bc-outline{background:transparent;color:#e2c68d}
.bk-month button,.bk-review button{color:#e2c68d}
.bk-main input,.bk-main textarea{background:#0d0d0d;border-color:#514a3f;color:#f4f0e8}
.bk-main input::placeholder,.bk-main textarea::placeholder{color:#a8a49b}
.faq details summary{color:#f4f0e8}
footer{border-top:1px solid #39342b}
.hero-copy>*{animation:hero-copy-in .95s both;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
.hero-copy>*:nth-child(2){animation-delay:.13s}.hero-copy>*:nth-child(3){animation-delay:.26s}.hero-copy>*:nth-child(4){animation-delay:.39s}
@keyframes hero-copy-in{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}}
html.has-motion .reveal{opacity:0;transform:translateY(54px);transition:opacity .85s ease,transform .85s cubic-bezier(.17,.67,.25,1)}
html.has-motion .reveal.in-view{opacity:1;transform:translateY(0)}
.service{transition:background .35s ease,padding .35s ease,border-color .35s ease}
.service:hover{background:#15120e;padding-left:16px;padding-right:16px;border-color:#a88958}
.space-gallery img{transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .7s ease;filter:saturate(.82)}
.space-gallery button:hover img{transform:scale(1.09);filter:saturate(1.12)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-copy>*,.hero-slide.is-active{animation:none}html.has-motion .reveal{opacity:1;transform:none;transition:none}.hero-slide{transition:none;transform:none}.service,.space-gallery img{transition:none}}