/* ============================================================================
   Habito landing — scoped styles for /habitoapp/
   ============================================================================
   All tokens and rules are scoped to `.habito-app` so this stylesheet can sit
   alongside the Rift Labs portfolio CSS without overriding it. The portfolio
   keeps its dark theme + PP Neue Montreal globally; this file owns the cream
   bubble that lives only at /habitoapp/.

   Mirrors the visual system documented in
   nudge-app/docs/claude/design-system.md.
   ========================================================================== */

.habito-app {
  /* Layout primitive: nav height. Used to size the hero so that nav+hero
     exactly fills one viewport. Update this if the nav padding changes. */
  --habito-nav-height: 56px;

  /* ---------------- Tier 1: primitives (Habito brand) ---------------- */
  --habito-cream-50:  #fbfaf5;
  --habito-cream-100: #f5f3ec;
  --habito-cream-200: #ece8d9;
  --habito-cream-300: #e2dcc7;

  --habito-ink-900: #1a1a1a;
  --habito-ink-700: #3d3d3d;
  --habito-ink-500: #5c5c5c;
  --habito-ink-400: #7a7770;
  --habito-ink-300: #9a968d;

  --habito-border:        #e7e3d8;
  --habito-border-strong: #d4cebd;

  /* Accent: green CTA from the app (Habito uses a sage-ish green) */
  --habito-cta:       #1a1a1a;
  --habito-cta-text:  #fbfaf5;
  --habito-cta-hover: #3d3d3d;

  /* Phase gradient warm tones from the app's day-gradient (subtle accent) */
  --habito-warm-1: #fdf3da;
  --habito-warm-2: #fbe4c0;

  /* ---------------- Tier 2: semantic ---------------- */
  --habito-bg:       var(--habito-cream-100);
  --habito-surface:  #ffffff;
  --habito-muted:    var(--habito-cream-200);

  --habito-text:           var(--habito-ink-900);
  --habito-text-secondary: var(--habito-ink-500);
  --habito-text-muted:     var(--habito-ink-300);

  --habito-radius-sm: 6px;
  --habito-radius-md: 12px;
  --habito-radius-lg: 20px;
  --habito-radius-pill: 9999px;

  /* ---------------- Fonts ---------------- */
  --habito-font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --habito-font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------------- Base ---------------- */
  background: var(--habito-bg);
  color: var(--habito-text);
  font-family: var(--habito-font-display);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  margin: 0;
}

/* Reset within the bubble — keep it minimal, don't pollute global scope */
.habito-app *,
.habito-app *::before,
.habito-app *::after {
  box-sizing: border-box;
}

.habito-app img,
.habito-app svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Generic anchor reset for non-CTA links. CTAs declare their own color
   palette and would be hijacked by `color: inherit` here (specificity 0,1,1
   beats the CTA's plain `.habito-app__cta--primary` at 0,1,0). The :not()
   keeps the inheritance off CTAs so their explicit colors win. */
.habito-app a:not(.habito-app__cta) {
  color: inherit;
  text-decoration: none;
  transition: color 150ms ease;
}

.habito-app a:not(.habito-app__cta):hover {
  color: var(--habito-text-secondary);
}

.habito-app a:not(.habito-app__cta):focus-visible {
  outline: 2px solid var(--habito-ink-900);
  outline-offset: 3px;
  border-radius: 2px;
}

.habito-app ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.habito-app__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;
}

.habito-app__skip {
  position: absolute;
  left: -9999px;
  top: 1rem;
  background: var(--habito-cta);
  color: var(--habito-cta-text);
  padding: 0.5rem 1rem;
  border-radius: var(--habito-radius-sm);
  font-family: var(--habito-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.habito-app__skip:focus {
  left: 1rem;
  z-index: 100;
}

/* ============================================================================
   NAV
   ========================================================================== */

.habito-app__nav {
  position: sticky;
  top: 0;
  /* z-index 20: stays above ALL other sticky elements on the page, including
     the "Cómo funciona" sticky header (z:10) and the gradient cards. */
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  /* Opaque background so sticky cards behind never leak through the nav. */
  background: var(--habito-bg);
  border-bottom: 1px solid color-mix(in oklab, var(--habito-border) 60%, transparent);
}

/* When the mobile hamburger drawer is open, lock the page underneath so the
   user can't scroll the body behind. */
.habito-app--menu-open {
  overflow: hidden;
}

.habito-app__nav-brand img {
  height: 22px;
  width: auto;
  color: var(--habito-text);
}

/* Nav links — mono caps treatment, mirroring the Costar Astrology pattern:
   typographic, austere, low-key. Stacks the rest of the page's nav system
   into the same Geist Mono family already used by eyebrows and footer. */
.habito-app__nav-links {
  display: flex;
  gap: 1.75rem;
  font-family: var(--habito-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--habito-text);
  list-style: none;
  padding: 0;
  margin: 0;
}

.habito-app__nav-links a {
  padding: 0.5rem 0;
}

.habito-app__nav-links a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Hamburger toggle button — visible only on narrow viewports (<768px). 44×44
   tap target meets WCAG. Three bars morph into an X when expanded. */
.habito-app__nav-toggle {
  display: none;
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  color: var(--habito-text);
}

.habito-app__nav-toggle:focus-visible {
  outline: 2px solid var(--habito-ink-900);
  outline-offset: 2px;
  border-radius: 4px;
}

.habito-app__nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 220ms ease, opacity 180ms ease;
}

/* Bars morph into an X. Top bar tilts down-right, middle fades, bottom tilts
   up-right. translateY values are tuned to the bar gap (5px + 2px height). */
.habito-app__nav-toggle[aria-expanded='true'] .habito-app__nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.habito-app__nav-toggle[aria-expanded='true'] .habito-app__nav-toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.4);
}
.habito-app__nav-toggle[aria-expanded='true'] .habito-app__nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* MOBILE NAV (<768px) — hamburger replaces inline links. Links collapse
   into a drawer that drops from the nav bottom, full viewport width, with
   each link as a comfortable tap row. */
