@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/cormorant-garamond-500.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/cormorant-garamond-600.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/instrument-sans-400.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/instrument-sans-500.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/instrument-sans-600.woff2") format("woff2")}

:root{
  /* Navy is the brand colour, taken from the salon wall (hue 215) and cleaned
     up for screen. Rose carries the warmth. Light page, navy full-bleed bands. */
  --paper:#F6F8F7;--surface:#EAEFF1;--surface-2:#D5DEE3;
  --ink:#1B2A3F;--ink-soft:#566878;--hairline:#D3DCE0;
  --accent:#2F5382;--accent-strong:#22406A;--accent-ink:#F6F8F7;--accent-quiet:#2F5382;
  --warm:#8A5F5C;
  --warm-quiet:#A37774;
  --deep:#1F3048;
  --deep-ink:#F6F8F7;--deep-soft:#A6B8CA;--deep-warm:#E0AFA9;
  --shadow-rgb:20,30,45;
  --nav-bg:#1F3048;--nav-ink:#F6F8F7;--nav-soft:#A6B8CA;--nav-line:rgba(166,184,202,.22);
  --cta:#C89490;--cta-ink:#241309;--cta-hover:#DBA9A5;
  --photo:sepia(.16) saturate(.94) hue-rotate(-6deg) contrast(1.03) brightness(1.02);
  --r:14px;--r-pill:999px;
  --ease:cubic-bezier(.32,.72,0,1);
  --btn-bg:#2F5382;--btn-ink:#F6F8F7;--btn-hover:#22406A;
  --step--1:clamp(.79rem,.77rem + .12vw,.86rem);
  --step-0:clamp(1rem,.97rem + .16vw,1.09rem);
  --step-1:clamp(1.08rem,1rem + .44vw,1.38rem);
  --step-2:clamp(1.5rem,1.25rem + 1.1vw,2.25rem);
  --step-3:clamp(1.85rem,1.35rem + 2.1vw,3.25rem);
  --step-4:clamp(2.2rem,1.55rem + 2.8vw,3.9rem);
  --gutter:clamp(1.15rem,4vw,3.5rem);--shell:1400px;--nav-h:72px;
}
@media (prefers-color-scheme: dark){
  :root{--paper:#141C26;--surface:#1B2532;--surface-2:#24303F;
  --ink:#E8EEF2;--ink-soft:#9DAEBC;--hairline:#2C3948;
  --accent:#7FA8D8;--accent-strong:#9BBEE6;--accent-ink:#0E1620;--accent-quiet:#7FA8D8;
  --warm:#D9A9A4;--warm-quiet:#C89490;
  --deep:#0F1621;--deep-ink:#E8EEF2;--deep-soft:#9DAEBC;--deep-warm:#D9A9A4;
  --btn-bg:#3A6BA5;--btn-ink:#FFFFFF;--btn-hover:#4B7CB8;
  --shadow-rgb:6,10,16;
  --nav-bg:#24303F;--nav-ink:#E8EEF2;--nav-soft:#A6B8CA;--nav-line:rgba(166,184,202,.18);
  --cta:#C89490;--cta-ink:#241309;--cta-hover:#DBA9A5;
  --photo:sepia(.12) saturate(.88) hue-rotate(-6deg) contrast(.99) brightness(.92)}
}
.ch2 *,.ch2 *::before,.ch2 *::after{box-sizing:border-box}
:where(.ch2 h1,.ch2 h2,.ch2 h3,.ch2 h4,.ch2 p,.ch2 figure,.ch2 blockquote,.ch2 dl,.ch2 dd,.ch2 ul,.ch2 li){margin:0;padding:0;border:0}
:where(.ch2 ul){list-style:none}

