/* ================================================================
   LETY ZÚÑIGA — v8 · Osklen-fidelity rewrite
   Reference: osklen.com.br (Aparelho Estúdio · Deco.cx)
   Pattern: fixed slim top bar (3 actions), full-bleed editorial
   media, transparent overlays, generous white space, no chips,
   no decorative chapter tags, neutral palette.
   ================================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  background: #F8F8F8;       /* match body bg so no 1px white line shows around edges */
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
::selection { background: var(--ink); color: var(--bg); }

/* ---------- Tokens ---------- */
:root {
  /* Osklen real palette: uniform near-white #F8F8F8 across all sections */
  --bg: #F8F8F8;            /* osklen body bg, verified live */
  --bg-alt: #F8F8F8;        /* unified to match Osklen — no alternation, single bg site-wide */
  --ink: #111111;
  --ink-mute: #6B6B6B;
  --ink-soft: #2A2A2A;
  --ink-faint: #A8A8A8;

  /* Accent reservado solo a estado hover/active. NO decorativo. */
  --accent: #B89784;        /* hipnopalo profundo, casi imperceptible */
  --line: rgba(17, 17, 17, 0.12);
  --line-soft: rgba(17, 17, 17, 0.06);

  /* Overlay scrims */
  --scrim-top: linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0) 35%);
  --scrim-bottom: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 50%);

  /* Tipografía: Geist es el mejor análogo libre a Suisse Intl (la real de Osklen, comercial) */
  --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-display: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --pad-x: clamp(1rem, 3vw, 2.5rem);
  --section-y: clamp(1.25rem, 2.5vw, 2.25rem);   /* Osklen-tight rhythm — sections breathe via internal margins, not section padding */

  /* Easing — Osklen real value */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* Slim fixed bar height — Osklen real (--nav-h bumped to fit 80px PNG logo) */
  --topbar-h: 0px;          /* topbar removed; replaced by floating cards */
  --nav-h: 96px;
  --pill-h: 30px;        /* search/cta/icon pills (Osklen verified) */
  --link-h: 25px;        /* inner menu items (Osklen verified) */
  --pill-gap: 6px;
  --nav-side: clamp(16px, 2.2vw, 30px);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;             /* Osklen body p baseline */
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.3px;      /* Osklen body baseline */
  overflow-x: hidden;
}

/* ---------- Typography — Osklen verified scale ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -1.2px;
  line-height: 1.07;
}

p { max-width: 64ch; font-size: 15px; line-height: 1.55; letter-spacing: -0.3px; }

/* Eyebrow — Osklen subtle small label */
.eyebrow {
  font-size: 13px;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--ink-mute);
  text-transform: uppercase;
  display: inline-block;
}

/* ============================================================
   TOPBAR — thin dark band on top (osklen real pattern)
   ============================================================ */
.topbar {
  position: relative;             /* in normal flow, scrolls away with the page (NOT sticky) */
  width: 100%;
  height: var(--topbar-h);
  z-index: 5;
  background: #0A0A0A;
  color: rgba(255, 255, 255, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  font-weight: 400;
  padding: 0 var(--pad-x);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.topbar__inner { display: inline-flex; gap: 0.6em; align-items: center; }
.topbar__hide-sm { display: inline; }
.topbar a { color: inherit; border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 1px; }
.topbar a:hover { border-bottom-color: rgba(255,255,255,0.85); }
@media (max-width: 640px) {
  .topbar__hide-sm { display: none; }
  .topbar { font-size: 0.66rem; letter-spacing: 0.04em; }
}

/* ============================================================
   NAV — transparent layer below topbar with floating pills
   Left: single capsule with 4 menu items (active = inner sub-pill)
   Center: free-floating wordmark, NO pill
   Right: cluster of 4 separate pills with backdrop-blur
   ============================================================ */
.nav {
  position: fixed;              /* over the hero, doesn't take flow space (so hero stays under it) */
  top: var(--topbar-h);         /* initially below topbar; JS bumps to top:0 once topbar scrolls past */
  left: 0; right: 0;
  height: var(--nav-h);
  z-index: 50;
  background: transparent;
  pointer-events: none; /* pass-through; pills override */
  transition: top 0.2s var(--ease-soft), background 0.3s var(--ease-soft);
}

/* When over hero, optional dark overlay to ensure pill contrast on bright media */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-soft);
}
.nav.is-transparent::before { opacity: 1; }

.nav__bar {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 var(--nav-side);
  gap: 1rem;
  position: relative;
}

.nav__left   { justify-self: start;  display: flex; align-items: center; }
.nav__brand  { justify-self: center; }
.nav__right  { justify-self: end;    display: flex; align-items: center; gap: var(--pill-gap); }

/* ---------- Pill base — Osklen verified exact: blur(12px), no saturate ---------- */
.nav__pill,
.nav__cta,
.nav__icon-pill {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);                    /* Osklen exact (was 24+saturate) */
  -webkit-backdrop-filter: blur(12px);
  border-radius: 8px;
  height: var(--pill-h);
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-size: 15px;
  letter-spacing: -0.3px;
  font-weight: 400;
  transition: background 0.22s var(--ease-soft), color 0.22s var(--ease-soft);
}
@supports not (backdrop-filter: blur(1px)) {
  .nav__pill, .nav__cta, .nav__icon-pill {
    background: rgba(255, 255, 255, 0.92);
  }
}

/* ---------- Left: single capsule with menu items ---------- */
.nav__pill {
  padding: 0 4px;                                 /* Osklen px-1 inner spacing */
  gap: 0;
  height: var(--pill-h);                          /* match the wrapper, not just the items */
}
.nav__menu {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0; padding: 0;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  height: 26px;                                   /* Osklen exact */
  padding: 0 10px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.3px;
  line-height: 18px;                              /* Osklen exact */
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s var(--ease-soft);
}
.nav__link:hover { background: rgba(255, 255, 255, 0.7); }
.nav__link.is-current {
  background: rgba(255, 255, 255, 0.85);
  font-weight: 400;
}

/* ---------- Center: free-floating wordmark, NO pill ---------- */
.nav__brand {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: auto;
  transition: color 0.25s var(--ease-soft), opacity 0.2s;
  display: inline-flex;
  align-items: baseline;
  gap: 0.7rem;
}
.nav__brand:hover { opacity: 0.75; }
.nav__brand-meta {
  font-family: var(--font);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  font-weight: 400;
  color: var(--ink-mute);
  text-transform: uppercase;
}

/* When over a dark hero image, brand turns white */
.nav.is-transparent .nav__brand { color: #FFFFFF; }
.nav.is-transparent .nav__brand-meta { color: rgba(255,255,255,0.75); }

/* ---------- Right: cluster of separate pills (Osklen real) ---------- */
.nav__cta {
  padding: 0 10px;
  gap: 6px;
  cursor: pointer;
  border: 0;
  white-space: nowrap;
}
.nav__cta svg { width: 14px; height: 14px; flex-shrink: 0; }
.nav__cta:hover { background: rgba(255, 255, 255, 0.85); }

.nav__icon-pill {
  width: var(--pill-h);
  padding: 0;
  justify-content: center;
  border: 0;
  cursor: pointer;
}
.nav__icon-pill svg { width: 14px; height: 14px; }
.nav__icon-pill:hover { background: rgba(255, 255, 255, 0.85); }
.nav__icon-pill[aria-expanded="true"] { background: rgba(255, 255, 255, 0.92); }

/* ---------- Hamburger replacement of left pill on mobile ---------- */
.nav__hamburger {
  width: 16px; height: 10px;
  position: relative;
  display: inline-block;
  margin-right: 8px;
}
.nav__hamburger::before,
.nav__hamburger::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.35s var(--ease-out), top 0.2s var(--ease-soft) 0.15s;
}
.nav__hamburger::before { top: 1px; }
.nav__hamburger::after  { top: 7px; }
body.menu-open .nav__hamburger::before { top: 4px; transform: rotate(45deg); transition: top 0.2s var(--ease-soft), transform 0.35s var(--ease-out) 0.15s; }
body.menu-open .nav__hamburger::after  { top: 4px; transform: rotate(-45deg); transition: top 0.2s var(--ease-soft), transform 0.35s var(--ease-out) 0.15s; }

