/* ===== MESOMEDIC v3 · editorial ===== */
:root{
  --bone:#ece5da;
  --paper:#f3eee5;
  --espresso:#221e18;
  --ink:#2c2720;
  --sage:#6f7a5a;
  --sage-d:#525b3f;
  --clay:#b3876a;
  --line:rgba(34,30,24,.16);
  --muted:#6f675b;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",system-ui,sans-serif;
  --maxw:1320px;
  --pad:clamp(1.2rem,4vw,4rem);
  --ease:cubic-bezier(.7,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;font-weight:400}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.01em}
em{font-style:italic}
section{position:relative}
::selection{background:var(--sage);color:var(--paper)}

.num{display:block;font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.25em;color:var(--sage);margin-bottom:1rem}
.num__label{font-family:var(--sans);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* line-mask reveal */
.ln{display:block;overflow:hidden}
[data-line]{display:inline-block}
.js [data-line]{transform:translateY(110%);opacity:0}
.js .ln [data-line]{opacity:1}

/* ===== PROGRESS RAIL (left vertical) ===== */
.rail{position:fixed;top:0;left:0;width:3px;height:100vh;z-index:60;background:rgba(34,30,24,.07)}
.rail i{display:block;width:100%;height:0;background:var(--sage)}

/* ===== PRELOADER ===== */
.intro{position:fixed;inset:0;z-index:200;background:var(--bone);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem}
.intro.done{transform:translateY(-101%);transition:transform 1s var(--ease)}
.intro__word{font-family:var(--serif);font-size:clamp(2.4rem,8vw,4.5rem);color:var(--espresso);display:flex}
.intro__word i{font-style:normal;opacity:0;transform:translateY(40%)}
.intro__rule{display:block;width:min(280px,60vw);height:1px;background:var(--line);overflow:hidden}
.intro__rule b{display:block;height:100%;width:0;background:var(--sage)}

/* ===== TOP BAR ===== */
.top{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;padding:1.4rem var(--pad);mix-blend-mode:difference;color:#fff}
.top.solid{mix-blend-mode:normal;color:var(--ink);background:rgba(243,238,229,.95);border-bottom:1px solid var(--line);padding-top:1rem;padding-bottom:1rem;transition:padding .3s}
.top__brand{font-family:var(--serif);font-size:1.5rem;letter-spacing:.01em}
.top__brand sup{font-size:.5em;vertical-align:super}
.top__meta{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;opacity:.8}
.top__cta{font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.06em;border:1px solid currentColor;padding:.55rem 1rem;border-radius:100px;transition:background .3s,color .3s}
.top.solid .top__cta:hover{background:var(--sage);border-color:var(--sage);color:var(--paper)}
.top__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.top__burger span{width:24px;height:2px;background:currentColor;transition:.35s var(--ease)}
.top.open .top__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.top.open .top__burger span:nth-child(2){transform:translateY(-0px) rotate(-45deg)}

/* ===== CHAPTER INDEX (right) ===== */
.index{position:fixed;right:clamp(1rem,2vw,2rem);top:50%;transform:translateY(-50%);z-index:70;display:flex;flex-direction:column;gap:.55rem}
.index a{display:flex;align-items:center;gap:.55rem;font-family:var(--sans);font-size:.74rem;letter-spacing:.04em;color:var(--muted);opacity:.55;transition:opacity .3s,color .3s;padding:.1rem 0}
.index a span{font-variant-numeric:tabular-nums;width:1.4em;color:var(--sage);transition:color .3s}
.index a::after{content:"";width:0;height:1px;background:var(--sage);transition:width .35s var(--ease)}
.index a:hover{opacity:1;color:var(--ink)}
.index a.active{opacity:1;color:var(--ink)}
.index a.active::after{width:22px}

/* ===== MOBILE MENU ===== */
.mmenu{position:fixed;inset:0;z-index:75;background:var(--bone);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;opacity:0;visibility:hidden;transition:.4s}
.mmenu.open{opacity:1;visibility:visible}
.mmenu a{font-family:var(--serif);font-size:1.7rem;color:var(--espresso)}

/* ===== 00 · COVER ===== */
.cover{min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding:7rem var(--pad) 2.5rem}
.cover__top{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:1rem}
.cover__tag{font-family:var(--sans);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cover__title{font-size:clamp(3rem,12vw,10.5rem);line-height:.92;letter-spacing:-.02em;margin:auto 0;font-weight:300}
.cover__title em{color:var(--sage)}
.cover__bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.cover__lead{max-width:42ch;font-size:1.05rem;color:var(--muted)}
.cover__scroll{display:flex;align-items:center;gap:.7rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.cover__scroll i{width:42px;height:1px;background:var(--ink);position:relative;overflow:hidden}
.cover__scroll i::after{content:"";position:absolute;inset:0;background:var(--sage);transform:translateX(-100%);animation:sweep 2s var(--ease) infinite}
@keyframes sweep{to{transform:translateX(100%)}}
.cover__curtain{position:relative;height:62vh;margin-top:2rem;overflow:hidden;border-radius:4px}
.cover__img{height:100%}
.js .cover__img{clip-path:inset(100% 0 0 0)}
.cover__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}

/* ===== 01 · FILOSOFÍA ===== */
.philo{display:grid;grid-template-columns:0.28fr 1fr;gap:clamp(1.5rem,4vw,4rem);padding:clamp(5rem,12vw,11rem) var(--pad);max-width:var(--maxw);margin:0 auto;align-items:start}
.philo__side{position:sticky;top:30vh}
.philo__lead{font-family:var(--serif);font-size:clamp(1.8rem,4.4vw,4rem);line-height:1.18;font-weight:300;color:var(--espresso);max-width:20ch}
.philo__lead span{display:block}
.philo__lead em{color:var(--sage)}
.philo__lead mark{background:none;color:var(--ink);position:relative;white-space:nowrap}
.philo__lead mark::after{content:"";position:absolute;left:0;bottom:.08em;width:100%;height:.5em;background:rgba(111,122,90,.28);z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.philo__lead mark.lit::after{transform:scaleX(1)}
.philo__foot{margin-top:2.4rem;max-width:46ch;color:var(--muted);font-size:1.05rem}

/* ===== 02 · WORKS (horizontal) ===== */
.works{height:100svh;overflow:hidden;background:var(--espresso);color:var(--bone)}
.works__track{display:flex;height:100%;will-change:transform}
.panel{flex:0 0 clamp(82vw,86vw,560px);height:100%;display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,5vw,5rem);border-right:1px solid rgba(236,229,218,.12)}
.panel--intro{justify-content:center;gap:1.2rem;flex-basis:min(90vw,640px)}
.panel--intro .num{color:var(--clay)}
.panel__h{font-size:clamp(2.6rem,6vw,5rem);font-weight:300;color:var(--bone)}
.panel__p{max-width:30ch;color:rgba(236,229,218,.7)}
.panel__hint{margin-top:1rem;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--clay)}
.panel__img{height:46%;overflow:hidden;border-radius:3px;margin-bottom:1.6rem}
.panel__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.panel__idx{font-size:.78rem;letter-spacing:.2em;color:var(--clay)}
.panel__body h3{font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:400;color:var(--bone);margin:.5rem 0 .8rem}
.panel__body p{max-width:38ch;color:rgba(236,229,218,.7);font-size:.98rem}

/* ===== 03 · METHOD (sticky stack) ===== */
.method{max-width:var(--maxw);margin:0 auto;padding:clamp(4rem,9vw,7rem) var(--pad) clamp(6rem,12vw,10rem)}
.method__head{margin-bottom:clamp(2rem,5vw,4rem)}
.method__head h2{font-size:clamp(1.9rem,4.4vw,3.4rem);font-weight:300;max-width:18ch}
.stack{display:flex;flex-direction:column;gap:2rem}
.scard{position:sticky;background:var(--bone);border:1px solid var(--line);border-radius:8px;padding:clamp(1.8rem,4vw,3.2rem);display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;box-shadow:0 -10px 40px -30px rgba(34,30,24,.5)}
.scard:nth-child(1){top:14vh}
.scard:nth-child(2){top:17vh}
.scard:nth-child(3){top:20vh}
.scard:nth-child(4){top:23vh}
.scard__n{font-family:var(--serif);font-size:clamp(3rem,8vw,6.5rem);line-height:.8;color:var(--sage);font-weight:300}
.scard h3{font-size:clamp(1.5rem,3vw,2.3rem);font-weight:400;margin-bottom:.5rem}
.scard p{max-width:52ch;color:var(--muted)}

/* ===== 04 · DOCTOR ===== */
.doc{max-width:var(--maxw);margin:0 auto;padding:clamp(3rem,7vw,6rem) var(--pad);display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.doc__media{overflow:hidden;border-radius:6px;aspect-ratio:4/5}
.js .doc__media{clip-path:inset(0 0 100% 0)}
.doc__media img{width:100%;height:100%;object-fit:cover}
.doc__text h2{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:300;margin:.4rem 0 1.4rem}
.doc__text p{color:var(--muted);margin-bottom:1rem;max-width:50ch}
.doc__text strong{color:var(--ink);font-weight:600}
.bars{list-style:none;margin-top:2rem;display:flex;flex-direction:column;gap:1.3rem}
.bars__top{display:flex;justify-content:space-between;font-size:.86rem;margin-bottom:.5rem}
.bars__top span{color:var(--muted);letter-spacing:.02em}
.bars__top b{font-family:var(--serif);font-size:1.2rem;color:var(--ink)}
.bars__track{display:block;height:2px;background:var(--line)}
.bars__track i{display:block;height:100%;width:0;background:var(--sage)}

/* ===== 05 · VOICES (crossfade) ===== */
.voices{background:var(--espresso);color:var(--bone)}
.voices__inner{max-width:980px;margin:0 auto;padding:clamp(5rem,12vw,9rem) var(--pad);text-align:center}
.voices .num{color:var(--clay)}
.quotes{position:relative;min-height:clamp(220px,30vh,340px)}
.quote{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.6rem;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .6s var(--ease);pointer-events:none}
.quote.is-active{opacity:1;transform:none;pointer-events:auto}
.quote p{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.6rem,4vw,3rem);line-height:1.25;max-width:24ch;color:var(--bone)}
.quote cite{font-style:normal;font-family:var(--sans);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--clay)}
.dots{display:flex;gap:.6rem;justify-content:center;margin-top:2.4rem}
.dots button{width:8px;height:8px;border-radius:50%;border:1px solid rgba(236,229,218,.5);background:none;cursor:pointer;transition:.3s;padding:0}
.dots button.on{background:var(--clay);border-color:var(--clay);transform:scale(1.2)}

/* ===== 06 · VISIT ===== */
.visit{max-width:var(--maxw);margin:0 auto;padding:clamp(4rem,9vw,7rem) var(--pad)}
.visit__head{margin-bottom:clamp(2rem,5vw,3.5rem)}
.visit__head h2{font-size:clamp(2.2rem,5.5vw,4.5rem);font-weight:300}
.visit__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem)}
.place{border-top:1px solid var(--line);padding-top:1.6rem}
.place h3{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:400;margin-bottom:.5rem}
.place__addr{color:var(--muted);margin-bottom:1.4rem;max-width:32ch}
.place__tel{display:inline-block;font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.6rem);color:var(--sage);margin-bottom:.8rem;border-bottom:1px solid transparent;transition:border-color .3s}
.place__tel:hover{border-color:var(--sage)}
.place__row{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-bottom:1rem;font-size:.92rem}
.place__row a{color:var(--ink);border-bottom:1px solid var(--line);transition:color .3s,border-color .3s}
.place__row a:hover{color:var(--sage);border-color:var(--sage)}
.place__hr{font-size:.86rem;color:var(--muted);margin-bottom:1.6rem}
.place__map{height:200px;border-radius:6px;overflow:hidden}
.place__map iframe{width:100%;height:100%;border:0;filter:grayscale(.4) sepia(.1) contrast(1.02)}

