/* ============================================================
   ONLYDERM · estilos compartidos
   ============================================================ */
:root{
  --porcelain: oklch(0.972 0.006 70);
  --cream:     oklch(0.99 0.005 75);
  --sand:      oklch(0.93 0.012 70);
  --blush:     oklch(0.93 0.045 350);
  --blush-2:   oklch(0.88 0.072 350);
  --ink:       oklch(0.27 0.022 332);
  --ink-2:     oklch(0.33 0.024 332);
  --ink-soft:  oklch(0.49 0.017 332);
  --clay:      oklch(0.57 0.228 352);
  --clay-deep: oklch(0.46 0.2 350);
  --grey:      oklch(0.63 0.004 320);
  --line:      oklch(0.88 0.01 345);
  --line-soft: oklch(0.93 0.008 345);
  --shadow:    0 2px 6px oklch(0.35 0.05 350 / .05), 0 30px 70px -34px oklch(0.45 0.12 350 / .34);
  --shadow-sm: 0 1px 3px oklch(0.35 0.05 350 / .06), 0 12px 30px -20px oklch(0.45 0.12 350 / .3);
  --maxw: 1280px;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Hanken Grotesk", -apple-system, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{font-family:var(--sans); color:var(--ink); background:var(--porcelain); line-height:1.6; font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden}
::selection{background:var(--clay); color:var(--cream)}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; line-height:1.02; letter-spacing:-0.015em; text-wrap:balance}
p{text-wrap:pretty}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,56px)}
.eyebrow{font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; font-weight:700; color:var(--clay); display:inline-flex; align-items:center; gap:.7em}
.eyebrow::before{content:""; width:30px; height:1px; background:currentColor; opacity:.55}
section{position:relative}
.sec-pad{padding:clamp(72px,11vw,150px) 0}

/* ---------- NAV ---------- */
.nav-shell{position:fixed; inset:0 0 auto 0; z-index:60; padding:18px clamp(16px,4vw,40px); pointer-events:none; transition:transform .45s var(--ease)}
.nav-shell.hide{transform:translateY(-130%)}
.nav{pointer-events:auto; max-width:var(--maxw); margin-inline:auto; height:66px; padding:0 14px 0 22px; display:flex; align-items:center; justify-content:space-between; gap:24px; background:oklch(0.99 0.005 75 / .72); backdrop-filter:saturate(160%) blur(16px); border:1px solid oklch(1 0 0 / .6); border-radius:100px; box-shadow:var(--shadow-sm); transition:background .4s, border-color .4s}
.nav.on-photo{background:oklch(0.3 0.04 350 / .26); border-color:oklch(1 0 0 / .22)}
.nav.on-photo .nav-links a,.nav.on-photo .brand .o,.nav.on-photo .menu-btn{color:oklch(0.99 0.01 70)}
.nav.on-photo .brand .d{color:oklch(0.9 0.09 351)}
.brand{display:flex; align-items:center; gap:10px; font-size:1.34rem}
.brand .mono{width:30px; height:30px; flex:none}
.brand .wm{display:inline-flex; align-items:baseline}
.brand .wm .o{font-family:var(--serif); font-weight:400; color:var(--grey); transition:color .4s}
.brand .wm .d{font-family:var(--serif); font-style:italic; font-weight:500; color:var(--clay); transition:color .4s}
.nav-links{display:flex; gap:28px; align-items:center; font-size:.9rem; font-weight:500; color:var(--ink-soft)}
.nav-links a{position:relative; transition:color .25s}
.nav-links a[aria-current]{color:var(--clay)}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-5px; height:1.5px; width:0; background:currentColor; transition:width .3s var(--ease); opacity:.7}
.nav-links a:hover::after,.nav-links a[aria-current]::after{width:100%}
.nav-right{display:flex; align-items:center; gap:12px}
.btn{display:inline-flex; align-items:center; gap:.55em; font-family:var(--sans); font-weight:600; font-size:.9rem; padding:.78em 1.4em; border-radius:100px; cursor:pointer; border:1px solid transparent; transition:transform .25s var(--ease), box-shadow .3s, background .3s, color .25s; white-space:nowrap}
.btn-primary{background:var(--clay); color:var(--cream); box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--clay-deep); transform:translateY(-2px)}
.btn-ghost{background:transparent; color:inherit; border-color:currentColor; opacity:.9}
.btn-ghost:hover{opacity:1; transform:translateY(-2px)}
.menu-btn{display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--ink)}