body.ch2{margin:0;background:var(--paper);color:var(--ink);font-family:"Instrument Sans",system-ui,-apple-system,sans-serif;font-size:var(--step-0);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
.ch2 h1,.ch2 h2,.ch2 h3,.ch2 .display{font-family:"Cormorant Garamond","Instrument Sans",serif;font-weight:600;letter-spacing:-.008em;line-height:1.06}
.ch2 h3{line-height:1.12}
.ch2 img{display:block;max-width:100%;height:auto}
:where(.ch2 a){color:inherit}
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(3rem,5.5vw,6rem)}
.lede{color:var(--ink-soft);max-width:58ch;font-size:var(--step-1);line-height:1.5;font-weight:400}
.photo{filter:var(--photo)}
.eyebrow{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.22em;font-weight:600;color:var(--accent-quiet);margin:0 0 1.2rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;white-space:nowrap;padding:.95rem 1.85rem;font-family:"Instrument Sans",sans-serif;font-size:var(--step--1);font-weight:600;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;border-radius:var(--r-pill);cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .14s var(--ease)}
.btn-primary{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)}
.btn-primary:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--hairline)}
.btn-ghost:hover{background:var(--surface);border-color:var(--ink-soft)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,.ch2 a:focus-visible,.ch2 button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn-sm{padding:.72rem 1.3rem}
/* Navy on navy measures 1.70:1, so the bar's booking button takes the warm
   fill instead. Scoped to .nav: every other CTA on the page stays navy. */
.nav .btn-primary{background:var(--cta);color:var(--cta-ink);border-color:var(--cta)}
.nav .btn-primary:hover{background:var(--cta-hover);border-color:var(--cta-hover)}
.nav .btn:focus-visible{outline-color:var(--cta)}

.nav{position:sticky;top:0;z-index:40;height:var(--nav-h);background:var(--nav-bg);color:var(--nav-ink);border-bottom:1px solid var(--nav-line)}
.nav-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:2rem}
/* Anchor targets sit under the sticky bar unless they reserve room for it.
   The admin bar adds another 32px, but only for logged-in users. */
html{scroll-padding-top:var(--nav-h)}
.ch2 [id]{scroll-margin-top:var(--nav-h)}
body.admin-bar .nav{top:32px}
html.ch2-adminbar{scroll-padding-top:calc(var(--nav-h) + 32px)}
body.admin-bar [id]{scroll-margin-top:calc(var(--nav-h) + 32px)}
@media screen and (max-width:782px){
  body.admin-bar .nav{top:46px}
  html.ch2-adminbar{scroll-padding-top:calc(var(--nav-h) + 46px)}
  body.admin-bar [id]{scroll-margin-top:calc(var(--nav-h) + 46px)}
}
.brand{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:1.5rem;text-decoration:none;line-height:1}
.brand span{color:var(--accent-quiet)}
.brand-mark{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand-mark img{height:44px;width:auto}
.nav-links{display:flex;align-items:center;gap:2rem;list-style:none;margin:0;padding:0}
.nav-links a{text-decoration:none;font-size:.93rem;font-weight:500;color:var(--nav-soft);transition:color .25s var(--ease)}
.nav-links a:hover{color:var(--nav-ink)}
.nav-right{display:flex;align-items:center;gap:1.15rem}
.lang{display:flex;gap:.55rem;align-items:center;font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;font-weight:600;border-left:1px solid var(--nav-line);padding-left:1.15rem}
.lang a{text-decoration:none;color:var(--nav-soft);transition:color .25s var(--ease)}
.lang a:hover{color:var(--nav-ink)}
.lang a[aria-current="true"]{color:var(--nav-ink)}
.nav-burger{display:none;background:transparent;border:1px solid var(--nav-line);border-radius:var(--r-pill);padding:.6rem 1.05rem;color:var(--nav-ink);font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;font-family:inherit}

.hero{display:grid;grid-template-columns:1.04fr .96fr;align-items:stretch;gap:clamp(1rem,2.5vw,2.5rem);padding:clamp(1rem,2vw,2rem) clamp(1rem,2.5vw,2.5rem) clamp(1.6rem,3vw,2.6rem)}
@media (min-width:861px) and (min-height:620px){.hero{height:min(calc(100dvh - var(--nav-h)),780px)}}
.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(1rem,2.5vh,2rem) clamp(.5rem,3vw,3.5rem);max-width:760px;margin-left:auto;min-height:0}
.hero h1{font-size:var(--step-4);max-width:13ch}
.hero .lede{margin-top:1.35rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
.hero-media{position:relative;overflow:hidden;border-radius:var(--r);background:var(--surface-2);min-height:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;min-height:0}

/* Navy anchor 1 of 2. The archive photos gain a lot against a dark ground. */
.historia{background:var(--deep);color:var(--deep-ink)}
.historia h2,.historia h3{color:var(--deep-ink)}
.historia .lede,.historia .hito p,.historia .historia-caption{color:var(--deep-soft)}
.historia .hito .year{color:var(--deep-warm)}
.historia .hitos{border-top-color:rgba(166,184,202,.24)}

/* Split: photographs left, narrative right. The frames overlap on a 12-col
   sub-grid so the pair reads as one composition rather than two tiles. */
.historia-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,4.5vw,4.5rem);align-items:start}
.historia-copy{grid-column:2}
.historia-copy h2{font-size:var(--step-3);max-width:16ch;margin-top:-.12em}
.historia-copy .lede{margin-top:1.25rem}
.historia-media{grid-column:1;grid-row:1}
.historia-media figure{margin:0}
.historia-media .frame{border-radius:var(--r);overflow:hidden;background:rgba(166,184,202,.10)}
.historia-media img{width:100%;display:block;object-fit:cover;aspect-ratio:4/5}
.historia-caption{margin-top:1rem;font-size:.87rem;max-width:42ch}
/* Salon photo sits under the narrative, cropped landscape so the right
   column ends level with the tall archive photo on the left. */