/* ===== FOOTER ===== */
.end{background:var(--espresso);color:var(--bone);padding:clamp(3rem,8vw,6rem) var(--pad) 2.5rem;text-align:center}
.end__mark{display:inline-block;font-family:var(--serif);font-size:clamp(3.5rem,16vw,13rem);font-weight:300;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(236,229,218,.5);transition:color .5s,-webkit-text-stroke .5s}
.end__mark:hover{color:var(--bone);-webkit-text-stroke:1px var(--bone)}
.end__cols{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;margin-top:2.4rem;font-size:.8rem;letter-spacing:.06em;color:rgba(236,229,218,.6)}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  .index{display:none}
  .philo{grid-template-columns:1fr;gap:1.5rem}
  .philo__side{position:static;display:flex;align-items:baseline;gap:1rem}
  .doc{grid-template-columns:1fr}
  .doc__media{order:-1;aspect-ratio:4/4;max-height:60vh}
  .visit__grid{grid-template-columns:1fr}
}
@media (max-width:768px){
  .top__meta{display:none}
  .top__cta{display:none}
  .top__burger{display:flex}
  .cover{padding-top:6rem}
  .cover__title{font-size:clamp(2.6rem,15vw,5rem)}
  .cover__img{height:44vh}
  /* works -> vertical en móvil */
  .works{height:auto;overflow:visible}
  .works__track{flex-direction:column;transform:none!important}
  .panel{flex-basis:auto;height:auto;min-height:80vh;border-right:0;border-bottom:1px solid rgba(236,229,218,.12)}
  .panel__img{height:38vh}
  /* stack -> estático */
  .scard{position:static;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  .intro{display:none}
  .cover__scroll i::after{animation:none}
  .js [data-line]{transform:none;opacity:1}
  .js .doc__media{clip-path:none}
}