.nav__pill--mobile { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .nav__pill { display: none; }
  .nav__pill--mobile { display: inline-flex; }
  .nav__cta span { display: none; }
  .nav__cta { padding: 0; width: var(--pill-h); justify-content: center; gap: 0; }
}

@media (max-width: 640px) {
  :root {
    --topbar-h: 32px;
    --nav-h: 60px;
    --pill-h: 38px;
    --pill-gap: 5px;
    --nav-side: clamp(12px, 3vw, 18px);
  }
  .nav__brand { font-size: 0.9rem; letter-spacing: 0.16em; }
  .nav__brand-meta { display: none; }
  .topbar { font-size: 0.66rem; }
}

/* Spacer when content sits below fixed nav (pages without hero) */
body.has-fixed-content { padding-top: var(--nav-h); }   /* topbar now in flow; only nav-h offset needed */

/* ============================================================
   BRAND FLOATING — Osklen pattern (verified live DOM)
   `<div class="osk-brand-float">` is a sibling of `.nav`, NOT a descendant.
   Reason: `.nav` has z-index:100 which creates a stacking context.
   `mix-blend-mode: difference` inside that context only blends against
   siblings within the same context — the hero (a sibling of nav at body
   level) would NOT participate in the blend. As a body-level sibling with
   z-index 9990 and `mix-blend-mode: difference`, the brand blends against
   everything visually behind it, including the video in the hero.
   ============================================================ */
.osk-brand-float {
  position: fixed;
  top: var(--topbar-h);          /* JS adjusts dynamically: matches nav position as topbar scrolls away */
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;          /* let nav pills underneath stay clickable */
  mix-blend-mode: difference;
  filter: contrast(1.4) brightness(1.15);   /* amplify the result of the blend so mid-tones don't read as flat grey */
}
.osk-brand-float__link {
  pointer-events: auto;          /* the logo itself remains clickable */
  display: inline-flex;
  align-items: center;
}
.osk-brand-float__link img {
  height: 80px;
  width: auto;
  display: block;
}
@media (max-width: 640px) {
  .osk-brand-float__link img { height: 56px; }
}

/* ============================================================
   MEGAMENU — Osklen real (verified live DOM)
   abs · top:20 · l/r:30 · bg rgba(.7) · blur 20 · radius 12
   transition 0.3s cubic-bezier(0.16,1,0.3,1) max-h + opacity
   Closed: max-height 0 / opacity 0. Open: max-height 500.
   ============================================================ */
.megamenu {
  position: fixed;
  top: calc(var(--topbar-h) + 33px);   /* aligned with nav items center after --nav-h bumped to 96 for 80px logo */
  left: 30px;
  right: 30px;
  z-index: 48;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 12px;
  /* closed */
  opacity: 0;
  max-height: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 0.3s;
}
.megamenu.is-open {
  opacity: 1;
  max-height: 720px;                  /* enough room for image full height + content */
  visibility: visible;
  pointer-events: auto;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 0s;
}
@supports not (backdrop-filter: blur(1px)) {
  .megamenu { background: rgba(255, 255, 255, 0.96); }
}
@media (max-width: 1024px) {
  .megamenu { left: 15px; right: 15px; }
}

/* Inner grid — Osklen verified exact: 4 text cols where the LAST col is very wide
   (takes remaining space). Items align to left of the last col, the image sits as
   absolute positioned at the right edge. 4xl: 377 / 279 / 279 / 1fr (~844px).
   The .megamenu__feature is OUT of the grid flow (position: absolute). */
.megamenu__inner {
  display: grid;
  grid-template-columns: 281px 200px 200px 1fr;
  grid-template-rows: 1fr;
  gap: 0;
  padding: 76px 18px 112px;        /* pt bumped from 45→76 to match Osklen visual spacing */
  align-items: start;
  position: relative;
  min-height: 480px;
}
@media (min-width: 1280px) {
  .megamenu__inner {
    grid-template-columns: 325px 240px 240px 1fr;
  }
}
@media (min-width: 1920px) {
  .megamenu__inner {
    grid-template-columns: 377px 279px 279px 1fr;
  }
}

/* Cols 1-3 (regular): no padding, gap-4 between items */
.megamenu__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 0;
}
/* Featured column (col 0): px-[3px] padding, gap-[11px] between items */
.megamenu__col--featured {
  gap: 11px;
  padding: 0 3px;
}

.megamenu__col h5 {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  height: 25px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.2px;
  color: var(--ink-mute);
  margin: 0;
  text-transform: none;
}

.megamenu__col a {
  font-family: var(--font);
  font-size: 18px;                     /* Osklen regular item */
  font-weight: 400;
  letter-spacing: -0.4px;
  line-height: 1.45;
  color: var(--ink);
  padding: 0;
  transition: opacity 0.18s var(--ease-soft);
}
.megamenu__col a:hover { opacity: 0.55; }

/* Featured column items list — internal items only 3px gap */
.megamenu__col--featured {
  gap: 11px;
}
.megamenu__col--featured a {
  font-size: 23px;                     /* Osklen text-[23px] base */
  font-weight: 500;                    /* font-medium */
  line-height: 1.1;                    /* leading-extra-1 approx */
  letter-spacing: -0.014em;
}
@media (min-width: 1280px) {
  .megamenu__col--featured a {
    font-size: 27px;                   /* Osklen xll:text-[27px] */
    letter-spacing: -0.017em;
  }
}

/* Image column on the right (full height) */
/* Image — absolute positioned at right edge of megamenu (out of grid flow).
   In Osklen the image is ~280px wide and full height of the inner padding box. */
.megamenu__feature {
  position: absolute;
  top: 76px;                        /* match new megamenu__inner pad-top */
  right: 18px;
  bottom: 112px;
  width: 280px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ink);
}
@media (min-width: 1920px) {
  .megamenu__feature { width: 320px; }
}
.megamenu__feature img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.megamenu__feature-brand {
  position: absolute;
  bottom: 1rem; left: 1rem;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Trigger active state */
.nav__link[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.85);
}

@media (max-width: 920px) {
  .megamenu { display: none; }
}

/* ============================================================
   FULLSCREEN OVERLAY MENU (mobile only, hamburger trigger)
   ============================================================ */
.overlay-menu {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 49;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-out), visibility 0s linear 0.5s;
  display: flex;
  flex-direction: column;
  padding: calc(var(--topbar-h) + var(--nav-h) + 2rem) var(--pad-x) 2rem;
  overflow-y: auto;
}
body.menu-open .overlay-menu {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s var(--ease-out), visibility 0s linear 0s;
}

.overlay-menu__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  flex: 1;
  align-content: start;
}

.overlay-menu__primary {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.overlay-menu__primary a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.5vw, 4.2rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1;
  padding: 0.4rem 0;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 1rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), color 0.2s;
}
body.menu-open .overlay-menu__primary a {
  opacity: 1;
  transform: translateY(0);
}
body.menu-open .overlay-menu__primary a:nth-child(1) { transition-delay: 0.18s; }
body.menu-open .overlay-menu__primary a:nth-child(2) { transition-delay: 0.24s; }
body.menu-open .overlay-menu__primary a:nth-child(3) { transition-delay: 0.30s; }
body.menu-open .overlay-menu__primary a:nth-child(4) { transition-delay: 0.36s; }

.overlay-menu__primary a:hover { color: var(--ink-mute); }
.overlay-menu__primary a .num {
  font-family: var(--font);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  font-weight: 500;
  text-transform: uppercase;
  align-self: flex-start;
  padding-top: 0.7rem;
}

.overlay-menu__secondary {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-left: 1px solid var(--line-soft);
  padding-left: clamp(1rem, 3vw, 2.5rem);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out) 0.42s;
}
body.menu-open .overlay-menu__secondary { opacity: 1; }

.overlay-menu__group h5 {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.7rem;
}
.overlay-menu__group a {
  display: block;
  font-size: 0.92rem;
  padding: 0.25rem 0;
  color: var(--ink-soft);
  transition: color 0.2s;
}
.overlay-menu__group a:hover { color: var(--ink); }

.overlay-menu__footer {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.74rem;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 768px) {
  .overlay-menu__inner { grid-template-columns: 1fr; }
  .overlay-menu__secondary { border-left: 0; padding-left: 0; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); }
}

