/* Baliole responsive overrides for monica-el-desatascador.
   The source page.css already handles 540 / 640 / 720 / 880 / 960 / 980 breakpoints
   competently — this file only adds the platform safety net plus mobile polish. */


/* overflow-x:clip clips horizontal overflow without creating a scroll
   container — sticky descendants still anchor to the actual viewport.
   `overflow-x: hidden` would break sticky pinning across the page.
   Override the bundler's `overflow-x: hidden` on body via !important. */
html, body { overflow-x: clip !important; max-width: 100vw; }
img, video, svg { max-width: 100%; height: auto; }

/* The decorative coral blob (.bg-blob) is fixed at 520x520 and sits top-left,
   blurred. On phones it pushes outside the viewport — the body's overflow-x
   keeps the page from scrolling but the blob still bleeds across the hero.
   Shrink + soften on small screens. */
@media (max-width: 720px) {
  .bg-blob {
    width: 320px;
    height: 320px;
    opacity: 0.55;
    filter: blur(28px);
  }
}

/* The category marquee under the hero — bump readability on phones and pull
   the words closer together (the desktop 80px gaps read as too sparse on a
   narrow screen). Both the track gap and the inner word/dot gap tighten. */
@media (max-width: 640px) {
  .marquee {
    font-size: 13px;
    padding: 14px 0;
  }
  .marquee-track {
    gap: 26px;
  }
  .marquee-track span {
    gap: 26px;
  }
}

/* Hero photo caption — on mobile the desktop version overhung the frame and
   got clipped (and an old rule pushed it half-below with translateY). Anchor
   it INSIDE the photo, inset from both edges so it can never exceed the
   viewport, frosted so the 2nd-person line stays legible over the image. */
