/* ============================================================
   Transform·Lab — Estilos principales
   Tipografías: Bricolage Grotesque (títulos) · Hanken Grotesk (cuerpo)
   ============================================================ */

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

:root {
  --black:        #080808;
  --surface:      #111111;
  --surface2:     #181818;
  --surface3:     #222222;
  --border:       #2a2a2a;
  --border-light: #333333;
  --text:         #f0ede8;
  --text-muted:   #888880;
  --text-dim:     #555550;
  --green:        #5c8f6e;
  --green-light:  #7ab08a;
  --green-dim:    #2a4a34;
  --gold:         #c9a870;
  --gold-dim:     #6b5630;
  --white:        #ffffff;
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;
  --radius:       4px;
  --radius-lg:    8px;
  --radius-xl:    16px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ─── TIPOGRAFÍA ─── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.4rem, 6vw, 5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
p  { color: var(--text-muted); font-weight: 300; }
strong { color: var(--text); font-weight: 500; }

/* ─── LAYOUT ─── */
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
section { padding: 120px 0; }
@media (max-width: 768px) { section { padding: 72px 0; } }

/* ─── NAV ─── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 20px 24px;
  border-bottom: 1px solid transparent;
  transition: border-color .4s, background .4s, padding .3s;
}
.site-nav.scrolled {
  background: rgba(8,8,8,.92);
  backdrop-filter: blur(12px);
  border-color: var(--border);
  padding: 14px 24px;
}
.nav-inner {
  max-width: 1160px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.logo {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500; letter-spacing: .15em;
  text-transform: uppercase; color: var(--text); text-decoration: none;
}
.logo span { color: var(--green); }
.nav-cta {
  background: transparent; border: 1px solid var(--border-light); color: var(--text);
  padding: 9px 22px; border-radius: var(--radius); font-size: 13px; font-weight: 500;
  cursor: pointer; text-decoration: none; letter-spacing: .04em;
  transition: border-color .2s, color .2s;
}
.nav-cta:hover { border-color: var(--green); color: var(--green); }

/* ─── BOTONES ─── */
.btn-primary {
  display: inline-block; background: var(--green); color: var(--white);
  padding: 16px 36px; border-radius: var(--radius); font-size: 15px; font-weight: 500;
  text-decoration: none; letter-spacing: .04em; border: none; cursor: pointer;
  transition: background .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1);
}
.btn-primary:hover {
  background: var(--green-light); transform: translateY(-2px);
  box-shadow: 0 10px 28px -8px rgba(92,143,110,.55);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  display: inline-block; background: transparent; color: var(--text);
  padding: 16px 36px; border-radius: var(--radius); font-size: 15px; font-weight: 400;
  text-decoration: none; letter-spacing: .04em; border: 1px solid var(--border-light); cursor: pointer;
  transition: border-color .25s cubic-bezier(.4,0,.2,1), color .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1);
}
.btn-secondary:hover { border-color: var(--text-muted); transform: translateY(-2px); }
.btn-secondary:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-secondary { transition: none; }
  .btn-primary:hover, .btn-secondary:hover { transform: none; }
}

.btn-whatsapp {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; border: 1px solid var(--border-light);
  color: var(--text); padding: 16px 32px; border-radius: var(--radius);
  font-size: 15px; font-weight: 400; text-decoration: none; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.btn-whatsapp:hover { border-color: #25d366; color: #25d366; }
.btn-whatsapp svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ─── ETIQUETAS ─── */
.label {
  display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--green); margin-bottom: 20px;
}
.label-line { display: flex; align-items: center; gap: 12px; }
.label-line::before { content: ''; display: block; width: 28px; height: 1px; background: var(--green); }

/* ─── CURSOR GLOW (desktop) ─── */
.cursor-glow {
  position: fixed; pointer-events: none; z-index: 999;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(92,143,110,.04) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: opacity .3s;
  opacity: 0;
}

/* ─────────────────────────────
   HERO
───────────────────────────── */
#hero {
  min-height: 100vh; display: flex; flex-direction: column;
  justify-content: flex-end; padding-bottom: 100px; padding-top: 140px;
  position: relative; overflow: hidden;
}
.hero-wipe {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  opacity: .38;
}
.hero-wipe-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 8%;
  filter: saturate(.8) brightness(.85);
}
.hero-wipe-img--man  { z-index: 0; }
.hero-wipe-img--woman {
  z-index: 1;
  animation: wipeReveal 8s ease-in-out infinite;
}
.hero-wipe-line {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 3px; transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,.9) 20%, rgba(255,255,255,.9) 80%, transparent 100%);
  box-shadow: 0 0 14px 3px rgba(255,255,255,.35);
  z-index: 2; pointer-events: none;
  animation: wipeLine 8s ease-in-out infinite;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 60% 40%, rgba(92,143,110,.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(201,168,112,.04) 0%, transparent 50%),
    linear-gradient(180deg, rgba(8,8,8,.35) 0%, rgba(8,8,8,.65) 60%, var(--black) 100%);
  pointer-events: none; will-change: transform;
}
.hero-grid {
  position: absolute; inset: 0; z-index: 0; opacity: .025; pointer-events: none;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 80px 80px;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero-wipe-img--woman { animation: none; clip-path: inset(0 50% 0 0); }
  .hero-wipe-line       { display: none; }
}
.hero-content { position: relative; z-index: 1; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-light); border-radius: 100px;
  padding: 8px 16px; margin-bottom: 40px;
  font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--text-muted);
}
.hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