.historia-copy figure{margin:clamp(1.6rem,3vw,2.4rem) 0 0}
.historia-copy .frame{border-radius:var(--r);overflow:hidden;background:rgba(166,184,202,.10)}
.historia-copy img{width:100%;display:block;object-fit:cover;aspect-ratio:3/2;object-position:center 45%}
/* Milestones sit full width under the split, as three columns again. */
.hitos{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(1.8rem,4vw,4rem);margin-top:clamp(2.2rem,4vw,3.4rem);padding-top:clamp(1.8rem,3.2vw,2.7rem);border-top:1px solid rgba(166,184,202,.24)}
.hito .year{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:var(--step-2);line-height:1;margin-bottom:.7rem}
.hito h3{font-size:var(--step-1);margin-bottom:.55rem}
.hito p{font-size:.95rem;max-width:36ch}

.svc-head{max-width:44ch;margin-bottom:clamp(1.7rem,3vw,2.4rem)}
.svc-head h2{font-size:var(--step-3)}
/* Deliberately unequal: hair is the flagship, the other two are pillars.
   The hierarchy is read before a single word is. */
.bento{display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(.9rem,1.6vw,1.4rem)}
.cell-list{margin-top:1rem;font-size:.92rem;letter-spacing:.02em;opacity:.9}
.cell{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);padding:clamp(1.7rem,2.6vw,2.7rem);display:flex;flex-direction:column;justify-content:flex-end;min-height:300px;position:relative;overflow:hidden}
.cell h3{font-size:var(--step-2);margin-bottom:.75rem}
.cell p{color:var(--ink-soft);font-size:.98rem;max-width:38ch}
.cell-a{grid-row:span 2;padding:0;min-height:540px;border:none}
.cell-a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cell-a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--shadow-rgb),.9) 0%,rgba(var(--shadow-rgb),.36) 46%,rgba(var(--shadow-rgb),0) 74%)}
.cell-a .cell-text{position:relative;z-index:2;padding:clamp(1.7rem,2.6vw,2.7rem);color:var(--deep-ink);margin-top:auto}
.cell-a .cell-text p{color:color-mix(in srgb,var(--deep-ink) 85%,transparent)}
.cell-tint{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.cell-tint p{color:color-mix(in srgb,var(--accent-ink) 80%,transparent)}
.cell-photo-sm{padding:0;min-height:300px;border:none}
.cell-photo-sm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cell-photo-sm::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--shadow-rgb),.88),rgba(var(--shadow-rgb),.04) 72%)}
.cell-photo-sm .cell-text{position:relative;z-index:2;padding:clamp(1.7rem,2.6vw,2.7rem);color:var(--deep-ink);margin-top:auto}
.cell-photo-sm .cell-text p{color:color-mix(in srgb,var(--deep-ink) 85%,transparent)}

