/* Manito — shared stylesheet for the public site. No build step, no framework.
   Palette mirrors apps/mobile/theme/palette.js ("Warm Artisan": emerald + amber + stone).

   Two audiences, one Manito. The client page runs light and warm (stone); the
   contractor page runs deep green — the same split the app already makes in
   theme/colors.ts (customerGradient vs contractorGradient). Sections opt into
   one of the two inks with `.sec--light` / `.sec--dark`, which set the --fg,
   --rule and --ic-* variables every component inside them reads. That is what
   lets the same .step / .featrow / .node markup live on either page.

   Brand lockup rule: the mark and the word ALWAYS share one colour, so the
   lockup reads as an object rather than a badge beside a word. Light →
   emerald-950 (14.5:1). Dark → white (15:1). emerald-600 is reserved for
   buttons and the headline accent. */

:root {
  --em50: #ecfdf5;
  --em100: #d1fae5;
  --em200: #a7f3d0;
  --em300: #6ee7b7;
  --em400: #34d399;
  --em500: #10b981;
  --em600: #059669;
  --em700: #047857;
  --em800: #065f46;
  --em900: #064e3b;
  --em950: #022c22;

  --am100: #fef3c7;
  --am200: #fde68a;
  --am300: #fcd34d;
  --am400: #fbbf24;
  --am500: #f59e0b;
  --am600: #d97706;
  --am700: #b45309;

  --st50: #fafaf9;
  --st100: #f5f5f4;
  --st150: #efedeb;
  --st200: #e7e5e4;
  --st300: #d6d3d1;
  --st400: #a8a29e;
  --st500: #78716c;
  --st600: #57534e;
  --st700: #44403c;
  --st800: #292524;
  --st900: #1c1917;

  --green-600: #16a34a;

  --font-display: "Bricolage Grotesque", "Avenir Next", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* The organic "hoja" radius — the avatar/icon shape the app uses too. */
  --leaf: 42% 58% 55% 45% / 50% 40% 60% 50%;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --sh-soft: 0 1px 3px rgba(28, 25, 23, 0.1), 0 1px 2px rgba(28, 25, 23, 0.08);
  --sh-lift: 0 12px 24px rgba(28, 25, 23, 0.14), 0 4px 8px rgba(28, 25, 23, 0.08);
  --sh-card: 0 24px 48px rgba(28, 25, 23, 0.16), 0 6px 12px rgba(28, 25, 23, 0.08);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");

  --wrap: 1180px;
}

/* Legacy aliases — the /c/<slug> Pages Function and the legal pages were
   written against these names. Keeping them means one palette, two spellings,
   instead of a rename that has to be kept in sync with a Worker. */
:root {
  --emerald-50: var(--em50);
  --emerald-100: var(--em100);
  --emerald-200: var(--em200);
  --emerald-300: var(--em300);
  --emerald-500: var(--em500);
  --emerald-600: var(--em600);
  --emerald-700: var(--em700);
  --emerald-800: var(--em800);
  --emerald-900: var(--em900);
  --emerald-950: var(--em950);
  --amber-100: var(--am100);
  --amber-200: var(--am200);
  --amber-300: var(--am300);
  --amber-400: var(--am400);
  --amber-500: var(--am500);
  --amber-600: var(--am600);
  --amber-700: var(--am700);
  --stone-50: var(--st50);
  --stone-100: var(--st100);
  --stone-200: var(--st200);
  --stone-300: var(--st300);
  --stone-400: var(--st400);
  --stone-500: var(--st500);
  --stone-600: var(--st600);
  --stone-700: var(--st700);
  --stone-800: var(--st800);
  --stone-900: var(--st900);
  --ease-organic: var(--ease);
  --shadow-soft: var(--sh-soft);
  --shadow-lift: var(--sh-lift);
  --shadow-card: var(--sh-card);
}

/* ---------- Reset & base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--st800);
  background: var(--st50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  margin: 0;
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--st900);
}

p {
  margin: 0;
}

a {
  color: var(--em700);
  text-decoration: none;
}

a:hover {
  color: var(--em800);
}

img {
  max-width: 100%;
  display: block;
}

svg {
  display: block;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--em600);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--am400);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Section shells & ink ---------- */

.sec {
  position: relative;
  overflow: hidden;
}

.sec--light {
  --fg: var(--st900);
  --fg2: var(--st600);
  --rule: var(--st200);
  --ic-bg: #fff;
  --ic-bd: var(--st200);
  --ic-a: var(--st200);
  --ic-b: var(--em300);
  --ic-st: #059669;
}

.sec--dark {
  --fg: #fff;
  --fg2: var(--em200);
  --rule: rgba(167, 243, 208, 0.18);
  --ic-bg: rgba(6, 95, 70, 0.75);
  --ic-bd: rgba(110, 231, 183, 0.28);
  --ic-a: rgba(110, 231, 183, 0.28);
  --ic-b: rgba(110, 231, 183, 0.62);
  --ic-st: #6ee7b7;
}

.grain,
.grain-dark {
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  pointer-events: none;
  z-index: 1;
}

.grain {
  opacity: 0.055;
  mix-blend-mode: multiply;
}

