/* ============================================================
   LAS MÁS LINDAS — Centro de estética · Montevideo
   Sistema de diseño
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Paleta — confianza + sostenibilidad */
  --ink:        #0F1D18;   /* verde casi negro */
  --forest:     #16342B;   /* verde bosque profundo */
  --moss:       #2E5347;   /* verde medio */
  --sage:       #7D9C89;   /* salvia */
  --sage-soft:  #C2D2C5;   /* salvia claro */
  --bone:       #F7F4ED;   /* hueso / crema */
  --sand:       #E7DDCE;   /* arena */
  --sand-deep:  #D6C7B2;
  --bronze:     #B08D57;   /* bronce (acento) */
  --bronze-lt:  #D9BC8C;
  --white:      #FFFDF9;

  --bg:         var(--bone);
  --fg:         var(--ink);
  --muted:      #5C6F66;
  --line:       rgba(15,29,24,.12);
  --line-soft:  rgba(15,29,24,.07);

  /* Tipografía */
  --serif: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-hero:   clamp(3.4rem, min(12.5vw, 15.5vh), 12rem);
  --fs-h2:     clamp(2.4rem, 6.4vw, 6rem);
  --fs-h2-sm:  clamp(2rem, 4.4vw, 3.8rem);
  --fs-h3:     clamp(1.35rem, 2.2vw, 2rem);
  --fs-big:    clamp(1.5rem, 3.4vw, 3.1rem);
  --fs-lead:   clamp(1rem, 1.25vw, 1.18rem);
  --fs-body:   clamp(.95rem, 1.05vw, 1.05rem);
  --fs-small:  .82rem;
  --fs-micro:  .69rem;

  /* Layout */
  --pad:       clamp(1.25rem, 5vw, 5.5rem);
  --maxw:      1560px;
  --gap:       clamp(1.5rem, 3vw, 3rem);
  --sec-y:     clamp(6rem, 14vh, 12rem);

  /* Movimiento */
  --e-out:     cubic-bezier(.16,1,.3,1);
  --e-inout:   cubic-bezier(.76,0,.24,1);
  --t-fast:    .35s var(--e-out);
  --t-med:     .7s var(--e-out);
  --t-slow:    1.2s var(--e-out);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.is-locked, body.is-locked{ overflow:hidden; }
body{
  font-family:var(--sans);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.65;
  color:var(--fg);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }
::selection{ background:var(--forest); color:var(--bone); }

:focus-visible{ outline:2px solid var(--bronze); outline-offset:4px; border-radius:2px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- 3. ATMÓSFERA ---------- */
.grain{
  position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 5s steps(5) infinite;
}
@keyframes grainShift{
  0%{background-position:0 0}      20%{background-position:-24px 18px}
  40%{background-position:18px -24px} 60%{background-position:-12px -18px}
  80%{background-position:24px 12px}  100%{background-position:0 0}
}

.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:8000;
  background:transparent; pointer-events:none;
}
.scroll-progress i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--moss),var(--bronze));
  transform-origin:left;
}

/* Cursor personalizado */
.cursor{ position:fixed; top:0; left:0; z-index:9500; pointer-events:none; mix-blend-mode:difference; }
.cursor__dot{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:var(--sand); transform:translate(-50%,-50%);
}
.cursor__ring{
  position:absolute; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(231,221,206,.55);
  transform:translate(-50%,-50%) scale(1);
  transition:width .4s var(--e-out), height .4s var(--e-out), background .4s var(--e-out), border-color .4s var(--e-out);
  display:grid; place-items:center;
}
.cursor__label{
  font-family:var(--sans); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); opacity:0; transition:opacity .3s; white-space:nowrap; font-weight:600;
}
.cursor.is-hover .cursor__ring{ width:66px; height:66px; background:rgba(231,221,206,.16); }
.cursor.is-view .cursor__ring{ width:96px; height:96px; background:var(--sand); border-color:transparent; }
.cursor.is-view .cursor__label{ opacity:1; }
.cursor.is-view .cursor__dot{ opacity:0; }
.cursor.is-down .cursor__ring{ transform:translate(-50%,-50%) scale(.82); }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* ---------- 4. PRELOADER ---------- */
.loader{
  position:fixed; inset:0; z-index:9800; background:var(--forest);
  display:grid; place-items:center; color:var(--bone);
}
.loader__inner{ width:min(680px,84vw); text-align:center; }
.loader__mark{
  font-family:var(--serif); font-size:clamp(2rem,6vw,4.4rem); line-height:1.05;
  font-weight:300; letter-spacing:-.02em; display:flex; gap:.28em; justify-content:center; flex-wrap:wrap;
  margin-bottom:2.4rem;
}
.loader__word{ display:inline-block; opacity:0; transform:translateY(115%); animation:loadWord .95s var(--e-out) forwards; }
.loader__word:nth-child(2){ animation-delay:.1s; font-style:italic; color:var(--bronze-lt); }
.loader__word:nth-child(3){ animation-delay:.2s; }
@keyframes loadWord{ to{ opacity:1; transform:translateY(0); } }
.loader__bar{ height:1px; background:rgba(247,244,237,.2); overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:0%; background:var(--bronze-lt); transition:width .25s linear; }
.loader__count{
  margin-top:1rem; font-size:var(--fs-micro); letter-spacing:.24em; text-transform:uppercase;
  display:flex; justify-content:flex-end; gap:1px; opacity:.6;
}
.loader__curtain{ position:absolute; inset:0; background:var(--bone); transform:scaleY(0); transform-origin:bottom; }
.loader.is-done .loader__inner{ opacity:0; transform:translateY(-24px); transition:opacity .5s var(--e-out), transform .7s var(--e-out); }
.loader.is-done .loader__curtain{ transform:scaleY(1); transition:transform 1s var(--e-inout) .2s; }
.loader.is-gone{ display:none; }