/* ============================================================
   SEARCH DRAWER (slides from top, full width, transparent feel)
   ============================================================ */
.search-drawer {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background: rgba(248, 248, 248, 0.94);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  /* No border-bottom when closed — it would show as a 1px white line at top of viewport */
  height: 0;
  overflow: hidden;
  transition: height 0.4s var(--ease-out);
}
.search-drawer.is-open {
  height: 220px;
  border-bottom: 1px solid var(--line-soft);    /* divider only when drawer is open */
}

.search-drawer__form {
  padding: calc(var(--topbar-h) + var(--nav-h) + 1rem) var(--pad-x) 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--line-soft);
  margin: 0 var(--pad-x);
}
.search-drawer__icon { color: var(--ink-mute); flex-shrink: 0; }
.search-drawer__input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding: 0.5rem 0;
}
.search-drawer__input::placeholder { color: var(--ink-faint); }
.search-drawer__hint {
  padding: 0.8rem var(--pad-x) 0;
  margin: 0 var(--pad-x);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}

/* ============================================================
   HERO — full-bleed editorial · minimal overlay text
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 540px;
  overflow: hidden;
  background: var(--ink);
}

.hero__slides {
  position: absolute;
  inset: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}
.hero__slide.is-active { opacity: 1; z-index: 1; }

.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.92);
}

/* Scrims for legibility — top for nav, bottom for overlay text */
.hero__slide::before,
.hero__slide::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  z-index: 1;
}
.hero__slide::before {
  top: 0; height: 35%;
  background: var(--scrim-top);
}
.hero__slide::after {
  bottom: 0; height: 50%;
  background: var(--scrim-bottom);
}

.hero__overlay {
  position: absolute;
  z-index: 2;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: clamp(3.5rem, 7vw, 6rem);
  color: #FFF;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 880px;
}

.hero__eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.85;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6.5vw, 5.4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  max-width: 18ch;
}

.hero__sub {
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  font-weight: 400;
  max-width: 56ch;
  opacity: 0.92;
  line-height: 1.5;
}

.hero__cta {
  margin-top: 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  padding: 0.85rem 1.4rem 0.85rem 1.6rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 100px;
  background: transparent;
  color: #FFF;
  align-self: flex-start;
  transition: background 0.3s var(--ease-soft), color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft);
}
.hero__cta:hover {
  background: #FFF;
  color: var(--ink);
  border-color: #FFF;
}
.hero__cta svg { width: 12px; height: 12px; }

.hero__counter {
  position: absolute;
  z-index: 2;
  top: calc(var(--topbar-h) + var(--nav-h) + 1.2rem);
  right: var(--nav-side);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.hero__counter b { font-weight: 500; color: #FFF; }
.hero__counter span { width: 22px; height: 1px; background: rgba(255,255,255,0.4); display: inline-block; }

.hero__nav {
  position: absolute;
  z-index: 2;
  bottom: calc(clamp(3.5rem, 7vw, 6rem) - 0.5rem);
  right: var(--pad-x);
  display: flex;
  gap: 0.5rem;
}
.hero__nav button {
  width: 38px;
  height: 38px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  transition: background 0.25s, color 0.25s;
}
.hero__nav button:hover { background: #FFF; color: var(--ink); }
.hero__nav button svg { width: 14px; height: 14px; }

@media (max-width: 640px) {
  .hero__overlay { bottom: 6rem; }
  .hero__nav { bottom: 1.5rem; right: var(--pad-x); }
  .hero__counter { top: calc(var(--nav-h-mobile) + 1rem); }
}

/* ============================================================
   SECTIONS · containers · editorial layout
   ============================================================ */
.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--alt { background: var(--bg-alt); }
/* .section--ink unified to body bg — no more dark band, matches Osklen uniform #F8F8F8 site */
.section--ink { background: var(--bg); color: var(--ink); }

.section--tight { padding-block: clamp(0.75rem, 1.5vw, 1.25rem); }
.section--flush-top { padding-top: 0; }

.container {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding-inline: var(--pad-x);
}

.container--narrow { max-width: 980px; }
.container--prose { max-width: 720px; }

/* Section intro: just eyebrow + headline, no decorative chips */
.section__intro {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.section__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);     /* Osklen 40px desktop section heading */
  font-weight: 500;
  letter-spacing: -1.2px;
  line-height: 1.07;
  color: var(--ink);
  max-width: 22ch;
}
.section__title--wide { max-width: 36ch; }
.section__title--full { max-width: none; }
.section__title em {
  font-style: normal;
  color: var(--ink-mute);
}

.section__sub {
  font-size: 20px;                       /* Osklen body p large: 20px / 500 / lh 24 */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ============================================================
   EDITORIAL FEATURE — image + text, generous space
   ============================================================ */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; gap: 2rem; }
}

.feature__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-alt);
  border-radius: 16px;        /* Osklen card image radius */
}
.feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.feature__media:hover img { transform: scale(1.03); }

.feature__media-tag {
  position: absolute;
  bottom: 1rem; left: 1rem;
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: -0.26px;
  line-height: 15.6px;
  text-transform: none;
  color: var(--ink);
  padding: 7px 10px;
  background: #FFFFFF;
  border-radius: 6px;
  font-weight: 400;
}

.feature__body {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.feature__title {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.4vw, 22px);    /* Osklen long descriptive heading: 17 mobile / 22 md+ */
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 0.95;
}

.feature__prose p {
  font-size: 16px;             /* Osklen body normal */
  line-height: 1.6;
  letter-spacing: -0.3px;
  color: var(--ink-soft);
}
.feature__prose p + p { margin-top: 0.9em; }
.feature__prose strong { font-weight: 500; color: var(--ink); }

.feature__cta-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

/* ============================================================
   LINK BUTTON (used in CTAs) — clean borderless or outlined
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 15px;             /* Osklen CTA size */
  font-weight: 400;
  letter-spacing: -0.3px;
  padding: 7px 14px 8px;       /* Osklen-style asymmetric padding */
  border: 1px solid var(--ink);
  border-radius: 17px;         /* Osklen CTA radius (was 100px pill) */
  background: var(--ink);
  color: var(--bg);
  cursor: pointer;
  transition: background 0.3s var(--ease-soft), color 0.3s var(--ease-soft);
}
.btn:hover { background: transparent; color: var(--ink); }
.btn svg { width: 12px; height: 12px; }

.btn--bare {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--bare:hover { background: var(--ink); color: var(--bg); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
  padding: 0.7rem 1.1rem;
  font-size: 14px;
  letter-spacing: -0.28px;
}
.btn--ghost:hover { border-color: var(--ink); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.3px;
  color: var(--ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.text-link:hover { color: var(--ink-mute); }
.text-link svg { width: 11px; height: 11px; transition: transform 0.3s var(--ease-out); }
.text-link:hover svg { transform: translate(2px, -2px); }

/* ============================================================
   COLLECTION GRID — editorial cards (osklen "transparent card" idea)
   Used for "¿Para quién?" and "Enfoques"
   ============================================================ */
.collection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.coll-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
}

.coll-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-alt);
  border-radius: 16px;        /* Osklen card image radius */
}
.coll-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.coll-card:hover .coll-card__media img { transform: scale(1.04); }

/* Card tag — Osklen pill style: white bg, dark text, rounded 6, no uppercase decoration */
.coll-card__tag {
  position: absolute;
  top: 1rem; left: 1rem;
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: -0.26px;
  line-height: 15.6px;
  text-transform: none;
  color: var(--ink);
  padding: 7px 10px;
  background: #FFFFFF;
  border-radius: 6px;
  font-weight: 400;
}

.coll-card__caption {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-inline: 0.1rem;
}
.coll-card__title {
  font-family: var(--font-display);
  font-size: 18px;             /* Osklen card title size */
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--ink);
}
.coll-card__sub {
  font-size: 14px;
  letter-spacing: -0.28px;
  color: var(--ink-mute);
  letter-spacing: 0.005em;
}

/* ============================================================
   APPROACHES — three marcos clínicos
   ============================================================ */
.approaches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.approach {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: clamp(1.5rem, 2.5vw, 2.2rem);
  background: var(--bg);
  border: 1px solid var(--line-soft);
  transition: border-color 0.3s var(--ease-soft), background 0.3s var(--ease-soft);
}
.section--alt .approach { background: var(--bg); }
.approach:hover {
  border-color: var(--ink);
}

