/* Dra Katherin Almonte Skin Lab — sistema web v1 */
:root{--slate:#535E75;--slate-deep:#3F4759;--sage:#92BA93;--sage-deep:#6E9870;--pink:#F8B4C0;--pink-deep:#E990A0;--ink:#231F20;--cream:#F8F4EE;--bone:#F1F2F2;--pearl:#E6E7E8;--graphite:#58595B;--white:#fff;--line:rgba(35,31,32,.10);--maxw:1200px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Mulish',system-ui,sans-serif;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.55;text-wrap:pretty}
img{max-width:100%;display:block}
a{color:var(--slate);text-decoration:none}
a:hover{color:var(--sage-deep)}
button,input,select,textarea{font-family:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.22em;font-size:11px;color:var(--slate);margin:0}
.display{font-weight:200;letter-spacing:-.02em;line-height:1.04;margin:0}
.display em{font-style:italic;font-weight:200;color:var(--sage-deep)}
.lead{color:var(--graphite);font-size:17px;margin:0}
.h2{font-size:clamp(34px,4.6vw,58px)}
.h3{font-size:22px;font-weight:800;letter-spacing:-.01em;margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:999px;padding:15px 26px;font-weight:800;font-size:14px;letter-spacing:.01em;cursor:pointer;min-height:48px;white-space:nowrap;transition:background .2s,color .2s}
.btn-primary{background:var(--slate);color:#fff}
.btn-primary:hover{background:var(--slate-deep);color:#fff}
.btn-ghost{background:transparent;color:var(--slate);border:1.5px solid var(--slate)}
.btn-ghost:hover{background:var(--slate);color:#fff}
.btn-pink{background:var(--pink);color:var(--slate-deep)}
.btn-pink:hover{background:var(--pink-deep);color:var(--slate-deep)}
.btn-white{background:#fff;color:var(--slate)}
.pattern{background-image:url("../assets/patron-slate.svg");background-size:280px;opacity:.06}
/* HEADER */
.site-head{position:sticky;top:0;z-index:50;background:rgba(248,244,238,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head-in{max-width:var(--maxw);margin:0 auto;padding:12px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.iso-m{display:block;background-color:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.iso-sage{--m:url(../assets/isotipo-sage.svg);color:var(--sage-deep)}
.iso-white{--m:url(../assets/isotipo-white.svg);color:#fff}
.brand-desktop{display:flex;align-items:center;gap:14px}
.brand-desktop img{height:40px;width:auto}
.brand-text{display:flex;flex-direction:column;line-height:1;text-align:left}
.brand-text b{font-weight:800;font-size:16px;letter-spacing:.04em;color:var(--sage-deep)}
.brand-text i{font-style:normal;font-weight:300;font-size:13px;letter-spacing:.02em;color:var(--ink);margin-top:4px}
.brand-mobile{height:38px;width:auto;display:none}
.site-nav{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:600;white-space:nowrap}
.site-nav a{color:var(--ink)}
.site-nav a:hover{color:var(--sage-deep)}
.site-nav>.btn{display:none}
.head-cta{display:flex;align-items:center;gap:12px}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:10px;width:46px;height:46px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:20px;height:1.6px;background:var(--ink)}
/* HERO */
.hero{padding:72px 0 84px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(44px,6.4vw,88px);margin-top:20px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-photo{position:relative}
.hero-photo img{border-radius:3px;aspect-ratio:4/5;object-fit:cover;width:100%}
.hero-badge{position:absolute;left:-18px;bottom:26px;background:#fff;border-left:3px solid var(--sage);padding:16px 20px;max-width:250px;box-shadow:0 18px 40px rgba(35,31,32,.10)}
.creds{display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite)}
.creds strong{color:var(--slate)}
/* SECTIONS */
section{scroll-margin-top:86px}
.sec{padding:88px 0}
.sec-white{background:#fff}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{border:1px solid var(--line);border-radius:4px;padding:24px;background:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.card.dark{background:var(--slate);color:#fff;border-color:transparent}
.card.dark .item{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.2)}
.card-top{display:flex;justify-content:space-between;align-items:center}
.card-n{font-size:11px;letter-spacing:.18em;opacity:.55;font-weight:700}
.items{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.item{font-size:14px;color:var(--graphite);border-bottom:1px dashed var(--line);padding-bottom:8px}
.card-link{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.card.dark .card-link{color:var(--pink)}
/* PRECIOS */
.price-row{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.price-cell{padding:24px 20px;border-right:1px solid var(--line)}
.price-cell:last-child{border-right:none}
.price-cell b{display:block;font-size:27px;font-weight:800;letter-spacing:-.01em;margin-top:8px}
.price-cell span{font-size:13px;color:var(--graphite)}
/* DRA */
.dra-grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center}
.dra-grid img{border-radius:3px;aspect-ratio:4/5;object-fit:cover}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.stat{border-top:1px solid var(--ink);padding-top:12px}
.stat b{display:block;font-size:34px;font-weight:200;letter-spacing:-.02em}
/* PASOS */
.step{background:#fff;border:1px solid var(--line);border-radius:4px;padding:28px}
.step .num{font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--sage-deep)}
.step h3{margin:16px 0 10px}
.step p{margin:0;color:var(--graphite);font-size:14.5px}
/* QUOTE */
.quote{background:var(--sage);color:#fff;padding:80px 0;position:relative;overflow:hidden}
.quote .display{color:#fff;font-size:clamp(28px,3.6vw,46px);max-width:900px}
.quote .display em{color:var(--cream)}
/* CONTACTO */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.info-list{display:flex;flex-direction:column;gap:22px;margin-top:26px}
.info-list div span{display:block;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);font-weight:700;margin-bottom:6px}
.map{aspect-ratio:4/3;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--bone)}
.map iframe{width:100%;height:100%;border:0;display:block}
.grid2-loc{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.loc{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.loc .map{aspect-ratio:16/10;border:none;border-radius:0;border-bottom:1px solid var(--line)}
.loc-body{padding:24px}
@media(max-width:820px){.grid2-loc{grid-template-columns:1fr}}
/* FOOTER */
.site-foot{background:var(--slate);color:#fff;padding:64px 0 28px;position:relative;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;position:relative}
.site-foot .eyebrow{color:rgba(255,255,255,.55)}
.foot-grid p,.foot-grid a{color:rgba(255,255,255,.8);font-size:13.5px;line-height:1.7;margin:10px 0 0}
.foot-grid a{display:block}
.foot-grid a:hover{color:#fff}
.foot-bottom{margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.6);position:relative}
.social-row{display:flex !important;gap:14px;align-items:center;margin-top:14px}
.social-row a{display:inline-flex !important;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;border:1px solid rgba(255,255,255,.25);color:#fff;margin:0 !important;transition:background .18s,border-color .18s}
.social-row a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
.social-row svg{width:16px;height:16px}
.info-list .social-row{margin-top:2px}
.info-list .social-row a{border-color:var(--line);color:var(--slate)}
.info-list .social-row a:hover{background:var(--cream);border-color:var(--slate)}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;background:var(--sage-deep);color:#fff;border-radius:999px;padding:14px 20px;font-weight:800;font-size:14px;box-shadow:0 14px 34px rgba(35,31,32,.22)}
.wa-float:hover{background:var(--slate);color:#fff}
/* MOBILE */
@media(max-width:900px){
.wrap,.head-in{padding-left:20px;padding-right:20px}
.brand-desktop{display:none}
.brand-mobile{display:block}
.burger{display:flex}
.site-nav{position:fixed;inset:64px 0 auto;background:var(--cream);flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 24px;border-bottom:1px solid var(--line);display:none}
.site-nav.open{display:flex}
.site-nav a{padding:16px 0;border-bottom:1px solid var(--line);font-size:16px}
.site-nav>.btn{display:inline-flex;margin-top:18px}
.head-cta .btn{display:none}
.hero-grid,.dra-grid,.contact-grid{grid-template-columns:1fr;gap:34px}
.hero{padding:44px 0 56px}
.sec{padding:60px 0}
.grid4,.grid3,.price-row,.stats{grid-template-columns:1fr 1fr}
.price-cell{border-bottom:1px solid var(--line)}
.foot-grid{grid-template-columns:1fr 1fr}
.hero-badge{left:0}
}
@media(max-width:560px){
.grid4,.grid3,.price-row,.foot-grid{grid-template-columns:1fr}
.hero-actions .btn{width:100%}
}