.grain-dark {
  opacity: 0.1;
  mix-blend-mode: overlay;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--am700);
}

.eyebrow-dark {
  color: var(--am300);
}

/* The brand mark, painted as ONE rect through a mask that unions the palm and
   fingers and subtracts the leaf cuts. Never paint the five shapes separately:
   they overlap, so per-shape alpha double-composites and the fingers ghost
   through the palm. See CLAUDE.md → "Brand mark & opacity". */
.mark {
  color: inherit;
  flex-shrink: 0;
}

/* ---------- Motion ----------
   One gesture per section; the text itself stays still. Everything below is
   transform/opacity only, and the whole system collapses under
   prefers-reduced-motion at the bottom of this block. */

.glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

@keyframes breathe {
  to {
    transform: scale(1.16) translate(20px, -16px);
    opacity: 0.7;
  }
}

.leaf {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  animation: drift linear infinite;
}

@keyframes drift {
  0% {
    transform: translateY(60px) rotate(-8deg);
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  86% {
    opacity: 1;
  }
  100% {
    transform: translateY(-340px) rotate(24deg);
    opacity: 0;
  }
}

/* Headline words rise out from behind a mask, one after the next. */
.word {
  display: inline-block;
  clip-path: inset(0 0 105% 0);
  transform: translateY(0.14em) rotate(-1.2deg);
  animation: unmask 0.95s var(--ease) forwards;
}

@keyframes unmask {
  to {
    clip-path: inset(-25% -10% -18% -6%);
    transform: translateY(0) rotate(0);
  }
}

.w1 { animation-delay: 0.05s; }
.w2 { animation-delay: 0.13s; }
.w3 { animation-delay: 0.21s; }
.w4 { animation-delay: 0.29s; }
.w5 { animation-delay: 0.37s; }
.w6 { animation-delay: 0.45s; }
.w7 { animation-delay: 0.53s; }

.mark-word {
  position: relative;
  display: inline-block;
}

.marker {
  position: absolute;
  left: -6px;
  right: -10px;
  bottom: -0.09em;
  width: calc(100% + 16px);
  height: 0.3em;
  overflow: visible;
}

.marker path {
  stroke-width: 13;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 640;
  stroke-dashoffset: 640;
  animation: draw 1.1s var(--ease) 0.72s forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

.fade {
  opacity: 0;
  transform: translateY(16px);
  animation: fade 0.9s var(--ease) forwards;
}

@keyframes fade {
  to {
    opacity: 1;
    transform: none;
  }
}

.f1 { animation-delay: 0.62s; }
.f2 { animation-delay: 0.74s; }
.f3 { animation-delay: 0.86s; }
.f4 { animation-delay: 1s; }

.dot {
  border-radius: 999px;
  animation: pulse 2.6s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
  }
  60% {
    box-shadow: 0 0 0 11px rgba(22, 163, 74, 0);
  }
}

/* Scroll reveal for everything below the fold. site.js adds .in; with JS off
   or IntersectionObserver missing, the fallback below keeps content visible. */
/* --sy is the step grid's vertical stagger (0 everywhere else). Composing it
   into the reveal transform instead of overwriting it is what lets a .step be
   both staggered and revealed — and keeps the stagger when motion is off. */
.rv {
  opacity: 0;
  transform: translateY(calc(var(--sy, 0px) + 22px));
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.rv.in,
.no-js .rv {
  opacity: 1;
  transform: translateY(var(--sy, 0px));
}

.rv-d1 { transition-delay: 0.08s; }
.rv-d2 { transition-delay: 0.16s; }
.rv-d3 { transition-delay: 0.24s; }

@keyframes bob {
  0%,
  100% {
    transform: rotate(-3deg) translateY(0) rotateY(0) rotateX(0);
  }
  34% {
    transform: rotate(-2.2deg) translateY(-17px) rotateY(4.5deg) rotateX(2deg);
  }
  67% {
    transform: rotate(-3.5deg) translateY(-6px) rotateY(-3.5deg) rotateX(-1.5deg);
  }
}

@keyframes drift-a {
  0%,
  100% {
    transform: rotate(5deg) translate(0, 0);
  }
  50% {
    transform: rotate(6.6deg) translate(7px, -10px);
  }
}

@keyframes drift-b {
  0%,
  100% {
    transform: rotate(-8deg) translate(0, 0);
  }
  50% {
    transform: rotate(-6.3deg) translate(-9px, 8px);
  }
}

@keyframes toastcycle {
  0% {
    opacity: 0;
    transform: rotate(3deg) translateY(14px);
  }
  7% {
    opacity: 1;
    transform: rotate(3deg) translateY(0);
  }
  44% {
    opacity: 1;
    transform: rotate(3deg) translateY(0);
  }
  53% {
    opacity: 0;
    transform: rotate(3deg) translateY(-12px);
  }
  100% {
    opacity: 0;
    transform: rotate(3deg) translateY(-12px);
  }
}

@keyframes livepulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.4);
  }
  55% {
    box-shadow: 0 0 0 9px rgba(5, 150, 105, 0);
  }
}

@keyframes flow {
  to {
    stroke-dashoffset: -64;
  }
}