.approach__media {
  position: relative;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  margin: -1.5rem -1.5rem 0;
  border-radius: 16px;        /* Osklen card image radius */
}
@media (min-width: 600px) {
  .approach__media { margin: calc(-1 * clamp(1.5rem, 2.5vw, 2.2rem)); margin-bottom: 0.5rem; }
}
.approach__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.approach:hover .approach__media img { transform: scale(1.04); }

.approach__title {
  font-family: var(--font-display);
  font-size: 22px;             /* Osklen sub-heading */
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 1.1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.approach__title em {
  font-style: normal;
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-mute);
}

.approach__body p {
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.3px;
  color: var(--ink-soft);
}

.approach__cta {
  margin-top: auto;
  padding-top: 0.5rem;
}

/* ============================================================
   FILTER BAR — horizontal text filters (like osklen catalog)
   ============================================================ */
/* Filter chips — Osklen exact: white pills, dark active state, radius 6 */
.filters {
  display: flex;
  gap: 8px;                                     /* small gap between chips */
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.filters::-webkit-scrollbar { display: none; }

.filter {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.26px;
  line-height: 15.6px;
  color: var(--ink);
  padding: 7px 10px;
  border-radius: 6px;
  background: #FFFFFF;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.filter:hover { background: #F0F0F0; }
.filter.is-active {
  background: var(--ink);                       /* dark fill for active state, Osklen pattern */
  color: #FFFFFF;
}

/* ============================================================
   FOR-WHOM list (proceso.html) — numbered editorial list
   ============================================================ */
.for-whom {
  border-top: 1px solid var(--line);
  margin-top: 1.5rem;
}
.for-whom li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1.5rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
@media (max-width: 640px) {
  .for-whom li { grid-template-columns: 60px 1fr; gap: 1rem; }
}
.for-whom__num {
  font-family: var(--font);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}
.for-whom__text {
  font-family: var(--font-display);
  font-size: 20px;             /* Osklen body large */
  font-weight: 500;
  letter-spacing: -0.2px;
  line-height: 1.2;
  color: var(--ink);
}
.for-whom__text em {
  font-style: normal;
  color: var(--ink-mute);
  font-size: 0.88em;
}

/* ============================================================
   FEE block (proceso.html)
   ============================================================ */
.fee {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  background: var(--bg);
  border: 1px solid var(--line);
  max-width: 720px;
}
.fee__amount {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);     /* unify with section headings */
  font-weight: 500;
  letter-spacing: -1.2px;
  line-height: 1.07;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.fee__amount em {
  font-style: normal;
  font-size: 0.5em;
  font-weight: 400;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.fee__amount-meta {
  font-size: 0.8rem;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  margin-top: 0.4rem;
}
.fee__note {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.6;
  border-top: 1px solid var(--line-soft);
  padding-top: 1.5rem;
}

/* ============================================================
   BIO (quien-soy.html)
   ============================================================ */
.bio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
@media (max-width: 860px) { .bio { grid-template-columns: 1fr; } }

.bio__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-alt);
  border-radius: 16px;        /* Osklen card image radius */
}
.bio__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.bio__portrait-tag {
  position: absolute;
  bottom: 1rem; left: 1rem;
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: -0.26px;
  line-height: 15.6px;
  text-transform: none;
  color: var(--ink);
  padding: 7px 10px;
  background: #FFFFFF;
  border-radius: 6px;
  font-weight: 400;
}

.bio__text {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.bio__text h1, .bio__text h2 {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.4vw, 22px);    /* Osklen long descriptive heading: 17 mobile / 22 md+ */
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 0.95;
}
.bio__text h1 em, .bio__text h2 em {
  font-style: normal;
  color: var(--ink-mute);
}

.bio__prose p {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.3px;
  color: var(--ink-soft);
}
.bio__prose p + p { margin-top: 1em; }
.bio__prose strong { font-weight: 500; color: var(--ink); }

/* ============================================================
   CREDS (formación)
   ============================================================ */
.creds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
}
.creds__group h3 {
  font-family: var(--font-display);
  font-size: 18px;             /* Osklen card-level title */
  font-weight: 500;
  letter-spacing: -0.4px;
  margin-bottom: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}
.creds__list { counter-reset: cred; }
.creds__list li {
  position: relative;
  padding: 0.8rem 0 0.8rem 2.6rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.creds__list li::before {
  counter-increment: cred;
  content: counter(cred, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0.85rem;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  font-family: var(--font);
  font-weight: 500;
}
.creds__list em {
  font-style: normal;
  color: var(--ink-mute);
  display: block;
  font-size: 0.84em;
  margin-top: 0.15rem;
}

/* ============================================================
   CLOSING CTA (full-bleed band)
   ============================================================ */
.closing {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  align-items: flex-start;
  max-width: 880px;
}

.closing__title {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.4vw, 22px);    /* Osklen long descriptive heading: 17 mobile / 22 md+ */
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 0.95;
}
.closing__title em {
  font-style: normal;
  color: var(--ink-mute);
}
/* .section--ink overrides removed — section now inherits the uniform #F8F8F8 site bg
   so the default light-bg styles for .closing__title em, .btn, .btn--bare, .text-link apply */

.closing__cta-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* ============================================================
   FOOTER — minimal columns, simple text links (osklen pattern)
   ============================================================ */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
  padding: clamp(3rem, 6vw, 5rem) var(--pad-x) clamp(1.5rem, 3vw, 2.5rem);
}

.footer__top {
  max-width: 1480px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.4fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}
@media (max-width: 760px) { .footer__top { grid-template-columns: 1fr; } }

.footer__motto {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.4vw, 22px);    /* Osklen long descriptive heading: 17 mobile / 22 md+ */
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 0.95;
  max-width: 22ch;
}
.footer__motto em { font-style: normal; color: var(--ink-mute); }

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.86rem;
}
.footer__contact a { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 1px; align-self: flex-start; transition: color 0.2s, border-color 0.2s; }
.footer__contact a:hover { color: var(--ink-mute); border-color: var(--ink-mute); }

.footer__grid {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 760px) { .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
@media (max-width: 460px) { .footer__grid { grid-template-columns: 1fr; } }

/* Footer column heading — Osklen exact: 13px / 500 / -0.1px / black / no uppercase */
.footer__col h4 {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.1px;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 16px;
}
.footer__col ul { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
/* Footer link as Osklen pill — bg #FDFDFD, radius 6, pad 5-10, font 13px / 400 / -0.21px */
.footer__col a, .footer__col span {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 5px 10px;
  border-radius: 6px;
  background: #FDFDFD;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.21px;
  line-height: 15.6px;
  color: var(--ink);
  transition: background 0.2s, color 0.2s;
}
.footer__col a:hover { background: #F0F0F0; }

.footer__bottom {
  max-width: 1480px;
  margin: clamp(1.5rem, 3vw, 2rem) auto 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
}

/* ============================================================
   REVEAL — sober opacity-only, no transforms (osklen feel)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .hero__slide, .hero__media img,
  .feature__media img, .coll-card__media img,
  .approach__media img, .overlay-menu__primary a {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1;
  }
}

/* ---------- Utilities ---------- */
.divider { height: 1px; background: var(--line-soft); border: 0; margin: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Body lock when overlay menu is open ---------- */
body.menu-open { overflow: hidden; }

/* ============================================================
   INTAKE FORM (#contacto on proceso.html)
   Editorial form — minimal underlined inputs, generous spacing
   Uses existing design tokens · no new variables introduced
   ============================================================ */
.intake-section { padding: clamp(4rem, 8vw, 7rem) 0 clamp(5rem, 10vw, 8rem); }
.intake-section .container { max-width: 760px; }

.intake__intro {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  text-align: left;
}
.intake__intro h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0.6rem 0 1.2rem;
}
.intake__intro h2 em {
  font-style: italic;
  color: var(--accent);
}
.intake__intro p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-mute);
  max-width: 56ch;
  margin: 0;
}

.intake {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 3.5vw, 3rem);
}

.intake__group {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.intake__group:last-of-type { border-bottom: 0; padding-bottom: 0; }

.intake__group-title {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.4rem;
}

.intake__row { display: grid; gap: 1.4rem; }
.intake__row--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .intake__row--2 { grid-template-columns: 1fr; } }