/* ---------- MOBILE MENU OVERLAY ---------- */
.mobile-menu{position:fixed; inset:0; z-index:90; background:oklch(0.24 0.022 332); display:flex; flex-direction:column; justify-content:center; padding:40px clamp(28px,8vw,60px); opacity:0; visibility:hidden; transform:translateY(-12px); transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s}
body.menu-open .dermy-fab,body.menu-open .dermy-panel{opacity:0 !important; visibility:hidden !important; pointer-events:none}
.mobile-menu.open{opacity:1; visibility:visible; transform:none}
.mobile-menu a{font-family:var(--serif); font-size:clamp(2rem,9vw,3rem); color:var(--cream); padding:.2em 0; border-bottom:1px solid oklch(1 0 0 / .12); display:flex; justify-content:space-between; align-items:center; transition:color .25s, padding-left .25s}
.mobile-menu a:hover,.mobile-menu a[aria-current]{color:oklch(0.85 0.1 351); padding-left:10px}
.mobile-menu .mm-close{position:absolute; top:26px; right:24px; background:none; border:none; color:var(--cream); cursor:pointer; padding:8px}
.mobile-menu .mm-cta{margin-top:32px; align-self:flex-start}

/* ---------- HERO (home) ---------- */
.hero{position:relative; height:100svh; min-height:620px; overflow:hidden; background:var(--ink)}
.hero-img{position:absolute; inset:0; width:100%; height:115%; object-fit:cover; will-change:transform}
.hero-img.ph{background:linear-gradient(160deg, oklch(0.84 0.06 350), oklch(0.6 0.16 351) 60%, oklch(0.45 0.18 350))}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, oklch(0.2 0.04 350 / .32) 0%, transparent 26%, transparent 52%, oklch(0.2 0.04 350 / .55) 100%)}
.hero-word{position:absolute; left:0; right:0; bottom:clamp(-10px,-1vw,0px); z-index:3; text-align:center; pointer-events:none}
.hero-word h1{font-size:clamp(5rem,23vw,21rem); color:var(--cream); font-weight:300; letter-spacing:-0.03em; line-height:.82; text-shadow:0 10px 60px oklch(0.2 0.05 350 / .35)}
.hero-word h1 .d{font-style:italic; font-weight:400}
.hero-top{position:absolute; left:0; right:0; bottom:38%; z-index:3; text-align:center; color:var(--cream); padding-inline:20px}
.hero-top .eyebrow{color:oklch(0.96 0.04 351); justify-content:center}
.hero-top p{font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,2.6vw,2rem); margin-top:.6rem; text-shadow:0 4px 24px oklch(0.2 0.05 350 / .4); max-width:18ch; margin-inline:auto; line-height:1.2}
.hero-scroll{position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:4; display:flex; flex-direction:column; align-items:center; gap:8px}
.hero-scroll .line{width:1px; height:42px; background:oklch(0.98 0.02 70 / .7); position:relative; overflow:hidden}
.hero-scroll .line::after{content:""; position:absolute; inset:0; background:var(--clay); animation:drop 2.2s var(--ease) infinite}
@keyframes drop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- PAGE HERO (internal) ---------- */
.page-hero{padding:clamp(120px,16vw,180px) 0 clamp(48px,6vw,80px); position:relative; overflow:hidden; background:radial-gradient(120% 100% at 85% -20%, var(--blush) 0%, var(--porcelain) 55%)}
.page-hero h1{font-size:clamp(2.6rem,7vw,5rem); margin-top:1rem}
.page-hero h1 em{font-style:italic; color:var(--clay)}
.page-hero p{color:var(--ink-soft); font-size:1.1rem; max-width:46ch; margin-top:1.3rem}
.page-hero .crumb{font-size:.8rem; color:var(--ink-soft); letter-spacing:.08em}
.page-hero .crumb a:hover{color:var(--clay)}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s}
.img-mask{overflow:hidden; border-radius:18px}
.img-mask img,.img-mask .ph{transform:scale(1.12); transition:transform 1.3s var(--ease)}
.img-mask.in img,.img-mask.in .ph{transform:scale(1)}
.ph{background:linear-gradient(150deg, var(--blush), var(--blush-2)); width:100%; height:100%; display:grid; place-items:center; color:oklch(0.5 0.1 350 / .5)}
@media(prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important} .reveal{opacity:1; transform:none}}