@media (max-width: 640px) {
  .hero-photo .tag {
    left: 14px;
    right: 14px;
    bottom: 14px;
    max-width: none;
    transform: none;
    font-size: 15px;
    line-height: 1.35;
    padding: 12px 16px;
    background: rgba(246,239,233,0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

/* Hero = one mobile screen. 95% of registrations happen on a phone and this is
   a free resource, so the CTA must sit in the first viewport. Compress the
   vertical rhythm + H1 type scale so the button + label land above the fold on
   small phones (down to 375x667). Copy unchanged; the portrait stacks below
   and is revealed on the first scroll. */
@media (max-width: 640px) {
  .hero {
    padding-top: 68px;
    padding-bottom: 32px;
  }
  .hero-spark { display: none; }
  /* Even editorial rhythm: eyebrow → headline → italic sub → body → pull-quote
     → CTA, each separated by a single consistent step so the column reads as one
     calm flow instead of ad-hoc gaps. */
  .hero h1,
  .hero-title {
    font-size: clamp(40px, 9.8vw, 54px);
    line-height: 1.04;
    letter-spacing: -0.01em;
    margin-top: 16px;
  }
  /* Soft living title: a slow light sweep glides across the coral word.
     Frozen under prefers-reduced-motion (see below). */
  .hero-a .hero-title .accent {
    font-size: 1.18em;
    line-height: 0.9;
    background-image: linear-gradient(100deg,
      var(--coral) 0%, var(--coral) 38%,
      #F4B6B0 50%,
      var(--coral) 62%, var(--coral) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: accent-shimmer 6.5s ease-in-out infinite;
  }
  .hero-sub {
    font-size: 19px;
    line-height: 1.4;
    margin: 18px 0 0;
  }
  .hero-sub-line { display: block; }
  .hero-sub-line:first-child { margin-bottom: 0.45em; }
  /* Match the landing's body copy (17px / 1.65) so the hero paragraph doesn't
     read as a smaller, different size than the rest of the page. */
  .hero-text {
    font-size: 17px;
    line-height: 1.65;
    margin-top: 18px;
  }
  .hero-text p { margin-bottom: 0; }
  .hero-question {
    font-size: 19px;
    line-height: 1.4;
    margin-top: 20px;
    padding-left: 16px;
  }
  .hero-cta { margin-top: 26px; }
  /* App-style full-width CTA. The label stacks into two centered lines
     ("QUIERO DESATASCAR" / "MI NEGOCIO") via .cta-seg blocks so the last word is
     never orphaned; padding is tightened so the pill hugs the two lines instead
     of leaving a tall empty band, and the arrow floats at the right edge so the
     text stays optically centered. */
  .hero-cta .cta-btn {
    display: flex;
    width: 100%;
    padding: 16px 24px;
    justify-content: center;
    text-align: center;
    line-height: 1.3;
    letter-spacing: 1.4px;
  }
  .hero-cta .cta-btn .cta-label { display: block; }
  .hero-cta .cta-btn .cta-seg { display: block; }
  .hero-cta .cta-btn .arrow {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
  }
  .hero-cta .cta-btn:hover .arrow { transform: translateY(-50%) translateX(3px); }
  /* Centered under the full-width CTA, two balanced lines (no orphaned "Sin móvil."). */
  .hero-cta-note {
    font-size: 12.5px;
    line-height: 1.5;
    margin: 14px auto 0;
    max-width: 300px;
    text-align: center;
    text-wrap: balance;
  }
  /* Sección Dolor — lista numerada 2px más grande en móvil */
  .pain-list li { font-size: 25px; }
}

/* ===========================================================
   HERO A — phone-only living background.
   A trio of soft coral / rosa / peach auroras drift slowly behind the
   editorial copy on top of a warm cream→deep wash, giving the font-only
   hero a premium, dynamic feel without ever competing with the text.
   Desktop and the other hero variants are untouched (the aura layer only
   exists in HeroA's markup and only displays ≤640px). The drift is pure
   transform animation (compositor-friendly) and freezes under
   prefers-reduced-motion. */
.hero-aura { display: none; }

@media (max-width: 640px) {
  .hero-a {
    background:
      radial-gradient(130% 70% at 50% -6%, rgba(233,198,187,0.36) 0%, transparent 58%),
      linear-gradient(180deg, var(--cream) 0%, var(--cream) 55%, var(--cream-deep) 100%);
  }
  .hero-aura {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }
  /* Lift all copy + photo above the aura. */
  .hero-a > .wrap { position: relative; z-index: 1; }

  /* Large, deeply-blurred and mostly off-screen so only a soft glow bleeds in —
     a clean atmospheric wash rather than visible discs. */
  .aura-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.6;
    will-change: transform;
  }
  .aura-1 {
    width: 400px; height: 400px;
    top: -150px; right: -160px;
    background: radial-gradient(circle at 42% 42%, rgba(233,124,123,0.30), transparent 62%);
    animation: aura-drift-1 24s ease-in-out infinite alternate;
  }
  .aura-2 {
    width: 400px; height: 400px;
    top: 150px; left: -180px;
    background: radial-gradient(circle at 50% 48%, rgba(221,166,152,0.26), transparent 64%);
    animation: aura-drift-2 29s ease-in-out infinite alternate;
  }
  .aura-3 {
    width: 440px; height: 440px;
    top: 380px; right: -190px;
    background: radial-gradient(circle at 50% 50%, rgba(233,198,187,0.30), transparent 66%);
    animation: aura-drift-3 33s ease-in-out infinite alternate;
  }

  @keyframes aura-drift-1 {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-34px, 32px, 0) scale(1.12); }
  }
  @keyframes aura-drift-2 {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(42px, -26px, 0) scale(1.16); }
  }
  @keyframes aura-drift-3 {
    0%   { transform: translate3d(0, 0, 0) scale(1.05); }
    100% { transform: translate3d(-26px, -34px, 0) scale(0.9); }
  }
}

@keyframes accent-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .aura-blob { animation: none !important; }
  .hero-a .hero-title .accent { animation: none !important; }
}