/* ---------- 5. TIPOGRAFÍA COMPARTIDA ---------- */
.eyebrow,.section-tag{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:var(--fs-micro); letter-spacing:.26em; text-transform:uppercase;
  font-weight:600; color:var(--muted);
}
.eyebrow i,.section-tag i{
  width:26px; height:1px; background:var(--bronze); display:inline-block; flex:none;
  transform:scaleX(0); transform-origin:left; transition:transform .8s var(--e-out) .2s;
}
[data-reveal].is-in i{ transform:scaleX(1); }

.section-title{
  font-family:var(--serif); font-weight:300;
  font-size:var(--fs-h2); line-height:.98; letter-spacing:-.035em;
  font-variation-settings:"opsz" 100, "SOFT" 0;
  margin:1.4rem 0 0;
}
.section-title--sm{ font-size:var(--fs-h2-sm); }
.section-title .line{ display:block; overflow:hidden; padding-bottom:.06em; }
.section-title .w{ display:inline-block; }
.w--italic{ font-style:italic; color:var(--moss); }

.section-desc{ max-width:min(52ch,100%); margin-top:1.6rem; color:var(--muted); font-size:var(--fs-lead); }
.section-desc em{ color:var(--fg); font-style:italic; }

.section-head{ padding-block:0 clamp(2.5rem,6vw,5rem); }
.section-head--split{ display:grid; grid-template-columns:1.2fr .8fr; gap:var(--gap); align-items:end; }
.section-head--center{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.section-head--center .section-title .line{ text-align:center; }

/* ---------- 6. BOTONES ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1.05rem 2rem; border-radius:100px; overflow:hidden;
  font-size:var(--fs-small); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  transition:color .5s var(--e-out), border-color .5s var(--e-out);
  will-change:transform;
}
.btn span,.btn svg{ position:relative; z-index:2; }
.btn svg{ width:16px; height:16px; transition:transform .5s var(--e-out); }
.btn:hover svg{ transform:translateX(5px); }
.btn::before{
  content:""; position:absolute; inset:0; z-index:1; border-radius:inherit;
  transform:translateY(101%); transition:transform .6s var(--e-inout);
}
.btn:hover::before{ transform:translateY(0); }

.btn--solid{ background:var(--forest); color:var(--bone); }
.btn--solid::before{ background:var(--bronze); }
.btn--solid:hover{ color:var(--ink); }

.btn--ghost{ border:1px solid var(--line); color:var(--fg); }
.btn--ghost::before{ background:var(--forest); }
.btn--ghost:hover{ color:var(--bone); border-color:var(--forest); }

.btn--pill{ border:1px solid var(--line); padding:.8rem 1.4rem; }
.btn--pill::before{ background:var(--forest); }
.btn--pill:hover{ color:var(--bone); border-color:var(--forest); }

.btn--full{ width:100%; padding-block:1.25rem; }

/* ---------- 7. PLACEHOLDERS DE IMAGEN ---------- */
.ph{ position:relative; overflow:hidden; border-radius:2px; }
.ph__box{
  position:relative; width:100%; height:100%;
  background:
    linear-gradient(135deg, rgba(125,156,137,.20), rgba(214,199,178,.30) 45%, rgba(176,141,87,.16)),
    var(--sand);
  display:grid; place-items:center; overflow:hidden;
  transition:transform 1.2s var(--e-out), filter .8s var(--e-out);
}
.ph__box::before{ /* etiqueta */
  content:attr(data-ph) " · " attr(data-ratio);
  position:absolute; z-index:3; padding:.55rem 1rem; border-radius:100px;
  background:rgba(15,29,24,.55); color:var(--bone); backdrop-filter:blur(6px);
  font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  text-align:center; max-width:88%; line-height:1.5;
}
.ph__box::after{ /* brillo */
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(105deg,transparent 38%,rgba(255,253,249,.42) 50%,transparent 62%);
  transform:translateX(-100%); animation:shimmer 4.5s var(--e-inout) infinite;
}
@keyframes shimmer{ 0%,55%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

/* patrón sutil de fondo */
.ph__box{ background-blend-mode:multiply, normal; }
.ph:hover .ph__box{ transform:scale(1.045); }

/* Imágenes reales: heredan ratio, revelado y zoom del placeholder */
img.ph__box{ object-fit:cover; object-position:center; }
img.ph__box,iframe.ph__box{ display:block; width:100%; height:auto; }
iframe.ph__box{ border:0; filter:grayscale(1) contrast(1.04) opacity(.9); transition:filter .7s var(--e-out); }
.ph--map:hover iframe.ph__box{ filter:grayscale(0) contrast(1) opacity(1); }

/* Caption bajo el mapa */
.ph--map{ overflow:visible; }
.ph--map:hover .ph__box{ transform:none; }
.ph--map figcaption{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.6rem;
  margin-top:.9rem; font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.ph--map figcaption a{ color:var(--bronze); transition:color .35s; }
.ph--map figcaption a:hover{ color:var(--forest); }

/* Ratios */
.ph--tall .ph__box{ aspect-ratio:4/5; }
.ph--avatar{ width:52px; height:52px; border-radius:50%; flex:none; }
.ph--avatar .ph__box{ aspect-ratio:1/1; border-radius:50%; }
.ph--avatar .ph__box::before{ font-size:0; padding:0; background:none; }
.ph--avatar .ph__box::after{ animation-duration:6s; }

/* ---------- 8. NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:7000;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:1.3rem var(--pad);
  transition:background .6s var(--e-out), padding .6s var(--e-out), box-shadow .6s var(--e-out);
  transform:translateY(-110%); opacity:0;
}
body.is-ready .nav{ transform:translateY(0); opacity:1; transition:transform 1s var(--e-out) .1s, opacity .8s var(--e-out) .1s, background .6s var(--e-out), padding .6s var(--e-out); }
.nav.is-stuck{
  background:rgba(247,244,237,.82); backdrop-filter:blur(16px) saturate(1.4);
  padding-block:.85rem; box-shadow:0 1px 0 var(--line-soft);
}
.nav.is-hidden{ transform:translateY(-110%); }

.nav__brand{ display:flex; align-items:center; gap:.85rem; }
.nav__brand-mark{
  width:40px; height:40px; border-radius:50%; flex:none;
  display:grid; place-items:center; background:var(--forest); color:var(--bone);
  font-family:var(--serif); font-size:.72rem; letter-spacing:.04em;
  transition:transform .6s var(--e-out), background .4s;
}
.nav__brand:hover .nav__brand-mark{ transform:rotate(-14deg) scale(1.06); background:var(--bronze); color:var(--ink); }
.nav__brand-name{
  font-family:var(--serif); font-size:1.05rem; line-height:1.1; letter-spacing:-.01em;
  display:flex; flex-direction:column;
}
.nav__brand-name em{
  font-family:var(--sans); font-style:normal; font-size:.58rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:.28rem;
}

.nav__links{ display:flex; gap:2.2rem; margin-left:auto; }
.nav__links a{ position:relative; font-size:var(--fs-small); font-weight:500; padding-block:.3rem; overflow:hidden; }
.nav__links a span{ display:block; transition:transform .5s var(--e-out); }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--e-out);
}
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__actions{ display:flex; align-items:center; gap:1rem; }
.nav__burger{ display:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); place-items:center; gap:5px; flex-direction:column; }
.nav__burger i{ display:block; width:16px; height:1.5px; background:currentColor; transition:transform .45s var(--e-inout), opacity .3s; }
.nav__burger[aria-expanded="true"] i:first-child{ transform:translateY(3.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

/* ---------- 9. MENÚ OVERLAY ---------- */
.menu{ position:fixed; inset:0; z-index:6900; visibility:hidden; }
.menu.is-open{ visibility:visible; }
.menu__bg{
  position:absolute; inset:0; background:var(--forest);
  clip-path:circle(0% at calc(100% - 3.5rem) 3rem);
  transition:clip-path .9s var(--e-inout);
}
.menu.is-open .menu__bg{ clip-path:circle(150% at calc(100% - 3.5rem) 3rem); }
.menu__grid{
  position:relative; height:100%; display:flex; flex-direction:column; justify-content:center; gap:3rem;
  padding:6rem var(--pad) 3rem; color:var(--bone); overflow-y:auto;
}
.menu__nav a{
  display:flex; align-items:baseline; gap:1.2rem; padding-block:.35rem;
  font-family:var(--serif); font-weight:300; font-size:clamp(2.2rem,9vw,5rem); line-height:1.08;
  letter-spacing:-.03em; opacity:0; transform:translateY(40px);
  transition:opacity .7s var(--e-out), transform .8s var(--e-out), color .4s;
}
.menu.is-open .menu__nav a{ opacity:1; transform:translateY(0); }
.menu.is-open .menu__nav a:nth-child(1){ transition-delay:.32s }
.menu.is-open .menu__nav a:nth-child(2){ transition-delay:.39s }
.menu.is-open .menu__nav a:nth-child(3){ transition-delay:.46s }
.menu.is-open .menu__nav a:nth-child(4){ transition-delay:.53s }
.menu.is-open .menu__nav a:nth-child(5){ transition-delay:.60s }
.menu__nav a em{ font-family:var(--sans); font-style:normal; font-size:.6rem; letter-spacing:.2em; opacity:.5; }
.menu__nav a:hover{ color:var(--bronze-lt); font-style:italic; }
.menu__aside{ display:flex; flex-wrap:wrap; gap:2.5rem 4rem; opacity:0; transform:translateY(20px); transition:all .7s var(--e-out) .7s; }
.menu.is-open .menu__aside{ opacity:1; transform:translateY(0); }
.menu__block h4{ font-size:var(--fs-micro); letter-spacing:.22em; text-transform:uppercase; color:var(--sage); margin-bottom:.6rem; font-weight:600; }
.menu__block p{ font-size:var(--fs-small); line-height:1.8; opacity:.9; }
.menu__block a:hover{ color:var(--bronze-lt); }

/* ---------- 10. HERO ---------- */
.hero{ position:relative; min-height:calc(var(--vh,1vh) * 100); min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:clamp(8rem,14vh,11rem) var(--pad) 2rem; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; }
.hero__blob--a{ width:46vw; height:46vw; left:-10vw; top:-8vw; background:radial-gradient(circle,rgba(125,156,137,.55),transparent 68%); animation:float 18s ease-in-out infinite; }
.hero__blob--b{ width:38vw; height:38vw; right:-6vw; bottom:-10vw; background:radial-gradient(circle,rgba(217,188,140,.5),transparent 68%); animation:float 22s ease-in-out infinite reverse; }
@keyframes float{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(4%,6%) scale(1.1)} }

.hero__inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem); align-items:center; }