/* ---------- PHILOSOPHY ---------- */
.philo{background:var(--porcelain)}
.philo-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,6vw,90px); align-items:center}
.philo h2{font-size:clamp(2.2rem,5vw,4rem); margin:1.4rem 0 0}
.philo h2 em{font-style:italic; color:var(--clay)}
.philo .body{margin-top:1.8rem; max-width:42ch; color:var(--ink-soft); font-size:1.06rem; display:flex; flex-direction:column; gap:1rem}
.philo .btn-primary{margin-top:2rem}
.philo-visual{position:relative}
.philo-visual .img-mask{aspect-ratio:4/5; box-shadow:var(--shadow)}
.philo-visual img{width:100%; height:100%; object-fit:cover}
.philo-badge{position:absolute; left:-28px; bottom:30px; background:var(--cream); border-radius:18px; padding:18px 22px; box-shadow:var(--shadow); display:flex; gap:13px; align-items:center; max-width:230px}
.philo-badge .ic{width:40px;height:40px;border-radius:50%;background:var(--blush);color:var(--clay-deep);display:grid;place-items:center;flex:none}
.philo-badge b{font-family:var(--serif); font-size:1.05rem; display:block; line-height:1.1}
.philo-badge span{font-size:.78rem; color:var(--ink-soft)}

/* ---------- CARE ---------- */
.care{background:var(--cream); border-block:1px solid var(--line-soft)}
.care-grid{display:grid; grid-template-columns:1fr 1fr 1.05fr; gap:clamp(18px,2.4vw,28px); align-items:center}
.care-grid .img-mask{aspect-ratio:3/4}
.care-grid .img-mask img{width:100%;height:100%;object-fit:cover}
.care-grid .img-mask.tall{transform:translateY(28px)}
.care-txt h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.care-txt p{color:var(--ink-soft); margin-top:1.1rem; font-size:1.02rem}
.care-txt .mini{margin-top:1.6rem; border-radius:14px; overflow:hidden; aspect-ratio:16/10}
.care-txt .mini img{width:100%;height:100%;object-fit:cover}

/* ---------- KINETIC BAND ---------- */
.bigband{padding:clamp(40px,6vw,82px) 0; overflow:hidden; position:relative; background:var(--porcelain); border-block:1px solid var(--line-soft)}
.bigband-row{display:flex; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent); mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent)}
.bigband-track{display:flex; align-items:center; white-space:nowrap; width:max-content; animation:bandscroll 32s linear infinite; font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(2.4rem,6.4vw,5rem); line-height:1; color:var(--clay)}
.bigband:hover .bigband-track{animation-play-state:paused}
.bigband-track span{padding:0 .28em}
.bigband-track i{font-style:normal; color:var(--blush-2); transform:translateY(-.08em)}
@keyframes bandscroll{to{transform:translateX(-50%)}}