.intake__field { display: flex; flex-direction: column; gap: 0.4rem; }
.intake__field label {
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  font-weight: 500;
}
.intake__field label .req {
  color: var(--accent);
  margin-left: 0.2rem;
}
.intake__field .hint {
  font-size: 0.72rem;
  color: var(--ink-faint);
  font-style: italic;
  margin-top: 0.2rem;
  letter-spacing: 0;
  font-weight: 400;
}

.intake__field input,
.intake__field select,
.intake__field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 0.6rem 0 0.7rem;
  font-family: var(--font);
  font-size: 0.96rem;
  color: var(--ink);
  border-radius: 0;
  transition: border-color 0.2s var(--ease-soft);
  -webkit-appearance: none;
  appearance: none;
}
.intake__field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236B6B6B' stroke-width='1.4'><path d='M1 1.5 L6 6 L11 1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.4rem center;
  background-size: 12px 8px;
  padding-right: 2rem;
  cursor: pointer;
}
.intake__field textarea {
  resize: vertical;
  min-height: 6rem;
  line-height: 1.55;
  font-family: var(--font);
}
.intake__field input:focus,
.intake__field select:focus,
.intake__field textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
}
.intake__field input:invalid:not(:placeholder-shown),
.intake__field textarea:invalid:not(:placeholder-shown) {
  border-bottom-color: var(--accent);
}

/* Honeypot — visually hidden, off-screen, bot-bait */
.intake__honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
  tab-index: -1;
}

/* Checkbox — minimal */
.intake__check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: start;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-soft);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  cursor: pointer;
}
.intake__check input {
  width: 18px; height: 18px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 0.2rem;
  position: relative;
  transition: all 0.18s var(--ease-soft);
}
.intake__check input:checked {
  background: var(--ink);
  border-color: var(--ink);
}
.intake__check input:checked::after {
  content: "";
  position: absolute;
  inset: 3px 4px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' fill='none' stroke='white' stroke-width='1.6'><path d='M1 4 L4 7 L9 1' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
.intake__check input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

.intake__captcha {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 1rem;
  align-items: end;
}
@media (max-width: 480px) { .intake__captcha { grid-template-columns: 1fr; } }

.intake__actions {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.intake__feedback {
  font-size: 0.86rem;
  line-height: 1.55;
  padding: 0.8rem 1rem;
  border-radius: 0.4rem;
  display: none;
  margin-top: 1rem;
}
.intake__feedback.is-error {
  display: block;
  background: rgba(184, 151, 132, 0.12);
  color: var(--accent);
  border: 1px solid rgba(184, 151, 132, 0.3);
}
.intake__feedback.is-success {
  display: block;
  background: rgba(17, 17, 17, 0.04);
  color: var(--ink);
  border: 1px solid var(--line);
}

.intake__contact-direct {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  font-size: 0.84rem;
  color: var(--ink-mute);
  align-items: center;
}
.intake__contact-direct a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
  transition: text-decoration-color 0.2s;
}
.intake__contact-direct a:hover { text-decoration-color: var(--ink); }


/* ============================================================
   CLOSING VIDEO BANNER — Osklen exact (last visible content before footer)
   Matches Osklen: w-full flex items-center justify-center
                   py-[78px] md:py-0 px-[26.5px] md:px-40
                   md:min-h-[562px] md:max-h-[854px] md:h-screen
   Inner frame:    relative overflow-hidden rounded
                   md:max-w-[1002px] md:aspect-video md:h-[39.17vw] md:w-[69.6vw]
   ============================================================ */
.osk-closing {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  padding: 78px 26.5px;
  min-height: 0;
  max-height: none;
}
@media (min-width: 768px) {
  .osk-closing {
    padding: 0 160px;
    min-height: 562px;
    max-height: 854px;
    height: 100vh;
  }
}

.osk-closing__frame {
  position: relative;
  display: block;
  overflow: hidden;
  width: calc(100vw - 1rem);
  padding-top: 100%;            /* mobile: square aspect via padding-trick */
  border-radius: 32px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.35s var(--ease-out);
}
@media (min-width: 768px) {
  .osk-closing__frame {
    padding-top: 0;
    max-width: 1002px;
    aspect-ratio: 16 / 9;
    height: 39.17vw;
    width: 69.6vw;
    border-radius: 32px;
  }
}
@media (min-width: 1536px) {
  .osk-closing__frame { max-width: 1216px; }
}
.osk-closing__frame:hover { transform: translateY(-2px); }
.osk-closing__frame:hover .osk-closing__media { transform: scale(1.03); }

.osk-closing__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  transition: transform 0.6s var(--ease-out);
}

/* CTA pill — same style as twin banners (Osklen exact) */
.osk-closing__cta {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  height: 34.8px;
  padding: 7.93px 14px;
  background: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-radius: 9999px;
  color: rgb(17, 17, 17);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  pointer-events: none;
  transition: background 0.2s ease;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .osk-closing__cta {
    bottom: 48px;
    height: 46px;
    font-size: 30px;
    padding: 7.93px 18px;
  }
}
.osk-closing__frame:hover .osk-closing__cta {
  background: rgba(255, 255, 255, 0.7);
}


/* ============================================================
   FOOTER — Osklen sticky reveal pattern
   Footer is fixed at viewport bottom (z:0). Page content (.osk-below-fold)
   has a solid bg + higher z-index so it covers the footer until the user
   scrolls past it. As they scroll to the end, the content slides up and
   reveals the footer "from underneath" — no JS needed.
   ============================================================ */
.osk-footer-wrap {
  position: relative;
  width: 100%;
  z-index: 0;
}
@media (min-width: 768px) {
  .osk-footer-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
  }
}

.osk-footer {
  position: relative;
  width: 100%;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

/* Two-tone layered bg: outer #8F8F8F creates a 2px-ish accent edge,
   inner #EDEDED is the visible footer surface (Osklen exact). */
.osk-footer__outer {
  background: #8F8F8F;
  border-radius: 16px 16px 0 0;
  padding: 0 0 0 0;
}
/* Inner card: rounded ALL 4 corners (16px). z-index 10 so it renders ABOVE credit.
   Inner's rounded BOTTOM corners reveal the credit's #D8D8D8 BEHIND through the
   corner cuts (Osklen exact effect: cols card sits on top of credit). */
.osk-footer__inner {
  background: #EDEDED;
  border-radius: 16px;
  padding: 24px 16px 32px;
  position: relative;
  z-index: 10;
}
@media (min-width: 768px) {
  .osk-footer__inner {
    padding: 27px 30px 36px;
  }
}

/* Columns container: flex row, each column w-fit (Osklen exact).
   Total columns occupy LEFT portion only (~1080px at vw=1648), leaving right
   empty for the floating newsletter card to overlap. */
.osk-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 16px;
}
@media (min-width: 768px) {
  .osk-footer__cols {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
  }
  .osk-footer__col {
    flex: 0 0 auto;        /* don't grow/shrink — width = content */
    min-width: 162px;       /* matches Osklen LI width 162px */
    width: max-content;
  }
}

.osk-footer__heading {
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 500;
  color: rgb(17, 17, 17);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  padding-left: 10px;
}

.osk-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

/* Pill links — Osklen exact: bg #FDFDFD, radius 6px, padding 5px 10px,
   font 13px, color rgb(17,17,17), height 19px */
.osk-footer__pill {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 5px 10px;
  background: #FDFDFD;
  border-radius: 6px;
  color: rgb(17, 17, 17);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01625em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s var(--ease-soft);
}
.osk-footer__pill:hover {
  background: #0A0A0A;
  color: #FFFFFF;
}
.osk-footer__pill:hover { text-decoration: none; }

/* Layer 2: credit bar bg #D8D8D8 — Osklen EXACT effect:
   - margin-top -15px overlaps inner from BELOW (z-5 vs inner z-10 → credit BEHIND)
   - Inner's rounded BOTTOM corners (16px) reveal credit's #D8D8D8 through the cuts
   - Credit's rounded BOTTOM corners (16px) reveal bar's #8F8F8F behind
   - Two layers of subtle rounded corners visible: cols card top + credit bottom */