.gallery-head{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:center;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.gallery-head h2{font-size:var(--step-2);max-width:22ch}
/* Seven real results: one 2x2 feature plus six squares on a 5-column grid,
   so the block stays two rows tall. No colour grade: these show real colour work. */
.gallery-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.7rem,1.3vw,1.1rem)}
.gallery-grid figure{margin:0;overflow:hidden;border-radius:var(--r);background:var(--surface-2);aspect-ratio:1/1}
/* Before and after: two tall frames side by side at the head of the grid.
   The shots are framed differently, so a drag slider would misalign. */
.gallery-grid .ba-pair{grid-row:span 2;aspect-ratio:auto;position:relative}
.gallery-grid .ba-pair img{object-position:50% 30%}
.ba-tag{position:absolute;left:.7rem;bottom:.7rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#fff;background:rgba(var(--shadow-rgb),.62);padding:.35rem .75rem;border-radius:var(--r-pill);pointer-events:none}
.gallery-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.gallery-grid figure:hover img{transform:scale(1.04)}

.carta{background:var(--surface)}
.carta-head{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:flex-end;margin-bottom:clamp(1.7rem,3vw,2.4rem)}
.carta-head h2{font-size:var(--step-3);max-width:15ch}
/* Dense three-column menu. Names carry their own meaning now that the
   prices are real, so the per-item descriptions are gone. */
.carta-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3.2rem);align-items:start}
.carta-group + .carta-group{margin-top:clamp(1.5rem,2.6vw,2.2rem)}
.carta-cat{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.16em;font-weight:600;color:var(--accent-quiet);margin:0 0 .55rem;padding-bottom:.5rem;border-bottom:1px solid var(--hairline)}
.carta-row{display:flex;align-items:baseline;gap:.55rem;padding:.34rem 0}
.carta-row .n{flex:1 1 auto;font-size:.95rem;line-height:1.3}
.carta-row .n small{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:.1rem}
.carta-row .d{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.carta-row .p{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.16rem;color:var(--warm);white-space:nowrap}
.carta-note{margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.7rem;border-top:1px solid var(--hairline);color:var(--ink-soft);max-width:56ch;font-size:.96rem}

.equipo h2{font-size:var(--step-3);max-width:24ch;margin-bottom:clamp(1.7rem,3vw,2.4rem)}
/* One row of four. Hierarchy comes from column width and vertical rhythm,
   not from making the founders twice the size of everyone else. */
.equipo-row{display:grid;grid-template-columns:1.14fr 1.14fr 1fr 1fr;gap:clamp(1.1rem,2.3vw,2.3rem);align-items:start}
.persona figure{margin:0;overflow:hidden;border-radius:var(--r);background:var(--surface-2)}
.persona img{width:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.persona:hover img{transform:scale(1.035)}
/* Four different offsets, and not a staircase: the deepest sits third so the eye moves in a wave rather than sliding down a diagonal. */
.persona:nth-child(1){margin-top:clamp(.9rem,2.2vw,2rem)}
.persona:nth-child(2){margin-top:clamp(2.6rem,6vw,5.4rem)}
.persona:nth-child(3){margin-top:0}
.persona:nth-child(4){margin-top:clamp(1.7rem,4vw,3.6rem)}
.persona img{aspect-ratio:4/5}
.persona:nth-child(2) img{aspect-ratio:5/6}
.persona:nth-child(3) img{aspect-ratio:3/4}

.persona h3{font-size:var(--step-1);margin-top:1.05rem}
.persona .role{color:var(--warm);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-top:.45rem}
.persona p.bio{color:var(--ink-soft);font-size:.91rem;margin-top:.6rem;max-width:32ch}
/* Second tier. Same grid, smaller portraits and names: the founders stay the
   headline without the rest of the team being hidden. */


.opiniones{background:var(--deep);color:var(--deep-ink)}
.opiniones h2{font-size:var(--step-2);max-width:20ch;margin-bottom:clamp(1.3rem,2.3vw,1.8rem);color:var(--deep-ink)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.8rem,4vw,3.5rem)}
.quote blockquote{margin:0;font-family:"Cormorant Garamond",serif;font-weight:500;font-size:var(--step-2);line-height:1.24}
.quote .who{margin-top:1.4rem;font-size:.87rem;color:var(--deep-soft)}
.quote .who strong{display:block;font-weight:600;color:var(--deep-ink);font-size:.96rem;margin-bottom:.15rem}
/* Google rating strip. Attribution is required by the Places API terms:
   reviewer name, relative time, and a link through to the profile. */
.g-bar{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;margin:-.4rem 0 clamp(1.6rem,3vw,2.4rem)}
.g-score{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:var(--step-2);color:var(--deep-warm);line-height:1}
.g-stars{letter-spacing:.12em;color:var(--deep-warm);font-size:1rem}
.g-meta{color:var(--deep-soft);font-size:.9rem}
.g-link{margin-left:auto;font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--deep-ink);text-decoration:none;border-bottom:1px solid rgba(166,184,202,.4);transition:border-color .3s var(--ease)}
.g-link:hover{border-color:var(--deep-warm)}
.quote .when{color:var(--deep-soft);font-size:.82rem}
@media (max-width:600px){.g-link{margin-left:0}}