/* ---------- TRATAMIENTOS ---------- */
.serv-head{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:clamp(34px,5vw,54px)}
.serv-head h2{font-size:clamp(2.1rem,4.6vw,3.4rem); max-width:14ch}
.serv-head p{color:var(--ink-soft); max-width:34ch}
.serv-hint{color:var(--ink-soft); font-size:.92rem; margin:-18px 0 26px; display:flex; align-items:center; gap:8px}
.serv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start}
.serv{position:relative; background:var(--cream); border:1px solid var(--line-soft); border-radius:20px; padding:30px 28px; transition:transform .4s var(--ease), box-shadow .4s, border-color .4s; cursor:pointer}
.serv:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent}
.serv.open{box-shadow:var(--shadow); border-color:transparent; transform:none}
.serv .top{display:flex; align-items:flex-start; justify-content:space-between; gap:14px}
.serv .num{font-family:var(--serif); font-size:.85rem; color:var(--clay)}
.serv .toggle{width:30px; height:30px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--clay); flex:none; transition:transform .45s var(--ease), background .3s, color .3s, border-color .3s}
.serv:hover .toggle{border-color:var(--clay)}
.serv.open .toggle{transform:rotate(135deg); background:var(--clay); color:var(--cream); border-color:var(--clay)}
.serv .ic{width:38px; height:38px; color:var(--clay-deep); margin:14px 0 14px}
.serv h3{font-size:1.42rem; margin-bottom:.55rem}
.serv .lead{color:var(--ink-soft); font-size:.94rem}
.serv ul{list-style:none; margin-top:15px; display:flex; flex-wrap:wrap; gap:7px}
.serv ul li{font-size:.76rem; color:var(--ink-soft); background:var(--blush); padding:.34em .82em; border-radius:100px}
.serv-more{display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .5s var(--ease), opacity .4s, margin-top .5s; margin-top:0}
.serv.open .serv-more{grid-template-rows:1fr; opacity:1; margin-top:18px}
.serv-more .inner{overflow:hidden}
.serv-more .desc{color:var(--ink-soft); font-size:.95rem; line-height:1.6; border-top:1px solid var(--line-soft); padding-top:16px}
.serv-why{margin-top:14px; padding:14px 16px; background:var(--blush); border-radius:13px; font-size:.9rem; color:var(--clay-deep); display:flex; gap:11px; align-items:flex-start; line-height:1.5}
.serv-why svg{width:18px; height:18px; flex:none; margin-top:2px}
.serv-cta{display:inline-flex; align-items:center; gap:.5em; margin-top:15px; font-weight:600; font-size:.9rem; color:var(--clay); transition:gap .25s}
.serv-cta:hover{gap:.85em}

/* ---------- PADECIMIENTOS ---------- */
.conds{background:linear-gradient(180deg,var(--blush) 0%, var(--porcelain) 100%)}
.cond-wrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(34px,5vw,70px); align-items:center}
.cond-wrap h2{font-size:clamp(2rem,4.2vw,3rem); margin-top:1rem}
.chips{display:flex; flex-wrap:wrap; gap:11px}
.chips span{background:var(--cream); border:1px solid var(--line); border-radius:100px; padding:.62em 1.2em; font-size:.92rem; font-weight:500; transition:.3s var(--ease); cursor:default}
.chips span:hover{background:var(--clay); border-color:var(--clay); color:var(--cream); transform:translateY(-3px) rotate(-1.5deg)}