.osk-footer__credit {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #D8D8D8;
  color: #3A3A3A;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: -0.2px;
  line-height: 12px;
  padding: 27px 16px 10px;
  margin: -15px 0 0;          /* overlap inner from BELOW — credit z-5 < inner z-10 */
  border-radius: 0 0 16px 16px;
  position: relative;
  z-index: 5;                  /* less than inner (10) so credit sits BEHIND */
}
@media (min-width: 768px) {
  .osk-footer__credit {
    padding: 27px 0 10px;
  }
}

/* Layer 3: bottom company info bar bg #8F8F8F — Osklen EXACT spec:
   padding 18px 10px 8px, gap 24px, font 10px / 12px line-height,
   align-items center for vertical centering of text in the bar. */
.osk-footer__bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 16px;
  font-family: var(--font);
  font-size: 9px;
  font-weight: 500;
  color: #3A3A3A;
  background: #8F8F8F;
  letter-spacing: -0.2px;
  line-height: 12px;
}
.osk-footer__bar-right {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.osk-footer__bar-right svg { display: inline-block; vertical-align: -2px; margin-right: 4px; }
@media (min-width: 768px) {
  .osk-footer__bar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 18px 10px 8px;     /* Osklen exact: pt-[18px] pb-[8px] px-2.5 */
    gap: 24px;                  /* md:gap-6 */
    font-size: 10px;            /* md:text-[10px] */
  }
}

/* Osklen exact pattern: invisible spacer below closing banner adds body height
   so fixed footer doesn't overlap content at max scroll. Spacer height tuned to
   produce the EXACT 66px visual gap Osklen has between last content and footer.
   Osklen uses h-72 (288px) but their footer is 408px tall; mine is 294px so I
   compensate by using a SHORTER spacer (174px) to keep the gap at 66px. */
.osk-footer-spacer {
  display: none;
}
@media (min-width: 768px) {
  .osk-footer-spacer {
    display: flex;
    height: 174px;              /* tuned for 66px visual gap given my 294px footer */
    width: 100%;
    background: transparent;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
}


/* ============================================================
   BELOW-FOLD WRAPPER — Osklen #below-fold pattern
   Pulls all post-hero content UP by -4vh so the rounded bottom
   of the hero shell tucks underneath. Creates the parallax-like
   feel where content "rises" as you scroll past the hero.
   ============================================================ */
/* Osklen EXACT replica of #below-fold + #below-fold-overlay structure:
   #below-fold (wrapper):
     - md:z-10 transition-transform ease-in-out duration-500
     - bg-transparent md:relative md:w-full
     - md:top-[-4vh]
     - -translate-y-44 md:-translate-y-36 xl:-translate-y-36
   #below-fold-overlay (bg child):
     - md:absolute md:bg-[#f8f8f8] md:h-full md:w-full md:top-[20px] md:z-[-1] */
.osk-below-fold {
  position: relative;
  width: 100%;
  background: transparent;
  z-index: 10;
  top: 0;
  transform: translateY(-11rem);   /* mobile: -translate-y-44 = 11rem */
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 768px) {
  .osk-below-fold {
    top: -4vh;                       /* md:top-[-4vh] */
    transform: translateY(-9rem);    /* md:-translate-y-36 = 9rem */
  }
}
@media (min-width: 1280px) {
  .osk-below-fold {
    transform: translateY(-9rem);    /* xl:-translate-y-36 (same as md) */
  }
}

/* Background overlay child — Osklen #below-fold-overlay exact */
.osk-below-fold__bg {
  display: none;                     /* mobile: no bg overlay (let body bg show) */
}
@media (min-width: 768px) {
  .osk-below-fold__bg {
    display: block;
    position: absolute;
    top: 20px;                       /* md:top-[20px] */
    left: 0;
    right: 0;
    height: 100%;                    /* md:h-full */
    width: 100%;                     /* md:w-full */
    background: #F8F8F8;             /* md:bg-[#f8f8f8] */
    z-index: -1;                     /* md:z-[-1] */
    pointer-events: none;
  }
}

/* ============================================================
   TWIN BANNERS — Osklen .containerBanner pattern (post-hero)
   ============================================================ */
.osk-twins {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 20px;
  padding: 0 20px;
  margin: 0 0 28px;
}
@media (min-width: 768px) {
  .osk-twins {
    flex-direction: row;
    gap: 24px;
    padding: 0 30px;
    margin: 0 0 24px;
  }
}

.osk-twins__banner {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 353 / 400;
  overflow: hidden;
  background: #FFFFFF;
  border-radius: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.35s var(--ease-out);
}
@media (min-width: 768px) { .osk-twins__banner { aspect-ratio: 678 / 882; border-radius: 32px; } }
@media (min-width: 1280px) { .osk-twins__banner { aspect-ratio: 828 / 980; border-radius: 32px; } }

.osk-twins__banner:hover { transform: translateY(-2px); }
.osk-twins__banner:hover .osk-twins__media { transform: scale(1.03); }

.osk-twins__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s var(--ease-out);
  z-index: 0;
}

/* CTA pill — Osklen exact: rgba(255,255,255,0.4) + blur(16), radius full,
   font-medium 30px (md) / 17px (mobile), letter-spacing -0.02em */
.osk-twins__cta {
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  height: 34.8px;
  padding: 7.93px 10px;
  background: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-radius: 9999px;
  color: rgb(17, 17, 17);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  transition: background 0.2s ease;
  pointer-events: none;       /* whole banner is the link */
}
.osk-twins__banner:hover .osk-twins__cta {
  background: rgba(255, 255, 255, 0.7);
}
@media (min-width: 768px) {
  .osk-twins__cta {
    height: 46px;
    font-size: 30px;
    padding: 7.93px 14px;
  }
}


/* ============================================================
   FLOATING ZONES — Osklen exact recipe, adapted for psicoterapia
   ============================================================ */

/* ---- TOP-LEFT: Promo/status cards (Osklen .offerpopup) ---- */
.osk-offerpopup {
  position: fixed;
  top: calc(var(--nav-h) + 8px);    /* under nav so backdrop-blur reads against bg */
  left: 30px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;             /* container doesn't block; children do */
  animation: osk-slide-top 0.6s var(--ease-out) both;
}
@keyframes osk-slide-top {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.osk-offerpopup__cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.osk-offerpopup__card {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 47px;
  padding: 0 14px 0 10px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: none;
  border-radius: 14px;
  font-family: var(--font);
  text-align: left;
  transition: opacity 0.3s var(--ease-soft), transform 0.3s var(--ease-soft);
}
.osk-offerpopup__card:hover { transform: translateY(-1px); }
.osk-offerpopup__card.is-dismissed { opacity: 0; pointer-events: none; transform: translateY(-8px); }
.osk-offerpopup__card[hidden] { display: none; }

/* "+N" recovery badge — Osklen exact: outer transparent button (.offerpopup-button) padded around
   a single 23×23 white circle holding the "+N" count. Click to restore all dismissed cards.
   align-self:flex-start prevents the column flex container from stretching the trigger
   to match the cards' width above it. */
.osk-offerpopup__trigger {
  pointer-events: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 4px 8px 4px 4px;
  margin-top: 0;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: -0.01em;
  color: rgb(34, 34, 34);
  transition: transform 0.18s var(--ease-soft);
}
.osk-offerpopup__trigger[hidden] { display: none; }
.osk-offerpopup__trigger:hover { transform: scale(1.05); }
.osk-offerpopup__trigger-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 9999px;
  background: #FFFFFF;
  color: rgb(34, 34, 34);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.osk-offerpopup__dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
  flex-shrink: 0;
}

.osk-offerpopup__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}
.osk-offerpopup__kicker {
  font-size: 9px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(0,0,0,0.4);
  font-weight: 400;
}
.osk-offerpopup__headline {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.24px;
  color: rgba(0,0,0,0.6);
  font-weight: 400;
  white-space: nowrap;
}

/* Close X — Osklen exact: 18×18 solid white circle, translated OUTSIDE the card top-right corner.
   Hidden (opacity 0 + visibility hidden) by default; reveals smoothly on card hover. */
