:root{--bg:#FAF8F3;--ink:#292929;--blush:#F0E9DE;--rose:#D8C8B4;--taupe:#B7A58D;--soft:rgba(41,41,41,.74);--sand:#F0E9DE;--card:#FFFDF9;--muted:#82786B;
--h:'Bricolage Grotesque','Arial Black',sans-serif;--b:'DM Sans',system-ui,sans-serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#FAF8F3}}
*,*:before,*:after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:90px;height:auto}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--b);overflow-x:hidden;line-height:1.55}
h1,h2,h3{font-family:var(--h);font-weight:800;line-height:.95;letter-spacing:-.03em;margin:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--rose);outline-offset:3px}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
/* nav */
nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;padding:14px 0;transition:.3s}
nav.s{background:rgba(250,248,243,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(41,41,41,.08)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo img{display:block;height:40px;width:auto}
.logo{font-family:var(--h);font-weight:800;font-size:28px;letter-spacing:-.04em;display:flex;align-items:center;gap:6px}
.logo i{width:12px;height:12px;border-radius:50%;background:var(--rose);display:inline-block;animation:pulse 2.4s infinite}
@keyframes pulse{50%{transform:scale(1.5)}}
.links{display:flex;gap:28px;font-weight:500}
.links a{position:relative}.links a:after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--rose);transition:.3s}
.links a:hover:after{width:100%}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:14px 26px;border-radius:99px;font-weight:700;transition:.35s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden;isolation:isolate}
.btn:before{content:"";position:absolute;inset:0;background:var(--rose);transform:translateY(101%);transition:.35s;z-index:-1;border-radius:inherit}
.btn:hover:before{transform:none}.btn:hover{transform:scale(1.05)}
.btn.big{padding:22px 38px;font-size:clamp(17px,2vw,21px);background:var(--rose);animation:glow 2.6s infinite}
.btn.big:before{background:var(--ink)}
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(183,165,141,.5)}100%{box-shadow:0 0 0 24px rgba(183,165,141,0)}}
/* hero */
.hero{min-height:100svh;position:relative;display:flex;align-items:center;padding:130px 0 80px;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(2px);will-change:transform}
.b1{width:520px;height:520px;background:var(--blush);right:-120px;top:-100px;animation:fl 14s ease-in-out infinite}
.b2{width:200px;height:200px;border:3px solid var(--rose);left:6%;bottom:8%;animation:fl 9s ease-in-out infinite reverse}
.b3{width:90px;height:90px;background:var(--rose);left:46%;top:16%;border-radius:30% 70% 60% 40%;animation:spin 18s linear infinite}
@keyframes fl{50%{transform:translate(30px,-40px) scale(1.08)}}
@keyframes spin{to{transform:rotate(360deg)}}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;width:100%}
.hero h1{font-size:clamp(46px,8.2vw,124px)}
.hero h1 span{display:block;overflow:hidden}
.hero h1 span b{display:inline-block;transform:translateY(105%);animation:up 1s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1 span:nth-child(2) b{animation-delay:.12s}.hero h1 span:nth-child(3) b{animation-delay:.24s}
@keyframes up{to{transform:none}}
.hero p{font-size:clamp(17px,1.8vw,22px);max-width:560px;color:var(--soft);margin:28px 0 36px}
.stack{position:relative;height:min(62vh,560px)}
.ph{position:absolute;border-radius:28px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(41,41,41,.35);will-change:transform}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph.p1{width:62%;height:78%;right:0;top:0;transform:rotate(4deg)}
.ph.p2{width:50%;height:52%;left:0;bottom:0;transform:rotate(-6deg);border:6px solid var(--bg)}
/* marquee */
.mq{background:var(--ink);color:var(--bg);overflow:hidden;padding:22px 0;white-space:nowrap;transform:rotate(-1.2deg);margin:40px -10px}
.mq.alt{background:var(--rose);color:#fff;transform:rotate(1deg)}
.mq div{display:inline-flex;gap:48px;animation:mq 30s linear infinite;padding-right:48px}
.mq:hover div{animation-play-state:paused}
.mq span{font-family:var(--h);font-weight:800;font-size:clamp(28px,4.4vw,56px);letter-spacing:-.03em}
.mq span:after{content:"✦";margin-left:48px;color:var(--rose)}.mq.alt span:after{color:var(--ink)}
@keyframes mq{to{transform:translateX(-50%)}}
/* sections */
section{padding:clamp(70px,10vw,140px) 0}
.rv{opacity:0;transform:translateY(50px);transition:1s cubic-bezier(.2,.8,.2,1)}.rv.in{opacity:1;transform:none}
h2{font-size:clamp(40px,6.4vw,92px)}
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,90px);align-items:start}
.about .sticky{position:sticky;top:110px}
.about .sticky p{color:var(--soft);font-size:19px;max-width:420px;margin-top:24px}
.pil{display:grid;gap:18px}
.pil div{padding:clamp(24px,3vw,40px);border-radius:32px;background:var(--card);box-shadow:0 1px 0 rgba(41,41,41,.08);transition:.45s cubic-bezier(.2,.8,.2,1)}
.pil div:nth-child(2){margin-left:clamp(0px,6vw,80px);background:var(--blush)}
.pil div:nth-child(3){background:var(--ink);color:#fff}
.pil div:nth-child(4){margin-left:clamp(0px,3vw,40px);background:var(--sand)}
.pil div:hover{transform:translateX(12px) rotate(-.6deg)}
.pil h3{font-size:clamp(26px,3.2vw,42px)}
.pil p{margin:10px 0 0;opacity:.75}
/* servicios */
.sv{background:var(--blush);border-radius:48px 48px 0 0}
/* galeria */
.gal{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(110px,15vw,210px);gap:16px;margin-top:50px}
.gi{border-radius:30px;overflow:hidden;position:relative}
.gi img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.2,.8,.2,1),filter .6s;filter:saturate(.9)}
.gi:hover img{transform:scale(1.12);filter:saturate(1.2)}
.gi:nth-child(1){grid-column:1/6;grid-row:span 3}
.gi:nth-child(2){grid-column:6/10;grid-row:span 2}
.gi:nth-child(3){grid-column:10/13;grid-row:span 3;margin-top:40px}
.gi:nth-child(4){grid-column:6/10;grid-row:span 2}
.gi:nth-child(5){grid-column:1/6;grid-row:span 2;margin-top:16px}
.gi:nth-child(6){grid-column:10/13;grid-row:span 1}
.gi:nth-child(5) img{object-position:center 40%}
/* reseñas */
.rw{overflow:hidden;margin-top:50px}
.rw>div{display:flex;gap:20px;width:max-content;animation:mq 45s linear infinite}
.rw:hover>div{animation-play-state:paused}
.rc{width:min(86vw,440px);background:var(--card);border-radius:30px;padding:34px;white-space:normal;transition:.4s}
.rc:hover{transform:translateY(-10px) rotate(-1deg);background:var(--ink);color:#fff}
.rc q{font-family:var(--h);font-weight:500;font-size:22px;line-height:1.25;quotes:none;display:block}
.rc b{display:block;margin-top:22px;color:var(--rose)}
.stars{color:var(--rose);letter-spacing:4px;margin-bottom:14px}
/* footer */
footer{background:var(--ink);color:#fff;border-radius:48px 48px 0 0;padding:clamp(70px,9vw,120px) 0 40px}
footer h2{font-size:clamp(52px,11vw,170px);margin-bottom:50px}
footer .logo img{display:block;height:40px;width:auto}
.logo{color:#fff}
.fg{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-bottom:50px}
.fg h3{font-size:22px;color:var(--rose);margin-bottom:12px;letter-spacing:0}
.fg p{margin:4px 0;opacity:.85}
.soc{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:60px}
.soc a{flex:1 1 200px;text-align:center;padding:26px;border-radius:99px;border:2px solid rgba(255,255,255,.3);font-family:var(--h);font-weight:800;font-size:clamp(22px,3vw,34px);transition:.4s}
.soc a:hover{background:var(--rose);border-color:var(--rose);transform:translateY(-8px) rotate(-1.5deg)}
.copy{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center;opacity:.8;font-size:14px}
@media(max-width:900px){
.links{display:none}
.hero .wrap,.about,.fg{grid-template-columns:1fr}
.stack{height:380px}
.about .sticky{position:static}
.gal{grid-template-columns:repeat(6,1fr)}
.gi:nth-child(n){margin:0}
.gi:nth-child(1){grid-column:1/4;grid-row:span 3}.gi:nth-child(2){grid-column:4/7;grid-row:span 2}
.gi:nth-child(3){grid-column:4/7;grid-row:span 2}.gi:nth-child(4){grid-column:1/4;grid-row:span 2}
.gi:nth-child(5){grid-column:1/5;grid-row:span 2}.gi:nth-child(6){grid-column:5/7;grid-row:span 2}
}
@media(max-width:560px){nav .btn{padding:11px 18px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.hero h1 span b{transform:none}}
/* ===== v2: paleta, logo, historia, servicios, cita, iconos, WhatsApp ===== */
.logo img{display:block;height:46px;width:auto}
.fbadge{background:var(--bg);padding:10px 18px;border-radius:18px}
.btn:hover{color:var(--ink)}
.btn.big{color:var(--ink)}.btn.big:hover{color:#fff}
.btn svg{width:22px;height:22px;flex:none}
.mq.alt{color:var(--ink)}
.pil div:nth-child(4){background:var(--card);box-shadow:inset 0 0 0 1px var(--rose)}
.rc b{color:var(--soft)}.rc:hover b{color:var(--rose)}
/* historia */
.story{background:var(--ink);color:var(--bg);position:relative;overflow:hidden}
.story .ln{position:absolute;left:clamp(8px,2.4vw,32px);top:0;bottom:0;width:1px;background:rgba(250,248,243,.14)}
.story .ln i{display:block;width:100%;height:calc(var(--p,0)*100%);background:var(--rose)}
.kick{font-weight:700;letter-spacing:.22em;text-transform:uppercase;font-size:13px;color:var(--rose);margin:0 0 40px}
.story em{font-style:normal;color:var(--rose)}
.sr .w{opacity:.2;transition:opacity .4s}.sr .w.on{opacity:1}
.big,.mid{font-family:var(--h);letter-spacing:-.03em;margin:0}
.big{font-weight:800;font-size:clamp(34px,6vw,86px);line-height:1.02;max-width:1100px;margin-bottom:clamp(90px,15vw,220px)}
.mid{font-weight:500;font-size:clamp(24px,3.3vw,46px);line-height:1.2;max-width:900px;margin-left:clamp(0px,12vw,200px);margin-bottom:clamp(60px,10vw,140px)}
.hls{display:flex;flex-wrap:wrap;gap:clamp(30px,8vw,120px);margin-bottom:clamp(70px,12vw,170px)}
.hl b{display:block;font-family:var(--h);font-weight:800;font-size:clamp(52px,11vw,160px);line-height:.9;letter-spacing:-.04em;color:var(--rose)}
.hl small{display:block;margin-top:14px;font-size:17px;opacity:.75}
.story .big.last{margin-bottom:0}
/* servicios */
/* cita */
.cita{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,90px);align-items:start}
.cita p.lead{color:var(--soft);font-size:19px;max-width:420px;margin-top:24px}
.fm{background:var(--blush);border-radius:32px;padding:clamp(22px,3.4vw,44px);display:grid;gap:18px}
.fm label{display:grid;gap:8px;font-weight:700;font-size:15px}
.fm input,.fm select,.fm textarea{font:400 16px var(--b);color:var(--ink);background:var(--bg);border:1px solid rgba(41,41,41,.18);border-radius:16px;padding:15px 16px;width:100%;min-height:52px}
.fm textarea{resize:vertical}
.fm input:focus,.fm select:focus,.fm textarea:focus{outline:3px solid var(--rose);outline-offset:1px;border-color:var(--rose)}
.fm .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fm .btn{justify-content:center;width:100%}
.hint{margin:0;font-size:14px;color:var(--soft);text-align:center}
/* redes y WhatsApp */
.soc{margin-bottom:60px}
.soc a{flex:none;width:clamp(64px,9vw,88px);aspect-ratio:1;padding:0;border-radius:50%;display:grid;place-items:center;font-size:0}
.soc a svg{width:42%;height:42%;fill:currentColor}
.soc a:hover{color:var(--ink);transform:translateY(-8px) rotate(-6deg)}
.ico{fill:currentColor}
.fab{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;height:54px;min-width:54px;padding:0 15px;border-radius:99px;background:var(--ink);color:var(--rose);border:1px solid rgba(183,165,141,.6);box-shadow:0 10px 30px -8px rgba(41,41,41,.5);transition:opacity .35s,transform .35s,background .3s,color .3s}
.fab svg{width:24px;height:24px;flex:none}
.fab span{max-width:0;overflow:hidden;white-space:nowrap;font-weight:700;font-size:15px;transition:max-width .4s,margin .4s}
.fab:hover,.fab:focus-visible{background:var(--rose);color:var(--ink)}
.fab:hover span,.fab:focus-visible span{max-width:100px;margin-left:10px}
.fab.hide{opacity:0;pointer-events:none;transform:translateY(14px)}
@media(max-width:900px){.cita{grid-template-columns:1fr}}
@media(max-width:560px){.fm .two{grid-template-columns:1fr}.logo img{height:38px}}

/* ===== v3: paleta clara, historia en marfil, cuadrícula de servicios ===== */
:focus-visible{outline-color:#82786B}
.links a:after{background:var(--taupe)}
.stars{color:var(--taupe)}
.rc b{color:#82786B}.rc:hover b{color:var(--rose)}
.fm input:focus,.fm select:focus,.fm textarea:focus{outline:3px solid #82786B;border-color:#82786B}
/* historia */
.story{background:var(--bg);color:var(--ink)}
.story .ln{background:rgba(41,41,41,.1)}.story .ln i{background:var(--taupe)}
.kick{color:#82786B}
.story em{background:linear-gradient(var(--rose),var(--rose)) 0 90%/100% .32em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hl{min-width:0;max-width:100%}
.hl b{color:var(--ink);font-size:clamp(38px,9vw,140px);overflow-wrap:break-word;background:linear-gradient(var(--rose),var(--rose)) 0 92%/100% .12em no-repeat;display:inline-block;max-width:100%}
/* servicios */
.sg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start;margin-top:clamp(30px,5vw,60px)}
.sb{min-width:0;background:var(--bg);border:1px solid #F0E9DE;border-radius:18px;transition:border-color .35s,background .35s}
.sb:hover{border-color:var(--rose)}
.sb.open{border-color:var(--taupe);background:#FFFDF9}
.sbt{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:76px;padding:18px 20px;background:none;border:0;color:var(--ink);font:500 clamp(17px,1.5vw,20px)/1.25 var(--h);letter-spacing:-.01em;text-align:left;cursor:pointer;border-radius:18px;overflow-wrap:break-word}
.sbt span:first-child{min-width:0}
.ind{position:relative;flex:none;width:14px;height:14px;color:#82786B}
.ind:before,.ind:after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;border-radius:2px;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s}
.ind:after{transform:rotate(90deg)}
.sb:hover .ind{color:var(--ink)}
.sb.open .ind:after{transform:rotate(0);opacity:0}
.sbd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1)}
.sb.open .sbd{grid-template-rows:1fr}
.sbd>div{overflow:hidden;visibility:hidden;padding:0 20px;transition:visibility 0s .5s}
.sb.open .sbd>div{visibility:visible;transition-delay:0s}
.sbd p{margin:0 0 16px;font-size:16px;line-height:1.55;color:var(--soft)}
.ch{margin:0 0 20px;background:none;border:0;border-bottom:1px solid #82786B;padding:2px 0;color:var(--ink);font:700 15px var(--b);cursor:pointer}
.ch:hover{color:#82786B}
@media(max-width:1023px){.sg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:479px){.sg{grid-template-columns:minmax(0,1fr)}}
.story em{background:none}
.story em .w{background:linear-gradient(var(--rose),var(--rose)) 0 90%/100% .32em no-repeat}
/* historia v4: peso regular, mejor legibilidad y espacio entre párrafos */
.story .big{font-weight:500;font-size:clamp(28px,4.6vw,62px);line-height:1.18;letter-spacing:-.02em;max-width:1000px;margin-bottom:clamp(56px,9vw,120px)}
.story .big.last{margin-bottom:0}
.story .sr .w{opacity:.3}.story .sr .w.on{opacity:1}
.story em .w{background:linear-gradient(#82786B,#82786B) 0 100%/100% 2px no-repeat;padding-bottom:3px}
html,body{overflow-x:clip}
.story em{color:var(--ink)}