/* ---------- MITOS ---------- */
.myths{background:radial-gradient(130% 90% at 85% -10%, var(--blush) 0%, var(--porcelain) 58%); overflow:hidden}
.myths h2{font-size:clamp(2rem,4.4vw,3.1rem); max-width:20ch}
.myths .sub{color:var(--ink-soft); margin-top:1rem; max-width:48ch}
.myth-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:clamp(34px,4vw,52px); perspective:1400px}
.myth{position:relative; padding:28px 30px 28px 32px; background:var(--cream); border:1px solid var(--line-soft); border-radius:20px; box-shadow:var(--shadow-sm); overflow:hidden; opacity:0; transform:translateY(36px) rotateX(8deg); transition:opacity .7s var(--ease), transform .7s var(--ease), box-shadow .4s}
.myth.in{opacity:1; transform:none}
.myth.in:hover{transform:translateY(-6px) rotate(-.5deg); box-shadow:var(--shadow)}
.myth::after{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; transform:scaleY(0); transform-origin:top; transition:transform .6s var(--ease) .15s}
.myth.in::after{transform:scaleY(1)}
.myth.false::after{background:linear-gradient(var(--clay),var(--clay-deep))} .myth.true::after{background:oklch(0.6 0.13 162)}
.myth .top{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.myth .mark{width:40px; height:40px; border-radius:12px; flex:none; display:grid; place-items:center; font-weight:700; font-size:1.15rem}
.myth .tag{font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase}
.myth.false .mark{background:var(--blush-2); color:var(--clay-deep)} .myth.false .tag{color:var(--clay)}
.myth.true .mark{background:oklch(0.9 0.07 162); color:oklch(0.45 0.12 162)} .myth.true .tag{color:oklch(0.5 0.12 162)}
.myth h4{font-family:var(--serif); font-weight:400; font-size:1.32rem; line-height:1.16; margin-bottom:.5rem}
.myth p{font-size:.95rem; color:var(--ink-soft)}

/* ---------- DOCTORA ---------- */
.dra{background:var(--porcelain); overflow:hidden}
.dra-grid{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(36px,6vw,80px); align-items:center}
.dra-photo{position:relative}
.dra-photo .img-mask{aspect-ratio:3/4; box-shadow:var(--shadow)}
.dra-photo img{width:100%;height:100%;object-fit:cover; object-position:center top}
.dra-copy h2{font-size:clamp(2rem,4vw,2.9rem); margin-top:1rem}
.dra-copy p{color:var(--ink-soft); margin-top:1.2rem; font-size:1.05rem; max-width:46ch}
.dra-creds{display:grid; grid-template-columns:1fr 1fr; gap:16px 26px; margin-top:2rem}
.dra-creds div{display:flex; gap:11px; align-items:flex-start; font-size:.93rem; color:var(--ink)}
.dra-creds .ic{width:20px; height:20px; color:var(--clay); flex:none; margin-top:2px}
.dra-meta{font-size:.82rem; color:var(--ink-soft); margin-top:1.4rem; letter-spacing:.02em}
.dra-sign{font-family:var(--serif); font-style:italic; font-size:1.45rem; color:var(--clay-deep); margin-top:1.4rem}

/* ---------- PROCESO ---------- */
.proceso{background:var(--cream); border-block:1px solid var(--line-soft); overflow:hidden}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,46px); margin-top:clamp(38px,4vw,58px)}
.step{position:relative; padding-top:28px; border-top:2px solid var(--line)}
.step .bar{position:absolute; top:-2px; left:0; height:2px; width:0; background:var(--clay); transition:width 1.1s var(--ease)}
.step.in .bar{width:100%}
.step:nth-child(2) .bar{transition-delay:.2s} .step:nth-child(3) .bar{transition-delay:.4s}
.step .big{font-family:var(--serif); font-size:clamp(3rem,5vw,4.6rem); line-height:.85; color:var(--blush-2); display:block; opacity:0; transform:translateY(20px) scale(.82)}
.step.in .big{animation:numpop .8s var(--ease) forwards}
.step:nth-child(2).in .big{animation-delay:.2s} .step:nth-child(3).in .big{animation-delay:.4s}
@keyframes numpop{0%{opacity:0; transform:translateY(20px) scale(.82); color:var(--blush-2)}55%{color:var(--clay)}100%{opacity:1; transform:none; color:var(--blush-2)}}
.step h3{font-size:1.42rem; margin:.7rem 0 .5rem}
.step p{color:var(--ink-soft); font-size:.97rem}

/* ---------- TESTIMONIO ---------- */
.testi-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(34px,5vw,70px); align-items:center}
.testi .img-mask{aspect-ratio:4/5; box-shadow:var(--shadow)}
.testi img{width:100%;height:100%;object-fit:cover}
.testi .stars{color:var(--clay); letter-spacing:.22em; margin-bottom:1.3rem}
.testi blockquote{font-family:var(--serif); font-size:clamp(1.6rem,3.4vw,2.5rem); line-height:1.24; font-style:italic}
.testi cite{display:block; margin-top:1.6rem; font-style:normal; font-weight:600; font-size:.95rem}
.testi cite span{display:block; color:var(--ink-soft); font-weight:400; font-size:.84rem; margin-top:2px}

