/* Clínica Jané — graphite of their walls, porcelain, silver-gelatin greys, brass lines. */
@font-face { font-family: "Noto Serif Display"; font-weight: 300; font-style: normal; font-display: swap; src: url(/fonts/noto-serif-display-latin-300-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Serif Display"; font-weight: 300; font-style: normal; font-display: swap; src: url(/fonts/noto-serif-display-latin-ext-300-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Serif Display"; font-weight: 300; font-style: italic; font-display: swap; src: url(/fonts/noto-serif-display-latin-300-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC; }
@font-face { font-family: "Noto Serif Display"; font-weight: 300; font-style: italic; font-display: swap; src: url(/fonts/noto-serif-display-latin-ext-300-italic.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "Noto Serif Display"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/noto-serif-display-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC; }
@font-face { font-family: "Noto Serif Display"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/noto-serif-display-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "Host Grotesk"; font-weight: 400; font-display: swap; src: url(/fonts/host-grotesk-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2190-2193; }
@font-face { font-family: "Host Grotesk"; font-weight: 400; font-display: swap; src: url(/fonts/host-grotesk-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "Host Grotesk"; font-weight: 500; font-display: swap; src: url(/fonts/host-grotesk-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2190-2193; }
@font-face { font-family: "Host Grotesk"; font-weight: 500; font-display: swap; src: url(/fonts/host-grotesk-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "Host Grotesk"; font-weight: 600; font-display: swap; src: url(/fonts/host-grotesk-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC; }
@font-face { font-family: "Host Grotesk"; font-weight: 600; font-display: swap; src: url(/fonts/host-grotesk-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }

:root {
  --graphite: #252220; --graphite-2: #302c29; --graphite-3: #3b3632;
  --porcelain: #f4f1ec; --paper: #ebe6de; --white: #fbfaf7;
  --ink: #1f1c1a; --muted: #645d57; --muted-d: #b9b1a8; --line: #d9d2c7; --line-d: #48423d;
  --brass: #8f6f31; --brass-l: #d3b673; --silver: #c9c5be;
  --serif: "Noto Serif Display", "Times New Roman", serif;
  --sans: "Host Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut: clamp(20px, 4.4vw, 72px); --max: 1360px; --hh: 76px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --map-bg: #ece6dc; --map-road: #fbfaf7; --map-major: #fbfaf7; --map-water: #c9d4d6; --map-park: #d9dccb; --map-ink: #4a4440; --map-pin: #8f6f31; --map-font: "Host Grotesk", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--porcelain); color: var(--ink); font: 400 17px/1.62 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--brass-l); color: var(--ink); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--white); padding: 10px 14px; border-radius: 6px; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--gut), var(--max)); margin-inline: auto; }
.narrow { width: min(100% - 2 * var(--gut), 820px); margin-inline: auto; }
.dark { background: var(--graphite); color: var(--porcelain); }
.dark ::selection { color: var(--ink); }
.serif { font-family: var(--serif); font-weight: 300; }
h1, h2, h3 { font-family: var(--serif); font-weight: 300; letter-spacing: -.012em; line-height: 1.04; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(38px, 5.4vw, 84px); }
h3 { font-size: clamp(25px, 2.3vw, 34px); line-height: 1.15; }
p { margin: 0 0 1em; text-wrap: pretty; }
.lead { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; }
.small { font-size: 14px; line-height: 1.5; }
.muted { color: var(--muted); }
.dark .muted { color: var(--muted-d); }
.cap { font-size: 13.5px; line-height: 1.45; color: var(--muted); margin-top: 12px; }
.dark .cap { color: var(--muted-d); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 14px 24px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 16px; line-height: 1.2; border: 1px solid currentColor; transition: background-color .3s, color .3s, border-color .3s; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--solid { background: var(--porcelain); color: var(--ink); border-color: var(--porcelain); }
.btn--solid:hover { background: var(--brass-l); border-color: var(--brass-l); }
.btn--ink { background: var(--ink); color: var(--porcelain); border-color: var(--ink); }
.btn--ink:hover { background: var(--brass); border-color: var(--brass); }
.btn--line:hover { background: rgba(255,255,255,.08); }
.porcelain .btn--line:hover, .paper .btn--line:hover { background: rgba(0,0,0,.05); }
.link { white-space: nowrap; display: inline-flex; gap: 10px; align-items: center; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.link:hover { color: var(--brass); }
.dark .link:hover { color: var(--brass-l); }
.arrow { width: 16px; height: 16px; flex: none; transition: transform .35s var(--ease); }
a:hover > .arrow { transform: translateX(4px); }

/* header */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hh); color: var(--porcelain); transition: background-color .4s, color .4s, transform .45s var(--ease), box-shadow .4s; }
.hdr__in { height: 100%; display: flex; align-items: center; gap: 28px; width: min(100% - 2 * var(--gut), var(--max)); margin-inline: auto; }
.hdr__logo { flex: none; display: block; width: 168px; }
.hdr__logo img { width: 100%; height: auto; }
.hdr__logo .lg-d { display: none; }
.hdr__nav { display: flex; gap: 26px; margin-left: auto; }
.hdr__nav a { text-decoration: none; font-size: 15.5px; font-weight: 500; opacity: .92; padding: 8px 0; border-bottom: 1px solid transparent; white-space: nowrap; }
.hdr__nav a:hover, .hdr__nav a[aria-current] { border-color: currentColor; opacity: 1; }
.hdr__langs { display: flex; gap: 2px; font-size: 13px; font-weight: 500; letter-spacing: .02em; }
.hdr__langs a { text-decoration: none; padding: 8px 6px; opacity: .6; }
.hdr__langs a[aria-current] { opacity: 1; }
.hdr__langs a:hover { opacity: 1; }
.hdr__cta { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.hdr__wa { flex: none; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; }
.hdr__wa svg { width: 18px; height: 18px; }
@media (max-width: 1180px) { .hdr__wa { display: none; } }
.ig { font-size: 14px; }
.hdr__burger, .hdr__call { display: none; }
.hdr.is-solid { background: rgba(244, 241, 236, .92); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); color: var(--ink); box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.hdr.is-solid .lg-l { display: none; }
.hdr.is-solid .lg-d { display: block; }
.hdr.is-hidden { transform: translateY(-100%); }
.hdr.is-solid .hdr__cta { background: var(--ink); color: var(--porcelain); border-color: var(--ink); }

/* mobile menu */
.menu { position: fixed; inset: 0; z-index: 60; background: var(--graphite); color: var(--porcelain); display: flex; flex-direction: column; padding: 18px var(--gut) calc(28px + env(safe-area-inset-bottom)); visibility: hidden; opacity: 0; transition: opacity .35s, visibility 0s .35s; overflow-y: auto; }
.menu.is-open { visibility: visible; opacity: 1; transition: opacity .35s; }
.menu__top { display: flex; align-items: center; justify-content: space-between; height: 44px; margin-bottom: 28px; }
.menu__top img { width: 150px; }
.menu__close { width: 48px; height: 48px; border: 0; background: none; display: grid; place-items: center; margin-right: -10px; cursor: pointer; }
.menu__nav a { display: block; font-family: var(--serif); font-weight: 300; font-size: 34px; line-height: 1.15; padding: 7px 0; text-decoration: none; }
.menu__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; margin: 10px 0 26px; padding: 14px 0 0; border-top: 1px solid var(--line-d); }
.menu__sub a { font-size: 15.5px; padding: 7px 0; text-decoration: none; color: var(--muted-d); }
.menu__foot { margin-top: auto; display: grid; gap: 14px; }
.menu__foot .hdr__langs { font-size: 15px; }
.menu__foot .hdr__langs a { padding: 10px 12px 10px 0; }

/* phone dock */
.dock { display: none; }

/* ---------- HOME: origen ---------- */
.origen { position: relative; background: var(--graphite); color: var(--porcelain); }
.origen__stage { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.origen__media { position: absolute; inset: 0; will-change: clip-path; }
.origen__media canvas, .origen__media .origen__still { position: absolute; inset: 0; width: 100%; height: 100%; }
.origen__still { object-fit: cover; }
.origen__still--today { opacity: 0; }
.js-ready .origen:not(.origen--static) .origen__still--old { filter: grayscale(1) sepia(.2); transition: opacity .4s; }
.origen__frame { position: absolute; pointer-events: none; border: 1px solid rgba(244,241,236,.18); }
.origen__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(25,22,20,.86) 0%, rgba(25,22,20,.55) 34%, rgba(25,22,20,0) 62%), linear-gradient(0deg, rgba(25,22,20,.7) 0%, rgba(25,22,20,0) 40%); opacity: 1; }
.origen__intro { position: absolute; z-index: 3; left: max(var(--gut), (100% - var(--max)) / 2); bottom: 12vh; width: min(46vw, 680px); }
.origen__kicker { font-size: 14px; letter-spacing: .02em; color: var(--muted-d); margin-bottom: 26px; }
.origen h1 { font-size: clamp(46px, 5.6vw, 96px); line-height: 1; margin-bottom: 26px; }
.origen__lede { font-size: clamp(18px, 1.4vw, 21px); max-width: 30em; color: #dcd5cc; margin-bottom: 34px; }
.origen__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.origen__caps { position: absolute; z-index: 3; left: max(var(--gut), (100% - var(--max)) / 2); bottom: 9vh; width: min(560px, 46vw); }
.chap { position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0; visibility: hidden; }
.chap__y { font-family: var(--serif); font-weight: 300; font-size: clamp(64px, 7vw, 116px); line-height: .9; letter-spacing: -.02em; display: block; margin-bottom: 14px; font-variant-numeric: lining-nums; }
.chap__t { font-family: var(--serif); font-size: clamp(25px, 2.2vw, 34px); line-height: 1.1; margin: 0 0 10px; }
.chap__p { color: #ddd6cd; max-width: 31em; margin: 0; }
.origen__quote { position: absolute; z-index: 3; left: max(var(--gut), (100% - var(--max)) / 2); right: var(--gut); bottom: 10vh; opacity: 0; visibility: hidden; }
.origen__quote blockquote { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(38px, 4vw, 70px); line-height: 1.04; max-width: 9.5em; letter-spacing: -.015em; }
.origen__quote cite { display: block; font-style: normal; margin-top: 18px; color: #ddd6cd; font-size: 15px; }
.origen__tick { position: absolute; z-index: 3; right: max(var(--gut), (100% - var(--max)) / 2); visibility: hidden; bottom: 9vh; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; font-size: 13px; color: var(--muted-d); font-variant-numeric: tabular-nums; }
.origen__tick span { display: flex; gap: 10px; align-items: center; opacity: .45; transition: opacity .3s; }
.origen__tick span::after { content: ""; width: 26px; height: 1px; background: currentColor; transform-origin: right; transform: scaleX(.5); transition: transform .4s var(--ease); }
.origen__tick span.on { opacity: 1; color: var(--porcelain); }
.origen__tick span.on::after { transform: scaleX(1.6); }
.origen__credit { position: absolute; z-index: 3; right: var(--gut); top: calc(var(--hh) + 14px); font-size: 12.5px; color: var(--muted-d); opacity: 0; }
/* static (no JS / reduced motion) version: a diptych */
:is(html:not(.js-ready) .origen, .origen--static) .origen__stage { height: auto; min-height: 0; padding: calc(var(--hh) + 40px) 0 64px; }
:is(html:not(.js-ready) .origen, .origen--static) .origen__media, :is(html:not(.js-ready) .origen, .origen--static) .origen__shade, :is(html:not(.js-ready) .origen, .origen--static) .origen__frame, :is(html:not(.js-ready) .origen, .origen--static) .origen__tick, :is(html:not(.js-ready) .origen, .origen--static) .origen__credit { display: none; }
:is(html:not(.js-ready) .origen, .origen--static) .origen__intro, :is(html:not(.js-ready) .origen, .origen--static) .origen__caps, :is(html:not(.js-ready) .origen, .origen--static) .origen__quote { position: static; width: auto; }
:is(html:not(.js-ready) .origen, .origen--static) .origen__intro { width: min(100% - 2 * var(--gut), var(--max)); margin: 0 auto 48px; }
:is(html:not(.js-ready) .origen, .origen--static) .origen__dip { display: grid; }
.origen__dip { display: none; width: min(100% - 2 * var(--gut), var(--max)); margin: 0 auto 40px; grid-template-columns: 1fr 1.1fr; gap: 20px; align-items: end; }
:is(html:not(.js-ready) .origen, .origen--static) .origen__caps { width: min(100% - 2 * var(--gut), var(--max)); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
:is(html:not(.js-ready) .origen, .origen--static) .chap { position: static; opacity: 1; visibility: visible; }
:is(html:not(.js-ready) .origen, .origen--static) .chap__y { font-size: 48px; }
:is(html:not(.js-ready) .origen, .origen--static) .origen__quote { opacity: 1; visibility: visible; width: min(100% - 2 * var(--gut), var(--max)); margin: 56px auto 0; }

/* ---------- welcome ---------- */
.welcome { padding: clamp(96px, 13vw, 190px) 0 clamp(80px, 10vw, 150px); }
.welcome__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 110px); align-items: start; }
.welcome h2 { font-size: clamp(44px, 6vw, 96px); }
.welcome__text p { font-size: clamp(19px, 1.55vw, 22px); line-height: 1.55; }
.welcome__aim { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); color: var(--muted); }

/* ---------- especialidades index ---------- */
.spec { padding: clamp(40px, 6vw, 90px) 0 clamp(90px, 11vw, 170px); position: relative; }
.spec__head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: clamp(36px, 5vw, 70px); }
.spec__head h2 { max-width: 11em; }
.spec__head p { max-width: 24em; color: var(--muted); margin: 0 0 6px; }
.spec__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.spec__row { border-bottom: 1px solid var(--line); }
.spec__row a { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 40px; gap: 32px; align-items: center; padding: clamp(18px, 2.2vw, 30px) 0; text-decoration: none; position: relative; }
.spec__name { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 3.6vw, 58px); line-height: 1.02; letter-spacing: -.012em; transition: transform .5s var(--ease), color .3s; }
.spec__line { color: var(--muted); font-size: 16px; line-height: 1.5; transition: color .3s; }
.spec__go { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; transition: background .3s, border-color .3s, color .3s; }
.spec__go svg { width: 16px; height: 16px; }
.spec__row a:hover .spec__name { transform: translateX(14px); color: var(--brass); }
.spec__row a:hover .spec__go { background: var(--ink); border-color: var(--ink); color: var(--porcelain); }
.spec__peek { position: fixed; z-index: 5; left: 0; top: 0; width: 300px; aspect-ratio: 4 / 5; pointer-events: none; overflow: hidden; border-radius: 3px; opacity: 0; transform: translate(-50%, -50%) scale(.9); transition: opacity .3s; box-shadow: 0 30px 60px -20px rgba(0,0,0,.35); }
.spec__peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.spec__peek img.on { opacity: 1; }
.spec__more { margin-top: 36px; }

/* ---------- el plano ---------- */
.plano { position: relative; }
.plano__stage { min-height: 100svh; padding: calc(var(--hh) + 3vh) 0 5vh; display: flex; flex-direction: column; justify-content: center; }
.plano__head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: clamp(22px, 3vh, 40px); }
.plano__head h2 { font-size: clamp(40px, 5vw, 80px); }
.plano__head p { color: #ddd6cd; max-width: 27em; margin: 0 0 6px; font-size: 18px; }
.plano__body { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(260px, 1fr); gap: clamp(24px, 3.4vw, 56px); align-items: center; }
.plano__fig { position: relative; margin: 0; }
.plano__frame { position: relative; aspect-ratio: 1000 / 516; overflow: hidden; border-radius: 2px; background: #1b1816; }
.plano__layer { position: absolute; inset: 0; }
.plano__layer img, .plano__layer svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.plano.js .plano__after { clip-path: inset(0 50% 0 50%); }
.plano__lines path { fill: none; stroke: var(--brass-l); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.plano__lines .contact { stroke-width: 1.2; }
.plano__lines .guide { stroke: rgba(244,241,236,.85); stroke-width: 1.1; stroke-dasharray: 5 6; }
.plano__lines text { fill: var(--porcelain); font: 500 13px var(--sans); letter-spacing: .02em; paint-order: stroke; stroke: rgba(27,24,22,.7); stroke-width: 3px; }
.plano__lines .tick { stroke: var(--brass-l); stroke-width: 1.1; }
.plano__veil { position: absolute; inset: 0; background: rgba(20,18,16,.35); pointer-events: none; }
.plano__tag { position: absolute; left: 14px; top: 12px; font-size: 12.5px; letter-spacing: .02em; background: rgba(27,24,22,.72); padding: 5px 10px; border-radius: 99px; }
.plano__tag--a { left: auto; right: 14px; opacity: 0; }
.plano__steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 4px; }
.plano__step { padding: 18px 0 18px 22px; border-left: 1px solid var(--line-d); position: relative; transition: border-color .4s; }
.plano__step::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px; background: var(--brass-l); transform: scaleY(0); transform-origin: top; transition: transform .6s var(--ease); }
.plano__step.on::before { transform: scaleY(1); }
.plano__step h3 { font-size: 26px; margin-bottom: 8px; transition: opacity .4s; }
.plano__step p { color: #d8d1c8; font-size: 15.5px; line-height: 1.55; margin: 0; transition: opacity .4s; }
.plano.js .plano__step:not(.on) h3, .plano.js .plano__step:not(.on) p { opacity: .38; }
.plano__case { margin-top: 18px; max-width: 60em; }
.plano__case--m { display: none; }
.plano__values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); padding: clamp(60px, 7vw, 100px) 0 clamp(70px, 8vw, 120px); border-top: 1px solid var(--line-d); margin-top: clamp(40px, 5vw, 70px); }
.plano__values h3 { font-size: clamp(26px, 2.4vw, 36px); margin-bottom: 12px; }
.plano__values p { color: #d8d1c8; margin: 0; }
.plano__cta { grid-column: 1 / -1; margin-top: 10px; }

/* ---------- familia ---------- */
.familia { padding: clamp(100px, 12vw, 180px) 0 clamp(60px, 7vw, 100px); overflow: hidden; }
.familia__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 90px); align-items: end; }
.familia__img { position: relative; overflow: hidden; border-radius: 2px; }
.familia__img img { width: 100%; aspect-ratio: 1205 / 1000; object-fit: cover; object-position: 50% 30%; }
.familia h2 { margin-bottom: 28px; }
.familia__facts { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 0; }
.familia__facts li { padding: 14px 0; border-top: 1px solid var(--line); font-family: var(--serif); font-size: clamp(21px, 1.7vw, 25px); line-height: 1.25; }
.team { margin-top: clamp(70px, 9vw, 130px); }
.team__track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 max(var(--gut), (100% - var(--max)) / 2) 18px; scroll-padding-inline: max(var(--gut), (100% - var(--max)) / 2); scrollbar-width: thin; scrollbar-color: var(--line) transparent; cursor: grab; }
.team__track:active { cursor: grabbing; }
.team__card { flex: none; width: clamp(180px, 17vw, 250px); scroll-snap-align: start; margin: 0; }
.team__card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; border-radius: 2px; background: #3b3632; -webkit-user-drag: none; user-select: none; }
.team__card figcaption { padding-top: 12px; }
.team__card b { display: block; font-weight: 500; font-size: 15.5px; line-height: 1.3; }
.team__card span { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.35; margin-top: 3px; }
.team__foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 26px; }
.team__btns { display: flex; gap: 8px; }
.team__btns button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: none; display: grid; place-items: center; cursor: pointer; }
.team__btns button:hover { background: var(--ink); color: var(--porcelain); border-color: var(--ink); }
.team__btns svg { width: 16px; height: 16px; }

/* ---------- reviews ---------- */
.resenas { padding: clamp(90px, 11vw, 160px) 0; }
.resenas__head { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; margin-bottom: clamp(40px, 5vw, 70px); }
.resenas__score { text-align: right; }
.resenas__score b { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(56px, 6vw, 96px); line-height: .9; }
.resenas__stars { display: inline-flex; gap: 3px; color: var(--brass); margin: 10px 0 6px; }
.resenas__stars svg { width: 16px; height: 16px; }
.resenas__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 64px) clamp(32px, 5vw, 90px); }
.review { margin: 0; padding-top: 24px; border-top: 1px solid var(--line); }
.review blockquote { margin: 0 0 18px; font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 1.9vw, 29px); line-height: 1.3; }
.review figcaption { font-size: 15px; color: var(--muted); }
.review:nth-child(2) { margin-top: clamp(0px, 6vw, 110px); }
.review:nth-child(4) { margin-top: clamp(0px, 3vw, 50px); }
.resenas__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 22px; align-items: center; margin-top: clamp(50px, 6vw, 90px); padding-top: 28px; border-top: 1px solid var(--line); }
.resenas__foot p { margin: 0; max-width: 40em; }