@keyframes flow2 {
  to {
    stroke-dashoffset: -44;
  }
}

@keyframes nodepulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6);
    transform: scale(1);
  }
  18% {
    box-shadow: 0 0 0 13px rgba(251, 191, 36, 0);
    transform: scale(1.3);
  }
  42% {
    transform: scale(1);
  }
}

@keyframes sway {
  to {
    transform: translate(-28px, 20px) rotate(-4deg) scale(1.06);
  }
}

@keyframes phonefloat {
  0%,
  100% {
    transform: rotate(-2deg) translateY(0);
  }
  50% {
    transform: rotate(-1.2deg) translateY(-18px);
  }
}

@keyframes rowscan {
  0%,
  100% {
    background: transparent;
  }
  9% {
    background: var(--em50);
  }
  23% {
    background: transparent;
  }
}

@keyframes ctaglow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(5, 150, 105, 0);
  }
  50% {
    box-shadow: 0 8px 26px rgba(5, 150, 105, 0.6);
  }
}

@keyframes scan {
  0% {
    top: -28px;
  }
  68% {
    top: 114px;
  }
  100% {
    top: 114px;
  }
}

@keyframes iconpulse {
  0%,
  100% {
    border-color: var(--ic-a);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
  }
  20% {
    border-color: var(--ic-b);
    box-shadow: 0 0 20px 0 rgba(52, 211, 153, 0.24);
  }
  42% {
    border-color: var(--ic-a);
  }
}

@keyframes stepbob {
  0%,
  100% {
    transform: translateY(var(--sy));
  }
  50% {
    transform: translateY(calc(var(--sy) - 11px));
  }
}

@keyframes numfloat {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-9px) rotate(-2.5deg);
  }
}

@keyframes swayband {
  from {
    transform: rotate(135deg) scale(1);
  }
  to {
    transform: rotate(142deg) scale(1.07) translate(-16px, 12px);
  }
}

@keyframes accentglow {
  0%,
  100% {
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.35);
  }
  50% {
    box-shadow: 0 14px 46px rgba(245, 158, 11, 0.62);
  }
}

@keyframes sheen {
  0% {
    left: -150px;
  }
  26% {
    left: 110%;
  }
  100% {
    left: 110%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .leaf,
  .toast.t2,
  .qr::after,
  .perk::after {
    display: none;
  }
  .word {
    clip-path: none !important;
    transform: none !important;
  }
  .fade {
    opacity: 1 !important;
    transform: none !important;
  }
  .rv {
    opacity: 1 !important;
    transform: translateY(var(--sy, 0px)) !important;
  }
  .marker path {
    stroke-dashoffset: 0 !important;
  }
  .toast {
    opacity: 1 !important;
    transform: rotate(3deg) !important;
  }
  .veta-flow {
    stroke-dasharray: none;
  }
}

/* ---------- Buttons & badges ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  padding: 15px 28px;
  border-radius: 999px;
  border: none;
  white-space: nowrap;
  cursor: pointer;
  min-height: 52px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.2s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--em600);
  color: #fff;
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.3);
}

.btn-primary:hover {
  background: var(--em700);
  color: #fff;
  box-shadow: 0 10px 28px rgba(5, 150, 105, 0.38);
}

.btn-ghost {
  background: #fff;
  color: var(--st800);
  border: 1px solid var(--st200);
  box-shadow: var(--sh-soft);
}

.btn-ghost:hover {
  color: var(--st900);
  border-color: var(--st300);
  box-shadow: var(--sh-lift);
}

.btn-glass {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.btn-accent {
  background: var(--am300);
  color: var(--st900);
  animation: accentglow 3.8s ease-in-out infinite;
}

.btn-accent:hover {
  background: var(--am400);
  color: var(--st900);
}

.btn-sm {
  padding: 11px 20px;
  font-size: 14px;
  min-height: 44px;
}

.btn-block {
  display: flex;
  width: 100%;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.badge-neutral {
  background: var(--st100);
  border-color: var(--st300);
  color: var(--st600);
}

.badge-available {
  background: var(--em100);
  border-color: var(--em300);
  color: var(--em700);
}

.badge-success {
  background: #dcfce7;
  border-color: #86efac;
  color: #15803d;
}

.badge-live {
  animation: livepulse 3.4s ease-in-out infinite;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid;
}

.pill--light {
  background: #fff;
  border-color: var(--st200);
  color: var(--st700);
  box-shadow: var(--sh-soft);
}

.pill--dark {
  background: rgba(6, 95, 70, 0.5);
  border-color: rgba(167, 243, 208, 0.28);
  color: var(--em200);
}

.row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---------- Header: brand lockup + audience switch ---------- */

.head {
  position: relative;
  z-index: 20;
  padding: 22px 0;
}

.head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}


.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -0.02em;
}

/* Both halves of the lockup inherit one colour from .brand. */
.brand--onlight,
.brand--onlight:hover {
  color: var(--em950);
}

.brand--ondark,
.brand--ondark:hover {
  color: #fff;
}

.who {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 5px 13px 5px 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-left: 4px;
  white-space: nowrap;
}

.who .wdot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
}