.hero-title { color: var(--text); margin-bottom: 24px; }
.hero-title em { font-style: normal; color: var(--green); }

.hero-sub {
  font-size: clamp(1rem, 2vw, 1.25rem); color: var(--text-muted);
  max-width: 600px; margin-bottom: 16px; font-weight: 300;
}
.hero-meta   { font-size: 13px; color: var(--text-dim); margin-bottom: 44px; }
.hero-ctas   { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }

.hero-trust {
  font-size: 12px; color: var(--text-dim); letter-spacing: .05em;
  border-top: 1px solid var(--border); padding-top: 32px; margin-top: 32px;
  display: flex; gap: 32px; flex-wrap: wrap;
}
.hero-trust li { display: flex; align-items: center; gap: 8px; list-style: none; }
.hero-trust svg { width: 14px; height: 14px; fill: none; stroke: var(--green); stroke-width: 1.5; flex-shrink: 0; }

/* ─────────────────────────────
   NUMBERS STRIP
───────────────────────────── */
.numbers-strip {
  padding: 48px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse 60% 100% at 0% 50%, rgba(92,143,110,.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 100% at 100% 50%, rgba(201,168,112,.05) 0%, transparent 60%),
    var(--surface);
  position: relative;
}
.numbers-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.number-item {
  padding: 24px 40px; text-align: center;
  border-right: 1px solid var(--border);
  transition: transform .3s cubic-bezier(.4,0,.2,1), background .3s cubic-bezier(.4,0,.2,1);
}
.number-item:hover { transform: translateY(-4px); background: rgba(255,255,255,.02); }
.number-item:last-child { border-right: none; }
.number-item .num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 300;
  color: var(--text); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.number-item .num > span:not(.num-value) { color: var(--green); }
.number-item .desc {
  font-size: 12px; letter-spacing: .1em; color: var(--text-dim);
  text-transform: uppercase; margin-top: 4px;
}
@media (max-width: 600px) {
  .numbers-grid { grid-template-columns: repeat(2, 1fr); }
  .number-item:nth-child(2) { border-right: none; }
  .number-item:nth-child(3) { border-bottom: 1px solid var(--border); }
  .number-item { padding: 20px 24px; }
}

/* ─────────────────────────────
   SCROLL STORY / AVATAR
───────────────────────────── */
#story { padding: 0; overflow: clip; }
.story-intro { padding: 100px 0 60px; text-align: center; }
.story-intro h2 { max-width: 700px; margin: 0 auto 16px; }
.story-intro p  { max-width: 520px; margin: 0 auto; }

.story-panels { position: relative; }

.story-phase {
  padding: 72px 24px;
  border-bottom: 1px solid var(--border);
  max-width: 1160px;
  margin: 0 auto;
}
@media (min-width: 600px) {
  .story-phase { padding: 80px 48px; }
}
@media (min-width: 1024px) {
  .story-phase { padding: 96px 80px; }
}
.story-phase:last-child { border-bottom: none; }

.phase-number {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--green); margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
}
.phase-number::before { content: ''; display: block; width: 28px; height: 1px; background: var(--green); }
.story-phase h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); color: var(--text); margin-bottom: 16px; }
.story-phase p  { color: var(--text-muted); font-size: 15px; max-width: 560px; }

/* ─────────────────────────────
   CÓMO FUNCIONA
───────────────────────────── */
#how { background: var(--surface); }
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 64px;
}
.step {
  padding: 40px 36px;
  border-right: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transition: background .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1);
}
.step:hover { background: rgba(255,255,255,.02); transform: translateY(-4px); }
.step:first-child { border-left: 1px solid var(--border); }

@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(2) { border-right: 1px solid var(--border); }
  .step:nth-child(3) { border-left: 1px solid var(--border); }
}
@media (max-width: 540px) {
  .steps { grid-template-columns: 1fr; }
  .step { border-left: 1px solid var(--border); border-right: none; }
}

.step-num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem); font-weight: 200; color: var(--surface3);
  letter-spacing: -.04em; line-height: 1; margin-bottom: 24px;
  font-variant-numeric: tabular-nums;
}
.step h3 { color: var(--text); font-size: 1.1rem; margin-bottom: 12px; font-weight: 500; }
.step p  { font-size: 14px; color: var(--text-muted); }

/* ─────────────────────────────
   PRECIO
───────────────────────────── */
#pricing { position: relative; overflow: hidden; }
#pricing::before {
  content: ''; position: absolute; top: -10%; left: 50%; transform: translateX(-50%);
  width: 900px; height: 500px;
  background: radial-gradient(ellipse at center, rgba(201,168,112,.05) 0%, transparent 65%);
  pointer-events: none;
}
#pricing .pricing-header { text-align: center; margin-bottom: 64px; position: relative; z-index: 1; }

