@font-face{font-family:"Jost";src:url("../fonts/jost.woff2") format("woff2");font-weight:300 600;font-display:swap}
@font-face{font-family:"Lato";src:url("../fonts/lato.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Lato";src:url("../fonts/lato-bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --marfil:#FBF7F2;--blanco:#fff;--nude:#DEC3AE;--arena:#DBC6B5;--rosa:#EBD2C8;--oro:#DBC480;--orop:#A8873A;--salvia:#A7AE98;--cacao:#3B2E27;--hair:#E6D8CB;--hairdark:#5A4A41;--muted:#7A6A5F;
  --syne:"Jost",system-ui,sans-serif;--fig:"Lato",system-ui,sans-serif;--fra:"Jost",system-ui,sans-serif;
  --pad:clamp(20px,5vw,72px);--max:1360px;--ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--marfil);color:var(--cacao);font-family:var(--fig);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-family:var(--syne);font-weight:400;letter-spacing:.22em;text-transform:uppercase;margin:0;line-height:1.25}
h2{font-size:clamp(24px,2.6vw,36px)}
h3{font-size:19px;letter-spacing:.2em}
.center{text-align:center}
.sub{max-width:560px;margin:18px auto 0;color:#4A3B33}
p.lead{font-weight:700;color:var(--cacao)}
.it{font-style:normal}
.gold{color:var(--orop)}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--orop);margin:0 0 18px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sec{padding:clamp(72px,10vw,140px) 0}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--cacao);color:var(--marfil);font-family:var(--syne);font-size:14px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;padding:16px 26px;border-radius:2px;transition:background .3s var(--ease),transform .3s var(--ease)}
.btn:hover{background:#2A201B;transform:translateY(-1px)}
.btn.light{background:var(--marfil);color:var(--cacao)}
.btn.light:hover{background:#fff}
.link{font-family:var(--syne);font-size:13.5px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--orop);display:inline-flex;align-items:center;gap:8px}
.link::after{content:"";width:22px;height:1px;background:currentColor;transition:width .3s var(--ease)}
.link:hover::after{width:36px}
.star{width:14px;height:14px;fill:currentColor;display:inline-block;vertical-align:middle}

/* header */
.hd{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:22px var(--pad);transition:background .4s var(--ease),padding .4s var(--ease),box-shadow .4s var(--ease);color:var(--marfil)}
.hd.solid{background:rgba(251,247,242,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--cacao);padding:14px var(--pad);box-shadow:0 1px 0 var(--hair)}
.hd .logo{width:150px;color:currentColor}
.hd .logo svg{width:100%;height:auto;fill:currentColor;color:currentColor}
.nav{display:flex;gap:30px;align-items:center;font-family:var(--syne);font-size:13px;font-weight:400;letter-spacing:.2em;text-transform:uppercase}
.nav a{position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .3s var(--ease)}
.nav a:hover::after{width:100%}
.hd .btn{padding:12px 20px}
.hd:not(.solid) .btn{background:var(--marfil);color:var(--cacao)}
.burger{display:none;width:40px;height:40px;position:relative}
.burger span{position:absolute;left:8px;right:8px;height:1.5px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease)}
.burger span:first-child{top:14px}.burger span:last-child{top:24px}
.burger.on span:first-child{top:19px;transform:rotate(45deg)}.burger.on span:last-child{top:19px;transform:rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:40;background:var(--cacao);color:var(--marfil);padding:110px var(--pad) 40px;display:flex;flex-direction:column;justify-content:space-between;transform:translateY(-100%);transition:transform .5s var(--ease)}
.mnav.on{transform:none}
.mnav a{display:block;font-family:var(--syne);font-size:24px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;padding:14px 0;border-bottom:1px solid var(--hairdark)}
.mnav .foot{font-size:13px;color:#C9B9AC;display:flex;justify-content:space-between;gap:20px}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:var(--marfil);overflow:hidden;background:var(--cacao)}
.hero video,.hero img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(59,46,39,.28) 0%,rgba(59,46,39,0) 35%,rgba(59,46,39,.72) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-bottom:clamp(36px,6vw,80px);padding-top:140px}
.hero .h1{font-size:clamp(30px,4.6vw,64px);letter-spacing:.18em;line-height:1.22;max-width:none;margin-bottom:26px}
.hero .it{color:var(--oro)}
.hero .eyebrow{color:var(--oro)}
.hero p.lead,.hero h1.lead{font-size:clamp(16px,1.4vw,19px);max-width:460px;color:#EFE4DA;margin:0 0 30px;font-weight:400}
.hero .cta{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.hero .cta .link{color:var(--marfil)}
.hero .meta{margin-top:34px;padding-top:18px;border-top:1px solid rgba(251,247,242,.28);display:flex;gap:28px;flex-wrap:wrap;font-size:13px;color:#EFE4DA}
.hero .meta b{font-weight:700;color:var(--marfil)}
.scrollhint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:1px;height:44px;background:linear-gradient(var(--oro),transparent);z-index:2;animation:hint 2.4s var(--ease) infinite}
@keyframes hint{0%{transform:translate(-50%,-8px) scaleY(.6);transform-origin:top}50%{transform:translate(-50%,0) scaleY(1)}100%{transform:translate(-50%,8px) scaleY(.6)}}

/* intro */
.intro{background:var(--rosa);background:#F3E7E0}
.intro .cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,120px);align-items:start}
.intro h2{position:relative;font-size:clamp(26px,3vw,42px);letter-spacing:.24em;line-height:1.3;margin:0 0 34px;padding-top:10px;max-width:none}
.intro h2 .dot{position:absolute;left:-62px;top:-26px;width:124px;height:124px;border-radius:50%;background:var(--marfil);z-index:-1}
.intro h2{z-index:0}
.intro .txt p{font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:#4A3B33;max-width:560px;margin:0 0 26px}
.intro .txt p.lead{color:var(--cacao)}
.btn.outline{background:transparent;color:var(--cacao);border:1px solid #E5B7B5;padding:15px 30px;letter-spacing:.26em}
.btn.outline:hover{background:var(--marfil)}
.intro .pic{aspect-ratio:4/5;overflow:hidden;border-radius:10px}
.intro .pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.intro .pic:hover img{transform:scale(1.03)}
.line{font-family:var(--syne);font-weight:400;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--cacao);display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:26px 0 30px}
.line .star{width:10px;height:10px;color:var(--orop)}

/* services */
.serv{background:var(--blanco)}
.serv .sub{margin-bottom:0}
.cards{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);gap:22px;padding:clamp(36px,4vw,56px) var(--pad) 8px;max-width:var(--max);margin:0 auto;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cards::-webkit-scrollbar{display:none}
.card{scroll-snap-align:start;text-align:center}
.card .pic{aspect-ratio:4/5;border-radius:10px;overflow:hidden;margin-bottom:22px}
.card .pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.card:hover .pic img{transform:scale(1.04)}
.card h3{margin-bottom:10px}
.card p{margin:0 auto 6px;max-width:30ch;color:#4A3B33;font-size:15.5px}
.card .from{font-family:var(--syne);letter-spacing:.16em;text-transform:uppercase;font-size:13px;color:var(--orop);margin:8px 0 18px}
.card .btn{padding:12px 24px;font-size:12.5px}

/* precios */
.precios{background:var(--marfil);border-top:1px solid var(--hair)}
.menu-grid{columns:3;column-gap:clamp(32px,5vw,72px);margin-top:clamp(36px,5vw,60px)}
.grp{break-inside:avoid;margin-bottom:38px}
.menu-grid h3{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--cacao)}
.pl{list-style:none;margin:0;padding:0}
.pl li{display:flex;align-items:baseline;gap:10px;padding:9px 0;font-size:15.5px;border-bottom:1px solid var(--hair)}
.pl li span{flex:1}
.pl li em{font-style:normal;white-space:nowrap;font-family:var(--syne);letter-spacing:.06em}
.precios .note{font-size:13px;color:var(--muted);margin:12px 0 0}

/* quote video */
.qv{position:relative;min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--marfil);overflow:hidden;background:var(--cacao)}
.qv video,.qv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qv::after{content:"";position:absolute;inset:0;background:rgba(59,46,39,.45)}
.qv .wrap{position:relative;z-index:2;padding:120px var(--pad)}
.qv p.q{font-family:var(--syne);font-weight:400;letter-spacing:.2em;text-transform:uppercase;font-size:clamp(22px,3vw,42px);line-height:1.4;margin:0 auto 34px;max-width:none}
.qv .q .g{color:var(--oro)}
.qv .eyebrow{color:var(--oro);margin-bottom:26px}

/* studio */
.studio .cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,120px);align-items:center}
.studio .pic{aspect-ratio:1/1.15;border-radius:10px;overflow:hidden}
.studio .pic img{width:100%;height:100%;object-fit:cover}
.studio h2{margin-bottom:30px;max-width:22ch}
.studio .txt p{font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:#4A3B33;max-width:560px;margin:0 0 24px}

/* gallery */
.gal{background:var(--nude)}
.gal .head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px;gap:30px}
.gal h2{font-size:clamp(30px,3.6vw,52px)}
.gal .head p{color:#5A4A41;max-width:400px;margin:0;font-size:15px}
.masonry{columns:3;column-gap:14px}
.masonry figure{margin:0 0 14px;break-inside:avoid;border-radius:4px;overflow:hidden;position:relative}
.masonry img{width:100%;height:auto;transition:transform 1.2s var(--ease)}
.masonry figure:hover img{transform:scale(1.04)}
.masonry figure::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(180deg,rgba(59,46,39,0),rgba(59,46,39,.45));pointer-events:none}
.masonry figcaption{z-index:1;position:absolute;left:14px;bottom:12px;font-family:var(--syne);letter-spacing:.18em;text-transform:uppercase;font-size:12px;color:var(--marfil)}