/* ---------- FAQ ---------- */
.faq{background:var(--porcelain)}
.faq-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,5vw,64px); align-items:start}
.faq-grid h2{font-size:clamp(2rem,4.2vw,3rem); margin-top:1rem}
details{border-bottom:1px solid var(--line); padding:4px 0}
summary{list-style:none; cursor:pointer; padding:20px 0; display:flex; justify-content:space-between; gap:20px; align-items:center; font-weight:600; font-size:1.06rem; transition:color .25s}
summary:hover{color:var(--clay)}
summary::-webkit-details-marker{display:none}
summary .pm{width:22px; height:22px; flex:none; transition:transform .35s var(--ease); color:var(--clay)}
details[open] summary .pm{transform:rotate(135deg)}
details p{padding:0 0 22px; color:var(--ink-soft); font-size:.97rem; max-width:60ch}

/* ---------- CTA ---------- */
.cta-sec{padding:clamp(40px,6vw,80px) 0}
.cta{position:relative; overflow:hidden; border-radius:32px; background:var(--ink); color:var(--cream)}
.cta-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.42; will-change:transform}
.cta-bg.ph{opacity:1; background:linear-gradient(150deg, var(--clay), var(--clay-deep))}
.cta::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg, oklch(0.4 0.2 350 / .78), oklch(0.28 0.05 345 / .62))}
.cta-in{position:relative; z-index:2; padding:clamp(52px,8vw,104px) clamp(28px,5vw,72px); text-align:center}
.cta h2{font-size:clamp(2.3rem,5.2vw,4rem); color:var(--cream)}
.cta h2 em{font-style:italic}
.cta p{margin:1.3rem auto 0; max-width:46ch; color:oklch(0.97 0.02 350 / .92); font-size:1.1rem}
.cta-branches{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:760px; margin:2.8rem auto 0; text-align:left}
.cta-branch{background:oklch(1 0 0 / .1); border:1px solid oklch(1 0 0 / .22); border-radius:18px; padding:22px 24px; backdrop-filter:blur(4px); transition:transform .3s var(--ease), background .3s}
.cta-branch:hover{transform:translateY(-3px); background:oklch(1 0 0 / .16)}
.cta-branch .eyebrow{color:oklch(0.95 0.04 351); font-size:.64rem; margin-bottom:9px}
.cta-branch h4{font-family:var(--serif); font-size:1.32rem; color:var(--cream); margin-bottom:8px}
.cta-branch p{margin:0; color:oklch(0.97 0.02 350 / .9); font-size:.92rem; line-height:1.5}
.cta-branch a{display:inline-flex; align-items:center; gap:7px; margin-top:13px; font-weight:600; color:var(--cream); font-size:.95rem; transition:gap .25s}
.cta-branch a:hover{gap:11px; color:oklch(0.93 0.06 351)}
.cta-horario{margin-top:2rem; color:oklch(0.97 0.02 350 / .8); font-size:.86rem}
.placeholder{color:oklch(0.92 0.06 351); font-weight:600}
@media(max-width:620px){.cta-branches{grid-template-columns:1fr}}