.visita-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.visita h2{font-size:var(--step-3);max-width:11ch}
.visita .lede{margin-top:1.5rem}
.info{display:grid;gap:2rem;margin-top:2.9rem}
.info dt{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.18em;font-weight:600;color:var(--ink-soft);margin-bottom:.5rem}
.info dd{margin:0;font-size:var(--step-1);line-height:1.4;font-weight:500}
.info dd a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hairline);transition:border-color .25s var(--ease)}
.info dd a:hover{border-color:var(--accent)}
.visita-cta{margin-top:2.9rem;display:flex;flex-wrap:wrap;gap:.9rem}
.map{border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden;background:var(--surface-2);min-height:540px;height:100%}
.map iframe{display:block;width:100%;height:100%;min-height:540px;border:0;filter:grayscale(.55) saturate(.9) hue-rotate(178deg) contrast(.97)}
@media (prefers-color-scheme: dark){.map iframe{filter:invert(.92) grayscale(.5) contrast(.9)}}

.foot{border-top:1px solid var(--hairline);background:var(--surface);padding-block:clamp(3.2rem,5vw,4.8rem)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
.foot p{color:var(--ink-soft);font-size:.96rem;margin-top:1rem;max-width:34ch}
.foot h4{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.18em;margin:0 0 1.2rem;color:var(--ink-soft);font-weight:600}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.foot ul a{text-decoration:none;color:var(--ink);font-size:.96rem;transition:color .25s var(--ease)}
.foot ul a:hover{color:var(--accent-quiet)}
.foot-base{border-top:1px solid var(--hairline);margin-top:clamp(2.6rem,5vw,3.6rem);padding-top:1.6rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;color:var(--ink-soft);font-size:.86rem}
.foot-base a{text-decoration:none}
.foot-base a:hover{color:var(--accent-quiet)}

.mobile-book{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:.75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--hairline)}
.mobile-book .btn{width:100%}

.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .gallery-grid img,.persona img{transition:none}
  .gallery-grid figure:hover img,.persona:hover img{transform:none}
}

@media (max-width:1080px){
  .nav-links{display:none}
  .nav-burger{display:inline-block}
  .bento{grid-template-columns:1fr 1fr}
  .cell-a{grid-row:span 1;min-height:430px}
  .quotes{grid-template-columns:1fr 1fr}
  .quotes .quote:nth-child(3){display:none}
  .visita-grid{grid-template-columns:1fr}
  .map,.map iframe{min-height:400px}
}
@media (max-width:860px){
  :root{--nav-h:64px}
  .brand-mark img{height:36px}
  .hero{grid-template-columns:1fr;padding-inline:var(--gutter)}
  .hero-copy{padding:clamp(2.5rem,8vw,4rem) 0;margin-left:0;max-width:none}
  .hero-media img{min-height:66dvh}

  .historia-grid{grid-template-columns:1fr;gap:1.9rem}
  .hitos{grid-template-columns:1fr;gap:1.7rem}
  .historia-copy,.historia-media{grid-column:1;grid-row:auto}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .gallery-grid .ba-pair{grid-row:auto;aspect-ratio:3/4}
  .carta-cols{grid-template-columns:1fr 1fr;gap:2rem}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .lang{display:none}
  .carta-cols{grid-template-columns:1fr;gap:1.8rem}
  .bento{grid-template-columns:1fr}
  .cell,.cell-photo-sm{min-height:270px}
  .cell-a{min-height:390px}
  .quotes{grid-template-columns:1fr}
  .quotes .quote:nth-child(3){display:block}
  .equipo-row{grid-template-columns:1fr;gap:2.6rem}
  .persona{margin-top:0 !important}
  .foot-grid{grid-template-columns:1fr}
  .mobile-book{display:block}
  body.ch2{padding-bottom:78px}
  .nav .btn-primary{display:none}
}
/* Mobile menu: the burger opens the nav as a navy panel under the bar.
   Languages ride along inside it, since the switcher is hidden on phones. */