.hero__title{
  font-family:var(--serif); font-weight:300; font-size:var(--fs-hero);
  line-height:.87; letter-spacing:-.05em; margin:1.6rem 0 2.4rem;
  font-variation-settings:"opsz" 144,"SOFT" 0;
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.05em; }
.hero__title .w{ display:inline-block; }
.hero__title .w--italic{ font-style:italic; color:var(--moss); }

.hero__meta{ display:grid; gap:2rem; max-width:min(46ch,100%); }
.hero__lead{ color:var(--muted); font-size:var(--fs-lead); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* Collage */
.hero__collage{ position:relative; min-height:min(74vh,720px); }
.hero__img{ position:absolute; box-shadow:0 30px 70px -40px rgba(15,29,24,.45); }
.hero__img--main{ width:60%; top:0; right:6%; z-index:2; }
.hero__img--main .ph__box{ aspect-ratio:4/5; }
.hero__img--small{ width:32%; bottom:12%; left:0; z-index:3; }
.hero__img--small .ph__box{ aspect-ratio:1/1; }
.hero__img--wide{ width:44%; bottom:-2%; right:0; z-index:1; }
.hero__img--wide .ph__box{ aspect-ratio:16/10; }

.hero__badge{
  position:absolute; left:34%; top:44%; z-index:4; width:clamp(92px,9vw,124px); aspect-ratio:1;
  display:grid; place-items:center; border-radius:50%;
  background:var(--forest); color:var(--bone);
  box-shadow:0 18px 40px -18px rgba(15,29,24,.6);
}
.hero__badge-rot{ position:absolute; inset:0; animation:spin 22s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.hero__badge svg{ width:100%; height:100%; }
.hero__badge text{ fill:var(--bone); font-family:var(--sans); font-size:15px; letter-spacing:2.2px; font-weight:600; }
.hero__badge-core{ position:relative; font-size:1.1rem; color:var(--bronze-lt); }

.hero__foot{
  position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:clamp(2rem,5vh,4rem) auto 0;
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
}
.scroll-hint{ display:flex; align-items:center; gap:.9rem; font-size:var(--fs-micro); letter-spacing:.24em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.scroll-hint__line{ display:block; width:56px; height:1px; background:var(--line); overflow:hidden; }
.scroll-hint__line i{ display:block; height:100%; width:40%; background:var(--forest); animation:hintRun 2.4s var(--e-inout) infinite; }
@keyframes hintRun{ 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(250%)} }

.hero__rating{ text-align:right; }
.hero__rating .stars{ color:var(--bronze); letter-spacing:.22em; font-size:.85rem; }
.hero__rating p{ font-size:var(--fs-small); color:var(--muted); margin-top:.25rem; }
.hero__rating strong{ color:var(--fg); }

/* ---------- 11. MARQUEE ---------- */
.marquee{
  overflow:hidden; border-block:1px solid var(--line-soft);
  background:var(--forest); color:var(--bone); padding-block:1.15rem;
}
.marquee__track{ display:flex; width:max-content; animation:marquee 34s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__group{ display:flex; align-items:center; gap:2.6rem; padding-right:2.6rem; }
.marquee__group span{ font-family:var(--serif); font-size:clamp(1.1rem,2.4vw,2rem); font-weight:300; letter-spacing:-.02em; white-space:nowrap; }
.marquee__group i{ color:var(--bronze-lt); font-size:.7rem; font-style:normal; }
@keyframes marquee{ to{ transform:translateX(-50%) } }

/* ---------- 12. MANIFIESTO ---------- */
.manifesto{ padding-block:var(--sec-y); }
.manifesto__text{
  font-family:var(--serif); font-weight:300; font-size:var(--fs-big); line-height:1.28;
  letter-spacing:-.025em; margin:2.2rem 0 3.2rem; max-width:min(1100px,100%);
}
.manifesto__text .cw{ transition:color .4s var(--e-out), opacity .4s; color:rgba(15,29,24,.18); }
.manifesto__text .cw.on{ color:var(--fg); }
.manifesto__sign{ display:flex; align-items:center; gap:1rem; }
.manifesto__sign p{ display:flex; flex-direction:column; font-size:var(--fs-small); }
.manifesto__sign strong{ font-family:var(--serif); font-size:1.05rem; font-weight:400; }
.manifesto__sign span{ color:var(--muted); font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; }

/* ---------- 13. SERVICIOS ---------- */
.services{ padding-block:var(--sec-y); background:var(--white); border-block:1px solid var(--line-soft); }
.services__list{ border-top:1px solid var(--line); }

.srv{ border-bottom:1px solid var(--line); position:relative; }
.srv__row{
  display:grid; grid-template-columns:auto 1.1fr 1.4fr auto auto;
  align-items:center; gap:clamp(1rem,3vw,3rem);
  padding-block:clamp(1.6rem,3vw,2.4rem); cursor:pointer; position:relative; z-index:2;
  transition:padding-inline .6s var(--e-out), color .5s var(--e-out);
}
.srv::before{
  content:""; position:absolute; inset:0; z-index:1; background:var(--forest);
  transform:scaleY(0); transform-origin:bottom; transition:transform .65s var(--e-inout);
}
.srv:hover::before{ transform:scaleY(1); transform-origin:top; }
.srv:hover .srv__row{ color:var(--bone); padding-inline:clamp(1rem,2vw,2rem); }
.srv:hover .srv__num{ color:var(--bronze-lt); }
.srv:hover .srv__tags,.srv:hover .srv__price{ color:rgba(247,244,237,.65); }
.srv.is-open::before{ transform:scaleY(1); transform-origin:top; }
.srv.is-open .srv__row{ color:var(--bone); padding-inline:clamp(1rem,2vw,2rem); }
.srv.is-open .srv__num{ color:var(--bronze-lt); }
.srv.is-open .srv__tags,.srv.is-open .srv__price{ color:rgba(247,244,237,.65); }

.srv__num{ font-size:var(--fs-micro); letter-spacing:.2em; color:var(--muted); font-weight:600; transition:color .5s; }
.srv__name{ font-family:var(--serif); font-weight:300; font-size:var(--fs-h3); letter-spacing:-.03em; line-height:1.1; }
.srv__tags{ font-size:var(--fs-small); color:var(--muted); transition:color .5s; }
.srv__price{ font-size:var(--fs-small); font-weight:600; letter-spacing:.04em; color:var(--muted); transition:color .5s; white-space:nowrap; }
.srv__plus{ position:relative; width:34px; height:34px; border-radius:50%; border:1px solid currentColor; opacity:.4; transition:opacity .4s, transform .6s var(--e-out); flex:none; }
.srv__plus::before,.srv__plus::after{ content:""; position:absolute; inset:50% 30%; height:1px; background:currentColor; transform:translateY(-50%); transition:transform .5s var(--e-out); }
.srv__plus::after{ transform:translateY(-50%) rotate(90deg); }
.srv:hover .srv__plus{ opacity:1; }
.srv.is-open .srv__plus{ opacity:1; transform:rotate(180deg); }
.srv.is-open .srv__plus::after{ transform:translateY(-50%) rotate(0deg); }

.srv__panel{ position:relative; z-index:2; overflow:hidden; height:0; transition:height .7s var(--e-inout); }
.srv.is-open .srv__panel{ color:var(--bone); }
.srv__panel-in{
  display:grid; grid-template-columns:1fr .8fr; gap:var(--gap); align-items:center;
  padding:0 clamp(1rem,2vw,2rem) 2.4rem;
}
.srv__panel-in p{ max-width:min(52ch,100%); color:rgba(247,244,237,.75); font-size:var(--fs-lead); }
.ph--srv .ph__box{ aspect-ratio:3/2; }

/* ---------- 14. TRABAJOS ---------- */
/* OJO: acá tiene que ir `clip`, no `hidden`. `overflow:hidden` convierte a .works en
   contenedor de scroll y entonces el `position:sticky` de .works__sticky se ancla a él
   —que nunca scrollea— en vez de al viewport: el panel se va para arriba y deja un
   hueco en blanco del alto del pin. `clip` recorta igual pero sin crear scroll. */
.works{ padding-block:var(--sec-y) 0; overflow:clip; }
.works__pin{ position:relative; height:400vh; }
.works__sticky{ position:sticky; top:0; height:100svh; display:flex; align-items:center; overflow:hidden; }
.works__track{ display:flex; gap:clamp(1.5rem,3vw,3rem); padding-inline:var(--pad); will-change:transform; }

.work{ flex:none; width:clamp(260px,26vw,400px); }
.work--offset{ transform:translateY(clamp(20px,5vh,64px)); }
.ph--work .ph__box{ aspect-ratio:4/5; }
.work__info{ padding-top:1.2rem; display:grid; gap:.3rem; }
.work__cat{ font-size:var(--fs-micro); letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); font-weight:700; }
.work__info h3{ font-family:var(--serif); font-weight:300; font-size:1.35rem; letter-spacing:-.02em; }
.work__info p{ font-size:var(--fs-small); color:var(--muted); }

.work--cta{ display:grid; place-items:center; width:clamp(280px,28vw,420px); }
.work__cta-in{
  display:grid; gap:1.6rem; place-items:center; text-align:center;
  padding:clamp(2rem,4vw,3.5rem); border:1px solid var(--line); border-radius:4px;
  background:var(--white);
}
.work__cta-in h3{ font-family:var(--serif); font-weight:300; font-size:var(--fs-h3); line-height:1.15; letter-spacing:-.02em; }

/* Fallback móvil: scroll horizontal nativo */
.works.is-native .works__pin{ height:auto; }
.works.is-native .works__sticky{ position:static; height:auto; overflow-x:auto; scroll-snap-type:x mandatory; padding-block:1rem 2rem; -webkit-overflow-scrolling:touch; }
.works.is-native .works__track{ transform:none !important; }
.works.is-native .work{ scroll-snap-align:center; }
.works.is-native .work--offset{ transform:none; }
.works__sticky::-webkit-scrollbar{ height:3px; }
.works__sticky::-webkit-scrollbar-thumb{ background:var(--sage); border-radius:9px; }

/* ---------- 15. EL ESPACIO ---------- */
.space{ padding-block:var(--sec-y); }
.space__grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
.space__media{ position:relative; padding-bottom:12%; }
.ph--space-a{ width:78%; box-shadow:0 40px 80px -50px rgba(15,29,24,.5); }
.ph--space-a .ph__box{ aspect-ratio:3/4; }
.ph--space-b{ position:absolute; right:0; bottom:0; width:44%; box-shadow:0 30px 60px -40px rgba(15,29,24,.5); }
.ph--space-b .ph__box{ aspect-ratio:1/1; }

.space__points{ margin-top:2.6rem; display:grid; gap:0; }
.space__points li{
  display:flex; gap:1.2rem; align-items:baseline; padding-block:1.05rem;
  border-top:1px solid var(--line); font-size:var(--fs-body);
}
.space__points li:last-child{ border-bottom:1px solid var(--line); }
.space__points span{ font-size:var(--fs-micro); letter-spacing:.16em; color:var(--bronze); font-weight:700; }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); margin-top:clamp(4rem,9vw,8rem); padding-top:3rem; border-top:1px solid var(--line); }
.stat strong{
  display:block; font-family:var(--serif); font-weight:300;
  font-size:clamp(2.6rem,5.5vw,4.6rem); line-height:1; letter-spacing:-.045em; color:var(--forest);
}
.stat span{ display:block; margin-top:.7rem; font-size:var(--fs-small); color:var(--muted); max-width:min(22ch,100%); }