/* Very narrow widths — let the long "Desatascador" word break softly and drop
   the cursive SVG underline (it doesn't scale gracefully under ~400px). */
@media (max-width: 420px) {
  .hero h1 {
    font-size: clamp(38px, 10.2vw, 48px) !important;
    line-height: 1.03 !important;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .hero h1 .accent svg { display: none; }
  .topnav { padding: 12px 18px !important; }
  .topnav .mini-cta { display: none; }
}

/* CTA button label is long ("QUIERO DESATASCAR MI NEGOCIO") and wraps awkwardly
   in the tightest viewports. Tighter letter-spacing keeps it on one line. */
@media (max-width: 480px) {
  .form-row .cta-btn {
    letter-spacing: 0.08em;
    padding: 14px 18px;
    font-size: 13px;
  }
}

/* Made with love by Baliole.com — inside the .foot, after .copy. */
.foot .foot-credit {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(94,92,94,0.10);
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-family: var(--sans);
}
.foot .foot-credit a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 160ms ease;
}
.foot .foot-credit a:hover { color: var(--coral); }
.foot .foot-credit .foot-heart {
  color: var(--coral);
  vertical-align: middle;
  flex-shrink: 0;
}

/* ===========================================================
   A1 — "Desatascador" signature underline draws itself in.
   pathLength=200 normalizes the path so dasharray:200 always
   covers the whole stroke regardless of viewBox math. */
.signature-stroke {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1) 0.55s;
}
.reveal.in .signature-stroke,
.reveal.in .accent .signature-stroke {
  stroke-dashoffset: 0;
}

/* ===========================================================
   A2 — Both cursor blobs sit BEHIND content as pure atmosphere.
   Original page.css put .bg-blob at z-index 60 with multiply blend,
   which tints photos and text. We want background warmth only.

   Trick: paint cream on html, make body transparent, blobs at z -1.
   The blobs are then visible through the body in cream-background
   sections, and naturally hidden behind any solid-colored section
   (.anchor, .important, .extra). Atmosphere, never overlay. */
html { background: var(--cream); }
body { background: transparent !important; }
.bg-blob {
  z-index: -1 !important;
  mix-blend-mode: normal !important;
  opacity: 0.55;
}
.bg-blob-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle at 70% 70%, rgba(221,166,152,0.22), rgba(221,166,152,0) 60%);
  filter: blur(36px);
  z-index: -1 !important;
  mix-blend-mode: normal !important;
  opacity: 0.7;
}
@media (max-width: 720px) {
  .bg-blob-2 {
    width: 240px;
    height: 240px;
    opacity: 0.45;
  }
}
@media (hover: none) {
  /* No mouse on touch — blobs would feel inert. Park them discreetly. */
  .bg-blob   { opacity: 0.35; }
  .bg-blob-2 { opacity: 0.3; }
}

/* Bottom sections (.cta-final, .pd) had solid cream backgrounds that
   hid the atmospheric blobs. Drop the gradients to alpha-tinted versions
   so the html cream + cursor blob warmth peek through at the bottom too. */
.cta-final {
  background: linear-gradient(180deg,
    rgba(246,239,233,0.0) 0%,
    rgba(239,230,221,0.45) 100%) !important;
}
.pd {
  background: rgba(239,230,221,0.55) !important;
}
.foot {
  background: var(--cream) !important;  /* footer keeps definitive ground */
}

/* ===========================================================
   Hero photo was a full-body shot; we cropped it to waist-up.
   The new file is 1690x1600 (ratio ~1.06 — close to square).
   Override the .hero-photo container aspect-ratio so the new
   photo fills without zoom-cropping the face. */
.hero-photo {
  aspect-ratio: 1/1.05 !important;
}
.hero-photo .img-frame img {
  object-position: 50% 30% !important;  /* keep face in upper-third */
  transform: scale(1.05) !important;     /* lighter zoom than original */
  transform-origin: 50% 30% !important;
}

