:root{
  --marfil:#F6F2EC; --tinta:#2A2A25; --tinta-2:#3E3E37; --gris:#5A5A52; --gris-2:#7A7A70;
  --oliva:#4B5A2E; --cobre:#8A5A2B; --dorado:#C9B89A; --linea:#DDD5C8;
  --pad-x:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
body{margin:0;background:var(--marfil);color:var(--tinta);font-family:'Figtree',sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--cobre);text-decoration:none}
a:hover{color:var(--oliva)}
img{display:block}
em{font-style:italic}
h1,h2,h3{margin:0;font-family:'Cormorant Garamond',serif;font-weight:500}
.wrap{max-width:1280px;margin:0 auto}
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--cobre)}
.ph{background:repeating-linear-gradient(135deg,#E6DED2 0 10px,#EDE6DB 10px 20px);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--gris-2)}

/* nav */
body[data-vista="desktop"] nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding:22px var(--pad-x);max-width:1280px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:40px;height:40px;object-fit:contain}
.brand span{font-family:'Cormorant Garamond',serif;font-size:18px;letter-spacing:.04em}
.brand em{color:var(--cobre)}
.navlinks{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.navlinks a{color:inherit}
.btn-outline{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border:1px solid var(--oliva);color:var(--oliva);font-size:13px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:background .2s,color .2s}
.btn-outline:hover{background:var(--oliva);color:var(--marfil)}
.btn{display:inline-flex;align-items:center;padding:16px 28px;background:var(--oliva);color:var(--marfil);font-size:13px;letter-spacing:.1em;text-transform:uppercase;border:0;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--cobre);color:var(--marfil)}
.btn-cobre{background:var(--cobre);padding:18px 34px;letter-spacing:.12em;gap:10px}
.btn-cobre:hover{background:var(--oliva)}
.link-under{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta);border-bottom:1px solid var(--tinta);padding-bottom:3px}

