/* ============================================================
   crypto.css — Estilos específicos de la landing Crypto
   Descentralizados
   ============================================================ */


/* ── z-index stacking — secciones de esta página ──────────── */
#que-por-que { z-index: 2; }
#como        { z-index: 3; }
#beneficios  { z-index: 4; }
#para-quien  { z-index: 5; }
#testimonios { z-index: 6; }
#faqs        { z-index: 7; }


/* ── Hero — headline + contenedor ─────────────────────────── */
#hero .hero-content {
  max-width: 900px;
}

#hero .hero-headline {
  font-size: clamp(2rem, 4vw, 3rem);
}


/* ── Hero — nota al pie, esquina derecha ──────────────────── */
.crypto-footnote {
  position: absolute;
  right: clamp(1.25rem, 4vw, 3rem);
  bottom: clamp(3rem, 8vw, 6rem);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--color-white-30);
  letter-spacing: var(--tracking-label);
  text-align: right;
}

.crypto-footnote sup {
  color: var(--color-accent);
}


/* ── Qué + por qué — stack de texto ──────────────────────── */
.crypto-text-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-4);
}

/* "Por RESPONSABILIDAD…" */
.crypto-reason {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-black);
  line-height: var(--leading-loose);
  max-width: 48ch;
}

/* PEEERO… */
.crypto-pero {
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
}

/* "Si la respuesta es sí…" */
.crypto-italic-line {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: var(--text-body);
  color: rgba(25, 24, 26, 0.35);
  max-width: 38ch;
}


/* ── Cómo — callout con borde lateral ─────────────────────── */
.crypto-callout {
  margin: var(--space-8) auto;
  max-width: 58ch;
  text-align: left;
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-6);
}

.crypto-callout__main {
  font-family: var(--font-sans);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: var(--weight-semibold);
  color: var(--color-white);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-5);
}

.crypto-footnotes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-white-10);
}

.crypto-footnotes span {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--color-white-30);
  letter-spacing: var(--tracking-label);
}

/* Stack de párrafos en Cómo */
.crypto-body-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 52ch;
}


/* ── Beneficios — lista con flecha ────────────────────────── */
.benefits-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-4);
  text-align: left;
  max-width: 44ch;
}

.benefits-list__item {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: rgba(25, 24, 26, 0.8);
  line-height: var(--leading-normal);
  padding-left: var(--space-6);
  position: relative;
}

.benefits-list__item::before {
  content: '→';
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  color: var(--color-accent);
}