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

/* tokens de diseno — paleta neo-terra */
:root {
  --bg: #FDFBF7;
  /* blanco yeso — lienzo principal */
  --surface: #F4F1EA;
  /* tierra seca — tarjetas y zonas secundarias */
  --line: #E0DCD3;
  /* hairline — separadores estructurales */
  --leaf: #2C4C3B;
  /* verde hoja oscuro — autoridad, navegacion */
  --terra: #C85A32;
  /* terracota — accion primaria, conversion */
  --ochre: #D69B38;
  /* ocre — alertas de tiempo, progreso de lote */
  --ink: #1f1b16
    /* tinta oscura — texto base */
}

/* comportamiento global */
html {
  scroll-behavior: smooth
}

body {
  font-family: 'Space Grotesk', sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden
}

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

a {
  color: inherit;
  text-decoration: none
}

/* utilidad: numeros tabulares (precios, pesos, conteos) */
.tab {
  font-variant-numeric: tabular-nums
}

/* contenedor de ancho maximo estandar */
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 24px 80px
}

/* modificador: padding superior reducido (marketplace) */
.wrap--marketplace {
  padding-top: 28px
}

/* modificador: ancho reducido para terminal activo */
.wrap--md {
  max-width: 1100px
}

/* modificador: padding inferior reducido para paginas de listas */
.wrap--tight {
  padding-bottom: 70px
}

/* modificador: configuracion — padding extra para boton flotante */
.wrap--config {
  max-width: 1080px;
  padding-bottom: 120px;
  position: relative
}

/* ticker informativo horizontal */
.ticker {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  padding: 8px 24px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--leaf);
  white-space: nowrap;
  overflow: auto
}

/* encabezado de seccion con linea inferior */
.section-title {
  margin-top: 52px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end
}

.section-title h2 {
  font-family: 'Newsreader', serif;
  font-size: 38px;
  color: var(--leaf)
}

.section-title span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #786a61
}

/* boton primario — terracota, aristas vivas */
/* bootstrap-equiv: .btn .btn-primary */
.btn-primary {
  display: inline-block;
  padding: 14px 28px;
  background: var(--terra);
  color: #fff;
  border: none;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s
}

.btn-primary:hover {
  background: var(--leaf)
}

/* boton de contorno — secundario */
/* bootstrap-equiv: .btn .btn-outline-primary */
.btn-outline {
  border: 1px solid var(--terra);
  background: transparent;
  color: var(--terra);
  padding: 10px 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  cursor: pointer;
  font-family: 'Space Grotesk', sans-serif
}

/* bloque de estado con borde izquierdo terra */
.savings {
  background: var(--surface);
  padding: 20px;
  border-left: 4px solid var(--terra)
}

.savings-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #766a62;
  margin-bottom: 4px
}

.savings-val {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--terra)
}

/* utilidades de alineacion y desbordamiento */
.text-right {
  text-align: right
}

.overflow-x-auto {
  overflow-x: auto
}

/* =========================================================
   animacion de llenado de pool — css only, sin javascript
   ========================================================= */
@keyframes fill-pool {
  from { width: 0% }
  to { width: var(--pool-progress) }
}

.progress-fill {
  animation: fill-pool 1.2s ease-out forwards
}

/* =========================================================
   responsive global
   ========================================================= */
@media (max-width: 980px) {
  .wrap {
    padding: 24px 16px 60px
  }
}