/* ===========================================================
   Sticky on shorter columns in asymmetric 2-col sections.
   Match rise-retreat's pattern: position: sticky + top + align-self:
   start. The shorter column pins at top:110px while the longer body
   scrolls past, then releases when the parent grid ends.

   SoyMonica's .soy-photo already had this in page.css (it works
   because .soy-grid is tall). QueEs adds sticky to .split-aside. */
@media (min-width: 880px) {
  .split > .split-aside {
    position: sticky;
    top: 110px;
    align-self: start;
  }
}

/* PD section keeps the parallax pattern (the pd-grid is too short
   for sticky to have visible travel — sticky needs the parent grid
   to be much taller than the sticky element). */
.pd-parallax-label {
  align-self: start;
}
.pd-parallax-photo {
  justify-self: start;
  width: 100%;
  max-width: 420px;
}

@media (max-width: 880px) {
  /* Mobile stacks to 1-col — kill PD parallax to avoid touch-scroll jitter. */
  .pd-parallax-label,
  .pd-parallax-photo {
    transform: none !important;
  }
  .pd-parallax-photo {
    justify-self: center;
    margin: 0 auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pd-parallax-label,
  .pd-parallax-photo {
    transform: none !important;
  }
  .split > .split-aside,
  .soy-photo {
    position: static !important;
  }
}

/* ===========================================================
   A3 — Repeat the hero photo's editorial language on the
   mug and cierre photos. Both containers have overflow:hidden,
   so decorations live *inside* the frame (positive insets).
   The .img-frame wrapper we added wraps the img without changing
   its layout (display: contents).                                */
.soy-photo .img-frame,
.pd-cierre-photo .img-frame {
  display: contents;
}

.soy-photo .arc {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--rosa);
  opacity: 0.28;
  z-index: 1;
  pointer-events: none;
}
.soy-photo .dot-grid,
.pd-cierre-photo .dot-grid {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 88px;
  height: 88px;
  background-image: radial-gradient(var(--coral) 1.5px, transparent 1.7px);
  background-size: 14px 14px;
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
}
/* Cierre already has a coral circle ::before in bottom-right; skip an arc
   there so we don't double-decorate. Dot-grid goes upper-left instead
   to balance the existing ::before. */
.pd-cierre-photo .dot-grid {
  left: 14px;
  top: 14px;
  bottom: auto;
}
.soy-photo .badge {
  z-index: 2;  /* keep the SOY MÓNICA badge above the new arc */
}

/* ===========================================================
   A4 — Marquee words become section anchors.
   Pause-on-hover so the user can actually click. Cursor + hover
   color shift signal interactivity without breaking the ribbon
   visual. Keep the strip non-aria-hidden now that it's nav. */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}
.marquee-word {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: color 200ms ease, transform 200ms ease;
  display: inline-block;
}
.marquee-word:hover,
.marquee-word:focus-visible {
  color: var(--coral-deep);
  transform: translateY(-1px);
}
.marquee-word.coral:hover,
.marquee-word.coral:focus-visible {
  color: var(--coral);
}
.marquee-word:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ===========================================================
   A5 — Form focus + CTA hover polish. The moment a visitor
   commits to typing their email is the page's payoff. Make
   the page feel like it noticed. */
.form-row:focus-within {
  border-color: var(--coral) !important;
  box-shadow:
    0 0 0 4px rgba(233,124,123,0.18),
    inset 0 0 0 1px rgba(233,124,123,0.25) !important;
}
.cta-btn:hover {
  box-shadow:
    0 18px 40px -14px rgba(216,100,98,0.7),
    0 0 0 1px rgba(216,100,98,0.4);
}

/* ===========================================================
   B1 — Pull-quote mark becomes a backdrop, not a header.
   The giant " floats off the upper-left, low-opacity, like a
   printer's ornament. Text gets to breathe. The coral variant
   keeps its higher opacity (cream-on-coral needs more contrast). */