.launch-badge {
  display: inline-block; background: var(--green-dim); color: var(--green-light);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  padding: 6px 16px; border-radius: 100px; margin-bottom: 24px;
}
.pricing-card {
  max-width: 680px; margin: 0 auto; position: relative; z-index: 1;
  border: 1px solid var(--border-light); border-radius: var(--radius-xl);
  overflow: hidden; background: var(--surface);
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s cubic-bezier(.4,0,.2,1), border-color .35s cubic-bezier(.4,0,.2,1);
}
.pricing-card:hover {
  transform: translateY(-6px);
  border-color: var(--green-dim);
  box-shadow: 0 24px 60px -20px rgba(92,143,110,.35);
}
.pricing-top { padding: 48px; }
.pricing-title-area {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 16px; margin-bottom: 40px;
}
.pricing-title-area h3 { font-size: 1.4rem; color: var(--text); }
.price-display { text-align: right; }
.price-was  { font-size: 13px; color: var(--text-dim); text-decoration: line-through; }
.price-now  {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem); color: var(--text);
  font-weight: 200; letter-spacing: -.04em; line-height: 1;
}
.price-now sup { font-size: .5em; vertical-align: super; font-weight: 400; }
.price-note { font-size: 12px; color: var(--text-dim); margin-top: 4px; }

.line-items { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.line-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--border); font-size: 14px;
}
.line-item:last-child { border-bottom: none; }
.line-item .li-name  { color: var(--text-muted); }
.line-item .li-price { color: var(--text); font-weight: 500; }
.line-item.li-fianza .li-name,
.line-item.li-fianza .li-price { color: var(--gold); }
.line-item.li-total { padding-top: 20px; }
.line-item.li-total .li-name  { color: var(--text); font-size: 15px; font-weight: 500; }
.line-item.li-total .li-price { font-size: 20px; font-weight: 500; }

.pricing-bottom {
  background: var(--surface2); padding: 32px 48px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 20px;
}
.recovery-callout {
  display: flex; align-items: center; gap: 16px;
  background: rgba(92,143,110,.08); border: 1px solid rgba(92,143,110,.2);
  border-radius: var(--radius-lg); padding: 20px 24px;
}
.recovery-icon {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(92,143,110,.15);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--green); font-size: 18px;
}
.recovery-callout p { font-size: 13px; color: var(--text-muted); }
.recovery-callout strong { color: var(--green); }
.pricing-cta-area { text-align: center; }
.pricing-cta-area .btn-primary { width: 100%; max-width: 360px; font-size: 16px; padding: 18px; }
.pricing-cta-note { font-size: 12px; color: var(--text-dim); margin-top: 12px; }

/* ─────────────────────────────
   EJEMPLO
───────────────────────────── */
#example { background: var(--surface); }
.example-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: start; margin-top: 64px;
}
@media (max-width: 768px) { .example-grid { grid-template-columns: 1fr; gap: 40px; } }

.example-timeline { display: flex; flex-direction: column; }
.timeline-item    { display: flex; gap: 24px; padding-bottom: 36px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-left { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 32px; }
.timeline-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 4px;
  border: 1.5px solid var(--border-light); background: var(--surface);
  transition: border-color .3s, background .3s;
}
.timeline-dot.active { border-color: var(--green); background: var(--green); }
.timeline-line { width: 1px; background: var(--border); flex: 1; margin-top: 4px; }
.timeline-item:last-child .timeline-line { display: none; }
.timeline-week   { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.timeline-desc   { font-size: 14px; color: var(--text-muted); }
.timeline-amount { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--green); margin-top: 4px; }

.example-summary {
  position: sticky; top: 100px;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  overflow: hidden; background: var(--surface2);
}
.summary-header { padding: 28px 32px; border-bottom: 1px solid var(--border); background: var(--surface); }
.summary-header h4 { color: var(--text); font-size: 1rem; font-weight: 500; margin-bottom: 4px; }
.summary-header p  { font-size: 13px; color: var(--text-dim); }
.summary-rows { padding: 24px 32px; display: flex; flex-direction: column; gap: 14px; }
.summary-row  { display: flex; justify-content: space-between; font-size: 14px; }
.summary-row .sr-label { color: var(--text-muted); }
.summary-row .sr-value { color: var(--text); font-weight: 500; }
.summary-row.sr-highlight .sr-label { color: var(--gold); }
.summary-row.sr-highlight .sr-value { color: var(--gold); font-size: 17px; }
.summary-foot {
  margin: 0 32px 28px; padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-dim); line-height: 1.6;
}

/* ─────────────────────────────
   QUÉ INCLUYE
───────────────────────────── */
.includes-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  overflow: hidden; margin-top: 64px;
}
@media (max-width: 900px) { .includes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .includes-grid { grid-template-columns: 1fr; } }

.include-card {
  background: var(--surface); padding: 32px 28px;
  transition: background .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1);
}
.include-card:hover { background: var(--surface2); transform: translateY(-4px); }
.include-icon { transition: transform .3s cubic-bezier(.4,0,.2,1); }
.include-card:hover .include-icon { transform: scale(1.12); }
.include-card:hover { background: var(--surface2); }
.include-icon {
  width: 36px; height: 36px; border-radius: var(--radius);
  background: var(--surface2); display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.include-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--green); stroke-width: 1.5; }
.include-card h4 { color: var(--text); font-size: .95rem; font-weight: 500; margin-bottom: 8px; }
.include-card p  { font-size: 13px; color: var(--text-dim); }