/* ---------- solidaridad ---------- */
.gota { padding: clamp(90px, 11vw, 160px) 0; }
.gota__grid { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(32px, 6vw, 110px); align-items: center; }
.gota__img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }
.gota blockquote { margin: 0 0 14px; font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 3.4vw, 54px); line-height: 1.1; letter-spacing: -.01em; }
.gota cite { display: block; font-style: normal; color: var(--muted-d); margin-bottom: 34px; font-size: 15px; }
.gota p { max-width: 36em; color: #ddd6cd; }

/* ---------- casa (visit) ---------- */
.casa { position: relative; }
.casa__photo { position: relative; height: 92svh; min-height: 520px; overflow: hidden; }
.casa__photo img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: 50% 55%; }
.casa__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(25,22,20,.1) 30%, rgba(25,22,20,.78) 100%); }
.casa__over { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(36px, 7vh, 80px); color: var(--porcelain); }
.casa__over h2 { max-width: 12.5em; font-size: clamp(40px, 5.4vw, 88px); margin-bottom: 20px; }
.casa__over p { max-width: 32em; font-size: 19px; color: #e7e1d9; margin: 0; }
.casa__info { padding: clamp(60px, 7vw, 110px) 0 clamp(80px, 9vw, 130px); }
.casa__grid { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: clamp(28px, 4vw, 64px); }
.info dt { font-size: 13.5px; color: var(--muted); margin: 0 0 6px; }
.info dd { margin: 0 0 26px; font-size: 18px; line-height: 1.45; }
.info dd a { text-decoration: none; border-bottom: 1px solid var(--line); }
.info dd a:hover { border-color: currentColor; }
.hours { width: 100%; border-collapse: collapse; font-size: 16px; }
.hours td { padding: 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.hours td:last-child { text-align: right; white-space: nowrap; padding-left: 14px; font-variant-numeric: tabular-nums; }
.casa__map { margin: 0; }
.casa__map > svg { width: 100%; height: auto; border-radius: 2px; display: block; }
.casa__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

/* ---------- blog teaser + cards ---------- */
.bteaser { padding: clamp(80px, 9vw, 140px) 0; }
.bteaser__head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 40px; }
.cards { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 40px); }
.card { text-decoration: none; display: block; }
.card__img { overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 3; background: var(--paper); }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover .card__img img { transform: scale(1.04); }
.card time { display: block; font-size: 13.5px; color: var(--muted); margin: 16px 0 8px; }
.card h3 { font-size: clamp(21px, 1.6vw, 25px); line-height: 1.2; }
.card p { color: var(--muted); font-size: 15.5px; margin: 10px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- footer ---------- */
.ftr { background: var(--graphite); color: var(--porcelain); padding: clamp(80px, 9vw, 140px) 0 calc(36px + env(safe-area-inset-bottom)); }
.ftr__big { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 30px; padding-bottom: clamp(50px, 6vw, 90px); border-bottom: 1px solid var(--line-d); }
.ftr__big p { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 5vw, 80px); line-height: 1.02; letter-spacing: -.015em; max-width: 9em; }
.ftr__cols { display: grid; grid-template-columns: 1.1fr 1fr 1.35fr 1.3fr; gap: 36px; padding: clamp(46px, 5vw, 70px) 0; }
.ftr h4 { margin: 0 0 14px; font: 500 13.5px var(--sans); color: var(--muted-d); letter-spacing: .01em; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin: 0 0 8px; }
.ftr a { text-decoration: none; }
.ftr a:hover { color: var(--brass-l); }
.ftr__logo { width: 210px; margin-bottom: 22px; }
.ftr__addr { color: #ddd6cd; font-size: 16px; }
.ftr .hours td { border-color: var(--line-d); font-size: 14px; }
.nl { display: grid; gap: 10px; }
.nl p { color: var(--muted-d); font-size: 15px; margin: 0 0 6px; }
.nl__row { display: flex; gap: 8px; }
.field { width: 100%; min-height: 50px; border: 1px solid var(--line-d); background: transparent; border-radius: 999px; padding: 12px 18px; color: inherit; font: inherit; font-size: 16px; }
.field::placeholder { color: var(--muted-d); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--muted-d); }
.check input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--brass); flex: none; }
.ftr__members { padding: 34px 0; border-top: 1px solid var(--line-d); display: flex; flex-wrap: wrap; align-items: center; gap: 22px 40px; }
.ftr__members span { font-size: 13.5px; color: var(--muted-d); flex-basis: 100%; }
.ftr__members a { opacity: .9; transition: opacity .3s; }
.ftr__members a:hover { opacity: 1; }
.ftr__members a { background: var(--white); border-radius: 4px; padding: 10px 14px; height: 60px; display: grid; place-items: center; }
.ftr__members img { max-height: 40px; max-width: 150px; width: auto; height: auto; filter: grayscale(1) contrast(1.05); }
.ftr__bottom { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; padding-top: 28px; border-top: 1px solid var(--line-d); font-size: 14px; color: var(--muted-d); }
.ftr__legal { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.socials { display: flex; gap: 6px; }
.socials a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-d); border-radius: 50%; }
.socials svg { width: 18px; height: 18px; }
.socials a:hover { border-color: var(--brass-l); }
.note { margin-top: 10px; font-size: 14px; color: var(--brass-l); }
.porcelain .note, .paper .note { color: var(--brass); }