@media (max-width: 767px) {
  .habito-app__nav-toggle {
    display: flex;
  }
  .habito-app__nav-links {
    /* FULLSCREEN drawer — solid cream takeover from the nav bottom to the
       bottom of the viewport. Same bg color as the nav so visually they
       form one continuous cream block. No shadow, no border, no blur. */
    position: fixed;
    top: var(--habito-nav-h, 56px);
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    gap: 0;
    /* Just top/bottom on the UL — horizontal padding moves to each <a> so
       each link is explicitly inset from the viewport edges. */
    padding: 0.5rem 0 1.5rem;
    background: var(--habito-bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    font-size: 0.8rem;
    overflow-y: auto;
  }
  .habito-app__nav-links[data-open='true'] {
    opacity: 1;
    pointer-events: auto;
  }
  .habito-app__nav-links li {
    width: 100%;
    border-bottom: 1px solid color-mix(in oklab, var(--habito-border) 60%, transparent);
  }
  .habito-app__nav-links li:last-child {
    border-bottom: none;
  }
  .habito-app__nav-links a {
    display: block;
    /* Padding on the <a> directly so each link is inset from the LI edge:
       - 1.75rem (28px) vertical → ample breathing room between items
       - 2rem (32px) horizontal → text sits well inside, not at the edge
       Generous tap target (~74px tall × full-width-minus-64px). */
    padding: 1.75rem 2rem;
  }
}

/* ============================================================================
   SHARED — eyebrow + headline + lede
   ========================================================================== */

.habito-app__eyebrow,
.habito-app__section-label {
  font-family: var(--habito-font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--habito-text); /* full ink, mirrors the app's eyebrow treatment */
  margin: 0 0 1rem 0;
}

.habito-app__headline {
  font-family: var(--habito-font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 7vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 1.5rem 0;
  text-wrap: balance;
}

.habito-app__section-title {
  font-family: var(--habito-font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem 0;
  text-wrap: balance;
  max-width: 32ch;
}

.habito-app__lede {
  font-family: var(--habito-font-display);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--habito-text-secondary);
  margin: 0 0 2rem 0;
  max-width: 52ch;
}

/* MOBILE: more breathing room between the hero lede and the CTA buttons so
   the screen real estate reads more open, not crammed. */
@media (max-width: 640px) {
  .habito-app__hero .habito-app__lede {
    margin-bottom: 3rem;
  }
  .habito-app__hero .habito-app__cta-row--secondary {
    margin-top: 2.5rem;
  }
}

.habito-app__lede--centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Helper for forcing a controlled line break on desktop only. On mobile the
   <br> is hidden so the browser wraps the lede naturally. The space after
   `solo<br> lugar` in the HTML keeps the words separate in either mode. */
.habito-app__br-desktop {
  display: none;
}

@media (min-width: 640px) {
  .habito-app__br-desktop {
    display: inline;
  }
}

/* ============================================================================
   HERO
   ========================================================================== */

.habito-app__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* nav + hero == 100vh. dvh is the dynamic viewport unit so the mobile
     browser address bar doesn't crop the bottom. vh fallback for older
     browsers. */
  min-height: calc(100vh - var(--habito-nav-height));
  min-height: calc(100dvh - var(--habito-nav-height));
  padding: clamp(3rem, 10vw, 7rem) 1.5rem clamp(4rem, 8vw, 8rem);
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
  /* overflow stays VISIBLE here so the shapes can drift outside the 1080px
     hero box. Horizontal scroll is prevented at the page root (body) below. */
}

/* Keep the page from gaining a horizontal scrollbar when shapes drift off
   the side of the hero. `clip` is the modern equivalent of `hidden` that
   doesn't create a scroll container (so sticky elements inside still work).
   Applied ONLY on body — setting overflow on <html> changes the scrolling
   element semantics in some browsers and breaks position:sticky on the nav.
   Any real horizontal overflow sources (hero shapes, prefooter section)
   are clipped at their own container level. */
.habito-app {
  overflow-x: clip;
}

/* Center the lede + the eyebrow within the hero */
.habito-app__hero .habito-app__lede {
  margin-left: auto;
  margin-right: auto;
}

.habito-app__hero .habito-app__eyebrow {
  text-align: center;
}

/* Hero content sits above the decorative shapes layer */
.habito-app__hero > :not(.habito-app__hero-shapes) {
  position: relative;
  z-index: 2;
}

/* ============================================================================
   HERO SHAPES — family.co-inspired floating decorations
   ============================================================================
   Seven organic blobs scattered around the hero, painted in Habito's day
   gradient palette via CSS mask-image (PNG file = silhouette, color =
   background). Pointer-events disabled so they never block CTAs.
   ========================================================================== */

/* Hero shapes layer.
   z-index 1 puts the shapes BEHIND the content (text + CTAs at z-index 2)
   so they drift in the background without crossing the headline.
   pointer-events: none keeps them inert.

   The negative left/right inset stretches this box FULL VIEWPORT WIDTH —
   beyond the hero's 1080px max-width — so the shapes can live in the
   margins next to the contained text block. Their `left:N%` / `right:N%`
   then refer to the viewport edge, not the hero edge. */
.habito-app__hero-shapes {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  pointer-events: none;
  z-index: 1;
  /* Clip shapes that drift past the viewport edges during their animation
     so they don't add to the document's horizontal scroll width. */
  overflow: hidden;
}

/* Register --habito-scroll as a typed CSS property so the browser
   actually interpolates the calc() below as a length (without @property,
   custom properties are typed `*` and calc(string * px) silently
   resolves to 0 in some engines, killing the parallax). */
@property --habito-scroll {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.habito-app__shape {
  position: absolute;
  display: block;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  opacity: 0.88;
  /* Two independent layers on each shape, never conflict:
     1) transform: holds the rotation + the drift animation (X + Y orbits)
     2) translate: holds the scroll parallax offset (set by inline JS via
        the --habito-scroll variable on <html>) */
  animation: var(--drift, habito-drift-a) var(--drift-dur, 32s) ease-in-out infinite;
  animation-delay: var(--drift-delay, 0s);
  translate: 0 calc(var(--habito-scroll, 0) * var(--parallax, -150px));
  will-change: transform, translate;
}

/* Two drift orbits (drift-c retired — it crossed sides and invaded text):
   - drift-a: pushes shapes FURTHER RIGHT, used by all RIGHT-side shapes
   - drift-b: pushes shapes FURTHER LEFT, used by all LEFT-side shapes
   X range ~60-90px (visible motion into the gutter), Y range ~20-35px. */
@keyframes habito-drift-a {
  0%, 100% { transform: translate(0, 0)        rotate(var(--rot, 0deg));                     }
  25%      { transform: translate(50px, -18px) rotate(calc(var(--rot, 0deg) + 3deg));        }
  50%      { transform: translate(90px, 12px)  rotate(calc(var(--rot, 0deg) - 2deg));        }
  75%      { transform: translate(40px, 28px)  rotate(calc(var(--rot, 0deg) + 2deg));        }
}

@keyframes habito-drift-b {
  0%, 100% { transform: translate(0, 0)         rotate(var(--rot, 0deg));                    }
  25%      { transform: translate(-45px, 20px)  rotate(calc(var(--rot, 0deg) - 3deg));       }
  50%      { transform: translate(-85px, -12px) rotate(calc(var(--rot, 0deg) + 2deg));       }
  75%      { transform: translate(-35px, -28px) rotate(calc(var(--rot, 0deg) - 2deg));       }
}

/* 12 shapes. Each one: position, size, rotation, image, drift, duration,
   delay, parallax distance. LEFT shapes use drift-b/-c (drift toward left
   edge), RIGHT shapes use drift-a/-c (drift toward right edge). Image
   query string ?v=3 busts the browser cache when you edit PNGs in place. */

/* CLUSTER orbital, family.co-style.
   - Sizes intentionally varied (LARGE 100-170px, MEDIUM 70-130px,
     SMALL 45-75px) so the cluster looks organic, not a grid.
   - Each side has 2 LARGE + 2 MEDIUM + 2 SMALL.
   - "Outer" shapes hug the viewport edge (left/right 1-8%) and use the
     big sizes — they have room to drift sideways into the gutter.
   - "Inner" shapes sit closer to the text (left/right 20-26%) and use
     the small sizes — even with their movement they never enter the
     text block.
   - All LEFT shapes drift further left, RIGHT shapes drift further right,
     so the cluster appears to "orbit" the centered text without crossing
     it. */

/* CLUSTERS family.co-style. Each side is a tight constellation centered
   around hero-mid (top: 15% to 75%, not full 0-100%). Positions chosen
   organically (offset from each other in both X and Y) so the cluster
   doesn't read as a grid. All shapes the same size — variety comes from
   silhouette + rotation + position. */

/* LEFT cluster — clusters tighten in toward the text (3-19% range) without
   touching it. Combined with the full-viewport shapes container, this puts
   the outer shapes in the gutter beside the contained hero, and the inner
   shapes just outside the text block. */
.habito-app__shape--s-1 {
  top: 12%; left: 8%;
  width: clamp(50px, 6vw, 85px); aspect-ratio: 1 / 1;
  background-image: url('./assets/shapes/shape-9.png?v=3');
  --rot: -12deg; --drift: habito-drift-b; --drift-dur: 36s; --drift-delay: 0s;   --parallax: -180px;
}
.habito-app__shape--s-2 {
  top: 22%; left: 20%;
  width: clamp(50px, 6vw, 85px); aspect-ratio: 1 / 1;
  background-image: url('./assets/shapes/shape-15.png?v=3');
  --rot: 18deg;  --drift: habito-drift-b; --drift-dur: 28s; --drift-delay: -6s;  --parallax: -90px;
}
.habito-app__shape--s-3 {
  top: 40%; left: 5%;
  width: clamp(50px, 6vw, 85px); aspect-ratio: 1 / 1;
  background-image: url('./assets/shapes/shape-1.png?v=3');
  --rot: 22deg;  --drift: habito-drift-b; --drift-dur: 32s; --drift-delay: -4s;  --parallax: -160px;
}
.habito-app__shape--s-4 {
  top: 50%; left: 19%;
  width: clamp(50px, 6vw, 85px); aspect-ratio: 1 / 1;
  background-image: url('./assets/shapes/shape-11.png?v=3');
  --rot: -8deg;  --drift: habito-drift-b; --drift-dur: 30s; --drift-delay: -11s; --parallax: -70px;
}
.habito-app__shape--s-5 {
  top: 62%; left: 9%;
  width: clamp(50px, 6vw, 85px); aspect-ratio: 1 / 1;
  background-image: url('./assets/shapes/shape-3.png?v=3');
  --rot: -22deg; --drift: habito-drift-b; --drift-dur: 40s; --drift-delay: -18s; --parallax: -200px;
}
.habito-app__shape--s-6 {
  top: 75%; left: 20%;
  width: clamp(50px, 6vw, 85px); aspect-ratio: 1 / 1;
  background-image: url('./assets/shapes/shape-2.png?v=3');
  --rot: 30deg;  --drift: habito-drift-b; --drift-dur: 34s; --drift-delay: -8s;  --parallax: -120px;
}

/* RIGHT cluster — mirror */
.habito-app__shape--s-7 {
  top: 12%; right: 8%;
  width: clamp(50px, 6vw, 85px); aspect-ratio: 1 / 1;
  background-image: url('./assets/shapes/shape-8.png?v=3');
  --rot: 18deg;  --drift: habito-drift-a; --drift-dur: 40s; --drift-delay: -7s;  --parallax: -160px;
}
.habito-app__shape--s-8 {
  top: 22%; right: 20%;
  width: clamp(50px, 6vw, 85px); aspect-ratio: 1 / 1;
  background-image: url('./assets/shapes/shape-10.png?v=3');
  --rot: -10deg; --drift: habito-drift-a; --drift-dur: 30s; --drift-delay: -2s;  --parallax: -100px;
}
.habito-app__shape--s-9 {
  top: 40%; right: 5%;
  width: clamp(50px, 6vw, 85px); aspect-ratio: 1 / 1;
  background-image: url('./assets/shapes/shape-16.png?v=3');
  --rot: 8deg;   --drift: habito-drift-a; --drift-dur: 38s; --drift-delay: -13s; --parallax: -220px;
}
.habito-app__shape--s-10 {
  top: 50%; right: 19%;
  width: clamp(50px, 6vw, 85px); aspect-ratio: 1 / 1;
  background-image: url('./assets/shapes/shape-4.png?v=3');
  --rot: -16deg; --drift: habito-drift-a; --drift-dur: 34s; --drift-delay: -15s; --parallax: -80px;
}
.habito-app__shape--s-11 {
  top: 62%; right: 9%;
  width: clamp(50px, 6vw, 85px); aspect-ratio: 1 / 1;
  background-image: url('./assets/shapes/shape-12.png?v=3');
  --rot: -14deg; --drift: habito-drift-a; --drift-dur: 44s; --drift-delay: -10s; --parallax: -190px;
}
.habito-app__shape--s-12 {
  top: 75%; right: 20%;
  width: clamp(50px, 6vw, 85px); aspect-ratio: 1 / 1;
  background-image: url('./assets/shapes/shape-17.png?v=3');
  --rot: 24deg;  --drift: habito-drift-a; --drift-dur: 42s; --drift-delay: -5s;  --parallax: -130px;
}

/* Mobile: hide half the shapes so the hero text stays the protagonist on
   small screens (s-2, s-4, s-6 from the left + s-8, s-10, s-12 from the
   right — the secondary "inner" ones; the 6 outermost stay). */
/* On mobile (<640px) the inner-cluster shapes (s-2, s-4, s-6 on the left;
   s-8, s-10, s-12 on the right) would normally overlap the centered text
   block — the gutters are too narrow. Instead of hiding them, reposition
   them BELOW the hero text so they decorate the empty space toward the
   bottom of the viewport without crossing the headline / lede / CTAs.
   Tops 72-84% keep them closer to the text block for better balance. */
@media (max-width: 640px) {
  .habito-app__shape--s-2 { top: 72%; left: 6%;  }
  .habito-app__shape--s-4 { top: 78%; left: 28%; }
  .habito-app__shape--s-6 { top: 84%; left: 14%; }
  .habito-app__shape--s-8 { top: 72%; right: 6%; left: auto; }
  .habito-app__shape--s-10 { top: 78%; right: 28%; left: auto; }
  .habito-app__shape--s-12 { top: 84%; right: 14%; left: auto; }
}

.habito-app__hero-meta {
  font-family: var(--habito-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--habito-text-muted);
  margin: 1.25rem 0 0 0;
}

.habito-app__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.habito-app__cta-row--centered {
  justify-content: center;
}

/* MOBILE (<640px): the primary CTAs stack vertically and stretch to the same
   full width so they read as visually paired actions with consistent
   touch targets. Tertiary --text links keep their auto width / centered. */
@media (max-width: 639px) {
  .habito-app__cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.625rem;
  }
  .habito-app__cta-row > .habito-app__cta {
    width: 100%;
    justify-content: center;
  }
  .habito-app__cta-row > .habito-app__cta--text {
    width: auto;
    align-self: center;
  }
}

/* ============================================================================
   CTAs — three variants × five states, all WCAG AA verified
   ============================================================================
   PRIMARY  default → solid ink, white text (filled)
            hover   → ink-700 bg, white text (slightly lighter)
            focus   → outline ring
            disabled → "coming soon": transparent, dashed border, ink text
                       (clearly different from primary default, still legible)

   GHOST    default → transparent, ink border + text (outlined)
            hover   → ink bg, white text (inversion)
            focus   → outline ring

   LARGE    size modifier only, no color change

   All states pass 10:1+ contrast on cream (light bg) or on ink (dark hover).
   ========================================================================== */

.habito-app__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.5rem;
  font-family: var(--habito-font-display);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--habito-radius-pill);
  min-height: 44px;
  border: 1.5px solid transparent;
  background-clip: padding-box; /* keep solid fill from bleeding into border */
  text-decoration: none; /* anchor default would underline otherwise */
  touch-action: manipulation;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

