/* wa-kit.css - CRITICAL WhatsApp-kit primitives: hero device mock (2.1) +
 * CTA card (2.4/2.5), visible at first paint. Render-blocking on index.html.
 * S1.21: mini bubble (2.2, unused) and app-card family (2.3, rail-only,
 * opacity:0 until open) moved to wa-mock.css (non-blocking, media=print
 * swap). 2.1 stays here: deferring .wa-device/.wa-screen's box model was
 * measured causing real CLS (device renders at 0 height until that CSS
 * loads, then snaps to 393x852). Comments here are kept terse on purpose:
 * this file is render-blocking, and every byte is on the S1.21 budget.
 * Isolation rule (spec-addendum §1.1): every selector carries a class or
 * attribute selector, no bare html/body/element/* rules. :root only
 * declares --wa-* custom properties. No @font-face.
 */

/* Hidden SVG sprite - stays critical: the raw <symbol> defs (index.html,
 * after the skip link) would render at natural size for a frame otherwise. */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:root {
  --wa-cue-ms: 7000ms;
}

@property --wa-cue-p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

/* ============ 2.1 WhatsApp device mock [data-mock] ============ */
.wa-device {
  position: relative;
  width: 393px;
  height: 852px;
  border-radius: 56px;
  box-shadow: 0 28px 60px -28px rgba(20, 40, 8, .34), 0 12px 28px -16px rgba(20, 40, 8, .22);
  overflow: hidden;
  flex: none;
}
.wa-device::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(20, 40, 8, .14), inset 0 0 0 1px rgba(255, 255, 255, .45);
  z-index: 5;
  pointer-events: none;
}

.wa-screen {
  position: absolute;
  inset: 0;
  border-radius: 56px;
  overflow: hidden;
  background: #f5f2eb;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #0a0a0a;
  -webkit-font-smoothing: antialiased;
}
/* SEO.7: a canvas isn't an LCP candidate (img/svg-image/video-poster/
 * background-image are); home.js's initWaWallpaper() draws the tile there
 * (.wa-wallpaper, first child, paints under everything). A ::before pseudo
 * was tried first and still counted (attributed to .wa-screen) - Chrome
 * doesn't exclude pseudo-element backgrounds here despite the common
 * assumption. background-color above is the pre-paint/no-JS fallback. */
.wa-wallpaper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Status bar: shared by .wa-screen (chat) and .nav-app__screen (home.css).
 * M1: absolute+top:0, same 98px header surface as .wa-top (z4 over z3),
 * instead of 54px of normal-flow height pushing the header down. */
.wa-status {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  padding: 16px 31.33px 11px 41.5px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
}
.wa-status__time {
  width: 54px;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.6px;
  color: #0a0a0a;
}
.wa-status__cluster {
  display: flex;
  align-items: center;
  gap: 7.35px;
}
.wa-status__glyph {
  display: block;
  background: #0a0a0a;
  flex: none;
}
.wa-status__glyph.is--cellular {
  width: 19.33px;
  height: 12.33px;
  -webkit-mask: url(/assets/wa/statusbar-cellular.svg) no-repeat center / 100% 100%;
  mask: url(/assets/wa/statusbar-cellular.svg) no-repeat center / 100% 100%;
}
.wa-status__glyph.is--wifi {
  width: 17px;
  height: 12.33px;
  -webkit-mask: url(/assets/wa/statusbar-wifi.svg) no-repeat center / 100% 100%;
  mask: url(/assets/wa/statusbar-wifi.svg) no-repeat center / 100% 100%;
}
.wa-status__battery {
  position: relative;
  width: 27.34px;
  height: 13.67px;
}
.wa-status__battery .wa-status__glyph {
  position: absolute;
  inset: 0;
  -webkit-mask: url(/assets/wa/statusbar-battery.svg) no-repeat center / 100% 100%;
  mask: url(/assets/wa/statusbar-battery.svg) no-repeat center / 100% 100%;
}
.wa-status__battery-label {
  position: absolute;
  left: 1.5px;
  top: 1px;
  width: 22px;
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.67px;
  font-weight: 700;
  color: #fff;
}

/* Chat header. M1: covers the top 98px as one blurred surface, identity row
 * bottom-aligned inside it (was position:relative in flow, leaving a
 * transparent gap over the status bar and letting thread content draw over
 * the status glyphs once scrolled past the header's old, too-short cover). */