/* ---------- inner pages ---------- */
.porcelain { background: var(--porcelain); }
.paper { background: var(--paper); }
.phead { position: relative; background: var(--graphite); color: var(--porcelain); padding: calc(var(--hh) + clamp(48px, 8vw, 110px)) 0 clamp(56px, 7vw, 100px); overflow: hidden; }
.phead__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: end; }
.phead h1 { font-size: clamp(44px, 6vw, 100px); margin-bottom: 26px; }
.phead .lead { color: #e1dad1; max-width: 30em; }
.phead__img { position: relative; overflow: hidden; border-radius: 2px; }
.phead__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.phead__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.crumbs { font-size: 13.5px; color: var(--muted-d); margin-bottom: 22px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--porcelain); }
.sec { padding: clamp(70px, 8vw, 130px) 0; }
.sec + .sec.porcelain, .sec.paper + .sec.paper { padding-top: 0; }
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 90px); }
.split > h2 { font-size: clamp(32px, 3.6vw, 56px); position: sticky; top: calc(var(--hh) + 28px); align-self: start; }
.prose { font-size: 18px; line-height: 1.65; max-width: 44em; }
.prose h2 { font-size: clamp(30px, 3vw, 46px); margin: 1.6em 0 .6em; }
.prose h3 { font-size: clamp(22px, 1.8vw, 28px); margin: 1.6em 0 .5em; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1.1em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--brass); }
.prose a { text-decoration-color: var(--brass); text-underline-offset: 3px; }
.prose strong { font-weight: 600; }
.prose figure { margin: 2em 0; }
.prose figure img { width: 100%; border-radius: 2px; }
.prose blockquote { margin: 1.6em 0; padding-left: 22px; border-left: 1px solid var(--brass); font-family: var(--serif); font-size: 1.3em; line-height: 1.35; }
.ticks { list-style: none; padding: 0 !important; display: grid; gap: 0; }
.ticks li { padding: 14px 0 14px 34px; border-top: 1px solid var(--line); position: relative; margin: 0 !important; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 23px; width: 14px; height: 7px; border-left: 1.5px solid var(--brass); border-bottom: 1.5px solid var(--brass); transform: rotate(-45deg); }
.dark .ticks li { border-color: var(--line-d); }
.dark .ticks li::before { border-color: var(--brass-l); }
.ticks b { font-weight: 600; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0; counter-reset: st; }
.steps li { padding: 26px 26px 0 0; border-top: 1px solid var(--line); position: relative; counter-increment: st; }
.steps li::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--brass); }
.steps h3 { font-size: 23px; margin-bottom: 10px; }
.steps p { color: var(--muted); font-size: 16px; }
.dark .steps li { border-color: var(--line-d); }
.dark .steps p { color: #d8d1c8; }
.dark .steps li::before { background: var(--brass-l); }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0 !important; }
.pill-list li { margin: 0 !important; padding: 9px 16px; border: 1px solid var(--line); border-radius: 99px; font-size: 15.5px; }
.video { position: relative; display: block; text-decoration: none; overflow: hidden; border-radius: 2px; }
.video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .8s var(--ease); }
.video:hover img { transform: scale(1.03); }
.video__play { position: absolute; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 12px; background: rgba(27,24,22,.78); color: var(--porcelain); padding: 10px 18px 10px 10px; border-radius: 99px; font-size: 15px; font-weight: 500; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.video__play i { width: 34px; height: 34px; border-radius: 50%; background: var(--porcelain); display: grid; place-items: center; color: var(--ink); }
.video__play svg { width: 12px; height: 12px; margin-left: 2px; }
.video__cap { margin-top: 14px; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-family: var(--serif); font-size: clamp(20px, 1.7vw, 25px); line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; position: relative; transition: transform .35s var(--ease), background .3s; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .35s var(--ease); }
.faq details[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.faq details > div { padding: 0 60px 26px 0; color: var(--muted); font-size: 17px; }
.faq details > div p:last-child { margin: 0; }
.dark .faq, .dark .faq details, .dark .faq summary i { border-color: var(--line-d); }
.dark .faq details > div { color: #d8d1c8; }
.quoteband { padding: clamp(80px, 10vw, 150px) 0; text-align: center; }
.quoteband blockquote { margin: 0 auto; max-width: 18em; font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 4vw, 64px); line-height: 1.1; }
.quoteband cite { display: block; margin-top: 18px; font-style: normal; color: var(--muted-d); }
.compare { position: relative; overflow: hidden; border-radius: 2px; user-select: none; touch-action: pan-y; background: #1b1816; --x: 50%; }
.compare img { width: 100%; display: block; }
.compare__b { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.compare__b img { width: 100%; height: 100%; object-fit: cover; }
.compare__h { position: absolute; top: 0; bottom: 0; left: var(--x); width: 44px; margin-left: -22px; cursor: ew-resize; display: grid; place-items: center; background: none; border: 0; padding: 0; }
.compare__h::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1.5px; background: var(--porcelain); }
.compare__h span { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--porcelain); color: var(--ink); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.compare__h svg { width: 18px; height: 18px; }
.compare__lab { position: absolute; top: 12px; font-size: 12.5px; background: rgba(27,24,22,.72); color: var(--porcelain); padding: 4px 10px; border-radius: 99px; }
.compare__lab--b { left: 12px; } .compare__lab--a { right: 12px; }
.cases { display: grid; gap: clamp(40px, 5vw, 70px); }
.case { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.case h3 { margin-bottom: 12px; }
.case p { color: var(--muted); }
.reveal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.reveal { position: relative; margin: 0; overflow: hidden; border-radius: 2px; }
.reveal img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.reveal .reveal__b { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
.reveal.on .reveal__b { opacity: 1; }
.reveal button { position: absolute; left: 12px; bottom: 12px; min-height: 40px; padding: 8px 14px; border-radius: 99px; border: 0; background: rgba(27,24,22,.78); color: var(--porcelain); font-size: 14px; cursor: pointer; }
.cta-band { padding: clamp(70px, 8vw, 120px) 0; }
.cta-band__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 90px); }
.cta-band h2 { font-size: clamp(36px, 4.4vw, 70px); margin-bottom: 22px; }
.form { display: grid; gap: 12px; }
.form .field { border-color: var(--line-d); }
.porcelain .form .field, .paper .form .field { border-color: #cfc7bb; background: var(--white); }
textarea.field { border-radius: 22px; min-height: 120px; resize: vertical; }
.form__interest { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 4px 0; }
.form__interest legend { font-size: 14px; color: var(--muted-d); margin-bottom: 8px; }
.form__interest label { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border: 1px solid var(--line-d); border-radius: 99px; font-size: 14.5px; cursor: pointer; }
.form__interest input { accent-color: var(--brass); }
.form .check { color: var(--muted-d); }
.form__legal { font-size: 12.5px; line-height: 1.5; color: var(--muted-d); }
.form__legal a { text-decoration: underline; }
.hub { display: grid; gap: 0; border-top: 1px solid var(--line); }
.hub__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(22px, 3.5vw, 56px); padding: clamp(32px, 4vw, 56px) 0; border-bottom: 1px solid var(--line); align-items: center; }
.hub__row h2 { font-size: clamp(32px, 3.4vw, 54px); }
.hub__row p { color: var(--muted); margin: 0 0 16px; }
.hub__row img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 2px; }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.timeline li { list-style: none; padding: 26px 28px 0 0; border-top: 1px solid var(--line-d); position: relative; }
.timeline li::before { content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--brass-l); }
.timeline b { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 4.4vw, 72px); line-height: 1; margin-bottom: 14px; }
.timeline h3 { font-size: 24px; margin-bottom: 4px; }
.timeline em { display: block; font-style: normal; color: var(--brass-l); font-size: 14px; margin-bottom: 10px; }
.timeline p { color: #d8d1c8; font-size: 16px; }
.tl { margin: 0; padding: 0; }
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 44px); }
.numbers div { border-top: 1px solid var(--line); padding-top: 22px; }
.numbers b { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 4.6vw, 76px); line-height: 1; margin-bottom: 14px; }
.numbers p { color: var(--muted); font-size: 16px; margin: 0; }
.tgroup { margin-bottom: clamp(56px, 6vw, 90px); }
.tgroup > h2 { font-size: clamp(30px, 3vw, 46px); margin-bottom: 28px; }
.tgrid { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); max-width: calc(var(--n, 4) * 330px); gap: clamp(18px, 2vw, 30px); }
.tcard { text-align: left; border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }
.tcard img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; border-radius: 2px; background: #3b3632; transition: filter .4s; }
.tcard:hover img { filter: brightness(1.06); }
.tcard b { display: block; margin-top: 12px; font-weight: 500; font-size: 16.5px; }
.tcard span { display: block; color: var(--muted); font-size: 14px; line-height: 1.4; margin-top: 3px; }
.tcard em { display: inline-flex; gap: 8px; align-items: center; margin-top: 10px; font-style: normal; font-size: 14px; border-bottom: 1px solid currentColor; }
.bio { border: 0; padding: 0; margin: auto; width: min(960px, 100% - 32px); max-height: min(88vh, 900px); border-radius: 4px; background: var(--porcelain); color: var(--ink); overflow: auto; }
.bio::backdrop { background: rgba(20,18,16,.7); }
.bio__in { display: grid; grid-template-columns: 300px 1fr; }
.bio__in img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; min-height: 360px; }
.bio__txt { padding: 40px 44px 44px; }
.bio h3 { font-size: 36px; margin-bottom: 4px; }
.bio__role { color: var(--muted); margin-bottom: 18px; }
.bio q { display: block; font-family: var(--serif); font-size: 22px; line-height: 1.3; margin: 0 0 18px; quotes: "“" "”"; }
.bio ul { padding-left: 1.1em; margin: 16px 0 0; font-size: 16px; }
.bio li { margin-bottom: 6px; }
.bio li::marker { color: var(--brass); }
.bio__x { position: sticky; top: 0; float: right; margin: 10px 10px 0 0; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--porcelain); cursor: pointer; display: grid; place-items: center; z-index: 2; }
.found { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); padding: clamp(50px, 6vw, 90px) 0; border-top: 1px solid var(--line-d); align-items: center; }
.found blockquote { margin: 0 0 12px; font-family: var(--serif); font-size: clamp(26px, 2.6vw, 40px); line-height: 1.12; }
.found cite { display: block; font-style: normal; color: var(--muted-d); margin-bottom: 24px; }
.found p { color: #d8d1c8; }
.found__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.found__imgs img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }
.found__imgs img:only-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.spirit { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 50px); }
.spirit div { border-top: 1px solid var(--line); padding-top: 22px; }
.spirit h3 { font-size: 30px; margin-bottom: 12px; }
.spirit p { color: var(--muted); }
.post__head { padding: calc(var(--hh) + clamp(40px, 7vw, 100px)) 0 clamp(36px, 4vw, 56px); }
.post__head h1 { font-size: clamp(36px, 4.6vw, 72px); margin: 12px 0 0; text-transform: none; }
.post__cover { margin-bottom: clamp(40px, 5vw, 70px); }
.post__cover img { width: 100%; max-height: 78vh; object-fit: cover; border-radius: 2px; }
.post__body { padding-bottom: clamp(70px, 8vw, 120px); }
.legal { padding: calc(var(--hh) + clamp(40px, 6vw, 90px)) 0 clamp(70px, 8vw, 120px); }
.legal h1 { font-size: clamp(38px, 4.4vw, 68px); margin-bottom: 40px; }
.legal .prose { font-size: 16px; max-width: 52em; }
.legal .prose p { overflow-wrap: anywhere; }
.nf { min-height: 80svh; display: grid; place-items: center; text-align: center; padding: calc(var(--hh) + 40px) var(--gut) 60px; }
.nf h1 { font-size: clamp(40px, 6vw, 90px); margin-bottom: 16px; }