/* ─────────────────────────────
   EMOCIONAL
───────────────────────────── */
#emotional { text-align: center; background: var(--black); overflow: hidden; position: relative; }
#emotional::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(ellipse at center, rgba(92,143,110,.06) 0%, transparent 70%);
  pointer-events: none;
}
.emotional-grid { display: flex; flex-direction: column; align-items: center; gap: 56px; }
.emotional-content { position: relative; z-index: 1; max-width: 740px; margin: 0 auto; }
.emotional-content h2 { margin-bottom: 32px; }
.emotional-content > p { font-size: clamp(1rem, 1.8vw, 1.15rem); margin-bottom: 48px; }

.emotional-media { position: relative; width: 260px; flex-shrink: 0; }
.avatar-card {
  width: 100%; perspective: 1000px; border-radius: var(--radius-xl);
}
.avatar-card-inner {
  position: relative; width: 100%;
  transform-style: preserve-3d;
  animation: cardFlip 9s ease-in-out infinite;
  border-radius: var(--radius-xl);
}
.avatar-card-front,
.avatar-card-back {
  width: 100%; border-radius: var(--radius-xl); overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.avatar-card-back {
  position: absolute; inset: 0;
  transform: rotateY(180deg);
}
.emotional-img {
  width: 100%; height: auto; display: block;
  filter: grayscale(.15) contrast(1.05);
  border: 1px solid var(--border-light); border-radius: var(--radius-xl);
}
@keyframes cardFlip {
  0%   { transform: rotateY(0deg); }
  8%   { transform: rotateY(0deg); }
  42%  { transform: rotateY(180deg); }
  58%  { transform: rotateY(180deg); }
  92%  { transform: rotateY(360deg); }
  100% { transform: rotateY(360deg); }
}
.emotional-media {
  --orbit-rx: 195px; --orbit-ry: 265px;
}
.floating-word {
  position: absolute; top: 50%; left: 50%; display: inline-flex; align-items: center;
  background: rgba(17,17,17,.88); backdrop-filter: blur(6px);
  border: 1px solid var(--border-light); border-radius: 100px;
  padding: 14px 28px; font-size: 16px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap; cursor: default; z-index: 2;
  animation: orbitWords 28s linear infinite;
  transition: color .25s cubic-bezier(.4,0,.2,1), border-color .25s cubic-bezier(.4,0,.2,1),
              background .25s cubic-bezier(.4,0,.2,1);
}
.floating-word:hover {
  color: #fff; border-color: var(--green);
  background: rgba(92,143,110,.18);
  box-shadow: 0 0 22px rgba(92,143,110,.55), inset 0 0 10px rgba(92,143,110,.1);
  text-shadow: 0 0 12px rgba(92,143,110,.9);
}
/* 7 palabras equidistantes en el mismo círculo — mismo radio, misma velocidad */
.fw-1 { animation-delay: calc(-28s / 7 * 0); }
.fw-2 { animation-delay: calc(-28s / 7 * 1); }
.fw-3 { animation-delay: calc(-28s / 7 * 2); }
.fw-4 { animation-delay: calc(-28s / 7 * 3); }
.fw-5 { animation-delay: calc(-28s / 7 * 4); }
.fw-6 { animation-delay: calc(-28s / 7 * 5); }
.fw-7 { animation-delay: calc(-28s / 7 * 6); }

/* Orbita circular completa alrededor de la imagen: arriba (atras) -> lateral
   -> abajo (delante) -> lateral -> arriba (atras), pasando por las 4 caras. */
@keyframes orbitWords {
  0%      { transform: translate(-50%, calc(-50% + (var(--orbit-ry) * -1))); }
  8.33%   { transform: translate(calc(-50% + (var(--orbit-rx) * 0.5)),    calc(-50% + (var(--orbit-ry) * -0.866))); }
  16.67%  { transform: translate(calc(-50% + (var(--orbit-rx) * 0.866)),  calc(-50% + (var(--orbit-ry) * -0.5))); }
  25%     { transform: translate(calc(-50% + var(--orbit-rx)),            -50%); }
  33.33%  { transform: translate(calc(-50% + (var(--orbit-rx) * 0.866)),  calc(-50% + (var(--orbit-ry) * 0.5))); }
  41.67%  { transform: translate(calc(-50% + (var(--orbit-rx) * 0.5)),    calc(-50% + (var(--orbit-ry) * 0.866))); }
  50%     { transform: translate(-50%, calc(-50% + var(--orbit-ry))); }
  58.33%  { transform: translate(calc(-50% + (var(--orbit-rx) * -0.5)),   calc(-50% + (var(--orbit-ry) * 0.866))); }
  66.67%  { transform: translate(calc(-50% + (var(--orbit-rx) * -0.866)), calc(-50% + (var(--orbit-ry) * 0.5))); }
  75%     { transform: translate(calc(-50% - var(--orbit-rx)),            -50%); }
  83.33%  { transform: translate(calc(-50% + (var(--orbit-rx) * -0.866)), calc(-50% + (var(--orbit-ry) * -0.5))); }
  91.67%  { transform: translate(calc(-50% + (var(--orbit-rx) * -0.5)),   calc(-50% + (var(--orbit-ry) * -0.866))); }
  100%    { transform: translate(-50%, calc(-50% + (var(--orbit-ry) * -1))); }
}
.floating-word:hover { animation-play-state: paused; }

@media (max-width: 480px) {
  .floating-word { font-size: 13px; padding: 10px 20px; }
  .emotional-media { --orbit-rx: 90px; --orbit-ry: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-word { animation: none; z-index: 2; }
  .fw-1 { transform: translate(-50%, calc(-50% - var(--orbit-ry))); }
  .fw-2 { transform: translate(calc(-50% + var(--orbit-rx)), -50%); }
  .fw-3 { transform: translate(-50%, calc(-50% + var(--orbit-ry))); }
  .fw-4 { transform: translate(calc(-50% - var(--orbit-rx)), -50%); }
  .fw-5 { transform: translate(calc(-50% + var(--orbit-rx) * 0.7), calc(-50% - var(--orbit-ry) * 0.7)); }
  .fw-6 { transform: translate(calc(-50% - var(--orbit-rx) * 0.7), calc(-50% + var(--orbit-ry) * 0.7)); }
  .fw-7 { transform: translate(calc(-50% + var(--orbit-rx) * 0.7), calc(-50% + var(--orbit-ry) * 0.7)); }
}
.quote-block {
  border: 1px solid var(--border-light); border-radius: var(--radius-xl);
  padding: 40px 48px; position: relative; background: var(--surface);
}
.quote-block::before {
  content: '\201C'; font-family: Georgia, serif; font-size: 120px; color: var(--border);
  position: absolute; top: -20px; left: 24px; line-height: 1;
}
.quote-block blockquote {
  font-family: Georgia, serif; font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 400; color: var(--text); font-style: italic; line-height: 1.5;
  position: relative; z-index: 1;
}

/* ─────────────────────────────
   BENEFICIOS
───────────────────────────── */
#benefits { background: var(--surface); }
.benefits-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; margin-top: 64px;
}
@media (max-width: 900px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .benefits-grid { grid-template-columns: 1fr; } }
.benefit-item {
  padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: border-color .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1), background .3s cubic-bezier(.4,0,.2,1);
}
.benefit-item:hover { border-color: var(--green-dim); transform: translateY(-4px); background: rgba(255,255,255,.02); }
.benefit-item h4 { color: var(--text); font-size: .95rem; font-weight: 500; margin-bottom: 6px; }
.benefit-item p  { font-size: 13px; color: var(--text-dim); }
.benefit-check   { color: var(--green); font-size: 18px; margin-bottom: 12px; }