.who--client {
  background: var(--em50);
  color: var(--em700);
  border: 1px solid var(--em200);
}

.who--client .wdot {
  background: var(--em600);
}

.who--pro {
  background: rgba(252, 211, 77, 0.16);
  color: var(--am300);
  border: 1px solid rgba(252, 211, 77, 0.34);
}

.who--pro .wdot {
  background: var(--am400);
}

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 15px;
  font-weight: 500;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
}

.sec--light .nav a {
  color: var(--st700);
}

.sec--light .nav a:hover {
  color: var(--em700);
}

.sec--dark .nav a {
  color: var(--em200);
}

.sec--dark .nav a:hover {
  color: #fff;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  padding: 10px 16px 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid;
  min-height: 44px;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.switch svg {
  opacity: 0.75;
  transition: transform 0.25s var(--ease);
}

.switch:hover {
  transform: translateY(-1px);
}

.switch:hover svg {
  transform: translateX(3px);
}

.switch--onlight {
  background: #fff;
  border-color: var(--st200);
  color: var(--st700);
  box-shadow: var(--sh-soft);
}

.switch--onlight:hover {
  color: var(--st900);
  box-shadow: var(--sh-lift);
}

.switch--ondark {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.switch--ondark:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* ---------- Hero ---------- */

.hero {
  padding: 0 0 74px;
}

.hero--light {
  background: linear-gradient(180deg, #ffffff 0%, var(--st50) 55%, var(--st100) 100%);
}

.hero--dark {
  background: linear-gradient(160deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 58%, rgba(0, 0, 0, 0.55) 100%), var(--em950);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 56px;
  align-items: center;
  padding-top: 34px;
}

.hero--dark .hero-grid {
  grid-template-columns: 1fr 430px;
  gap: 44px;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-items: flex-start;
}

h1.display {
  font-size: clamp(44px, 6.1vw, 88px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.92;
  text-wrap: balance;
  color: var(--fg);
}

.hero--dark h1.display {
  font-size: clamp(40px, 5vw, 72px);
}

.lede {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--fg2);
  max-width: 520px;
}

.av {
  width: 36px;
  height: 36px;
  border-radius: var(--leaf);
  border: 2px solid var(--st50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-display);
}

.av + .av {
  margin-left: -10px;
}

.av-1 { background: var(--em100); color: var(--em700); }
.av-2 { background: var(--am100); color: var(--am700); }
.av-3 { background: #ccfbf1; color: #0d9488; }

.hero-note {
  gap: 15px;
  font-size: 14px;
  color: var(--fg2);
}

/* Hero visual: the contractor card, floating over two drifting plates. */

.visual {
  position: relative;
  min-height: 470px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
}

.plate,
.plate2 {
  position: absolute;
  z-index: 0;
}

.plate {
  left: 78px;
  right: -42px;
  top: 70px;
  bottom: 18px;
  border-radius: 36px;
  transform: rotate(5deg);
  animation: drift-a 13s ease-in-out infinite;
}

.plate2 {
  left: 52px;
  right: -16px;
  top: 52px;
  bottom: 44px;
  border-radius: 34px;
  transform: rotate(-8deg);
  animation: drift-b 17s ease-in-out -4s infinite;
}

.hero--light .plate { background: var(--st150); }
.hero--light .plate2 { background: var(--em100); }
.hero--dark .plate { background: rgba(255, 255, 255, 0.07); }
.hero--dark .plate2 { background: rgba(52, 211, 153, 0.14); }

.card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 436px;
  background: #fff;
  border-radius: 30px;
  padding: 26px;
  box-shadow: var(--sh-card);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transform: rotate(-3deg);
  transform-style: preserve-3d;
  animation: bob 9s ease-in-out infinite;
}

.card-head {
  display: flex;
  gap: 16px;
  align-items: center;
}

.card-av {
  width: 88px;
  height: 88px;
  border-radius: var(--leaf);
  background: linear-gradient(135deg, var(--em800), var(--em500));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-display);
  font-size: 29px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 10px 22px rgba(5, 150, 105, 0.3);
}

.card-identity {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.card-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--st900);
}

.card-role {
  font-size: 14px;
  color: var(--st600);
}

.card-tag {
  position: absolute;
  top: -14px;
  left: 22px;
  background: var(--am300);
  color: var(--st900);
  border-radius: 999px;
  padding: 6px 15px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  box-shadow: 0 8px 20px rgba(217, 119, 6, 0.32);
}

.stars {
  display: flex;
  align-items: center;
  gap: 2px;
}

.stars .rating-text {
  font-size: 13px;
  color: var(--st500);
  margin-left: 7px;
}

.card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.card-actions {
  display: flex;
  gap: 10px;
}

.card-actions .btn {
  padding: 14px 20px;
  font-size: 15px;
  min-height: 48px;
}

.card-actions .btn-primary {
  flex: 1;
}

/* In-app notifications, cycling. These are Manito's own notices — the design
   deliberately demotes WhatsApp from the story. */
.toast {
  position: absolute;
  left: -64px;
  bottom: -36px;
  background: #fff;
  border-radius: 18px;
  padding: 12px 17px 12px 13px;
  box-shadow: var(--sh-lift);
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--st900);
  opacity: 0;
  animation: toastcycle 9s var(--ease) 1.4s infinite;
  z-index: 3;
}