/* motion helpers: content is visible without JS */
.js-ready [data-in] { opacity: 0; transform: translateY(26px); }
.js-ready [data-in].in { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1.1s var(--ease); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .hdr__nav { gap: 18px; }
  .hdr__nav a { font-size: 14.5px; }
  .hdr__cta { display: none; }
}
@media (max-width: 980px) {
  :root { --hh: 64px; }
  body { font-size: 16.5px; }
  .hdr__nav, .hdr__in > .hdr__langs { display: none; }
  .hdr__logo { width: 142px; }
  .hdr__burger { display: grid; place-items: center; margin-left: auto; width: 48px; height: 48px; margin-right: -10px; border: 0; background: none; cursor: pointer; }
  .hdr__burger svg { width: 26px; height: 26px; }
  .hdr__call { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%; margin-left: auto; }
  .hdr__call + .hdr__burger { margin-left: 0; }
  .hdr__call svg { width: 18px; height: 18px; }
  .dock { position: fixed; z-index: 40; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(37,34,32,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--porcelain); border-radius: 999px; box-shadow: 0 14px 30px -10px rgba(0,0,0,.4); transition: transform .45s var(--ease), opacity .35s; }
  .dock a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; text-decoration: none; font-size: 15px; font-weight: 500; }
  .dock a + a { border-left: 1px solid rgba(255,255,255,.12); }
  .dock svg { width: 18px; height: 18px; }
  .dock.is-off { transform: translateY(140%); opacity: 0; }
  .ftr { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .welcome__grid, .spec__head, .plano__head, .plano__body, .familia__grid, .gota__grid, .casa__grid, .phead__grid, .split, .cta-band__grid, .case, .found, .hub__row { grid-template-columns: 1fr; }
  .spec__head { display: block; }
  .spec__head p { margin-top: 18px; }
  .spec__row a { grid-template-columns: 1fr 40px; gap: 6px 16px; }
  .spec__line { grid-column: 1; grid-row: 2; font-size: 15px; }
  .spec__go { grid-row: 1 / span 2; grid-column: 2; }
  .spec__peek { display: none; }
  .split > h2 { position: static; }
  .resenas__head { grid-template-columns: 1fr; }
  .resenas__score { text-align: left; }
  .resenas__list { grid-template-columns: 1fr; }
  .review:nth-child(n) { margin-top: 0; }
  .plano__values { grid-template-columns: 1fr; gap: 30px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .reveal-grid { grid-template-columns: 1fr 1fr; }
  .tgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
  .ftr__cols { grid-template-columns: 1fr 1fr; }
  .tgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .timeline, .numbers { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .steps { grid-template-columns: 1fr; }
  .steps li { padding-bottom: 16px; }
  .spirit { grid-template-columns: 1fr; }
  .bio__in { grid-template-columns: 1fr; }
  .bio__in img { min-height: 0; aspect-ratio: 4 / 3; height: auto; }
  .bio__txt { padding: 28px 24px 32px; }
  :is(html:not(.js-ready) .origen, .origen--static) .origen__caps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  h2 { font-size: clamp(36px, 10.5vw, 52px); }
  .btn { min-height: 50px; padding: 13px 20px; font-size: 15.5px; }
  .origen__intro { left: var(--gut); right: var(--gut); width: auto; top: auto; bottom: calc(22px + env(safe-area-inset-bottom)); }
  .origen__kicker { display: none; }
  .origen h1 { font-size: clamp(36px, 10vw, 46px); margin-bottom: 12px; }
  .origen__lede { font-size: 15.5px; line-height: 1.5; margin-bottom: 18px; }
  .origen__ctas { gap: 4px; }
  .origen__ctas .btn--solid { width: 100%; justify-content: center; }
  .origen__ctas .btn--line { border-color: transparent; padding-inline: 0; min-height: 44px; }
  .origen__caps { left: var(--gut); right: var(--gut); width: auto; bottom: calc(96px + env(safe-area-inset-bottom)); }
  .chap__y { font-size: 60px; margin-bottom: 8px; }
  .chap__t { font-size: 25px; }
  .chap__p { font-size: 15.5px; }
  .origen__quote { bottom: calc(100px + env(safe-area-inset-bottom)); }
  .origen__quote blockquote { font-size: clamp(36px, 10.4vw, 48px); }
  .origen__tick { display: none; }
  .origen__shade { background: linear-gradient(0deg, rgba(25,22,20,.94) 0%, rgba(25,22,20,.78) 38%, rgba(25,22,20,0) 66%); }
  :is(html:not(.js-ready) .origen, .origen--static) .origen__caps { grid-template-columns: 1fr; }
  .origen__dip { grid-template-columns: 1fr; }
  .welcome h2 { font-size: 44px; }
  .spec__name { font-size: 31px; }
  .plano__stage { padding-top: calc(var(--hh) + 18px); justify-content: flex-start; }
  .plano__head { margin-bottom: 18px; gap: 10px; }
  .plano__head h2 { font-size: 38px; }
  .plano__head p { font-size: 16px; }
  .plano__frame { aspect-ratio: 4 / 3.3; }
  .plano__head p { display: none; }
  .plano__head h2 { font-size: 34px; }
  .plano__fig .plano__case { display: none; }
  .plano__case--m { display: block; grid-column: 1 / -1; margin: 0; }
  .plano__layer { left: -42%; right: -42%; }
  .plano__steps { display: block; position: relative; min-height: 150px; margin-top: 2px; }
  .plano__body { gap: 14px; }
  .plano__step { padding: 14px 0 0 18px; }
  .plano.js .plano__step { position: absolute; inset: 0 0 auto; opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; }
  .plano.js .plano__step.on { opacity: 1; visibility: visible; transition: opacity .45s; }
  .plano.js .plano__step.on h3, .plano.js .plano__step.on p { opacity: 1; }
  .plano__step h3 { font-size: 23px; }
  .plano__step p { font-size: 15px; }
  .plano__case { font-size: 13px; }
  .plano__lines text { font-size: 15px; }
  .familia__img img { aspect-ratio: 1 / 1; }
  .team__card { width: 64vw; }
  .casa__photo { height: 78svh; }
  .casa__over h2 { font-size: 38px; }
  .casa__over p { font-size: 17px; }
  .cards { grid-template-columns: 1fr; }
  .ftr__cols { grid-template-columns: 1fr; gap: 30px; }
  .ftr__big p { font-size: 40px; }
  .tgrid { grid-template-columns: 1fr 1fr; }
  .ftr__members { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .ftr__members span { grid-column: 1 / -1; }
  .ftr__members a { padding: 8px; }
  .timeline, .numbers { grid-template-columns: 1fr; }
  .reveal-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .faq details > div { padding-right: 0; }
  .nl__row { flex-direction: column; }
  .phead h1 { font-size: clamp(40px, 11vw, 56px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .js-ready [data-in] { opacity: 1; transform: none; }
}

/* big screens: the layout grows with the screen instead of floating in the middle */
@media (min-width: 1800px) {
  :root { --max: 1680px; --hh: 84px; }
  body { font-size: 18.5px; }
  .hdr__logo { width: 190px; }
  .hdr__nav a { font-size: 16.5px; }
  .origen h1 { font-size: clamp(96px, 5vw, 136px); }
  .origen__intro { width: min(44vw, 900px); }
  .origen__lede { font-size: 23px; }
  .chap__y { font-size: clamp(116px, 6vw, 150px); }
  .chap__t { font-size: 40px; } .chap__p { font-size: 19px; }
  .origen__caps { width: min(720px, 40vw); }
  .origen__quote blockquote { font-size: clamp(70px, 3.8vw, 100px); }
  h2 { font-size: clamp(84px, 4.6vw, 112px); }
  .spec__name { font-size: clamp(58px, 3.2vw, 76px); }
  .spec__line, .plano__step p { font-size: 18px; }
  .plano__head h2 { font-size: clamp(80px, 4.4vw, 104px); }
  .plano__step h3 { font-size: 32px; }
  .review blockquote { font-size: 32px; }
  .prose { font-size: 20px; }
  .phead h1 { font-size: clamp(100px, 5.4vw, 130px); }
}
@media (min-width: 2400px) { :root { --max: 2000px; } body { font-size: 20px; } }