.osk-offerpopup__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9999px;
  background: #FFFFFF;
  color: #000000;
  cursor: pointer;
  transform: translate(33%, -33%);   /* Osklen: translate-x-1/3 -translate-y-1/3 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in, visibility 0.2s ease-in;
  padding: 0;
}
.osk-offerpopup__close svg { width: 8px; height: 8px; }
.osk-offerpopup__card:hover .osk-offerpopup__close {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 768px) {
  .osk-offerpopup { left: 5px; gap: 6px; top: calc(var(--nav-h-mobile, 60px) + 4px); }
  .osk-offerpopup__card { height: 42px; padding: 0 12px 0 10px; }
  .osk-offerpopup__headline { font-size: 11px; }
}


/* ---- BOTTOM-LEFT: Utility pills (Osklen NeoAssistChat — duration-stagger) ----
   Pills are absolute-positioned, all anchored at the trigger location (bottom:0).
   Each pill has a unique translateY when expanded (stacks upward) AND a unique
   transition-DURATION. State change toggles the class for ALL pills simultaneously,
   but the per-pill duration creates the wave: short duration = instant snap,
   long duration = slow fade. Identical to Osklen's NeoAssistChat. */
.osk-helpchat {
  position: fixed;
  bottom: 21px;
  left: 30px;
  z-index: 40;
}

.osk-helpchat__pills {
  position: relative;
  width: max-content;
  height: 23px;            /* footprint = 1 pill (where trigger sits); pills float above */
}

.osk-helpchat__pill {
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 23px;
  padding: 4px 8px 4px 4px;
  background: #FFFFFF;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font);
  font-size: 10px;
  line-height: 12px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: rgb(34, 34, 34);
  white-space: nowrap;
  opacity: 1;
  transform: translateY(0);
  transition-property: opacity, transform, background, color;
  transition-timing-function: ease;
  transition-delay: 0s;
}
.osk-helpchat__pill svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.osk-helpchat__pill:hover {
  background: #0A0A0A;
  color: #FFFFFF;
}
.osk-helpchat__pill--crisis {
  background: #B23A3A;
  color: #FFFFFF;
}
.osk-helpchat__pill--crisis:hover {
  background: #8E2A2A;
  color: #FFFFFF;
}
.osk-helpchat__pill--close {
  background: rgba(0,0,0,0.05);
  color: rgba(0,0,0,0.6);
}
.osk-helpchat__pill--close:hover {
  background: #0A0A0A;
  color: #FFFFFF;
}

/* DOM order in markup → visual position when expanded (top to bottom):
   1 Crisis  2 WhatsApp  3 Agendar  4 Cédula  5 Preguntas  6 Cerrar
   Translate offsets stack upward in 27px steps (21px pill + 6px gap). */
.osk-helpchat__pill:nth-child(1) { transform: translateY(-135px); transition-duration: 801ms; }
.osk-helpchat__pill:nth-child(2) { transform: translateY(-108px); transition-duration: 601ms; }
.osk-helpchat__pill:nth-child(3) { transform: translateY(-81px);  transition-duration: 401ms; }
.osk-helpchat__pill:nth-child(4) { transform: translateY(-54px);  transition-duration: 201ms; }
.osk-helpchat__pill:nth-child(5) { transform: translateY(-27px);  transition-duration: 1ms;   }
.osk-helpchat__pill:nth-child(6) { transform: translateY(0);      transition-duration: 1001ms; }

/* COLLAPSED: all pills snap back to translateY(0) + opacity 0 simultaneously,
   each with its own duration. No separate delays — pure Osklen pattern. */
.osk-helpchat.is-collapsed .osk-helpchat__pill {
  opacity: 0;
  transform: translateY(0);
  pointer-events: none;
}

.osk-helpchat__trigger-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: transparent;
  color: inherit;
  flex-shrink: 0;
}
.osk-helpchat__trigger-text { white-space: nowrap; }
/* Trigger sits at the same bottom-left spot as Cerrar pill (which itself sits at translateY(0)).
   When OPENING: trigger fades out instantly (opacity 0, no delay) to clear the way.
   When CLOSING: trigger fades back in once Cerrar has faded out (Cerrar takes 1s,
   so trigger waits ~700ms then fades in). This produces the smooth Osklen-like
   motion where the close button visibly resolves into the + Ayuda pill. */