/* ─────────────────────────────
   COMPARATIVA
───────────────────────────── */
#comparison { background: var(--black); }
.comparison-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px; margin-top: 64px;
}
@media (max-width: 600px) { .comparison-grid { grid-template-columns: 1fr; } }
.comparison-col { border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; }
.comparison-col.col-ours { border-color: var(--green); }
.comparison-header {
  padding: 24px 28px; border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-dim);
}
.comparison-col.col-ours .comparison-header {
  background: rgba(92,143,110,.08); color: var(--green); border-color: var(--green);
}
.comparison-items { padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.comparison-item  { display: flex; gap: 14px; align-items: flex-start; font-size: 14px; }
.ci-icon {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; margin-top: 1px;
}
.col-them .ci-icon { background: rgba(255,80,80,.1);    color: #ff6060; }
.col-ours .ci-icon { background: rgba(92,143,110,.15); color: var(--green); }
.comparison-item p { color: var(--text-muted); line-height: 1.5; }

/* ─────────────────────────────
   AVISO LEGAL / SALUD
───────────────────────────── */
#disclaimer { background: var(--surface); padding: 80px 0; }
.disclaimer-box {
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 40px 48px; max-width: 860px; margin: 0 auto;
}
.disclaimer-box h3 { color: var(--text); font-size: 1rem; font-weight: 500; margin-bottom: 16px; }
.disclaimer-box p  { font-size: 14px; color: var(--text-dim); margin-bottom: 12px; }
.disclaimer-box p:last-child { margin-bottom: 0; }

/* ─────────────────────────────
   FAQ
───────────────────────────── */
#faq { background: var(--black); }
.faq-list {
  max-width: 760px; margin: 64px auto 0;
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden;
}
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-question {
  width: 100%; background: none; border: none; padding: 24px 28px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  cursor: pointer; text-align: left;
  font-family: var(--font-body); font-size: 15px; color: var(--text); font-weight: 400;
  transition: background .2s;
}
.faq-question:hover { background: var(--surface); }
.faq-icon {
  width: 20px; height: 20px; flex-shrink: 0;
  border: 1px solid var(--border-light); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 14px;
  transition: transform .3s, border-color .3s;
}
.faq-item.open .faq-icon { transform: rotate(45deg); border-color: var(--green); color: var(--green); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.4,0,.2,1); }
.faq-answer-inner { padding: 0 28px 24px; font-size: 14px; color: var(--text-muted); line-height: 1.7; }
.faq-item.open .faq-answer { max-height: 300px; }

/* ─────────────────────────────
   CTA FINAL
───────────────────────────── */
#final-cta { background: var(--surface); text-align: center; padding: 140px 0; }
.final-cta-inner { max-width: 660px; margin: 0 auto; }
.final-cta-inner h2 { margin-bottom: 24px; }
.final-cta-inner > p { font-size: 1.05rem; margin-bottom: 48px; }
.final-cta-buttons {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-bottom: 24px;
}
.final-cta-sub {
  font-size: 13px; color: var(--text-dim); max-width: 520px; margin: 0 auto; line-height: 1.8;
}

/* ─────────────────────────────
   FOOTER
───────────────────────────── */
.site-footer {
  padding: 40px 0; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-dim); text-align: center;
}
.site-footer .footer-inner {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.site-footer a { color: var(--text-dim); text-decoration: none; }
.site-footer a:hover { color: var(--text-muted); }

/* ─────────────────────────────
   REVEAL ANIMATIONS — disparado por IntersectionObserver (js/main.js)
───────────────────────────── */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.reveal { opacity: 0; transform: translateY(24px); }
.reveal.is-visible         { animation: revealUp .7s cubic-bezier(.4,0,.2,1) both; }
.reveal.is-visible.reveal-delay-1 { animation-delay: .12s; }
.reveal.is-visible.reveal-delay-2 { animation-delay: .24s; }
.reveal.is-visible.reveal-delay-3 { animation-delay: .36s; }
.reveal.is-visible.reveal-delay-4 { animation-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
  .reveal              { opacity: 1; transform: none; }
  .reveal.is-visible   { animation: none; }
  .elige-img--woman    { animation: none; clip-path: inset(0 50% 0 0); }
  .wipe-line           { display: none; }
}

/* ─────────────────────────────
   HERO — layout centrado (sin imagen)
───────────────────────────── */
.hero-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: calc(100vh - 140px);
  padding-bottom: 0;
}