/* ---------- FOOTER (pro) ---------- */
.foot{background:var(--ink); color:oklch(0.86 0.012 340); padding:clamp(60px,7vw,96px) 0 30px; position:relative; overflow:hidden}
.foot-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,52px); padding-bottom:clamp(36px,5vw,56px); border-bottom:1px solid oklch(1 0 0 / .1)}
.foot-brand .brand{font-size:1.6rem; margin-bottom:16px}
.foot-brand .brand .o{color:oklch(0.78 0.01 340)} .foot-brand .brand .d{color:oklch(0.85 0.1 351)}
.foot-brand p{max-width:32ch; font-size:.95rem; color:oklch(0.78 0.012 340)}
.foot-brand .btn{margin-top:22px}
.foot-col h5{font-family:var(--sans); font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:oklch(0.85 0.1 351); margin-bottom:18px}
.foot-col ul{list-style:none; display:flex; flex-direction:column; gap:12px; font-size:.94rem}
.foot-col ul a{color:oklch(0.84 0.012 340); transition:color .25s, padding-left .25s}
.foot-col ul a:hover{color:var(--cream); padding-left:5px}
.foot-branch{font-size:.92rem; line-height:1.55; color:oklch(0.8 0.012 340); margin-bottom:16px}
.foot-branch b{color:var(--cream); font-weight:600; display:block; font-family:var(--serif); font-size:1.05rem; margin-bottom:3px}
.foot-branch a{color:oklch(0.85 0.1 351)} .foot-branch a:hover{color:var(--cream)}
.foot-social{display:flex; gap:10px; margin-top:6px}
.foot-social a{width:38px; height:38px; border-radius:50%; border:1px solid oklch(1 0 0 / .18); display:grid; place-items:center; color:oklch(0.84 0.012 340); transition:.3s var(--ease)}
.foot-social a:hover{background:var(--clay); border-color:var(--clay); color:var(--cream); transform:translateY(-3px)}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; margin-top:26px; font-size:.8rem; color:oklch(0.66 0.012 340)}
.foot-bottom a:hover{color:var(--cream)}
.foot-watermark{position:absolute; right:-2%; bottom:-12%; font-family:var(--serif); font-style:italic; font-size:clamp(8rem,22vw,20rem); line-height:.7; color:oklch(1 0 0 / .03); pointer-events:none; user-select:none; z-index:0}
.foot .wrap{position:relative; z-index:1}