.osk-helpchat__trigger {
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-flex;          /* always inline-flex; opacity controls visibility */
  align-items: center;
  gap: 6px;
  height: 23px;
  padding: 4px 8px 4px 4px;
  background: #FFFFFF;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 10px;
  line-height: 12px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: rgb(34, 34, 34);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, background 0.18s, color 0.18s;
}
.osk-helpchat__trigger:hover { background: #0A0A0A; color: #FFFFFF; }
.osk-helpchat.is-collapsed .osk-helpchat__trigger {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease 0.7s, background 0.18s, color 0.18s;   /* wait for Cerrar pill (1s) to mostly fade */
}

@media (max-width: 768px) {
  .osk-helpchat { left: 5px; bottom: 16px; }
}


/* ---- Lead-magnet card (Osklen newsletter pattern) ----
   Sits as the 6th flex child of the footer columns row, taking the empty
   right space via `flex-grow + self-end + justify-end`. NOT fixed-position
   anymore — that was creating overlap with the column pills. */
.osk-newsletter {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 10px;
  min-width: 180px;
  padding: 16px 23px 16px 10px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-radius: 14px;
  font-family: var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s var(--ease-soft);
  margin-left: auto;             /* pushes the card to the right end of the flex row */
}
@media (min-width: 768px) {
  .osk-newsletter { flex: 0 0 auto; }
}
.osk-newsletter:hover { transform: translateY(-1px); }

.osk-newsletter__dot {
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
  flex-shrink: 0;
}
.osk-newsletter__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.osk-newsletter__kicker {
  font-size: 9px;
  line-height: 7.47px;
  letter-spacing: -0.18px;
  color: rgb(58, 58, 58);
  font-weight: 400;
}
.osk-newsletter__headline {
  font-size: 12px;
  line-height: 14.4px;
  letter-spacing: -0.24px;
  color: rgba(0,0,0,0.6);
  font-weight: 400;
}
@media (max-width: 768px) {
  .osk-newsletter { right: 5px; bottom: 16px; min-width: 0; padding: 12px 18px 12px 10px; }
}


/* ---- CRISIS MODAL ---- */
.osk-crisis {
  position: fixed;
  inset: 0;
  z-index: 9995;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.osk-crisis[hidden] { display: none; }
.osk-crisis__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: osk-fade-in 0.25s ease-out both;
}
@keyframes osk-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.osk-crisis__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  background: #FFFFFF;
  border-radius: 18px;
  padding: 28px 28px 24px;
  box-shadow: 0 30px 80px rgba(10,10,10,0.25);
  animation: osk-pop-in 0.28s var(--ease-out) both;
}
@keyframes osk-pop-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.osk-crisis__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9999px;
  background: rgba(0,0,0,0.05);
  color: rgba(0,0,0,0.6);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.osk-crisis__close:hover { background: #0A0A0A; color: #FFFFFF; }

.osk-crisis__kicker {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #B23A3A;
  font-weight: 500;
  margin: 0 0 8px;
}
.osk-crisis__title {
  font-size: 20px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 12px;
}
.osk-crisis__lead {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(0,0,0,0.65);
  margin: 0 0 18px;
}
.osk-crisis__list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.osk-crisis__list li {
  padding: 12px 14px;
  background: #F4F2EE;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
}
.osk-crisis__list strong {
  font-weight: 500;
}
.osk-crisis__list a {
  color: #B23A3A;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.osk-crisis__list a:hover { text-decoration: underline; }
.osk-crisis__note {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(0,0,0,0.55);
  margin: 0;
}
.osk-crisis__note a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ============================================================
   OSKLEN HOME BLOCKS — 4 secciones replicando el layout exacto
   ============================================================ */


/* ---- BLOCK 1: ORIENTADOR (Osklen "Nossas Lojas" pattern) ----
   Exact replica of Osklen: outer card with shadow + 2-col grid,
   left = title + gray prompt-box + chips, right = image. */
.osk-finder {
  width: 100%;
  padding: 32px 20px;
  display: flex;
  justify-content: center;
}
@media (min-width: 768px) {
  .osk-finder { padding: 32px 30px; }
}
.osk-finder__card {
  width: 100%;
  max-width: 1228px;
  display: grid;
  grid-template-columns: 1fr;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0px 0px 32.914px 0px rgba(0,0,0,0.08);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .osk-finder__card {
    grid-template-columns: 1fr 1fr;
    min-height: 720px;
  }
}
.osk-finder__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 32px 24px;
  gap: 32px;
}
@media (min-width: 1280px) {
  .osk-finder__inner { padding: 56px 40px; gap: 0; }
}
.osk-finder__top {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 1280px) {
  .osk-finder__top { gap: 24px; margin-bottom: 32px; }
}
.osk-finder__title {
  font-family: var(--font);
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: #000000;
  margin: 0;
}
@media (max-width: 768px) {
  .osk-finder__title { font-size: clamp(28px, 6vw, 40px); }
}
.osk-finder__promptbox {
  width: 100%;
  min-height: 90px;
  padding: 20px 12px;
  background: #EDEDED;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 1280px) {
  .osk-finder__promptbox { width: 344px; }
}
.osk-finder__lead {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(0,0,0,0.7);
  margin: 0;
}
.osk-finder__lead strong { color: #000000; font-weight: 500; }
.osk-finder__inputwrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 32px;
  padding: 6px 6px 6px 10px;
  background: #FFFFFF;
  border-radius: 7px;
}
.osk-finder__input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink);
  min-width: 0;
}
.osk-finder__input::placeholder { color: rgba(0,0,0,0.4); }
.osk-finder__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: var(--ink);
  color: #FFFFFF;
  border-radius: 9999px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.18s;
}
.osk-finder__submit:hover { transform: translateX(2px); }
.osk-finder__result {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  padding: 10px 12px;
  background: #FFFFFF;
  border-radius: 8px;
  animation: osk-result-in 0.4s var(--ease-out) both;
}
.osk-finder__result strong { font-weight: 500; }
@keyframes osk-result-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.osk-finder__bottom {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.osk-finder__count {
  font-size: 16px;
  color: #000000;
  margin: 0;
  font-weight: 400;
}
.osk-finder__count strong { font-weight: 500; }
.osk-finder__pills {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
}
.osk-finder__pill {
  display: inline-flex;
  align-items: center;
  height: 29px;
  min-width: fit-content;
  padding: 0 10px;
  background: #EDEDED;
  color: #5C5C5C;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.osk-finder__pill:hover {
  background: #FFFFFF;
  border-color: #E0E0E0;
  color: #191919;
}
.osk-finder__media {
  position: relative;
  min-height: 280px;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .osk-finder__media { min-height: 720px; }
}
.osk-finder__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* footer (legacy, repurposed-out — moved into __bottom inside __inner) */
.osk-finder__footer { display: none; }


/* ---- BLOCK 2: HEADLINE (Osklen "A nova coleção" pattern) ----
   Exact: section bg #F8F8F8, py-52 mobile / py-80 desktop (208/320px),
   centered H2 22px / 500 / leading-tight. Massive whitespace = airy. */
.osk-headline {
  width: 100%;
  background: #F8F8F8;
  padding: 208px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}
@media (min-width: 768px) {
  .osk-headline { padding: 320px 30px; }
}
.osk-headline__text {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: normal;
  font-weight: 500;
  color: #000000;
  margin: 0;
  text-align: center;
  max-width: 760px;
}
@media (min-width: 768px) {
  .osk-headline__text { font-size: 22px; }
}


/* ---- BLOCK 3: COLLECTION (Osklen "Coleção" pattern: filters + horizontal slider) ---- */
.osk-collection {
  width: 100%;
  padding: 12px 0 32px;
}

.osk-collection__filters {
  display: flex;
  gap: 8px;
  padding: 0 20px 20px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.osk-collection__filters::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .osk-collection__filters { padding: 0 30px 24px; }
}

.osk-collection__filter {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  background: #FFFFFF;
  color: var(--ink);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}
.osk-collection__filter:hover {
  background: var(--ink);
  color: #FFFFFF;
}
.osk-collection__filter.is-active {
  background: var(--ink);
  color: #FFFFFF;
}

.osk-collection__track {
  display: flex;
  gap: 12px;
  padding: 0 20px 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 20px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.osk-collection__track::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .osk-collection__track {
    padding: 0 30px 4px;
    gap: 16px;                    /* md:gap-4 (Osklen) */
    scroll-padding-left: 30px;
  }
}
@media (min-width: 1024px) {
  .osk-collection__track {
    gap: 21px;                    /* lg:gap-[21px] (Osklen exact) */
  }
}

/* Card sizing — Osklen exact: pixels-fixed widths (197 mobile / 380 md / 408 xl).
   Shows ~3 full cards + 4th partial at xl viewport. Padding-bottom 4px (pb-1). */
.osk-collection__card {
  flex: 0 0 auto;
  width: 197px;
  text-decoration: none;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 4px;            /* pb-1 = 0.25rem (Osklen exact) */
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
}
@media (min-width: 640px) {
  .osk-collection__card { width: 320px; }
}
@media (min-width: 768px) {
  .osk-collection__card { width: 380px; }     /* md:w-[380px] Osklen exact */
}
@media (min-width: 1280px) {
  .osk-collection__card { width: 408px; }     /* xl:w-[408px] Osklen exact */
}
.osk-collection__card[hidden] { display: none; }
.osk-collection__card:hover .osk-collection__media img {
  transform: scale(1.04);
}

/* Media aspect: Osklen uses 197/296.76 mobile, 380/569 md, 408/571 xl.
   These are all close enough that we use 380/569 (≈2:3) at most breakpoints
   and 408/571 (≈5:7 less tall) at xl to match Osklen exact. */
.osk-collection__media {
  position: relative;
  width: 100%;
  aspect-ratio: 380 / 569;
  background: #EFEDE8;
  border-radius: 16px;
  overflow: hidden;
}
@media (min-width: 1280px) {
  .osk-collection__media {
    aspect-ratio: 408 / 571;       /* Osklen xl exact: less tall, more square */
  }
}
.osk-collection__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}

/* Caption — Osklen exact: name LEFT + tag RIGHT, both ~18px medium weight.
   Layout: "Camisa Eco Double Pocket   R$ 697" with space-between. */
.osk-collection__caption {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 6px;
}
.osk-collection__name {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.25;
}
.osk-collection__tag {
  font-size: 16px;
  font-weight: 400;
  color: rgba(0,0,0,0.6);
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .osk-collection__name { font-size: 15px; }
  .osk-collection__tag { font-size: 13px; }
}

/* Scroll bar — Osklen home Splide scrollbar exact: 828px effective track
   (max-w-[1110px] + px-[141px]), 9px tall, #D8D8D8 track + #8F8F8F thumb,
   border-radius 22.82px, centered. */
.osk-collection__bar {
  margin: 40px auto 0;
  width: calc(100% - 40px);
  max-width: 828px;
  height: 9px;
  background: #D8D8D8;
  border-radius: 22.82px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .osk-collection__bar {
    margin: 60px auto 0;
    width: 828px;
    max-width: calc(100% - 60px);
  }
}
.osk-collection__bar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;
  max-width: 100%;
  background: #8F8F8F;
  border-radius: 22.82px;
  transition: left 0.2s ease, width 0.2s ease;
}


/* ---- BLOCK 4: PROMO BANNER (Osklen "Accessories" pattern) ---- */
.osk-promo {
  width: 100%;
  padding: 24px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .osk-promo { padding: 32px 30px; }
}

.osk-promo__frame {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  max-width: 1500px;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  background: #0A0A0A;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.35s var(--ease-out);
}
.osk-promo__frame:hover { transform: translateY(-2px); }
.osk-promo__frame:hover .osk-promo__media { transform: scale(1.04); }
.osk-promo__frame:hover .osk-promo__cta { background: rgba(255,255,255,0.7); }

.osk-promo__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.6s var(--ease-out);
  filter: brightness(0.85);
}

.osk-promo__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.45) 100%);
  z-index: 1;
}

.osk-promo__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
  pointer-events: none;
}
.osk-promo__kicker {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.osk-promo__title {
  font-family: var(--font);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0;
}
.osk-promo__cta {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 22px;
  background: rgba(255,255,255,0.4);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-radius: 9999px;
  color: rgb(17, 17, 17);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: background 0.2s ease;
}
@media (min-width: 768px) {
  .osk-promo__cta { font-size: 20px; height: 50px; padding: 0 26px; }
}