.hero-text-col {
  max-width: 720px;
}

/* ─────────────────────────────
   ELIGE TU DIFÍCIL — sección visual full-width
───────────────────────────── */
#elige {
  padding: 0;
  overflow: hidden;
  position: relative;
}

/* ── Split layout ── */
.elige-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 540px;
  position: relative;
}

/* Paneles laterales */
.elige-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 48px;
}
.elige-panel--left  { background: rgba(120, 60, 30, .08); border-right: 1px solid var(--border); }
.elige-panel--right { background: rgba(92, 143, 110, .08); border-left: 1px solid var(--border); }

.elige-panel-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 20px;
}

.elige-panel-tag {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 20px;
  display: inline-block;
  width: fit-content;
}
.elige-panel--left  .elige-panel-tag { color: #c47c4a; border: 1px solid rgba(196,124,74,.3); background: rgba(196,124,74,.08); }
.elige-panel--right .elige-panel-tag { color: var(--green-light); border: 1px solid rgba(92,143,110,.3); background: rgba(92,143,110,.1); }

.elige-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.elige-list li {
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.elige-list--bad  li { color: var(--text-muted); }
.elige-list--good li { color: var(--text); }
.elige-list--bad  li::before { content: '✕'; color: #c47c4a; font-size: 12px; flex-shrink: 0; }
.elige-list--good li::before { content: '✓'; color: var(--green-light); font-size: 12px; flex-shrink: 0; }

/* Glow de fondo en cada panel */
.elige-panel-glow {
  position: absolute; inset: 0; pointer-events: none;
}
.elige-panel-glow--left  { background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(196,124,74,.12) 0%, transparent 70%); }
.elige-panel-glow--right { background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(92,143,110,.15) 0%, transparent 70%); }

/* Centro: imagen + texto encima */
.elige-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 48px 32px;
  width: 380px;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

/* Imagen de fondo — recorta el texto español del pie */
.elige-img-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.elige-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 5%;
}
.elige-img--man  { position: relative; z-index: 0; }
.elige-img--woman {
  position: absolute;
  inset: 0;
  z-index: 1;
  animation: wipeReveal 8s ease-in-out infinite;
}
.wipe-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,.9) 20%, rgba(255,255,255,.9) 80%, transparent 100%);
  box-shadow: 0 0 14px 3px rgba(255,255,255,.35);
  z-index: 2;
  pointer-events: none;
  animation: wipeLine 8s ease-in-out infinite;
}
@keyframes wipeReveal {
  0%   { clip-path: inset(0 100% 0 0); }
  8%   { clip-path: inset(0 100% 0 0); }
  42%  { clip-path: inset(0 0% 0 0); }
  58%  { clip-path: inset(0 0% 0 0); }
  92%  { clip-path: inset(0 0% 0 100%); }
  100% { clip-path: inset(0 100% 0 0); }
}
@keyframes wipeLine {
  0%   { left: 0%;   opacity: 0; }
  8%   { left: 0%;   opacity: 0; }
  10%  { left: 2%;   opacity: 1; }
  40%  { left: 98%;  opacity: 1; }
  42%  { left: 100%; opacity: 0; }
  58%  { left: 100%; opacity: 0; }
  60%  { left: 98%;  opacity: 1; }
  90%  { left: 2%;   opacity: 1; }
  92%  { left: 0%;   opacity: 0; }
  100% { left: 0%;   opacity: 0; }
}
/* Gradiente lateral para blend con los paneles */
.elige-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(to bottom, rgba(8,8,8,.4) 0%, transparent 15%, transparent 100%),
    linear-gradient(to right, rgba(8,8,8,.6) 0%, transparent 18%, transparent 82%, rgba(8,8,8,.6) 100%);
}

.elige-center > *:not(.elige-img-wrap) { position: relative; z-index: 1; }

.elige-sub {
  font-family: var(--font-body);
  font-size: clamp(.8rem, 1.4vw, .95rem);
  color: var(--text-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 16px;
  line-height: 1.9;
}

.elige-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.03em;
  line-height: 1.05;
  margin-bottom: 32px;
}