/* ---------- 16. TESTIMONIOS ---------- */
.tst{ padding-block:var(--sec-y); background:var(--forest); color:var(--bone); overflow:hidden; }
.tst .section-tag{ color:var(--sage); }
.tst .section-tag i{ background:var(--bronze-lt); }
.tst .section-title{ color:var(--bone); }
.tst .w--italic{ color:var(--bronze-lt); }

.tst__viewport{ overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; cursor:grab; padding-block:1rem; }
.tst__viewport::-webkit-scrollbar{ display:none; }
.tst__viewport.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.tst__track{ display:flex; gap:clamp(1rem,2vw,2rem); padding-inline:var(--pad); width:max-content; }

.tstc{
  flex:none; width:min(460px,80vw); scroll-snap-align:center;
  background:rgba(247,244,237,.05); border:1px solid rgba(247,244,237,.12);
  border-radius:4px; padding:clamp(1.8rem,3vw,2.8rem);
  display:flex; flex-direction:column; gap:1.4rem;
  transition:background .6s var(--e-out), border-color .6s var(--e-out), transform .6s var(--e-out);
}
.tstc:hover{ background:rgba(247,244,237,.09); border-color:rgba(217,188,140,.4); }
.tstc__stars{ color:var(--bronze-lt); letter-spacing:.2em; font-size:.8rem; }
.tstc p{
  font-family:var(--serif); font-weight:300; font-size:clamp(1.05rem,1.6vw,1.35rem);
  line-height:1.5; letter-spacing:-.015em; flex:1;
}
.tstc p::before{ content:"“"; }
.tstc p::after{ content:"”"; }
.tstc footer{ display:flex; align-items:center; gap:.9rem; padding-top:1.2rem; border-top:1px solid rgba(247,244,237,.12); }
.tstc cite{ font-style:normal; display:flex; flex-direction:column; }
.tstc cite strong{ font-size:var(--fs-small); font-weight:600; }
.tstc cite span{ font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--sage); }
.tstc .ph--avatar .ph__box{ background:linear-gradient(135deg,rgba(125,156,137,.6),rgba(217,188,140,.5)); }