/* hero */
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));min-height:min(88vh,900px);overflow:hidden}
.hero-text{display:flex;flex-direction:column;justify-content:center;gap:28px;min-width:0;padding:clamp(48px,8vw,120px) var(--pad-x);max-width:720px;width:100%;margin-left:auto}
.hero h1{font-size:clamp(36px,5vw,80px);line-height:1;letter-spacing:-.01em;text-wrap:balance}
.hero h1 em{color:var(--oliva)}
.hero p{margin:0;max-width:440px;font-size:17px;line-height:1.6;font-weight:300;color:var(--tinta-2);text-wrap:pretty}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero img{width:100%;height:100%;min-height:420px;min-width:0;align-self:stretch;object-fit:cover;object-position:50% 30%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 40%);mask-image:linear-gradient(90deg,transparent 0%,#000 40%)}

/* secciones */
section{scroll-margin-top:16px}
.sec{padding:clamp(56px,8vw,120px) var(--pad-x)}
.sec-sm{padding:clamp(56px,8vw,110px) var(--pad-x)}
.b-top{border-top:1px solid var(--linea)}
.b-both{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px}
.head-col{display:flex;flex-direction:column;gap:12px}
.h2{font-size:clamp(36px,4.5vw,64px);line-height:1.05}
.h2-sm{font-size:clamp(36px,4.5vw,60px);line-height:1.05}
.arrows{display:flex;align-items:center;gap:20px}
.arrows .note{font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.arrows .grp{display:flex;gap:8px}
.arrow{width:44px;height:44px;border:1px solid var(--oliva);background:transparent;color:var(--oliva);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.arrow:hover{background:var(--oliva);color:var(--marfil)}

/* carruseles */
.track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -20px;padding:0 20px}
.track::-webkit-scrollbar{display:none}
.dots{display:flex;gap:8px}
.dots button{width:24px;height:2px;border:0;padding:0;cursor:pointer;background:var(--linea)}
.dots button[aria-current="true"]{background:var(--cobre)}

/* skincare (fondo oliva) */
body[data-vista="desktop"] #servicios{background:var(--oliva);color:var(--marfil)}
body[data-vista="desktop"] #servicios .inner{display:flex;flex-direction:column;gap:clamp(36px,5vw,64px)}
body[data-vista="desktop"] #servicios .eyebrow,body[data-vista="desktop"] #servicios .h2 em,body[data-vista="desktop"] #servicios .note{color:var(--dorado)}
body[data-vista="desktop"] #servicios .track{border-top:1px solid rgba(246,242,236,.25)}
body[data-vista="desktop"] #servicios .arrow{border-color:var(--dorado);color:var(--dorado)}
body[data-vista="desktop"] #servicios .arrow:hover{background:var(--dorado);color:var(--oliva)}
body[data-vista="desktop"] #servicios .dots button{background:rgba(246,242,236,.25)}
body[data-vista="desktop"] #servicios .dots button[aria-current="true"]{background:var(--dorado)}
.card{display:flex;flex-direction:column;gap:16px;padding:36px 0 40px;flex:0 0 clamp(260px,30vw,360px);scroll-snap-align:start}
.card img,.card .ph{aspect-ratio:4/3;width:100%;object-fit:cover}
.card h3{font-size:30px;line-height:1.1}
.card h3 em{color:var(--dorado)}
.card p{margin:0;font-size:15px;line-height:1.6;font-weight:300;color:rgba(246,242,236,.85);text-wrap:pretty}
.card .pts{font-size:12px;letter-spacing:.08em;text-transform:uppercase;line-height:1.8;color:var(--dorado);margin-top:auto}
a.card,a.card:hover{color:inherit}
.card .ver{align-self:flex-start;font-size:12px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--dorado);padding-bottom:3px}
a.card:hover .ver{color:var(--dorado)}

/* hair */
body[data-vista="desktop"] #hair{display:flex;flex-direction:column;gap:clamp(36px,5vw,64px)}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:28px}
.hair-card{display:flex;flex-direction:column;gap:16px}
.hair-card img,.hair-card .ph{aspect-ratio:4/5;width:100%;object-fit:cover}
.hair-card h3{font-size:30px;line-height:1.1}
.hair-card h3 em{color:var(--cobre)}
.hair-card p{margin:0;font-size:15px;line-height:1.6;font-weight:300;color:var(--gris)}
.hair-card .pts{font-size:12px;letter-spacing:.08em;text-transform:uppercase;line-height:1.8;color:var(--cobre)}

/* 2 columnas (kbeauty / sobre) */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(32px,5vw,80px);align-items:center}
.two .col{display:flex;flex-direction:column;gap:24px}
.two p{margin:0;font-size:17px;line-height:1.65;font-weight:300;color:var(--gris);max-width:480px;text-wrap:pretty}
.two .foto{aspect-ratio:3/4;max-width:440px;width:100%;object-fit:cover;object-position:50% 30%}
.two .foto.end{justify-self:end}
.bullets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;max-width:480px}
.bullets div{display:flex;gap:12px;align-items:center;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta)}
.bullets i{width:6px;height:6px;border-radius:50%;background:var(--cobre);flex:none}
.nota{margin:0;font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#9A9A90}

/* productos */
body[data-vista="desktop"] #productos .inner{display:flex;flex-direction:column;gap:clamp(32px,4vw,56px)}
body[data-vista="desktop"] #productos .note{color:var(--gris)}
.prod{display:flex;flex-direction:column;gap:14px;flex:0 0 clamp(220px,26vw,300px);scroll-snap-align:start;color:var(--tinta)}
.prod:hover{color:var(--cobre)}
/* fotos de producto: recortes con fondo transparente sobre un paño claro */
.prod img,.prod .ph{aspect-ratio:4/5;width:100%;object-fit:contain;padding:10%;background:#EDE6DB}
.prod s{color:var(--gris-2);margin-right:4px}
.prod-mas{justify-content:center;align-items:center;text-align:center;aspect-ratio:4/5;border:1px solid var(--cobre);
  font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--cobre)}
.prod-mas:hover{background:var(--cobre);color:var(--marfil)}
.prod-mas .tipo{font-family:"Figtree",sans-serif}
.prod-mas:hover .tipo{color:var(--marfil)}
.prod .row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.prod .nom{font-family:'Cormorant Garamond',serif;font-size:20px}
.prod .precio{font-size:13px;color:var(--cobre);white-space:nowrap}
.prod .tipo{font-size:13px;color:var(--gris-2);font-weight:300}

/* faq */
body[data-vista="desktop"] #faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(32px,5vw,80px);align-items:start}
body[data-vista="desktop"] #faq .intro{display:flex;flex-direction:column;gap:16px}
body[data-vista="desktop"] #faq .intro p{margin:0;font-size:16px;line-height:1.6;font-weight:300;color:var(--gris);max-width:380px}
.acc{display:flex;flex-direction:column;border-top:1px solid var(--dorado)}
.acc-item{display:flex;flex-direction:column;border-bottom:1px solid var(--dorado)}
.acc-btn{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;padding:24px 0;background:transparent;border:0;cursor:pointer;text-align:left;color:var(--tinta);font:inherit;width:100%}
.acc-num{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;color:var(--cobre);min-width:28px}
.acc-q{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:26px;line-height:1.15}
.acc-plus{width:36px;height:36px;border:1px solid var(--oliva);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;color:var(--oliva);transition:transform .3s}
.acc-btn[aria-expanded="true"] .acc-plus{transform:rotate(45deg)}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.acc-item.open .acc-body{grid-template-rows:1fr}
.acc-body>div{overflow:hidden}
.acc-body p{margin:0;padding:0 48px 26px;font-size:16px;line-height:1.7;font-weight:300;color:var(--gris);text-wrap:pretty;max-width:560px}

/* reservar + footer */
body[data-vista="desktop"] #reservar{padding:clamp(64px,9vw,140px) var(--pad-x);display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px}
body[data-vista="desktop"] #reservar img{width:88px;height:88px;object-fit:contain}
body[data-vista="desktop"] #reservar h2{font-size:clamp(40px,5.5vw,76px);line-height:1;text-wrap:balance;max-width:720px}
body[data-vista="desktop"] #reservar h2 em{color:var(--oliva)}
body[data-vista="desktop"] #reservar p{margin:0;font-size:16px;font-weight:300;color:var(--gris);max-width:440px;line-height:1.6}
body[data-vista="desktop"] footer{border-top:1px solid var(--linea);padding:28px var(--pad-x)}
body[data-vista="desktop"] footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-2)}
body[data-vista="desktop"] footer a{color:var(--gris-2)}