/* Responsive */
@media (max-width: 900px) {
  .elige-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .elige-panel { padding: 48px 32px; border: none; border-bottom: 1px solid var(--border); }
  .elige-panel--right { border-left: none; border-bottom: none; }
  .elige-center { width: 100%; min-height: 420px; padding: 56px 24px; order: -1; justify-content: flex-end; }
}

/* ============================================================
   NUEVAS SECCIONES — Hero cards, Reglas, Urgencia, Formulario
   ============================================================ */

/* ─── HERO PRICE CARDS ─── */
.hero-price-cards {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 0;
  flex-wrap: wrap;
}
.hpc-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 20px;
  min-width: 110px;
  text-align: center;
  transition: border-color .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1);
}
.hpc-card:hover {
  border-color: var(--green);
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(92,143,110,.4), 0 12px 32px -8px rgba(92,143,110,.45);
}
.hpc-card--fianza { border-color: var(--gold-dim); background: rgba(201,168,112,.06); }
.hpc-card--fianza:hover {
  border-color: #d99a4e;
  box-shadow: 0 0 0 1px rgba(217,154,78,.45), 0 12px 32px -8px rgba(217,154,78,.5);
}
.hpc-card--total  { border-color: var(--green-dim); background: rgba(92,143,110,.06); }
.hpc-card--total:hover {
  border-color: var(--green);
  box-shadow: 0 0 0 1px rgba(92,143,110,.4), 0 12px 32px -8px rgba(92,143,110,.45);
}
@media (prefers-reduced-motion: reduce) {
  .hpc-card:hover { transform: none; }
}
.hpc-value {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.1;
}
.hpc-value span { font-size: 1rem; opacity: .7; }
.hpc-label {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}
.hpc-sep {
  font-size: 1.4rem;
  color: var(--text-dim);
  font-weight: 300;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .hero-price-cards { gap: 8px; }
  .hpc-card { min-width: 90px; padding: 10px 14px; }
  .hpc-value { font-size: 1.3rem; }
  .hpc-sep { display: none; }
}

/* ─── REGLAS DEL RETO ─── */
#reglas {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.reglas-intro {
  max-width: 580px;
  margin-bottom: 56px;
}
.reglas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.regla-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: border-color .3s, transform .3s;
}
.regla-card:hover {
  border-color: var(--border-light);
  transform: translateY(-2px);
}
.regla-num {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--green);
  margin-bottom: 14px;
  font-weight: 500;
  display: block;
}
.regla-card h4 {
  font-size: .95rem;
  margin-bottom: 10px;
  color: var(--text);
}
.regla-card p { font-size: .875rem; line-height: 1.6; }

/* ─── URGENCIA ─── */
#urgencia { padding: 72px 0; }
.urgencia-box {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
  background: linear-gradient(135deg, rgba(201,168,112,.08), rgba(92,143,110,.06));
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-xl);
  padding: 40px 48px;
}
.urgencia-icon {
  font-size: 2.5rem;
  line-height: 1;
}
.urgencia-content h3 {
  color: var(--gold);
  margin-bottom: 12px;
  font-size: 1.25rem;
}
.urgencia-content p {
  font-size: .9rem;
  margin-bottom: 16px;
}
.urgencia-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.urgencia-list li {
  font-size: .85rem;
  color: var(--text-muted);
  display: flex;
  gap: 8px;
}
.urgencia-list li span { color: var(--gold); flex-shrink: 0; }
.urgencia-cta { white-space: nowrap; }
@media (max-width: 900px) {
  .urgencia-box {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    gap: 20px;
    text-align: center;
  }
  .urgencia-icon { display: none; }
  .urgencia-list li { justify-content: center; }
}

/* ─── FORMULARIO DE SOLICITUD ─── */
#form {
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.form-intro {
  max-width: 600px;
  margin-bottom: 48px;
}
.solicitud-form { max-width: 820px; }

.form-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  margin-bottom: 24px;
  background: var(--surface2);
}
.form-block-title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 24px;
  letter-spacing: -.01em;
  border: none;
  padding: 0;
}
.form-block-num {
  background: var(--green);
  color: #fff;
  border-radius: 50%;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-family: var(--font-body);
  letter-spacing: .05em;
  flex-shrink: 0;
}

.form-row { display: flex; gap: 16px; margin-bottom: 16px; }
.form-row--2 > * { flex: 1; min-width: 0; }
.form-row--3 > * { flex: 1; min-width: 0; }
@media (max-width: 600px) {
  .form-row { flex-direction: column; }
}

.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group:last-child { margin-bottom: 0; }

.form-group label {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 400;
  font-family: var(--font-body);
}

.form-group input,
.form-group select,
.form-group textarea {
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  outline: none;
  transition: border-color .2s;
  width: 100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--green); }
.form-group select { appearance: none; cursor: pointer; }
.form-group textarea { resize: vertical; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-dim); }

/* Radio cards */
.radio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.radio-grid--inline { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.radio-card {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  transition: border-color .2s, background .2s;
}
.radio-card:hover { border-color: var(--border-light); }
.radio-card input[type="radio"] { display: none; }
.radio-card:has(input:checked) {
  border-color: var(--green);
  background: rgba(92,143,110,.1);
}
.radio-label {
  font-size: 13px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: 400;
}
.radio-card:has(input:checked) .radio-label { color: var(--text); }

/* Slider de compromiso */
.compromiso-slider {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 6px;
}
.compromiso-slider input[type="range"] {
  flex: 1;
  height: 3px;
  appearance: none;
  background: var(--border);
  border-radius: 2px;
  border: none;
  padding: 0;
  cursor: pointer;
}
.compromiso-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--green);
  cursor: pointer;
}
.compromiso-display {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 48px;
}
#compromisoVal {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--green);
  font-weight: 500;
}