/* PRIMARY — filled, dark ink + white text */
.habito-app__cta--primary {
  background: var(--habito-ink-900);
  color: #ffffff;
  border-color: var(--habito-ink-900);
}

.habito-app__cta--primary:hover {
  background: var(--habito-ink-700);
  border-color: var(--habito-ink-700);
  color: #ffffff;
}

.habito-app__cta--primary:focus-visible {
  outline: 2px solid var(--habito-ink-900);
  outline-offset: 3px;
}

/* PRIMARY disabled / "coming soon" — outlined dashed.
   Visually distinct from the active primary (no fill) AND from the ghost
   (dashed border). Reads as "this button exists but isn't active yet".
   cursor: not-allowed surfaces that intent on hover. We keep
   pointer-events on (vs `none`) so the cursor change actually shows;
   clicks are inert anyway because the href is `#`. The dashed border is at
   80% opacity so it reads as softer / less commanding than an active CTA. */
.habito-app__cta--primary[aria-disabled='true'] {
  background: transparent;
  color: var(--habito-ink-900);
  border: 1.5px dashed color-mix(in oklab, var(--habito-ink-900) 80%, transparent);
  cursor: not-allowed;
}

.habito-app__cta--primary[aria-disabled='true']:hover {
  background: transparent;
  color: var(--habito-ink-900);
  border-color: color-mix(in oklab, var(--habito-ink-900) 80%, transparent);
}

