/* 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;

  /* Three shapes, three jobs:
       card — a rounded rectangle. A real surface holding content: the
              tarjeta, a step, the band, the QR card, the app UI inside the
              phone frame.
       pill — 999px. A single glanceable state: badges, the beta pill,
              buttons, the notification toast.
       leaf — the organic "hoja" silhouette. The brand's own shapes (avatars,
              icon chips, the QR eyes) and any decorative ground.

     Repetition is fine when it is a set — three step cards in a row, four
     perks in a column, the stack of surfaces inside the phone all read as
     one system. What does not work is OVERLAPPING rounded rectangles at
     similar sizes and radii: the hero used to float the tarjeta on two more
     rounded rectangles at 34 and 36px, and three of the same shape piled at
     three angles just looks like a mistake. Behind a card goes a leaf, never
     another card.

     --leaf-alt is the same silhouette rotated, so two blobs together don't
     read as one shape duplicated. */
  --leaf: 42% 58% 55% 45% / 50% 40% 60% 50%;
  --leaf-alt: 62% 38% 45% 55% / 40% 58% 42% 60%;
  --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. */

/* Off-screen sections are paused by site.js. Every gesture below is ambient —
   none of it is worth a repaint for a section nobody is looking at, and with
   the whole page painted (which is what scrolling to the bottom and back
   leaves you with) the ambient work otherwise runs for all of them at once.
   Default is running, so with JS off nothing is stuck mid-animation. */
.paused,
.paused *,
.paused *::before,
.paused *::after {
  animation-play-state: paused !important;
}

.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 {
  position: relative;
  border-radius: 999px;
}

/* The halo is a sibling disc that scales and fades, not a growing box-shadow.
   Same read, but transform/opacity stay on the compositor instead of
   repainting every frame. `background-color: inherit` picks up whatever
   colour the dot was given inline. */
.dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: inherit;
  pointer-events: none;
  animation: halo 2.6s ease-in-out infinite;
}

@keyframes halo {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
  60% {
    transform: scale(3.4);
    opacity: 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 haloring {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }
  55% {
    transform: scale(1.22);
    opacity: 0;
  }
}

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

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

@keyframes nodebeat {
  0%,
  100% {
    transform: scale(1);
  }
  18% {
    transform: scale(1.3);
  }
  42% {
    transform: scale(1);
  }
}

@keyframes halo-amber {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
  18% {
    transform: scale(3);
    opacity: 0;
  }
  42%,
  99% {
    opacity: 0;
  }
}

@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 scan {
  0% {
    transform: translateY(-28px);
  }
  68%,
  100% {
    transform: translateY(114px);
  }
}

@keyframes iconpulse {
  0%,
  100% {
    border-color: var(--ic-a);
  }
  20% {
    border-color: var(--ic-b);
  }
  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 glowbreathe {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes sheen {
  0% {
    transform: translateX(-150px);
  }
  26%,
  100% {
    transform: translateX(560px);
  }
}

@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,
  .dot::after,
  .ndot::after,
  .badge-live::after,
  .btn-accent::after,
  .pcta::after,
  .ficon::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 {
  position: relative;
  background: var(--am300);
  color: var(--st900);
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.35);
}

/* The glow breathes by fading a pre-painted shadow in and out. Animating the
   box-shadow itself re-rasterizes a 46px blur on every frame, forever. */
.btn-accent::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 14px 46px rgba(245, 158, 11, 0.62);
  pointer-events: none;
  animation: glowbreathe 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 {
  position: relative;
}

/* Static ring, rasterized once; only its scale and opacity move. */
.badge-live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  box-shadow: 0 0 6px 3px rgba(5, 150, 105, 0.38);
  pointer-events: none;
  animation: haloring 3.4s ease-in-out infinite;
}

/* Three things sit at the top of the hero: the audience switch, the audience
   label and the beta status. Boxing all three turned them into a ragged
   column of near-identical chips. Only one of them is a control, so only one
   of them is a container — the switch. The other two are type.

   This is the hero's eyebrow, and it now matches every other eyebrow on the
   page ("CÓMO FUNCIONA", "TU HERRAMIENTA"). It keeps the live dot, because
   unlike the audience label it really is a status. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pill--light {
  color: var(--am700);
}

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

.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;
  flex-wrap: wrap;
  gap: 11px 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;
}

/* Not a badge — a qualifier on the wordmark, so it is set as type and tied
   to the lockup by a hairline rather than floating in a pill of its own. */
.who {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.who::before {
  content: "";
  width: 1px;
  height: 15px;
  margin-right: 12px;
  background: currentColor;
  opacity: 0.32;
}

.who-line {
  display: flex;
  min-width: 0;
}

.who--client {
  color: var(--em700);
}

.who--pro {
  color: var(--am300);
}

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

.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: var(--leaf);
  transform: rotate(5deg);
  animation: drift-a 13s ease-in-out infinite;
}

.plate2 {
  left: 52px;
  right: -16px;
  top: 52px;
  bottom: 44px;
  border-radius: var(--leaf-alt);
  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: 999px;
  padding: 11px 26px 11px 11px;
  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: 34px;
  height: 34px;
  border-radius: var(--leaf);
  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 {
  position: relative;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: var(--am400);
  animation: nodebeat 4.4s ease-in-out infinite;
}

.ndot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--am400);
  pointer-events: none;
  animation: halo-amber 4.4s ease-in-out infinite;
}