.toast.t2 {
  animation-delay: 5.9s;
}

.tmark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--em600);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tl1 {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
}

.tl2 {
  font-size: 12px;
  color: var(--st500);
  line-height: 1.3;
}

/* ---------- La veta: the four promises on a flowing line ---------- */

.veta {
  padding: 26px 0 30px;
}

.veta--dark {
  background: var(--em950);
}

.veta--light {
  background: var(--st100);
}

.veta-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.veta-line path {
  fill: none;
  stroke-linecap: round;
}

.veta-rail {
  stroke-width: 2;
}

.veta--dark .veta-rail { stroke: rgba(167, 243, 208, 0.16); }
.veta--light .veta-rail { stroke: rgba(120, 113, 108, 0.22); }

.veta-flow {
  stroke: var(--am400);
  stroke-width: 2.6;
  stroke-dasharray: 12 20;
  animation: flow 2.6s linear infinite;
}

.veta-nodes {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  position: relative;
  z-index: 2;
}

.node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 20px);
  letter-spacing: -0.025em;
  text-align: center;
}

.veta--dark .node { color: var(--em100); }
.veta--light .node { color: var(--st800); }

.nring {
  display: flex;
  padding: 5px;
  border-radius: 999px;
}

.veta--dark .nring { background: var(--em950); }
.veta--light .nring { background: var(--st100); }

.ndot {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: var(--am400);
  animation: nodepulse 4.4s ease-in-out infinite;
}

.n2 .ndot { animation-delay: 1.1s; }
.n3 .ndot { animation-delay: 2.2s; }
.n4 .ndot { animation-delay: 3.3s; }

/* ---------- The page / la tarjeta ---------- */

.feat {
  padding: 104px 0 108px;
}

.feat--dark {
  background: linear-gradient(155deg, var(--em950) 0%, var(--em900) 48%, var(--em800) 100%);
}

.feat--light {
  background: linear-gradient(175deg, var(--st100) 0%, var(--st50) 55%, #fffdf7 100%);
}

.feat .wrap {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 72px;
  align-items: center;
}

.watermark {
  position: absolute;
  right: -210px;
  top: -40px;
  width: 700px;
  height: 700px;
  z-index: 0;
  animation: sway 26s ease-in-out infinite alternate;
}

.feat--dark .watermark { color: rgba(167, 243, 208, 0.06); }
.feat--light .watermark { color: rgba(5, 150, 105, 0.055); }

.phone-stage {
  position: relative;
}

.phone {
  position: relative;
  width: 296px;
  min-height: 582px;
  border-radius: 44px;
  background: var(--st100);
  border: 9px solid #0b0a09;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: rotate(-2deg);
  margin: 0 auto;
  animation: phonefloat 11s ease-in-out infinite;
}

.pbanner {
  height: 112px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--em800), var(--em600));
  padding: 16px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
}

.pbanner-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
}

.pbanner-url {
  font-size: 12px;
  color: var(--em200);
}

.pcard {
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--sh-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ptitle {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--st500);
  font-weight: 700;
}

.prow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--st800);
  padding: 2px 6px;
  margin: 0 -6px;
  border-radius: 8px;
  animation: rowscan 6.6s ease-in-out infinite;
}

.prow strong {
  font-weight: 600;
}

.pr2 { animation-delay: 0.9s; }
.pr3 { animation-delay: 1.8s; }

.pthumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.pthumbs span {
  height: 50px;
  border-radius: 11px;
}

.pquote {
  font-size: 13px;
  color: var(--st700);
  line-height: 1.45;
}

.pquote cite {
  display: block;
  color: var(--st500);
  margin-top: 4px;
  font-style: normal;
}

.pcta {
  margin-top: auto;
  background: var(--em600);
  color: #fff;
  height: 46px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
  animation: ctaglow 3.6s ease-in-out infinite;
}

.qr {
  position: absolute;
  right: -56px;
  bottom: 56px;
  width: 112px;
  height: 112px;
  background: #fff;
  border-radius: 20px;
  padding: 12px;
  box-shadow: var(--sh-lift);
  transform: rotate(7deg);
  overflow: hidden;
  color: var(--st900);
}

.qr::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 28px;
  top: -28px;
  background: linear-gradient(180deg, transparent, rgba(5, 150, 105, 0.3), transparent);
  animation: scan 3.6s var(--ease) infinite;
}

.feat-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.feat-copy h2 {
  color: var(--fg);
  font-size: clamp(34px, 4.2vw, 60px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.98;
  text-wrap: balance;
}

.feat-copy > p {
  font-size: 18px;
  line-height: 1.62;
  color: var(--fg2);
  max-width: 540px;
}

.featrows {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

.featrow {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}

.featrow:first-child {
  border-top: none;
}

.ficon {
  width: 48px;
  height: 48px;
  border-radius: var(--leaf);
  background: var(--ic-bg);
  border: 1px solid var(--ic-bd);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: iconpulse 5.4s ease-in-out infinite;
}

.featrow:nth-child(2) .ficon { animation-delay: 1.8s; }
.featrow:nth-child(3) .ficon { animation-delay: 3.6s; }

.featrow h3 {
  color: var(--fg);
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 5px;
}

.featrow p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg2);
}