.wa-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 3;
  height: 98px;
  display: flex;
  align-items: flex-end;
  background: rgba(245, 242, 235, .8);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
}
.wa-top__row {
  display: flex;
  align-items: center;
  width: 100%;
  /* Should-fix (S1 gate iteration 4): 36px centered the ~31px name+desc
   * column with only ~2.5px clearance under the header's own bottom edge
   * (thread content passing under it visibly collided) - 40px (still well
   * inside the 98px header, .stage__phone overrides this to height:auto at
   * <=960px so mobile is unaffected) gives ~4.5px clear, closer to the
   * render's ~4.7px. */
  height: 40px;
  padding: 4px 22px 4px 0;
  gap: 0;
}
.wa-top__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
}
.wa-top__back svg { width: 12px; height: 20px; stroke: #0a0a0a; stroke-width: 2.4; fill: none; }
.wa-top__unread {
  width: 31px;
  font-size: 16px;
  font-weight: 500;
  color: #0a0a0a;
  flex: none;
}
.wa-top__ava {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 .5px rgba(10, 10, 10, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.wa-top__ava img { width: 26px; height: 26px; }
/* M2: verified badge = scalloped WhatsApp Business mask, inline right of the
 * name (was a round dot on the avatar corner, reading as "online" not
 * "verified"). */
.wa-top__badge {
  position: relative;
  flex: none;
  width: 15px;
  height: 15px;
  background: #1dab61;
  -webkit-mask: url(/assets/wa/badge-business.svg) no-repeat center / 100% 100%;
  mask: url(/assets/wa/badge-business.svg) no-repeat center / 100% 100%;
}
.wa-top__badge::after {
  content: '';
  position: absolute;
  left: 4.5px;
  top: 5.67px;
  width: 6.17px;
  height: 4px;
  background: #fff;
  -webkit-mask: url(/assets/wa/badge-check.svg) no-repeat center / 100% 100%;
  mask: url(/assets/wa/badge-check.svg) no-repeat center / 100% 100%;
}
.wa-top__id { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; margin-left: 10px; }
.wa-top__nameline { display: flex; align-items: center; gap: 4px; min-width: 0; }
/* Should-fix (S1 gate iteration 4): neither line-height was set, so the
 * browser's default (~1.2) made the name+desc column (~40px) taller than
 * .wa-top__row's own content box (28px, 36px row - 2x4px padding),
 * centering it 6px past both edges - the desc's bottom sat 2px past the
 * header's own bottom edge, with scrolled thread content passing under it
 * visibly colliding. Tighter, explicit line-heights fit the column inside
 * the row with clearance again (render: ~4.7px). */
.wa-top__name { font-size: 18px; line-height: 17px; font-weight: 600; letter-spacing: -.02em; color: #0a0a0a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-top__desc { font-size: 13.5px; line-height: 13px; color: rgba(0, 0, 0, .5); margin-top: 1px; }
.wa-top__actions { display: flex; align-items: center; gap: 16px; flex: none; }
.wa-top__actions button { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; }
.wa-top__actions svg { fill: #0a0a0a; }
.wa-top__actions .is--video svg { width: 25.6px; height: 16.6px; }
.wa-top__actions .is--phone svg { width: 20.06px; height: 20.06px; }

/* Chat body */
.wa-chat {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: transparent; /* wallpaper: .wa-wallpaper canvas above */
  scrollbar-width: none;
}
.wa-chat::-webkit-scrollbar { display: none; }
.wa-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
  justify-content: flex-end;
  padding: 110px 16px var(--wa-thread-pad, 72px) 16px;
  transition: opacity 320ms, transform 420ms, padding-bottom 1200ms var(--ease-out);
  /* T1 (S1 gate iteration 4): positioning context for .is--served-typing
   * below, so the load beat's typing dots can overlay the reserved greeting
   * slot instead of adding flex height. */
  position: relative;
}
.wa-thread.is--out { opacity: 0; transform: translateX(-48px); }
.wa-thread.is--pre { opacity: 0; transform: translateX(48px); transition: none; }

.wa-date {
  align-self: center;
  min-width: 100px;
  text-align: center;
  padding: 4px 14px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 0 .66px rgba(0, 0, 0, .06);
  font-size: 13px;
  font-weight: 600;
  margin-top: 11px;
}

.wa-msg { display: flex; flex-direction: column; max-width: 100%; }
.wa-msg.is--in { align-items: flex-start; }
.wa-msg.is--out { align-items: flex-end; }
.wa-msg.is--grouped { margin-top: -8.67px; }
.wa-msg.is--grouped .wa-tail { display: none; }
@keyframes wa-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.wa-msg { animation: wa-in 300ms ease-out; }

/* A11(b): served greeting+options replay as typing->reveal for JS+motion.
 * A12 (S1 gate iteration 5, F1): used to gate on .js (fx.js, pre-DCL) - that
 * assumed .js always lands before first paint, which stopped being true once
 * S1.21 made this page's own scripts `defer` (a slow connection paints the
 * served bubbles, THEN .js lands and this rule would hide content the
 * visitor already saw - the exact repaint-and-hide A12 forbids). Gated on
 * .beat-pending instead: home.js sets that class itself, synchronously, at
 * the top of its own execution, but ONLY when its own paint-timing check
 * (heroBeatSafe) finds no evidence a paint has happened yet - see home.js
 * for the detection. The same file (home.js) both hides and reveals now, so
 * there's no window where content can be left stuck hidden either.
 * Degrades to visible under --nojs/--cdnfail/reduced motion/already-painted. */
@media (prefers-reduced-motion: no-preference) {
  .beat-pending #inicio [data-thread] > .wa-msg.is--served-reveal { animation: none; opacity: 0; transform: translateY(6px); }
  .beat-pending #inicio [data-thread] > .wa-msg.is--served-reveal.is--revealed { opacity: 1; transform: translateY(0); transition: opacity 260ms ease-out, transform 260ms ease-out; }
  /* T1: the served-reveal typing bubble is taken out of flow and placed at
   * the exact top/left the (already-reserved, still-hidden) greeting bubble
   * occupies (home.js sets these from greetingMsg's own offsetTop/Left,
   * which transform doesn't affect) - the thread's total flex height never
   * changes across the beat, so "Hoy" and everything above it never moves. */
  .beat-pending #inicio [data-thread] > .wa-msg[data-typing].is--served-typing { position: absolute; margin: 0; }
}

.wa-bubble {
  position: relative;
  min-width: 88px;
  max-width: 296px;
  border-radius: 12px;
  padding: 6px 11px 7px;
  box-shadow: 0 0 0 .66px rgba(0, 0, 0, .06);
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -.013em;
  background: #fff;
}
.wa-msg.is--out .wa-bubble { background: #d0fecf; }
.wa-bubble a { color: #027eb5; text-decoration: underline; }
/* Should-fix (S1 gate iteration 4): design-notes §3.3's pago link is
 * "link-styled text, not an anchor" - same color/underline as .wa-bubble a
 * above, on a span (makeLinkTextIn, home.js) instead of an <a>. */
.wa-bubble .wa-linktext { color: #027eb5; text-decoration: underline; }
/* M3: full max-width so the auto-cue ring (right:12px) never crowds a
 * shrink-wrapped label; capped at 100% so it never overflows on mobile. */
.wa-bubble.is--options { width: min(296px, 100%); }

.wa-time {
  float: right;
  margin: 11px -3px -3px 10px;
  font-size: 12.5px;
  letter-spacing: .05em;
  color: rgba(0, 0, 0, .56); /* .56, not .5: >=4.5:1 on white and on the green out-bubble (WCAG AA) */
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.wa-time__check { width: 14.2px; height: 9.14px; color: #007bfc; }

.wa-tail {
  position: absolute;
  bottom: 0;
  width: 14px;
  height: 18px;
  -webkit-mask: url(/assets/wa/tail-friend.svg) no-repeat center / 100% 100%;
  mask: url(/assets/wa/tail-friend.svg) no-repeat center / 100% 100%;
}
.wa-msg.is--in .wa-tail { left: -7px; transform: scaleX(-1); background: #fff; }
.wa-msg.is--out .wa-tail { right: -7px; background: #d0fecf; }

.wa-btns {
  display: flex;
  flex-direction: column;
  margin: 8px -11px -7px;
}
.wa-btn,
.wa-btn-spent {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  height: 46px;
  width: 100%;
  border-top: .66px solid rgba(0, 0, 0, .08);
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  color: #027eb5;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.013em;
  font-family: inherit;
  cursor: pointer;
  transition: background 150ms ease-out, transform 150ms ease-out;
}
.wa-btn:hover { background: rgba(2, 126, 181, .06); }
.wa-btn:active { background: rgba(0, 0, 0, .06); transform: scale(.98); }
.wa-btn svg, .wa-btn-spent svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
/* .wa-btn-spent: a spent choice renamed off .wa-btn (not just state-classed)
 * so a repeated label (e.g. "Sí, preséntala" in two nodes) doesn't shadow
 * the live button under h.drive()'s exact-text query; same visuals either
 * way, still a real <button>. */
.wa-btn.is--done, .wa-btn-spent.is--done { opacity: .38; pointer-events: none; }
.wa-btn.is--picked, .wa-btn-spent.is--picked { opacity: .7; }
.wa-btn.is--cue { background: rgba(2, 126, 181, .05); position: relative; }
.wa-btn.is--cue::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: conic-gradient(#027eb5 var(--wa-cue-p), rgba(2, 126, 181, .14) 0);
  -webkit-mask: radial-gradient(circle, transparent 12.5px, #000 13px);
  mask: radial-gradient(circle, transparent 12.5px, #000 13px);
  animation: wa-cue-p var(--wa-cue-ms) linear forwards;
}
@keyframes wa-cue-p { from { --wa-cue-p: 0%; } to { --wa-cue-p: 100%; } }

.wa-doc {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 272px;
  padding: 8px 10px 10px;
  border-radius: 8px;
  background: rgba(10, 10, 10, .04);
  margin: -1.5px -6px 4px;
}
.wa-doc__icon {
  position: relative;
  flex: none;
  width: 22px;
  height: 27px;
  background: #fff;
  box-shadow: 0 0 0 .33px #d9d9db;
  border-radius: 2px;
}
.wa-doc__icon::after {
  content: 'pdf';
  position: absolute;
  top: 9px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 8px;
  line-height: 10px;
  color: #eb362b;
}
/* M4: folded-corner cue on the paper icon (design-notes §2.1). */
.wa-doc__icon::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 5.67px;
  height: 5.67px;
  background: #efefef;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
/* M4: name+meta were inline spans in an inline wrap, so they ran onto one
 * line; a flex column makes each its own block line. */
.wa-doc__meta { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.wa-doc__name { font-size: 16px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-doc__info { font-size: 13px; line-height: 16px; color: rgba(0, 0, 0, .5); margin-top: 2px; }

.wa-typing {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 31px;
  padding: 3.5px 6px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 .66px rgba(0, 0, 0, .06);
}
.wa-typing svg { width: 22.5px; height: 5.5px; }
.wa-typing circle { fill: #767779; animation: wa-dot 1.2s ease-in-out infinite; }
.wa-typing circle:nth-child(2) { animation-delay: .15s; }
.wa-typing circle:nth-child(3) { animation-delay: .3s; }
@keyframes wa-dot { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.wa-input {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  background: rgba(245, 242, 235, .8);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
}
.wa-input__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 43px;
  padding: 5.5px 9px 5.5px 7px;
  margin-top: 4px;
}
.wa-input__plus { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; }
.wa-input__plus svg { width: 19.6px; height: 19.6px; fill: #0a0a0a; }
.wa-input__field {
  flex: 1 1 auto;
  height: 32px;
  border-radius: 15px;
  background: #fff;
  box-shadow: inset 0 0 0 .33px #b2b2b2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px 0 10px;
  font-size: 16px;
  letter-spacing: -.02em;
  color: rgba(0, 0, 0, .56); /* same AA floor as .wa-time */
}
.wa-input__field svg { width: 18.2px; height: 17.7px; color: #007afe; fill: currentColor; }
/* M2: camera/mic in 32px boxes (call-icon pattern), svg at native asset
 * size (not force-stretched to fill the box). */
.wa-input__actions { display: flex; align-items: center; gap: 7px; padding: 0 6px; flex: none; }
.wa-input__actions span { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex: none; }
.wa-input__actions svg { color: #007afe; fill: currentColor; }
.wa-input__actions .is--camera svg { width: 23.6px; height: 18.1px; }
.wa-input__actions .is--mic svg { width: 15.6px; height: 22.8px; }

/* ============ 2.4 WhatsApp CTA card (.ca), not a mock ============ */
.ca {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--green-ink);
  background: #fff;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px #e3e9da, 0 10px 28px -16px rgba(20, 40, 8, .3);
  transition: box-shadow 200ms ease-out, transform 200ms ease-out;
  text-align: left;
  font-family: var(--font-label), sans-serif;
}
.ca:hover { box-shadow: inset 0 0 0 1.5px #25d366, 0 14px 32px -16px rgba(20, 40, 8, .35); transform: translateY(-1px); }
.ca:active { transform: scale(.99); }

.ca__tile { display: flex; align-items: center; justify-content: center; flex: none; background: #25d366; color: #fff; }
.ca__glyph { display: block; fill: currentColor; }

.ca__tx { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.ca__tx b { font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.ca__tx small { display: flex; align-items: center; gap: 7px; font-weight: 500; color: var(--ink-500); line-height: 1.2; font-size: 16px; }
.ca__dot { width: 8px; height: 8px; border-radius: 50%; background: #25d366; box-shadow: 0 0 0 3px rgba(37, 211, 102, .18); flex: none; }
.ca__ar { width: 20px; height: 20px; color: #9aa093; stroke: currentColor; stroke-width: 2; fill: none; transition: transform 200ms ease-out, color 200ms ease-out; flex: none; }
.ca:hover .ca__ar { transform: translateX(3px); color: #1fb457; }

/* S1-should-1: 380px wrapped "En línea · te responde en / segundos"
 * (orphan) at D; widening toward the contract's 380-440px allowance lets it
 * one-line, capped by the parent (.stage__side, itself width-limited). */
.ca--lg { width: min(420px, 100%); padding: 14px 20px 14px 14px; }
.ca--lg .ca__tile { width: 48px; height: 48px; border-radius: 12px; }
.ca--lg .ca__glyph { width: 28px; height: 28px; }
.ca--lg .ca__tx b { font-size: 18px; }

.ca--sm { width: 100%; padding: 8px 16px 8px 8px; }
.ca--sm .ca__tile { width: 36px; height: 36px; border-radius: 10px; }
.ca--sm .ca__glyph { width: 21px; height: 21px; }
.ca--sm .ca__tx b { font-size: 16px; }
.ca--sm .ca__tx small { display: none; }
.plan--pick .ca--sm { box-shadow: inset 0 0 0 1px #e3e9da, 0 10px 28px -16px rgba(0, 0, 0, .4); }

.ca--nav { width: auto; padding: 8px 16px 8px 8px; }
.ca--nav .ca__tile { width: 40px; height: 40px; border-radius: 10px; }
.ca--nav .ca__glyph { width: 23px; height: 23px; }
.ca--nav .ca__tx b { font-size: 16px; white-space: nowrap; }
.ca--nav .ca__tx small { display: none; }

.wa-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: clamp(40px, 6vh, 64px) auto 0; }
.wa-cta__lead { font-size: clamp(18px, 1.4vw, 22px); font-weight: 500; color: var(--green-ink); text-wrap: balance; text-align: center; }

/* ============ 2.5 Floating CTA ============ */
.ca--fl {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 60;
  padding: 8px 20px 8px 8px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px #e3e9da, 0 18px 40px -14px rgba(20, 40, 8, .45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(130%);
  transition: transform 520ms var(--ease-out), opacity 320ms ease-out, visibility 520ms, box-shadow 200ms ease-out;
}
.ca--fl .ca__tile { width: 40px; height: 40px; border-radius: 50%; }
.ca--fl .ca__glyph { width: 22px; height: 22px; }
.ca--fl .ca__tx b { font-size: 16px; }
.ca--fl .ca__tx small,
.ca--fl .ca__ar { display: none; }
.ca--fl.is--on { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
/* Re-declared at higher specificity so a hover while .is--on still lifts
 * 1px (its own transform otherwise cancels the base .ca:hover lift). */
.ca--fl.is--on:hover { transform: translateY(-1px); }
/* G16: zero the transition itself (not just the property) so both the
 * hover lift and the show/hide slide land in one frame under reduced
 * motion, without touching normal-motion timing. */
@media (prefers-reduced-motion: reduce) {
  .ca--fl,
  .ca--fl.is--on,
  .ca--fl.is--on:hover {
    transition: none;
  }
}
@media (max-width: 620px) {
  .ca--fl { left: 16px; right: 16px; width: auto; justify-content: center; padding: 8px; }
  .ca--fl .ca__tx { flex: none; }
}

/* Reduced motion: kill 2.1's decorative loops (G16: 0 running animations 2s
 * after load / 100ms after interaction; not .js-gated like [data-reveal],
 * so these need their own kill switch). */
@media (prefers-reduced-motion: reduce) {
  .wa-msg,
  .wa-typing circle,
  .wa-btn.is--cue::after {
    animation: none;
  }
}

/* Section regions: each section adds its rules only inside its own region (parallel build, clean merges). */

/* ==== S2 region ==== */
/* ==== /S2 region ==== */

/* ==== S3 region ==== */
/* ==== /S3 region ==== */

/* ==== S4 region ==== */
/* ==== /S4 region ==== */

/* ==== S5 region ==== */
/* ==== /S5 region ==== */

/* ==== S6 region ==== */
/* ==== /S6 region ==== */

/* ==== S7 region ==== */
/* ==== /S7 region ==== */

/* ==== S8 region ==== */
/* ==== /S8 region ==== */