/* GHOST — outlined, secondary action */
.habito-app__cta--ghost {
  background: transparent;
  color: var(--habito-ink-900);
  border-color: var(--habito-ink-900);
}

.habito-app__cta--ghost:hover {
  background: var(--habito-ink-900);
  color: #ffffff;
  border-color: var(--habito-ink-900);
}

.habito-app__cta--ghost:focus-visible {
  outline: 2px solid var(--habito-ink-900);
  outline-offset: 3px;
}

/* Size modifier */
.habito-app__cta--large {
  padding: 1.125rem 2rem;
  font-size: 1.05rem;
}

/* MOBILE (<640px): the --large modifier reverts to the standard CTA size.
   The bigger padding + font of `--large` cause the "Descargar en Play Store"
   text + "Próximamente" chip to overflow at narrow widths. Matching the
   home CTAs keeps both Hero and Descargar sections visually consistent. */
@media (max-width: 639px) {
  .habito-app__cta--large {
    padding: 0.875rem 1.5rem;
    font-size: 0.95rem;
  }
}

/* TEXT variant — used as a tertiary "learn more" link below the primary
   CTAs. Mono caps, no border, no fill. Underline only on hover. */
.habito-app__cta--text {
  background: transparent;
  border: none;
  color: var(--habito-text);
  font-family: var(--habito-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 0.75rem;
  min-height: auto;
  text-decoration: none;
  gap: 0.5rem;
}

.habito-app__cta--text:hover {
  background: transparent;
  color: var(--habito-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.habito-app__cta--text:focus-visible {
  outline: 2px solid var(--habito-text);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Secondary row sits below the primary CTAs, centered, with breathing room.
   The bigger top margin separates the "tertiary" link from the primary
   action group so it doesn't feel like a third button. */
.habito-app__cta-row--secondary {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/* Tertiary "deeper" link at the bottom of each feature card. Inherits the
   `.habito-app__cta--text` mono-caps + underline-on-hover treatment;
   margin-top adds breathing room from the card description above. */
.habito-app__card-cta {
  margin-top: 1.25rem;
  padding-left: 0;
  padding-right: 0;
  align-self: flex-start;
}

/* Inline chip inside a CTA — e.g. "Próximamente" tag next to "Play Store".
   White background + ink text so it reads punchy on both contexts: cream
   hero AND the pastel gradient prefooter (cream-300 was getting muddy on
   the gradient). Sharp square corners; reads as an inline tag. */
.habito-app__cta-chip {
  display: inline-block;
  margin-left: 0.625rem;
  padding: 0.2rem 0.5rem;
  background: #ffffff;
  color: var(--habito-ink-900);
  font-family: var(--habito-font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  line-height: 1.4;
  vertical-align: middle;
}

/* ============================================================================
   SECTIONS — shared shell
   ========================================================================== */

.habito-app__section {
  --habito-section-pad-x: 1.5rem;
  padding: clamp(4rem, 8vw, 8rem) var(--habito-section-pad-x);
  max-width: 1080px;
  margin: 0 auto;
}

/* Very narrow viewports (iPhone SE, tiny Androids): tighten the horizontal
   padding so text reads at a comfortable width without overflowing. */
@media (max-width: 380px) {
  .habito-app__section {
    --habito-section-pad-x: 1.125rem;
  }
}

/* Centered title block for the unified Features section */
.habito-app__section--features {
  text-align: center;
}

.habito-app__section--features .habito-app__section-label,
.habito-app__section--features .habito-app__section-title {
  margin-left: auto;
  margin-right: auto;
}

.habito-app__section--features .habito-app__section-title {
  max-width: 28ch;
}

/* Features header — regular block on desktop, sticky on mobile so the
   "Adaptada a vos" title stays visible while the user scrolls through the
   two stacked feature cards. Matches the pattern of the "Cómo funciona"
   sticky header. */
@media (max-width: 879px) {
  .habito-app__features-header {
    position: sticky;
    top: var(--habito-nav-h, 56px);
    z-index: 5;
    background: var(--habito-bg);
    padding-block: 0.875rem 0.75rem;
    /* Extend cream background edge-to-edge to cover the cards scrolling
       underneath, then pad back in to keep the text aligned with the
       section's gutter. */
    margin-inline: calc(var(--habito-section-pad-x, 1.5rem) * -1);
    padding-inline: var(--habito-section-pad-x, 1.5rem);
  }
  .habito-app__features-header .habito-app__section-title {
    /* Keep the natural title margin-bottom (1.25rem) so the sticky bar's
       bottom spacing matches the "Cómo funciona" sticky header exactly.
       Font-size kept slightly smaller so the bar doesn't dominate the
       viewport at narrow widths. */
    font-size: clamp(1.4rem, 5.5vw, 1.9rem);
  }
}

/* Privacy section — dark mode. Solid ink-900 bg works with the
   box-shadow + clip-path trick to span the viewport while content stays
   contained at 1080px. */
.habito-app__section--privacy {
  position: relative;
  background: var(--habito-ink-900);
  color: var(--habito-cream-50);
  box-shadow: 0 0 0 100vmax var(--habito-ink-900);
  clip-path: inset(0 -100vmax);
}

.habito-app__section--privacy .habito-app__section-label {
  color: var(--habito-cream-50);
  text-align: center;
}

/* CTA section — uses the app's TUESDAY day-gradient (green mint #b8e6c2
   base + blue #c2ddf5 glow). Not used by any of the feature cards above
   (mon/wed/sun); green+blue reads as "safe / refreshing", a fitting note
   for the final download moment. ink-900 text on either pastel passes
   WCAG AA with >12:1 contrast.

   Full-bleed via negative margin + compensating padding (box-shadow can't
   carry a gradient, so we expand the section box itself and add inner
   padding so the content stays centered as if max-width was 1080px). */
.habito-app__section--cta {
  text-align: center;
  position: relative;
  color: var(--habito-ink-900);
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(1.5rem, calc(50vw - 540px));
  padding-right: max(1.5rem, calc(50vw - 540px));
  background:
    radial-gradient(
      86% 86% at 17% 22%,
      #c2ddf5 0%,
      color-mix(in oklab, #c2ddf5 0%, transparent) 100%
    ),
    #b8e6c2;
}

/* Secondary text inside the CTA section reads as dark-ink-on-pastel for
   contrast. The lede gets a slightly softer ink so it doesn't compete with
   the big title and the button. */
.habito-app__section--cta .habito-app__lede {
  color: var(--habito-ink-700);
}

.habito-app__section--cta .habito-app__section-label,
.habito-app__section--cta .habito-app__section-title {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================================
   CÓMO FUNCIONA — sticky card stack
   ============================================================================
   Three feature cards stacking on scroll. Inspired by the Awwwards
   card-stacking-swag pattern. Pure CSS via `position: sticky` — no JS.

   Desktop (≥768px): each card sticks to the same top offset; as you scroll,
   the next card rises from below and lands on top, creating the layered
   stack. The previous card is still visible underneath.

   Mobile (<768px): plain stacked layout (no sticky) so reading is easy on
   small viewports without jumping.

   Each card uses a tone from the portfolio's extended palette (yellow, sage,
   pink). Mirrored here as local Habito tokens to keep the bubble scoped.
   ========================================================================== */

.habito-app {
  /* Card backgrounds use the exact dayGradients from the app
     (src/theme.ts in the nudge-app repo). Each card pairs a base color of
     one weekday with the accent of the next, replicating the radial-gradient
     glow that the app paints behind the home screen. Three days picked to
     tell an arc Mon → Wed → Sun (start of week / mid / cierre). */

  /* Mon: yellow base + green glow at 7% 22% */
  --habito-card-1-base:   #fde07a;
  --habito-card-1-accent: #b8e6c2;
  --habito-card-1-x: 7%;
  --habito-card-1-y: 22%;

  /* Wed: blue base + peach glow at 30% 22% */
  --habito-card-2-base:   #c2ddf5;
  --habito-card-2-accent: #fdd2b8;
  --habito-card-2-x: 30%;
  --habito-card-2-y: 22%;

  /* Sun: pink base + yellow glow at 96% 22% */
  --habito-card-3-base:   #f9d3d3;
  --habito-card-3-accent: #fde07a;
  --habito-card-3-x: 96%;
  --habito-card-3-y: 22%;
}

/* Sticky header for the "Cómo funciona" section. Pins under the navbar
   (~64px) so the eyebrow + title stay framed at the top while the gradient
   cards scroll past underneath. Solid cream background covers any card
   peeking through. z-index 10: matches the nav so cards can never poke
   through above the header. The JS sets --habito-como-header-h to the
   header's measured height; the cards use it for their sticky top so
   they pin EXACTLY at the header bottom — no cream gap, no overlap. */
.habito-app__como-header {
  position: sticky;
  /* Pins right at the nav bottom. JS measures the nav and sets --habito-nav-h;
     fallback 56px matches the actual nav height (16+22+16+1+1 padding/border). */
  top: var(--habito-nav-h, 56px);
  z-index: 10;
  background: var(--habito-bg);
  padding-block: 1rem 0.75rem;
}

.habito-app__stack {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
}

.habito-app__card {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--habito-radius-lg);
  color: var(--habito-ink-900);
  overflow: hidden; /* keep the gradient inside the rounded corners */
}

/* Each card stacks two layers: a radial gradient (accent glow, fading to
   transparent) on top of a solid base color — the exact recipe the app uses
   in DayGradientBg.tsx, just translated from RN SVG to CSS. */
.habito-app__card--1 {
  background:
    radial-gradient(
      86% 86% at var(--habito-card-1-x) var(--habito-card-1-y),
      var(--habito-card-1-accent) 0%,
      color-mix(in oklab, var(--habito-card-1-accent) 0%, transparent) 100%
    ),
    var(--habito-card-1-base);
}

.habito-app__card--2 {
  background:
    radial-gradient(
      86% 86% at var(--habito-card-2-x) var(--habito-card-2-y),
      var(--habito-card-2-accent) 0%,
      color-mix(in oklab, var(--habito-card-2-accent) 0%, transparent) 100%
    ),
    var(--habito-card-2-base);
}

.habito-app__card--3 {
  background:
    radial-gradient(
      86% 86% at var(--habito-card-3-x) var(--habito-card-3-y),
      var(--habito-card-3-accent) 0%,
      color-mix(in oklab, var(--habito-card-3-accent) 0%, transparent) 100%
    ),
    var(--habito-card-3-base);
}

@media (min-width: 768px) {
  .habito-app__stack {
    gap: 2rem;
  }

  /* All cards sticky right below the "Cómo funciona" header. Both heights
     are measured by JS into custom properties — nav and header — so cards
     pin EXACTLY at the header bottom, no cream gap and no overlap. */
  .habito-app__card {
    position: sticky;
    top: calc(var(--habito-nav-h, 56px) + var(--habito-como-header-h, 124px));
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    min-height: 480px;
  }

  /* Alternate which side the screenshot lands on so the eye keeps moving. */
  .habito-app__card--2 .habito-app__card-screen {
    order: 2;
  }
}

.habito-app__card-screen {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The screen placeholder inside a colored card uses a translucent overlay
   so it reads as "a phone over the card" rather than a different color. */
.habito-app__card-screen .habito-app__screen-placeholder {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(0, 0, 0, 0.18);
  color: rgba(0, 0, 0, 0.55);
  aspect-ratio: 9 / 16;
  max-width: 280px;
  width: 100%;
  min-height: 0;
}

.habito-app__card-copy {
  max-width: 38ch;
}

.habito-app__card-num {
  font-family: var(--habito-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--habito-ink-900);
  margin: 0 0 1rem 0;
}

.habito-app__card-copy h3 {
  font-family: var(--habito-font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1rem 0;
  text-wrap: balance;
}

.habito-app__card-copy p {
  font-size: 1.05rem;
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================================
   FEATURES — ciclo + entrenamiento side-by-side
   ============================================================================
   Two mini-blocks in a horizontal grid on desktop, stacked on mobile.
   Designed to fit both features on a single viewport in desktop without
   forcing a long vertical scroll.
   ========================================================================== */

.habito-app__features-grid {
  display: grid;
  gap: 3rem;
  margin-top: 3rem;
  text-align: left;
}

@media (min-width: 900px) {
  .habito-app__features-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
  }
}

.habito-app__feature {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

.habito-app__feature-screen {
  width: 100%;
}

/* Real image inside a feature card. Fills the card width, lets the image's
   own aspect ratio decide the height. Sharp corners by default; on hover
   the corners round to lg-radius for a subtle "lift" affordance. */
.habito-app__feature-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  transition: border-radius 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Hover state only on devices that actually hover (avoids sticky behaviour
   on touch where :hover lingers after a tap). */
@media (hover: hover) {
  .habito-app__feature-screen:hover .habito-app__feature-image,
  .habito-app__feature-image:hover {
    border-radius: var(--habito-radius-lg);
  }
}

/* Real image inside one of the sticky "Cómo funciona" cards. The cards
   already constrain max-width to ~280px so the phone-shape screenshots
   render at a sensible size; height auto keeps the aspect of the PNG. */
.habito-app__card-screen img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--habito-radius-lg);
}

/* Placeholder ocupa todo el ancho de la card, aspect landscape (4/3) — pensado
   para que la usuaria meta imágenes que llenen la card, no screenshots de
   phone vertical. Override del aspect 9/16 del placeholder base via clase
   `--feature-placeholder` (sin la clase `--tall`). */
.habito-app__feature-placeholder {
  width: 100%;
  max-width: none;
  aspect-ratio: 4 / 3;
  min-height: 0;
  background: var(--habito-surface);
  border-radius: 2px; /* hard corners, mirroring the app's --radius: 2px */
}

/* Feature eyebrow — same treatment as every other eyebrow in the page
   (section-label, hero eyebrow). All eyebrows read at the same scale across
   the landing so the tipografía global queda consistente. */
.habito-app__feature-eyebrow {
  font-family: var(--habito-font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--habito-text);
  margin: 0 0 0.75rem 0;
}

.habito-app__feature-copy h3 {
  font-family: var(--habito-font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem 0;
  text-wrap: balance;
}

/* Generic body paragraph in the feature card, but EXCLUDING the eyebrow and
   the foot pill so their own specific styles below win. Without :not(),
   `feature-copy > p` had specificity (0,2,1) and pisaba a
   `feature-eyebrow` (0,1,0) — that's why the eyebrow read 15px instead of
   8.8px. */
.habito-app__feature-copy > p:not(.habito-app__feature-eyebrow):not(.habito-app__feature-foot) {
  font-size: 0.95rem;
  color: var(--habito-text-secondary);
  line-height: 1.55;
  margin: 0 0 0.75rem 0;
}

.habito-app__feature-copy > p:not(.habito-app__feature-eyebrow):not(.habito-app__feature-foot) strong {
  color: var(--habito-text);
  font-weight: 700;
}

.habito-app__feature-foot {
  font-family: var(--habito-font-mono);
  font-size: 0.7rem !important;
  font-weight: 500;
  color: var(--habito-text) !important;
  margin: 1rem 0 0 0 !important;
  letter-spacing: 0.02em;
}

/* ============================================================================
   PRIVACY SECTION (dark inversion)
   ========================================================================== */

/* Match the standard section-title sizing so the privacy headline reads
   consistently with the rest of the page (was font-weight 800 + clamped to
   60px, which made it the heaviest type on the landing). */
.habito-app__privacy-headline {
  font-family: var(--habito-font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 auto 2.5rem;
  max-width: 18em;
  text-wrap: balance;
  text-align: center;
}

.habito-app__privacy-list {
  display: block;
  max-width: 34rem;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--habito-cream-300);
  text-align: center;
}

.habito-app__privacy-list > li + li {
  margin-top: 1.5rem; /* replaces the grid gap now that we're back to block */
}

.habito-app__privacy-list li {
  padding: 0;
}

.habito-app__privacy-list strong {
  color: var(--habito-cream-50);
  font-weight: 600;
}

.habito-app__privacy-foot {
  margin-top: 2.5rem;
  font-family: var(--habito-font-mono);
  font-size: 0.85rem;
  color: var(--habito-cream-300);
  text-align: center;
}

.habito-app__privacy-foot a {
  color: var(--habito-cream-50);
  border-bottom: 1px solid color-mix(in oklab, var(--habito-cream-50) 40%, transparent);
}

.habito-app__privacy-foot a:hover {
  color: var(--habito-cream-50);
  border-bottom-color: var(--habito-cream-50);
}

/* ============================================================================
   DETAILS — definition list, no icons
   ========================================================================== */

.habito-app__details {
  display: grid;
  gap: 2rem;
  margin: 3rem 0 0 0;
}

@media (min-width: 640px) {
  .habito-app__details {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 3rem;
  }
}

@media (min-width: 1024px) {
  .habito-app__details {
    grid-template-columns: repeat(3, 1fr);
  }
}

.habito-app__details > div {
  position: relative;
  padding-top: 1.25rem;
}

/* Top line as a pseudo-element so we can grow it and recolor it on hover
   without nudging the dt/dd below. 1px gray by default; 4px colored on
   hover, with the color cycling through Habito's day-gradient palette
   (one per item). */
.habito-app__details > div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--habito-border);
  transition: height 180ms ease, background-color 180ms ease;
}

.habito-app__details > div:hover::before {
  height: 4px;
}

.habito-app__details > div:nth-child(1):hover::before { background: #fde07a; } /* mon yellow */
.habito-app__details > div:nth-child(2):hover::before { background: #b8e6c2; } /* tue green */
.habito-app__details > div:nth-child(3):hover::before { background: #c2ddf5; } /* wed blue */
.habito-app__details > div:nth-child(4):hover::before { background: #fdd2b8; } /* thu peach */
.habito-app__details > div:nth-child(5):hover::before { background: #e3d6f7; } /* fri lavender */
.habito-app__details > div:nth-child(6):hover::before { background: #aceeda; } /* sat teal */

.habito-app__details dt {
  font-family: var(--habito-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 0.5rem 0;
}

.habito-app__details dd {
  font-size: 0.95rem;
  color: var(--habito-text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* ============================================================================
   SCREEN PLACEHOLDER — until real screenshots are dropped in
   ========================================================================== */

.habito-app__screen-placeholder {
  width: 100%;
  height: 100%;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--habito-muted);
  color: var(--habito-text-muted);
  font-family: var(--habito-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.6;
  padding: 1.5rem;
  border: 1px dashed var(--habito-border-strong);
  border-radius: var(--habito-radius-lg);
}

.habito-app__screen-placeholder--tall {
  aspect-ratio: 9 / 16;
}

/* ============================================================================
   FAQ — accordion section using native <details>/<summary>
   ========================================================================== */

/* FAQ section — two-column layout on desktop:
   - Left column: phone screenshot, OVERSIZED + edge-cropped so the device
     fills the column instead of floating in its native padding.
   - Right column: the FAQ block (eyebrow + title + accordion)
   The whole section is left-shifted (margin-right: auto) so the visual
   weight feels balanced against the cropped image. */
.habito-app__section--faq {
  max-width: 1200px;
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  /* align-items: start so opening an accordion grows the content downward
     without re-centering the whole row (which would visually shift the
     header up/down). */
  align-items: start;
  grid-template-columns: 1fr;
}

@media (min-width: 880px) {
  .habito-app__section--faq {
    /* Image column ~45% (1fr), text column ~55% (1.2fr) — text leads,
       image is the supporting element. */
    grid-template-columns: 1fr 1.2fr;
    /* Breathing room between the phone image and the FAQ text so the
       questions sit clearly apart and read comfortably. */
    gap: clamp(2.5rem, 5vw, 5rem);
    /* Pull the whole section toward the left edge of the page for a more
       editorial composition (instead of centered like the rest). */
    margin-left: clamp(1.5rem, 4vw, 4rem);
    margin-right: auto;
    /* Allow the image to bleed up into the previous section without the
       overlap getting clipped by the section box. */
    overflow: visible;
  }
}

.habito-app__faq-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--habito-radius-lg);
}

/* On mobile the FAQ image is purely decorative — the questions are what the
   user came for. Hide it so the title and accordions get all the focus. */
@media (max-width: 879px) {
  .habito-app__faq-media {
    display: none;
  }
}

.habito-app__faq-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--habito-radius-lg);
}

/* Desktop: image is in normal flow (not absolute). Asymmetric padding:
   big top (slack for the -100px upward parallax), small bottom (less
   visible cream under the phone). The parallax range is asymmetric to
   match — most of the motion is upward, with a small downward tail. */
@media (min-width: 880px) {
  .habito-app__faq-media {
    margin-top: clamp(-3rem, -4vh, -1rem);
    /* padding-top accommodates -100px upward parallax; padding-bottom
       trimmed down to 30-50px so there isn't a big empty band under the
       phone. JS limits +y to +30 to stay within the bottom slack. */
    padding-top: clamp(110px, 12vh, 140px);
    padding-bottom: clamp(30px, 4vh, 50px);
  }
  .habito-app__faq-media img {
    width: 100%;
    height: auto;
    max-width: none;
    /* JS sets --habito-faq-y (range -100px to +30px). */
    translate: 0 var(--habito-faq-y, 0px);
    will-change: translate;
  }
}

/* Text content sits naturally in its grid column — the grid gap above
   handles the spacing from the image. No negative margin pulling the
   text toward the image anymore. */
@media (min-width: 880px) {
  .habito-app__faq-content {
    position: relative;
  }
}

/* FAQ header — regular block (not sticky). The section uses align-items: start
   so opening an accordion grows the column downward without recentering. */
.habito-app__faq-header {
  /* intentionally minimal */
}

/* Parallax is fully JS-driven via the --habito-faq-y custom property
   (writeable from the inline script in preview.html / index.astro). The
   image's translate calc above reads from it. No CSS animation-timeline
   path: simpler, predictable in every browser, and avoids Brave-specific
   quirks with view-timeline progress reporting. */

.habito-app__section--faq .habito-app__section-label,
.habito-app__section--faq .habito-app__section-title {
  margin-left: 0; /* left-align inside the right column */
  text-align: left;
}

.habito-app__faq {
  margin-top: 3rem;
  border-top: 1px solid var(--habito-border);
}

.habito-app__faq > li {
  border-bottom: 1px solid var(--habito-border);
}

.habito-app__faq details {
  padding: 1.25rem 0;
}

.habito-app__faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--habito-font-display);
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 600;
  color: var(--habito-text);
  padding: 0.25rem 0;
  min-height: 44px;
  touch-action: manipulation;
}

/* Remove default disclosure marker on all browsers */
.habito-app__faq summary::-webkit-details-marker {
  display: none;
}
.habito-app__faq summary::marker {
  display: none;
  content: '';
}

/* Custom chevron that rotates when the details element is open */
.habito-app__faq summary::after {
  content: '';
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--habito-text-secondary);
  border-bottom: 2px solid var(--habito-text-secondary);
  transform: rotate(45deg);
  transition: transform 200ms ease;
  flex-shrink: 0;
  margin-right: 0.5rem;
}

.habito-app__faq details[open] summary::after {
  transform: rotate(225deg);
  margin-top: 6px;
}

.habito-app__faq summary:hover {
  color: var(--habito-text-secondary);
}

.habito-app__faq details > p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--habito-text-secondary);
  margin: 0.75rem 0 0.5rem 0;
  max-width: 60ch;
}

/* Subtle slide-down when opening (respects reduced motion via the rule
   already declared at the bottom of this file). */
@media (prefers-reduced-motion: no-preference) {
  .habito-app__faq details[open] > p {
    animation: habito-faq-slide 200ms ease;
  }
  @keyframes habito-faq-slide {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ============================================================================
   FOOTER
   ========================================================================== */

/* Dark footer — same full-bleed trick as the privacy section so the dark bg
   spans the full viewport while content stays contained at 1080px. */
.habito-app__footer {
  position: relative;
  background: var(--habito-ink-900);
  color: var(--habito-cream-50);
  padding: 3rem 1.5rem 4rem;
  max-width: 1080px;
  margin: 0 auto;
  box-shadow: 0 0 0 100vmax var(--habito-ink-900);
  clip-path: inset(0 -100vmax);
}

.habito-app__footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.habito-app__footer-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--habito-font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--habito-cream-50);
  margin: 0;
}

.habito-app__footer-brand img {
  color: var(--habito-cream-50); /* H. mark uses currentColor */
}

.habito-app__footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-family: var(--habito-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--habito-cream-300);
}

.habito-app__footer-links a:hover {
  color: var(--habito-cream-50) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.habito-app__footer-meta {
  font-family: var(--habito-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--habito-cream-300);
  opacity: 0.7;
  margin: 0;
}

/* ============================================================================
   Smooth scroll for anchors + reduced motion
   ========================================================================== */

/* Smooth scroll for in-page anchor links (#como, #features, #faq, etc.).
   Lives on <html>, which is the element the browser actually scrolls — not
   on .habito-app (which is <body>). Respects prefers-reduced-motion. */
html {
  scroll-behavior: smooth;
}

/* When the user clicks a nav link (#como, #features, #faq, ...), the browser
   scrolls so the target's TOP aligns with the viewport top — which sits
   BEHIND the sticky nav. scroll-margin-top pushes the target down by the
   nav height (+ a touch of buffer) so the section title is fully visible
   after the jump. JS-measured --habito-nav-h is most accurate; fallback 56px. */
.habito-app__hero,
.habito-app__section {
  scroll-margin-top: calc(var(--habito-nav-h, 56px) + 0.5rem);
}

/* Anchor targets inside features (#ciclo, #entrenamiento) also need offset. */
#ciclo,
#entrenamiento {
  scroll-margin-top: calc(var(--habito-nav-h, 56px) + 0.5rem);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .habito-app *,
  .habito-app *::before,
  .habito-app *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}