/* Checkbox aviso legal */
.form-footer {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 8px;
}
.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
}
.form-checkbox input[type="checkbox"] { display: none; }
.checkbox-custom {
  width: 20px; height: 20px;
  min-width: 20px;
  border: 1.5px solid var(--border-light);
  border-radius: 4px;
  margin-top: 2px;
  transition: border-color .2s, background .2s;
  position: relative;
}
.form-checkbox:has(input:checked) .checkbox-custom {
  background: var(--green);
  border-color: var(--green);
}
.form-checkbox:has(input:checked) .checkbox-custom::after {
  content: '';
  position: absolute;
  top: 3px; left: 6px;
  width: 5px; height: 9px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg);
}
.checkbox-label {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  font-family: var(--font-body);
}
.btn-form-submit {
  align-self: flex-start;
  font-size: 15px;
  padding: 16px 40px;
}
.form-disclaimer {
  font-size: 12px;
  color: var(--text-dim);
}

/* ─── WARUM TRANSFORM·LAB ─── */
#warum { background: var(--surface); }
.warum-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 64px;
}
@media (max-width: 768px) {
  .warum-grid { grid-template-columns: 1fr; gap: 24px; }
}
.warum-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  transition: border-color .3s, transform .3s;
}
.warum-card:hover {
  border-color: var(--green);
  transform: translateY(-4px);
}
.warum-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-dim);
  border-radius: var(--radius);
  margin-bottom: 24px;
  color: var(--green-light);
}
.warum-icon svg { width: 22px; height: 22px; }
.warum-card h3 {
  font-size: 1.1rem;
  margin-bottom: 12px;
  color: var(--text);
}
.warum-card p { font-size: 14px; line-height: 1.7; }

/* ─── SO FUNKTIONIERT DIE KAUTION ─── */
#kaution { background: var(--black); }
.kaution-intro {
  max-width: 640px;
  margin: 24px 0 64px;
  font-size: 16px;
  line-height: 1.8;
}
.kaution-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .kaution-grid { grid-template-columns: 1fr; gap: 32px; }
}
.kaution-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.kaution-table-head {
  display: grid;
  grid-template-columns: 80px 1fr 100px;
  padding: 14px 20px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
}
.kaution-row {
  display: grid;
  grid-template-columns: 80px 1fr 100px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  transition: background .2s;
}
.kaution-row:hover { background: var(--surface2); }
.kaution-row--last { border-bottom: 2px solid var(--border-light); }
.kaution-row--total {
  background: var(--green-dim);
  border-bottom: none;
  font-weight: 500;
}
.kaution-row--total .kw,
.kaution-row--total .kc,
.kaution-row--total .kr { color: var(--text); }
.kw { color: var(--text-muted); font-size: 13px; }
.kc { color: var(--text-muted); font-size: 13px; }
.kr { color: var(--green-light); font-weight: 500; text-align: right; }
.kaution-rules {
  padding: 8px 0;
}
.kaution-rules h4 {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 28px;
  color: var(--text);
  font-family: var(--font-display);
}
.kaution-rules-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.kaution-rules-list li {
  display: flex;
  gap: 14px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}
.kr-icon {
  color: var(--green);
  flex-shrink: 0;
  margin-top: 2px;
}
.kaution-rules-list strong { color: var(--text); }

/* ─── TRUST LAYER ─── */
#trust { background: var(--surface); }
#trust .label { margin-bottom: 40px; display: block; text-align: center; }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 0;
}
@media (max-width: 900px) {
  .trust-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .trust-grid { grid-template-columns: 1fr; }
}
.trust-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color .3s, transform .3s;
}
.trust-item:hover {
  border-color: var(--green-dim);
  transform: translateY(-2px);
}
.trust-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--green-light);
  background: var(--green-dim);
  border-radius: var(--radius);
  flex-shrink: 0;
}
.trust-icon svg { width: 18px; height: 18px; }
.trust-item h4 {
  font-size: .95rem;
  font-weight: 500;
  color: var(--text);
  font-family: var(--font-display);
}
.trust-item p { font-size: 13px; line-height: 1.6; }

/* ─── FORM PROGRESS BAR ─── */
.form-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.fp-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.fp-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  transition: background .3s, border-color .3s, color .3s;
}
.fp-label {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}
.fp-step.fp-active .fp-num {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.fp-step.fp-active .fp-label { color: var(--green-light); }
.fp-line {
  width: 40px;
  height: 1px;
  background: var(--border);
  margin-bottom: 18px;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .fp-label { display: none; }
  .fp-line { width: 24px; }
}

/* ─── FORM PRICE SUMMARY ─── */
.form-price-summary {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
}
.fps-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  color: var(--text-muted);
}
.fps-row strong { color: var(--text); font-size: 15px; }
.fps-note {
  font-size: 12px;
  color: var(--green-light);
  margin-top: 8px;
}

/* ─── FIELD VALIDATION ERROR ─── */
.field-error {
  border-color: #e05555 !important;
  outline: none;
}
.field-error:focus {
  box-shadow: 0 0 0 3px rgba(224,85,85,.2);
}