.n2 .ndot, .n2 .ndot::after { animation-delay: 1.1s; }
.n3 .ndot, .n3 .ndot::after { animation-delay: 2.2s; }
.n4 .ndot, .n4 .ndot::after { 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;
  position: relative;
}

.pcta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 8px 26px rgba(5, 150, 105, 0.6);
  pointer-events: none;
  animation: glowbreathe 3.6s ease-in-out infinite;
}

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

.qr img {
  width: 100%;
  height: 100%;
  display: block;
}

.qr::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 28px;
  top: 0;
  background: linear-gradient(180deg, transparent, rgba(5, 150, 105, 0.3), transparent);
  /* translateY, not `top` — animating `top` relayouts the card every frame. */
  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;
  position: relative;
  animation: iconpulse 5.4s ease-in-out infinite;
}

.ficon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 20px 0 rgba(52, 211, 153, 0.24);
  pointer-events: none;
  animation: glowbreathe 5.4s ease-in-out infinite;
}

.featrow:nth-child(2) .ficon,
.featrow:nth-child(2) .ficon::after { animation-delay: 1.8s; }
.featrow:nth-child(3) .ficon,
.featrow:nth-child(3) .ficon::after { 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);
}

/* No backdrop-filter: the spine and the section glow animate behind these
   cards, so a live blur re-filters the backdrop on every frame. Over a dark
   gradient a slightly heavier translucent fill is indistinguishable. */
.how--dark .step {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(167, 243, 208, 0.18);
  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: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.17), transparent);
  /* translateX, not `left` — see the note on .qr::after. 560px ≈ the widest
     perk plus the band's own width, matching the distance (and so the speed)
     of the old `left: -150px → 110%` sweep. .perk clips any overshoot. */
  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 {
    gap: 10px 12px;
  }
  .nav {
    order: 2;
  }
  /* Both of these earn their place on a wide screen: the audience label sits
     inline in the lockup, and the beta eyebrow gets air above a huge
     headline. Stacked in a narrow column they become a third and fourth
     small-caps line before the h1 — the same ragged column the pills were.
     The switch on the opposite side already tells you which audience this
     page is for, and the closing band still states the beta in full. */
  .who-line,
  .hero-status {
    display: none;
  }
  .switch {
    padding: 10px 14px 10px 16px;
  }
  .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;
  }
  /* The compact header from the 390 artboard. Without it the contractor
     page's longer switch ("¿Buscas un contratista?") cannot share the row
     with the lockup, and the two stack into the loose, unbalanced block this
     breakpoint exists to avoid. */
  .brand {
    gap: 9px;
  }
  .brand-name {
    font-size: 20px;
  }
  .head .brand .mark {
    width: 30px;
    height: 30px;
  }
  .who {
    font-size: 10.5px;
  }
  .switch {
    font-size: 13px;
    padding: 10px 13px 10px 15px;
  }
  .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;
  }
  .pthumbs span {
    height: 42px;
  }
  .toast {
    right: -8px;
    padding: 10px 13px 10px 10px;
    border-radius: 15px;
  }
  .tl1 {
    font-size: 12.5px;
  }
  .tl2 {
    font-size: 11px;
  }
}