.blockquote-big {
  padding-top: 90px !important;  /* room for the giant mark */
}
.blockquote-big::before {
  top: -40px !important;
  left: -10px !important;
  transform: none !important;
  font-size: clamp(180px, 22vw, 320px) !important;
  opacity: 0.14 !important;
  line-height: 0.85 !important;
}
.blockquote-big.coral::before {
  opacity: 0.5 !important;
  color: var(--coral) !important;
}
@media (max-width: 640px) {
  .blockquote-big::before {
    top: -28px !important;
    left: -6px !important;
    font-size: clamp(140px, 32vw, 200px) !important;
  }
  .blockquote-big {
    padding-top: 64px !important;
  }
}

/* ===========================================================
   B2 — Handwritten signature on the P.D. signoff.
   The page ends with Mónica talking one-to-one; the closing
   should look like she signed it by hand. Just the name line. */
.pd-cierre-name {
  font-family: 'Caveat', 'Cormorant Garamond', cursive !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: clamp(64px, 8vw, 110px) !important;
  color: var(--coral-deep) !important;
  transform: rotate(-2deg);
  transform-origin: left center;
  display: inline-block;
  letter-spacing: -0.5px;
}

/* ===========================================================
   B3 — Kinetic editorial typography. Bump the strike-through
   duration on outcome-cards-footer for more drama. Animate the
   small coral eyebrow bar (the 28px-wide line before each
   section eyebrow) to stroke in from left when its section
   enters viewport. */
.outcome-cards-footer .strike::after {
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1) 0.2s !important;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s cubic-bezier(.2,.7,.2,1) 0.15s;
}
.reveal.in.eyebrow::before,
.reveal.in .eyebrow::before {
  transform: scaleX(1);
}

/* ===========================================================
   C1 — Discreet section anchors in the scrolled topnav.
   Hidden by default. On .scrolled at desktop widths only,
   slides in between brand and the mini-CTA. */
.topnav-sections {
  display: none;
}
@media (min-width: 880px) {
  .topnav-sections {
    display: flex;
    gap: 28px;
    margin-left: auto;
    margin-right: 24px;
    align-items: center;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .topnav.scrolled .topnav-sections {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}
.topnav-section-link {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  position: relative;
  padding: 4px 0;
  transition: color 0.2s ease;
}
.topnav-section-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(.2,.7,.2,1);
}
.topnav-section-link:hover {
  color: var(--coral-deep);
}
.topnav-section-link:hover::after {
  transform: scaleX(1);
}

/* ===========================================================
   C2 — Outcome cards get a magazine-card flip on hover.
   Restrained: 2deg max, 800ms ease. Touch devices skip the
   tilt (no hover state, only translateY). */
.outcome-card {
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(.2,.7,.2,1),
              border-color 0.35s ease,
              background 0.35s ease,
              box-shadow 0.35s ease;
}
@media (hover: hover) {
  .outcome-card:hover {
    transform: translateY(-4px) perspective(900px) rotateX(2deg) rotateY(-1.5deg) !important;
    box-shadow: 0 24px 60px -28px rgba(94,92,94,0.4);
  }
}

/* ===========================================================
   C3 — Soft seams between non-cream sections.
   Only .anchor (the rosa pull-quote section) is full-bleed
   colored. .important and .extra are rounded cards on cream
   already and don't need this. mask-image feathers the top
   and bottom 40px so the rosa block fades into cream instead
   of butting hard against the section above/below. */
.anchor {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0,
    #000 40px,
    #000 calc(100% - 40px),
    transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0,
    #000 40px,
    #000 calc(100% - 40px),
    transparent 100%);
}

/* ===========================================================
   D1 — Trust-count chip in the hero eyebrow.
   Renders only when __monicaContent.trustCount is set. */