/* ---------- Cómo funciona ---------- */

.how {
  padding: 104px 0 60px;
}

.how--light {
  background: linear-gradient(180deg, var(--st100) 0%, #fffdf7 60%, var(--st50) 100%);
}

.how--dark {
  background: linear-gradient(180deg, var(--em950) 0%, var(--em900) 55%, var(--em800) 100%);
}

.how h2 {
  color: var(--fg);
  font-size: clamp(32px, 3.9vw, 56px);
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-top: 12px;
}

.how-head {
  max-width: 640px;
}

.spine {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 0;
}

.spine path {
  fill: none;
  stroke: var(--am300);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 8 14;
  animation: flow2 3.4s linear infinite;
}

.spine .glowline {
  stroke: var(--am400);
  stroke-width: 9;
  stroke-dasharray: none;
  opacity: 0.22;
  animation: none;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 104px;
  align-items: start;
}

.step {
  position: relative;
  border-radius: 26px;
  padding: 36px 28px 30px;
  border: 1px solid;
  --sy: 0px;
  animation: stepbob 9s ease-in-out infinite;
}

.steps .step:nth-child(2) {
  --sy: 48px;
  animation-delay: -3s;
}

.steps .step:nth-child(3) {
  --sy: 14px;
  animation-delay: -6s;
}

.how--light .step {
  background: #fff;
  border-color: var(--st200);
}

.how--dark .step {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(167, 243, 208, 0.18);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.num {
  position: absolute;
  left: 24px;
  top: -74px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 100px;
  line-height: 1;
  letter-spacing: -0.06em;
  z-index: 0;
  animation: numfloat 7s ease-in-out infinite;
}

.how--light .num { color: var(--am200); }
.how--light .step:nth-child(3) .num { color: var(--em200); }
.how--dark .num { color: rgba(252, 211, 77, 0.35); }
.how--dark .step:nth-child(3) .num { color: rgba(110, 231, 183, 0.35); }

.step h3 {
  position: relative;
  z-index: 1;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--fg);
}

.step p {
  position: relative;
  z-index: 1;
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg2);
}

/* ---------- Closing band ---------- */

.bandwrap {
  padding: 56px 24px 60px;
}

.band {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  border-radius: 40px;
  padding: 64px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 52px;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 26px 56px rgba(28, 25, 23, 0.16);
}

.band--green {
  background: linear-gradient(128deg, var(--em950) 0%, var(--em800) 52%, var(--em600) 100%);
}

.band--amber {
  background: linear-gradient(128deg, var(--am300) 0%, var(--am400) 52%, var(--am500) 100%);
}

.bandmark {
  position: absolute;
  left: -100px;
  top: -75px;
  width: 430px;
  height: 430px;
  z-index: 0;
  transform: rotate(135deg);
  animation: swayband 30s ease-in-out infinite alternate;
}

.band--green .bandmark { color: rgba(255, 255, 255, 0.07); }
.band--amber .bandmark { color: rgba(28, 25, 23, 0.1); }

.band-copy,
.band-perks {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.band-copy {
  gap: 20px;
  align-items: flex-start;
}

.band-perks {
  gap: 12px;
}

.band h2 {
  font-size: clamp(32px, 3.8vw, 54px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.96;
}

.band p {
  font-size: 17px;
  line-height: 1.62;
  max-width: 520px;
}

.band--green h2 { color: #fff; }
.band--green p { color: var(--em100); }
.band--green .eyebrow { color: var(--am200); }

.band--amber h2 { color: var(--st900); }
.band--amber p { color: var(--st800); }
.band--amber .eyebrow { color: var(--am700); }

.perk {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 15px;
  border: 1px solid;
}

.perk::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 130px;
  left: -150px;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.17), transparent);
  animation: sheen 7s var(--ease) infinite;
}

.perk:nth-child(2)::after { animation-delay: 0.55s; }
.perk:nth-child(3)::after { animation-delay: 1.1s; }
.perk:nth-child(4)::after { animation-delay: 1.65s; }

.band--green .perk {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.17);
  color: #fff;
}

.band--amber .perk {
  background: rgba(28, 25, 23, 0.07);
  border-color: rgba(28, 25, 23, 0.14);
  color: var(--st900);
}

/* ---------- Footer ---------- */

.foot {
  position: relative;
  padding: 44px 0 40px;
  overflow: hidden;
  background: var(--st50);
}

.footrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--st500);
  padding-bottom: 26px;
  border-bottom: 1px solid var(--st200);
}

.foot-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--em950);
}

.foot-brand span {
  color: var(--st500);
}

.footnav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  /* Keeps the nav on the right edge even on the width where it drops to its
     own line under the brand. */
  margin-left: auto;
}

.footnav a {
  color: var(--st500);
}

.footnav a:hover {
  color: var(--st800);
}

.footnav a.cross {
  color: var(--em700);
  font-weight: 600;
}

.footnav a.cross:hover {
  color: var(--em800);
}