.tst__controls{ display:flex; align-items:center; justify-content:center; gap:1.5rem; margin-top:3rem; }
.tst__arrow{
  width:52px; height:52px; border-radius:50%; border:1px solid rgba(247,244,237,.25);
  display:grid; place-items:center; color:var(--bone);
  transition:background .4s var(--e-out), color .4s, border-color .4s, transform .4s var(--e-out);
}
.tst__arrow svg{ width:18px; height:18px; }
.tst__arrow:hover{ background:var(--bronze-lt); color:var(--ink); border-color:transparent; }
.tst__arrow:active{ transform:scale(.94); }
.tst__dots{ display:flex; gap:.55rem; }
.tst__dots button{ width:7px; height:7px; border-radius:50%; background:rgba(247,244,237,.28); transition:all .4s var(--e-out); }
.tst__dots button.is-active{ background:var(--bronze-lt); width:26px; border-radius:99px; }

/* ---------- 17. CONTACTO ---------- */
.contact{ padding-block:var(--sec-y); }
.contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,7rem); align-items:start; }

.contact__info{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.8rem; margin-top:3rem; padding-top:2.4rem; border-top:1px solid var(--line); }
.contact__info-item h4{ font-size:var(--fs-micro); letter-spacing:.22em; text-transform:uppercase; color:var(--bronze); font-weight:700; margin-bottom:.6rem; }
.contact__info-item p{ font-size:var(--fs-small); line-height:1.85; color:var(--muted); }
.contact__info-item a{ position:relative; color:var(--fg); }
.contact__info-item a::after{ content:""; position:absolute; left:0; bottom:-1px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--e-out); }
.contact__info-item a:hover::after{ transform:scaleX(1); transform-origin:left; }