.eyebrow-trust {
  color: var(--coral);
  font-weight: 500;
}

/* ===========================================================
   D2 — Testimonials strip between SoyMonica and QueEs.
   Editorial: italic Cormorant quote pulled left, sans signature
   pulled right. Horizontal scroll-ribbon on mobile with edge-fade.
   Scaffolding state: visible dashed border + muted ink so admin
   can tell at a glance which cards still need real quotes. */
.testimonials-section {
  padding: clamp(40px, 6vw, 80px) 0;
}
.testimonials-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 32px;
  align-items: stretch;
}
.testimonial-card {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(94,92,94,0.08);
  border-radius: 8px;
  padding: 28px 26px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
}
.testimonial-card.scaffolding {
  border: 1px dashed rgba(94,92,94,0.3);
  background: rgba(0,0,0,0.02);
  opacity: 0.65;
}
.testimonial-card.scaffolding::before {
  content: "DRAFT — esperando texto de Mónica";
  display: block;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(94,92,94,0.55);
  margin-bottom: 12px;
}
.testimonial-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 18px;
}
.testimonial-quote::before { content: "“"; color: var(--coral); margin-right: 2px; }
.testimonial-quote::after  { content: "”"; color: var(--coral); margin-left: 2px; }
.testimonial-attr {
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
  text-align: right;
}
.testimonial-name {
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.06em;
}
.testimonial-role {
  font-style: italic;
}

@media (max-width: 880px) {
  .testimonials-strip {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-left: -22px;
    margin-right: -22px;
    padding: 4px 22px 6px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  }
  .testimonials-strip::-webkit-scrollbar { display: none; }
  .testimonials-strip > * {
    flex: 0 0 86%;
    max-width: 380px;
    scroll-snap-align: center;
  }
}

/* ===========================================================
   Testimonials carousel controls — only meaningful on the mobile
   scroll-ribbon. On desktop the strip is a static 3-col grid where
   everything is already visible, so arrows + dots stay hidden. */
.testimonials-carousel { position: relative; }
.t-arrow,
.testimonials-dots { display: none; }

@media (max-width: 880px) {
  /* Side arrows — frosted coral pills that float over the edge-faded ribbon. */
  .t-arrow {
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(216,100,98,0.22);
    background: rgba(246,239,233,0.85);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    color: var(--coral-deep);
    font-family: var(--sans);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 22px -10px rgba(216,100,98,0.5);
    transition:
      transform 0.28s cubic-bezier(.2,.7,.2,1),
      background 0.28s ease,
      color 0.28s ease,
      opacity 0.28s ease;
  }
  .t-arrow-prev { left: -6px; }
  .t-arrow-next { right: -6px; }
  .t-arrow:hover {
    background: linear-gradient(135deg, #EE8E8A 0%, var(--coral) 46%, var(--coral-deep) 100%);
    color: var(--cream);
    border-color: transparent;
  }
  .t-arrow:active { transform: translateY(-50%) scale(0.9); }
  .t-arrow:disabled {
    opacity: 0;
    pointer-events: none;
  }

  /* Pagination dots — inactive: muted ink; active: coral pill that grows. */
  .testimonials-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin-top: 24px;
  }
  .t-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(94,92,94,0.22);
    cursor: pointer;
    transition:
      width 0.32s cubic-bezier(.2,.7,.2,1),
      background 0.32s ease;
  }
  .t-dot:hover { background: rgba(216,100,98,0.45); }
  .t-dot.is-active {
    width: 26px;
    background: linear-gradient(90deg, #EE8E8A 0%, var(--coral-deep) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-arrow, .t-dot { transition: none; }
}

/* ===========================================================
   D3 — Instagram link in the footer (hidden when null). */
.foot-social {
  margin-top: 14px;
  text-align: center;
}
.foot-social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 0.2s ease;
}
.foot-social-link:hover { color: var(--coral); }