/* reviews */
.rev{background:var(--cacao);color:var(--marfil)}
.rev .eyebrow{color:var(--oro)}
.rev h2{max-width:20ch}
.rev .list{display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px;margin-top:48px}
.rev .list>div{border-top:1px solid var(--hairdark);padding:26px 0}
.rev .list p.q{font-size:19px;line-height:1.5;margin:0 0 18px}
.rev .list small{font-size:14px;color:var(--oro)}
.rev .stars{display:flex;gap:6px;margin-bottom:16px;color:var(--oro)}

/* care */
.care .sub{font-size:clamp(17px,1.5vw,20px);color:#4A3B33;max-width:520px;margin:18px 0 0}
.tips{display:grid;grid-template-columns:1fr 1fr;gap:26px clamp(40px,6vw,96px);margin-top:clamp(36px,5vw,64px)}
.tips p{margin:0;font-size:17px;line-height:1.55;color:#4A3B33;padding-left:26px;position:relative}
.tips p>.star{position:absolute;left:0;top:7px;width:12px;height:12px;color:var(--orop)}
.tips b{display:block;font-family:var(--fig);font-weight:700;font-size:18px;color:var(--cacao);margin-bottom:6px}

/* contact */
.contact{background:var(--blanco);border-top:1px solid var(--hair)}
.contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px)}
.contact h2{max-width:16ch}
.contact p.lead{font-size:17px;color:#4A3B33;max-width:460px}
.contact .ctas{display:flex;gap:16px;flex-wrap:wrap;margin:26px 0 40px}
.contact .btn.wa{background:#EDB9BE;color:var(--cacao)}
.contact .btn.wa:hover{background:#E6A9AF}
.info{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
.info div{padding:18px 0;border-top:1px solid var(--hair);font-size:14.5px}
.info b{display:block;font-family:var(--syne);letter-spacing:.2em;text-transform:uppercase;font-size:13px;color:var(--cacao);margin-bottom:8px;font-weight:400}
.contact .map{aspect-ratio:4/5;border-radius:4px;overflow:hidden;max-height:560px;position:relative}
.contact .map img{width:100%;height:100%;object-fit:cover}
.contact .map .sello{position:absolute;right:20px;top:20px;width:110px;color:var(--marfil)}
.contact .map .sello svg{fill:currentColor;width:100%;height:auto;animation:spin 24s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* footer */
.ft{background:var(--cacao);color:#C9B9AC;padding:56px 0 30px;font-size:13px}
.ft .top{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;padding-bottom:36px;border-bottom:1px solid var(--hairdark)}
.ft .logo{width:220px;color:var(--oro)}
.ft .logo svg{fill:currentColor;width:100%;height:auto}
.ft .cols{display:flex;gap:56px}
.ft .cols b{display:block;color:var(--marfil);font-family:var(--syne);letter-spacing:.2em;text-transform:uppercase;font-size:12px;margin-bottom:12px;font-weight:400}
.ft .cols a{display:block;padding:3px 0}
.ft .cols a:hover{color:var(--marfil)}
.ft .bot{display:flex;justify-content:space-between;gap:20px;padding-top:22px;flex-wrap:wrap}

/* reveal: transform only, never opacity:0 at rest */
.rv{transform:translateY(28px);transition:transform .9s var(--ease)}
.rv.in{transform:none}
@media (prefers-reduced-motion:reduce){.rv{transform:none;transition:none}.scrollhint{animation:none}.contact .map .sello svg{animation:none}}

/* WhatsApp floating */
.wafab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:45;width:60px;height:60px;border-radius:50%;background:#EDB9BE;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.18);transition:transform .3s var(--ease)}
.wafab:hover{transform:translateY(-2px)}
.wafab svg{width:30px;height:30px;fill:#fff}

@media (max-width:980px){
  .sec{padding:64px 0}
  .nav,.hd .btn.desk{display:none}
  .hd{padding:16px var(--pad)}
  .hd .logo{width:124px}
  .burger{display:block}
  .hero .wrap{padding-top:120px}
  .hero .meta{gap:14px 22px}
  .intro .cols,.studio .cols,.contact .grid,.tips{grid-template-columns:1fr}
  .menu-grid{columns:1}
  .studio .pic{aspect-ratio:4/5}
  .cards{grid-auto-columns:minmax(78vw,1fr);gap:14px}
  .intro .pic{aspect-ratio:4/5}
  .intro h2 .dot{left:-30px;width:96px;height:96px}
  .masonry{columns:2}
  .rev .list{grid-template-columns:1fr}
  .ft .top,.ft .cols{flex-direction:column;gap:28px}
  .contact .map{aspect-ratio:4/3;max-height:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .sec{padding:56px 0}
  .hero .wrap{padding-bottom:36px}
  .hero .meta{gap:8px 18px;font-size:12.5px;margin-top:26px;padding-top:14px}
  .qv p.q{font-size:17px;letter-spacing:.12em;line-height:1.55;max-width:none}
  .qv .wrap{padding:90px var(--pad)}
  .cards{grid-auto-columns:minmax(80vw,1fr);gap:12px;padding-top:30px}
  .card .pic{margin-bottom:16px}
  .card p{font-size:15px}
  .intro h2 .dot{left:-24px;top:-22px;width:88px;height:88px}
  .intro h2,.studio h2{letter-spacing:.18em;font-size:23px}
  .rev .list{gap:0;margin-top:30px}
  .rev .list>div{padding:22px 0}
  .contact .ctas .btn{width:100%;justify-content:center}
  .masonry figcaption{font-size:10.5px;left:10px;bottom:8px}
  .ft{padding:44px 0 28px}
  .ft .logo{width:170px}
  .hero .h1{font-size:clamp(22px,6.4vw,30px);letter-spacing:.16em;max-width:none}
  .hero .h1 br{display:none}
  .qv p.q br{display:none}
  .hero p.lead,.hero h1.lead{font-size:15px}
  .hero .cta{gap:14px}
  .hero .cta .btn{width:100%;justify-content:center}
  .qv{min-height:60vh}
  .studio .grid{gap:8px}
  .rev .list p.q{font-size:19px}
  .masonry{columns:2;column-gap:8px}
  .masonry figure{margin-bottom:8px}
  .facts,.info{grid-template-columns:1fr}
  .btn{padding:15px 20px}
}

/* ---- v7: efectos y UX ---- */

section[id]{scroll-margin-top:70px}
.btn,.link{transition:background .3s var(--ease),transform .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.btn:active{transform:scale(.98)}
.btn.outline:hover{background:var(--cacao);color:var(--marfil);border-color:var(--cacao)}
.hd.solid{transition:background .4s var(--ease),padding .4s var(--ease),box-shadow .4s var(--ease),color .2s}
/* hero load-in */
.up{animation:up .9s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes up{from{transform:translateY(26px)}to{transform:none}}

@keyframes kb{from{transform:scale(1)}to{transform:scale(1.06)}}
@media (min-width:981px) and (prefers-reduced-motion:no-preference){.hero video{animation:kb 18s ease-in-out infinite alternate}.qv video{animation:kb 16s ease-in-out infinite alternate}}
/* staggered reveal for cards and gallery */
.cards .card{transform:translateY(24px);transition:transform .9s var(--ease)}
.cards.in .card{transform:none}
.cards.in .card:nth-child(2){transition-delay:.1s}.cards.in .card:nth-child(3){transition-delay:.2s}.cards.in .card:nth-child(4){transition-delay:.3s}
.card .btn{transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.card:hover .btn{background:var(--cacao);color:var(--marfil);border-color:var(--cacao)}
.masonry figure{transform:translateY(20px);transition:transform .9s var(--ease)}
.masonry.in figure{transform:none}
.masonry.in figure:nth-child(3n+2){transition-delay:.08s}.masonry.in figure:nth-child(3n){transition-delay:.16s}
.masonry figcaption{transform:translateY(6px);opacity:.85;transition:transform .4s var(--ease),opacity .4s}
.masonry figure:hover figcaption{transform:none;opacity:1}
.masonry .lb{display:block;cursor:zoom-in}
.pl li{transition:background .25s}
.pl li:hover{background:rgba(222,195,174,.22)}
/* mobile card dots */
.dots{display:none;justify-content:center;gap:8px;margin-top:18px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--hair);transition:background .3s,transform .3s}
.dots i.on{background:var(--orop);transform:scale(1.25)}
@media (max-width:980px){.dots{display:flex}}
/* lightbox */
.lbox{position:fixed;inset:0;z-index:80;background:rgba(59,46,39,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:14px;animation:fade .3s var(--ease)}
.lbox[hidden]{display:none}
.lbox img{max-width:min(92vw,900px);max-height:78vh;width:auto;height:auto;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.lbox p{margin:0;color:var(--marfil);font-family:var(--syne);letter-spacing:.2em;text-transform:uppercase;font-size:12px}
.lbx{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;background:rgba(251,247,242,.12);color:var(--marfil);font-size:18px}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.up{animation:none;transform:none;opacity:1}.hero video,.qv video{animation:none}.cards .card,.masonry figure{transform:none;transition:none}}

.contact .map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.85) sepia(.12)}

/* ---- v8: UX ---- */
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--cacao);color:var(--marfil);padding:10px 16px;border-radius:2px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--orop);outline-offset:3px}
.hero .meta .now{display:inline-flex;align-items:center;gap:8px}
.hero .meta .now::before{content:"";width:8px;height:8px;border-radius:50%;background:#8FBF7F;box-shadow:0 0 0 3px rgba(143,191,127,.25)}
.hero .meta .now.closed::before{background:#D9A5A5;box-shadow:0 0 0 3px rgba(217,165,165,.25)}
.hero .meta .now:empty{display:none}
.nav a.act::after{width:100%}
.pl li{padding:0}
.pl li a{display:flex;align-items:baseline;gap:10px;padding:9px 0;position:relative}
.pl li .arr{font-style:normal;font-family:var(--syne);letter-spacing:.18em;text-transform:uppercase;font-size:10px;color:var(--orop);opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s;margin-left:6px}
.pl li a:hover .arr,.pl li a:focus-visible .arr{opacity:1;transform:none}
@media (hover:none){.pl li .arr{opacity:1;transform:none}}
.faq{background:var(--blanco);border-top:1px solid var(--hair)}
.qa{max-width:820px;margin:clamp(30px,4vw,48px) auto 0;border-top:1px solid var(--hair)}
.qa details{border-bottom:1px solid var(--hair)}
.qa summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;font-family:var(--syne);font-size:17px;letter-spacing:.06em;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:1px solid var(--hair);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--fig);transition:transform .35s var(--ease),background .3s}
.qa details[open] summary::after{transform:translateY(-50%) rotate(45deg);background:var(--rosa)}
.qa p{margin:0 0 22px;color:#4A3B33;max-width:70ch;font-size:16px;line-height:1.6}
.lbn{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(251,247,242,.12);color:var(--marfil);font-size:30px;line-height:1}
.lbn.prev{left:14px}.lbn.next{right:14px}
.mbar{display:none}
@media (max-width:980px){
  .wafab{display:none}
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:1.4fr 1fr;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(251,247,242,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 -1px 0 var(--hair);transform:translateY(110%);transition:transform .4s var(--ease)}
  .mbar.on{transform:none}
  .mbar .btn{justify-content:center;padding:14px 12px;font-size:12.5px}
  .mbar .btn.wa{background:#EDB9BE;color:var(--cacao)}
  .mbar .btn.light{border:1px solid var(--hair)}
  .ft{padding-bottom:96px}
  .qa summary{font-size:15.5px;padding-right:40px}
}

/* ---- v9 ---- */
:root{--orotxt:#886D2E}
.link,.from,.pl li .arr,.eyebrow,.gold,.card .from{color:var(--orotxt)}
.pl li .arr{font-size:11px}
.link{padding:10px 0}
.card .from{display:inline-block;font-family:var(--syne);letter-spacing:.14em;text-transform:uppercase;font-size:12.5px;margin:8px 0 18px;padding:6px 0;border-bottom:1px solid transparent;transition:border-color .3s}
.card .from:hover{border-color:currentColor}
.gal .sub{margin-bottom:clamp(28px,4vw,44px)}
.rev .stars{gap:5px}
.rev .stars .star{width:17px;height:17px}
.contact h2{max-width:none}
.info .tap{display:block;padding:5px 0;min-height:30px}
.precios .deposit{margin:10px auto 0;font-size:14.5px;color:var(--muted)}
.tabs{display:none}
.pl li a{min-height:40px;align-items:center}
@media (max-width:980px){
  .precios.js-tabs .tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:26px calc(var(--pad) * -1) 0;padding:4px var(--pad) 6px;position:sticky;top:62px;z-index:5;background:var(--marfil)}
  .precios.js-tabs .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:none;font-family:var(--syne);letter-spacing:.16em;text-transform:uppercase;font-size:12px;padding:12px 16px;border:1px solid var(--hair);border-radius:99px;background:var(--blanco);color:var(--cacao);transition:background .25s,color .25s,border-color .25s}
  .tabs button.on{background:var(--cacao);color:var(--marfil);border-color:var(--cacao)}
  .precios.js-tabs .menu-grid{margin-top:18px}
  .precios.js-tabs .grp{display:none;margin-bottom:10px}
  .precios.js-tabs .grp.on{display:block;animation:fade .35s var(--ease)}
  .precios.js-tabs .grp h3{display:none}
}
.pl li{display:block}
.pl li a{width:100%}
.pl li a span{flex:1}

/* ---- v10: rendimiento ---- */
.precios,.qv,.studio,.gal,.rev,.care,.faq,.contact,.ft{content-visibility:auto;contain-intrinsic-size:auto 900px}
.gal{contain-intrinsic-size:auto 2400px}
.precios{contain-intrinsic-size:auto 1400px}
@media (max-width:980px){.mbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(251,247,242,.98)}.gal{contain-intrinsic-size:auto 3000px}}

/* ---- v12 ---- */
.rev .list p.q{font-family:var(--syne);text-transform:uppercase;letter-spacing:.16em;font-size:17px;line-height:1.4;margin:0 0 12px}
.rev .list small{display:block;font-size:15.5px;line-height:1.6;color:#E9DDD2}
.rev .stars .star{width:20px;height:20px}

/* ---- v13: reserva rápida ---- */
.book{margin:26px 0 22px;padding:24px;border:1px solid var(--hair);border-radius:8px;background:var(--marfil);display:grid;gap:14px}
.book-t{margin:0;font-family:var(--syne);letter-spacing:.2em;text-transform:uppercase;font-size:14px}
.book label{display:grid;gap:6px;font-size:13px;font-weight:700;color:var(--cacao)}
.book input,.book select{font:inherit;font-weight:400;font-size:16px;padding:12px;border:1px solid #D9C9BC;border-radius:4px;background-color:#fff;color:var(--cacao);width:100%;min-height:48px;-webkit-appearance:none;appearance:none}
.book select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233B2E27' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.book input:focus,.book select:focus{outline:2px solid var(--orop);outline-offset:1px;border-color:var(--orop)}
.book [aria-invalid="true"]{border-color:#A3413A}
.book .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.book .btn.wa{justify-content:center;width:100%}
.book-note{margin:0;font-size:13.5px;color:var(--muted)}
.book-note.err{color:#A3413A}
.book-note.ok{color:#4F6B45}
@media (max-width:400px){.book .row2{grid-template-columns:1fr}.book{padding:18px}}
/* map follows the taller booking column on desktop */
@media (min-width:981px){.contact .grid{align-items:start}.contact .map{position:sticky;top:96px}}

/* v15 QA */
@media (max-width:700px){.scrollhint{display:none}}
@media (min-width:981px){.contact .map{aspect-ratio:auto;height:min(640px,calc(100vh - 140px));max-height:none;width:100%}.rev h2{max-width:none}}

/* ---- v16: movimiento ---- */
@keyframes lnup{from{transform:translateY(105%)}to{transform:none}}
@keyframes hdin{from{transform:translateY(-100%)}to{transform:none}}
@keyframes rowin{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@keyframes ring{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.75);opacity:0}}
@keyframes ping{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(2.8);opacity:0}}
@keyframes fabin{from{transform:translateY(24px) scale(.5)}to{transform:none}}
@keyframes qain{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes plx{from{transform:translateY(-6%) scale(1.14)}to{transform:translateY(6%) scale(1.14)}}
@keyframes drift{from{transform:translateY(40px)}to{transform:translateY(-40px)}}
@keyframes heroout{to{transform:translateY(-80px);opacity:.25}}

/* título del hero por líneas */
.hero .h1 .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero .h1 .ln>span{display:block}

/* logo algo más chico con la cabecera sólida */
.hd .logo{transition:transform .45s var(--ease);transform-origin:left center}
.hd.solid .logo{transform:scale(.92)}

/* botones: relleno que barre */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sweep,rgba(251,247,242,.14));transform:scaleX(0);transform-origin:right center;transition:transform .55s var(--ease)}
.btn.light,.hd:not(.solid) .btn{--sweep:#fff}
.btn.outline{--sweep:var(--cacao)}
.btn.wa{--sweep:#E3A3AA}
.btn:hover{background:var(--cacao)}
.btn.light:hover{background:var(--marfil)}
.btn.outline:hover,.card:hover .btn{background:transparent}
.contact .btn.wa:hover{background:#EDB9BE}
@media (hover:hover){.btn:hover::before,.card:hover .btn::before{transform:scaleX(1);transform-origin:left center}}

/* línea dorada bajo los títulos centrados */
.sec h2.center::after{content:"";display:block;width:44px;height:1px;margin:20px auto 0;background:var(--orop);transform:scaleX(0);transition:transform 1.1s var(--ease) .35s}
.sec h2.center.in::after{transform:none}

/* "Abierto ahora" late */
.hero .meta .now{position:relative}

/* formulario */
.book input,.book select{transition:border-color .25s,box-shadow .25s}
.book input:focus,.book select:focus{box-shadow:0 0 0 4px rgba(168,135,58,.14)}
.qa summary{transition:color .3s}
.qa summary:hover{color:var(--orotxt)}
.ft .cols a{transition:color .3s,transform .3s var(--ease)}
.ft .cols a:hover{transform:translateX(4px)}

/* disco "Ver" de la galería */
.gcur{position:fixed;left:0;top:0;z-index:60;pointer-events:none;will-change:transform}
.gcur span{position:absolute;left:-44px;top:-44px;width:88px;height:88px;border-radius:50%;background:rgba(251,247,242,.94);color:var(--cacao);display:flex;align-items:center;justify-content:center;font-family:var(--syne);font-size:11px;letter-spacing:.24em;text-transform:uppercase;padding-left:.24em;box-shadow:0 10px 30px rgba(59,46,39,.18);transform:scale(0);transition:transform .4s var(--ease)}
.gcur.on span{transform:scale(1)}
.masonry.has-cur .lb{cursor:none}

@media (prefers-reduced-motion:no-preference){
  .hero .h1 .ln>span{animation:lnup 1.15s var(--ease) both}
  .hero .h1 .ln:nth-child(2)>span{animation-delay:.14s}
  .hd{animation:hdin .9s var(--ease) .15s backwards}
  .hero .meta .now:not(.closed)::after{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#8FBF7F;animation:ping 2.2s var(--ease) infinite;pointer-events:none}

  /* fotos que se asientan al aparecer */
  .cards .card .pic img{transform:scale(1.12);transition:transform 1.6s var(--ease)}
  .cards.in .card .pic img{transform:none}
  .cards.in .card:hover .pic img{transform:scale(1.05);transition-duration:1.2s}
  .masonry img{transform:scale(1.1);transition:transform 1.6s var(--ease)}
  .masonry.in img{transform:none}
  .masonry.in figure:hover img{transform:scale(1.05);transition-duration:1.2s}
  .pic.rv img{transform:scale(1.1);transition:transform 1.6s var(--ease)}
  .pic.rv.in img{transform:none}

  /* estrellas que giran al entrar */
  .tips p.rv .star,.rev .rv .stars .star{transform:rotate(-140deg) scale(.3);transition:transform 1.1s var(--ease) .25s}
  .tips p.rv.in .star,.rev .rv.in .stars .star{transform:none}
  .tips p.rv.in:hover .star{transform:rotate(72deg) scale(1.2);transition-delay:0s}

  /* menú móvil escalonado */
  .mnav>div a{transform:translateY(22px);opacity:0;transition:transform .6s var(--ease),opacity .6s var(--ease)}
  .mnav.on>div a{transform:none;opacity:1}
  .mnav.on>div a:nth-child(1){transition-delay:0.12s}.mnav.on>div a:nth-child(2){transition-delay:0.17s}.mnav.on>div a:nth-child(3){transition-delay:0.22s}.mnav.on>div a:nth-child(4){transition-delay:0.27s}.mnav.on>div a:nth-child(5){transition-delay:0.32s}.mnav.on>div a:nth-child(6){transition-delay:0.37s}

  /* WhatsApp: entrada y anillo */
  .wafab{animation:fabin .7s var(--ease) 1.2s backwards}
  .wafab::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #EDB9BE;opacity:0;pointer-events:none;animation:ring 2.4s var(--ease) 2.6s 3}

  /* preguntas: respuesta que baja */
  .qa details[open] p{animation:qain .5s var(--ease) .05s backwards}
  .book-note.ok,.book-note.err{animation:qain .4s var(--ease)}
}

/* carta: filas escalonadas al cambiar de pestaña (móvil) y columnas escalonadas (desktop) */
@media (max-width:980px) and (prefers-reduced-motion:no-preference){
  .precios.js-tabs .grp.on li{animation:rowin .5s var(--ease) backwards}
  .precios.js-tabs .grp.on li:nth-child(2){animation-delay:0.035s}.precios.js-tabs .grp.on li:nth-child(3){animation-delay:0.070s}.precios.js-tabs .grp.on li:nth-child(4){animation-delay:0.105s}.precios.js-tabs .grp.on li:nth-child(5){animation-delay:0.140s}.precios.js-tabs .grp.on li:nth-child(6){animation-delay:0.175s}.precios.js-tabs .grp.on li:nth-child(7){animation-delay:0.210s}.precios.js-tabs .grp.on li:nth-child(8){animation-delay:0.245s}.precios.js-tabs .grp.on li:nth-child(9){animation-delay:0.280s}.precios.js-tabs .grp.on li:nth-child(10){animation-delay:0.315s}.precios.js-tabs .grp.on li:nth-child(11){animation-delay:0.350s}.precios.js-tabs .grp.on li:nth-child(12){animation-delay:0.385s}.precios.js-tabs .grp.on li:nth-child(13){animation-delay:0.420s}.precios.js-tabs .grp.on li:nth-child(14){animation-delay:0.455s}.precios.js-tabs .grp.on li:nth-child(15){animation-delay:0.490s}
}
@media (min-width:981px) and (prefers-reduced-motion:no-preference){
  .menu-grid .grp{transform:translateY(26px);transition:transform 1s var(--ease)}
  .menu-grid.in .grp{transform:none}
  .menu-grid.in .grp:nth-child(2){transition-delay:0.09s}.menu-grid.in .grp:nth-child(3){transition-delay:0.18s}.menu-grid.in .grp:nth-child(4){transition-delay:0.27s}.menu-grid.in .grp:nth-child(5){transition-delay:0.36s}
}

/* preguntas que se abren con suavidad (Chrome/Edge recientes) */
@supports (interpolate-size:allow-keywords){
  @media (prefers-reduced-motion:no-preference){
    .qa details{interpolate-size:allow-keywords}
    .qa details::details-content{block-size:0;overflow-y:clip;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
    .qa details[open]::details-content{block-size:auto}
  }
}

/* animaciones ligadas al scroll (sin JS) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .hd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--orop);transform-origin:left center;transform:scaleX(0);animation:prog linear both;animation-timeline:scroll(root)}
    .hero .wrap{animation:heroout linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  }
  @media (min-width:981px) and (prefers-reduced-motion:no-preference){
    .intro .pic img,.studio .pic img{animation:plx linear both;animation-timeline:view()}
    .qv p.q{animation:drift linear both;animation-timeline:view()}
  }
}
@media (prefers-reduced-motion:reduce){.btn::before{transition:none}.gcur{display:none}.masonry.has-cur .lb{cursor:zoom-in}}

/* v18: fotos reales del local */
.studio .pic img{object-position:30% 60%}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(40px,6vw,80px)}
.strip figure{margin:0;position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/5}
.strip img{width:100%;height:100%;object-fit:cover}
.strip figcaption{position:absolute;left:16px;bottom:14px;z-index:1;font-family:var(--syne);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--marfil)}
.strip figure::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,rgba(59,46,39,0),rgba(59,46,39,.5));pointer-events:none}
@media (max-width:700px){.strip{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:72vw;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);scrollbar-width:none;padding:0 var(--pad)}.strip::-webkit-scrollbar{display:none}.strip figure{scroll-snap-align:start}}
@media (prefers-reduced-motion:no-preference){.strip img{transform:scale(1.08);transition:transform 1.6s var(--ease)}.strip figure.in img{transform:none}.strip figure.in:hover img{transform:scale(1.04);transition-duration:1.2s}}

/* v19: eslogan con estilo de titular; el h1 real es la frase descriptiva */
.hero .h1{font-family:var(--syne);font-weight:400;letter-spacing:.22em;text-transform:uppercase;margin:0;line-height:1.25}
.hero h1.lead{font-family:var(--fig);text-transform:none;letter-spacing:0;line-height:1.6}
.grp .gd{font-size:15px;line-height:1.55;color:#5A4A41;margin:0 0 16px;max-width:620px}
.contact .info>div:last-child{grid-column:1/-1}
.contact .info>div:last-child a.tap{display:inline-block;margin-right:22px}