.ph--map{ margin-top:2.6rem; }
.ph--map .ph__box{ aspect-ratio:16/9; }

.contact__form-wrap{
  background:var(--white); border:1px solid var(--line);
  border-radius:4px; padding:clamp(1.6rem,3.4vw,3.2rem);
  box-shadow:0 40px 90px -60px rgba(15,29,24,.4);
  position:sticky; top:7rem;
}
.form{ display:grid; gap:1.5rem; }
.form__row--2{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }

.field{ position:relative; }
.field input,.field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:1.6rem 0 .7rem; font-size:var(--fs-body); transition:border-color .4s var(--e-out);
  resize:vertical;
}
.field label{
  position:absolute; left:0; top:1.55rem; color:var(--muted); font-size:var(--fs-body);
  pointer-events:none; transform-origin:left;
  transition:transform .4s var(--e-out), color .4s var(--e-out);
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--forest); }
.field input:focus + label,.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-1.5rem) scale(.7); color:var(--bronze);
}
.field--area label{ top:1.55rem; }
.field.has-err input,.field.has-err textarea{ border-color:#B4574B; }
.field__err{ display:block; font-size:var(--fs-micro); color:#B4574B; letter-spacing:.08em; min-height:1rem; margin-top:.3rem; }
.field__legend{ font-size:var(--fs-micro); letter-spacing:.22em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:.9rem; }

.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{ cursor:pointer; position:relative; }
.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip span{
  display:inline-block; padding:.6rem 1.05rem; border-radius:100px; border:1px solid var(--line);
  font-size:var(--fs-small); transition:all .4s var(--e-out);
}
.chip:hover span{ border-color:var(--sage); }
.chip input:checked + span{ background:var(--forest); color:var(--bone); border-color:var(--forest); }
.chip input:focus-visible + span{ outline:2px solid var(--bronze); outline-offset:3px; }

.check{ display:flex; gap:.8rem; align-items:flex-start; cursor:pointer; font-size:var(--fs-small); color:var(--muted); position:relative; }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check__box{
  width:20px; height:20px; flex:none; border:1px solid var(--line); border-radius:3px; margin-top:.15rem;
  display:grid; place-items:center; transition:all .35s var(--e-out); position:relative;
}
.check__box::after{
  content:""; width:9px; height:5px; border-left:1.6px solid var(--bone); border-bottom:1.6px solid var(--bone);
  transform:rotate(-45deg) scale(0); transition:transform .3s var(--e-out); margin-top:-2px;
}
.check input:checked + .check__box{ background:var(--forest); border-color:var(--forest); }
.check input:checked + .check__box::after{ transform:rotate(-45deg) scale(1); }
.check__txt a{ color:var(--fg); text-decoration:underline; text-underline-offset:3px; }
.check.has-err .check__box{ border-color:#B4574B; }

.form__note{ font-size:var(--fs-micro); color:var(--muted); text-align:center; letter-spacing:.1em; }
.form__success{
  font-size:var(--fs-small); text-align:center; color:var(--moss);
  background:rgba(125,156,137,.12); border:1px solid rgba(125,156,137,.4); border-radius:100px;
  padding:0; max-height:0; overflow:hidden; opacity:0;
  transition:all .6s var(--e-out);
}
.form__success.is-on{ padding:.9rem 1.2rem; max-height:120px; opacity:1; }
.form__success--err{
  color:#B4574B; background:rgba(180,87,75,.1); border-color:rgba(180,87,75,.38);
}

/* ---------- 18. FOOTER ---------- */
.foot{ background:var(--ink); color:var(--bone); padding-block:clamp(3.5rem,7vw,6rem) 2rem; overflow:hidden; }
.foot__top{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:2.5rem; padding-bottom:clamp(3rem,6vw,5rem); }
.foot__col h4{ font-size:var(--fs-micro); letter-spacing:.22em; text-transform:uppercase; color:var(--sage); font-weight:700; margin-bottom:.9rem; }
.foot__col p{ font-size:var(--fs-small); line-height:1.9; color:rgba(247,244,237,.72); }
.foot__col a{ transition:color .3s; }
.foot__col a:hover{ color:var(--bronze-lt); }

.foot__logo{ border-top:1px solid rgba(247,244,237,.14); padding-top:clamp(2rem,4vw,3rem); }
.foot__logo-txt{
  display:block; font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(2.6rem,13vw,11rem); line-height:.9; letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1px rgba(247,244,237,.35);
  white-space:nowrap; text-align:center;
  transition:color .8s var(--e-out);
}
.foot__logo:hover .foot__logo-txt{ color:rgba(217,188,140,.16); }

.foot__bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-top:2.5rem; font-size:var(--fs-micro); letter-spacing:.1em; color:rgba(247,244,237,.5); text-transform:uppercase; }

/* ---------- 19. WHATSAPP ---------- */
.wa{
  position:fixed; right:clamp(1rem,2.5vw,2rem); bottom:clamp(1rem,2.5vw,2rem); z-index:7500;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:var(--forest); color:var(--bone);
  box-shadow:0 14px 30px -12px rgba(15,29,24,.6);
  transform:scale(0); transition:transform .6s var(--e-out), background .4s;
}
body.is-ready .wa{ transform:scale(1); transition-delay:1.4s; }
.wa svg{ width:26px; height:26px; }
.wa::after{
  content:""; position:absolute; inset:0; border-radius:50%; border:1px solid var(--forest);
  animation:pulse 2.6s var(--e-out) infinite;
}
@keyframes pulse{ 0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.6);opacity:0} }
.wa:hover{ background:var(--bronze); color:var(--ink); }