.m-lang{display:none}
@media (max-width:1080px){
  .nav.open .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--nav-bg);padding:.4rem var(--gutter) 1.3rem;border-bottom:1px solid var(--nav-line);box-shadow:0 18px 40px rgba(var(--shadow-rgb),.28)}
  .nav.open .nav-links > li > a{display:block;padding:.95rem 0;font-size:1.06rem;color:var(--nav-ink);border-bottom:1px solid var(--nav-line)}
  .nav.open .m-lang{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;padding-top:1.1rem}
  .nav.open .m-lang a{font-size:.84rem;letter-spacing:.09em;font-weight:600;text-decoration:none;color:var(--nav-soft)}
  .nav.open .m-lang a[aria-current="true"]{color:var(--nav-ink)}
  .nav-burger[aria-expanded="true"]{background:rgba(166,184,202,.14)}
}
@media (prefers-reduced-motion: no-preference){
  .nav.open .nav-links{animation:ch2-drop .28s var(--ease)}
}
@keyframes ch2-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* WhatsApp: free to message from abroad, so it is the main way to book.
   Green darkened to #167A54 so white text clears 4.5:1 (5.3:1). */
.btn svg{width:1.2em;height:1.2em;flex:none}
.btn-wa{background:#167A54;color:#fff;border-color:#167A54}
.btn-wa:hover{background:#0E6B4F;border-color:#0E6B4F}
.wa-float{position:fixed;right:1.5rem;bottom:1.5rem;z-index:50;display:grid;place-items:center;width:3.6rem;height:3.6rem;border-radius:50%;background:#167A54;color:#fff;border:2px solid #fff;text-decoration:none;transition:background-color .3s var(--ease),transform .2s var(--ease)}
.wa-float:hover{background:#0E6B4F;transform:translateY(-2px)}
.wa-float svg{width:1.7rem;height:1.7rem}
@media (max-width:600px){
  .wa-float{display:none}
  .mobile-book{display:flex;gap:.6rem}
  .mobile-book .btn-wa{flex:1;width:auto}
  .mobile-book .btn-ghost{width:auto;flex:none;padding-left:1.15rem;padding-right:1.15rem}
}
/* Less room above each section title so a section reached from the menu shows
   its title and the start of its content. Bottom spacing is unchanged. */
.section{padding-top:clamp(2rem,3.2vw,3.25rem)}
/* Motion. Titles and their labels stay still; photos rise into place and
   settle from a slight zoom. Opacity and transform only, never a clip, so
   lazy loading still sees every photo. Classes come from landing.js, so
   without JS or with reduced motion everything simply shows. */
@keyframes ch2-settle{from{transform:scale(1.06)}to{transform:none}}
.js .reveal.still{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion: no-preference){
  .js .reveal.has-ph{transform:translateY(36px);transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.25s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0ms)}
  .js .reveal.has-ph.in{transform:none}
  .js .ph img{transform:scale(1.08);transition:transform 1.7s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0ms)}
  .js .in .ph img,.js .ph.in img{transform:none}
  .js .gallery-grid figure.in:hover img,.js .persona.in:hover img{transform:scale(1.04);transition-delay:0ms;transition-duration:1.1s}
  .hero-media.settle img{animation:ch2-settle 2.2s cubic-bezier(.16,1,.3,1) both}
}
/* Booking buttons sit right under the intro, so they are on screen as soon as
   Reservar cita lands here. The details follow below them. */
.visita-cta{margin-top:2rem}

/* Visit: title, intro, buttons and all details fit beside the map on one
   screen. Details run as a 2x2 grid; the map stretches to the same height. */
.visita-grid{align-items:stretch}
.visita h2{max-width:none}
.visita .lede{margin-top:1rem;font-size:var(--step-0);max-width:46ch}
.visita-cta{margin-top:1.6rem}
.info{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2rem;margin-top:2.2rem;padding-top:2rem;border-top:1px solid var(--hairline)}
.info dt{margin-bottom:.35rem}
.info dd{font-size:1.06rem;line-height:1.5}
.map,.map iframe{min-height:420px}
@media (max-width:1080px){
  .map,.map iframe{min-height:360px}
}
@media (max-width:420px){
  .info{grid-template-columns:1fr}
}
/* Visit fills the screen under the bar on desktop, content centred, so the
   footer stays out of view until you scroll on. */
@media (min-width:1081px){
  .visita{min-height:calc(100svh - var(--nav-h));display:flex;flex-direction:column;justify-content:center}
  body.admin-bar .visita{min-height:calc(100svh - var(--nav-h) - 32px)}
}
/* The email never breaks: its column is at least as wide as the address
   (min-content of a nowrap link), otherwise the two columns share equally. */
.info{grid-template-columns:minmax(0,1fr) minmax(min-content,1fr)}
.info a[href^="mailto:"]{white-space:nowrap}
@media (max-width:420px){
  .info{grid-template-columns:1fr}
}
/* Credit line under the copyright. */
.foot-copy .credit{display:block;margin-top:.35rem;font-size:.8rem;opacity:.75}
.foot-copy .credit a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hairline);transition:border-color .25s var(--ease)}
.foot-copy .credit a:hover{border-color:currentColor}
/* Legal pages: same bar and footer, one readable column of text. */
.legal-back{color:var(--nav-ink);text-decoration:none;font-size:.95rem;opacity:.85;transition:opacity .25s var(--ease)}
.legal-back:hover{opacity:1}
.legal{padding-top:clamp(2.5rem,5vw,4.5rem)}
.legal-in{max-width:74ch}
.legal h1{font-size:var(--step-4);margin-bottom:.7rem}
.legal-updated{color:var(--ink-soft);font-size:.9rem}
.legal-body{margin-top:clamp(2rem,4vw,3rem)}
.legal-body h2{font-size:var(--step-2);margin:2.6rem 0 .8rem}
.legal-body h2:first-child{margin-top:0}
.legal-body p{max-width:70ch}
.legal-body p + p{margin-top:.9rem}
.legal-body ul{list-style:disc;padding-left:1.3rem;margin:.7rem 0}
.legal-body li + li{margin-top:.4rem}
.legal-body a{color:var(--accent);text-underline-offset:.18em}
.legal-body strong{font-weight:600}
/* Legal notices open as a dialog over the page. The dialog itself has no
   padding, so a click that lands on it is a click on the backdrop. */
.legal-modal{width:min(760px,calc(100% - 2 * var(--gutter)));max-height:min(86vh,900px);padding:0;border:0;border-radius:var(--r);background:var(--paper);color:var(--ink);overflow:hidden}
.legal-modal[open]{display:flex;flex-direction:column}
.legal-modal::backdrop{background:rgba(var(--shadow-rgb),.62);backdrop-filter:blur(3px)}
.legal-modal-in{overflow-y:auto;overscroll-behavior:contain;padding:clamp(1.6rem,4vw,3rem)}
.legal-modal-in > h2{font-size:var(--step-3);margin-bottom:.5rem;padding-right:2.6rem}
.legal-modal .legal-body{margin-top:clamp(1.6rem,3vw,2.2rem)}
.legal-close{position:absolute;top:.9rem;right:.9rem;z-index:2;display:grid;place-items:center;width:2.6rem;height:2.6rem;padding:0;border-radius:50%;border:1px solid var(--hairline);background:var(--paper);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;transition:background-color .25s var(--ease)}
.legal-close:hover{background:var(--surface)}
html:has(.legal-modal[open]){overflow:hidden}
@keyframes ch2-modal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference){
  .legal-modal[open]{animation:ch2-modal .3s var(--ease)}
}