/* ---------- DERMY (asistente) ---------- */
.dermy-fab{position:fixed; right:22px; bottom:22px; z-index:80; display:flex; align-items:center; gap:10px; padding:10px 18px 10px 12px; border:none; cursor:pointer; border-radius:100px; background:linear-gradient(135deg, var(--clay), var(--clay-deep)); color:var(--cream); box-shadow:0 12px 34px -10px oklch(0.5 0.2 351 / .6); font-family:var(--sans); font-weight:600; font-size:.92rem; transition:transform .3s var(--ease), box-shadow .3s; animation:fabin .5s var(--ease) both .4s}
@keyframes fabin{from{opacity:0; transform:translateY(20px) scale(.9)}to{opacity:1; transform:none}}
.dermy-fab:hover{transform:translateY(-3px) scale(1.03); box-shadow:0 18px 40px -10px oklch(0.5 0.2 351 / .7)}
.dermy-fab .ava{width:36px; height:36px; border-radius:50%; background:oklch(1 0 0 / .2); display:grid; place-items:center; flex:none}
.dermy-fab .ava svg{width:22px; height:22px}
.dermy-fab .pulse{position:absolute; top:9px; left:14px; width:11px; height:11px; border-radius:50%; background:oklch(0.85 0.15 150); border:2px solid var(--clay-deep)}
.dermy-fab.hidden{opacity:0; visibility:hidden; transform:scale(.7)}
.dermy-panel{position:fixed; right:22px; bottom:22px; z-index:81; width:min(380px, calc(100vw - 32px)); height:min(560px, calc(100vh - 44px)); background:var(--cream); border-radius:24px; box-shadow:0 30px 80px -20px oklch(0.4 0.12 350 / .5); display:flex; flex-direction:column; overflow:hidden; opacity:0; visibility:hidden; transform:translateY(24px) scale(.96); transform-origin:bottom right; transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s; border:1px solid var(--line-soft)}
.dermy-panel.open{opacity:1; visibility:visible; transform:none}
.dermy-head{background:linear-gradient(135deg, var(--clay), var(--clay-deep)); color:var(--cream); padding:18px 20px; display:flex; align-items:center; gap:13px}
.dermy-head .ava{width:44px; height:44px; border-radius:50%; background:oklch(1 0 0 / .2); display:grid; place-items:center; flex:none; position:relative}
.dermy-head .ava svg{width:26px; height:26px}
.dermy-head .on{position:absolute; right:0; bottom:1px; width:11px; height:11px; border-radius:50%; background:oklch(0.85 0.15 150); border:2px solid var(--clay-deep)}
.dermy-head b{font-family:var(--serif); font-size:1.2rem; display:block; line-height:1.1}
.dermy-head span{font-size:.76rem; opacity:.85}
.dermy-head .x{margin-left:auto; background:oklch(1 0 0 / .15); border:none; color:var(--cream); width:32px; height:32px; border-radius:50%; cursor:pointer; display:grid; place-items:center; transition:background .25s}
.dermy-head .x:hover{background:oklch(1 0 0 / .28)}
.dermy-body{flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:12px; background:var(--porcelain); scroll-behavior:smooth}
.dermy-msg{max-width:84%; padding:12px 15px; border-radius:16px; font-size:.92rem; line-height:1.5; animation:msgin .35s var(--ease) both}
@keyframes msgin{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.dermy-msg.bot{background:var(--cream); border:1px solid var(--line-soft); border-bottom-left-radius:5px; align-self:flex-start; color:var(--ink)}
.dermy-msg.user{background:var(--clay); color:var(--cream); border-bottom-right-radius:5px; align-self:flex-end}
.dermy-msg a{color:var(--clay); font-weight:600; text-decoration:underline}
.dermy-msg.user a{color:var(--cream)}
.dermy-chips{display:flex; flex-wrap:wrap; gap:8px; padding:0 20px 12px; background:var(--porcelain)}
.dermy-chip{background:var(--cream); border:1px solid var(--line); color:var(--clay-deep); font-family:var(--sans); font-weight:500; font-size:.82rem; padding:.5em 1em; border-radius:100px; cursor:pointer; transition:.25s var(--ease)}
.dermy-chip:hover{background:var(--clay); border-color:var(--clay); color:var(--cream); transform:translateY(-2px)}
.dermy-input{display:flex; gap:8px; padding:14px; border-top:1px solid var(--line-soft); background:var(--cream)}
.dermy-input input{flex:1; border:1px solid var(--line); border-radius:100px; padding:.7em 1.1em; font-family:var(--sans); font-size:.9rem; color:var(--ink); outline:none; transition:border-color .25s}
.dermy-input input:focus{border-color:var(--clay)}
.dermy-input button{width:42px; height:42px; border-radius:50%; border:none; background:var(--clay); color:var(--cream); cursor:pointer; display:grid; place-items:center; flex:none; transition:background .25s, transform .25s}
.dermy-input button:hover{background:var(--clay-deep); transform:scale(1.05)}
.dermy-typing{display:flex; gap:4px; padding:14px 16px; align-self:flex-start}
.dermy-typing span{width:7px; height:7px; border-radius:50%; background:var(--clay); opacity:.5; animation:typing 1.2s infinite}
.dermy-typing span:nth-child(2){animation-delay:.2s} .dermy-typing span:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{opacity:.3; transform:translateY(0)}30%{opacity:1; transform:translateY(-4px)}}

/* ---------- RESPONSIVE ---------- */
@media(max-width:960px){
  .nav-links{display:none}
  .menu-btn{display:block}
  .philo-grid,.cond-wrap,.dra-grid,.faq-grid,.testi-grid{grid-template-columns:1fr; gap:36px}
  .care-grid{grid-template-columns:1fr 1fr}
  .care-grid .care-txt{grid-column:1 / -1}
  .care-grid .img-mask.tall{transform:none}
  .serv-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .myth-grid{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .philo-badge{left:0}
}
@media(max-width:600px){
  .serv-grid,.care-grid,.foot-top,.dra-creds{grid-template-columns:1fr}
  .hero-top{bottom:46%}
  .testi-grid{gap:24px}
  .dermy-fab span.lbl{display:none}
  .dermy-fab{padding:12px}
  .nav-right .btn-primary{display:none}
  .nav{padding:0 8px 0 18px}
}