/* ---------- 20. ANIMACIONES DE ENTRADA ---------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--e-out), transform 1s var(--e-out); }
[data-reveal].is-in{ opacity:1; transform:none; }

.section-title .w,.hero__title .w{ transform:translateY(110%); transition:transform 1.1s var(--e-out); }
.section-title.is-in .w,.hero__title.is-in .w{ transform:translateY(0); }

.ph[data-parallax],.hero__badge{ will-change:transform; }

.ph__box{ clip-path:inset(0 0 100% 0); transition:clip-path 1.3s var(--e-inout), transform 1.2s var(--e-out); }
.ph.is-in .ph__box{ clip-path:inset(0 0 0 0); }
.ph--avatar .ph__box{ clip-path:none; }

.stat{ opacity:0; transform:translateY(20px); transition:all .9s var(--e-out); }
.stat.is-in{ opacity:1; transform:none; }

.srv{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--e-out), transform .8s var(--e-out); }
.srv.is-in{ opacity:1; transform:none; }

.work{ opacity:0; transform:translateY(30px); transition:opacity .9s var(--e-out), transform .9s var(--e-out); }
.work.is-in{ opacity:1; }
.work.is-in{ transform:none; }
.work--offset.is-in{ transform:translateY(clamp(20px,5vh,64px)); }
.works.is-native .work--offset.is-in{ transform:none; }

/* ---------- 21. RESPONSIVE ---------- */
@media (max-width:1180px){
  .hero__inner{ grid-template-columns:1fr; gap:3rem; }
  .hero__collage{ min-height:min(58vh,520px); }
  .hero__badge{ left:auto; right:2%; top:38%; }
  .section-head--split{ grid-template-columns:1fr; align-items:start; }
  .srv__row{ grid-template-columns:auto 1fr auto auto; }
  .srv__tags{ display:none; }
  .space__grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); row-gap:2.5rem; }
  .contact__grid{ grid-template-columns:1fr; }
  .contact__form-wrap{ position:static; }
  .srv__panel-in{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__burger{ display:grid; }
  .nav__actions .btn--pill{ display:none; }
  .hero{ min-height:auto; padding-top:8rem; }
  .hero__foot{ flex-direction:column; align-items:flex-start; gap:1.5rem; }
  .hero__rating{ text-align:left; }
  .menu__grid{ justify-content:flex-start; padding-top:7rem; }
}