.bigword {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(110px, 24.5vw, 352px);
  line-height: 0.72;
  letter-spacing: -0.065em;
  color: var(--st150);
  user-select: none;
  margin: 34px 0 -0.24em -0.04em;
  white-space: nowrap;
}

/* ---------- Simple content pages (privacidad, términos, descargar, reset) ---------- */

.page-header {
  padding: 22px 0;
  background: #fff;
  border-bottom: 1px solid var(--st200);
}

.page-header .wrap,
.page-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.doc {
  padding: 56px 0 88px;
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, var(--st50) 40%, var(--st100) 100%);
  overflow: hidden;
}

.doc .wrap,
.doc .container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

.doc h1 {
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-bottom: 14px;
}

.doc .updated {
  color: var(--st500);
  font-size: 15px;
  margin-bottom: 34px;
}

.doc h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 40px 0 12px;
}

.doc h3 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 8px;
}

.doc p {
  margin-bottom: 14px;
  color: var(--st700);
  line-height: 1.7;
}

.doc ul,
.doc ol {
  margin: 0 0 18px;
  padding-left: 22px;
  color: var(--st700);
}

.doc li {
  margin-bottom: 8px;
  line-height: 1.7;
}

.doc strong {
  color: var(--st900);
}

.draft-banner {
  background: var(--am100);
  color: var(--am700);
  text-align: center;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--am200);
}

.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 32px;
  font-weight: 600;
  color: var(--em700);
}

.steps-list {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0 0 32px;
}

.steps-list li {
  counter-increment: step;
  position: relative;
  background: #fff;
  border: 1px solid var(--st200);
  border-radius: 22px;
  padding: 26px 28px 22px 28px;
  margin-bottom: 16px;
  box-shadow: var(--sh-soft);
}

.steps-list li::before {
  content: counter(step);
  position: absolute;
  left: 20px;
  top: -30px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--am200);
  z-index: 0;
}

.steps-list li > * {
  position: relative;
  z-index: 1;
}

.steps-list h3 {
  margin-bottom: 8px;
}

.note-box {
  background: #fff;
  border: 1px solid var(--st200);
  border-left: 4px solid var(--am400);
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 20px;
  box-shadow: var(--sh-soft);
}

.note-box h3 {
  margin-bottom: 10px;
}

.note-box p:last-child,
.note-box ul:last-child {
  margin-bottom: 0;
}

.text-center {
  text-align: center;
}

.text-center .note-box {
  text-align: left;
}

/* ---------- Contractor card (/c/<slug>) — the "tarjeta" made public ---------- */

.cc-page {
  padding: 32px 0 40px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, var(--st50) 50%, var(--st100) 100%);
}

.cc-page .container {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.cc-header {
  text-align: center;
  margin-bottom: 24px;
}

.cc-avatar,
.cc-avatar-initials {
  width: 108px;
  height: 108px;
  border-radius: var(--leaf);
  margin: 0 auto 16px;
  box-shadow: var(--sh-lift);
}

.cc-avatar {
  object-fit: cover;
  display: block;
  border: 3px solid #fff;
}

.cc-avatar-initials {
  background: linear-gradient(135deg, var(--em800), var(--em500));
  color: #fff;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cc-name {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-bottom: 4px;
}

.cc-category {
  color: var(--st600);
  font-weight: 500;
  margin-bottom: 10px;
}

.cc-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--st700);
  font-weight: 700;
  margin-bottom: 16px;
}

.cc-rating .stars {
  color: var(--am400);
  letter-spacing: 1px;
}

.cc-rating .count {
  color: var(--st500);
  font-weight: 400;
}

.cc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 4px;
}

.cc-section {
  background: #fff;
  border: 1px solid var(--st200);
  border-radius: 22px;
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: var(--sh-soft);
}

.cc-section h2 {
  font-size: 1.0625rem;
  text-align: left;
  margin-bottom: 12px;
}

.cc-bio {
  color: var(--st700);
  white-space: pre-line;
}

.cc-service-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--st100);
}

.cc-service-row:first-child {
  border-top: none;
}

.cc-service-title {
  font-weight: 500;
  color: var(--st800);
}

.cc-service-price {
  font-weight: 700;
  color: var(--em700);
  white-space: nowrap;
}

.cc-hours-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 0.9375rem;
  color: var(--st700);
}

.cc-hours-day {
  font-weight: 500;
  color: var(--st800);
}

.cc-review {
  padding: 12px 0;
  border-top: 1px solid var(--st100);
}

.cc-review:first-child {
  border-top: none;
}

.cc-review-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.cc-review-name {
  font-weight: 700;
  color: var(--st800);
}

.cc-review-stars {
  color: var(--am400);
  font-size: 0.9375rem;
}

.cc-review-comment {
  color: var(--st700);
  font-size: 0.9375rem;
  margin: 0;
}

.cc-review-date {
  color: var(--st400);
  font-size: 0.8125rem;
}

.cc-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.cc-portfolio-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.cc-portfolio-item {
  margin: 0;
  min-width: 0;
}

.cc-portfolio-item figcaption {
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--st600);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cc-portfolio-item figcaption strong {
  color: var(--st900);
  font-weight: 600;
}

