/* ==========================================================================
   redesign-brutal.css — Variante C "Bold"
   Neo-brutalismo fintech: crema, bordes negros 2px, sombras duras offset,
   acentos verde vivo y amarillo. Estilo Gumroad / DeFi moderno.
   ========================================================================== */
@import url('redesign.css?v=3');

/* Archivo variable auto-hospedada — CSP exige font-src 'self' */
@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink:        #111111;
  --ink-70:     #2E2E2E;
  --ink-50:     #5A5A5A;
  --ink-30:     #8F8F8F;
  --paper:      #FAF5EC;
  --paper-dim:  #F3ECDD;
  --line:       #111111;
  --line-strong:#111111;
  --brand:      #16C784;
  --brand-ink:  #0B7A4F;
  --brand-soft: #D9F5E8;
  --accent-pop: #FFD84D;

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow-card: 4px 4px 0 #111111;
  --shadow-pop:  6px 6px 0 #111111;
}

body { background: var(--paper); }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.01em; }
.hero__title { font-weight: 900; }
.hero__title em { color: var(--brand-ink); }

/* Overlines como chips negros */
.overline {
  display: inline-block; background: #111; color: #fff;
  padding: 5px 12px; border-radius: 6px; letter-spacing: 0.1em;
}

/* Nav */
.nav { background: var(--paper); border-bottom: 2px solid #111; backdrop-filter: none; }
.nav-dd__panel { background: #fff; border: 2px solid #111; box-shadow: var(--shadow-pop); }
.nav-dd__item:hover { background: var(--brand-soft); }
.nav__mobile { background: var(--paper); border-top: 2px solid #111; }

/* Botones: borde negro + sombra dura que se hunde al hover */
.btn { border: 2px solid #111; border-radius: 10px; font-weight: 800; box-shadow: 4px 4px 0 #111; transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease; }
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #111; }
.btn--ink { background: var(--brand); color: #111; }
.btn--ink:hover { background: var(--brand); }
.btn--ghost { background: #fff; color: #111; }
.btn--ghost:hover { border-color: #111; }
.btn--sm { box-shadow: 3px 3px 0 #111; }

/* Hero */
.hero__tag { background: var(--accent-pop); border: 2px solid #111; color: #111; font-weight: 800; }
.hero__platform { border: 2px solid #111; background: #fff; }

/* Paneles y tarjetas: 2px + sombra dura */
.app-panel, .panel { background: #fff; border: 2px solid #111; box-shadow: 6px 6px 0 #111; }
.app-panel__actions { border-color: #111; }
.app-panel__action { background: var(--paper-dim); border: 1.5px solid #111; }
.token-row + .token-row { border-color: #E4DCC9; }
.panel__head { border-color: #111; }
.gasless-net, .swap-side, .sec-step, .infra__row, .net-mini, .nft-item { border: 2px solid #111; background: #fff; }
.hd-node { border: 2px solid #111; background: #fff; }
.hd-node--root { background: #111; color: #fff; }
.hd-wire { width: 2px; background: #111; }
.bstep__num { border: 2px solid #111; color: #111; }
.bstep + .bstep { border-top: 2px dashed #C9BFA8; }
.bsavings { border-color: #111; }
.bsavings__bar { background: var(--paper-dim); border: 1.5px solid #111; }
.protocol + .protocol, .flow + .flow { border-color: #E4DCC9; }
.flow__icon { border: 1.5px solid #111; background: var(--accent-pop); color: #111; }

/* Tags */
.tag { background: #fff; border: 2px solid #111; color: #111; border-radius: 6px; }
.tag--plain { background: var(--paper-dim); color: #111; }

/* Franja de confianza: amarillo brutal */
.trust { background: var(--accent-pop); border-block: 2px solid #111; }
.trust__item { font-weight: 800; }
.trust__item + .trust__item { border-left: 2px solid #111; }
.trust__item svg { color: #111; }

/* Marquee: iconos a todo color sobre banda blanca */
.chains { padding-block: 0; }
.chains .container { padding-top: clamp(56px, 7vw, 80px); }
.marquee { background: #fff; border-block: 2px solid #111; padding-block: 22px; }
.marquee__track img, .marquee__track svg { filter: none; }

/* Matriz de features */
.matrix { border: 2px solid #111; box-shadow: 6px 6px 0 #111; }
.matrix__cell { border-right: 2px solid #111; border-bottom: 2px solid #111; background: #fff; }
.matrix__cell:hover { background: var(--brand-soft); }
.matrix__cell svg { color: #111; }

/* Secciones alternas */
.chapter--dim { background: var(--paper-dim); border-block: 2px solid #111; }

/* Seguridad */
.fraud { border: 2px solid #111; background: #fff; box-shadow: 6px 6px 0 #111; }
.fraud .tag { background: #FBEAE9; color: var(--danger); border-color: #111; }

/* Tabla comparativa */
.compare__wrap { border: 2px solid #111; box-shadow: 6px 6px 0 #111; background: #fff; }
.compare th { background: var(--accent-pop); color: #111; }
.compare th.col-vexo { color: #111; }
.compare .col-vexo { background: var(--brand-soft); }
.compare th, .compare td { border-bottom: 1.5px solid #111; }
.compare__callout { border-left: 4px solid var(--brand); font-weight: 700; }

/* Redes */
.net-card { border: 2px solid #111; box-shadow: 4px 4px 0 #111; }
.net-card:hover { border-color: #111; transform: translate(2px, 2px); box-shadow: 2px 2px 0 #111; transition: transform 120ms ease, box-shadow 120ms ease; }

/* Pasos */
.step3__num { color: transparent; -webkit-text-stroke: 2px #111; }

/* Stats: bloque invertido */
.stats { background: #111; border-block: 2px solid #111; color: #fff; }
.stats__label { color: rgba(255, 255, 255, 0.65); }
.stats__item + .stats__item { border-left: 1px solid rgba(255, 255, 255, 0.25); }

/* FAQ */
.faq details { border-bottom: 2px solid #111; }
.faq details:first-child { border-top: 2px solid #111; }
.faq summary { font-weight: 800; }
.faq summary svg { color: #111; }

/* CTA final */
.cta-end { background: #111; }
.cta-end .overline { background: var(--brand); color: #111; }
.btn--paper { border-color: #fff; box-shadow: 4px 4px 0 var(--brand); }
.btn--paper:hover { box-shadow: 2px 2px 0 var(--brand); }
.btn--paper-ghost { border: 2px solid rgba(255, 255, 255, 0.5); box-shadow: none; }
.btn--paper-ghost:hover { transform: none; border-color: #fff; }

/* Selector de idioma */
.lang-dropdown__menu { border: 2px solid #111; box-shadow: 4px 4px 0 #111; }
.lang-dropdown__option:hover { background: var(--brand-soft); }
.nav__mobile-langs .mobile-menu__lang-btn { border: 2px solid #111; background: #fff; }
.nav__mobile-langs .mobile-menu__lang-btn--active { background: var(--accent-pop); }

/* Footer */
.footer { border-top: 2px solid #111; background: var(--paper); }