@media (max-width:640px){
  .hero__title{ margin-bottom:1.8rem; }
  .hero__collage{ min-height:440px; }
  .hero__img--main{ width:66%; right:0; }
  .hero__img--small{ width:38%; bottom:6%; }
  .hero__img--wide{ display:none; }
  .hero__badge{ width:84px; top:auto; bottom:2%; right:4%; }
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ width:100%; }
  .srv__row{ grid-template-columns:auto 1fr auto; gap:1rem; }
  .srv__price{ display:none; }
  .form__row--2{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .foot__bottom{ flex-direction:column; }
  .ph--space-a{ width:86%; }
  .space__media{ padding-bottom:18%; }
}

/* ---------- 22. ACCESIBILIDAD / MOVIMIENTO REDUCIDO ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-reveal],.stat,.srv,.work{ opacity:1 !important; transform:none !important; }
  .section-title .w,.hero__title .w{ transform:none !important; }
  .ph__box{ clip-path:none !important; }
  .manifesto__text .cw{ color:var(--fg) !important; }
  .grain{ display:none; }
  .works__pin{ height:auto !important; }
  .works__sticky{ position:static !important; height:auto !important; overflow-x:auto; }
}

@media print{
  .nav,.menu,.loader,.cursor,.grain,.wa,.scroll-progress,.marquee{ display:none !important; }
}