.cc-social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cc-social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--st200);
  border-radius: 999px;
  background: #fff;
  color: var(--st800);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  max-width: 100%;
}

.cc-social-link:hover {
  border-color: var(--em600);
  color: var(--em700);
}

.cc-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  flex-shrink: 0;
}

.cc-social-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-cta {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--st100) 70%, rgba(245, 245, 244, 0));
  padding: 18px 0 calc(14px + env(safe-area-inset-bottom));
  margin-top: 8px;
}

.cc-paused-note {
  text-align: center;
  color: var(--am700);
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: 14px;
}

/* ---------- Responsive ----------
   The desktop artboards are 1440 wide; the mobile ones 390. Everything in
   between is a straight-line squeeze of the same components, with three real
   breaks: the hero unstacks at 1000, the two-column sections at 900, and the
   header collapses to a two-row block at 720. */

@media (max-width: 1080px) {
  .feat .wrap {
    grid-template-columns: 340px 1fr;
    gap: 48px;
  }
  .qr {
    right: -30px;
  }
  .nav-links {
    gap: 20px;
  }
}

/* The nav labels are full phrases ("Qué ves de cada contratista"), so they run
   out of room well before the header needs to stack. Drop them early and let
   the audience switch carry navigation. */
@media (max-width: 980px) {
  .nav-links {
    display: none;
  }
}

@media (max-width: 1000px) {
  .hero-grid,
  .hero--dark .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .visual {
    min-height: 420px;
  }
  .card {
    max-width: 420px;
  }
  .toast {
    left: auto;
    right: 0;
    bottom: -30px;
  }
}

@media (max-width: 900px) {
  .feat {
    padding: 76px 0 80px;
  }
  .feat .wrap {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .phone-stage {
    display: flex;
    justify-content: center;
  }
  .qr {
    right: 0;
  }
  .watermark {
    right: -240px;
    width: 520px;
    height: 520px;
  }
  .how {
    padding: 76px 0 40px;
  }
  .steps {
    grid-template-columns: 1fr;
    gap: 56px;
    margin-top: 84px;
  }
  /* The staggered float only reads as a composition in three columns. */
  .steps .step,
  .steps .step:nth-child(2),
  .steps .step:nth-child(3) {
    --sy: 0px;
  }
  .spine {
    display: none;
  }
  .band {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 44px 32px;
    border-radius: 32px;
  }
  .bandwrap {
    padding: 40px 16px 48px;
  }
}

@media (max-width: 820px) {
  .veta-line {
    display: none;
  }
  .veta {
    padding: 30px 0 34px;
  }
  .veta-nodes {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }
  .node {
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    text-align: left;
    font-size: 18px;
  }
  .nring {
    flex-shrink: 0;
    position: relative;
  }
  /* Without the SVG rail, the dots need their own connector. */
  .veta-nodes .node:not(:last-child) .nring::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 2px;
    height: 18px;
    transform: translateX(-50%);
    background: currentColor;
    opacity: 0.28;
  }
}

@media (max-width: 720px) {
  .head {
    padding: 14px 0 4px;
  }
  .head .wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 11px;
  }
  .nav {
    justify-content: flex-end;
  }
  .switch {
    width: 100%;
    justify-content: center;
  }
  .hero {
    padding: 12px 0 48px;
  }
  .hero-copy {
    gap: 22px;
  }
  .card {
    padding: 20px;
    border-radius: 26px;
    transform: rotate(-1.6deg);
  }
  .card-av {
    width: 70px;
    height: 70px;
    font-size: 23px;
  }
  .card-name {
    font-size: 21px;
  }
  .card-actions {
    flex-wrap: wrap;
  }
  .num {
    font-size: 76px;
    top: -52px;
    left: 20px;
  }
  .step {
    padding: 28px 22px 26px;
    border-radius: 22px;
  }
  .steps {
    gap: 48px;
  }
  .band {
    padding: 34px 24px;
    border-radius: 28px;
  }
  .footrow {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .footnav {
    flex-direction: column;
    gap: 0;
    /* The desktop rule pushes the nav to the right edge; stacked, it should
       line up under the brand instead. */
    margin-left: 0;
  }
  .footnav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .doc {
    padding: 40px 0 64px;
  }
}

@media (max-width: 480px) {
  .wrap {
    padding: 0 20px;
  }
  .btn {
    width: 100%;
  }
  .row .btn {
    width: 100%;
  }
  .card-actions .btn,
  .btn-sm {
    width: auto;
  }
  .card-actions .btn-primary {
    width: auto;
  }
  .phone {
    width: 100%;
    max-width: 260px;
    min-height: 500px;
    border-radius: 36px;
    border-width: 8px;
  }
  .qr {
    width: 92px;
    height: 92px;
    right: -8px;
    bottom: 30px;
    padding: 9px;
  }
  .pthumbs span {
    height: 42px;
  }
  .toast {
    right: -8px;
    padding: 10px 13px 10px 10px;
    border-radius: 15px;
  }
  .tl1 {
    font-size: 12.5px;
  }
  .tl2 {
    font-size: 11px;
  }
}